Tag: Divi Product Highlight

Divi Mega Pro is a third-party plugin for Divi that adds the ability to create mega menus and tooltips with the Divi Builder. Since the mega menus and tooltips are created with the Divi Builder, you can use any modules you want, including third-party modules, shortcodes, and code, and style them with Divi’s tools. In this post, we’ll take a look at Divi Mega Pro to help you decide if Divi Mega Pro is the right product for your needs.

Divi Mega Pro Builder

Rather than adding modules to the Divi Builder, Divi Mega Pro adds a new post type created with Divi layouts that WordPress menus and Divi Modules can display. Create and add as many as you want to any page and menu. A new menu item is added to the WordPress dashboard called Divi Mega Pro. This includes the Divi Mega Pro list, editor, and settings. Here, you can create and manage your mega menus and tooltips. We’ll look at each menu item in reverse order.

Divi Mega Pro Settings

The settings allow you to add a slide transition to the header, content, and footer. You can enable them independently. They’re disabled by default. The transition will change the content within the menu or tooltip while keeping its container visible. This forces the mega menu and tooltips into hover mode. I recommend enabling them unless you need to use the click mode.

Add New

To create a mega menu item or a tooltip, click Add New. This opens an editor where you can create the menu or tooltip. It includes the TinyMCE editor, and you can enable the Divi Builder to create it with Divi Modules. You’ll need to create a new item for every mega menu element you want to display. For example, if you want four different links in your header to show a different mega menu layout, you’ll need to create four different items.

The editor includes lots of tools in the right sidebar and at the bottom including the standard publishing tools and custom fields options. Let’s take a close look at each of the custom tools.

Display Locations

Choose where the mega menu can display. Select between all posts and pages, all posts, all pages, or specific pages. You can add exceptions for all posts or pages to the field. If you choose specific locations, then you can enter them into the field. You can also select to show the menu on author pages and archive pages, and force render.

Mega Pro Animation

Choose the animation the menu or tooltip will use when it’s opened. Choose Shift Away, Shift Toward, Perspective, Fade, or Scale. These give the mega menus an elegant look and feel when they’re opening and closing.

Mega Pro Triggers

Enter the CSS selector trigger into the field. It also shows the Mega Pro Unique Class that you’d enter into the CSS Class fields to display the layouts.

Mega Pro Display Settings

The settings include a lot of options. Choose the display direction, add top and bottom margin, choose the width, enter the maximum height, choose the CSS position from absolute or fixed, and enable an arrow.

If you enable the arrow, you’ll see some styling tools to choose the type, color, width, and height. It shows a preview, so you’ll know how it looks on the front end.

Custom Close Button Customizations

The close button customizations allow you to enable the close button on desktops and phones independently.

If you choose to customize the close button, you’ll see another set of options to adjust the colors, font size, border radius, and padding. It also includes a preview so you can see how it will look on the front end.

Mega Pro Additional Settings

The additional settings allow you to disable the menu on phones, tablets, and desktops individually. Chose the trigger type between hover and click, the exit type between hover and click, and enter the exit delay in the field.

Mega Pro Background

This one is placed under the editor. It has a color picker where you can specify the background color of the menu.

Divi Mega Pro List

This shows the list of Divi Mega Pro items that you’ve created. Each one includes the Unique Mega Pro Class. This is what you’ll copy to paste where you want the mega menu or tooltip to display. You’ll need to create and copy each menu item individually to build your mega menu.

Adding the Mega Menu

To add the mega menu to your WordPress header and footer menus, you’ll need to have CSS Classes enabled. First, go to Appearance > Menus in the WordPress dashboard. Select Screen Options in the upper right corner of the screen and make sure CSS Classes is checked.

Next, open the menu item that you want to display the mega menu item. Paste the Unique Mega Pro Class for the mega menu into the CSS Classes field.

Repeat this process for every mega menu item you want to display.

Here’s a look at this mega menu on the front end. I’ve used one of the demos that’s included, as we’ll see later.

Adding Tooltips

You can also use Divi Mega Pro to create mega tooltips. Simply add the CSS class to the element you want to show the tooltip. You can set the tooltip to open on hover or click. Any Divi Module can show a tooltip. Style the module as normal with the Divi tools.

To add the tooltip, open the Divi Module you want to show the tooltip. Go to the Advanced tab and paste the Unique Mega Pro Class into the CSS Class field. Save your settings and you’re ready to display tooltips.

Now when someone hovers over the element you’ve added the class to, the tooltip appears.

The tooltips also work to create mega menus for headers in the Divi Theme Builder. Create the menu items with Divi Modules such as Text Modules, Button Modules, Image Modules, etc. I only recommend using Menu Modules to display standard menus as each link will either open a submenu or the page the menu points to.

Add the Unique Mega Pro Class to the CSS Class field in each element you want to have a mega menu item. You can use this method to create custom headers and footers. In the example below, I’ve created a menu using standard Text Modules as the menu links. I’ll add a mega menu layout to each one.

The menu items will work as a normal menu and display the mega menu items on hover or click, depending on your settings. In the example below, I’ve hovered over the first menu link and the mega menu for that Text Module has opened.

Divi Mega Pro Templates

Divi Mega Pro includes 15 templates to get you started. They’re provided as JSON files. Upload them to your Divi Mega Pro editor and use them to create your Divi Mega Pro layouts. They include eCommerce banners, tabs, CTA’s, contact information, a login form, blog posts, and lots more. The layouts are well-designed and work great with any style of the website.

The templates are fully customizable, so you can adjust them to include your branded fonts and colors. This is template number 9, which creates eCommerce menus for featured brands. This shows the wireframe view within the back-end editor. You can also view the layouts on the front end. Mine displayed the layout with the sidebar by default, although I’m sure that can easily be disabled to show the layout in full width.

Here’s how it would look on the front end. This is the back-end editor showing the desktop view.

Where to Purchase Divi Mega Pro

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

Ending Thoughts

That’s our look at Divi Mega Pro. I found creating and using the mega menus to be intuitive. Since it uses any Divi Builder module, creating the menus and tooltips works the same as building any Divi layout. The extra features, such as animations, buttons, etc., provide even more control over the design and specify how the menus and tooltips work. It works well with pages, posts, WooCommerce products, and more. The added templates are a great way to get started. If you’re interested in creating mega menus and tooltips for your Divi websites, Divi Mega Pro is worth a look.

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

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

The Divi Shop Builder adds 14 new modules to the Divi Builder that allow you to customize the design of default WooCommerce pages with Divi. The plugin also comes with some premade shop layouts to give you a jump start on customizing your site. If you run an online store using WooCommerce and want to be able to customize WooCommerce just like you would any other Divi Module, this could be a great plugin for you! In this plugin highlight, we’ll take a close look at the features that come with Divi Shop Builder to give you an idea of what you can accomplish with this plugin.

Let’s get started!

Installing Divi Shop Builder

Divi Shop Builder can be installed 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 Shop Builder

To add the Divi Shop Builder modules to your website open a page with the Divi Builder. Add a new section and row, then click the grey plus button to add a new module. You will see 14 new modules added to the insert module section, which you will use to build the shop. Let’s take a look at each module below.

Woo Shop + Module

Start by adding the Woo Shop + module to your shop page.

Here is how the shop module looks when it is first loaded.

Content Tab

Let’s take a look at the Woo Shop + module settings.

Products

The first section under the content tab is where you can choose and reorder the components displayed in the shop module. You can add a component by clicking the Add New Item button below.

