|
Providence Art Club
|
March 1, 2019 at 2:12 pm
Hi
I am trying to use the EE grid-view to come up with a layout similar to the one we are using in Beaver Builder .
Can I bring in the EE events information into Beaver Builder? Or do I need to make a new template for EE grid view? I have an example of our homepage here http://igi.385.mwp.accessdomain.com
The top two blocks bring in the EE shortcode, with some custom CSS, but the images are still too small. The bottom rows are Beaver Builder (using UABB Modules Advanced Posts). I would like the EE blocks to look like the Beaver Builder, 3 across.
Any help appreciated. Thank you! Kathy
|
|
Josh
|
March 1, 2019 at 2:36 pm
Hi,
What you could do is use the Event Espresso Beaver Builder plugin, which allows for adding Event Espresso Grids to Beaver builder blocks. You’ll still need the Grid view plugin activated, but you can manage the grid view options within Beaver Builder. Here’s a link to where you can download the plugin:
https://github.com/eventespresso/eea-beaver-builder
|
|
Providence Art Club
|
March 5, 2019 at 8:39 am
Thanks Josh, I did install the Event Espresso Beaver Builder plugin, but it still needs custom css to style to bring it closer to our previous style. I still don’t know how to change the column width to 3 across though. Is there a way I can match my top row (EE) to my previous style in the bottom rows? Also, is there a way to display only certain category in a custom query?
http://igi.385.mwp.accessdomain.com
|
|
Josh
|
March 5, 2019 at 9:47 am
What you could do in this case is make changes to the grid template to make its html match the html of the other layout. You’ll copy over the grid plugin’s espresso-grid-template.template.php file over to your child theme, then swap out the html so it matchs your other grid layout
With regards to only displaying events in a specific category, you can add a category-slug parameter to the shortcode. e.g.
[ESPRESSO_GRID_TEMPLATE category_slug='my-category-slug]
|
|
Providence Art Club
|
March 5, 2019 at 10:22 am
Thanks for the quick response. Unfortunately, the original creator of the website did not set up a child theme 🙁 so I will have to attempt to do that without losing my settings. Then I will try your suggestions, thanks!
Kathy
|
|
Josh
|
March 5, 2019 at 10:41 am
Hi Kathy,
Here’s a guide that explains how to set up a child theme:
https://developer.wordpress.org/themes/advanced-topics/child-themes/
|
|
Providence Art Club
|
March 6, 2019 at 12:08 pm
Hi, I successfully set up my child theme, and found espresso-grid-template.template.php but am not sure which php file in my Beaver Builder modules to copy. I am kind of clueless about php, is it possible to change the grid view to be 3 across using custom css? Thanks!
|
|
Josh
|
March 6, 2019 at 1:36 pm
I don’t think you’ll need to copy anything directly from Beaver Builder. Instead, what you’ll do is check the source of the web page (html) and copy/replace the html tags from the desired layout into the Grid template.
In other words, you’ll only be changing the html parts of the file, no PHP editing should be needed.
|
|
Providence Art Club
|
March 7, 2019 at 10:25 am
Hi,
Still not quite there. I did create a child theme, then decided to simplify and create a page on our live site to test. I didn’t use the Event Espresso Beaver Builder plugin, since it didn’t have the editing features I wanted anyway. I still used Beaver Builder but just placed the shortcode in BB’s html box.
I managed to enlarge the pictures, by using
$feature_image_url = $post->EE_Event->feature_image_url ( array 345,242) );
but still not sure where in the html below to change the gride to 3-across.
<div class=”ee_grid_box_v2 item”>
![]() ” alt=”” />
<div onclick=”” class=”darken ee_overlay”>
<p class=”event-link”><?php echo ‘ID .'” href=”‘ . $registration_url . ‘”>’ . $button_text . ‘‘; ?></p>
<div class=”event-title title”><?php echo $post->post_title; ?></div>
<p class=”start-date”><?php echo $startdate; ?></p>
</div>
</div>
My new page is at https://providenceartclub.org/test-expresso/
Any help appreciated!
Thanks,
Kathy
|
|
Tony
|
March 8, 2019 at 10:37 am
Hi Kathy,
Looking at the page you linked to it already is 3 across, have you fixed this already?
|
|
Providence Art Club
|
March 8, 2019 at 10:42 am
no, It’s just that I have 3 test events set up,but I want them to go the full width of the page, which is 1200 px wide (like https://providenceartclub.org/ homepage)
|
|
Tony
|
March 11, 2019 at 5:11 am
Oh, I see.
For that you’ll need to override the default styles, you can use soemthing like this:
.ee_grid_box_v2.item {
max-width: 30%;
margin: 0 1%;
}
.ee_grid_box_v2 img {
width: 100%;
}
Add that to Appearance -> Customize -> Additional CSS.
|
|
Providence Art Club
|
March 12, 2019 at 8:15 am
Thank you, that worked!
|
|
Providence Art Club
|
March 12, 2019 at 8:19 am
Now that we’ve solved that problem for desktop, any chance we can have a responsive view for mobile? Can the events be stacked, just one accross? Thank you, we are getting close to changing our event over to EE. 🙂
|
|
Josh
|
March 12, 2019 at 9:59 am
You can add breakpoints after the above, e.g.
.ee_grid_box_v2 img {
height: auto;
}
@media screen and (max-width: 992px) {
.ee_grid_box_v2.item {
max-width: 45%;
margin: 7px;
}
}
@media screen and (max-width: 768px) {
.ee_grid_box_v2.item {
max-width: 100%;
}
}
|
|
Providence Art Club
|
March 12, 2019 at 10:10 am
Perfect! You guys are the best, thank you!
|
