Divi Product Highlight: Divi Designer Pack

Mar 5, 2023 | 0 comments

Divi Designer Pack is a layout pack with over 720 design elements you can use with the Divi Builder to effortlessly create your next website. It comes with both light and dark layouts and a variety of designs for each section of your page. In this post, we’ll take a look at some of the layouts that come with the Divi Designer Pack to see if this is the right product for you.

Let’s get started!

Installing Divi Designer Pack

Divi Designer Pack comes as a .ZIP file containing Divi Library .json files. The layouts are packaged so that you can install all layouts, all layouts of a certain category, or all light or dark layouts of a certain category depending on your needs.

To install the layouts, start by unzipping the .ZIP file in your file manager. Then, open your WordPress dashboard and navigate to the Divi Library page. Click Import & Export at the top, then select the import tab. Choose a .json layout pack file to import, then select Import Divi Builder Layouts.

Divi Product Highlight Divi Designer Pack Import

Once the layout has been imported, open your page in the Divi Builder. Click the blue plus icon to add a new section, then select Add From Library.Divi Product Highlight Divi Designer Pack Add Layout from Library

Locate the layout you want to use in the Divi Library.

Divi Product Highlight Divi Designer Pack Select Library

Then, click the Use This Section button to load the layout on your page.

Divi Product Highlight Divi Designer Pack Use Section

Divi Designer Pack

Divi Designer Pack comes with 720+ layouts for various website sections with both light and dark designs. Each of the layouts can be customized to your liking and the content can all be replaced with your own. Because there are so many different layouts that come with this pack, we can’t cover them all in this post. We’ll take a look at a few layouts from each category to give you an idea of what designs you can get with the Divi Designer Pack. You can also view all of the layouts on the live demo website.

Divi Designer Design Sections

Divi Designer About Sections

There are 25 about section layouts in total. Layout 2 has an image and an overlapping text box with a number. There is text on the right side, along with some blurb modules.

Divi Product Highlight Divi Designer Pack About 2

Here is the dark version of layout 2.

Divi Product Highlight Divi Designer Pack About Dark 2

Layout 11 features a two-tone design with some text on the left and an image on the right, a CTA button, and some blurb modules featuring social media icons.

Divi Product Highlight Divi Designer Pack About 11

About layout 17 uses gradient shapes around an image. There is some text and a CTA button on the left, along with some blurb modules with arrow icons.

Divi Product Highlight Divi Designer Pack About 17

Divi Designer Blog Sections

There are 7 blog sections in total, with dark and light variations. These sections display a selection of posts on your blog. Layout 1 has a simple and minimalistic design, with a zoom-in hover effect on the images and an underline hover effect on the post title.

Divi Product Highlight Divi Designer Pack Blog 1

The third blog layout features a CTA button at the top right and cards with a slight shadow hover effect.

Divi Product Highlight Divi Designer Pack Blog 3

Here is the dark variation of blog layout 5. It features a hover effect that adds an underline to the post title and moves the card up slightly.

Divi Product Highlight Divi Designer Pack Blog Dark 5

Blog layout 7 features a card with the post information at the top, the image in the middle, and a read more button at the bottom.

Divi Product Highlight Divi Designer Pack Blog 7

Divi Designer Carousel Sections

There are 16 different carousel designs, with several different types of carousels. The first example is carousel 4, a team member carousel. Each team member card features an image, name, job title, description, and social media icons.

Divi Product Highlight Divi Designer Pack Carousel 4

Layout 7 is a testimonial carousel. This is the dark layout. Each carousel item features a profile photo, testimonial text, name, and job title.

Divi Product Highlight Divi Designer Pack Carousel Dark 7

Carousel 13 is a blog post carousel. It is a simple card layout with the blog category on the top right corner of the image and the post title below.

Divi Product Highlight Divi Designer Pack Carousel 13

Divi Designer Contact Sections

Divi Designer comes with 20 contact section layouts. This is layout 4, which features some text and contact information on the left and a contact form on the right.

Divi Product Highlight Divi Designer Pack Contact 4

Contact layout 6 is a simple section with a phone number, some text, and a CTA button on the left, with an image on the right.

Divi Product Highlight Divi Designer Pack Contact 6

Layout 15 features the contact form on the left with contact information on the right over a gradient background.

Divi Product Highlight Divi Designer Pack Contact 15

This is the dark variation of layout 15.

Divi Product Highlight Divi Designer Pack Contact Dark 15

Divi Designer Counter Sections

There are 16 counter layouts in total. The first layout is to get a free quote and has some text and a CTA button on the left and an image and some number counters below.

Divi Product Highlight Divi Designer Pack Count 4

Layout 9 features some text at the top and number counters with icons below.