There are 11 components to select from: Sale Badge, New Badge, Featured Image, Title, Ratings, Price, Add to Cart Quantity, Add to Cart, Categories, Stock, and Description. These options give you total control over what elements to display in the shop module, what order they are placed in, and more. When we get into the design settings, you’ll see how easy it is to completely customize the design of each of these components as well.

Here I’ve reordered the product components so that the new badge appears below the featured image.

Next in the next part, you can find the product view type setting. This allows you to change the type and order of products displayed in the module. You can select from Default (Menu ordering + name), Latest Products, Featured Products, Sale Products, Best Selling Products, Top Rated Products, and Product Category.

Below this, you can modify the number of products displayed in the module and change the order of products.

Here I modified the product description length to 10. You can also enable or disable Ajax, enable filtering with the Woo Products Filters module, change the layout, and change the number of product columns. This is the list view using the Grid/List View Switch layout, which adds a button to the top where you can switch between grid and list view.

The description content setting allows you to display a short description or a custom description. Following this, you can choose to display the product count results, product sorting, and pagination either above, below, above and below, or hide them entirely. You can also enable or disable sale flashes.

You can change the position of the new badge with the badge position settings. The default option is don’t overlay on product image, which adds a banner that spans the width of the featured image. Alternatively, you can select an overlay position (top left, top right, bottom left, bottom right) which adds a small badge over the image. You can also change the text for the new badge. Following this are the exact same settings for the sale badge.

Last in this section are some display options. You can choose to display the add to cart button, the add to cart quantity field, change the default add to cart quantity, the product image, prices, ratings, categories, stock, and new badge.

No Products Found

Here you can change the heading and message text for the No Products Found page.

Default Content Tab Settings

The Woo Shop + module also features the default content tab settings such as Link, Background, and Admin Label.

Design Tab

The design tab is where you can fully customize every aspect of the Woo Shop + module.

Overlay

First up, overlay settings. This is where you can customize the overlay that appears over the featured image on hover. In this example, I added a dark overlay and a white icon.

Image

With the image settings, you can change the padding and margin, add rounded corners, customize the border, and modify the image with any of the filter settings such as hue, saturation, brightness, and more.

Star Rating

Here you can customize the design of the star rating. You can change the non-active and active star rating color as well as the alignment, size, and spacing.

New Badge

Next is the new badge settings. You can customize the padding and margin, set how many days the new tab stays, and completely customize the design with all of the background, font, and border options.

Button

The button settings group has all of the default button customization options such as background, font, border, icon, and box shadow settings. Here I customized the text color, background, font, and border radius.

Quantity Field

With the quantity field options you can change the background color, text color, focus background color, focus text color, spacing, font, border, and shadow. I modified the spacing options to add space between the quantity field and the button. I also changed the font and border radius.

Product Container

Here you can change the design of the product container, which surrounds each individual product listed. You can change the padding, margin, background, rounded corners, border, and shadow. I added a gray background to the section and changed the grid columns to 3, then added a white background to the product container. I also added rounded corners and a shadow to achieve this design.

Product Description

This is where you can customize the product description text. It includes settings for the description padding and margin as well as all of the default font options.

Sorting Dropdown

Next, in this section you can customize the design of the sorting dropdown for the shop module. You can change the background color, text color, focus background and text color, set the dropdown margin and padding, modify the font options, and customize the border. For this example, I kept it simple by changing the font and adding a gray border.

Results Count

The results count options allow you to customize the font settings for this text. Here I changed the font.

Pagination

You can customize the design of the pagination here. There are options for the current page text color, current page text background, pagination color background, pagination text color, pagination font, and pagination border. In this example, I modified the current page text color, pagination text color, pagination font, pagination text size, and pagination wrapper rounded corners.

View Cart Button

The view cart button appears once a user adds a product to their cart. I enabled custom styles for the button and changed the text size, color, button background, border radius, font, icon, margin, and padding.

Grid/List View Button

The grid/list view button options allow you to change the icons, modify the icon and background colors, adjust the padding and margin, and customize the border and box shadow. I left the options default for this example.

No Products Found

In this settings group you can change the text and heading font, the spacing, the border, and the colors for the no products found message. I modified the text and heading font and added some bottom padding to the section.

Text

Here you can change the text alignment and add a text shadow.

Title Text

Next is the title text settings, where you can customize the product title font. For this example, I changed the font and the text size.

Price Text

All of the font options are available for the price text as well. Again, I changed the font and the text size for the price.

Old Price Text

The old price text appears with a strikethrough effect whenever a product is on sale. You can customize the font options here. I changed the font and increased the text size to match the regular price font.

Category Text

For the category text, I used the font options to change the font and text color.

In Stock Text

You can customize the in stock text with all of the font options as well. I changed the font and text color.

Out of Stock Text

Next is the out of stock text. I kept it simple and changed the font for this example.

Available On Backorder Text

Here I changed the available on backorder font and changed the text color to orange.

Sale Badge Text

Here you can customize the design of the sale badge. I changed the font and the background color.

Sale Price Text

Finally, I adjusted the font for the sale price text with the font options available.

Default Design Tab Settings

That’s it for the new settings added to the design tab. The module also comes with several of the default design tab options such as sizing, spacing, border, box shadow, filters, transform, and animation. You can use these design options to further enhance your Woo Shop + module.

Advanced Tab

The advanced tab is fairly standard and comes with all of the sections you would expect to find in order to customize your module with CSS and more. Under the Custom CSS section, you can add CSS to individually customize aspects of the shop module, such as product, onsale, new badge, image, and more.

Woo Products Filter Module

Now that we’ve taken a close look at the shop module, let’s take a look at the Woo Products Filter module. This module adds a filter to your page that you can use to modify your shop results. Click the grey plus button to insert a module and select the Woo Products Filters module.

Once you add the module, you may see this error message about enabling filtering.

Open your Woo Shop + module and select the option to enable filtering with the Woo Products Filters module. This will help connect the filter module and the shop module so that the shop items will change depending on the filters you select.

Content Tab

Under the content tab, you can add a new item to your filter module.

Once you add a new item it will open up in an individual settings window where you can select the type of filter and customize many aspects of the filter. There are individual design options for each filter which you can use to individually style the look of the filter. Each of these options are also available in the filter module design tab, where you can customize the overall design of each filter type.

There are 8 types of filters you can add: Category, Tag, Attribute, Search, Rating, Price, Stock Status, and Sale. Here I added a column to the row so that the filter can be placed to the side of the shop module.

Under the filter settings for the individual filter, you can select the filter type, choose to display or hide the filter title, and add custom filter title text.

Category Filter

The advanced filter settings for the individual filter change depending on the type of filter you have selected. For the category filter, you can choose to show parent categories only, parent categories and subcategories non-hierarchical, or parent categories and subcategories hierarchical. You can also change how the filter is displayed: checkboxes list, radio buttons list, dropdown single select, dropdown multi select, or tag cloud. For this example, I selected the dropdown multi select. Also in this section, you can enable or disable display as toggle, choose to show or hide the number of products, and change the “please select” text.

Tag Filter

For the tag filter, I am enabling the tag cloud display and disabling the toggle display.

Search Filter

Here are the search filter settings. Once again I’ve disabled the toggle view.

Rating Filter

The rating filter has several display options: single line stars (selected rating and up), single line stars (only selected rating), radio buttons stars, radio buttons text, checkboxes stars, checkboxes text, dropdown stars, dropdown text. I have selected the single line stars (selected rating and up) option.

