Are you looking to easily apply and customize Divi’s premade layout packs? You’re in the right place! In this blog post, we will guide you step by step on how to use and personalize these layouts to create stunning pages for your website. Starting from the WordPress dashboard, we’ll walk you through every detail, ensuring that you can seamlessly transform your Divi site using its powerful visual builder and customization features. Whether you’re a beginner or seasoned user, this guide will help you get the most out of Divi’s premade layout packs.

Applying a Premade Layout in Divi: Step-by-Step Guide

Make sure you are logged into your WordPress dashboard. Hover your mouse over your website name (in this case, mine is “My Divi Practice” on a local server, but yours will show your actual domain). Click on “Visit Site” as shown in the image below. Once the site opens, select the page where you want to apply the premade layout. For instance, if it’s the “Home Page,” click on it in the menu, as shown in the illustration. Next, click Enable Visual Builder to access the visual editor. Scroll down, click on the Plus icon, and continue with the next step for further guidance.

Applying a Premade Layout in Divi: Step-by-Step Guide

Read More: 25 Best Free Divi Layouts in 2024 (Download Today)

Using Premade Layouts in Divi: Enhancing Your Website Design

In this step, we will build upon the previous one. After clicking on the Plus icon, you will see three options: Premade Layout, Your Saved Layout, and Your Existing Page. Choose Premade Layout, where you will find various options to select from, as shown in the next step. Pick one that fits your website’s needs. After selecting a layout, click on the green button labeled Use This Layout. The layout will begin downloading, and you can monitor the progress bar. Once the download is complete, we will show you the results in the next step.

Using Premade Layouts in Divi: Enhancing Your Website Design

Read More: Getting Started with Divi: Using Divi Layouts

Final Result After Successfully Downloading and Applying the Premade Layout

In the image below, you can see the result after successfully downloading and applying the premade layout packs to your Home page. This example demonstrates how the layout transforms your page’s appearance. You can follow the same steps for every other page on your website to achieve a consistent, professional look across your site.

Final Result After Successfully Downloading and Applying the Premade Layout

Read More: 11 Divi Layouts and Child Themes for Spa and Wellness Websites in 2024 (Free & Premium)

Customizing Your Divi Layout

In this step, we’ll guide you through customizing your Divi layout to match your desired design. Divi is renowned for its user-friendly drag-and-drop system, which simplifies the customization process. To begin, double-click on any text module to access its settings, where you can enter your preferred title and description. For more text modifications, hover over the module settings icon, click on it, and go to the Content setting to change the text from domy to your own text. If you want to change colors and design of text you must go to Design Settings.

Next, customize the background by locating the background settings within the module options. You can choose from several options, including background color, background gradient, background image, or background video, depending on what best suits your design requirements.

In the Design section, you can further tailor the module’s appearance, including adjustments to text, images, and layouts, aligning them with your website’s aesthetics. For advanced users, the “Advanced” settings offer the ability to incorporate Custom CSS, which allows for more intricate design customizations.

For a deeper understanding of these features and how to utilize them effectively, refer to our comprehensive Divi customization guide.

Customizing Your Divi Layout

Read More: 9 Divi Layouts and Child Themes for Fashion Websites in 2024

Customizing the Blurb Module Layout: Icon and Text Adjustments

In this section, we’ll show you how to customize a single module that includes both an icon and text which is Blurb. While we previously discussed how to change the text, here we focus on adjusting the icon within the module. To begin, click on the black module settings icon and navigate to the Content Setting to edit your text. Once your text is updated, switch to the Design Setting and locate the Image & Icon settings, as illustrated below.

Here, you can select a new icon or image, adjust the alignment, and customize the color to match your site’s design. After making these changes, you’ll have a customized module that fits seamlessly into your page. We will continue with more advanced steps in the next section to enhance your Divi layout further.

Customizing Divi Icon and Text Modules

Read More: Free Divi Layout Pack For Web Designers

Customizing Icon Alignment and Shape in Divi Blurb Modules

Now, scroll down to find the Alignment option, where you can choose between three alignment settings: Left, Center, or Right. Adjust the alignment based on your design preference. Additionally, there is an Icon On/Off toggle, allowing you to display or hide the icon depending on your needs.

Further customization is available through the Icon Shape option, where you can select the best shape for your icon, as shown in the image below. By following these steps, you can tailor the entire premade layout module by module, creating a cohesive design for your website.

Customizing Icon Alignment and Shape in Divi

Read More: Grow a Free Divi Layout Pack for Business Owners

Final Results: Customizing Images, Text, and Icons in Divi

The final result is shown below in the screenshot, where we’ve successfully customized the images and text to match our website seamlessly. We’ve also changed the icon’s color and shape to suit our design needs. This demonstrates how easily you can transform a premade Divi layout into a personalized website. With practice, you’ll master this process in no time, achieving your desired results effortlessly. Keep practicing, and you’ll be customizing your website like a pro in no time!

Final Results: Customizing Images, Text, and Icons in Divi

Read More: Hair Salon Home Page Divi Layout

Conclusion

In this guide, we’ve explored how to effectively use and customize Divi’s premade layout packs to enhance your website’s design. From the initial setup in your WordPress dashboard to the final touches on individual modules, you now have a comprehensive understanding of how to make these layouts your own.

You began by navigating to the WordPress dashboard and applying a premade layout to a specific page. We detailed how to access the visual builder, select a layout, and monitor its download progress. This foundational step is crucial for setting up your page with a professional look quickly and efficiently.

Next, we delved into the customization process, demonstrating how to tailor the layout to match your website’s unique needs. Using Divi’s intuitive drag-and-drop interface, you learned how to modify text, adjust backgrounds, and utilize the design and advanced settings to refine your page’s appearance. This flexibility allows you to align the layout with your branding and content requirements seamlessly.

We covered the customization of icon and text modules, demonstrating how to change and align icons, update text, and adjust module settings to enhance the look and functionality of your page. Finally, we showcased how these customizations transform a premade layout into a personalized, cohesive design, illustrating how Divi’s tools enable you to create a polished and professional website tailored to your preferences.By applying these techniques and practicing regularly, you’ll gain confidence in using Divi’s layout packs and customization options. Your website will not only look visually appealing but also effectively represent your brand and content. Keep experimenting with these features to continuously refine and elevate your website’s design.

Read More: LevelUP – Divi Layout for Course Sites