Hi,
I’m wondering if there is a way to build a grid in Pro like I built in the essential grid plugin (screenshot below). Without going through the hassle of trying to trial and error this with column bg images, I’m wondering if I should try and build a grid in pro and what the benifits of using the plugin are. I know it is probably better to not use many plugins but I’m not sure I’ll be able to acheive a grid like effect without a lot of hassle. Thanks for your advice!
Hello Erin,
Thanks for writing in!
You can actually replicate this grid layout with Pro editor. Simply do the following:
1.) Insert a section, row and column.
2.) In your column, insert another row element with 2/3 + 1/3 columns
3.) Insert another row element again with 1/3 + 1/3 + 1/3 columns
4.) Add a background image to each of the columns.
5.) In each columns, insert a Text element and a button element.
6.) Go back to your section settings, find the “Customize” tab and insert this element css:
$el.section .x-col > * {
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease;
}
$el.section .x-col:hover > * {
opacity: 1;
visibility: visible;
}
We would love to know if this has worked for you. Thank you.
Hi, thank you for your reply!
I tried it using the card element. One card in each column. It allowed me to create a rollover effect with text and button on top. I was not sure how to acheive the rollover. Would this code you suggest in your build acheive this? It looks like it might.
The problem with the card build method is that It only has the “flip” animation. I could change that? If I remove the flip then its just a simple hover/rollover to the text/button. If I put the background image as both front/back image.
Let me know if I can aheive an animation similar with blur bg, text slide down, button fade. Or something similar.
Thank you for your help!
Hello Erin,
Thanks for the updates.
With the card elements, you can only have flip animation. With the column background build, you can have fade in fade out elements when hovered. Added blur, text slide and other animation effects can be done with more custom developments which is beyond the scope of our support.
If you an give me access to your site, I might be able to create an example using the column background build. Please provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288
Regards.
Hello,
Thank you very much! I acutally started this build already, however, I am having issues with the spacing. Also I input the code but it does not appear to be showing when I preview the site. Same with the spacing, it does not look like in the builder. So yes, I’d love your help. Login info is in the secure note. Thank you!
secure note question
Hello Erin,
I created a test page and I am using this custom element css in the Section setting’s “Customize” tab
$el.x-section .x-col > .x-text,
$el.x-section .x-col > .x-anchor,
$el.x-section .x-col .x-bg-layer-upper-color{
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease;
}
$el.x-section .x-col:hover > .x-text,
$el.x-section .x-col:hover > .x-anchor,
$el.x-section .x-col:hover .x-bg-layer-upper-color{
opacity: 1;
visibility: visible;
}
Please check the secure note.
Great! I will check it out and let you know how it goes.
Awesome!
If you need anything else, please let us know.
Ok, so I’ve got it all together, with your excellent help, thank you!
I just have one question: what do I do about this issue at different break points? Is this because they are in seperate rows? Let me know what is the best way to stagger the breakpoint issue…
Thank you! It looks great!
Hello Erin,
I created two rows because in your example, it has different number of column. You can always set the rows to have the same number of columns in specific screen sizes. I would highly recommend that you check out this video tutorial first to be familiar with the Row and Column element.
Hope this helps.
Thank you, oh yes true. Great, thanks for your help again!
You are most welcome!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.