Price Filter

Next is the price filter. You can choose between a from-to slider, a from-to number input, or a from-to slider and number input. For this example I selected the from-to slider and adjusted the maximum amount.

Stock Filter

You can display the stock filter as a checkbox list, a radio button list, a dropdown single select, a dropdown multi select, or a tag cloud. I selected the radio buttons list for this filter and selected to display the number of products.

Sale Filter

The sale filter options are pretty simple – you can enable or disable the toggle display and change the on sale text.

Attribute Filter

Finally, we have the attribute filter. I’ve chosen to use colors for the attribute example, and I have selected the checkboxes list display option.

Content Tab Filters Settings

Back in the content tab of the filter module settings, there are some additional options listed under the filters settings group.

First, you can select to display selected filters at the top or bottom, or hide them entirely. I chose to display them at the top. You can also choose to display or hide the selected filters title and change the title text.

Also in this section are options for the apply filters and clear filters buttons. You can choose to display them before or after the filters, or not at all. You can also change the button text. I chose to display both buttons after the filters.

The content tab also has a section for background settings and admin label settings.

Design Tab

The design tab for the filter module has an extensive amount of design options for you to completely customize the filter designs. You can customize the font, spacing, border, and background for each of the filter types. You can also customize the buttons, selected filters, sizing, spacing, border, box shadow, filters, transform, and animation options. We won’t go into much detail here, but just know that you can modify just about any aspect of the filter module to your liking.

For this example, I modified the font, added rounded corners to the selected filters, decreased the bottom margin between filters, added a border to the dropdown filter, changed the color of the active tag, price filter, stock status, and checkmarks to match the color scheme, customized the button design, and added a rounded corner and box shadow to the filter module. Here is the final design with the filter module and shop module.

Cart List Module

Now let’s move over to the cart page. First, the cart list module. This module will display the contents of your cart.

Content Tab

Within the module settings, you can change the content that is displayed. You can choose to show or hide certain columns such as the remove product column, the product column, the thumbnail, the product name, the price, the quantity, the subtotal, and the coupon code.

You can also rename any of the columns with custom text.

Additionally, you can customize the empty cart text, button text, and button URL.

The content tab also features the default background and admin label settings.

Design Tab

Here you can completely customize the design of the cart module. Every aspect of the cart module can be changed, including the buttons, the text, the table, and more.

I’ve customized the design by adding a white background and rounded corners, changing the font, increasing the image thumbnail size, and customizing the buttons.

Cart Totals Module

The cart totals module should also be added to the cart page. It will display the subtotal and total for the cart items and has a button to proceed to checkout.

Content Tab

Within the module settings, you can change the text such as the title, subtotal text, total text, and proceed to checkout button text. You can also add a background and change the admin label.

Design Tab

With the design settings, you can customize every aspect of the cart totals module. For this example, I added a background, a box shadow, and rounded corners to the module. I changed the font to match the rest of the design, and also customized the proceed to checkout button.

WooCommerce Notices Module

The WooCommerce Notices module can also be placed on the cart page. This module will display any error messages or notices that may come up. I’m adding it to the top of the cart page, above the cart list module.

Content Tab

Under the content tab you can enable test mode, which will display all of the notices on the front end while you test the design. Here is what the three different notices look like by default.

Design Tab

Here you can modify the design of the notices. I changed the background colors to correspond with the type of notice, and changed the styling to match the rest of the design.

Checkout Billing Module

Moving on to the checkout page, first up is the billing module. This is where you can collect billing details to complete the transaction.

Content Tab

Under the content tab, you can change the billing title text as well as any of the field labels. You can also add a link or background and change the admin label. Here I added a background color to the layout.

Design Tab

The design tab has options to customize everything from the heading and labels to the fields and borders. For this example, I kept the design in alignment with the other modules and added a rounded border and a box shadow, changed the spacing, and modified the font.

Checkout Coupon Module

Next, we can add the checkout coupon module to the checkout page.

Content Tab

In the content tab, you can choose to show the coupon section via toggle or to have it always displayed. I chose to have it displayed. Here you can also change the text for any of the coupon module elements.

Design Tab

Here is the designed coupon module. I added a background, box shadow, and rounded corners. I also changed the font and customized the button.

Checkout Order Module

Now let’s move on to the checkout order module. This is another module for the checkout page and it displays the customer’s order information such as the selected products, the subtotal, shipping, the total cost, payment options, and a privacy policy checkbox.

Content Tab

In the content tab you can change the heading text and the place order button text. You can also choose to show or hide the privacy policy and terms and conditions. Of course, you can also add a background and change the admin label here as well.

Design Tab

Just like the other modules, the checkout order module can also be completely customized. Here I changed the font, added a background and rounded corners, and customized the button.

Checkout Shipping Module

The last module for the checkout page is the checkout shipping module.

Content Tab

In the content tab, you can change the title text, choose to have the title toggle, and show or hide order notes. You can also change any of the field labels.

Design Tab

Here is the customized design. Again, I added a background, rounded borders, a box shadow, and changed the font.

And here is the full design for the checkout page.

Account Content Module

Divi shop builder also comes with some modules to customize the account page. Let’s take a look at the account content module first. There are different elements you can add to the page and you can rearrange them however you would like. These elements include dashboard, orders, subscriptions, downloads, addresses, account details, login, register, and lost password sections. Each element has its own settings page where you can customize the individual element’s design. The account content module also has design options where you can customize the overall design.

Here is the styled default dashboard view, along with the notice messages at the top.

This is the styled orders page, where customers can see all of their completed and pending orders.

This is an example of a downloads page.

As you can see, this plugin gives you total control over the design of the account page as well. Let’s take a look at a couple more modules that work with the account page.

Account Navigation Module

This module adds a navigation menu to the page so that users can view the different pages in their account. Just like the account content module, you can add and remove any of the pages from the menu and change their order. Here is the styled navigation module.

Account User Image Module

The account user image module adds the user’s profile image to the page. Here it is in action.

Account User Name Module

Similarly, the account user name module adds the user’s username to the page. You can alternatively select to display the first name, last name, full name, or display name.

Here is the full account interface on the front end. This is the account details page.

Thank You Module

The final module we’ll cover is the thank you module. This will appear after an order has been completed. You can change any of the labels using the content tab settings, and of course the entire module can be customized with its design settings. Here is the styled thank you page.

Divi Shop Builder Layouts

Divi Shop Builder also comes with several premade shop layouts that you can use to jump-start the design process. Let’s take a look at a couple of the designs.

Woo Shop + Module Demo 1

This is one of the shop demo layouts. It has a card-style design and features a green border that appears on hover.

Coffee Cart and Checkout Layouts

The coffee layout comes with a cart layout and a checkout layout. Here is the cart layout.

And here is the checkout layout.

Woo Shop + Food Layout

This is another shop module layout with a creative “sweet or salty” split layout. This layout features a round product image with a colored border.

Purchase Divi Shop Builder

Divi Shop Builder is available in the Divi Marketplace. It costs $109 for unlimited website usage and 1 year of support and updates. The price also includes a 30-day money-back guarantee.

Final Thoughts

That was our look at Divi Shop Builder. As you can see, this plugin is jam-packed with modules and design options that give you complete control over the design of your shop, cart, checkout, account, and thank you pages. As comprehensive as this plugin is, it is also very easy to use and customize. The plugin author also has extensive documentation for the product, which is very helpful. If you are looking for a way to customize your WooCommerce shop with Divi, this is a great option. We would love to hear from you! Have you tried Divi Shop Builder? Let us know what you think about it in the comments!

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