Divi Product Highlight Divi Designer Pack Count 9

Counter layout 11 has a counter bar that fills as the page loads. This is the dark layout.

Divi Product Highlight Divi Designer Pack Counter Dark 11

Counter layout 15 features text on the left and a CTA button, with some more text on the right followed by number counters.

Divi Product Highlight Divi Designer Pack Count 15

Divi Designer CTA Sections

There are 15 CTA layouts in the Divi Designer Pack. This first example is layout 5. It is a CTA section highlighting a mobile app and it features images that can link to the Google Play store and the App Store.

Divi Product Highlight Divi Designer Pack CTA 5

This is CTA layout 7 in the dark variation. It has a dark overlayed image with an icon, text, and two CTA buttons.

Divi Product Highlight Divi Designer Pack CTA Dark 7

Layout 9 features a blurb module with some text and a CTA button overlaying an image with rounded corners.

Divi Product Highlight Divi Designer Pack CTA 9

Layout 10 features some text and social media icons.

Divi Product Highlight Divi Designer Pack CTA 10

Divi Designer FAQ Sections

There are 15 FAQ section layouts. This is FAQ section one. It features a large image on one side and toggle-style FAQ questions on the right.

Divi Product Highlight Divi Designer Pack FAQ 1

And this is the dark version of FAQ section one.

Divi Product Highlight Divi Designer Pack FAQ Dark 1

FAQ layout 4 has a full-width toggle layout.

Divi Product Highlight Divi Designer Pack FAQ 4

Finally, FAQ layout 7 features toggle FAQ questions on the left and an image, some text, and a CTA button on the right.

Divi Product Highlight Divi Designer Pack FAQ 7

Divi Designer Hero Sections

There are 30 hero section layouts in total. The first one, layout 8, features some text on the left-hand side with a transparent image of a person on the right.

Divi Product Highlight Divi Designer Pack Hero 8

Hero layout 9 features a darkened background image with large hero text and a search bar. Below the search bar are three image cards with description text and a read more button.

Divi Product Highlight Divi Designer Pack Hero 9

Layout 19 uses a large darkened background image and features some text and two buttons.

Divi Product Highlight Divi Designer Pack Hero 19

Divi Designer Pricing Sections

There are also 20 pricing layouts. This is pricing layout 7. It features a pink background and two pricing cards with some text to the right. Each pricing card has a heading and subheading, a price, details, and a buy now button.

Divi Product Highlight Divi Designer Pack Pricing 7

Pricing layout 8 features three pricing tiers. The title and price, along with the subtitle are on the left. The features are on the right, presented with check marks, and the buy now button is on the right. The middle option is highlighted in green.

Divi Product Highlight Divi Designer Pack Pricing 8

Layout 12 features three cards with an icon, title and subtitle, and price at the top of each card. There is a green banner that separates the top from the features, and then a list of features followed by a button. Each card has a hover effect that moves the card up on hover.

Divi Product Highlight Divi Designer Pack Pricing 12

Here is the dark version of pricing layout 19. It has some blurb icons at the top to highlight features, and three pricing plan blocks.

Divi Product Highlight Divi Designer Pack Pricing Dark 12

Divi Designer Services Sections

Divi Designer Pack comes with 25 services layouts. Layout 3 features a heading, three blurb modules on a dark background with description text, and a button.

Divi Product Highlight Divi Designer Pack Services 3

Services layout 14 has three cards with an icon at the top, some description text, a numbered text list, and a link to view details.

Divi Product Highlight Divi Designer Pack Services 14

Layout 19 features some heading text and description text, along with six blurb modules with icons representing each service.

Divi Product Highlight Divi Designer Pack Services 19

This is the dark version of services layout 25. It features four services sections with a hover effect that turns the card dark.

Divi Product Highlight Divi Designer Pack Services Dark 25

Divi Designer Slider Sections

There are a total of 15 slider layouts. Slider layout 1 features a small text slider with a number, text, and a button on each slide. There is a title section with green background above the slider, and an image on the right side.

Divi Product Highlight Divi Designer Pack Slider 1

Slider layout 8 is a large image slider with a dark overlay. There is text on the left and a button below.

Divi Product Highlight Divi Designer Pack Slider 8

Slider layout 12 has a large background image and text slides on a white background that changes with each slide. There is also a button on each slide.

Divi Product Highlight Divi Designer Pack Slider 12

Divi Designer Team Sections

There are 25 team section layouts in total. Layout 8 features a heading and three team member images with a hover effect. When you hover over the image, there is a dark overlay and the team member’s name, job title, and social media icons are shown.

Divi Product Highlight Divi Designer Pack Team 8

Here is the dark version of layout 8.

Divi Product Highlight Divi Designer Pack Team Dark 8

