Tag: Divi Product Highlight

Divi Product Highlight: Milly Child Theme
Milly is a third-party child theme for Divi that was designed with entrepreneurs in mind. It comes with lots of pages, layouts, and styled modules to build any type of business website and create new pages with the sections. It even adds extra features to help your shop or business stand apart. In the post, we’ll take a close look at the Milly Child Theme to help you decide if it’s the right Divi child theme for your needs.

Installing Milly Child Theme

First, we’ll look at how easy it is to install Milly. Installing the Milly child theme was simple. Firstly, go to Appearance > Themes and select Add New.
1. Appearance
2. Themes
3. Add New
Secondly, with Divi activated, upload the child theme as you would any theme. Select Upload Theme, Choose File, navigate to the file, selectÂ it, and click Install Now.
1. Upload Theme
2. Choose File
3. Install Now
Thirdly, once the child theme has finished uploading, activate it.
1. Activate
Fourthly, you’ll need to import the demo content. This will make your website look like the demo, but it does not include images. Instead, it shows a dummy image with the size you’ll need for that location. To import the demo content, go to Milly > Demo Import, select all the files you want to import (I recommend leaving this at the default), and Import Demo Content. It will also install and activate WooCommerce for you. WooCommerce is selected by default.
1. Milly
2. Demo Import
3. Make your selections
4. Import Demo Content
Fifthly, remove the demo import panel. This cleans up your dashboard so you won’t have links you no longer need.

Finally, the Milly child theme is ready to use. Here’s the home page after the demo content has been imported. Next, let’s take a look at what’s included.

Milly Child Theme Pages and Layouts

First, we’ll look at the pages and layouts. Milly includes lots of marketing templates. This includes four home pages that are built around different types of business models. It also includes an about page, a project page, a case study page, a sale page, a service landing page, resources, contact, FAQs, blog, and shop pages.

Pages

There are over 30 pages added to your website. They include multiple home pages, standard site pages, and lots of eCommerce pages. The home pages include a default page, one for freelancers, an eCommerce page, and one for a business agency.

This is the default home page. It includes a CTA on the left and an image on the right that follows your cursor. Other sections include blurbs that show benefits, number counters, a CTA, an embedded video, a different set of blurbs with large icons, another small CTA, and a product slider. We’ll see these elements as we explore the features. It has a white color scheme with a few dark gray backgrounds.

This is the freelancer/entrepreneur home page. This one has two CTAs on the left and a smaller image on the right. It also includes a section for a freebie, blurbs with hover effects, a testimonial slider, a project slider, and a CTA.

Here’s the business/agency home page. Instead of a hero section with a CTA, it has blurbs with a focus on services. I’m hovering over one to show its hover effect. This home page includes a large blog section, a CTA, number counters, client logos, and a CTA with steps. It adds a section with light green for the background. This example also shows the custom icons.

Here’s a look at the eCommerce home page. It places the hero image on the left with the CTA on the right. It also uses a large shop section to show products, benefits, a testimonial slider, and a shop CTA with two products.

Divi Library

There are 135 layouts added to the Divi Library. They include all the templates that are used on other pages and in the Theme Builder. They also include icons. Let’s look at a few at random. I’ll save the WooCommerce layouts for a different section.

This example shows a testimonial slider. The testimonials are built as cards.

Here’s another slider. This one shows client logos.

This layout is a popup overlay. It’s a CTA with an image and a button.

This layout is a promo bar. It includes a CTA to the shop. This bar is included on the shop page. On that page, it sticks to the bottom of the screen until you scroll far enough, and then it scrolls with the screen.

This section shows a timeline in an alternating layout.

This one shows a sample project. It includes a slider.

This example shows a pricing table.

This section includes an embedded video and lists the steps. It also includes a button to share the video.

Here’s another overlay. This one includes a video and a button.

This layout is a sidebar. It includes a circled image and a button to learn more.

Theme Builder

There are 13 layouts in the Divi Theme Builder. These include headers and footers, the body layout for posts in full width and with a sidebar, the shop page, product pages, and a 404 page. Some are not assigned, so you get to assign the layouts you want to use.

The layout for all posts includes a large, featured image that overlaps the background. It also includes previous and next articles, related posts, and an email signup form.

The product’s body layout displays a large product image with a gallery and description under the featured image on the left side. The right side includes all the product information and options. The right side stays in place until the end of the description. It also includes related products, testimonials, and shipping information.

Here’s the 404 page. It includes a hover animation for the icon.

Milly Child Theme Sales Funnels

Milly includes three marketing kits: Webinar, Challenge, and List Building. They include pages to build marketing campaigns.

The List Building Kit includes a freebie landing page, email signup confirmation, and freebie delivery. This example is from the demo page, so you can see how it looks with images.

The Webinar Kit includes registration, confirmation, and replay. Here’s a look at its demo page.

The Challenge Kit includes registration, confirmation, and inside the challenge. The image elements move independently on hover.

Milly Child Theme Header

The header includes submenus, a CTA, and custom WooCommerce icons, including a product count for the shopping cart icon. The CTA includes a hover animation to get attention. It also includes a popup. On certain pages, such as the shop page, the header is placed under the hero section. It scrolls with the page and sticks to the top of the page when it reaches that area.

Milly Child Theme Icons

Over 20 of the layouts in the Divi Library are custom icons. This shows several of the custom icons. Most of the icons have a green circle in the center.

This example shows the rest of the icons.

They’re created with Code Modules. This example shows a Dark Arrow. You can load them from the Divi Library as Modules.

Milly Child Theme WooCommerce Pages and Layouts

Next, let’s look at the WooCommerce features. Milly includes several pre-styled product pages and sliders to display your products. It also includes a custom cart, account page, and checkout page. Let’s look at a few of them.

Shop Page

The shop page includes a hero section with a CTA. The promo bar sticks to the bottom of the screen at first.

Scrolling reveals the header. This section includes a product slider.

Related products are also shown with a product slider.

This example shows the sales slider. The promo bar has now scrolled with the page.

Cart

The cart page includes icons with a bar to indicate where you are in the process.

Milly Theme Options

Finally, we’ll look at the theme options. Milly adds a tab to the Divi Theme Options. Here, you can choose and adjust several options.

Colors

The colors tab lets you select colors for dark elements and headings, dark elements and body text, and three different accent colors. Clicking on a color opens a color picker where you can select the color you want.

Overlays

Milly can use any section as a popup. They’re triggered by a click. Just add the CSS class to the section and the element you want your visitors to click. This means you can build a popup with the Divi Builder with any layout or custom design you want. The overlays tab includes settings for the background color, blur the background, close on click, close with the escape key, close icon, close icon color, and hide the overlays in the builder.

Preloader

The preloader tab lets you enable the preloader and choose its options. The options include animation, color, and background color.

Options

The options tab lets you enable the parallax effect and enable carousels and sliders.

Milly CSS Classes

Also, there are 11 other CSS Classes designed for the Milly child theme that lets you customize the way it works. You can find the list in the documentation. Place the CSS Class in the advanced tab of the section where you want to use it.

Where to Purchase Milly Child Theme

Milly Child Theme is available in the Divi Marketplace. It’s regularly $97 and includes unlimited website usage, a 30-day money-back guarantee, and one year of support and updates.

Ending Thoughts on the Milly Child Theme

That’s our look at the Milly Child Theme for Divi. The design is clean, and I found Milly to be easy to use. The features have a strong focus on sales, making it ideal for anyone wishing to run an eCommerce website or capture leads and guide them through a sales funnel. I was impressed with the number of pages and features. I especially like the preloader and popup overlays. If you’re interested in a child theme for business, the Milly child theme is worth a look.

We want to hear from you. Have you tried Milly Child Theme for Divi? Let us know what you think about it in the comments.

The post Divi Product Highlight: Milly Child Theme appeared first on Elegant Themes Blog.
11.06.2023
Divi Product Highlight: Divi Footers Pack
Divi Footers Pack is a third-party plugin for Divi with over 80 custom footer designs. The footer is often an overlooked area of any WordPress website. A layout pack such as this one can ease the footer design process. In this post, we’ll take a look at Divi Footers Pack to help you decide if it’s the right Divi product for your needs.

Uploading Divi Footers Pack Layouts

The Divi Footers Pack layouts are JSON files that can be uploaded to your Divi Library. First, download and unzip the file. You’ll see 82 JSON files in your unzipped folder.
1. Download
2. Unzip
Next, go to your Divi Library and import the file you want to use. You can preview them from the product page. This is the only way to know which layout to use before uploading them. Fortunately, you can upload all of them at once if you want, or you can just upload the specific footer layout you want. I’ve selected to upload all the files in this example. To upload them, go to:
1. Divi
2. Divi Library
3. Import and Export
4. Import
5. Choose File
6. Import Divi Builder Layouts
Once they’ve uploaded, you’ll see them in your Divi Library. The layouts are now ready to use in the Divi Builder and Divi Theme Builder. Once the upload was completed, I had 162 files in my library. This includes the layouts with and without a fixed setting. The regular footers scroll with the page while the fixed footers remain in place and are revealed as the user scrolls. They’re labeled, so it’s easy to know what the variation is.

Divi Footers Pack Layouts

Here’s a look at a few of the footer layouts. I’ve selected those that stood out to me the most. I’ll describe them and point out what I like the most about them. We’ll see how they look on the front end with a Divi layout. I’ll show wireframes and the mobile view for a few of them. I’m using the landing page from the free Coworking Layout Pack for all the examples.

