Read more buttin in masonry blogelement

Hi,
Sorry for the very late reply, to add a “read more” link to your masonry elements you can use this script.

/* Add a "read more" link" to masonry elements */
function ava_custom_script_mod(){
?>
<script>
(function($){
  $(window).on('av-height-change', function() {
    $('.av-masonry-entry').each(function() {
      var more = $(this).find('.av-masonry-read-more');
      var cont = $(this).find('.av-masonry-entry-content');
  
      if( more.length == 1 ) return;
      cont.append('<div class="av-masonry-read-more">Read more</div>');
    });
  });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'ava_custom_script_mod');

This doesn’t effect the masonry gallery element because it doesn’t include the av-masonry-entry-content class.

Best regards,
Mike

Hi,
Glad to hear that helped, I don’t find any reference to “read more” being added to masonry items, and as I’m sure you have noted, the masonry element only offers:
Display Title and Excerpt
Display Title
Display Excerpt
Display Neither

So we could continue with the above solution, or I can submit a feature request to add “Read More” to the masonry element.
If you would like to continue with the above solution, then it would help me if you would post a link to your test page, adjusting padding and margin should be easy to do, but not by removing a class, by adding css.
I see above you don’t seem to want to post your link, but there are many theme settings that change the layout even in the same demo, so while I can adjust this on my localhost, typically this doesn’t always translate exactly to the customer’s (your) site.
I hope that makes sense.

Best regards,
Mike

Hi,
Ok, I tested the masonry element in the Enfold 2017 Demo, and used the script above and the “read more” link shows in the av-masonry-entry-content entry-content div above the av-masonry-date div:

and so there is no overlap.
The av-masonry-entry isotope-item div is the actual masonry item div and it has no margin or padding.
It sounds like you have other custom css that is displacing the inner elements, try removing your custom css and see if it looks similar to my screenshot above.
Another option would be for you to create another local instance using the 2017 Demo, to achieve the result above, and then you can test and examine the difference between your two sites and how to implement this on your site.
Please note, that I do not mean for you to import the 2017 Demo into your current working localhost site, this would overwrite your site, you would need to create a new WP localhost site.

Best regards,
Mike

Hi,
Thank you, this script has been adjusted:

function savvy_custom_mod(){
?>
<script>
(function($){
  $(window).on('av-height-change', function() {
    $('.av-masonry:not([class*="-gallery"]) .av-masonry-entry').each(function() {
      var more = $(this).find('.av-masonry-read-more');
      var cont = $(this).find('.av-masonry-entry-content');
  
      if( more.length == 1 ) return;
      cont.append('<div class="av-masonry-read-more">Read more</div>');
    });
  });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'savvy_custom_mod');

Please ensure to clear your browser and any caching plugins before checking.

Best regards,
Mike