The Stella Coaching & Online Course Child Theme is a child theme for Divi specifically designed for coaches and course creators. The theme features pages for a blog, course, quiz, and store, and also has several marketing pages for you to promote your services and lead magnets. Stella is clean, elegant, and thoughtfully designed to help you convert more customers. In this post, we’ll take a look at the Stella Coaching & Online Course Child Theme to help you decide if it’s the right Divi child theme for you.

Let’s get started!

Installing Stella Coaching & Online Course Child Theme

First, open your WordPress dashboard and navigate to the add plugins page. We will install the child theme through the plugin page, not the theme page. Click Upload Plugin, then select the plugin .ZIP file from your computer. Then click Install Now and activate the plugin once it finishes installing.

Once activated, you will see the Stella Installer in your WordPress menu bar. From this page, you can import all of the child theme content, site structure, settings, plugins, custom CSS, and more, just with one button. Click Begin Site Import to start the import process.

You will see a progress bar as the child theme is installed.

Once your import is complete, you can delete the plugin.

Stella Coaching & Online Course Child Theme Pages

Stella comes with 25 pages, including WooCommerce shop pages, course pages, blog pages, and a quiz for capturing leads. Let’s take a look at each of the pages, starting with the home page.

Stella Coaching & Online Course Child Theme Pages

Header and Introduction

The first section on the home page is a large header image and introduction text. The header image is styled with a rounded corner, and the text is styled with different sizes and some icons to create a compelling introduction to the site. This section also includes a call-to-action button.

Quiz

The next section on the home page introduces a quiz built with the free version of Interact. The layout features text with some bullet points, a large image to the right, and another image at the top that moves with the page. Additionally, the round text above the large image rotates while you are on the page.

Services

The services section of the home page is where you can feature two services you offer. You can add an image and a brief description of the service, and there is a button leading customers to the services page.

Testimonials

Next, the testimonials section has space for two quotes with a button leading to the testimonials page. This section uses elegant typography and a large parallax image.

Blog

The latest news section features three recent blog posts with the featured image, a short blurb from the post, and a button to read the full article.

Freebie

This section of the home page features a freebie offer and requires users to enter their name and email address to receive the freebie.

Call to Action

The final section of the home page features some call-to-action text with a button.

Stella Coaching & Online Course Child Theme About Page

The about page begins with a section for your about text. It also features a styled image to the right of the text. Underneath, there are three numbered sections where you can map out a timeline or journey that is relevant to your service or to who you are. This section is styled with three images, as well as a quote block.

This page also has a section for recent blog posts, as well as the two lead magnets that were featured on the home page – the quiz and the freebie with the email sign-up. The page ends with a call-to-action section to compel users to view the services page.

Stella Coaching & Online Course Child Theme Services Page

The services page starts with a brief introductory text where you can summarize your offerings. Then, there are two dedicated sections where you can go over the details of your services. Each section has areas for text, an image, bullet points, a testimonial quote, and a button to apply for the service.

Below, there is a section to invite visitors to join a community Facebook group. This section also features an image, a testimonial quote, and a call-to-action button. Finally, the page features the freebie lead magnet that was on the home page.

Stella Coaching & Online Course Child Theme FAQ Page

The FAQ page is formatted with a brief introduction and a large image at the top. Each of the FAQs is placed in a dropdown accordion. When the question is selected, the question is revealed in the dropdown accordion. Below the FAQ section is a short contact form for visitors to submit any questions you might not have addressed on the FAQ page. The last section on this page is the invitation to join a community Facebook group.

Stella Coaching & Online Course Child Theme Raves (Testimonials) Page

The raves page features customer testimonials in styled block quotes alongside images. Below is a section highlighting customer success stories, with a brief introductory text and a testimonial video for each customer. This is a great way to show social proof in an engaging and compelling way. There is another testimonial quote section after this, on a large parallax image background. Once again, the page ends with an invitation to join a community Facebook group.

Stella Coaching & Online Course Child Theme Sales Page

The sales page starts with a large header image and some short text where you can introduce your service, with round rotating text over the image. In the next section, you can highlight a problem your customer has that your services solve. This section also has two blurbs where you can highlight some problems your customer might relate to. In the following section, you can discuss how you solve the customer’s problem and how you can help. This section is designed with three blurbs with checkmarks next to them, a large image, and a call-to-action button.

The next section features a text area for a general overview of the service, a call-to-action button, and an image with the round rotating text over it. There is a testimonial blurb after this for social proof, and another section is where you can highlight additional details or features of your service.

This section has different forms of social proof to go alongside your service. First is an “as seen in” section with logos, then you have another testimonial section over a large image. The next section features customer success stories with some statistics, a large testimonial video, smaller testimonial quotes with customer images, and a call-to-action button.

This section features the service pricing, with three different pricing tiers and an image, details, and a call-to-action button for each tier. There is a FAQ section after this, with a similar design to the FAQ page we covered earlier. Then there is a section featuring a large video and another call-to-action button. There is another pricing section with the same layout as above but with different colors. The page ends with an about section with a large image, a call-to-action button to book a call, and a 30-day satisfaction guarantee.

Stella Coaching & Online Course Child Theme Email Sign-Up Page

The email sign-up page is where you can go into detail about your freebie and prompt users to sign up with their email. The page starts with a brief introduction of the product, with an image and rotating round text above. Next is the email sign-up form, styled with some text at the top and an image to the right. In the following section, you can give some additional details about what your visitors will receive when they sign up with their email. Then there are some customer testimonials alongside images for social proof. Finally, there is another email sign-up form.

Stella Coaching & Online Course Child Theme Email Sign Up Thanks Page

This is where visitors will be redirected after signing up with their email. The page starts with some text letting them know their freebie is on the way and a video. Below are recent posts from the blog and an invitation to join the community Facebook group.

Stella Coaching & Online Course Child Theme Lead Magnet Delivery Page

This page is where users receive the freebie they signed up for. The page includes some introductory text and a video, some bullet points encouraging users to get the most out of their freebie, text explaining the next steps, and customer testimonials. This page also ends with an invitation to join the community Facebook group.

Stella Coaching & Online Course Child Theme Quiz Page

This page features an interactive quiz made with Interact. This is a great idea to engage your website visitors. The page is styled with an image and rotating round text.

Stella Coaching & Online Course Child Theme Quiz Results Page

The quiz results page is specific to the quiz outcome and explains the results in depth. The layout begins with some short introductory text next to an image. Then there is some explanatory text with a video and some action steps for that result. The page ends with a prompt to sign up for the email freebie.

Stella Coaching & Online Course Child Theme Contact Thanks Page

The contact thanks page is where users will be redirected after submitting a contact form. This page features a short text section, contact information, a video, recent blog posts, the freebie sign-up form, and an invitation to join the community Facebook group.

Stella Coaching & Online Course Child Theme Store Page

The store in Stella is built with WooCommerce. The store page layout is pretty straightforward, with introductory text and an image at the top, and the products below. The product images are featured as well as the product title and price, and there are category filters at the top. On the right, there is space to promote a blog post.

Stella Coaching & Online Course Child Theme Product Page

The product page features breadcrumbs at the top, along with the product title and price. The product image is on the left and you can hover to zoom in. On the right is the description text and the add to cart button. Below you can see the description in one tab and reviews in the other. The page ends with recent posts from the blog.

