Hi,
This is an example with using text elements to hold the text for each popup and the script in a code block element that automatically numbers each box and link so you can add as many popup boxes as you wish. The boxes and links are number from the top down so the first link on the page will open the first box on the page.
For this example this is how the backend looks:

you can add the text elements anywhere on your page, top or bottom it doesn’t matter because they will not show on the frontend.
Each text element will have the custom classes: multi-popup mfp-hide

notice that the classes have no dots and the space between them.
Then in your code block element add this code:

<script>
window.addEventListener('DOMContentLoaded', function() {
  (function($) {
    function assignUniqueIDs() {
      $('.multi-popup').each(function(index) {
        var uniqueID = 'multi-popup-' + (index + 1);
        $(this).attr('id', uniqueID);
      });
      
      $('.multi-popup-link').each(function(index) {
        var uniqueID = 'multi-popup-' + (index + 1);
        $(this).attr('href', '#' + uniqueID);
      });
    }

    assignUniqueIDs();

    $('.multi-popup-link').magnificPopup({
      type: 'inline',
      midClick: true
    });
  })(jQuery);
});
</script>

<style>
.multi-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width: auto;
  max-width: 500px;
  margin: 20px auto;
}
</style>


<a class="multi-popup-link" href="#">Link to box one</a></br>
<a class="multi-popup-link" href="#">Link to box two</a></br>
<a class="multi-popup-link" href="#">Link to box three</a></br>
<a class="multi-popup-link" href="#">Link to box four</a></br>

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
notice the four links at the bottom, you can add these in a different element if you wish, this is to show you the custom class that the links must have.

then on the frontend when you click a link the popup box will show:

Best regards,
Mike

Hey epkdesign,
Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

add_filter( 'avia_post_nav_entries', 'enfold_customization_postnav', 10, 2);
function enfold_customization_postnav($entries, $settings)
{
if($settings['type'] == 'portfolio')
{
$settings['same_category'] = true;
$entries['prev'] = get_next_post($settings['same_category'], $settings['excluded_terms'], $settings['taxonomy']);
$entries['next'] = get_previous_post($settings['same_category'], $settings['excluded_terms'], $settings['taxonomy']);
}
return $entries;
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

Best regards,
Mike

Hey ThiloKiefer,
This looks like the same issue as this feature request, in which the Dev Team writes yesterday: A solution will be added to Enfold 6.0 We don’t have a ETA for when Enfold 6.0 will be available, but thank you for your patience while this is added along with other improvements.

Best regards,
Mike

Hi,
When I check the two pages that you linked to I see two opening and closing header tags:

one set is around the theme header, and the othr set is around the woocommerce page template title, since both are closed this should not cause any issues.
But if you want to change the woocommerce header tag to a div, add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function change_woo_header_tag_to_div() { ?>
  <script>
(function($) {
  $(function() {
    function replaceElementTag(targetSelector, newTagString) {
      $(targetSelector).each(function(){
        var newElem = $(newTagString, {html: $(this).html()});
        $.each(this.attributes, function() {
          newElem.attr(this.name, this.value);
        });
        $(this).replaceWith(newElem);
      });
    }
    replaceElementTag('header.woocommerce-products-header', '<div></div>');
  });
}(jQuery)); 
</script>
  <?php
}
add_action( 'wp_footer', 'change_woo_header_tag_to_div', 99 );

Best regards,
Mike

Hi,
Currently your background-color is #888, but the demo page FEATURE B is #fcfcfc

you can change the color directly in the color section:

or in the theme settings:

but note that any color that you add to the element will overide the theme setting color.

Best regards,
Mike

Hey schweg33,
Thanks for the link to your page, in your css above you have the color: color: #ff0000; to have a white text please use: color: #fff; you also need to add .main_color a to override the theme color, so the solution is:

.main_color a.my-link-class {
background-color: #ff3a2d;
-webkit-border-radius: 33px;
-moz-border-radius: 3px;
color: #fff;
font-size: 16px;
padding: 7px 15px;
}

since this element only shows on mobile you can not have a mouse-over as touch devices don’t use a mouse-over.

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,
CSS will not work here because the image is cropped. Try the code that I posted to show the full sized image instead of the thumbnail, in my test this works.

Best regards,
Mike

Hi,
Thanks, I see that the image is truly cropped because the your thumbnail size is cropped. Your image is not a square image so the 450×450 thumbnail will crop it.
So if you want your product catalog to have a uniform look you can create a new image that is square instead of portrait and upload your new image, then the book will be centered in your 450×450 thumbnail.
or if your shop is going to be a book store and all of your thumbnails will be a portrait shape image, you can try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function override_post_thumbnail_size($size, $post_id) {
    if (is_archive()) {
        return 'full';
    }
    return $size;
}
add_filter('post_thumbnail_size', 'override_post_thumbnail_size', 10, 2);

this will show the full size image instead of the thumbnail.

Best regards,
Mike

Hi,
Please link to the page with the screenshot so we can see if the image is truly cropped or if the image can be corrected with css ” background-size: contain”

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,
Thanks for the feedback, I have asked the rest of the team for feedback, thank you for your patience

Best regards,
Mike

Hey donillo,
Thanks for the link to your page, it looks like you are using the list layout, this layout doesn’t include the images, please try a different layout such as the multi author, single author, or the grid layout.

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

Hi,
Thank you for the link to your site, but the login is not admin so I can not see any of the theme settings or the custom code that you added, please check.

Best regards,
Mike