Hi,

I don’t understand why the size of the model image (enfold gym) is 1500 x 720 and the actual height of the page banner is 420…

Please note that the section size depends on the content, not the background image. We recommend uploading images at least the same size as the demo image, with a 16:9 aspect ratio. However, if you’re trying to focus on a specific part of the image, this will require a lot more adjustments. You may need to use css to adjust the background position and, as recommended, disable the parallax and fixed effects. We also noticed that the part you’re trying to focus on is not vertically or horizontally aligned in the actual image, so you may need to adjust this as well.

And regarding the image quality, the theme already sets this to highest quality possible (100 or 100%) but if you need to adjust it, you can add this filter in the functions.php file:

add_filter("avf_jpeg_quality", "avf_set_quality_mod", 9999, 1);
add_filter("avf_wp_editor_set_quality", "avf_set_quality_mod", 9999, 1);
function avf_set_quality_mod($quality) { $quality = 100; return $quality;}

Best regards,
Ismael

Hi,

Thank you for the inquiry.

The content slider is activated using the AviaSlider function. You’ll find this in the enfold/js/shortcodes.js file around line 205. You may need to use the same function to re-initialize the slider inside the lightbox container.

//content slider
$( '.avia-content-slider-active', container ).aviaSlider({wrapElement: '.avia-content-slider-inner', slideElement: '.slide-entry-wrap', fullfade: true});

The AviaSlider function can be found in the enfold/config-templatebuilder/avia-shortcodes/slideshow/slideshow.js file.

Best regards,
Ismael

Hey Silje,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 1439px) { 
	.single-product .avia-svg-icon svg:first-child,.single-product .avia-svg-icon img[is-svg-img="true"] {
    height: .5em;
    width: .5em;
}
#top.single-product .avia-slideshow-arrows a.avia-svg-icon svg:first-child {
	margin-top: 9px;
}
#top.single-product .av-slideshow-ui.av-loop-manual-endless .avia-slideshow-arrows > a, #top.single-product .av-slideshow-ui .avia-slideshow-arrows.av-visible-prev > a.prev-slide, #top.single-product .av-slideshow-ui .avia-slideshow-arrows.av-visible-next > a.next-slide {
	width: 30px;
	height: 30px;
  line-height: 30px;
}
}

After applying the css, please clear your browser cache and check.
Please note that testing with iPads & iPhones can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hey Baden,
Thank you for your patience and for your workaround.
The Dev Team and I do not have experience with this plugin in setting it up to recreate the error, it is not a plugin that we support, we are limited to our support for third party plugins.
The Dev Team has decided that in this case we will point any other users to your workaround, should there be any in the future, but not make any core changes at this time, perhaps in the future we will.
Thank you for your understanding and for using Enfold.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Try using the TinyPNG plugin on your large hero images, when I test one of your images on the TinyPNG site it reduced it by 40%

using smaller sized images probably would help, or using the Enfold Theme Options ▸ Preloader

Best regards,
Mike

Hey Joerg Haustein,
Deactivating the plugins Xtrail Core & WPBakery Page Builder solves.
Please note that Enfold has it’s own builder and adding other builders typically cause errors.

Best regards,
Mike

Hey jhaustein,
Deactivating the plugins Xtrail Core & WPBakery Page Builder solves.
Please note that Enfold has it’s own builder and adding other builders typically cause errors.

Best regards,
Mike

Hi jhaustein,

Please open a new thread and include WordPress admin login details in private, so that we can have a closer look at your site.

Best regards,
Rikard

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.avia-icon-list .iconlist_icon svg:first-child, .avia-icon-list .iconlist_icon img[is-svg-img="true"] {
    margin-top: 11px;
    margin-left: -6px;
}
.avia-svg-icon svg:first-child, .avia-svg-icon img[is-svg-img="true"] {
    height: 1em;
    width: 2em;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Try adding this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top.page-id-1424 .header_color.av_header_transparency .avia-menu-fx {
	background: #7d8286;
}

After applying the css, please clear your browser cache and check.
please note the page ID in the css page-id-1424

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Glad Ismael could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.avia-icon-list li {
    padding: 0;
}
.avia-icon-list-container {
    margin: 0;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top.page-id-1424 #header.header_color.av_header_transparency .av-main-nav > li > a .avia-menu-text {
	color: #7d8286;
}

please note the page ID in the css page-id-1424

Best regards,
Mike

Hi,
Glad Ismael could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike