EDITS.WS

Tag: Divi Resources

  • 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

    Installing Divi Den Pro – Layout Library

    Next, once the plugin is installed, activate it as usual, and you’ll see a new menu added to your dashboard.

    1. Activate Plugin

    Installing Divi Den Pro – Layout Library

    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.

    Divi Den Pro DM Menu

    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.

    Divi Den Pro DM Menu

    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.

    Divi Den Pro DM Menu

    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.

    Divi Den Pro DM Menu

    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.

    Divi Den Pro DM Menu

    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.

    Divi Den Pro DM Menu

    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.

    Divi Den Pro DM Menu

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

    Divi Den Pro DM Menu

    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.

    Divi Den Pro DM Menu

    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.

    Divi Den Pro DM Menu

    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.

    Divi Den Pro DM Menu

    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 DM Menu

    Divi Den Pro Layout Library in the Divi Builder

    A tab for the Divi Den Pro – Layout Library is added to the Modules modal.

    Divi Den Pro Layout Library in the Divi Builder

    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 Builder

    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.

    Divi Den Pro Layout Library in the Divi Theme Builder

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

    Divi Den Pro Layout Library in the Divi Theme Builder

    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.

    Divi Den Pro Layout Library in the Divi Theme Builder

    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.

    Divi Den Pro Layout Library in the Divi Theme Builder

    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.

    Divi Den Pro Layout Library in the Divi Theme Builder

    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.

    Divi Den Pro Layout Library in the Divi Theme Builder

    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.

    Divi Den Pro Layout Library in the Divi Theme Builder

    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.

    Divi Den Pro Layout Library in the Divi Theme Builder

    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.

    Divi Den Pro Layout Library in the Divi Theme Builder

    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.

    Divi Den Pro Layout Library in the Divi Theme Builder

    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.

    Divi Den Pro Layout Library in the Divi Theme Builder

    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.

    Divi Den Pro Layout Library in the Divi Theme Builder

    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.

    Divi Den Pro Layout Library in the Divi Theme Builder

    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.

    Divi Den Pro Layout Library in the Divi Theme Builder

    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.

    Divi Den Pro Layout Library in the Divi Theme Builder

    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.

    Divi Den Pro Layout Library in the Divi Theme Builder

    Greatest Hits Music Module Freddie

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

    Divi Den Pro Layout Library in the Divi Theme Builder

    Styling Gallery Demo

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

    Divi Den Pro Layout Library in the Divi Theme Builder

    Lintang Process Grace

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

    Divi Den Pro Layout Library in the Divi Theme Builder

    Thunderbolt Product Freddie

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

    Divi Den Pro Layout Library in the Divi Theme Builder

    Alula Timeline Grace

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

    Divi Den Pro Layout Library in the Divi Theme Builder

    Modules

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

    Divi Den Pro Layout Library in the Divi Theme Builder

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

    Divi Den Pro Layout Library in the Divi Theme Builder

    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.

    Where to Purchase Divi Den Pro Layout Library

    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.

  • How to Expand Your Map Module on Scroll with Divi’s Scroll Effects

    Adding a map to your website is a great way to show your visitors where you or your business is located. With Divi‘s built-in settings, you have full creative control over the design of your map module and any surrounding design elements. Take your designs to another level by applying scroll effects to your module. With several different types of effects to choose from and settings to fine-tune the effect until you achieve exactly what you want, using scroll effects can help you add eye-catching movement to your website modules. In this post, we will show you how to enlarge your map module on scroll with Divi’s scroll effects.

    Let’s get started!

    Sneak Peek

    Here is a preview of what we will design.

    Layout 1

    Divi Enlarge Map On Scroll With Scroll Effects Layout 1 Final Design Mobile

    Layout 2

    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Final Design Mobile

    What You Need to Get Started

    Before we begin, install and activate the Divi Theme and make sure you have the latest version of Divi on your website.

    Now, you are ready to start!

    How to Enlarge Your Map Module on Scroll with Divi’s Scroll Effects

    Layout 1

    Create a New Page with a Premade Layout

    Let’s start by using a premade layout from the Divi library. For this design, we will use the Acai Bowl Landing Page from the Acai Bowl Layout Pack.

    Add a new page to your website and give it a title, then select the option to Use Divi Builder.

    Divi Enlarge Map On Scroll With Scroll Effects Use Builder

    We will use a premade layout from the Divi library for this example, so select Browse Layouts.

    Divi Enlarge Map On Scroll With Scroll Effects Find Layout

    Search for and select the Acai Bowl Landing Page.

    Divi Enlarge Map On Scroll With Scroll Effects Select Layout

    Select Use This Layout to add the layout to your page.

    Divi Enlarge Map On Scroll With Scroll Effects Use Layout

    Now we are ready to build our design.

    Add the Map Module

    We are going to add the map module to the “Come Visit Us” section on the landing page. Start by adding a new row with a single column.

    Divi Enlarge Map On Scroll With Scroll Effects Row

    Add the map module to the new row.

    Divi Enlarge Map On Scroll With Scroll Effects Add Map

    Add your Google API Key to enable the map if you haven’t already. Then, add a center address to the map. For this tutorial, the address will be San Fransisco, California.

    Divi Enlarge Map On Scroll With Scroll Effects Map API Address

    Next, add a new pin.

    Divi Enlarge Map On Scroll With Scroll Effects Add Pin

    Set the map pin address. Once again, we will set this to San Fransisco, California for this tutorial.

    Divi Enlarge Map On Scroll With Scroll Effects Address

    Design Settings

    Move to the Design tab and open the sizing settings. Set the Height.

    • Height: 300px

    Divi Enlarge Map On Scroll With Scroll Effects Height

    Next, open the border settings and add rounded corners to the map.

    • Rounded Corners: 22px

    Divi Enlarge Map On Scroll With Scroll Effects Rounded Corners

    Add the Scroll Effects

    Now the design of our map module is complete so that we can add the scroll effects. Move to the Advanced tab, then navigate to the Scroll Effects. Under Scroll Transform Effects, select the scaling up and down tab.

    Divi Enlarge Map On Scroll With Scroll Effects Scroll Effects

    Enable Scaling Up and Down. This will allow our map module to increase in size as you scroll down the page.

    Divi Enlarge Map On Scroll With Scroll Effects Enable Scaling

    Let’s fine-tune the scaling settings. Adjust the starting, mid, and ending scale. You can achieve a more subtle scale effect by keeping the numbers relatively close together. If there is a big difference between the numbers, you will achieve a more drastic scale effect.

    • Starting Scale: 80%
    • Mid Scale: 90%
    • Ending Scale: 100%

    Divi Enlarge Map On Scroll With Scroll Effects Scaling

    Finally, set the motion effect to trigger in the middle of the element.

    • Motion Effect Trigger: Middle of Element

    Divi Enlarge Map On Scroll With Scroll Effects Effect Trigger

    Final Design

    Here is the final design for our first layout.

    Divi Enlarge Map On Scroll With Scroll Effects Layout 1 Final Design Mobile

    Layout 2

    Create a New Page with a Premade Layout

    For the second layout, we will use the contact page layout from the same Acai Bowl Layout Pack. Let’s get started.

    Add a new page to your website and give it a title, then select the option to Use Divi Builder.

    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Use Builder

    We will use a premade layout from the Divi library for this example, so select Browse Layouts.

    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Use Builder

    Search for and select the Acai Bowl Contact Page.

    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Find Layout

    Select Use This Layout to add the layout to your page.

    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Use Layout

    Now we are ready to build our design.

    Modify Row Settings

    First, move the row containing the map module to the section above, below the addresses.

    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Move Map

    Then, modify the row layout to two columns.

    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Row

    Open the row settings, then open the column 1 settings.

    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Column Settings

    Add a background color.

    • Background: #442854

    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Background

    Finally, navigate to the design tab and open the border settings. Add rounded corners to the bottom left and right corners.

    • Rounded Corners – bottom left: 300px
    • Rounded Corners – bottom right: 300px

    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Rounded Corners

    Modify Section Settings

    Open the section settings for the section containing the map module. Navigate to the background settings, then add a background mask.

    • Background Mask: Corner Blob
    • Mask Color: #FFFFFF
    • Mask Transform: Vertical and Invert

    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Background Mask

    Add Image

    First, add an image module to the column next to the map module.
    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Image

    Then, add the transparent image of the acai bowl to the module. You should have this in your media library labeled as acai-bowl-34.png if you used the Acai Bowl landing page layout for Layout 1.

    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Add Image

    We want the image of the acai bowl to rotate as you scroll down the page. Move over to the Advanced tab, then open the Scroll Effects section. Select the Rotating tab and enable rotating.

    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Rotating

    Next, set the rotation.

    • Starting Rotation: 180
    • Mid Rotation: 90
    • Ending Rotation: 0

    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Set Rotating

    Map Design

    Now move over to the map module settings. Under the design tab, open the map settings. Enable the grayscale filter.

    • Use Greyscale Filter: Yes
    • Greyscale Filter Amount (%): 100

    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Greyscale

    Next, modify the height under the Sizing tab.

    • Height: 600px

    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Height

    Under the Spacing settings, add some margins.

    • Margin-Top: 5px
    • Margin-Bottom: 5px
    • Margin–Left: 5px
    • Margin-Right: 5px

    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Margin

    Then add rounded corners to the bottom left and right corners.

    • Rounded Corners – Bottom Left: 300px
    • Rounded Corners – Bottom Right: 300px

    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Border Rounded Corners
    Add Scroll Effects

    Now we can finally add the scroll effects to the map so that it enlarges on scroll. Open the Scroll Effects section under the Advanced tab. Then, select the scaling up and down tab and enable scaling up and down.

    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Scroll Effects

    Finally, customize the scales.

    • Starting Scale: 90%
    • Mid Scale: 95%
    • Ending Scale: 100%

    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Scaling

    Final Design

    Here is the final design for layout 2.

    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Final Design Mobile

    Final Result

    Now let’s take a look at both of our layouts in action.

    Layout 1

    Divi Enlarge Map On Scroll With Scroll Effects Layout 1 Final Design Mobile

    Layout 2

    Divi Enlarge Map On Scroll With Scroll Effects Layout 2 Final Design Mobile

    Final Thoughts

    By applying Divi’s scroll effects to the map module, you can achieve a unique effect as you scroll down the page and help your map stand out to website visitors. These effects can be applied to any other module on your website as well, so there is no limit to what you can achieve with some creativity! If you are interested in more tutorials related to the map module, check out this article for how to add a fixed map toggle to your Divi page template. And if you want some more design ideas using scroll effects, check out this tutorial for how to add scroll-animated icons to your section backgrounds. How have you applied Divi’s scroll effects to your website? Let us know in the comments!

    The post How to Expand Your Map Module on Scroll with Divi’s Scroll Effects appeared first on Elegant Themes Blog.

  • Get a Free Concert Hall Layout Pack for Divi

    Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi.

    This time around, the design team has created a beautiful Concert Hall Layout Pack that’ll help you get your next Concert Hall website up and running in no time!

    This layout pack includes:

    – 6 Premade page layouts strategically designed for any Concert Hall website (including a footer design)
    – Original, royalty-free photos and graphics + customizable source file (see below)
    – Plus, a large collection of pre-designed website elements that are customizable and reusable anywhere.

    This layout pack is available right inside Divi for all Divi customers for FREE as the latest addition to our growing Divi library of hundreds of premade layout packs, thousands of page designs, and countless web design elements and resources.

    divi layout

    Check Out The Divi Concert Hall
    Layout Pack Below

    Get it for free today!

    Concert Hall layout pack

    Landing Page Design

    Concert Hall layout pack

    View The Live Layout Demo

    Home Page Design

    Concert Hall Layout Pack for Divi

    View The Live Layout Demo

    Events Page Design

    Concert Hall Layout Pack for Divi

    View The Live Layout Demo

    About Page Design

    Concert Hall Layout Pack for Divi

    View The Live Layout Demo

    Blog Page Design

    Concert Hall Layout Pack for Divi

    View The Live Layout Demo

    Contact Page Design

    Concert Hall Layout Pack for Divi

    View The Live Layout Demo

    Key Features

    Thanks to the Concert Hall Layout Pack for Divi, your concert hall will be represented beautifully. Hues of black combine with angular accent photos to showcase events and services. Red highlights the call to action and other points of interest, while the design flows with a relaxed, laid-back vibe.

    Live Demos

    Click the links below to see a live demo for each of the layouts included in the pack.

    1. Concert Hall Landing Page (live demo)
    2. Concert Hall Home Page (live demo)
    3. Concert Hall Events Page (live demo)
    4. Concert Hall About Page (live demo)
    5. Concert Hall Blog Page (live demo)
    6. Concert Hall Contact Page (live demo)

    Access This Layout Right Now
    Directly from Your Divi Builder

    Since Version 3.0.99 of Divi, you can find and import any of the layouts included in this pack (along with ALL of Divi’s Premade Layout packs) directly from the Divi Builder. They are already waiting for you.

    To access your new layout, simply activate the Visual Builder when editing a page and look for the “Load From Library” icon in the page settings bar (it looks like a plus symbol). Click this icon to launch the Load From Library popup. Under the Premade Layouts tab, you can easily find the new layout by scrolling through the list of layout packs. Once you find the Concert Hall Layout Pack, click on it. You will see all the individual layouts included in the pack. Select the layout you want to use and then click the “Use This Layout” button.

    Concert Hall Layout Pack for Divi

    For more, check out this video to learn how you can get this layout pack up and running today.

    Subscribe To Our Youtube Channel

    Authentication Required

    Before you can download Premade Layouts from the Divi Library you must authenticate your Elegant Themes Subscription. You can do this by navigating to Divi > Theme Options > Updates. There you can enter your username and API key and save changes.

    Concert Hall Layout Pack for Divi

    You can find your API Key under your members area on the Elegant Themes site. After you enter the Username and API Key, you will gain immediate access to our library of hundreds of free layouts (including this one). If you haven’t done this, when you click to import a layout to your page, you will be prompted to enter your Elegant Themes Membership Username and API Key.

    Use Layout Images for FREE with No Licensing Restrictions

    Concert Hall Layout Pack for Divi

    The image assets included with these layouts (icons, illustrations, photos, etc.) have no licensing restrictions. This means you can use them in all of your commercial projects without having to worry about paying licensing fees or attributing the photographer. Use them in your commercial websites, sell them within your Divi child themes, include them in your own Divi layout packs or just use them on your blog. We know how challenging it can be to find good photos and how confusing and scary the licensing that governs those photos can be. We want to fix that problem for our users.

    Download the Full Res Image Assets

    New Layout Pack Every Week!

    We hope you enjoy this layout pack. We look forward to hearing your opinions in the comment section below. Make sure you check out next week’s layout pack as well!

    The post Get a Free Concert Hall Layout Pack for Divi appeared first on Elegant Themes Blog.

  • 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

    Installing Avanti

    1. Click Upload Theme
    2. Click Choose File
    3. Navigate to the zipped file on your computer, choose it, and click Install Now

    Installing Avanti

    1. Click Activate

    Installing Avanti

    1. Go to Avanti Demo Import
    2. Click Easy Demo Import
    3. Choose Import Demo Content

    Installing Avanti

    1. Click Remove Demo Content and Import Functions

    Installing Avanti

    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.

    Avanti Pages, Layouts, and Templates

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

    Avanti Pages, Layouts, and Templates

    It also includes 11 premade and preassigned templates.

    Avanti Pages, Layouts, and 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

    Avanti Pages, Layouts, and Templates

    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.

    Avanti Restaurant Home Page

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

    Avanti Restaurant Home Page

    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 Restaurant Home Page

    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.

    Avanti Photography Home 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.

    Avanti Photography Home Page

    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.

    Other Avanti Pages

    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.

    Other Avanti Pages

    Home Page Shop V3

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

    Home Page Shop V3

    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.

    Home Page Shop V3

    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 V2

    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.

    Cart V3

    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.

    Checkout V3

    About Us V4

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

    About Us V4

    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 V4

    About Us V5

    About Us V5 was designed for the new Photography layout.

    About Us V5

    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.

    About Us V5

    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.

    Services V3

    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.

    Single Service V3

    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 V4

    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.

    Contact Us V5

    Testimonials V2

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

    Testimonials V2

    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.

    Pricing V2

    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.

    Headers

    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.

    Service Boxes

    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.

    Testimonials

    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.

    Where to Purchase Avanti

    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.

  • Using the Divi Fullwidth Map vs Map Module

    Adding a map to your website can make it easy for your website visitors to see where your business is located or to see where an event might be taking place. Divi comes with two built-in options to embed Google Maps to your page design: the fullwidth map module and the regular map module. With the fullwidth map module, you can add a big, eye-catching map that spans the width of your page. You can customize the look of the fullwidth map module using the fullwidth module settings, and it can be a great design element to add to your layout. You can add Divi’s regular map module to any regular section. The design options are endless as you can combine module, row, and section options to create unique layouts for your website.

    In this tutorial, we will show you how to create two different layouts using the fullwidth map module and the regular map module.

    Let’s get started!

    Sneak Peek

    Here is a preview of what we will design.

    Layout 1 – Fullwidth Map Module

    Divi Fullwidth Map VS Map Module Fullwidth Final Design

     

    Divi Fullwidth Map VS Map Module Fullwidth Final Design Mobile

    Layout 2 – Regular Map Module

    Divi Fullwidth Map VS Map Module Regular Final Design

    Divi Fullwidth Map VS Map Module Regular Final Design Mobile

     

    What You Need to Get Started

    Before we begin, install and activate the Divi Theme and make sure you have the latest version of Divi on your website.

    Now, you are ready to start!

    Using the Divi Fullwidth Map vs Map Module

    Create a New Page with a Premade Layout

    Let’s start by using a premade layout from the Divi library. For this design, we will use the Conference About Page from the Conference layout pack.

    Add a new page to your website and give it a title, then select the option to Use Divi Builder.

    Divi Fullwidth Map VS Map Module Use Builder

    We will use a premade layout from the Divi library for this example, so select Browse Layouts.

    Divi Fullwidth Map VS Map Module Browse Layouts

    Search for and select the Conference About Page layout.

    Divi Fullwidth Map VS Map Module Search

    Select Use This Layout to add the layout to your page.

    Divi Fullwidth Map VS Map Module Use Layout

    Now we are ready to build our design.

    Layout 1 – Fullwidth Map Module

    For our first layout, we will add the fullwidth map module to the footer, right above the black footer section with all of the links. Instead of adding this element to the page, we will use the theme builder in Divi’s settings to create a footer section for this page, then add the map. Let’s get started.

    First, right-click on the footer section or click the three dots in the section toolbar, then copy the section.

    Divi Fullwidth Map VS Map Module Copy Footer Section

    Then, delete the section from this page.

    Design the Footer Layout with the Theme Builder

    From the WordPress dashboard, navigate to the theme builder section within Divi’s settings. Click Add a New Template.

    Divi Fullwidth Map VS Map Module Add New Template

    For this design, I am only enabling the template for the page with our Conference About Page template.

    Divi Fullwidth Map VS Map Module Template Settings

    Next, click Add Custom Footer and select Build Custom Footer.

    Divi Fullwidth Map VS Map Module Build Custom Footer

    Now that your custom footer settings are open in the theme builder, paste the footer section you copied from the original layout.

    Divi Fullwidth Map VS Map Module Paste Section

    Add a new fullwidth section above the footer layout you pasted.

    Divi Fullwidth Map VS Map Module Insert Fullwidth

    Then, add the fullwidth map module.

    Divi Fullwidth Map VS Map Module Fullwidth Menu Module

    Fullwidth Map Module Settings

    Open the map module settings. If you haven’t already, add your Google API Key so that the map can be displayed. (Learn more about the Google Maps API Key requirement here.)

    Divi Fullwidth Map VS Map Module Google API Key

    We need to add a Map Center Address under the Map settings on the Content tab so that our map is positioned to display a specific location. We will center our map on San Fransisco, California for this layout.

    Divi Fullwidth Map VS Map Module Map Center Address

    We also want to add a pin to the map. Under the Content tab, click Add New Pin.

    Divi Fullwidth Map VS Map Module Add New Pin

    Enter the pin address.

    Divi Fullwidth Map VS Map Module Map Pin Address

    Finally, delete the empty section from the footer layout.

    Divi Fullwidth Map VS Map Module Delete Section

    Fullwidth Map Module Final Design

    Here is the final design with the fullwidth map module.

    Divi Fullwidth Map VS Map Module Fullwidth Final Design

    Divi Fullwidth Map VS Map Module Fullwidth Final Design Mobile

     

    Layout 2 – Regular Map Module

    For our second layout, we will be using the regular map module. Similar to the last design, we will incorporate it into the footer design using the theme builder settings. For this design, we will add a map to the “Where to Stay” section.

    Design the Footer Layout with the Theme Builder

    We’ll follow the same steps as the fullwidth map module layout to create a custom footer design in the theme builder. In a new tab, open the WordPress Dashboard and navigate to the theme builder section within Divi’s settings. You should have the original layout design open in another tab.

    Click Add a New Template.

    Divi Fullwidth Map VS Map Module Add New Template

    Once again, I am only enabling the template for the page with our Conference About Page template.

    Divi Fullwidth Map VS Map Module Template Settings

    Next, click Add Custom Footer and select Build Custom Footer.

    Divi Fullwidth Map VS Map Module Build Custom Footer

    Now that your custom footer settings are open in the theme builder, go back to the tab with the original layout and copy the “Where to Stay” section.

    Divi Fullwidth Map VS Map Module Copy Section

    Paste the “Where to Stay” section in the custom footer layout.

    Divi Fullwidth Map VS Map Module Paste Section

    Go back to the original layout and copy the footer section.

    Divi Fullwidth Map VS Map Module Copy Footer

    Then, paste the footer section below the “Where to Stay” section in the custom footer layout.

    Divi Fullwidth Map VS Map Module Regular Paste Footer

    Delete the “Where to Stay” section and the footer section from the original layout.

    Finally, delete the empty section from the custom footer layout.

    Divi Fullwidth Map VS Map Module Regular Delete Section

    Fullwidth Map Module Settings

    Add a map module below the “Where to Stay” body text.

    Divi Fullwidth Map VS Map Module Regular Map Module

    Then, open the map module settings. Once again, ensure you have added your Google API Key to the Map settings so the map can be displayed.

    Add a Map Center Address so that the map is positioned to a location. For this example, we will set it to San Fransisco, California.

    Divi Fullwidth Map VS Map Module Regular API Map Address

    Next, add a pin to the map.

    Divi Fullwidth Map VS Map Module Regular Add Pin

    Enter the pin address.

    Divi Fullwidth Map VS Map Module Regular Map Pin Address

    Regular Map Module Final Design

    Here is the final design with the regular map module.

    Divi Fullwidth Map VS Map Module Regular Final Design

    Divi Fullwidth Map VS Map Module Regular Final Design Mobile

    Final Result

    Now let’s take another look at our final designs together.

    Layout 1 – Fullwidth Map Module

    Divi Fullwidth Map VS Map Module Fullwidth Final Design

     

    Divi Fullwidth Map VS Map Module Fullwidth Final Design Mobile

    Layout 2 – Regular Map Module

    Divi Fullwidth Map VS Map Module Regular Final Design

     

    Divi Fullwidth Map VS Map Module Regular Final Design Mobile

    Final Thoughts

    The fullwidth map module and the regular map module are an easy way to add an eye-catching design element to your page, not to mention it provides valuable information to your website visitors. You can easily customize these sections using the various module, row, and section settings, and they can be combined with other design elements on the page to create dynamic layouts for your website. If you want to learn more about what the map modules can do, check out this tutorial to add a fixed map toggle to a page template.

    Do you use a fullwidth menu module or a regular menu module on your website? Or both? We’d love to hear from you in the comments!

    The post Using the Divi Fullwidth Map vs Map Module appeared first on Elegant Themes Blog.

  • Get a Free Event Coordinator Layout Pack for Divi

    Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi.

    This time around, the design team has created a beautiful Event Coordinator Layout Pack that’ll help you get your next Event Coordinator website up and running in no time!

    This layout pack includes:

    – 7 Premade page layouts strategically designed for any Event Coordinator website (including a footer design)
    – Original, royalty-free photos and graphics + customizable source file (see below)
    – Plus, a large collection of pre-designed website elements that are customizable and reusable anywhere.

    This layout pack is available right inside Divi for all Divi customers for FREE as the latest addition to our growing Divi library of hundreds of premade layout packs, thousands of page designs, and countless web design elements and resources.

    divi layout

    Check Out The Divi Event Coordinator
    Layout Pack Below

    Get it for free today!

    Event Coordinator layout pack

    Landing Page Design

    Event Coordinator layout pack

    View The Live Layout Demo

    About Page Design

    Event Coordinator Layout Pack for Divi

    View The Live Layout Demo

    Contact Page Design

    Event Coordinator Layout Pack for Divi

    View The Live Layout Demo

    Blog Page Design

    Event Coordinator Layout Pack for Divi

    View The Live Layout Demo

    Services Page Design

    Event Coordinator Layout Pack for Divi

    View The Live Layout Demo

    Service Page Design

    Event Coordinator Layout Pack for Divi

    View The Live Layout Demo

    Home Page Design

    Event Coordinator Layout Pack for Divi

    View The Live Layout Demo

    Key Features

    We have just the layout for you if you need a new look for your event coordinator site. The Event Coordinator Layout Pack for Divi features a colorful, whimsical design perfect for showcasing your even business. Combining bright colors, parallax effects, and adequate negative space will keep users engaged and eager to learn more about your event-coordinating business.

    Live Demos

    Click the links below to see a live demo for each of the layouts included in the pack.

    1. Event Coordinator Landing Page (live demo)
    2. Event Coordinator About Page (live demo)
    3. Event Coordinator Contact Page (live demo)
    4. Event Coordinator Blog Page (live demo)
    5. Event Coordinator Services Page (live demo)
    6. Event Coordinator Service Page (live demo)
    7. Event Coordinator Homepage (live demo)

    Access This Layout Right Now
    Directly from Your Divi Builder

    Since Version 3.0.99 of Divi, you can find and import any of the layouts included in this pack (along with ALL of Divi’s Premade Layout packs) directly from the Divi Builder. They are already waiting for you.

    To access your new layout, simply activate the Visual Builder when editing a page and look for the “Load From Library” icon in the page settings bar (it looks like a plus symbol). Click this icon to launch the Load From Library popup. Under the Premade Layouts tab, you can easily find the new layout by scrolling through the list of layout packs. Once you find the Event Coordinator Layout Pack, click on it. You will see all the individual layouts included in the pack. Select the layout you want to use and then click the “Use This Layout” button.

    Event Coordinator Layout Pack for Divi

    For more, check out this video to learn how you can get this layout pack up and running today.

    Subscribe To Our Youtube Channel

    Authentication Required

    Before you can download Premade Layouts from the Divi Library you must authenticate your Elegant Themes Subscription. You can do this by navigating to Divi > Theme Options > Updates. There you can enter your username and API key and save changes.

    Event Coordinator Layout Pack for Divi

    You can find your API Key under your members area on the Elegant Themes site. After you enter the Username and API Key, you will gain immediate access to our library of hundreds of free layouts (including this one). If you haven’t done this, when you click to import a layout to your page, you will be prompted to enter your Elegant Themes Membership Username and API Key.

    Use Layout Images for FREE with No Licensing Restrictions

    Event Coordinator Layout Pack for Divi

    The image assets included with these layouts (icons, illustrations, photos, etc.) have no licensing restrictions. This means you can use them in all of your commercial projects without having to worry about paying licensing fees or attributing the photographer. Use them in your commercial websites, sell them within your Divi child themes, include them in your own Divi layout packs or just use them on your blog. We know how challenging it can be to find good photos and how confusing and scary the licensing that governs those photos can be. We want to fix that problem for our users.

    Download the Full Res Image Assets

    New Layout Pack Every Week!

    We hope you enjoy this layout pack. We look forward to hearing your opinions in the comment section below. Make sure you check out next week’s layout pack as well!

    The post Get a Free Event Coordinator Layout Pack for Divi appeared first on Elegant Themes Blog.

  • 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!

    Divi Product Highlight: DiviCity Install

    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.

    Divi Product Highlight DiviCity Heading

    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.

    Divi Product Highlight: DiviCity About

    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.

    Divi Product Highlight: DiviCity Blog

    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.

    Divi Product Highlight: DiviCity Article Card Setup

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

    Divi Product Highlight: DiviCity Blog 2

    DiviCity Numbers Section

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

    Divi Product Highlight: DiviCity Numbers

    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.

    Divi Product Highlight: DiviCity What To Do

    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.

    Divi Product Highlight: DiviCity Where to Do It

    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.

    Divi Product Highlight: DiviCity Visit Us

    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.

    Divi Product Highlight: DiviCity Contact

    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.

    Divi Product Highlight: DiviCity Mobile Header

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

    Divi Product Highlight: DiviCity Mobile About

    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.

    Divi Product Highlight: DiviCity Mobile Where to Do It

    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.

    Divi Product Highlight: DiviCity Mobile Contact

    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.

    DiviCity review

    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.

  • How to Redirect After Filling Out the Divi Contact Form

    Redirecting after filling out a contact form is one of those interactions that’s often overlooked. However, it’s an important interaction. It informs the user that you’ve received their message and what to expect next. Fortunately, redirecting is easy to do with Divi’s Contact Form Module. In this post, we’ll see how to redirect after filling out the Divi Contact Form. We’ll also see an example redirect page to help you build your own.

    Let’s get started.

    Preview

    Desktop Redirect Contact Form Page with a Custom Message

    Desktop Redirect Contact Form Page with a Custom Message

    Phone Redirect Contact Form Page with a Custom Message

    Phone Redirect Contact Form Page with a Custom Message

    How to Redirect After Filling Out the Divi Contact Form

    You’ll find a redirect option in the General tab of the Divi Contact form Module. For these examples, I’m using the Contact page from the free Device Repair Layout Pack that’s available within Divi.

    To access the setting, open the module by clicking the dark gray icon that appears on hover.

    How to Redirect After Filling Out the Divi Contact Form

    Next, scroll down to the section called Redirect and enable the redirect option.

    • Enable Redirect URL: Yes

    How to Redirect After Filling Out the Divi Contact Form

    Enter the URL you want to redirect to. Close the module and save your settings. As you can see, enabling the redirect is simple. The hard part is knowing where to send them.

    • Redirect URL: the URL of your redirect page

    How to Redirect After Filling Out the Divi Contact Form

    How to Choose Where to Redirect the Divi contact Form

    You can enter any URL you want into the Redirect URL field, but the page you redirect them should make sense to them. It needs to be a part of the contact process and include information they’ll find useful. It should communicate to them, feel like a natural progression, and look like your website.

    Rather than redirecting to the home page, blog, or similar pages, it’s best to redirect the user to a custom page with information that you received their message. You could include information on what happens next and provide a few links they can use. It could include a link to a download, FAQs, etc.

    I recommend creating a custom page using the styling from your layout.

    Create a Redirect Contact Form Page with a Custom Message

    Let’s create a page for the custom message. I’ll use the styling cues from the Device Repair Layout Pack Contact page. This will ensure the custom message page is styled to match the layout.

    First Redirect Contact Form Page Section

    Create a page and open the Section’s settings by clicking the blue gear icon.

    Create a Page with a Custom Message

    Next, scroll down to Background and select the Gradient tab. Create four Gradient Stops. Select white for the first and set it to 20%. Select #edbf48 for the second and set it on top of the first. Choose #edbf48 for the third and set it to 33%. Choose white for the fourth and set it on top of the third. Change the Gradient Direction to 115deg. This creates a stripe for the background. Close the settings.

    • First Gradient Stop: 20%, #ffffff
    • Second Gradient Stop: 20%, #edbf48
    • Third Gradient Stop: 33%, #edbf48
    • Fourth Gradient Stop: 33%, #ffffff
    • Gradient Direction: 115deg

    Create a Page with a Custom Message

    First Row

    Next, add a single-column Row. We’ll use its default settings.

    Create a Page with a Custom Message

    Title

    Next, add a Text Module.

    Create a Page with a Custom Message

    Set the Content Type to Heading 1 and enter the message into the Content Editor.

    • Content Type: Heading 1
    • Body Text: Thank you for contacting us. We’ll get in touch soon.

    Create a Page with a Custom Message

    Text

    Next, select the Design tab. Scroll down and change the Text Alignment to Centered.

    • Text Alignment: Centered

    Create a Page with a Custom Message

    Heading Text

    Scroll down to Heading Text. Choose Inter for the Font. Set the Weight to Bold and the Color to black.

    • Font: Inter
    • Weight: Bold
    • Color: #000000

    Create a Page with a Custom Message

    Change the Font Size to 75px for desktops, 40px for tablets, and 24px for phones. Change the Line Height to 1.2em. Close the module.

    • Size: 75px desktop, 40px tablet, 24px phone
    • Line Height: 1.2em

    Create a Page with a Custom Message

    Second Redirect Contact Form Page Section and Row

    Next, add a new Section under the first one and add a single-column Row. We’ll use their default settings.

    Create a Page with a Custom Message

    Redirect Contact Form Page Description Text Title

    Add a Text Module in the second Row and open its settings.

    Create a Page with a Custom Message

    Change the Content to Heading 4 and enter the title into the Content Editor. I’m using the title What’s Next, so they’ll know at a glance what this content is about.

    • Content Type: Heading 4
    • Content Body: What’s Next

    Create a Page with a Custom Message

    Text

    Select the Design tab and set the Text Alignment to Centered.

    • Text Alignment: Centered

    Create a Page with a Custom Message

    Heading Text

    Scroll down to Heading Text and select the H4 tab. Choose Inter for the Font and set the Weight to Bold and the Color to black.

    • Font: Inter
    • Weight: Bold
    • Color: #000000

    Create a Page with a Custom Message

    Change the Size to 19ps for desktops, 16px for tablets, and 14px for phones. Set the Line Height to 1.6em.

    • Size: 19px desktop, 16px tablet, 14px phone
    • Line Height: 1.6em

    Create a Page with a Custom Message

    Spacing

    Next, scroll down to Spacing and add 0px to the Bottom Margin. Close the module.

    • Bottom Margin: 0px

    Create a Page with a Custom Message

    Redirect Contact Form Page Description Text Body

    Next, add a Text Module under the description title.

    Create a Page with a Custom Message

    Add the description text to the body Content Editor. This text will inform the user of when to expect a response. I’m also adding a note that I’ve received their message.

    • Content Body: We’ve received your message and we’ll send you an email within 2 business days.

    Create a Page with a Custom Message

    Text

    Go to the Design tab and select Open Sans for the Font and change the Color to black.

    • Font: Open Sans
    • Color: #000000

    Create a Page with a Custom Message

    Change the Size to 16px for desktops, 15ps for tablets, and 14px for phones. Set the Line Height to 1.8em.

    • Size: 16px desktop, 15px tablet, 14px phone
    • Line Height: 1.8em

    Create a Page with a Custom Message

    Scroll down to Text Alignment and select Centered. Close the module.

    • Text Alignment: Centered

    Create a Page with a Custom Message

    FAQ Text Title

    Next, we’ll add information and a link to the FAQ page. First, copy the description’s title Text Module and drag it under the description Text Module.

    Create a Page with a Custom Message

    Leave the Content Type at Heading 4 and change the Body Content to FAQ. All the other settings are already present, so you can close the module.

    • Content Type: Heading 4
    • Content Body: FAQ

    Create a Page with a Custom Message

    FAQ Text Body

    Next, copy the description’s Text Module and drag it under the FAQ title Text Module.

    Create a Page with a Custom Message

    We will make one change to this module, but first, add your text. Add spaces as needed to create the layout you want. As you’ll see in the example, I’m adding spaces to place the FAQ link on its own line. I’ve added a link to the FAQ Page text, so it now links to the FAQ page. We’ll need to change its color.

    • Content Body: While you wait, take a look at our frequently asked questions. This should answer any preliminary questions you may have. To see our FAQs, follow this link: FAQ Page

    Create a Page with a Custom Message

    Text Link

    Now, go to the Design tab to the Text section and select the Link tab and change the Color to #f26440. Leave the rest of the settings at their defaults so they’ll follow the regular Text settings. Close the module.

    • Link Text Color: #f26440

    Create a Page with a Custom Message

    Redirect Contact Form Page Button

    Lastly, let’s add a button that leads the user back to the homepage. Add the Button Module under the last Text Module.

    Create a Page with a Custom Message

    Open the Button Module’s settings and change the Button Text to Home Page.

    • Text: Home Page

    Create a Page with a Custom Message

    Link

    Next, enter the URL for your home page into the URL field. Leave the Link Target at its default setting so the link opens in the same window.

    • Button Link URL: your home page URL

    Create a Page with a Custom Message

    Alignment

    Next, select the Design tab. Under Alignment, select Center for the Button Alignment.

    • Button Alignment: Center

    Create a Page with a Custom Message

    Button

    Scroll down to Button and enable Use Custom Styles for Button. Change the Font Size to 14px. Set the Font Color to white and the Background Color to #286f6c.

    • Use Custom Styles for Button: Yes
    • Text Size: 14px
    • Text Color: #ffffff
    • Background Color: #286f6c

    Create a Page with a Custom Message

    Change the Border Color to #286f6c and set the Radius to 0px. Choose Inter for the Font and set the Weight to Bold and the Style to TT.

    • Border Color: #286f6c
    • Border Radius: 0px
    • Font: Inter
    • Weight: Bold
    • Style: TT

    Create a Page with a Custom Message

    Spacing

    Finally, scroll down to Spacing. Change the Top and Bottom Padding to 14ps and the Left and Right Padding to 20px. Close the module and save your settings.

    • Padding: 14px Top and Bottom, 20px Left and Right

    Create a Page with a Custom Message

    Results

    Desktop Redirect Contact Form Page with a Custom Message

    Desktop Redirect Contact Form Page with a Custom Message

    Phone Redirect Contact Form Page with a Custom Message

    Phone Redirect Contact Form Page with a Custom Message

    Ending Thoughts

    That’s our look at how to redirect after filling out the Divi Contact Form. Setting up the redirect is easy to do in Divi’s Contact Form Module. I recommend creating a page just for the redirect and using the page to provide specific information and links. Your visitors will appreciate the extra effort, and it will make the contact process more understandable and fulfilling.

    We want to hear from you. Do you use a custom page to redirect after filling out your contact form? Let us know about your experience in the comments.

    The post How to Redirect After Filling Out the Divi Contact Form appeared first on Elegant Themes Blog.

  • Get a Free Coaching Layout Pack for Divi

    Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi.

    This time around, the design team has created a beautiful Coaching Layout Pack that’ll help you get your next Coaching website up and running in no time!

    This layout pack includes:

    – 8 Premade page layouts strategically designed for any Coaching website (including a footer design)
    – Original, royalty-free photos and graphics + customizable source file (see below)
    – Plus, a large collection of pre-designed website elements that are customizable and reusable anywhere.

    This layout pack is available right inside Divi for all Divi customers for FREE as the latest addition to our growing Divi library of hundreds of premade layout packs, thousands of page designs, and countless web design elements and resources.

    divi layout

    Check Out The Divi Coaching
    Layout Pack Below

    Get it for free today!

    Coaching layout pack

    Landing Page Design

    Coaching layout pack

    View The Live Layout Demo

    Home Page Design

    Coaching Layout Pack for Divi

    View The Live Layout Demo

    Services Page Design

    Coaching Layout Pack for Divi

    View The Live Layout Demo

    Service Page Design

    Coaching Layout Pack for Divi

    View The Live Layout Demo

    Pricing Page Design

    Coaching Layout Pack for Divi

    View The Live Layout Demo

    About Page Design

    Coaching Layout Pack for Divi

    View The Live Layout Demo

    Blog Page Design

    Coaching Layout Pack for Divi

    View The Live Layout Demo

    Contact Page Design

    Coaching Layout Pack for Divi

    View The Live Layout Demo

    Key Features

    Launching a new coaching business is much easier thanks to the Coaching Layout Pack for Divi. Your website’s visitors will be met with an elegant, timeless design, including large color blocks, striking typography, and muted colors. These features combine to make a professional, beautiful website that effectively promotes your business.

    Live Demos

    Click the links below to see a live demo for each of the layouts included in the pack.

    1. Coaching Landing Page (live demo)
    2. Coaching Homepage (live demo)
    3. Coaching Services Page (live demo)
    4. Coaching Service Page (live demo)
    5. Coaching Pricing Page (live demo)
    6. Coaching About Page (live demo)
    7. Coaching Blog Page (live demo)
    8. Coaching Contact Page (live demo)

    Access This Layout Right Now
    Directly from Your Divi Builder

    Since Version 3.0.99 of Divi, you can find and import any of the layouts included in this pack (along with ALL of Divi’s Premade Layout packs) directly from the Divi Builder. They are already waiting for you.

    To access your new layout, simply activate the Visual Builder when editing a page and look for the “Load From Library” icon in the page settings bar (it looks like a plus symbol). Click this icon to launch the Load From Library popup. Under the Premade Layouts tab, you can easily find the new layout by scrolling through the list of layout packs. Once you find the Coaching Layout Pack, click on it. You will see all the individual layouts included in the pack. Select the layout you want to use and then click the “Use This Layout” button.

    Coaching Layout Pack for Divi

    For more, check out this video to learn how you can get this layout pack up and running today.

    Subscribe To Our Youtube Channel

    Authentication Required

    Before you can download Premade Layouts from the Divi Library you must authenticate your Elegant Themes Subscription. You can do this by navigating to Divi > Theme Options > Updates. There you can enter your username and API key and save changes.

    Coaching Layout Pack for Divi

    You can find your API Key under your members area on the Elegant Themes site. After you enter the Username and API Key, you will gain immediate access to our library of hundreds of free layouts (including this one). If you haven’t done this, when you click to import a layout to your page, you will be prompted to enter your Elegant Themes Membership Username and API Key.

    Use Layout Images for FREE with No Licensing Restrictions

    Coaching Layout Pack for Divi

    The image assets included with these layouts (icons, illustrations, photos, etc.) have no licensing restrictions. This means you can use them in all of your commercial projects without having to worry about paying licensing fees or attributing the photographer. Use them in your commercial websites, sell them within your Divi child themes, include them in your own Divi layout packs or just use them on your blog. We know how challenging it can be to find good photos and how confusing and scary the licensing that governs those photos can be. We want to fix that problem for our users.

    Download the Full Res Image Assets

    New Layout Pack Every Week!

    We hope you enjoy this layout pack. We look forward to hearing your opinions in the comment section below. Make sure you check out next week’s layout pack as well!

    The post Get a Free Coaching Layout Pack for Divi appeared first on Elegant Themes Blog.

  • 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.

    Divi Product Highlight Divi Timeline Layouts Pack Install 1

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

    Divi Product Highlight Divi Timeline Layouts Pack Install 3

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

    Divi Product Highlight Divi Timeline Layouts Pack Install 2

    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.

    Divi Product Highlight Divi Timeline Layouts Pack Layout 1

    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.

    Divi Product Highlight Divi Timeline Layouts Pack Layout 3

    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.

    Divi Product Highlight Divi Timeline Layouts Pack Layout 6

    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.

    Divi Product Highlight Divi Timeline Layouts Pack Layout 8

    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.

    Divi Product Highlight Divi Timeline Layouts Pack Layout 10

    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.

    Divi Product Highlight Divi Timeline Layouts Pack Layout 14

    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.

    Divi Product Highlight Divi Timeline Layouts Pack Layout 18

    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.

    Divi Product Highlight Divi Timeline Layouts Pack Layout 20

    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.

    Divi Product Highlight Divi Timeline Layouts Pack Layout 22

    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.

    Divi Product Highlight Divi Timeline Layouts Pack Layout 29

    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.

    Divi Product Highlight Divi Timeline Layouts Pack Layout 33

    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.

    Divi Product Highlight Divi Timeline Layouts Pack Layout 37

    Layout 40

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

    Divi Product Highlight Divi Timeline Layouts Pack Layout 40

    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.

    Divi Product Highlight Divi Timeline Layouts Pack Layout 48

    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.

    Divi Product Highlight Divi Timeline Layouts Pack Layout 53

    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.

    Divi Product Highlight Divi Timeline Layouts Pack Layout 59

    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.

    Divi Product Highlight Divi Timeline Layouts Pack Layout 62

    Layout 66

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

    Divi Product Highlight Divi Timeline Layouts Pack Layout 66

    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.

    Divi Product Highlight Divi Timeline Layouts Pack Layout 68

    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.

    Divi Product Highlight Divi Timeline Layouts Pack Layout 72

    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.

    Divi Product Highlight Divi Timeline Layouts Pack Layout 76

    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.

    Divi Product Highlight Divi Timeline Layouts Pack Layout 79

    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.

    Divi Product Highlight Divi Timeline Layouts Pack Layout 81

    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.

    Divi Product Highlight Divi Timeline Layouts Pack Layout 85

    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.

    Divi Product Highlight Divi Timeline Layouts Pack Layout 88

    Layout 90

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

    Divi Product Highlight Divi Timeline Layouts Pack Layout 90

    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.

    Divi Product Highlight Divi Timeline Layouts Pack Layout 94

    Layout 96

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

    Divi Product Highlight Divi Timeline Layouts Pack Layout 96

    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.

    Divi Product Highlight Divi Timeline Layouts Pack Layout 98

    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.

    Divi Product Highlight Divi Timeline Layouts Pack Layout 100

    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.

    Divi timeline layout pack review

    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.