Stella Coaching & Online Course Child Theme Cart Page

The cart page is very simple and has a pink header with a cart icon with the cart content below.

Stella Coaching & Online Course Child Theme My Account Page

The “my account” page allows users to log in to your website and manage recent orders, shipping and billing addresses, and password and account details. The page also has a contact form and an invitation to join the community Facebook group.

Stella Coaching & Online Course Child Theme Course Layout Page

Stella uses LifterLMS for the course pages. The course layout page introduces the course and the course instructor. It also lists the course cost, a button to enroll, and the table of contents for the course. On the right sidebar, you can also see a table of contents for the course and navigate to each section.

Stella Coaching & Online Course Child Theme Lesson Layout Page

The page features a large video with some text underneath and a button to mark the section complete. Below, you have a button to go back to the course or to move to the next lesson. On the right is a short text section introducing the instructor and an overview of the course. You can click on the links in the overview to move to the next section. Finally, there is a progress bar at the bottom.

Stella Coaching & Online Course Child Theme Dashboard Page

The dashboard page allows course members to sign in and view their enrolled courses, grades, certificates, achievements, notifications, and order history. You can also edit account information and redeem a voucher from this page. There is a contact form below this section and an invitation to join the community Facebook group.

Stella Coaching & Online Course Child Theme Blog Landing Page

The blog landing page includes some welcome text and an image, a search bar, and blog categories. It also features trending posts and then lists recent posts with a large featured image, a couple of lines of text from the post, the category, and a button to read more.

Stella Coaching & Online Course Child Theme Blog Archive Page

The blog archive page features an image and a search bar at the top with links to the different blog categories. Below the recent posts are listed, with a large featured image, title and category, a couple of lines of preview text, and a button to read more. The page ends with a freebie sign-up form.

Stella Coaching & Online Course Child Theme Single Post Page

The single post page features the title and category at the top and then the large featured image with the blog content below. There are links to navigate to the previous and the next post, and a comment section below. On the right side, there is an image and author introduction as well as social media icons and a grid of four recent images from Instagram. Finally, there is a search bar and links to some recent posts. The page ends with a freebie sign-up form.

Stella Coaching & Online Course Child Theme Contact Page

The contact page features some introduction text and contact information alongside a large image. Below is a simple contact form. The page ends with an invitation to sign up for a freebie and join the community Facebook group.

Stella Coaching & Online Course Child Theme Header

The header is simple but elegant and features a logo on the left and menu items to the right. The secondary menu bar features a call-to-action with a button to sign up for the freebie.

Stella Coaching & Online Course Child Theme Footer

The footer features the logo and some brief text as well as social media icons. There is a menu with some quick links, and on the right is a grid with recent Instagram images. At the very bottom of the page is a secondary footer bar with a quick links menu.

Where to Purchase the Stella Coaching & Online Course Child Theme

Stella Coaching & Online Course Child Theme is available from the Divi Marketplace. It costs $165 for unlimited website usage and one year of support and updates.

Final Thoughts

The Stella Coaching & Online Course Child Theme may be an excellent option for your website if you are an online coach or course creator. The child theme is preformatted with every page you would need, and features beautiful typography, colors, and call-to-actions to help you convert your visitors into customers. I like how a lot of the placeholder text throughout the child theme tells you what sort of content to place there, making it easy to replace the content and make the website your own while still keeping your content cohesive with the design of the pages.

We would love to hear from you! Have you tried Stella Coaching & Online Course Child Theme? Let us know what you think about it in the comments!

The post Stella Coaching & Online Course Child Theme – Divi Child Theme Overview appeared first on Elegant Themes Blog.

The Empire Child Theme is a Woocommerce-based eCommerce website theme for online stores. It uses Divi as its main theme. The design is clean and modern with beautiful typography and impactful images. The child theme comes with 10+ pages and 3 dark mode pages. In this post, we’ll take a look at the Empire Divi child theme to help you decide if it’s the right Divi child theme for you.

Let’s get started!

Installing Empire Divi Child Theme

Installing the Empire Divi Child Theme is simple and straightforward. First, upload the theme to your WordPress website, then activate the theme.

Once the theme is activated, you will see a new tab in your WordPress dashboard called “Empire Demo Content Importer”. Select the Easy Demo Import tab and start the import. This will automatically import the layouts to your website and install the recommended plugins.

Empire Divi Child Theme Pages

Empire comes with 10+ layouts and 3 dark mode layouts. We’ll go through each page and discuss the designs.

Empire Divi Child Theme Homepage

Let’s take a look at the Empire Divi child theme homepage layout. The homepage includes a header, CTA sections, videos, images, number counters, and much more. Throughout the page, there are loading animations, hover effects, and parallax image effects to achieve an eye-catching, engaging website design. Let’s take a look at each section on the home page.

Hero

The hero section is the first component on the home page. It features some text and a button. The logo and menu are at the top of this section, and the menu is sticky at the top as you scroll down the page.

CTA Section

This call to action section has a title and some text content below. It also has a button to prompt users to action.

Services

This section features text on the left side and an image on the right. The text on the left is formatted to fit the theme so all you need to do is replace it with your own content. There is a quote section to highlight some text as well. This section also has two buttons.

Video

The video section has a purple overlay when you hover over it, highlighting the video in a unique way. There is an image background to this section as well.

CTA Section

Another call to action here, with some stylized text on an image background and a button below.

Features

The features section has two versions: a light and a dark version. These sections can be used to show off your services or offerings, and highlight what makes your business unique. Below this section, there are four number counter modules that count as you scroll to the section.

CTA with Video Background

This section is a call to action with a video background and a dark overlay. It is an eye-catching design to draw your website visitor’s attention.

Image Layout

The next section is a simple grid image layout with some text and a button in the top left corner.

Text and Video

In this section, there is some featured text with a repeating background video below.

Image Hover Reveal

This is one of the more unique sections in the Empire Divi child theme. There are many images in a grid layout. When you hover over any of the images, text appears with an animation delay with an overlay background.

Video Layouts

Here are three more video section layouts. The first section has a full-width video preview. When you hover over the video, there is a purple overlay.

The second video section includes some text on the left side as well as a button. When you hover over the video, there is a purple overlay.

The third video section is on an image background with a dark overlay and has space for some text below. Like the others, this one also has a purple overlay on hover.

Testimonials

There are two designs for a testimonial section, one light and one dark. Both are testimonial sliders so that you can showcase multiple testimonials.

This is another simple text and image section with a fullwidth parallax image above. There is also a button below the text in this section.

CTA Section

Here is another CTA section. It features two images, one of them with a purple overlay and some text, and a button.

Blurbs

This section features a large image and six blurbs with an icon and some text. You can use this section to highlight some of your features or offerings.

CTA Section

Another CTA section, featuring a heading and a button. The background image has a parallax effect.

Video and Text

Here you have a background video that plays automatically as well as some text.

Image and Text

Here are some more layouts with text, images, and buttons. The section below has an image background with an overlay.

Store

The store layout section includes a section for some featured products with a button to go to the store. There are images that link to product categories, as well as some more featured products below. Finally, there is a section to display customer reviews.

Blog

The blog section has some recent posts displayed with a link to view the full blog. Each post also has a featured image.

Empire Divi Child Theme Home Page Variations

Empire comes with a couple of homepage variations. There is a dark mode, which has darker backgrounds for most of the sections.