Layout 13 has a heading and text on the left-hand side, along with a CTA button. On the right are three circular team member images. Similar to the last design, when you hover over the image the team member’s name, job title, and social media icons are revealed.

Divi Product Highlight Divi Designer Pack Team 13

This design is layout 18 and features cards with team member photos, job titles, and social media links. On the right is a heading and description, followed by a CTA button.

Divi Product Highlight Divi Designer Pack Team 18

Divi Designer Testimonial Sections

There are 25 different testimonial sections. This is layout 1 and features heading and body text at the top, followed by three testimonial sections. Each testimonial has an icon, an image, body text, a name, job title, and company.

Divi Product Highlight Divi Designer Pack Testimonial 1

This section is layout 2. It features two testimonial cards with a quote icon, text, an image, name, job title, and company title on an image background with a dark overlay. On the left you can find some header text, body text, and a CTA button.

Divi Product Highlight Divi Designer Pack Testimonial 2

This is the dark version of layout 5, featuring colorful sections containing client testimonials.

Divi Product Highlight Divi Designer Pack Testimonial Dark 5

Layout 7 features a testimonial slider on the left with an image, testimonial text, and a name at the bottom. On the right is heading text, body text, and a CTA button.

Divi Product Highlight Divi Designer Pack Testimonial 7

Divi Designer Theme Builder Templates

Next are the theme builder templates. These are header, footer, and body templates that can be uploaded from the theme builder in the Divi settings in your WordPress dashboard.

Divi Designer Footer Templates

There are a total of 20 footer templates. First is footer layout 4. This design features a logo, social media icons, and a copyright notice on the left. On the right are two columns of menu items.

Divi Product Highlight Divi Designer Pack Footer 4

Footer layout 13 has a contact form on the left and contact information and social media icons on the right. There is a sub footer bar with copyright information as well.

Divi Product Highlight Divi Designer Pack Footer 13

Footer layout 19 features a logo, address, and open hours on the left side. In the center is a menu bar, and on the right is a newsletter sign-up form and social media links. At the very bottom is a copyright notice.

Divi Product Highlight Divi Designer Pack Footer 19

Divi Designer Header Templates

There are 20 header templates in the Divi Designer Pack as well. This is header 7. It features a secondary menu bar in green with contact information and a CTA button. The primary menu bar features a logo on the left and menu items aligned to the right.

Divi Product Highlight Divi Designer Pack Header 7

Header layout 8 features contact information with an inline logo at the top. Below are the menu items.

Divi Product Highlight Divi Designer Pack Header 8

Header layout 13 features some social media icons on the left, a logo in the center, and a CTA button to the right. Below are the menu items, aligned to the left, and a search bar which is aligned to the right.

Divi Product Highlight Divi Designer Pack Header 13

Divi Designer 404 Templates

There are 25 different 404 page templates. The first design, layout 6, features the letters “OOPS” behind the 404 error text. This layout also has an orange button to go to the home page.

This is layout 9. It features some large shadowed text and the 404 error, along with a button to go back to the home page followed by some social media icons.

Divi Product Highlight Divi Designer Pack

Layout 12 features the 404 numbers in a large font and has a button to go back to the home page.

Divi Product Highlight Divi Designer Pack 404 12

Divi Designer Blog Templates

Divi Designer Blog Page Templates

There are 20 blog templates that come with the Divi Designer Pack. Blog layout 1 features an image header with a title and a button. The posts are listed on the left with the featured image, post information, and read more button. There is a sidebar on the right with a search bar, recent posts, and recent comments. At the bottom is another image with text overlaid.

Divi Product Highlight Divi Designer Pack Blog 1

Here is the dark version of blog layout 1.

Divi Product Highlight Divi Designer Pack Blog Dark 1

Blog layout 8 features some curved section dividers and a header section with text and a button at the top. Blog posts have a card-style layout with an image, post details, and a read more button. At the bottom of the page is another text section.

Divi Product Highlight Divi Designer Pack Blog 8

Blog layout 18 features a heading section with text and a button, followed by two blog columns. The left column displays posts with a large featured image. The right column just features the post’s details and a read more button. Finally, there is some additional text in the footer.

Divi Product Highlight Divi Designer Pack Blog 18

Divi Designer Post Templates

There are 20 different post templates that come with the pack. Post layout 4 has the featured image at the very top of the page, with the post title, post information, and a button overlaid. Following this is the post content and comments. There is a sidebar on the right that features a search bar, recent posts, and recent comments. At the bottom of the page is some additional text.

Divi Product Highlight Divi Designer Pack Post 4

Here is the dark version of post layout 5. The featured image is at the top with a curved divider. The post content and comments are on a dark background, followed by a section with an image and overlayed text promoting an offer.

