Hi,

Thank you for the info.

You will need to switch to the Advanced Layout Builder to use the Product Grid element on the product page, or use the element’s shortcode in one of the template hooks.

Example:

add_action( 'woocommerce_after_single_product_tabs', 'av_woocommerce_after_single_product_tabs_mod', 100 );

function av_woocommerce_after_single_product_tabs_mod() {
    echo do_shortcode("[av_productgrid select_type='' categories='' link='' term_rel='' wc_prod_visible='' wc_prod_hidden='' wc_prod_featured='' wc_prod_sale='' wc_prod_additional_filter='' sort='dropdown' prod_order='' offset='0' page_element_filter='' columns='3' image_size='shop_catalog' items='9' paginate='yes' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' alb_description='' id='' custom_class='' template_class='' element_template='' one_element_template='' show_locked_options_fakeArg='' av_uid='' sc_version='1.0']
");
}

For this type of modification, we recommend hiring a freelance developer or contact Codeable.

— https://kriesi.at/contact/customization

Best regards,
Ismael

Hey wesdorman,

Thank you for the inquiry.

There might be a slight difference between the desktop and mobile views due to their aspect ratios, especially with the background image. For the font size, make sure to define a specific size for smaller screens. We tried logging into the site, but it’s asking for .htaccess authentication. Please provide the login info in the private field.

Best regards,
Ismael

Hey limedrop,
Go into the project settings, then click on “hide on mobile”

Best regards,
Mike

Hi,
I believe you are referring to this:

when I test the css above I see this:

If this is not what you meant perhaps a screenshot would help.
To add a screenshot please try using an Screenshot service and pasting the image URL in your post.

Best regards,
Mike

Hi,
I understand that you don’t understand what we are trying to explain, so for this page: https://photomagx.com/travel-photography/photo-magazine-extras-top-hotels-photography-spots-2018/ try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.avia_textblock a strong {
  color: blue !important;
}

After applying the css, please clear your browser cache and check.
It should work on other pages, but if you find one that it doesn’t work on, link to it and we will provide another css snippet.

Best regards,
Mike

Hey Kelly,
I believe this is because the sub-menu link “About Us” has a link to your homepage/#top:

Try correcting this link.

Best regards,
Mike

Hi,
Please use the “Shrinking Header” option at Enfold Theme Options ▸ Header ▸ Header behavior ▸ Shrinking Header

Best regards,
Mike

Hey AuroraArcus,
You have a empty image element above each image element, so that is two image elements in each columns, for example this is the empty one:

and this is the one below it with the image:

so please delete the empty ones. You can find them by moving your pointer just above the visible image.

Best regards,
Mike

Hi,
You want a 1500x1500px image under the category title?
1500px height would basically be full screen height, right?
Do you want the image under the title or the title to be overlayed on the image?
This will not be so easy.

Best regards,
Mike

Hi,

Thank you for the update.

You can disable the hover animation of the Image element by adjusting the Advanced > Animation > Image Hover Effect settings. You can also add the following css code but it will affect all Image elements in the site.

.avia-image-container .avia_image, .avia-image-container .avia-image-overlay-wrap {
    transition: none;
}

.avia-image-container.av-hover-grow .avia-image-overlay-wrap:hover {
    transform: none;
}

Best regards,
Ismael

Hey digitalrefresh,
It looks like your Google reCaptcha setting in the cookies is set to make all items disabled until manually checked:

so if you manually check this and then reload your contact form button will show:

Check your Default Cookie Behaviour settings, I think you are using “Essential cookies are accepted on first page load, user must opt in” try changing to “All cookies and services are accepted on first page load, user can opt out”

and also check “Advanced Options” and use “Auto reload on “Accept Settings …” only” so the page is reloaded.

Best regards,
Mike

Hi,
I added this css:

.category .title_container h1 a {
font-size: 300%!important;
line-height: 55px;
font-family: "sacramento", cursive;
font-weight: 400;
}

and this code to your to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_script() { ?>
  <script>
(function($){
  $('#top.category .title_container h1.main-title.entry-title  a').contents().filter(function() {
    return this.nodeType == 3
  }).each(function(){
    this.textContent = this.textContent.replace('Archive for category:','');
    this.textContent = this.textContent.replace('Tag Archive for:','');
    this.textContent = this.textContent.replace('Archive for:','');
  });
  })(jQuery);
</script>
  <?php
}
add_action( 'wp_footer', 'custom_script', 99 );	  

the result now:

Please clear your browser cache and check.

Best regards,
Mike

Hi,
I disabled your Enfold Theme Options ▸ Header ▸ Header Layout ▸ Header Title and Breadcrumbs ▸ Display only title and added this to your code to the end of your child theme functions.php file in Appearance ▸ Editor:

add_filter('avf_header_setting_filter', 'avf_header_setting_filter_mod', 50, 1);
function avf_header_setting_filter_mod($header_settings) {
    if (is_tax() || is_archive()) {
        $header_settings['header_title_bar'] = "title_bar";
    }
    return $header_settings;
}

to only show the title on your category pages.
and I added this css:

.category .container_wrap_first {
	border: none;
}
.category .title_container {
	text-align: center;
	padding-top: 50px;
	background-color: #f2f0eb !important;
}
.category .title_container h1 a {
	font-weight: 600 !important;
	line-height: 1.3em;
	font-size: 30px;
}

so compared to one of you posts:

your category title looks like this:

But note that they are both H1, I don’t see H2 like you asked.

Best regards,
Mike

Hey rixi,

Thank you for the inquiry.

It’s possible that the sections below the gallery are not loading due to the number of images on the page. There are nearly 80 images in the gallery, and most of them are over 100KB in size, accumulating to almost 12MB in total, which is quite large. This could affect the script that triggers the animation for the elements. We recommend reducing the number of images or enabling the pagination or the “load more” button.

Best regards,
Ismael

Hi,

Thank you for the inquiry.

Did you set the Gallery element’s Advanced > Link Settings > Image Link option to ‘Use custom link (fallback is image link)’? When the custom link field is not set, it should default to the image link and open a lightbox if enabled.

Best regards,
Ismael

Hey mosaic,

Thank you for the inquiry.

Try to add this css code to adjust the aspect ratio of the thumbnails:

#top .av-related-style-full .related_image_wrap, #top .av-related-style-full .related_image_wrap img, #top .av-related-style-full .related_image_wrap .related_posts_default_image {
    object-fit: cover;
}

Best regards,
Ismael

Hi,

It is actually working, but the number of images affects the animation and loading speed. You can see it more clearly on the test page we created. (see private field)

Best regards,
Ismael

Hey ballindigital,

You can remove the linked image overlay under Enfold->Advanced Styling. Please post a link to where we can see the actual elements so that we can have a look at the border.

Best regards,
Rikard