Hi,

Thank you for the update.

We tried to login using the account but it’s invalid. Please note that the Portfolio Grid element doesn’t have an overlay option by default. You have to use the Image element and enable the caption. Or use the Masonry element and set its Content > Caption > Element Title and Excerpt Styling to the second option (Display as centered overlay).

Best regards,
Ismael

Hi,

Thank you for the update.

The extra spaces are from the slideshow and image elements inside the cells. You can use this css code to remove those spaces or margins.

.flex_cell_inner .avia-image-container, .flex_cell_inner .avia-slideshow {
	margin: 0;
	padding: 0;
}

Best regards,
Ismael

Hi,

Then I copied an accordion element in the Layout editor, the page Layout now crashed again in the frontend, as described in a previous post.

Why do you have to copy the shortcode in the builder? As we mentioned above, you have to avoid switching between the editors and try to stick to the current editor. If you need to edit the shortcode manually in the builder, please switch the builder to debug mode so that you can have access to the debug or shortcodes field.

// https://kriesi.at/documentation/enfold/intro-to-layout-builder/#debug-mode

PS: I did not replace [ ] and ‘ in the “code” like e.g.:

And in cases where you really have to manually copy the shortcode, make sure that the syntax are correct and that they are closed properly. This is the correct markup or shortcode of an accordion element.

[av_toggle_container initial='0' mode='accordion' sort='' styling='' colors='' font_color='' background_color='' border_color='' colors_current='' font_color_current='' background_current='' background_color_current='' background_gradient_current_color1='' background_gradient_current_color2='' background_gradient_current_direction='vertical' hover_colors='' hover_background_color='' hover_font_color='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' alb_description='' id='' custom_class='' av_uid='']
[av_toggle title='Toggle 1' tags=''][/av_toggle]
[av_toggle title='Toggle 2' tags=''][/av_toggle]
[/av_toggle_container]

Make sure to close it properly.

[/av_toggle_container]

Best regards,
Ismael

Hi,

Sorry for the delay. The flex column breaks because of the float property in this css code.

#top .flex_column_table {
    display: table;
    table-layout: fixed;
    width: 100%;
    float: left;
    margin-top: 50px;
}

Did you add it somewhere? You should set it to none or remove it.

And please note that the cell containing the background image has no intrinsic height because it contains no content and only depends on the height of the other cell with the text, so when the cells stack beside each other, it collapses. That’s how table cells work.

// https://www.w3.org/TR/CSS21/tables.html#height-layout

the height of a cell box is the minimum height required by the content.

Best regards,
Ismael

Hey fcp,

Thank you for the inquiry.

Did you try to move the position of the category items by dragging them? Beside the Count column in the product categories page, there’s a dragger icon that you can use to move a category to a different position. This should make the category widget display the actual category order.

Best regards,
Ismael

Hey Phet,

Thank you for the inquiry.

Did you set the Enfold(FR) > Sidebar Options > Sidebar on Archive Pages to have a right or left sidebar? The sidebar doesn’t display in the FR version because the archive template is set to fullwidth, or it is set to display no sidebar.

Best regards,
Ismael

Hi,

Sorry for the late response. Did you add this script in the functions.php file as suggested in the previous threads?

dd_action('wp_footer', 'ava_auto_resize');
function ava_auto_resize(){
?>
<script>
(function($){	
	var int = window.setInterval(function(){
		$(window).trigger('resize');
	}, 1500);
	
	$(window).load(function () {	
		setTimeout(function() {
			clearInterval(int);
		}, 2000);
	});
})(jQuery);
</script>
<?php
}

This should cause the gallery items to reposition and prevent them from overlapping while the images are still loading. The script should stop by itself once the images are fully loaded.

Best regards,
Ismael

Hi,

Sorry for the delay. As the description suggests, the “Essential cookies are accepted on first page load, user must opt in” option automatically stores essential cookies (e.g aviaPrivacyEssentialCookiesEnabled) in the local storage even if the user didn’t accept the cookies or opt to essential cookies using the privacy toggles, but all external cookies (e.g aviaPrivacyGoogleMapsDisabled ,aviaPrivacyGoogleReCaptchaDisabled) or cookies that controls external services are disabled by default, so users have to opt in or toggle them manually.

