Hey GoodfishGroup_Marketing,
Thank you for your question, this can be done with the Icon Grid element and the css below, note that we are using :nth-child to show a different image for each grid front and back, the css below is for three cells but you can have as many as you like.
Since images added like this don’t add a height to the page elements we need to also add height in the css, for my example I made the grid row 75vh so it looked full height, you should adjust to your needs.
Try to change the image URLs to your images and test

.avia-icon-grid-container li:nth-child(1) .avia-icongrid-wrapper .avia-icongrid-front {
  background-image: url(//enfold/wp-content/uploads/2022/02/man2.jpg)!important;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.avia-icon-grid-container li:nth-child(1) .avia-icongrid-wrapper .avia-icongrid-flipback {
  background-image: url(//enfold/wp-content/uploads/2022/02/man4.jpg)!important;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.avia-icon-grid-container li:nth-child(2) .avia-icongrid-wrapper .avia-icongrid-front {
  background-image: url(//enfold/wp-content/uploads/2022/02/woman4.jpg)!important;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.avia-icon-grid-container li:nth-child(2) .avia-icongrid-wrapper .avia-icongrid-flipback {
  background-image: url(//enfold/wp-content/uploads/2022/02/woman3.jpg)!important;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.avia-icon-grid-container li:nth-child(3) .avia-icongrid-wrapper .avia-icongrid-front {
  background-image: url(//enfold/wp-content/uploads/2022/02/man1.jpg)!important;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.avia-icon-grid-container li:nth-child(3) .avia-icongrid-wrapper .avia-icongrid-flipback {
  background-image: url(//enfold/wp-content/uploads/2022/02/man3.jpg)!important;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.avia-icon-grid-container li .avia-icongrid-wrapper .avia-icongrid-front .avia-icongrid-icon {
	display: none;
}

just in case you want to make your grid larger like in my example, this is the css I used:

.avia-icon-grid-container,.avia-icongrid-wrapper,.article-icon-entry {
	height: 75vh;
}
.responsive #av_section_1 > .container {
	max-width: 1810px;
}

If you have trouble with this then create a text page and include admin login in the Private Content area so we can be of more assistance.

Best regards,
Mike

Hi,
Thanks for the feedback I adjusted the script to this:

function custom_masonry_excerpt_button_script() { ?>
    <script>
var elements = new Array();
var elements = document.getElementsByClassName('av-masonry-entry-content');
for (var e = 0; e < elements.length; e++) {
    var newHTML = elements[e].innerHTML;
    newHTML = newHTML.replace('[buttoncode]','<span class="center-excerpt-button"><span class="avia-button avia-icon_select-yes-left-icon avia-size-large avia-position-center avia-color-theme-color"><span class="avia_button_icon avia_button_icon_left" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span><span class="avia_iconbox_title">SEE MENU</span></span></span>');
    elements[e].innerHTML = newHTML;
};
</script>
    <?php
}
add_action('wp_footer', 'custom_masonry_excerpt_button_script');

and I added this css to center the buttons:

span.center-excerpt-button {
	display: flex;
    justify-content: center;
}

Please clear any cache plugin and your browser cache and check.

Best regards,
Mike

Hi,
Glad Rikard 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

Hey Joe,
Thanks for the link to your site, do you see this only on the first view of the first image?
I checked on Windows in Chrome, Firefox, & Edge and didn’t see this, I looked for the first view and for a few times through the slideshow.
Please see the screenshot in the Private Content area.
I also checked on an Android phone, perhaps since the first image is of a man in a doorway, it is tricking the eye, try switching the first image with a different image to test.

Best regards,
Mike

Hey aradiasun,
Thanks for your question, here are two solutions,
the first is css and just makes the link not clickable, add this code in the General Styling ▸ Quick CSS field:

.av-magazine-author-link a {
	pointer-events: none;
}

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

The second solution removes the link, add this code to the end of your functions.php file in Appearance ▸ Editor:

function custom_script() { ?>
    <script>
(function($) {
$('.av-magazine-author-link a').each(function() {
    $(this).contents().unwrap().wrap('<span/>');

});
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'custom_script');

Best regards,
Mike

Hi,
Please disable your wpfc cache plugin, and then clear your browser cache.
If this doesn’t help then please include an admin login.

Best regards,
Mike

Hi,
Sure, I adjusted, please clear your browser cache and check.

Best regards,
Mike

Hi,
Oh I see, I thought you ment the site logo, but you ment the TeamViewer logo. Ok so I removed the previous topbar link and css and created a menu item with your TeamViewer link and added this css to use the TeamViewer logo image instead of the menu item text.

li#menu-item-1431 {
width: 30px;
background-image: url(https://www.chispasupport.ch/wp/wp-content/uploads/2022/02/icons8-teamviewer-30.png);
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
}
li#menu-item-1431 a {
opacity: 0;
}

please clear your browser cache and check.

Best regards,
Mike

Hey StuWeTueHo,
Thank you for the link to your site, please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

.av-magazine-time,.av-magazine-author-wrap,.av-magazine-cats-wrap,.av-magazine-tags-wrap {
	display: none;
}

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

Best regards,
Mike

Hey tammiviestinta,
Thank you for the link to your site I tested in Windows in Chrome, Firefox, & Edge and in all the title is red and the caption is white, please see the screenshot in the Private Content area.
Perhaps try clearing your browser cache, or disable your caching plugin and clear your browser cache again.

Best regards,
Mike

Hey condonpb,
For version 4.9 in avia-shortcodes > portfolio > portfolio.php find this in line 1128:
$output .= ! empty( $excerpt ) ? "<div class='grid-entry-excerpt entry-content' " . avia_markup_helper( array( 'context' => 'entry_content', 'echo' => false, 'id' => $the_id, 'custom_markup' => $custom_markup ) ) . ">{$excerpt}</div>" : '';
change to this:
$output .= ! empty( $excerpt ) ? "<div class='grid-entry-excerpt entry-content' " . avia_markup_helper( array( 'context' => 'entry_content', 'echo' => false, 'id' => $the_id, 'custom_markup' => $custom_markup ) ) . ">".do_shortcode($excerpt)."</div>" : '';

Best regards,
Mike

Hey condonpb,
The title showing above the gallery was an error that was corrected in v4.9, please update and clear your browser cache and any cache plugins and check again.

Best regards,
Mike

Hi,
Thanks for sharing your script, there seems to be an error in my filter but I couldn’t find it so I removed it and adjusted the message script to use your MasTag and this seems to work fine, see the two links below.
You can remove the $('#av-masonry-1.projectgallery').addClass(MasTag); from your script as this is not needed, only the var MasTag is used for the message script to match the child element tags.
This is what is now in your functions.php, please check.

function empty_masonry_message_script() { ?>
    <script>
		(function($) {
			if( $('body.single-product').length || $('body.anotherclass').length ){
		var BreadTrail = $(location).attr("href");
		var BreadTrailx = BreadTrail.replace('https://staging.idgadvertising.com/tiletech/product/concrete-pavers/', '');
		BreadTrailx = BreadTrailx.replace(/\/$/, "");
		BreadTrailx = BreadTrailx.replace(/\//g,"-");
		console.log(BreadTrailx);
		
		if (BreadTrailx.indexOf("porcelain-pavers") >= 0) {
			var PageTitle = $('.rightside .av-special-heading h1.av-special-heading-tag').text();
		PageTitle = PageTitle.toLowerCase().replace(/ /g, '-');
	var MasTag = 'tag-'+PageTitle;
		console.log(MasTag);
		
		$('#av-masonry-1.projectgallery').addClass(MasTag);

		} else {
			
	var MasTag = 'tag-'+BreadTrailx;
		console.log(MasTag);
			
		$('#av-masonry-1.projectgallery').addClass(MasTag); }
		
}

var nocat = $('<div class="nocat">No Current Projects</div>').css({'text-align':'center','font-size': '20px'});
$('#av-masonry-1 .av-masonry-container.isotope a').each( function() {
if (!$(this).hasClass(MasTag)) {
  $(this).css({'display':'none'});
  
}
});
if($('#av-masonry-1 .av-masonry-container.isotope a').is(':hidden')){
	$(nocat).appendTo('#av-masonry-1');
}
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'empty_masonry_message_script');

Best regards,
Mike

Hi,
The problem was the unclosed div in the screenshot above, the closing div tag below all of the shortcode was the builder’s attempt to correct the unclosed div above, the builder just didn’t know where to place the closing tag.
So if you only removed the closing div tag below all of the shortcode you will want to also remove the open tag above or the error will return.
You will manually need to correct this because the error is caused (in part) by the automatic correction, but the real problem is the unclosed tag.
I don’t believe this is a result of an update, it could be that the page or element has not been edited since the error occured as it is on the next edit that the builder would run it’s “check” and try to fix the page structure. It’s hard to say.

Best regards,
Mike

Hi,
It looks like you have 207 portfolio tags with no items, are you in the process of adding items or assigning these tags to items?
Once each of these tags are assigned to at least one item the No Current Projects solution will not be used.

Best regards,
Mike