There is also a homepage variation with a video header. The rest of the content on this page is variations of the layouts we covered above.

The other homepage variation features a split header with a transparent overlay on the right side with the header text and a button. Like the other variation, the rest of the layouts on this page are variations of the layouts already covered.

Empire Divi Child Theme Interior Page

The interior page is one of the premade layouts that comes with the Empire Divi child theme. It features a header with an image background, a section for text with some buttons, a couple of CTA sections, a testimonial section, and some images which are used as buttons to guide the user to another page.

Empire Divi Child Theme Services Page

The services page is set up so that you can highlight your service offerings with little blurbs.

The page includes some text, a services display with icons, CTAs, and a pricing table.

The services page also has a dark mode variation, pictured above.

Empire Divi Child Theme Team Page

The team page features large images for all of your team members. For each team member, their name and title are listed and there is space for a short bio. Below, their email address and social media links are listed.

Also on this page is a section to highlight any open roles you might have.

Empire Divi Child Theme Contact Page

The contact page is fairly simple, with a short blurb of text and a contact form, as well as information for help and support and the address.

There is a dark mode version of the contact page as well.

Empire Divi Child Theme Blog Page

The blog page for this theme is very simple, with a large image showcasing the featured image, and the post title, date, and excerpt below.

Empire Divi Child Theme Blog Post

The blog post page is also a simple design, with the featured image set at the very top with the menu bar as well as the title, author, and date listed over the image.

Empire Divi Child Theme Shop

Empire is an eCommerce-focused theme that uses WooCommerce. The shop page features an image header, some featured products, a link to open a shop category, and reviews.

Empire Divi Child Theme Product Page

The product page has an image header with the product title and subtitle. Then you have your product, with photos on the left-hand side. On hover, you can zoom in to see the product photos up close. On the right side is the product information including the product name, price, description, size, color, and a button to add to the cart.

Below this section, there are some modules where you can display additional photos, descriptions, information about the measurements and materials, features, and reviews. At the bottom of the page, you can find related products.

When you add a product to your cart, the shopping cart sidebar appears where you can see the products in your cart, see your total cost, and choose to open the cart, go to checkout, or continue shopping. While this window is open, the rest of the website is faded with a black overlay.

Empire Divi Child Theme Cart Page

The cart page is fairly standard and lists the content of the cart, a place to enter a coupon code, the cart total, and a button to proceed to checkout. Contact information is listed on the right side.

Empire Divi Child Theme Header

The header for the Empire Divi child theme is built with the WordPress menu customizer. The menu consists of a logo on the left, menu items with some drop-down options, and a call to action button on the right.

Empire Divi Child Theme Footer

The footer for the Empire Divi child theme is built with the Divi Theme Builder.

The footer consists of a logo and a text area for a short description. It also includes a section for social media icons, copyright information, and links to legal pages. In the middle, there is a menu section, and on the right, there is the contact information and a call-to-action button.

Empire Divi Child Theme Video Tutorials

The Empire Divi child theme also comes with a page of 13 video tutorials. This is a very helpful resource so that you can learn how to further customize the child theme.

Where to Purchase the Empire Divi Child Theme

The Empire Divi child theme is available in the Divi Marketplace for $59. It includes unlimited website usage and one year of support and updates.

Final Thoughts

The Empire Divi Child Theme is a great child theme to use if you need an eCommerce website with lots of content layout options for you to use. It has a simple but elegant design and uses different motion effects throughout the site to draw your attention and highlight content on the page. The installation is quick and easy, so the only setup required is to replace the content with your own and set up your WooCommerce shop. Overall, I would recommend this theme for anyone who wants to set up an eCommerce website with Divi without having to design the website from scratch.

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

The post EMPIRE – Divi Child Theme Overview appeared first on Elegant Themes Blog.

Homepage 25 Divi Layout Pack is a layout pack with 25 different homepage layouts that work with the Divi builder. The layout packs are built with different types of businesses in mind, but all layout packs can be completely customized and are flexible enough to fit whatever type of site you need to design. In this post, we’ll take a look at all of the layouts that come with this layout pack to help you decide if this is the right product for you.

Let’s get started!

Installing Homepage 25 Divi Layout Pack

Homepage 25 Divi Layout Pack comes as a ZIP file containing Divi Builder .json files. To install the slider layouts, start by unzipping the file. Then, open your page in the Divi Builder.

Click the portability option at the bottom of the page and select the import tab. Select the .json file for your desired homepage 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 you’re done!

Homepage 25 Divi Layout Pack

Let’s take a look at each of the 25 layouts you get with the Homepage 25 Divi Layout Pack.

Architect Layout

The architect layout starts with a large header image with text, followed by an about us section with links to read more and an informational video. Next is a list of services and a list of projects, which both feature some hover effects. There is a why choose us section with skill bars, and then a list of logos. The footer for the page is kept simple, with address, phone, email, and social media information listed. The page also uses lots of slide-in effects for the content on the page.

Auto Repair Layout

The auto repair layout has a large header image with a white border and text alongside a CTA button. The about us section features some round images and some text next to checkmarks that have a subtle hover effect. Next is the services section. Each service has an image and title, and there is a hover effect for each card in this section. Next under the “our works section” is a gallery with images you can click on to view full-screen. Finally is the contact section with address, phone, and email information as well as a footer bar with some links and copyright information.

Beauty Salon Layout

The beauty salon layout features an elegant layout with lots of loading animations. The page begins with a large header with a CTA with the address, email, and phone information listed conveniently below. Following this is the services section, with some introductory text and a list of services over images that have a hover darken effect. There is a button to view pricing information and a 25% off offer with a button to view. Below this, there are two customer reviews and a list of logos. Finally, there is a reservation form and the footer features social media links.

Business Layout 1

Business Layout 1 begins with a header section with some text, a phone number, and a contact form overlaying a large photo background. There is an about us section with text, a photo and icon, and a CTA button. Next, the services section features three services with a description, a photo, and a CTA. There is a pricing table and a why choose us section with icons and CTA buttons. The layout also features a gallery section and a FAQ section. The footer features contact information and opening hours over a large image.

Business Layout 2

Business Layout 2 has a header image with social media icons, text, a CTA button, and three blurb modules that concisely convey company information above the fold. The services section features three services with a photo, some text, and a CTA button. The about section has text and a CTA button on the left, with two photos on the right along with a number representing the years in business. There is a large gallery strip following this, as well as an FAQ section. The last section on the page is a contact form alongside contact information. This layout also features lots of loading animation throughout the design.

Business Layout 3

The third business layout has a large header image with some text, a CTA button, and some blurb icons on the right. The about us section below features some text, a customer testimonial, and a photo. The services section has a similar design to Business Layout 2. There is a gallery section following this, as well as customer reviews and FAQs. The footer features contact information and opening hours as well as a contact form.

Business Layout 4

Business Layout 4 has a simpler header with text and a blue banner below with text and a CTA button. The about section features text, an image, a CTA button, and a phone number. The services section displays each service with an image and a line of text. There is a why choose us section in this layout with blurb modules and a nice hover effect. Next is a pricing table and a gallery section, then some customer reviews. Finally, the last section features a contact form and social media icons.

Business Layout 5

The fifth business layout has a simple header image with some text and a CTA button. The about section has an image on the left with a button over it, and about text on the right. The services section features three services with an image, a button, and some text. There is a pricing table, a why choose us section with blurb modules, a gallery, and a FAQ section. Finally, the page ends with some contact information. The page features several hover effects and animations throughout.