Divi Footers Pack Footer Design 1

Footer Design 1 is the first footer layout in the Divi Footers Pack. It displays the footer menu on the left with a copyright notice under it. On the right are social media icons. Everything is in red.

Here’s how it looks on the front end.

Footer Design 2

This is the second footer in the layout pack. It has a simple and clean layout with colors that work great together.

Footer Design 7

Footer Design 7 includes a blue gradient background and adds buttons for the app stores above the rest of the footer content. This one is still fairly small and doesn’t overwhelm the layout with too much content in a small space.

Footer Design 12

Many of the footer layouts include Code Modules to add custom styling. This is Footer Design 12. It also includes a gradient background and adds a large email form.

Footer Design 14

Footer Design 14 displays four columns with links, a menu, and a blog. This one also includes a Code Module for styling. Here’s the wireframe with the Code Module open.

Here’s how it looks on the front end. There is a lot of white space around the columns. The blog shows two posts with small thumbnails. The white background and small text give this one an elegant look and feel.

Footer Design 16

Footer Design 16 adds multiple rows in various columns. This one also includes a custom code. Here’s the wireframe.

Here’s how it looks on the front end. It adds clickable contact information at the bottom with bold colors that stand out.

Footer Design 18

Footer Design 18 adds a background image and overlay to the section. It also includes four columns with lots of extras, including a CTA button, Opening Hours, and a Gallery.

Here’s the layout on the front end. This is one of my favorites. It adds icons to the contact information, the gallery includes small thumbnails. The colors work perfectly over the background image.

Footer Design 25

Footer Design 25 is another layout with a background image. This one adds a lot of space under the links to give room for the background image to show.

Footer Design 26

Footer Design 26 uses a Specialty Section to create a multi-column layout. Here’s the wireframe.

It makes interesting use of negative space. I like the large text and colors for this one. The orange text is easy to read over the brown background.

Footer Design 30

Footer Design 30 displays contact information within large blocks with white borders. The backgrounds of the blocks match the background of the section. This one is simple and clean, providing only limited information.

Footer Design 34

Footer Design 34 uses a brown background with white text. The layout includes three columns with clickable contact information. Backgrounds for social icons stand out just enough to get attention.

Footer Design 37

Footer Design 37 includes a background image with a contact form and contact information in the foreground. This one divides the elements into segments with yellow borders around each segment. The icons, the submit button, and the background of the social media segment are yellow. The background behind the contact information is more opaque, making it stand apart from the rest of the footer’s content.

Footer Design 38

Footer Design 38 displays the content in the center of a large circle with an even darker background behind it. The centered content has enough separation that nothing gets lost in the layout. The font and icon colors work great against the dark gray background.

Footer Design 41

Footer Design 41 also uses a Specialty Section to create a layout with multiple columns. This is the wireframe view.

Here’s how it looks on the front end. It includes a dark blue/gray background with white text that stands out. The email form is small and fits the area well. The information area has a lighter background, so it stands apart from everything else.

Footer Design 43

Footer Design 43 provides a background image with a dark green overlay that stands out. The menu and address take the center and stand out from each other. The social media icons are bold gold that makes the small icons pop. I like the white text and gold icons against the green background.

Divi Footers Pack Footer Design 46

Footer Design 46 includes a two-column layout for the main portion of the footer. It includes a larger column with a contact form that blends with the footer’s design. The button, titles, and icons are in green and stand out well against the beige background, drawing attention away from everything else.

Footer Design 52

Footer Design 52 includes a dark gray background with multiple sections and columns to present the contact information and menu links. The text is white and includes large titles and small links. This one also includes icons with contact information.

Footer Design 55

Footer Design 55 is simple, and it just works. The main focus is a CTA with large text and a clickable email address. It has plenty of negative space to draw attention to the CTA. It also includes a menu and copyright notice.

Footer Design 59

Footer Design 59 includes a two-column layout with text on the left and a contact form on the right. A vertical line separates them. It includes a black background with bright blue highlights for the titles, a contact form button, and social media icons. A bottom bar with the same bright blue background displays the copyright notice.

Divi Footers Pack Footer Design 63

Footer Design 63 includes a three-column layout with two CTA buttons on the left, contact information in the center, and an email form on the right with a design that matches the CTA buttons. The buttons and email form give the footer a well-balanced symmetry. The purple and plumb colors work great against the brownish-gray background. Both the phone number and email address are clickable. All the buttons include hover effects.

Footer Design 67

Footer Design 67 has an interesting layout. The wireframe shows multiple columns, but some are intentionally not used.

On the front end, this creates elegant spacing for the footer elements. It includes a purple (technically a dark blue/magenta) background with white text. The extra-large text for the clickable phone number draws attention as a CTA.

Footer Design 69

Footer Design 69 is one of the largest footers in the Divi Footers Pack. It includes two large sections. Both have blue backgrounds and gold text. The top section displays a full-width image. This section creates a CTA. The second section includes the standard footer elements with contact information, links, and an email form. The white and gold text works perfectly with the blue backgrounds.

Footer Design 77

Footer Design 77 also includes two sections. The top section displays contact information in large boxes with clickable text and icons. Their backgrounds contain different colors, and they stand out from everything else. The bottom section includes four columns with the standard footer content in white against a blue background. Social media icons sit under the email form.

Here’s a look at how this footer works on mobile. The contact information blocks, as well as all of the footer elements, stack.

Divi Footers Pack Footer Design 81

Footer Design 81 includes a large blue background with styled contact information in the center with rounded corners. Contact information includes a two-color design with an image that overlaps the colors. The top portion shows the phone number in large text over a blue background. The bottom portion includes a white background with an email link and social media links under the image, and a contact form on the other side. I like the square border for the social icons.

Here’s how this one looks on mobile. All the columns stack. The contact form fits the width of the screen.

Where to Purchase Divi Footers Pack

Divi Footers Pack is available in the Divi Marketplace for $19. It includes unlimited website usage, one year of support and updates, and a 30-day money-back guarantee.

Ending Thoughts on Divi Footers Pack

That’s our look at Divi Footers Pack for the Divi Builder. There are a lot of pre-made footer designs in this pack. We’ve only looked at a few of the layouts in this post, but this should provide a good idea of how well they work with any Divi layout. They are easy to use, but I recommend uploading all of them at once if you want to use more than a few of the layouts. All the layouts look professional, and they have a wide range of designs to choose from.

We want to hear from you. Have you tried Divi Footers Pack? Let us know what you think about it in the comments.

The post Divi Product Highlight: Divi Footers Pack appeared first on Elegant Themes Blog.
04.06.2023
Divi Product Highlight: Divi Block
Divi Block is an online tool to mix and match premade blocks. It simplifies layout design and provides a file to upload and customize even further. In this post, we’ll look at Divi Block to see what it can do to help you decide if it’s the right Divi building tool for your needs.

What is Divi Block

Divi Block is an online drag-and-drop tool that lets you build layouts with close to 480 pre-designed blocks. Once you’ve created the layout, you can download it as a JSON file and upload it to any Divi website.

Divi Block includes:
- Header Builder
- Layout Builder
- Footer Builder
- Section headings
- Special module designs
- Light and dark versions
- Color schemes
You can preview your layouts on a real Divi website.

Divi Block Online Tool

The Divi Block layout includes 4 areas. I’ve named them by their function:
1. Page menu â€“ the first menu lets you add and edit blocks, manage pages, export to Divi, see the documentation, see the support forum, zoom in and out, undo and redo, and preview the page on a live Divi website.
2. Block menu â€“ the second menu opens when you hover over it. It includes all the blocks you can add to your page. Clicking on one of the blocks opens a submenu with all the designs for that block.
3. Editing area â€“ this is the canvas where you’ll drag the blocks to and arrange them in any order you want.
4. Color scheme â€“ this is the color selector to change the color scheme for the layout.
Page Menu

The first menu controls the pages. Here, you can edit and export the page, create new pages, save your work, load a page, etc. When you save your work, it will download a file to your computer. You can load this file to pick up where you left off. You can also preview and export the layout from here.

In the example below, I’ve clicked the Manage Pages & Export to Divi icon and selected to edit the page settings. It has opened a modal where I can enter a title and apply it to the new page.

Block Menu

The block menu includes all of the blocks and elements you can add to the page. Hover over any element to see all the designs for that element. It includes headers, page layouts, footers, and custom modules. Many of them include features that are added without plugins. Click the element to add it to the page. In the example below, I’ve selected to see the hero headers. I clicked on the third hero header and added it to the page.

Editing Area

When you click on any of the blocks, they’re added to the editing area. You can then edit the layout further. Hovering over a block shows a small window with some editing tools. You can move the block up or down, change it to a light or dark version of the block, and delete the block from the layout. You can’t make changes to the layouts such as colors, text, etc. Those changes will be shown in the preview and in the layout on your website.

For this example, I’ve added three blocks: a card carousel, a page header, and a CTA. They were placed on the page in the order that I selected them.

Header Builder Examples

In this example, I’ve moved the blocks to different locations within the layout. I’ve also changed two of the blocks. The CTA is now light, and the card carousel is now dark. The blocks moved and changed extremely fast. I didn’t have to wait to see the new layout.

The header builder has 6 options that include pre-made headers, effects, sub-menus, mobile menus, mega menus, and preloaders. The effects show in the previews when you hover over them. In this example, I’m hovering over the Header and Navigation options, which include the pre-made headers. I’ve added a preloader and a mega menu to the layout.

