Hi,
Great, well the first step is to ensure you have the Enfold Theme Options > Layout Builder > Show element options for developers option checked so you can add custom classes:

Then when you add a image, include a custom class, add a different custom class to each image:

Then copy the url to the other inage you are going to use, from the media library:

then add your custom class in two places and your image url to your css:

#top .avia-image-container.image-1 img:hover {
opacity: 0 !important; 
transition: opacity 1s linear !important; 
}
#top .avia-image-container.image-1 {
background: url('https://127.0.0.1/2017demo1/wp-content/uploads/2015/07/portfolio-4-1.jpg') !important;
background-size: contain !important; 
}

and that is it :)

Best regards,
Mikev

Hi,
Glad to hear, thanks for using Enfold.
For your information, you can take a look at Enfold documentation 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

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
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

Hi,
Ok, please try this css:

li.product.product-type-simple .avia_cart_buttons a.button.show_details_button,li.product.product-type-simple .avia_cart_buttons span.button-mini-delimiter {
display: none !important;
}
li.product.product-type-simple .avia_cart_buttons a.add_to_cart_button {
width: 100% !important; 
}

If this doesn’t help please include the url to the page in question so we can take a closer look.

Best regards,
Mike

Hi,
Please see the screenshot in Private Content area, of before and after to ensure we are talking about the same element. If after clearing your browser cache it still doesn’t work, then Please include a admin login in the Private Content area so we can take a look.

Best regards,
Mike

Hi,
Unfortunately the element is now set up for “transform” which is for 2D or 3D animation, and what you want is “transition” which is for values to occur smoothly over a specified duration. But they can not be just switched out one for the other, the HTML also needs to be different.
But we can replace the image on the page with a transition on hover, this css will only target the one image on the page of the surfer girl, and on hover will slowly swap it out. To test add this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

#top.page-id-10723 .avia-image-container.avia-builder-el-7 img:hover {
opacity: 0 !important; 
transition: opacity 1s linear !important; 
}
#top.page-id-10723 .avia-image-container.avia-builder-el-7 {
background: url('https://new.restube.com/wp-content/uploads/2018/11/MG_0710-1-845x684.jpg') !important;
background-size: contain !important; 
}

If you want to use this on other images you will need to set a custom class to each image so it can be targeted, with the Enfold Theme Options > Layout Builder > Show element options for developers
and I can explain the code so you can do it.

Best regards,
Mike

Hi,
That was the idea, the thought was to change the max width for the mobile header layout so that it would cover phones in landscape>
Instead, try going to: Enfold Theme Options > Main Menu > General > Menu Items for mobile, and change to 990px

Best regards,
Mike

Hi,
Thanks, I found the error, Please clear your browser cache and check.

Here’s the final css:

@media only screen and (max-width: 767px) { 
.responsive #top #wrap_all .avia-content-slider-odd .slide-entry.slide-parity-even,.responsive #top #wrap_all .avia-content-slider-even .slide-entry.slide-parity-odd {
    clear: none !important; 
}
.responsive #top .avia-smallarrow-slider .flex_column {
    margin: 0px!important;
    width: 25%!important;
}
.responsive #top #wrap_all .avia-content-slider-odd .slide-entry {
    clear: none !important; 
}
}

Best regards,
Mike

Hi,

@marcoricci76, I believe you are talking about this element:

the reason the sub-heading is in multiple lines is because the “.slideshow_caption” element is only 42% of the page, this will correct that.
Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

.slideshow_caption {
    width: 100% !important; 
}

To change the font, please use this css:

.slideshow_caption h2.avia-caption-title,.slideshow_caption .avia-caption-content {
     font-family: 'Roboto' !important; 
}

Please adjust the font to suit, and Then clear your browser cache and any cache plugin, and check.
Please note that if you are using a font that is not already displaying on the same page, you should upload it to Enfold Theme Options > Import/Export > Custom Font Manager to force it to display.

Best regards,
Mike

Hi,
@Anton, I would not recommend including your login here, as this is not your post, your details will not be private.
Perhaps it would be better to open your own thread.
I don’t know why it would not work on an iPad, but I did find a topic that points to scroll not working with iPad, unfortunately, I don’t have an iPad to test with.

Best regards,
Mike

Hi,
Sorry for the late reply, to replace the breadcrumb title, Try adding this code to the end of your functions.php file in Appearance > Editor:

function replace_breadcrumb_title(){
  ?>
  <script>
(function($){
  $(document).ready(function(){
  $(".breadcrumb-title").text("Je bent hier:");
 });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'replace_breadcrumb_title');

To change the auto-respond header “Thank you for your message” you will need to change line 460 in \enfold\config-templatebuilder\avia-shortcodes\contact\contact.php
Then add the directory /shortcodes/ to your child theme,
then copy the /contact/ directory to it with all 3 files in it, contact.js, contact.css, contact.php
so you will have this path: /enfold-child/shortcodes/contact/
Then add this code to the end of your functions.php file in Appearance > Editor:

add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);
function avia_include_shortcode_template($paths)
{
  $template_url = get_stylesheet_directory();
      array_unshift($paths, $template_url.'/shortcodes/');

  return $paths;
}

now your child theme contact element will overwrite the theme contact element, you can read more here.

Best regards,
Mike

Hi,
Sorry for the late reply, I took a look at your page and I believe the issue is that you have too many tags. The tags are meant to work like a single line of words, like breadcrumbs along the top of the element, where you might have a handful of keywords to choose from.
Please see our demo:

I would recommend reducing your keywords.
But one option would be to use this css in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

#top.page-id-9 .av-accordion-tab-sort-filter .taglist a {
    display: inline-block !important; 
    width: 31% !important; 
}

This would be the expected results:

Best regards,
Mike

Hi,
Thanks for the login, I took a look and also tried to research possible reasons for it but didn’t find any answers.
When I look at your page source code the “locations” is not in the code:

and as you said, even switching to the Twenty Seventeen theme didn’t make it show, so it’s safe to say this is an issue with the plugin. Since you have the Pro version, I would recommend asking The Events Calendar support, as this may be something they know about.
Sorry I wasn’t more help.

Best regards,
Mike

Hi,
Please remove the css above, and try this instead:

@media only screen and (max-width: 767px) { 
.responsive #top #wrap_all .avia-content-slider-odd .slide-entry.slide-parity-even {
    clear: none !important; 
}
.responsive #top .avia-smallarrow-slider .flex_column {
    margin: 0px!important;
    width: 25%!important;
}
.responsive #top #wrap_all .avia-content-slider-odd .slide-entry {
    clear: none !important; 
}
}

If this doesn’t help, please include a admin login in the private content area so we can be of more assistance.

Best regards,
Mike

Hi,
I see that you are using Enfold v4.4.1 with WordPress v5.0.3, you will need to update Enfold to the latest version.
Since your version of Enfold is using the old Envato API instead of the Token, which is now used, you will need to manually update.
You can update via FTP or with a plugin called Update Theme and Plugins from Zip File, Please note that if you update via FTP, you will need to remove the old theme folder “enfold” first (via FTP) then upload the new “enfold” folder at /wp-content/themes/enfold/
Please don’t try to overwrite the theme folder, as this will leave old files behind and cause errors.

Here are the steps to update with the plugin
*Please ensure your “PHP Max Upload Size” is at least 20mb, because Enfold is 16.7mb.
First go to your Theme Forest account and download the “Installable WordPress file only”.

1: please install the plugin: Update Theme and Plugins from Zip File

2: then go to WordPress > Themes > Add New > Upload

3: after the install, click “Return to Themes page” (NOT Activate)

4: success:

Best regards,
Mike