How to Give Your Divi Archive Pages a Masonry Layout

Creating a visually appealing layout for your Divi archive pages can greatly enhance the user experience and make browsing through your content more enjoyable. One way to achieve this is by implementing a masonry grid layout, where posts are displayed in an asymmetrical and dynamic fashion. Luckily, with Divi's built-in options, achieving this desired layout is easier than ever. By utilizing Divi's dynamic content capabilities, specifically the ability to display the archive page title dynamically, and combining it with the powerful blog module, you can effortlessly transform your archive pages into stunning masonry grids. By following a few simple steps, you can enhance the overall aesthetic of your website and ensure that your content stands out from the competition. So, let's dive in and discover how you can give your Divi archive pages a masonry layout that will captivate your audience and elevate your website to new heights.

How Do I Change the Layout in Divi?

After selecting the new layout, it will appear on the page, replacing the previous layout. You can then proceed to customize the layout according to your preferences. The Divi Builder offers a wide range of options for changing the layout, including adding new modules, rearranging existing modules, adjusting spacing, and changing colors and fonts.

To add new modules to your layout, simply click the plus icon in the desired section of the layout. This will open the module library, where you can choose from a variety of pre-designed modules. Once you’ve selected a module, you can customize it further by adjusting it’s settings, such as content, styling, and layout.

To rearrange modules within your layout, you can simply drag and drop them to the desired position. This allows you to easily reorder your content and create a more visually appealing layout. If you need to adjust the spacing between modules or sections, you can use the built-in spacing controls, which allow you to increase or decrease the margin and padding values.

In addition to changing the layout of individual modules, you can also change the overall layout of the page. These options allow you to control the width of your content and create a more unique and personalized design.

Adding and Customizing Headers and Footers in Divi

Divi is a popular WordPress theme that allows users to easily design and customize their websites. One of the key features of Divi is the ability to add and customize headers and footers. Headers are the top section of a webpage, usually containing a logo, navigation menu, and other important information. Footers are located at the bottom and typically include links, social media icons, and copyright information.

With Divi, users can effortlessly modify their headers and footers to match their website’s design and branding. This customization can be done through a user-friendly interface that provides options to change colors, fonts, sizes, and layout. Additionally, Divi offers pre-designed header and footer templates that can be easily imported and customized to fit a specific website’s style.

By empowering users to add and customize headers and footers, Divi ensures that every website built with the theme can have a unique and professional look, without requiring any coding knowledge.

Adding a Divi layout to your website is a simple process that can greatly enhance it’s design and functionality. To load a premade layout pack, start by finding the layout pack you want to use. Once you’ve selected your desired pack, click on it and then select “Use This Layout” to add it to your page. At any time, you can access the premade layout library by clicking the purple “+” icon on the Divi toolbar. This allows you to easily search and add layouts to your website with just a few clicks.

How Do I Add a Divi Layout to My Page?

Adding a Divi layout to your page is a simple process that can be done in a few easy steps. Firstly, you need to find the layout pack that you want to use. Divi offers a wide variety of premade layout packs for different purposes and industries.

To load a layout onto your page, simply click on the “Use This Layout” button. This will automatically add the selected layout to your page. The layout will be inserted at the current cursor position, so make sure you’ve the cursor placed where you want the layout to appear on the page.

If you ever need to access the premade layout library again, you can do so at any time by clicking on the purple “+” icon on the Divi toolbar. This will bring up the Divi Library, where you can search for and select the layout pack you want to use.

If you want to add multiple layouts to your page, you can do so by repeating the process described above.

The premade layout library provides a wide range of options to choose from, making it easy to find a layout that suits your needs. With Divis intuitive editing tools, you can quickly customize the layout to create a visually appealing and professional-looking webpage.

How to Create Your Own Layout Pack in Divi

  • Step 1: Choose a theme for your layout pack
  • Step 2: Plan the design of your layout pack
  • Step 3: Create a new page for each layout
  • Step 4: Design your layouts using Divi Builder
  • Step 5: Save each layout to your Divi Library
  • Step 6: Export your layout pack from Divi
  • Step 7: Import your layout pack into another Divi website
  • Step 8: Customize and modify your layout pack as needed
  • Step 9: Test your layout pack on different devices and browsers
  • Step 10: Publish and showcase your layout pack

Source: Using Premade Layouts In Divi – Elegant Themes

To edit the archive page in Divi, the process is quite simple. By accessing the Divi > Theme Builder, you can create a new model and choose the desired archive page. From there, you’ve the flexibility to incorporate custom content within the header, body, or footer using the builder. This added content will then be accessible on the selected archive pages.

How Do I Edit the Archive Page in Divi?

To edit the archive page in Divi, you don’t need to delve into complex coding or make drastic changes. The process is incredibly user-friendly and can be accomplished within a few simple steps. The first thing you need to do is access the Divi Theme Builder. This powerful tool allows you to customize the various elements of your website, including the archive page.

This flexibility enables you to add custom content wherever you see fit. You can incorporate eye-catching images, engaging text, or appealing graphics to captivate your audience and leave a lasting impression. By adding unique content to your archive pages, you can enhance their visual appeal and make them more enticing to visitors.