Layout Examples

The layouts include hero sections, headers, about us pages, services, CTAs, FAQs, pricing tables, testimonials, team members, blogs, clients, galleries, numbers, processes, portfolios, email forms, contact forms, and footers. The example below shows a section heading, a hero header, and a page header.

This example shows sections for About Us and Services.

This example shows a CTA, an FAQ, and a pricing table.

Here are examples of a testimonial and a team layout.

This one shows a blog layout and client logos.

This example shows a gallery, a number section, and a process section, which shows the steps of a process.

Here are examples of a portfolio and an email optin form.

This example shows a contact form.

This example shows a footer.

Special Module Design Examples

The last portion of layouts includes special modules that add features without using plugins. Some of these are seen in the other layouts, but I’ll show a few of them. This one shows the before and after slider options.

Here’s the masonry gallery.

This example shows a promo bar, dynamic background, and a content toggle.

For this example, I’ve selected a floating button and a slide-in bar.

This example shows a horizontal timeline and gradient text.

Color Scheme

Clicking the color square in the lower right corner opens the color picker. This controls the color scheme for the elements on the page. The default is red, hex code 229, 27, 35. You can change it by moving the circle on the color area, moving the circle in the color slider, or adding the RGB values you want. When you change it, you won’t see the colors in the pre-made layouts change, but you will see them in your JSON files when you upload them and in the preview if you choose to view them.

Here’s the layout showing the original color. I’ve changed it to blue in the color scheme tool.

Here’s the layout on my website. It shows the blue that I chose. Next, we’ll see how to get the layout from Divi Block to your website and what you can do with it once you get it there.

Designing a Layout with Divi Block

I’ll use Divi Block to create a header, home page, and footer. I’ll then upload them as templates in the Divi Theme Builder.

Header

For the header, I’ve used a header with effects, submenu styling, and a mobile menu. I’ve used a brown color for the color scheme. I’m exporting the JSON file. It downloads as a zipped file, which I’ll unzip on my computer.

Next, I’ll build a global header from scratch in the Divi Theme Builder.

Next, I’ll import the layout.

Finally, I can now make any adjustments I want to the layout. I’ll add my primary menu, contact information, social links, and logo. Once I save it, the header appears on my site.

All the CSS is added to code blocks. The mobile menu is grayed out, as normal.

Here’s the header on the front end. The menu is sticky, so it remains at the top of the page when the user scrolls.

Homepage

For the homepage layout, I’ve added a hero section and a CTA. I’ve used a light orange for the color scheme. I’m exporting the JSON file, which I’ll unzip on my computer.

Next, I’ll build a homepage template from scratch in the Divi Theme Builder and add a custom body.

Next, I’ll import the layout.

Finally, I can now make any adjustments I want to the layout. I’ll add my text and images. Once I save it, the layout appears on my home page. This is the hero section.

Here’s a portion of the CTA.

Here’s the hero section on the front end. I’ve scrolled down to show the menu sticking to the top of the screen.

Footer

For the footer, I’ve used a layout with contact information. I’ve used a brown color for the color scheme. Now, I’m exporting the JSON file. I’ll unzip it on my computer.

Next, I’ll build a global footer from scratch in the Divi Theme Builder.

Next, I’ll import the layout.

Finally, I can now make any adjustments I want to the layout. I’ll add my contact info. Once I save it, the footer appears on my site.

Here’s the footer on the front end.

Where to Get Divi Block

Divi Block is available on the publisher’s website. The free version is available for anyone to use. The Pro version of Divi Block is only available as part of their Divi.Help Pro membership. Subscribers gain access to all of their Divi-related products, including the Divi Block Pro version, premium plugins, child themes, and layout packs. The Pro membership is $49 per year.

Ending Thoughts

That’s our look at Divi Block. This is an interesting drag-and-drop builder. Rather than moving modules and other elements around, we’re working with full elements as pre-rendered blocks. This makes it easier to create layouts without getting bogged down with where everything should go on the page. It also simplifies full layout design because we can mix and max pre-made sections. You won’t see the custom colors while you’re working in Divi Block, but since the blocks are pre-rendered, it makes sense. We can preview it and adjust everything once the files are imported into the Divi Builder. I found Divi Block easy to use and it makes Divi layouts quickly and easily.

We want to hear from you. Have you tried Divi Block? Let us know what you think about it in the comments.

The post Divi Product Highlight: Divi Block appeared first on Elegant Themes Blog.
28.05.2023
Divi Product Highlight: Divi Den Pro â€“ Layout Library
Divi Den Pro â€“ Layout Library is a third-party plugin with a massive library of predesigned Divi elements to help you build websites faster. It includes a unique user interface that’s searchable and sortable, making the layouts easy to find. In this post, we’ll take a look at Divi Den Pro â€“ Layout Library to help you decide if it’s the right product for your Divi design toolbox.

Installing Divi Den Pro â€“ Layout Library

Installing Divi Den Pro â€“ Layout Library was simple. It works the same as uploading any plugin, but you’ll need to be signed in to your Divi Marketplace Account for it to be available within Divi. First, to install, go to:
1. Plugins
2. Add New
3. Upload Plugins
4. Choose File
5. Install Now
Next, once the plugin is installed, activate it as usual, and you’ll see a new menu added to your dashboard.
1. Activate Plugin
Layout Library Content

The Divi Den Pro â€“ Layout Library comes with 2615 library items. This includes 1988 sections and modules, 631 layouts, 39 menus, and 18 complete website designs. All of the items are pre-styled. The layouts are labeled, tested, and optimized for different screen sizes.

There are several ways to use them in your Divi layouts. You’ll find the layouts in the Divi Den Pro DM menu and in the Divi Theme Builder. The Divi Den Pro DM menu is the easiest way to use them. You can search them by keyword and category and import them to your Divi Library.

Divi Den Pro DM Menu

You’ll find a new menu item in your WordPress dashboard called Divi Den Pro DM. The menu includes lots of links, which you’ll also find as tabs within the menu itself.

Layout Finder

The first tab is the Layout Finder. This includes a search box with filters on the left and the results on the right. It also includes tabs so you can view all layouts, only the free layouts, or just the pro layouts. The filters show the number of layouts in that type. They’re divided into layouts, sections, modules, categories, collections, Divi Theme Builder, and Plugin Theme Builder.

The results area shows a thumbnail of the layout. The thumbnail will scroll on hover if the layout is larger than the container. You can view the layout in another tab, save the layout to your Divi Library, or download the layout to your computer as a JSON file.

Selecting a filter opens it to show the options. I’ve opened Collections, which shows the names of layouts from Divi Den. Selecting one shows the layouts within that collection in the area on the right.

I clicked to view a layout and it opened the demo on the Divi Den page in another tab. The page shows multiple layouts, sections, etc. I’m hovering over the image in the top center to show its hover effects.

Latest

The Latest tab shows the latest posts from the Divi Den blog. This is a good way to learn what’s new in the Layout Library.

Tutorials

The Tutorials tab includes all of the tutorials that teach how to use Divi Den Pro â€“ Layout Library. They include embedded videos that show when you click on a tutorial, so you can learn directly from the Divi Den dashboard without leaving WordPress. This helps with usability, so if there’s something you need help with, you’ll find it here.

Theme Builder

The Theme Builder tab divides the layouts into Divi Theme Builder and Plugin Theme Builder. It shows the collections, page types, etc. These are also added to the Divi Theme Builder. You can also launch the Theme Builder from here.

The Plugin Theme Builder has a link to open the Theme Customizer.

The Theme Customizer adds three new customizer tabs for page, blog, and global settings. This includes added features such as a popup customizer, a sticky bar, more icons, the back-to-top button, a coming soon page, template customizations, and lots more.

Custom CSS Files

The Custom CSS Files tab provides the custom CSS from the Divi Den layouts that you can copy and modify. Clicking one opens the CSS in another tab. An embedded video shows how to use the custom CSS.

Advanced

The Advanced tab includes the White Label tab and the More Options tab. White Label lets you rebrand the plugin to match your brand.

The More Options tab lets you move the Divi Den Pro tab within the Divi Builder elements. This is enabled by default.

Divi Den Pro Layout Library in the Divi Builder

A tab for the Divi Den Pro â€“ Layout Library is added to the Modules modal.

Selecting the tab opens the menu where you can choose the layout you want. The layouts are downloaded as JSON files, so you’ll need to upload them to pages and posts if you want to use them.

Divi Den Pro Layout Library in the Divi Theme Builder

The Divi Den Pro â€“ Layout Library interface is also added to the bottom of the Divi Theme Builder screen. It works the same as it does in the WordPress dashboard.

It works the same way in the Theme Builder as it does on pages and posts.

Divi Den Pro Layout Library Examples

Now that we’ve seen how to use the Divi Den Pro â€“ Layout Library interface, let’s look at a few examples. We’ll look at a few of each type.

Layouts

Next, we’ll look at a few layouts. I’ll load them into the Divi Theme Builder. Once you’ve saved the layouts to your Divi Library, they’re available in your layouts. Search them and select categories on the left.

Shop Landing Page V3 Ragnar

This is the top portion of Shop Landing Page V3 Ragnar. It includes a hero section with an email CTA. A shop section shows featured products and includes an animated overlay that scrolls a message in large text on hover.