Business Layout 6

Business Layout 6 begins with a large image header with text and a CTA button within a white border. The about section features some text, a CTA button, and two circular images. There are six cards listed in the services section, each with an image and some text. Following this is the gallery section, then customer reviews and FAQs. Finally, the contact information is listed at the bottom of the page.

Business Layout 7

The seventh business layout has a large header with a CTA button and three blurb modules with an icon and contact information as well as open hours. The about section has text, a customer review, and a circular image. The services section spans the width of the screen, with each box containing text and a CTA button for more information about each service. The why choose us section features some text and arrows with hover effects, a round image, a CTA button, and a phone number. Then there is a pricing table, a gallery section, and FAQs. Finally, the page ends with a contact form alongside some contact information.

Business Layout 8

This layout features a box over the large header image that contains some text and a CTA button. The about us section is simple as well, with a button over the large image and some text on the right. The services section features an icon over each image and has space for some text and a CTA button for each service. The pricing table features space for 4 different pricing plans and includes an icon for each plan as well as text and a CTA button. The why choose us section displays some blurb modules with large icons overlaying a background image. Finally, the page has a gallery section, a review section, an FAQ section, and ends with a contact form and social media links.

Business Layout 9

Business Layout 9 features a simple header with text and a CTA button. The about us page features some text, a button, and an image on the right side. Next, the services section lists some text, a CTA button, and an image with an overlaid icon. There is also a pricing table and a why choose us section with blurb modules in this layout, followed by a gallery section, customer reviews, and FAQs. Lastly, the page ends with contact information and opening hours.

Business Layout 10

Finally, the last business layout features a header image with the header text on a colored background. The about section has some text, a CTA button, and an image. The services section features three cards, one for each service, with text and a CTA button. The pricing table is the 4-tier pricing table we saw in Layout 8, followed by the why choose us section with blurb modules with icons. The layout also has a gallery section, customer reviews, and FAQs. And finally, the layout ends with some social media links and a contact form.

Dance Studio Layout

The dance studio layout features a pink and grey color palette and uses engaging photography throughout the layout. The header features an icon and heading text on a pink background over a darkened image. The about section features text, a CTA button, and an image. There are three boxes below with an icon that list three dance styles. The dance course section is a collage-style section with images and cards with course information and a CTA button on them. The dance classes section features two cards with two sets of class information listed. Finally, there is a client review slider and the page ends with a contact form and contact information.

Fashion Store Layout

The fashion store layout features a split-style header with text and a CTA button on the left side and an image on the right. Following this is a list of logos and large images that link to different shop pages. There are some logos and text below that represent different store services such as free shipping and customer support. Next is a recent products section that uses the Woo Products module that works with WooCommerce. There is another split image/text section promoting daily discounts with a CTA button, followed by testimonials and an email sign-up form to receive a discount.

Fitness Layout

This layout uses a black, white, and green color scheme with dark images. The header features a large background image, some text, a CTA button, and social media links. The about section features text, a CTA button, and two images with some hover effects. The services section highlights three services with images, a CTA link, and some text. There is a section with information about the trainers, with some text and a CTA alongside a large image, followed by some number counters representing information about the gym. Next is a section featuring membership benefits, with some text and a CTA button. There is a fitness services section utilizing blurb modules with a large icon and description text. Then is a section for membership plans, with another large image alongside text and a CTA. Finally, there are three testimonials and the page finishes with a newsletter subscription form and contact information.

Furniture Shop Layout

The furniture shop layout begins with a large image with header text and an arrow with a button to explore popular categories. Below is the categories section with large image cards linking to each category. There are some icons below this with shop feature such as free shipping and customer support. Following this is an introduction to a collection, with a large image and some description text. Next is the new products section, which uses the Woo Products module. Next is an image with some text advertising a discount, and then the discover more section with linked images to discounts and top-rated products. There is an email subscription form, and the page ends with blurb modules featuring contact information.

Gardener Layout

The gardener layout begins with a large image of flowers with social media icons, header text, and a CTA button. Overlaid are three blurb modules featuring three services. The about section features text and a CTA button on the left, with an icon and image on the right. Next is the why choose us section with arrows and text with a hover effect. The our works section features a gallery, and the page ends with a contact form and contact information listed.

Green Energy Layout

The green energy layout begins with a large header image with header text, three checkmarks next to some company qualities, and a CTA button. The about us section has some text and a CTA button next to an image with a hover effect. Next, there are three cards representing three types of green energy. The services section features three services, each with an image, an icon, description text, and a button. There is a why to go green section that has a large image and a box with some text and a button. Following this is a how we work section with some icons on the right and description text on the left. There are some number counters below this representing relevant data. After this is a testimonial section on a large image background, then a why choose us section with a skill graph. Finally, the footer has social media icons, links to some internal pages, and copyright text.

Gym Layout

The gym layout uses a black, blue, and white color scheme with lots of loading animations. The header is a large image with header text and a button, and there are two additional buttons at the bottom of the header. Next is the services section, with description text, a CTA button, and an image for each service. The our trainers section features an image with text on the right, along with a CTA button. Below is information about the gym, classes, and online workouts. Then there is a section with a large image that features the fitness services, followed by another section with text to describe membership plans. The why choose us section has a skill bar graph, customer testimonials, and four number counter modules. This is followed by an FAQ section and a contact section with a contact form and contact information.

Handyman Layout

This layout features a header with heading text, a CTA button, and blurb modules with contact information. The about us section features text, a round image, and a customer testimonial. The services are presented on colored backgrounds with text and a CTA button. Next is the why choose us section, with arrows and text, a CTA button, a phone number, and a round image. The our works section is a gallery section, followed by a contact form, contact information, and a footer bar.

Interior Designer Dark Layout

This is the dark version of the interior designer layout. The header features a large image with heading text and a CTA button. The about us section features an icon, text, and an image with a label over it. The our services section is laid over an image and also features an icon. The why choose us section displays some customer reviews, a CTA button, and an image. Following this is the our works section, which is a gallery module. The how we work section features three steps, each with a photo, description, and CTA button. Finally, there is contact information, a contact form, and a footer bar.

Interior Designer Light Layout

And this is the light version of the interior designer layout. The layout is the exact same as the dark version, but the primary background color is light.

Photography Layout

The photography layout uses a black and white color scheme and black and white filters on the photos. There is a large header image with text and social media icons, followed by some about text. There are four photos that represent and link to four different styles of photography and some additional text below this. The how we work section also has a large photo, text, and a CTA button. There is a featured works section with a CTA button and a gallery, and then the page ends with a contact form and contact information.

Travel Agency Layout

Our final layout is the travel agency layout. This layout features a large header image with headwear text and a CTA button. Overlaying the header is a newsletter subscription sign-up form. Following this is a list of icons, then some introduction text and three different cards with an image, text, and a button. Then there are three linked images that feature activities you could book, with some description text. The why choose us section has some text and then an image with a link and some more text. Next are some testimonial blurbs. Finally, the page ends with a button to a contact form and an image.

Purchase Homepage 25 Divi Layout Pack

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

Final Thoughts

Homepage 25 provides several beautiful home page layouts for your next design project. Each layout is unique and is styled for a specific industry, but every design can be totally customized to fit whatever you need. Keep in mind that these home page layouts only contain the one page and all contain CTA links to various sub-pages, which you will have to design yourself. Nonetheless, if you are looking to get a head start on your next design project with a home page template, this product will surely help you out.

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