The customization process within the Divi Theme Builder is intuitive and straightforward. With it’s drag-and-drop functionality, you can effortlessly arrange and design your content to create a cohesive and appealing layout. This allows you to unleash your creativity without any technical expertise or coding knowledge.

From there, you can add custom content to the header, body, or footer, transforming the look and feel of your archive pages. With Divis user-friendly interface and extensive customization options, you’ve the power to create a visually stunning and engaging archive page that captivates your audience.

When it comes to using Divi templates, the process is quite simple. To start, navigate to your Divi settings by going to Divi > Theme Options. From there, find the Updates tab and enter your username and API key. Once done, click save changes, and you’re ready to go. With these steps completed, you can now dive into using premade Divi layout packs on your website.

How Do I Use Divi Templates?

To begin using Divi templates, youll need to navigate to the Divi theme options. This can be done by logging into your WordPress dashboard and scrolling down to the Divi tab. Once you click on it, youll find the Theme Options section.

Here, youll find a variety of settings and options for customizing your website. One of these tabs is the Updates tab, where youll need to enter your username and API key. This step is necessary for accessing and using the Divi template library.

After entering your credentials, make sure to save your changes. This will enable your website to connect with the Divi template library and allow you to start using premade Divi layouts.

To use a premade Divi layout pack, youll first need to access the Divi Builder. You can do this by navigating to the page or post where youd like to add the layout pack. Once there, simply click on the “Use Divi Builder” button.

In the Divi Builder, youll see different options for building your page. This will open up a library of available layouts.

Once you find the layout pack, you can click on it to preview it.

You can modify the text, images, colors, and other elements of the layout to match your brand and content. The Divi Builder provides intuitive tools for making these customizations, allowing you to create a unique and visually appealing website without any coding knowledge.

By following these steps, you can easily use Divi templates to create a professional and stunning website.

How to Customize Divi Templates to Match Your Brand and Content

One way to customize Divi templates to match your brand and content is by using it’s built-in customization options. Start by selecting a template that closely aligns with your desired design. Then, utilize the various settings provided to modify the colors, fonts, and overall layout to match your brand. Additionally, you can add your logo, images, and custom content to make it more unique. It’s important to pay attention to small details, like button styles and spacing, to ensure consistency throughout the website. With Divi’s extensive customization features, you can create a website that perfectly reflects your brand and content without relying on complex coding.

Watch this video on YouTube:

When it comes to editing Divi pages, there are a few simple steps to follow. First, locate the Edit Page option in the top bar at the top of the page. From there, you can click on the Edit option in the specific module you want to change. Once you’ve made your desired changes, be sure to Save & Exit from the module settings. Finally, don’t forget to press the Blue Update button to ensure all of your Divi module changes are saved.

How Do I Edit Divi Pages?

Editing pages in Divi is a straightforward process that allows you to customize your websites appearance and content. To begin editing a page, navigate to the Divi Page Builder Edit Page option, which can be found at the top of each page. Once you click on this option, you’ll be redirected to the editor interface.

Within the editor, you can make changes to your pages design and layout. One way to do this is by selecting the Edit option within the module you wish to modify. This will bring up the modules settings panel, where you can adjust various elements such as text, images, and styles. After making your desired edits, remember to save and exit from the module settings to apply your changes.

It’s important to note that when editing Divi pages, it’s crucial to press the Blue Update button to ensure that all your module changes are saved. This will guarantee that your modifications are reflected on the live website.

Divis intuitive interface and drag-and-drop functionality make the editing process efficient and user-friendly. Whether you want to add new sections, transform images, or change colors, Divi provides a wide range of options to help you achieve your desired result.

With Divis powerful features, you can take control of your websites design without the need for coding knowledge. This flexibility allows you to create unique and visually appealing pages that are tailored to your specific needs.

By following a few simple steps and utilizing Divis extensive customization options, you can create engaging and impactful pages that enhance the overall user experience.

Watch this video on YouTube:

One of the great features of Divi’s Visual Builder is the ability to save modules, rows, and sections to the Divi Library for future use. With just a few clicks, you can save your customized layouts and templates, making it easy to reuse them throughout your website. In this article, we will walk you through the process of saving new items to the Divi Library, allowing you to streamline your workflow and save time on designing repetitive elements. Let’s get started!

How Do I Save a Layout to Divi Library?

Once saved, your layout can be accessed and used in other pages or even on different websites. This is a great feature for web designers who want to maintain consistency throughout their projects. The Divi Library allows you to store and manage all of your saved layouts in one place, making it easy to access and reuse them.

First, open the Divi Builder and navigate to the module, row, or section that you want to save. Once you’re there, hover over the item and a menu bar will appear. Click on the icon that looks like a floppy disk to save the item. Next, give your template a name that’s easy to remember and click the “Save to Library” button.

To use the saved layout on another page, simply open the Divi Builder on that page and click on the “Load From Library” button. A pop-up window will appear showing all of the layouts that you’ve saved. Click on the layout that you want to use, and it will be automatically loaded into the builder.

If you make any changes to a layout that’s already saved in the library, simply click on the “Update” button to save the changes. This is a great feature for designers who want to make updates to their layouts without having to recreate them from scratch each time.

So, start saving your layouts to the Divi Library today and make your web design process faster and more organized.


This approach eliminates the need for additional custom code or plugins, making it a straightforward and efficient solution.

Scroll to Top