Here’s the bottom portion of Shop Landing Page V3 Ragnar. Extra-large images create shop CTAs and include animated buttons. A unique blog section displays the featured image behind the text that appears on one side.

Careers Page V1 Tina

This is the top portion of Careers Page V1 Tina. It includes a hero image with an overlapping title, an introduction with a callout, and two columns of text. Following this is a section of open positions displayed as cards.

This is the bottom portion of Careers Page V1 Tina. Blurbs with hover animations provide information followed by a CTA to send a CV and a section of company perks.

Old Times Blog Page

This example is the top portion of the Old Times Blog Page. It includes a hero section with a message over a background image and a button with a hover animation. A blog section shows a blog post with a large, featured image on the left and posts with a smaller featured image as a sidebar on the right. A yellow line separates the blog section from the hero section. All of the blog cards include tilt animations.

This is the bottom portion of the Old Times Blog Page. It also uses yellow lines for separation and includes two three-column blog sections, a large email form, and a footer.

Menu Page Layout Jamie

Here’s the top portion of the Menu Page Layout Jamie. It includes a hero section with icons that link to the various food menu categories. They include hover animations. A two-column food menu follows this with an image on the left and a description on the right. The food is divided into categories.

Menu Page Layout Jamie

This is the bottom half of the Menu Page Layout Jamie. It continues the food menu and includes contact information with a full-width map.

Showreel Home Page Layout

This is the top portion of the Showreel Home Page Layout. The hero section includes a button that plays an embedded video and several blurbs over a full-screen background image. Following this is a set of tabs to display information. Large images with animated overlays link to the services.

This is the bottom portion of the Showreel Home Page Layout. It continues the large images and includes another section of images for services with tilted overlay animations. It also includes styled number counters, an email form, and a footer.

Visual Progress Bar Page Freddie

This one is Visual Progress Bar Page Freddie. It has an elegant layout, but the main element I want to show is the progress bar. This is the hero section of the layout. A menu sits at the bottom of the screen. When you scroll, the menu attaches to the top of the screen and shows the progress through the layout.

The section in this example is case studies. The progress bar shows yellow for every section that I’ve scrolled past. The images for this section include tilt effects.

Sections

If you have Divi Den Pro â€“ Layout Library sections saved to your Divi Library, a Divi Den Pro DM tab is added to your Section modal.

Greatest Hits Music Module Freddie

Greatest Hits Music Module Freddie provides a styled audio player section with a black background and yellow hover effects.

Styling Gallery Demo

Styling Gallery Demo provides an interesting image gallery with different border shapes and a block of color to separate the images.

Lintang Process Grace

Styling Gallery Demo provides a list of steps. They’re placed horizontally and include shaped images or colors, and hover effects.

Thunderbolt Product Freddie

Thunderbolt Product Freddie is a product section that displays a product slider on one side and styled information on the other.

Alula Timeline Grace

Alula Timeline Grace creates an alternative vertical timeline with images on one side and information on the other.

Modules

The Modules option in the dashboard shows buttons. Here are a few that I downloaded.

I’ve added all the buttons I downloaded to a single page. Each of the buttons includes engaging hover animations.

Where to Purchase Divi Den Pro Layout Library

Divi Den Pro â€“ Layout Library is available in the Divi Marketplace for $189. It includes unlimited website usage, one year of support and updates, and a 30-day money-back guarantee.

Ending Thoughts on Divi Den Pro Layout Library

That’s our look at Divi Den Pro â€“ Layout Library. There are a lot of layouts in this library. The user interface is simple. Searching, sorting, importing, and downloading the layouts is intuitive. I found the link on the sections and modules to be limited more than the dashboard, once the layouts are in the library, they’re available by selecting the Add from Library options. If you’re interested in adding several thousand professionally designed layouts to your Divi Library, Divi Den Pro â€“ Layout Library is worth a look.

We want to hear from you. Have you tried Divi Den Pro â€“ Layout Library? Let us know what you think about it in the comments.

The post Divi Product Highlight: Divi Den Pro â€“ Layout Library appeared first on Elegant Themes Blog.
21.05.2023
Divi Product Highlight: Avanti â€“ Divi Multi-Purpose Child Theme
Avanti is a third-party child theme for Divi with over 60 pages in 9 niches to help you build just about any type of website you need. Using Avanti helps you build your website quicker. There are also WooCommerce-focused designs that’ll help you easily set up your online store. In this post, we’ll go through some of the layouts this Divi child theme provides to help you decide if it’s the right product for you!

Let’s get to it.

Installing Avanti

Installing Avanti is simple. It works the same way as installing a regular WordPress theme, but it has a couple more steps. It’s recommended to install Avanti on a fresh WordPress site. Since this is a Divi child theme, Divi is required. I found the installation process to be intuitive.
1. Go to Appearance
2. Select Themes
3. Select Add New
1. Click Upload Theme
2. Click Choose File
3. Navigate to the zipped file on your computer, choose it, and click Install Now
1. Click Activate
1. Go to Avanti Demo Import
2. Click Easy Demo Import
3. Choose Import Demo Content
1. Click Remove Demo Content and Import Functions
Avanti Pages, Layouts, and Templates

With a combination of pages and templates, Avanti provides over 60 pages with over 30 elements in 9 niches. This includes complete websites, multiple header and footer designs, shop pages, etc. I’ll show the layout with the placeholder images for some of the layouts and screenshots with the images from the sales demo to get a better look at the finished product. Here are some of the pages.

Here are some of the layouts added to the Divi Library.

It also includes 11 premade and preassigned templates.

Avanti Home Pages

Avanti includes 11 home pages for different types of businesses. They include:
1. Business
2. Restaurant
3. Photography
4. Consultation
5. Web Design
6. Dental
7. Renovation
8. Plumber
9. Shop V1
10. Shop V2
11. Shop V3
Each includes lots of styled elements, hover animations, scroll animations, and even the Ken Burns effect for background images. They include dummy images with their image size. The Business homepage is the default. This Divi child theme receives regular updates. We’ll look at the two newest home pages, Restaurant and Photography, and we’ll also look at its latest WooCommerce update.

Avanti Restaurant Home Page

The Restaurant layout has 5 pages, including the home page, about, food menu, testimonials, and contact page. Here’s the hero section of the home page with the dummy images.

Here’s a look at the home page with images from the child theme’s demo page. This includes a custom header.

Here’s part of the demo page. As you can see, this is a large page with many elements. All of the full-screen images are stationary. It includes a full-screen hero section with a link to the menu, an about section with image hover effects, images with hover effects that link to the food categories, a CTA to the food menu, a CTA to make a reservation, a two-column food menu created with blurbs, custom testimonial cards, a contact form, and more.

Avanti Photography Home Page

Photography includes 10 pages, including home, about, services, single service, photo gallery, single gallery, testimonials, pricing, FAQ, and contact. Here’s the Photography home page. It also includes a transparent header. This is the hero section with images from the child theme’s demo page.

Here’s the demo home page. This image was taken with parallax scroll effects. It includes a full-screen hero section with a link to the galleries, images that link to the categories, an about section with a link to the full story, styled testimonials with a custom design, a blog with custom blog cards, a contact form with images on both sides and a custom footer with contact information and an email form.

Other Avanti Pages

Aside from home pages, Avanti includes 3 WooCommerce shop home pages, 5 About Us, 3 Services, 3 Service pages, 5 Contact Us, 4 Portfolio pages, and many more. Other pages include blogs, Thank You, Testimonials, FAQ, Pricing, 404, etc. Many of these also include multiple versions.

Home Page Shop V1

Home Page Shop V1 displays a full-width slider with a CTA to the shop. This is the page with placeholder images. This is one of the original layouts, but I wanted to include it to see how the new layouts compare.

Here’s the page from the demo. It includes a section for the shop with categories, best sellers, CTAs, and products on sale. Following this is a full-screen CTA in parallax with text scrolling effects, a blog section for the latest news, and an email subscription CTA.

Home Page Shop V3

Home Page Shop V3 is a new shop design. Here’s the hero section with the placeholder images.

Here’s the page from the demo. It includes a slider with CTA, blurbs with information, a shop section with the featured and latest products, a full-screen CTA in true parallax, products on sale with a styled image, a deal of the day section with a countdown timer, CTAs, new products, the latest news, and brand logos.

Cart V2

Cart V2 is a new cart page that displays navigation icons at the top of the page to show the user knows where they are in the shopping process. It also displays a styled cart, a sale CTA, and cart totals.

Cart V3

Cart V3 is also new. It includes the same style as Cart V2 but moves the cart totals next to the cart and does not include the sale CTA.

Checkout V3

Checkout V3 is a new checkout page. It includes the navigation icons at the top of the page and a two-column section with a checkout form on the left and a smaller column on the right with information and testimonials.

About Us V4

About Us V4 is a new page that’s designed for the new Restaurant layout.

Here’s part of the page from the demo. It includes a full-width CTA in parallax, an about section with zoom effects, a menu CTA, and styled testimonials.

About Us V5

About Us V5 was designed for the new Photography layout.

The page includes a hero section in parallax with a CTA, an about section with a link to the contact page, blurbs that show information, testimonials, a blog, and a styled contact form. Most of these are included on the home page.

Services V3

Services V3 is a new page designed for the Photography layout. It includes a section with images for the services with an interesting hover effect. The image swings upward, and the text swings downward inside the card to reveal a photo and a button to see more. It also includes styled pricing tables.

Single Service V3