The post Divi Plugin Highlight: Homepage 25 Divi Layout Pack appeared first on Elegant Themes Blog.

Slider Mega Pack is a Divi layout pack with 50 slider layouts for your next web design project. The sliders are all built with Divi modules and can be easily customized with your own content and styles. In this product highlight, we’ll take a look at the layouts Slider Mega Pack has to offer and help you decide if it’s the right product for you.

Let’s get started!

Installing Slider Mega Pack

Slider Mega Pack comes as a ZIP file containing Divi Builder .json files. To install the slider layouts, start by unzipping the file. Next, open your desired page in the Divi Builder.

Click the portability option at the bottom of the page and select the import tab. Select the .json file for your desired slider layout and then begin importing the layout. Once the layout has been imported, all you need to do is replace the text and images and you’ll have a beautiful slider on your page!

Slider Mega Pack Fullwidth Slider Layouts

Slider Mega Pack comes with 32 fullwidth slider layouts. The fullwidth slider layouts are ideal for showcasing large images alongside some text and can be a great way to capture your visitor’s attention. It’s also a great way to share information or showcase some features of your service. All of these sliders have different layouts and designs, so you are sure to find a slider that will work for you! Let’s take a look at each of the 32 fullwidth slider layouts.

Slider Mega Pack Layouts 1, 2

The first slider layout is a text slider and features a photo background with a dark overlay over the left side of the photo. The text and the button change on each slide.

The second slider layout is the same as the first layout, except the dark overlay and the text are on the right side.

Slider Mega Pack Layout 3

The third slider layout has a vignette effect on the image and features changing text and buttons in the middle. There are navigation dots at the bottom as well as previous and next buttons on each side.

Slider Mega Pack Layout 4

This slider features multiple images on a blurred background of the image, with navigation arrows on each side and navigation dots at the bottom.

Slider Mega Pack Layout 5

Slider layout 5 also features multiple images on a blurred background of the same image. It has navigation arrows to the bottom left as well as navigation dots on the right side.

Slider Mega Pack Layout 6

The sixth slider layout features changing text on a blurred transparent square over a parallax photo background. Navigation arrows to each side and navigation dots on the bottom.

Slider Mega Pack Layout 7

Layout 7 is similar to layout 6, with a parallax background and text slides. Navigation arrows are at the bottom left corner and the navigation dots are on the right side.

Slider Mega Pack Layouts 8, 9, 10

Slide layouts 8,9, and 10 feature text over multiple images that have a zoom-in effect. In these layouts, the navigation arrows are on each side and navigation dots are at the bottom of the slider. The text in Layout 8 is centered.

The text in Layout 9 is left-aligned.

And the text in Layout 10 is right-aligned.

Slider Mega Pack Layouts 11, 12, 13

Layouts 11, 12, and 13 feature a large image with text and a button on each slide, with navigation arrows to each side and navigation dots at the bottom. Layout 11 is center-aligned.

Slider 12 is left-aligned.

And slider 13 is right-aligned.

Slider Mega Pack Layouts 14, 15, 16

These layouts 14, 15, and 16 all have a greyscale effect on the photo and a parallax effect as you scroll. There is a bold underline over the header text. The text is center-aligned for layout 14.

Slider 15 is right-aligned.

And slider 16 is left-aligned.

Slider Mega Pack Layouts 17, 18

Layouts 17 and 18 feature a large image with slide text in a dark overlay box. For Layout 17, the text is on the left and the navigation is on the right.

For layout 18, the navigation is on the left and the text is on the right.

Slider Mega Pack Layouts 19, 20, 21

Sliders 19, 20, and 21 all feature a greyscale photo overlay and have a zoom-in effect. There are no navigation buttons. Slider 19 is left-aligned.

Slider 20 is right-aligned.

And the text in slider 21 is centered.

Slider Mega Pack Layouts 22, 23, 24

These layouts are the same as the three above, except the photos have a zoom-out effect. Layout 22 has left-aligned text.

Layout 23 has right-aligned text.

And Layout 24 has centered text.

Slider Mega Pack Layouts 25, 26

Slider layouts 25 and 26 have a large image that zooms in and text over a dark overlay box. Layout 25 has the text aligned to the left and navigation icons on the right.

Slider layout 26 has the text aligned to the right and the navigation icons on the left.

Slider Mega Pack Layouts 27, 28

The next two layouts are the same as the two above but the image zooms out instead. Slider layout 27 has text aligned to the right and navigation icons to the right.

Layout 28 has navigation icons to the left, text to the right.

Slider Mega Pack Layouts 29, 30

These two sliders feature a large image that zooms in and a different style of navigation icons. Layout 29 features the text on the left and the navigation icons on the right.

Layout 30 features the text on the right and the navigation icons on the left.

Slider Mega Pack Layouts 31, 32

These next layouts are the same as layouts 29 and 30 but the image zooms out. Layout 31 has text on the left and navigation on the right.

Layout 32 has text on the right, navigation on the left.

Slider Mega Pack Fullwidth Post Slider Layouts

The Slider Mega Pack also comes with 18 post sliders. These sliders showcase posts from your blog and display the post information and a button to read the post. It uses the post’s featured image as the background image for the slide. You can select a category of posts to display, or simply display your most recent posts. Like the regular sliders above, all of the post sliders are completely customizable and come in a variety of layouts, alignments, and styles.

Slider Mega Pack Layouts 33, 34

These sliders use a greyscale image effect and a parallax effect. Text is on the left and navigation is on the right with layout 33.

Navigation is on the left and text is on the right with layout 34.

Slider Mega Pack Layouts 35, 36, 37

Layouts 35, 36, and 37 feature a large featured image with navigation arrows on each side and navigation dots below. The image has a zoom-in effect. The text is centered in Layout 35.

In this layout, the text is left-aligned.

And in this layout the text is right-aligned.

Slider Mega Pack Layouts 38, 39, 40

These slider layouts are the same as the three layouts above, but the image zooms out instead. Layout 38 is centered.

Layout 39 is left-aligned.

And layout 40 is right-aligned.

Slider Mega Pack Layouts 41, 42

These layouts feature a parallax image with text on one side and navigation arrows on the other. For layout 41 the text is to the left.

For layout 42 the text is to the right.

Slider Mega Pack Layouts 43, 44

Layouts 43 and 44 are similar to the layouts above but the image zooms in. In layout 43, the text is left-aligned.

The text is right-aligned in layout 44.

Slider Mega Pack Layouts 45, 46

45 and 46 are again a similar design to the layouts above, but the image zooms out instead. 45 has left-aligned text.

And layout 46 has right-aligned text.

Slider Mega Pack Layout 47, 48

Layouts 47 and 48 feature a dark overlay square for the post title and navigation arrows. The image zooms in. Layout 47 has the text on the left and arrows on the right.

Layout 48 has the text on the right.

Slider Mega Pack Layout 49, 50

Finally, slider layouts 49 and 50 are similar to layouts 47 and 48, but the images zoom out. Layout 49 has the text on the left.

And layout 50 has right-aligned text.

Purchase Slider Mega Pack

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

Final Thoughts

Slider Mega Pack comes with 50 prebuilt slider layouts with beautiful transitions, effects, and navigation layouts that can be easily customized with the Divi Builder. If you are looking for some unique slider layouts that are customized beyond the standard Divi options, this product might be just right for you. We would love to hear from you! Have you tried Slider Mega Pack? Let us know what you think about it in the comments!

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