In the other option, users have to accept the cookies first before essential cookies can be stored in the local storage, and all external or non-essential cookies are also disabled by default, so users have to opt in or enable them manually either in the privacy policy page or the modal popup window.

Best regards,
Ismael

Hey Christopher,

Thank you for the inquiry.

We can manually add the button as an image in the caption field or adjust the style of the slider button. Have you tried doing something like that? Please post the site URL so that we can inspect the slider.

Example:

<img src="URI OF THE IMAGE BUTTON class="slider-button-custom" />

For additional style adjustment, use the custom class attribute above.

.slider-button-custom {
 /* more styles here */
}

Best regards,
Ismael

Hi,

or resolution? Is this assumption correct?

1.) Yes, that is correct. The theme will only load the predefined thumbnail because the srcset attribute is not present in the template, so you have to upload images that are big enough on any type of device. If you want, you can install a third party plugin that adds srcset attribute to images.

// https://wordpress.org/plugins/wp-retina-2x/

2.) Also correct. Uploading larger images is not necessarily bad because you can still compress them and given proper optimization on other areas of the site, it should still load fast on any device. But having the srcset attribute in the template or the image tag is still the better solution. Please try the plugin above.

Best regards,
Ismael

Hi,

Sorry for the delay. The main menu is not fully accessible without a mouse, but it’s already inside a nav tag and the menu items are wrapped inside an unordered list, so they should be properly recognized by assistive technologies as described in the documentation and you should be able to navigate using a keyboard.

// https://www.w3.org/WAI/tutorials/menus/structure/

If you want to add the role and aria-label attribute to the nav tag, edit the wp-content\themes\enfold\includes\helper-main-menu.php file and look for this code around line 170..

 $main_nav = "<nav class='main_menu' data-selectname='".__('Select a page','avia_framework')."' ".avia_markup_helper(array('context' => 'nav', 'echo' => false)).">";

.., then replace it with:

 $main_nav = "<nav role='navigation' aria-label='Primary'  class='main_menu' data-selectname='".__('Select a page','avia_framework')."' ".avia_markup_helper(array('context' => 'nav', 'echo' => false)).">";

// https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA6

We can also add the role attribute to menu items by editing the wp-content\themes\enfold\includes\helper-responsive-megamenu.php, look for this code around line 270:

$attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';

Below, add the role and tabindex attribute:

$attributes .= ' role="menuitem" tabindex="0"';

Best regards,
Ismael

Hey dfpg,

Thank you for the inquiry.

How did you add the search bar? If you’re using the default search bar from the theme, try to edit the wp-content > themes > enfold > searchform.php file.

	<input type="text" id="s" name="<?php echo $search_params['search_id']; ?>" value="<?php if(!empty($_GET['s'])) echo get_search_query(); ?>" placeholder='<?php echo $search_params['placeholder']; ?>' />

Best regards,
Ismael

Hi,

Sorry for the delay. You can’t use the srcset attribute for background images. It will only work on an actual image element or when using the img tag.

Example from https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images:

<img srcset="elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 600px) 480px,
            800px"
     src="elva-fairy-800w.jpg"
     alt="Elva dressed as a fairy">

So it’s not going to work for the color section because the image is set as background.

Best regards,
Ismael

Hi,

We are not really sure why it’s not working in your server. Have you tried removing the transients?

// https://www.wpbeginner.com/plugins/how-to-manage-and-delete-transients-in-wordpress/

If it still doesn’t work after removing the transients, please try to update the theme manually this time.

// https://kriesi.at/documentation/enfold/theme-update/#update-via-ftp

Best regards,
Ismael

Hey Frank,

Sorry for the delay. Did you replace the ID in the snippet with the ID of the color section containing the blog posts or pagination?

var news = $('#transaksjoner'),

If the posts element is not inside a color section yet, try to move it inside one, then apply a unique section ID to the color section. You’ll find the Custom ID Attribute field in the Advanced tab of the color section. After defining the ID (e.g “custom-section”), go back to the script or snippet, look for the same line mentioned above and replace the selector with the custom ID.

var news = $('#custom-section'),

Best regards,
Ismael