Single Service V3 is a new page for the Photography layout. It includes a large section for text and an image to describe a single service. It also includes testimonials, a contact form, etc.

Contact Us V4

Contact Us V4 is a contact page for the new Restaurant layout. It includes a two-column section with contact information, opening hours, and a form on the left side. The right side includes a map in monochrome.

Contact Us V5

Contact Us V5 is the contact page for the Photography layout. It includes a section of blurbs with contact information. The main part of the page contains a large contact form.

Testimonials V2

Testimonials V2 is a testimonials page for the new Restaurant layout. It displays testimonials within a styled card with an image background.

Pricing V2

Pricing V2 is a new page for the Photography layout. It includes the same hero section, testimonials, and contact section from the other pages and adds a styled pricing table. The table displays cards with varying heights and background colors for the titles.

Avanti Elements

Avanti includes several pages with just the elements so you can easily access them. They include headers, footers, slide-ins, flip boxes, service boxes, pricing tables, opt-ins, team members, and testimonials. Three of them include new elements. We’ll look at those three.

Headers

Avanti includes 5 headers to choose from. They include dropdown menus with backgrounds that match elements within the header. The first header is the default. It’s set up in the Divi Theme Builder as the global header. All the headers are added to the Divi Library, so you can easily change to a different header if you want.

Service Boxes

Avanti’s service boxes include six different ways to showcase your services. Most include hover effects that add text, change the images, zoom, etc., to create interesting cards.

Testimonials

Avanti includes 5 testimonial designs. These present your testimonials in styled cards. They include the new designs for the Restaurant and Photography layouts. The first testimonial includes hover effects.

Avanti Documentation

The documentation steps through setting up the child theme and performing specific tasks such as disabling the Ken Burns effect, changing the content of the flip boxes, redirecting the contact form, changing the slide-in, adding a menu badge, and more.

Where to Purchase Avanti

Avanti is available in the Divi Marketplace for $35. It includes unlimited usage, a 30-day money-back guarantee, and one year of support and updates.

Ending Thoughts

That’s our look at the Avanti Divi child theme. I found it easy to use, and the number of pages makes it highly versatile. The new pages and elements look great. I especially liked the new Restaurant, Photography, and shop home pages. Avanti has a lot of pages in many niches, making it a great choice for just about any type of website. I felt that its value far outweighed its price.

We want to hear from you. Have you tried the Avanti Divi child theme? Let us know what you think about it in the comments.

The post Divi Product Highlight: Avanti – Divi Multi-Purpose Child Theme appeared first on Elegant Themes Blog.
14.05.2023
Divi Product Highlight: DiviCity

DiviCity is a one-page Divi layout available in the Divi Marketplace. It has a versatile design that can be used for many different types of websites and is completely responsive and customizable. In this product highlight, weâ€™ll take a look at the DiviCity layout and help you decide if itâ€™s the right layout for you.

Letâ€™s get started!

Installing DiviCity

DiviCity comes as a ZIP file containing Divi Visual Builder .json files. To install the layout, start by unzipping the file. Next, open your page in the Divi Builder.

Click the portability option at the bottom of the page and select the import tab. Then select the .json file for the DiviCity layout and begin importing the layout. Once the layout has been imported, all you need to do is replace the content with your own, and your website is complete!

DiviCity

DiviCity consists of a one-page Divi Builder layout. It comes without any of the demo images, so I added my own for the purpose of this article. Letâ€™s take a look at the sections that come with this layout!

DiviCity Header Section

The header consists of a large image with an angled divider at the bottom. The header has features subheader and header text, as well as a button. The text features a loading animation effect. Two boxes overlay the bottom of the header section. Each box contains some heading text, a divider line, body text, and a button. These boxes also have a loading animation and expand on hover. Finally, there are four blurb modules below with an icon, heading text, and body text. The blurb modules reveal one at a time as the page loads. This heading layout can be easily customized with your own photos and content to create a great-looking, engaging heading section that gives your visitors key information about your business at a glance.

DiviCity About Section

The about section has some introduction text, a header on the left, and an image on the right. Both of these elements have a fade-in animation and move into the center. Below are three fullwidth sections that feature an image and a text block with a heading and some body text. Each of these sections have a loading animation effect as well.

DiviCity Blog Section

By default, the blog section features a simple recent posts module listing three recent posts with the featured image and post information. There is also some heading text and body text in this section. This section features fade-in animation.

Alternatively, you can achieve the design featured in the layout demo by installing the free Divi Article Cards plugin. Once the plugin is installed and activated on your site, open the Divi 100 settings from the WordPress dashboard menu. Activate the article card, then click save.

Now the blog modules on the DiviCity page should look something like the layout above.

DiviCity Numbers Section

The numbers section features four bar counters on an image background â€” the number counters load as the page loads.

DiviCity What to Do Section

This section features a heading and some body text. There are two sub-sections below this, each with an image, a heading, and body text. This section is a very versatile layout that can be used to demonstrate features, services, or other aspects of your business.

DiviCity Where to Do It Section

This section is also versatile and features a heading, body text, and three blurbs with an image, some text, some short description text, and a border that appears on hover. The image zooms in on hover as well. You could use these blurbs to link to another page or section on your website, or to simply display some features or information.

DiviCity Visit Us Section

Next, the Visit Us section features six blurb modules, each with an icon, heading text, and body text. You can customize this section to highlight more features or aspects of your services or to break up dense text with separate headings and icons. The blurb modules all feature a zoom-in animation.

DiviCity Contact Section

Finally, the contact section begins with an orange strip that has three social media icons. Below is the contact form section with large heading text on the left and the form on the right. The contact section has a large image background with a dark overlay. This section also features a flip-loading animation effect, and the social media icons fade in.

DiviCity Mobile Layout

DiviCity is completely tablet and mobile-responsive. Letâ€™s take a look at the mobile version of a few sections.

First is the header section, with a large image background, heading text, and button. The first text box overlays the header and the rest of the header section contents follow below.

This is part of the mobile about section with images separated by some sections with text.

This is the mobile version of the â€œWhere to Do Itâ€ section. It has a large image at the top, heading text, body text, then three images with a label on each.

And finally, this is the mobile footer. Like the desktop version, it features an orange bar with social media icons, followed by the footer section with an image background, text, and the contact form.

Purchase DiviCity

DiviCity 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

DiviCity is a simple and great-looking website layout that is incredibly versatile. Because itâ€™s built with Divi, the layout is easy and intuitive to customize for your own use. The loading animations and hover effects throughout the layout look nice and cohesive and arenâ€™t too distracting from the page content or usability. I also like the use of large images across the design as well as the typography used in the layout. If you are looking for a simple one-page website layout for your next Divi project, this might be the right product for you.

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

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

07.05.2023
Divi Product Highlight: Divi Timeline Layouts Pack

Divi Timeline Layouts Pack is a collection of 100 premade timeline layouts that work with the Divi Builder. Timeline layouts can be used in a wide variety of ways. You can use a timeline to share a sequence of events, such as the history of how a company or organization started, display different steps of a process, easily organize information, and so much more. The layouts that come with the Divi Timeline Layouts Pack can be easily customized and can help visually convey just about any information you would like.

In this product highlight, weâ€™ll take a look at some of the layouts you get with the Divi Timeline Layouts Pack and help you decide if itâ€™s the right product for you.

Letâ€™s get started!

Installing Divi Timeline Layouts Pack

The Divi Timeline Layouts Pack comes as a ZIP file containing Divi Library .json files. To install the timeline layouts, start by unzipping the file. Then, open your WordPress dashboard and navigate to the Divi Library page.

Click Import & Export at the top, then select the import tab. Choose an individual layout file or select the All_DCT_Timeline_Layout_Template file which contains all 100 layouts, then select Import Divi Builder Layouts.

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.

Locate your layout, then click the Use This Section button to load the layout.

Divi Timeline Layouts Pack

Divi Timeline Layouts Pack comes with 100 different timeline layouts, each with different styles, layouts, and designs. With so many layouts to choose from, you are sure to find a great option for your next web design project. Because the layouts are built with Divi, itâ€™s easy to customize the colors, fonts, icons, and other design elements right within the visual builder. Without further ado, letâ€™s take a look at some of the layouts you can get with the Divi Timeline Layouts Pack.

Layout 1

Timeline layout 1 features an orange and black signage-style design. Each timeline blurb also has an icon that you can change to represent your information best. On hover, the icon background turns orange, and a thick black border appears around the timeline blurb.

Layout 3

Layout 3 has a blue color scheme and features logos down the middle line and timeline blurbs on each side of the line. On hover, a shadow appears around the blurb and the icon.

Layout 6

Layout 6 features a unique curved middle line with icons. The timeline blurbs are connected with a line. This layout does not feature any hover effects.

Layout 8

Timeline layout 8 has a black and orange color scheme. On hover, an orange shadow appears around the timeline blurb. The icon background turns orange, and the lines above and below the icon turn vertical.

Layout 10

Layout 10 has a middle line with circles for each blurb. The blurbs have a rounded design with a large icon toward the middle. This layout does not have any hover effects.

Layout 14

This layout has a unique cylindrical middle line. The title for each blurb is placed on an orange line that points toward the middle line. This layout does not have a hover effect.

Layout 18

Layout 18 has a middle line with arrows coming out of it that point toward each timeline blurb. Each blurb has a banner-style design, and the icons have a fade-in animation.

Layout 20

