How to Make Your Masonry Brick WP Theme Look Like the Demo

Creating a visually appealing website is crucial to engage users and showcase your content effectively. When it comes to building a masonry brick WordPress (WP) theme, replicating the visually stunning design showcased in the demo might seem intimidating. However, fear not, as we delve into a step-by-step guide to help you transform your WP theme to mirror the demo's captivating aesthetics.

How Do I Create a Masonry Layout in WordPress?

First, youll need to install and activate the Envira Gallery plugin. This plugin is specifically designed for creating beautiful image galleries in WordPress. Once activated, you can easily access the plugin settings and start creating your masonry image gallery.

Next, youll need to create an image gallery in WordPress. Envira Gallery makes this process incredibly simple. Just click on the “Add New” button and choose the images you want to include in your gallery. You can also drag and drop images directly into the gallery creator.

Here, youll find a variety of options to customize your gallery. One of these options is the layout selection. Choose the Masonry layout to create the stunning masonry effect for your gallery.

One important aspect to consider is the column gutter width. This is the space between each image in the gallery. Adjust this setting to your desired spacing.

Additionally, you can set the margin below the images to ensure proper spacing and alignment. This option allows you to control the distance between the bottom of one image and the top of the next image.

Envira Gallery provides a shortcode that you can copy and paste into any post or page on your site. Simply add the shortcode, and your masonry image gallery will be displayed beautifully for your visitors to enjoy.

Masonry is a term commonly used in WordPress to refer to a unique grid layout that resembles the style of Pinterest. With a masonry layout, your posts are displayed in vertical columns with varying heights, creating a visually appealing and organized appearance on your website. This layout is particularly popular for showcasing images or blog posts. So, let’s dive deeper into what masonry means in WordPress and how it can enhance your website’s design and usability.

What Does Masonry Mean in WordPress?

Masonry in WordPress refers to a layout style that organizes and displays posts or images in a visually appealing grid-like structure. Inspired by the popular social media platform Pinterest, this layout arranges content into vertical columns, allowing for a dynamic and fluid design. The masonry grid automatically adjusts the size and position of each element, creating an aesthetically pleasing and balanced arrangement.

Source: How to Create a Masonry Layout in WordPress – Envira Gallery

In order to make your WordPress theme resemble the demo, the first step is to log into your WordPress site and ensure that the new theme is activated. From there, go to the “Tools” menu and select “Import.” Choose “WordPress” as the importer and proceed to upload the demo content. During this process, you’ll be prompted to map the authors in the export file to users on your site.

How Do I Make My WordPress Theme Look Like a Demo?

To make your WordPress theme look like the demo, you need to follow a few simple steps. First, log into your WordPress site using your admin credentials. Once logged in, make sure that the theme you want to customize is activated. If it’s not, navigate to the “Themes” section in the WordPress dashboard and activate the desired theme.

Next, go to the “Tools” tab in the WordPress menu and select “Import.”. From the list of importers, choose “WordPress.”. This will allow you to import the demo content into your site.

Make sure you’ve downloaded the demo content files from the themes developer or website. Upload the demo content file and wait for it to finish importing.

During the import process, you may be asked to map the authors in the export file to a user on your site. This step is important as it connects the demo content with your user profile.

After the import process is completed, you can visit your site and see that it now resembles the demo version of the theme. Keep in mind that some customization may still be needed to make it fully match the demo, such as setting up widgets, menus, or adjusting settings in the theme options panel.

It’s a convenient and time-saving way to kickstart your website design process and get a visual preview of what the theme has to offer.


By carefully selecting the right plugins, tweaking the theme settings, and utilizing appropriate imagery and content, users can bring their websites to life. It’s important to understand the theme's capabilities and limitations, and to experiment with different configurations until the desired outcome is reached. The process may require time and effort, but with patience and a willingness to explore various options, users can successfully recreate the demo's aesthetics and functionality. Ultimately, the key lies in personalizing the theme to reflect the unique vision and style of the user, resulting in a stunning masonry brick website that captures attention and engages visitors.

Scroll to Top