Divi Product Highlight Divi Designer Pack Post Dark 5

Layout 11 begins with the post title at the top, then the large featured image. Then, you can find the post content and the comments. On the right there is a card containing the post information.

Divi Product Highlight Divi Designer Pack Post 11

Post layout 13 also features the title at the top, followed by the featured image. The post information is listed below the image. Next is the post content and comments, and finally there is a related posts section displaying cards with other posts from the blog.

Divi Product Highlight Divi Designer Pack Post 13

Divi Designer Woo Templates

The Woo Templates are layouts that work with the Woo Commerce plugin.

Divi Designer Cart Templates

There are 13 cart templates that come with the pack. Cart layout 1 features a blue color theme. There is a heading at the top, followed by the cart where you can see the cart contents, apply a coupon, and update the cart. There is a return to shop button below this. On the right is the cart total, followed by the proceed to checkout button.

Divi Product Highlight Divi Designer Pack Cart 1

Cart layout 2 has a heading with a cart icon. Then there is the cart where you can see the products. Following this on the left is some coupon information, and on the right is the cart total and the proceed to checkout button.

Divi Product Highlight Divi Designer Pack Cart 8

Cart layout 8 begins with a heading, followed by the cart content. Below these are some blurb icons and a return to shop button. Following this is the cart total and a proceed to checkout button. On the right of this is an accordion module with some FAQs.

Divi Product Highlight Divi Designer Pack Cart 2

And here is the dark version of cart layout 8.

Divi Product Highlight Divi Designer Pack Cart Dark 8

Divi Designer Checkout Templates

There are 13 checkout templates in total. Checkout layout 3 features links to the shop and cart pages at the top, followed by a coupon entry section. Below on the left are billing details and additional information, and on the right are the order total and payment. This is the dark version.

Divi Product Highlight Divi Designer Pack Checkout Dark 3

This is the 4th template. It features several icons at the top that are linked to the cart and shop, followed by a coupon code entry. On the left are billing details and additional information, and on the right are the order total and payment method.

Divi Product Highlight Divi Designer Pack Checkout 4

Here is the dark version of checkout layout 4.

Divi Product Highlight Divi Designer Pack Checkout Dark 4

Checkout layout 10 features a title and coupon entry at the top, followed by the billing details and additional information. On the right are the order total, payment, and some blurb modules.

Divi Product Highlight Divi Designer Pack Checkout 3

 

 

Divi Designer Product Templates

There are 13 product templates as well. This is layout 2, which features a large image of the product at the top. Following this is the product name, cost, description, and add to cart button. Below are related products and reviews.

Divi Product Highlight Divi Designer Pack Product 2

Product layout 6 has a darker background and features the product photo on the left and the product information on the right, with the add to cart button. Below are the description, reviews, and related products.

Divi Product Highlight Divi Designer Pack Product 6

Product layout 10 has a card layout with the product information and add to cart button on the left. On the right is the product image. Below are reviews and related products.

Divi Product Highlight Divi Designer Pack Product 10

Here is the dark version of product layout 10.

Divi Product Highlight Divi Designer Pack Product Dark 10

Divi Designer Shop Templates

Finally, there are also 10 shop templates that come with the Divi Designer Pack. This is layout 4, which features a header with an image, followed by a sidebar and the products. At the bottom are some blurb modules with large icons.

Divi Product Highlight Divi Designer Pack Shop 4

Shop layout 8 features a heading with text and an image, products below with a border, followed by some blurb modules.

Divi Product Highlight Divi Designer Pack Shop 8This is the dark version of shop layout 8.

Divi Product Highlight Divi Designer Pack Shop Dark 8

Finally, shop layout 9 features a heading with an image, followed by products on the left and a sidebar on the right, then some blurb modules at the bottom.

Divi Product Highlight Divi Designer Pack Shop 9

Purchase Divi Designer Pack

Divi Designer Pack is available in the Divi Marketplace. It costs $19 for unlimited website usage and lifetime updates. The price also includes a 30-day money-back guarantee.

Final Thoughts

We just hit the tip of the iceberg in this article, there are so many more layouts to discover in the Divi Designer Pack, all with different styles and uses. Of course, every layout can be completely customized with your own content and changed to match your specific use case, and you can combine many different section layouts to easily create full-page layouts. To preview all of the different layouts you get with the Divi Designer Pack, take a look at the live demo.

We would love to hear from you! Have you tried Divi Designer Pack? Let us know what you think about it in the comments!

The post Divi Product Highlight: Divi Designer Pack appeared first on Elegant Themes Blog.

Get More Clients:

What would one more client per month mean for your business? Click here for commitment-free SEO and digital advertising. Financing available.