Following this is layout 20, which has a green and black middle line design with icons in the middle. The icons have a fade-in animation.

Layout 22

Layout 22 has a dotted middle line with blue dots for each blurb. The timeline blurbs feature a rounded design with a unique shape with a blue background for the icons.

Layout 29

Layout 29 has a dotted center line with star icons that mark each timeline blurb. The timeline blurbs come to a point towards the middle and feature an icon at the top.

Layout 33

This layout has a yellow curved border around each timeline blurb. The icon sits within the blurb on a yellow rounded background shape.

Layout 37

Layout 37 has a center line with icons marking each blurb. The blurbs have a banner-style background and a dotted line connecting each icon to the respective blurb.

Layout 40

This is layout 40. It features grey timeline blurbs with an angled green section that highlights the icons.

Layout 48

This layout has icons with a two-tone blue design. The icon connects to the main timeline blurb, which has a grey background.

Layout 53

The timeline blurbs for layout 53 are shaped like arrows that point toward the center. The background is a subtle blue gradient, and the icon is contained within a circle at the tip of the arrow.

Layout 59

Layout 59 is a colorful layout with images instead of icons. The images are in the center with a two-tone colored border. The header for each blurb is placed on a gradient background, and the text is contained within a rounded blurb section.

Layout 62

This is layout 62. It features seven different blurbs, unlike many of the other timeline layouts, which feature four blurbs. The timeline is also horizontal instead of vertical. Icons are contained within diamond-shaped borders and are connected to the blurbs with a dotted line.

Layout 66

This layout features four blurbs with an orange banner that overlays the blurb containing the icon.

Layout 68

Next, layout 68 features blurb content contained within two border lines that have a gradient effect. The icons are aligned to the center.

Layout 72

This is layout 72, a unique layout that features an image with rounded corners and a section with an orange background where you can list a year or another short heading.

Layout 76

Layout 76 is another colorful layout. It features diamond-shaped icon backgrounds with a slight gradient. The timeline blurbs are also surrounded by a colored border.

Layout 79

Layout 79 has a dark background with a dotted center line on a colorful background. The blurb headings are also colorful, and the icons are placed at the outside edge of each blurb.

Layout 81

Layout 81 is a visually simplistic layout with icons in the center on an angled red background with a slight shadow. The heading text is red as well.

Layout 85

Layout 85 features a green color scheme with icons in the center surrounded by two green rounded border lines. There are also green border lines on the outside edge of each blurb.

Layout 88

Similarly, layout 88 also has a green color scheme. It has a gradient border that surrounds the timeline blurb and fades into the background. The icon and title are centered in the blurb.

Layout 90

Next, layout 90 places the blurbs on an angled green background with a grey background behind it.

Layout 94

This layout features blurbs with a red gradient background that fades to white. The icons are on a white background within the blurb.

Layout 96

Layout 96 has icons centered on a red background with an inward shadow. The blurb title also has a rounded red background.

Layout 98

This is layout 98. It has icons centered on the page on a teal background. The icons are turned to the side, and the background extends into an arrow shape, pointing to the next blurb.

Layout 100

Finally, layout 100 features an angled block design on the inside edge. The icons are placed in an orange circle, and the blurb has a shadow effect on the bottom and inside corners.

Purchase Divi Timeline Layouts Pack

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

Final Thoughts

As you can see, the Divi Timeline Layouts Pack comes with a wide variety of layouts that fit many different use cases and styles. The layout pack is simple to install and use, and you can very easily customize the layout with your own content. If you are looking for a great way to organize information on your page or want to create a timeline, this layout pack has a lot to offer and would be a great choice.

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

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

30.04.2023
Divi Plugin Highlight: Divi Contact Form Helper

Divi Contact Form Helper is a plugin that works with Divi to expand the functionality of the built-in contact form system. It adds settings to the contact form module, an interface to the WordPress dashboard where you can manage your form entries, and additional settings to the Divi theme options. The plugin adds new design and customization options as well as new functionality such as a date picker, a file upload field, the ability to save submissions to a database, and more.

In this plugin highlight, we’ll take a look at the features and settings for Divi Contact Form Helper and help you determine if it’s the right product for you.

Let’s get started!

Installing Divi Contact Form Helper

You can install Divi Contact Form Helper just like any other WordPress plugin. Open the plugins page in the WordPress dashboard and click Add New. Click Upload Plugin at the top, then select the .zip plugin file from your computer.

Once the plugin is installed, activate the plugin.

Divi Contact Form Helper

Divi Contact Form Helper is an extension to Divi’s existing contact form module. It adds functionality such as file uploads, field text options, the ability to save submissions to a database, a date/time picker, additional design settings, and more. The plugin settings are spread across the contact form module, a new WordPress dashboard page, and additional Divi Theme Options settings. We’ll take a look at all of these settings to give you an idea of what can be accomplished with this plugin.

Contact Form Module

As we go through this plugin highlight, we note that the changes made using the Divi Builder Contact Form Helper settings will not display automatically in the Visual Builder. To view the changes made, you will need to open the page in a new tab and refresh to get the updated design.

To access the new contact form module settings, add a new contact form to your page in the Divi Builder.

Field Content Settings

The following settings are located within the content tab of the individual field setting of the contact form module.

Text Settings

Under the Text settings tab, you can show or hide the field label, show or hide the placeholder, enter custom placeholder text, enter custom description text, and choose the description location.

Here is the result on the front end. In this example, I added a label, a placeholder, and a description to the Name field.

Field Options Settings

Next, you can find the Field Options settings. The settings change depending on what type of field is selected.

If the textarea type is selected, there will be an option to set a minimum and maximum length for the message, select allowed symbols, and change the text area minimum height.

Each field type also has the option to add an icon and change its color.

Here is the icon on the front end, within the Message field.

If the Select Dropdown field type is selected, there will be an option to use dropdown search.

Here is the dropdown search on the front end. Dropdown results are filtered as you type in the search bar above.

If the Checkbox field option is selected, you will see two layout options: Columns or Inline. If columns is selected, you can set the number of columns (up to 4 columns).

Here is the columns layout with 3 columns and an icon.

And here is the alternative inline layout.

The radio button field layout also has an option for a column or inline layout, with an option for up to 4 different columns.

Here is the column layout with 2 columns.

And here is the inline layout.

File Upload Settings

To access the file upload settings, you must first set the Field Type to Input Field within the Field Options settings. Then the file upload settings will appear.

Under the File Upload Settings tab, select the button to enable the field to be used as a file upload field.

Once enabled, you can set the maximum upload file size, maximum number of files, and allowed file types.

Date Time Settings

The date/time settings only appear when the field type is set to input field. Toggle the button to use the input field as a date/time picker.

When the option is enabled, three settings tabs appear. Under the General tab, you can set the type (date and time picker, date picker, or time picker), the date/time format, choose to show the picker inline, set the input with the current date/time, change the language, or change the locale direction to RTL.

Under the date settings tab, you can set a custom date format, set the week start day, select days of the week to disable, and disable weeks.

You can also disable past dates, disable the current date, set a fixed or relative minimum date, set a fixed or relative maximum date type, and set available and unavailable dates.

Under the time tab, you can set a custom time format, minimum and maximum time, available and unavailable times, and time steps interval.

Here is the date/time picker on the front end.

Form Content Settings

The following settings are located within the content tab of the contact form settings.

Admin Email Settings

Under the admin email settings, you can enter a custom message for the admin and use rich text to format the admin message. You can add an admin email or enable conditional email address routing with custom logic using these settings (don’t worry, the plugin author has documentation to help you set this up!).

Additionally, you can set the admin email subject, email address CC, and email address BCC.

Confirmation Email Settings

The confirmation email settings can also be customized. You can enable the confirmation email to be sent, enter a custom subject line, and enter a custom message. You can enable rich text formatting to use for the message as well.

Submission Entries

Under the submission entries settings, you can save entries to a database, save file uploads to a database, send file uploads as attachments with emails, collect user agent details, use cookies for tracking unique form views, and change the custom message that is added to emails with files.

Submit Button

Under the submit button settings, you can change the submit button text and the wait text.

Integrations

There are two integration options, Zapier and Pabbly. You can enable either option and add the mailbox address to send emails to.

After Submission Behavior

The after submission behavior includes a space to add a custom success message as well as an option to hide the form title, display a success button with custom text and a link, or enable a redirect URL.

Here is the after submission behavior in action, showing the success message, hiding the form title, and displaying the success button.

Admin Label

Here you can add your own admin label (form ID) that will be shown in the database. You can also add a unique identification number that will appear in the database and other admin areas.

Design Settings

Let’s move over to the design tab of the contact form settings. You’ll notice some new settings here as well.

Field Label, Field Description, Success Message Text Settings

The field label text settings, the field description text settings, and the success message text settings sections feature all of the default font and text design settings, such as font, text color, size, spacing, alignment, etc.

Here you can see the labels for the name and email fields have been displayed, and the field label text design was customized to be displayed on the front end.

Success Button Settings

The success button settings allow you to customize the design of the success button using the default button design settings, such as font, text size, button spacing, button colors, etc.

Here is the customized success button on the front end.

Date/Time Picker Settings

Within the general tab of the date/time picker design settings, you can customize the background color, margin, padding, border, and shadow settings.

Moving over to the date tab, you can change the date picker width and height, customize the month/year text settings, the days of the week text settings, the calendar dates text settings, the current date background and text color, the selected date background and text color, the available dates background and text color, and the unavailable dates background and text color.

