Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #859523

    Hi Kriesi,

    I want to add a Masonry 4 Column Grid just like this one:, but can’t get the settings right.

    I did apply the tags ‘portrait’ and ‘landscape’ to my portfolio items, but when I add 4 pictures it moves my portrait picture on the right to the next row. The problem is the width of my two ‘landscape’ pictures in the middle, as they are stretched out.

    My settings right now:
    – Masonry full width (not in a content section, but as a section on its own)
    – Items: post tag (landscape and portrait)
    – Post number: 4
    – Columns: 4
    – Masonry: perfect manual masonry
    – No space between elements

    I also can’t get the settings right of the black transparent hover overlay which shows the title of the portfolio item.

    Can you please tell me what the right settings are? I want the exact same layout and hover overlay as

    Thanks in advance!



    Hey nirvana,

    If you enable debug mode in order to see builder shortcodes:, then you can paste the following shortcode to a page to see how it is done:

    [av_section min_height='' min_height_px='500px' padding='huge' shadow='no-shadow' bottom_border='no-border-styling' bottom_border_diagonal_color='#333333' bottom_border_diagonal_direction='' bottom_border_style='' id='' color='main_color' custom_bg='' src='' attachment='885' attachment_size='full' attach='scroll' position='top center' repeat='stretch' video='' video_ratio='16:9' overlay_enable='aviaTBoverlay_enable' overlay_opacity='0.6' overlay_color='#000000' overlay_pattern='' overlay_custom_pattern='' av_element_hidden_in_editor='0']
    [av_heading heading='Masonry Portfolio Example:<br/>4 Column Masonry Grid' tag='h1' style='blockquote modern-quote modern-centered' size='40' subheading_active='' subheading_size='15' padding='0' color='custom-color-heading' custom_font='#ffffff' admin_preview_bg='rgb(34, 34, 34)'][/av_heading]
    [av_hr class='custom' height='50' shadow='no-shadow' position='center' custom_border='av-border-fat' custom_width='50px' custom_border_color='#ffffff' custom_margin_top='30px' custom_margin_bottom='30px' icon_select='no' custom_icon_color='' icon='ue808' font='entypo-fontello' admin_preview_bg='rgb(34, 34, 34)']
    [av_textblock size='' font_color='custom' color='#dddddd' admin_preview_bg='rgb(34, 34, 34)']
    <p style="text-align: center;">Hey there! We are Enfold and we make really beautiful and amazing stuff.
    This can be used to describe what you do, how you do it, & who you do it for.</p>
    [av_masonry_entries link='portfolio_entries,12,14,15' sort='yes-tax' items='9' columns='4' paginate='load_more' query_orderby='date' query_order='DESC' size='fixed manually' gap='no' overlay_fx='active' id='' caption_elements='title' caption_styling='overlay' caption_display='on-hover' color='' custom_bg='']

    Best regards,


    the point of it is that on this masonry some elements got both classes (tag-landscape and tag-portrait) – f.e. in your enfold link above the first left image. These are double height and double width.

    Overlay with title : second tab of your masonry options : Element Captions – here you can choos on “Element Title and Excerpt Styling” :
    “Display as centered overlay” the field above is for only show titles



    Thanks for helping Guenni007.

    Best regards,
    John Torvik


    Thank you all for your help. This worked out perfectly :)!



    Great! Glad @guenni007 helped. Let us know if you need anything else. :)

    Best regards,

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Settings Masonry Portfolio Example: 4 Column Masonry Grid’ is closed to new replies.