Grid layout

Hey brunolabi,
Thanks for the video and screenshot, Can you please include a admin login in the private content area so we can take a closer look.

Best regards,
Mike

Hi,
That is odd, I’m going to have to look into this more. For now I worked around it by adding ID’s to the top two color sections and this css to WordPress > Customize > Additional CSS to manage the width between the columns:

#top #sec1 .av-flex-placeholder {
    width: 5px!important;
max-width: 5px !important;  
}
#top #sec2 .av-flex-placeholder {
    width: 10px!important;
max-width: 10px !important;  
}

Best regards,
Mike

Hi,
To remove the padding from the first section, please try:

#top.home #sec1 .container .content {padding: 0px !important;}

Please adjust to suit.
I also imagine you would like to reduce or remove the padding from the second section:

#top.home #sec2 .container .content {padding: 20px !important;}

Please adjust to suit.

Best regards,
Mike

Hi,
Do you mean that when you click a box it is a link?
Try this solution
Or if is some action on hover, please describe a little more, but linking, (going to a new page or element) can only be done by clicking.

Best regards,
Mike

Hi,
How about a hover-over color change and click to another page? Can I test on your site?

Best regards,
Mike

Hi,
I added links to your 1/4 columns by adding a unique class to each: linkabout, linkblog, linkwork, & linkservice
I named each class as to the page they would link to.
Then I added this function to your functions.php to make the links for each:

add_action('wp_footer', 'link_about');
function link_blog(){
?>
<script>
$(".linkblog").click(function() {
    window.location = "https://mrtree.000webhostapp.com/blog/";
});
</script>
<?php
}
add_action('wp_footer', 'link_blog');
function link_work(){
?>
<script>
$(".linkwork").click(function() {
    window.location = "https://mrtree.000webhostapp.com/contact/";
});
</script>
<?php
}
add_action('wp_footer', 'link_work');
function link_service(){
?>
<script>
$(".linkservice").click(function() {
    window.location = "https://mrtree.000webhostapp.com/service/";
});
</script>
<?php
}
add_action('wp_footer', 'link_service');

So as of right now each box links to a page.
What is left is to add the css for the hover effect, here I will give you 4 choices:
1: this makes the image fade on hover:

.linkabout:hover,.linkblog:hover,.linkwork:hover,.linkservice:hover {
  opacity: 0.5;
  transition: .5s ease;
}

2: this hides the image and allows the background color to show:

.linkabout:hover,.linkblog:hover,.linkwork:hover,.linkservice:hover {
  background-image: none !important; 
  transition: .5s ease;
}

3: this applies a grayscale filter to the image:

.linkabout:hover,.linkblog:hover,.linkwork:hover,.linkservice:hover {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

4: this applies a saturate filter to the image, this may be the best:

.linkabout:hover,.linkblog:hover,.linkwork:hover,.linkservice:hover {
  -webkit-filter: saturate(5);
  filter: saturate(5);
}

Try these out and see which you like best.

Best regards,
Mike

Hi,
Sure, just add: cursor: pointer; to your code, like this:

.linkabout:hover,.linkblog:hover,.linkwork:hover,.linkservice:hover {
  -webkit-filter: saturate(5);
  filter: saturate(5);
  cursor: pointer !important; 
}

Best regards,
Mike

Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
and the video tutorials here
And if there are features that you wish Enfold had, you can request them and vote the requested ones here
For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

Best regards,
Mike