Under the time tab, you can customize the time picker width and height, the time text settings, the current time background and text color, the selected date background and text color, the available time’s background and text color, and the unavailable time’s background and text color.

With all of these customization options, you can completely customize the look of your date/time picker. Here is the date/time picker on the front end with some customized design settings.

Submit Button

Two new settings have appeared under the submit button section. You can change the button alignment and make the button full-width.

Here is the full-width button on the front end.

Border

Here you can style the focus input border with color, style, radius, width, and style settings. This border will appear around the individual field when selected.

Here is the focus input border highlighting the name field.

Dashboard

Now that we’ve explored the new Contact Form module settings, let’s take a look at the Contact Form page in the WordPress dashboard.

Entries

You can see all the form submissions you have received on the Entries page. For each entry, you will see the entry number, the email address, its read status (including the user who read the entry and the exact time and date it was read), the form ID, the date, and the IP. The entries page can be sorted by unread and read at the very top. You can also use bulk actions on entries and filter the table by month or by a specific form. Finally, you can export a CSV of your entries with the button at the top and search your entries with the search bar.

When you click to view an individual entry, you will see the field content in the entry details section. Below this are other entries by the same user, which is a very helpful feature. On the right, you have a trash and delete button, a reply/send email button, a create email template button, and a create post button. Below are meta details such as the submitter ID, submitter, contact form ID, page, referrer URL, and date, followed by user-agent details.

Send Email

When you select the send email button, you will see this interface. You can add the email from address, the email subject, the reply to email address, and the message. You can use the email data tags listed in your message as well.

Create Template

You can also create email templates to quickly respond to entries. You can set the template type, template name, select a contact form, set an email from address, the email subject, and the email message.

Create Post

With the create post option, you can create a new blog post or page by mapping fields in the contact form.

Export CSV

On the export CSV page, you can change the CSV file name, select the contact form, and select what type of entries to include in the export.

Forms

From the forms page, you can see a list of all of the forms on your site with information such as entries, views, unique views, conversion rate, unique conversion rate, last entry, and links to view entries, export CSV, and view the form.

Theme Options

Now let’s navigate to the Divi Theme Options within the WordPress dashboard. You’ll see a new tab titled Divi Contact Form Helper here.

General Settings

Under the general settings, you can enable contact form stats, enable sent email logs, enable clone logs, choose to remove plugin data when uninstalled, and edit the allowed MIME types.

SMTP Settings

The SMTP settings tab has a button to enable SMTP settings. Once enabled, you will see settings for the SMTP host, SMTP from email, SMTP from name, Encryption, SMTP port, Auto TLS, and Authentication. There is a button to check if the SMTP integration is also working.

Auto Backup Settings

Divi Contact Form Helper comes with an auto backup setting you can enable. You can enable this feature, add a backup email address, and set the backup schedule.

Custom Label Text

Finally, here you can customize the contact form label text.

Divi Contact Form Helper Examples

Example 1

The first example features a name field, an email address field, a date picker, and a message field. It features a blue color scheme with a full-width button.

Example 2

The second example has a green color scheme and features the same name, email address, date picker, and message fields, along with a radio select field and a file upload field.

Purchase Divi Contact Form Helper

Divi Contact Form Helper is available in the Divi Marketplace. It costs $25 for unlimited website usage and one year of support and updates. The price also includes a 30-day money-back guarantee.

Final Thoughts

Divi Contact Form Helper adds some major functionality to the Divi Contact Form module. You can completely customize every aspect of the contact form and create a unique design because of this plugin’s additional design options. And thanks to the functionality Divi Contact Form Helper adds, you can even accept files, schedule events, and so much more. The entries interface is convenient to have, allowing you to easily respond to messages and keep track of entries from the WordPress dashboard. If you’re looking to take your contact form to the next level or need functionality beyond what the default contact form can offer, this might be a great product for you.

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

The post Divi Plugin Highlight: Divi Contact Form Helper appeared first on Elegant Themes Blog.

16.04.2023
Divi Plugin Highlight: DiviFlash

DiviFlash is a third-party plugin for Divi that adds 40+ new modules to the Divi Builder. It also adds several extensions and includes WooCommerce and Advanced Custom Fields integration, as well as several other features. In this post, we’ll look at DiviFlash and see its features to help you decide if it’s the right product for your needs.

DiviFlash Modules

DiviFlash adds 40+ new modules to the Divi Builder. Some of those modules are disabled by default. You can enable and disable the modules in the DiviFlash Modules menu in the WordPress dashboard.

The modules are mixed within the regular Divi Modules in alphabetical order. They include a graphic in the module’s background, and their icons and text are purple, making them easier to find.

We’ll look at a few of the modules to see what they can do.

Advanced Blurb

The DiviFlash Advanced Blurb lets you display an icon or image, title, subtitle, content, button, a badge with two lines, and an item order option. Each element has independent Z-Index options for placements, styles, borders, box shadow, spacing, etc.

Advanced Carousel

The DiviFlash Advanced Carousel creates a carousel that works much like the Advanced Blurb. Add blurbs as cards and include an image or icon, title, subtitle, body content, a button, and item order. Style each element independently and change their order with sliders. Slider animation options control how the carousel works.

Advanced Divider

The Advanced Divider Module includes 10 divider types to choose from. One of the divider types is a custom divider. Display multiple lines and specify the number of lines and the line gap. The separator settings let you display an icon, text, Lottie, or no separator. The design settings include all the adjustments for the divider.

Advanced Heading

The DiviFlash Advanced Heading gives you three heading elements, a divider with an optional icon, a divider line background, an infix background, and a suffix background. You can adjust the size of the divider and give it a rounded border. Choose the icon and its position. Style each element independently.

Advanced List

The Advanced List Module lets you add list items as submodules. Add a title, description, and icon to each list item. Display them as a list or in a grid. For the icon type, choose between icons, images, text, Lottie’s, or none. You can always show the icons or have them show on hover. You can add an icon for the title.

Advanced Person

The DiviFlash Advanced Person Module includes an image, name, title, description, and social icons. Adjust each element for color, spacing, border, fonts, etc. You can also adjust the social media buttons’ background color and icon color individually. This module includes 3 layout styles and adjustment options for all of the module’s elements.

Advanced Tabs

The DiviFlash Advanced Tabs Module lets you create unique tabs and style them. You can add as many tabs as you want and style each element of every tab or use a standard styling for all the tabs. You can also style the active tab separately. Add images or icons and add a button. The tab settings include an animation for how the tabs are revealed.

Before and After Slider

The DiviFlash Before and After Slider lets you show two images in the same location and slide between them. Set the slide to horizontal or vertical and have the slider move on click or hover. You can also style the slider, change the icon and color, and add a blur to the icon where the two images meet. The images include individual filter adjustments.

Breadcrumbs

The Breadcrumbs Module adds breadcrumb navigation to your page. Specify the home page text, add an icon, choose a separator, and style the text with the design settings. Place the home icon on the right or left of the text. Choose between text or an icon for the separator. You can also include a custom page link, a search title, a 404 title, enable schema, and more.

Business Hours

The Business Hours Module gives you many ways to set up and style business hours. Each day is a separate submodule. Style them together or independently. Set the hours as a single time, or use the individual open, close, and divider options.

Data Table

The DiviFlash Data Table lets you upload a file to create a searchable table. You can then style it like any other DiviFlash module. Upload a CSV, import a table, Google Sheet, Database Table, or import from Table Press. Show or disable pagination, search, information, order, allow multiple languages, etc.

Image Accordion

The DiviFlash Image Accordion displays images in an accordion container and reveals the image in full when the user clicks or hovers. The first image takes the most space in the container, and all the others are shown as a slice of the image. Choose between a horizontal or vertical accordion, choose how it responds, animate the text, and more.

Image Carousel

The DiviFlash Image Carousel gives you lots of image options. Display images as a slide, cube, Coverflow, or flip. Add dot navigation, arrow navigation, image captions, image buttons, and choose hover effects. Like the other modules, every element can be styled individually.

Image Mask

DiviFlash Image Mask places a shaped mask over the image. It has 30 masks to choose from, and you can adjust the image position, mask size, and rotate every mask to create a unique design.

Packery Gallery

The DiviFlash Packery Gallery displays your gallery in one of 10 different layouts. It resizes and rearranges the images for each layout to create different sizes and styles for the gallery. Some are uniform, while others are not. This creates lots of interesting galleries. Create a different gallery for desktops, tablets, and phones. Change the space between the images, add a load more button, choose hover effects, use a lightbox, and more.

Post Carousel

The DiviFlash Post Element Module is a blog post card builder that displays posts in a grid. It includes 11 elements from the blog posts you can choose to display. You can add the elements you want to display in any order you want to display them. Display for the posts include the image, title, excerpt, author’s name, date, read more button, comments, a divider, and more. It also has overflow options and works like a regular carousel with slider options.

Post Grid

The DiviFlash Post Grid Module works similarly to the Post Carousel in that it’s a blog card builder. It uses the same elements but displays the card in a grid or a masonry layout rather than a slider.

Scroll Image

The Scroll Image Module adds a scrolling effect to any image when the visitor hovers over the image. You have control over the scroll direction, alignment, size, speed, etc. Add a frame, an overlay, a badge, and a caption, and enable a lightbox. You have control over the badge, including the text, icon, position, and hover options.

Star Rating

