Add a Masonry Layout

Masonry is a grid layout based on columns. Unlike other grid layouts, it doesn’t have fixed-height rows. A masonry layout optimizes the use of space inside the web page by reducing unnecessary gaps. Without a masonry layout, certain restrictions are required to maintain the structure of the layout grid.

Using a Masonry layout is the ultimate solution to this problem, as it reduces the spaces and tries to fit the maximum number of boxes into the rows and columns.

You can also have a “content based” masonry item with a image as opposed to just an image item. It utilizes a typical WYSIWYG editor. Simply upload your image.

Basically, a “masonry” layout is one where items are laid out one after the other in the inline direction. When they move onto the next line, items will move up into any gaps left by shorter items in the first line. It’s similar to a grid layout with auto-placement, but without sticking to a strict grid for the rows. Probably, The most well-known example of masonry is on Pinterest,

Benefits of Masonry Layout

Besides from keeping your page layout consistent, one major benefit that Masonry layout will bring to you is that it will make your users want to keep reading.

Do you want to add a masonry grid layout on the WordPress website? You have probably seen the masonry grid on most sites over the Internet. A benefit of the Basic Build WordPress theme is that you can easily add a masonry layout. Just add content and images. No extra coding required.

How to Add Masonry Grid Layout in WordPress. Use the Basic Build WordPress theme.

The most popular use of Masonry layouts is for galleries. Image galleries are built using different types of images with varying dimensions.

It can be challenging to create a set of images with the same dimensions, without losing their quality. Because of this, Masonry layouts are a great choice for creating galleries using images with varied dimensions.

The Basic Build WordPress theme makes building a masonry layout easy!

  1. Select the Additional Options tab.
  2. Select Yes to add options.
  3. Select the Add a Masonry Layout checkbox.
  4. Select Yes to Use a Masonry Layout.
  5. Click the Add Masonry Item button in the lower right corner. You can add as many masonry items as desired.
  6. Add a title for the masonry item. This helps identify the masonry item in the content editor.
    1. When using an “image” item as defined below, it will show on the front end of the website when hovering over the image identifying the link connection.
    2. When using a “content” item as defined below, it will not show on the front end of the website.
  7. Select whether the masonry item should be a “content” or “image” item.
    1. A content item will simply show content. It will provide a typical WordPress WYSIWYG content editor. You can add images here as well.
    2. An image item allows you to upload an image and chose to link the image to an internal or external URL.
  8. If using a “content” item, add your content in the content editor. You can style the content just like a WordPress page.
    1. Choose a background color for the item background.
  9. If using an “image” item, add the image that will make up the masonry item.
    1. Select “Yes” to add a link for the masonry image. Leave the setting to “No” if a link is not required.
    2. If “Yes” is selected, chose whether to have the image link to an internal page or external URL for the Masonry Link  Target.
    3. If  an “Internal” link is selected, choose the page or post the image should link to.
    4. If an “External” link is selected, type in the full URL for the external site.
  10. Click the Add Masonry Item button for each item you would like to add.
  11. Color transparency allowed for all color options.
  12. If desired, you add content after the columns, as seen here. It is basically a second WordPress WYSIWYG editor.