The Star Rating Module lets you place star ratings anywhere on your page. Choose between 5-star and 10-star ratings and set the rating value with a slider. Add a custom icon, show the rating number, enable a single rating, enable the title, add content, and enable schema. If you enable the rating number, you can show the number with or without a bracket, or show the number with or without the upper possible score. You can also choose the placement on the right or left of the icons. If you choose a single rating, it will display only one icon along with your number options.

Table

DiviFlash’s Table Module lets you create tables by hand. Add multiple rows and then add your content to the row in an HTML editor. It even takes HTML as input so that you can add icons and other types of content. Style the odd and even backgrounds independently, and choose the type for the rows to make a row the header, footer, body, etc. It also includes row merge and column merge options.

Testimonial Carousel

DiviFlash’s Testimonial Carousel Module creates testimonials as cards and displays them in a slider. Add as many as you want and choose between slides and Coverflow for the carousel type. You can add star ratings, a company logo, and a quote icon.

DiviFlash Plugin Settings

The extensions are enabled or disabled in the DiviFlash Dashboard menu found in the WordPress Dashboard.

DiviFlash Extensions

DiviFlash has four extensions. They include SVG and JSON file uploads, a Divi Library shortcode, and ACF support. All these are excellent extensions. The Divi Library shortcode lets you place a complete Divi layout anywhere you can place a shortcode. This opens a lot of design possibilities. ACF support integrates Advanced Custom Fields.

Menu Extension Settings

DiviFlash also includes Menu Extension settings. These enable a bottom-line effect, hide the bottom border, and add space between the menu items.

Import/Export Settings

DiviFlash has an Import/Export feature, so you can easily reuse your designs and settings.

DiviFlash Layout Packs

The publisher has created 12 free layout packs that include the DiviFlash modules. They include multiple pages to help you get started on your website design. They are free to download.

Where to Purchase DiviFlash

DiviFlash is available in the Divi Marketplace for $89. It includes unlimited website usage, a 30-day money-back guarantee, and one year of support and updates.

Ending Thoughts

That’s our look at DiviFlash. There are a lot of well-designed modules in this plugin. All are useful, and they’re fully customizable. I especially liked the blog and product card builders. It’s compatible with WooCommerce and Advanced Custom Fields and includes several extensions that add even more functionality to Divi. If you’re interested in expanding your Divi toolbox and adding more features to your Divi website, DiviFlash is an excellent choice.

We want to hear from you. Have you tried DiviFlash? Let us know what you think about it in the comments.

The post Divi Plugin Highlight: DiviFlash appeared first on Elegant Themes Blog.

09.04.2023
Divi Product Highlight: Divi Headers Pack

Are you running out of creative ideas for your website headers? Or are you looking for a pack of header layouts to save you time and effort for your next design project? Divi Headers Pack is a Divi Marketplace product with 960+ header layouts for the Divi Builder. Each header design is mobile-friendly and comes with many varieties for you to choose from. And because itâ€™s built with Divi, itâ€™s all completely customizable within the Divi Builder. In this product highlight, weâ€™ll look at some of the layouts you get with the Divi Headers Pack to help you decide if itâ€™s the right product for you.

Letâ€™s get started!

Installing Divi Headers Pack

Divi Headers Pack comes as a ZIP file containing Divi Library .json files. To install the header layouts, start by unzipping the file. Then, open your WordPress dashboard and navigate to the Divi Library page.

Click Import & Export at the top, then select the import tab. Choose the layout file, then select Import Divi Builder Layouts.

Once the layout has been imported, open the Divi Theme Builder. Click Add Custom Header, then select the uploaded layout from your Divi Library.

Click Save Changes once youâ€™re done, and your header should appear on your website.

Divi Headers Pack

Many of the header layouts have multiple variations with different effects, functionality, and styling. Additionally, many of the header layouts come with three versions â€“ one with a mobile menu that slides in from the left, one that slides in from the right, and one with a full-screen mobile menu. With all of the variations, there are a total of 980+ header layouts that come with the Divi Headers Pack.

Easy Headers

There are 50 easy headers included in the header pack. These are headers built with Diviâ€™s default options and are simple and ready to use. These layouts do not have separate variations either.

Easy header 8 features a green secondary menu bar with office hours and a CTA button. The primary menu bar has a logo, menu items, and a phone number. The primary menu bar is sticky.

Easy header 20 has the logo, contact information, and social media icons at the top. There is a divider bar in the middle, and below are the menu items and a CTA button.

This is easy header layout 25. The phone number and email address are listed at the top, along with social media icons. The menu is below, with an inline logo. The primary menu bar is sticky.

Easy header 32 features a header bar with social media icons on the left, the logo in the middle, and a CTA button on the right. The menu bar is below, with an orange background.

RTL Headers

The RTL headers are designed for RTL languages. There are 5 basic designs and several variations of each, with a total of 42 RTL header layouts.

RTL header 3 is a transparent layout. It has the logo on the left, menu items in the center, and a button on the right. When you scroll up, a white background appears behind the menu.

RTL header layout 12 also has a transparent layout and a white background that appears when scrolling down the page. It features a logo, menu items in the center, and a phone number blurb with an icon on the right.

RTL header 36 overlays the content on the page and does not span the full width. It lists the address, phone number, and social media icons at the very top. Separated by a divider, the logo, menu, and CTA button are below.

Finally, RTL layout 39 has a brown secondary menu bar with some text and social media icons. The primary menu bar features a logo, address information, office hours, menu items, and a CTA button.

Standard Headers

Most of the standard headers have several variations. These variations include layouts with transparent backgrounds, different shadow styling, sticky settings, scroll-up settings, and more. These slight variations are great to have and make it easy to find the perfect header for your site. With 249 standard header layouts to choose from, you wonâ€™t run out of options! Letâ€™s take a look at a few of the standard headers.

Standard header 27 is a transparent variation. It has a logo on the left and a right-aligned menu bar as well as some social media icons. The menu background turns white on scroll.

Standard header layout 60 floats above your page content. It features a top bar with the address, office hours, and phone number. The primary menu bar has a logo on the left, menu items centered, and a CTA button on the right.

Standard layout 101 has a secondary menu bar at the top with office hours, an email address, a CTA button, and social media icons. The primary menu bar has a logo and right-aligned menu items.

Standard header layout 176 is a transparent variation and has a logo, menu items, and a phone number blurb. There is a white background that appears on scroll.

Vertical Logo Headers

The vertical logo headers are specifically designed for taller, vertical logos. There are 19 layouts in total.

Vertical header layout 5 is transparent until you scroll, then a white background appears. It features a call icon on the left, a menu in the middle with the logo inline, and a search icon on the right.

Vertical logo header 11 features a large top menu bar with a phone number, the logo in the center, and the hours on the right. The menu bar is below, and it stays sticky at the top of the page as you scroll.

Vertical logo header 14 is a large header layout with a secondary menu bar at the top with three links and social media icons. Below this are a phone number, the logo in the center, and the hours. There is a divider after this, and then the menu bar on the left and a CTA button on the right.

Finally, this is vertical logo header layout 16. The logo is on the very left and spans the full height of the header. There is a blue secondary menu bar with some text and a CTA link. Below this is the primary menu bar, with the menu items and a phone number on the right.

WOO Headers

Woo Headers are integrated with WooCommerce to feature cart and shop information in the header. There are 29 total Woo headers.

There is a plugin you need to install in order to display the cart count with the bag icon, and you need to create a menu and update a setting in one of the header modules for the icon to appear, but the documentation that comes with the product is clear and easy to follow and was no problem to set up.

Woo header 5 is transparent until scroll and has a logo on the left, menu items on the right, and cart, shop, and login icons on the right.

Woo header layout 20 has a white background and a secondary menu bar with some text and a phone number. The primary menu bar has a logo, menu items in the center, and search, cart, and login icons to the right. The primary menu bar is sticky as you scroll.

Woo header layout 24 floats above the page content. There are two transparent modules at the top with some text and a phone number. The primary menu bar floats at the top of the page and has a logo, centered menu items, and search, cart, and login icons on the right.

Finally, Woo header layout 28 features a blue secondary menu bar with some text and a phone number. Below this is a logo, and then the menu to the left and the search, cart, and login icons to the right. The primary menu bar sticks to the top of the page as you scroll.

Creative Headers

The last category in the Headers Pack includes 10 creative headers. These layouts are for people who are very familiar with Divi, and who have basic CSS knowledge.

The first header layout in this list has a logo on the left, and a hamburger icon on the right.

Once you click the hamburger icon, your menu with all its menu items will appear.

Header 7 in the creative headers category has a hamburger icon on the right.

Once you click the hamburger icon, a set of icons will slide down. You can link these icons to the relevant pages.

And our last example from this category, header 9, has an advanced design with multiple elements that are well-balanced. One of those elements is a search bar that goes above the menu items.

Purchase Divi Headers Pack

Divi Headers 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

Divi Headers Pack is jam-packed with lots of different headers and many variations of each design, making it easy to find a layout that works perfectly for your design. Because there are so many layouts to choose from, it might be overwhelming to know where to start, but the documentation for the product is great and you can download a preview folder that contains a helpful index of all of the different layouts you can use. You can also take a look at the demo site here and view some of the header designs. Overall, the product is easy to use and install, looks great, has great variety, and is easy to customize with your own content. If youâ€™re looking for some premade header layouts for your next design project, this product could be great for you.

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

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

02.04.2023