Author: Randy A. Brown

Divi Product Highlight: Divi Layouts Extended
Divi Layouts Extended is a third-party product for Divi that includes over 1700 layouts that are imported through a custom dashboard. They cover a wide range of genres and include modules, sections, and complete pages. In this post, we’ll look at Divi Layouts Extended to help you decide if it’s the right product for your Divi toolbox.

Installing Divi Layouts Extended

Installing Divi Layouts was simple. Upload it and activate it the same as any plugin. To upload it, go to:
1. Plugins
2. Add New
3. Upload Plugin
4. Choose File
5. Install Now
Once it installs, you’ll see an option to activate the plugin. Select to activate it, and it’s ready to use.
1. Activate Plugin
Update: New User Interface

Before we dive into the product highlight, Divi Extended has recently given Divi Layouts Extended a new look and feel. Take a look below to see what you can expect from the new user interface. They’ve also added 200 more layouts to their library, providing you with even more options to choose from when building your websites!

Divi Layouts Extended Dashboard

A new Divi Layouts Extended menu is added to the WordPress dashboard. Clicking it opens the new dashboard where you can select the layouts you want. I found this dashboard to be simple and highly intuitive.

It includes tabs to see the layouts, modules, sections, or pages. You can also search for anything you want and sort them by popularity, name, and date in ascending or descending order. The layouts appear as cards. You can preview the layout or save it to your library, scroll the larger layouts to see them, and preview the layouts to get a better look at them. This example shows the All tab, which includes modules, sections, and pages.

Scrolling to the bottom of the list is navigation where you can select a page or choose First or Last.

Clicking Preview opens the item on the Divi Layouts Extended website. You can scroll through the layout, click on all the clickable things, hover to see the hover effects, and see the layout with images, products, etc.

When you choose Save to Library, the layout will import, and the button changes from a purple button to a green Saved button.

You’ll also see the layout in your library where you can use it as normal in your pages, posts, and the Divi Theme Builder. They’ll include the categories and types. In this example, I’ve saved a home page. It includes the home page category and layout type.

Divi Layouts Extended Modules

The Divi Layouts Extended Modules include buttons and sliders. We’ll look at a few examples.

Divi Layouts Extended Buttons

There are 55 buttons to choose from. The button’s text works as a short description of what the button does or its layout.

Designs include solid colors, no colors, gradients, images, text, with or without borders, square or rounded edges, with or icons, with or without shadows, with or without hover effects, and more. Most are made to stand out, and they stand out well. I especially like the buttons with icons and with hover effects.

Divi Layouts Extended Sliders

There are 15 sliders to choose from. They’re full-screen and include different designs for their layouts and navigation. They include a call to action, images, backgrounds, products, navigation, etc.

This example shows an angled background, styled navigation, an image, text, and CTA.

Divi Layouts Extended Sections

There are 855 sections in 27 different categories. They include sections such as About, blog, CTAs, client logos, headers, footers, top bars, number counters, testimonials, hero sections, galleries, services, and lots more.

Headers

It includes 130 headers. They include menus, social media icons, search fields, clickable phone numbers, CTAs, styled dropdown menus, and lots more. Many include a top bar.

This example shows headers 127-129. They include navigation, social icons, search, contact information, etc.

This example shows headers 101-103. They include CTA buttons with hover animations. I’m hovering over the second header’s menu to show the dropdown menu.

Blogs

There are 60 blog sections. They include grid layouts, alternating layouts, single-column layouts, styling, hover effects, etc. The blog cards provide a lot of styling options.

This example has a magazine-style layout with two columns. The latest blog posts are displayed in the left column and include featured images, while the others are stacked in the right column and include large read-more buttons.

This example shows a grid layout with overlapping titles and excerpts. I’m hovering over the second post to show its hover effect.

CTAs

There are 38 call-to-action sections to choose from. They’re full-width and include images, messages, buttons, forms, number counters, and more in multiple types of layouts.

This example shows an email CTA with red highlights and contact information. The phone number is clickable.

Hero Sections

It includes 60 hero sections. They include CTAs, embedded videos, countdown timers, images, backgrounds, forms, blurbs, posts, products, and more. These are some of my favorite layouts in Divi Layouts Extended.

This example shows a CTA with a graph that overlaps two backgrounds. The background includes shapes in different colors to stand out.

This example includes links to the various pages in the shop. They include solid colors and images with titles, buttons, or discounts.

Team

Choose from 35 team layouts. They display styled Person Modules in different ways and include supporting text, buttons, and more. Most are placed in a grid, but there are a few with single-column layouts, mosaic layouts, etc.

This example shows three Person Modules with text, a button, and a wavy background. Hovering over a module on either side makes it slide on a diagonal.

Testimonials

There are 25 testimonial sections to choose from. They include grid layouts, single-column layouts, alternating layouts, and lots more. They include background images or color on one side, different backgrounds for the Testimonial Modules, circled images, squared images, etc.

This example shows an image on one side and a testimonial slider overlapping the image on the other side. The slider includes navigation on the far right.

Timeline

There are 5 timeline sections to choose from. These are great for showing the process steps, a publication timeline, etc. They include horizontal and vertical layouts.

This one shows a production timeline, which is great for project management. It displays the timeline with different colored icons that alternate from the top to the bottom. The text is on the opposite side of the icons and includes titles in the same color as the icons.

Portfolio

Choose from 10 portfolio layouts. These are some of the most elegant layouts in Divi Layouts Extended. They include several background designs, including images and blocks of color. They include several layouts and portfolio card designs. Some include a CTA or a styled filter. They work for various industries, including industrial, consumer, shops, restaurants, photography, design, etc.

This example uses a portfolio section to create a restaurant menu. The portfolio cards have shadows, overlays, and rounded corners. They overlap the background image. I’m hovering over the item on the right to show the overlay.

Woo Sections

There are 30 Woo sections to choose from. They work as CTAs in the various categories in the shop and include styled backgrounds, styled images, offers, countdown timers, and many layout designs. They would work great as sections within layouts and as hero sections.

This example shows styled images with offset borders. They include two different layouts within the grid. It works as links to categories in the shop.

This example includes a countdown timer and a button to see the shop.

Divi Layouts Extended Pages

The Divi Layouts Extended Pages tab includes 23 types of pages. They include home, landing, about, coming soon, checkout, pricing, product, search, services, project, shop, team, testimonials, FAQs, Lookbook, 404, and more. They use the modules and sections from the other tabs to create pages in several genres with custom styling for each one. Here are a few examples.

Home

Choose from 10 home pages to choose from. They’re designed for shops, agencies, bands, real estate, weddings, and several service-based businesses.

This example shows the first half of Divi Concert, which was designed for bands and live events. It includes a hero section with a background image, CTA, and a number counter. It also includes sections for information, an event schedule, and a team section for the band members.

The second half includes an itinerary with two sections that display an image on one side and blurbs on the other. Also included are a blog section, pricing tables, and sponsor logos.

Landing

There are 40 landing pages to choose from in several genres with a focus on business. They include agencies, conferences, authors, podcasts, webinars, etc.

This is the landing page for a podcast. It includes a hero section with a CTA, an embedded video, sponsor logos, and an email form. It also includes a section for information, embedded audio files, and hosts.

Lookbook

There are 3 Lookbook pages to choose from. They include lots of styled images in various layouts to build shop pages that focus on images.

This example shows several sections of product images and includes a countdown timer and featured products.

Shop

There are 30 shop pages to choose from. They display products in various ways in grids, with large or small images, with or without sidebars, and with or without CTAs.

This example includes a sidebar with breadcrumbs, products, categories, and tags. A slider at the top of the page links to categories. The products include styled elements.

Post

There are 25 blog post layouts. They display the post elements in different ways. Choose a layout with or without a sidebar.

This example places the featured image on the left with the text and metadata on the right over a solid background. The content is presented in a wide single-column layout with post navigation, tags, and comments.

Coming Soon

There are 5 coming soon pages to choose from. They include large text, countdown timers, email forms, and social media follow icons.

This example displays the message on the left over a background image. On the right are a countdown timer, social media icons, and a button for an email form, all placed over a white background with a rounded left edge.

404

There are 10 404 pages. They include a combination of graphics, images, typography, social follow icons, contact information, search boxes, and a link to the home page. Most only include a few of these elements, which keeps them simple and easy to understand.

The example uses a background image of an event, which works great with the Divi Concert landing page. It includes a full-width background image, the 404 error message, a search box, and social icons.

Where to Purchase Divi Layouts Extended

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

Ending Thoughts on Divi Layouts Extended

That’s our look at Divi Layouts Extended. There are a lot of well-designed layouts in this Divi plugin. The dashboard is easy to use and only imports the layouts you want, keeping your Divi Library clean. Once imported into your Divi Library, they work the same as any Divi layout. If you’re interested in expanding your library of Divi layouts, Divi Layouts Extended is a great choice to consider.

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

The post Divi Product Highlight: Divi Layouts Extended appeared first on Elegant Themes Blog.
24.09.2023
Divi Product Highlight: Furniture Shop Divi WooCommerce Theme
Furniture Shop Divi WooCommerce Theme is a third-party child theme for Divi that was designed for eCommerce. It includes multiple page designs and adds many features that work with WooCommerce. In this post, weâ€™ll take a look at the Furniture Shop Divi WooCommerce Theme to help you decide if itâ€™s the right Divi Child Theme for your online shop.

Installing Furniture Shop Divi WooCommerce Theme

Installing this Divi Child Theme was simple. With Divi activated, upload and activate the Furniture Shop Divi WooCommerce Theme like any WordPress theme. First, go to Themes:
1. Appearance
2. Themes
3. Add New
Next, upload the theme.
1. Upload Theme
2. Choose File
3. Install Now
Next, activate the Child Theme.
1. Activate
Select all of the content you want to install. This includes all of the pages, layouts, and even the plugins. It will also activate the plugins for you. Everything is selected by default. I recommend leaving everything selected. Click Import Demo Content and wait for the import to finish.
1. Import Demo Content
Finally, once everything has been imported and activated, youâ€™ll see a message that the process is complete, and you can then remove the importer.
1. Remove Demo Content and Import Functions
I got a message that the WooCommerce Wishlist plugin was misconfigured, but it was an easy fix. You will need to set up a few plugins, such as your WooCommerce options, the WooCommerce Wishlist Plugin options, FiboSearch settings, etc. The documentation does show the settings youâ€™ll need. Most of mine were correctly configured, but I did need to make some adjustments to match the documentation.

Furniture Shop Divi WooCommerce Theme Options

The theme settings include a one-click color change, color pickers, and preloaders. The general tab includes theme color options and color pickers where you can select the default primary and secondary colors.

The preloader tab includes 28 built-in preloaders to choose from. You can also upload a custom preloader and choose the color, background, effects, delay, and fadeout speed.

Furniture Shop Divi WooCommerce Theme Pages

Furniture Shop Divi WooCommerce Theme adds 32 pages to your website, not counting the pages created in the Divi Theme Builder. These include home pages, standard website pages, WooCommerce pages, etc.

Home Pages

Furniture Shop Divi WooCommerce Theme has 3 different home pages to choose from. All three follow the white color scheme with green highlights, include the same design elements, and focus on eCommerce. Hereâ€™s a look at all three home pages.

Home One

Hereâ€™s the top portion of the first home page. It includes a CTA slider at the top of the page with vertically placed social icons and a message on the right. Category icons with hover animations link to the various shop categories. A section for new products displays the products in a styled Shop Module. This section is labeled with a vertically placed title. A Deals section includes a CTA with a countdown timer and a product image and a background image.

This is the bottom portion of the page. It includes a newsletter form and a product section with images in a mosaic that link to product categories. They include gradient overlays. It also includes an About section, a styled blog section, and logos. Each of the sections includes vertical text.

Home Two

The first portion of the second home page includes a full-width slider for the hero section. Images with text work as links to the shop categories, icons show information, another slider works as a CTA, and the product section shows styled products in a grid.

The second portion shows new products, an overlapping CTA with a countdown timer, a small newsletter form, larger images for category CTAs, and a contact section with information on one side and a map on the other side.

Home Three

The first section of the third home page includes a full-width slider with overlapping icons that link to the shop categories. Large images in a mosaic work as CTAs to the shop.

The bottom portion shows a CTA with a countdown timer, a shop section with a CTA, a blog section, and logos.

Inner Pages

Furniture Shop Divi WooCommerce Theme has 25 inner pages to build your website. This includes all of the standard pages and a few extras.

About

The About page includes a small hero section with information and breadcrumbs followed by a larger section with information. A set of text blocks shows company information. Team Members include social icons that reveal on over. Accordion Modules build the FAQs. It also includes a section for logos.

Our Team

The Our Team page includes Person Modules with social icons that show on hover, as you can see in the middle module of the bottom row. It also includes a smaller FAQ next to a contact form.

Testimonials

The testimonials page includes lots of styled testimonial cards with hover effects. Hovering moves the card downward, changes the color of the quote icon, adds a background to the icon, and adds a bar at the bottom of the card.

Blog

There are four blog pages to choose from including a 2-column grid, a 3-column grid, a list with the image on the left, and a list with the image on the right. The example below shows a 3-column blog grid. The blog cards include hover animations that zoom the image.

This example shows a list with the image on the right.

Blog Post

The layout for the blog posts displays the featured image, blog content, a styled sidebar, recent posts with cards that match the blog, and a styled comment section.

404

The 404 page displays a full-screen image with a background mask that reveals a portion of the image. It also includes a 404 message and a button to return to the home page.

Headers

There are three headers to choose from. All three include a mega menu.

First Header

The first header includes a top bar and navigation with a mega menu. The top bar includes a text CTA. Both areas include icons. Navigation is placed on the right.

Second Header

The second header includes three bars. The top bar shows shopping information, several CTAs, and social media icons. The second bar includes the logos and a search box. Navigation is placed in the bottom bar.

Third Header

The third header includes two bars. The top bar includes elements of the first two headers. Navigation is placed in the center.

Footers

There are three footers to choose from.

First Footer

The first footer displays two search boxes. The first includes a CTA and a small subscribe form, followed by shipping information, and links in multiple layouts.

Second Footer

The second footer displays the shipping information at the top, then the links, and the email form at the bottom.

Third Footer

The third footer includes a background image. A message and an email form are placed at the top, followed by links.

Furniture Shop Divi WooCommerce Theme WooCommerce Pages

Furniture Shop Divi WooCommerce Theme also includes lots of WooCommerce pages and features.

Shop Pages

There are three shop pages to choose from, and you can choose with or without a sidebar. They include AJAX product filters, an AJAX live search, a flying cart, a wishlist, and a quick view popup.

Shop Page One

The first shop pages include a small hero section followed by category icons. A large shop section covers most of the page. It ends with a CTA to a specific category. The shop section includes a filter, pagination, styled purchase buttons, etc.

Shop Page Two

The second shop page includes two shop sections. The first is the newest products. It includes a vertical title. The second is all products. It includes pagination.

Shop Page Three

The third shop page includes one shop section and adds a CTA with a number counter at the bottom of the page.

Single Product Page Layouts

There are several product pages. They include with or without a sidebar, and there are pages for product types. The types include simple, grouped, variable, and external. They all follow a similar design.

Simple Product Type

The simple product-type page includes a sidebar with box shadows. It also includes related products. The sidebar includes a product search, recently viewed products, and product tags. The green line under the title of each sidebar module expands on hover.

Grouped Product Type

The grouped product page type lets the user choose from multiple products on the same page. It also includes related products at the bottom of the page. This example shows a few more of the sidebars including reviews.

WooCommerce Features

There are also many extra features added to WooCommerce including a flying cart, AJAX filters, and more. Hereâ€™s a look at a few of the extra WooCommerce features.

Flying Cart

The flying cart is a popup that shows all the products with their counts in the cart. The user can change the number of items for each product, see the cart page, checkout, share the cart, and continue shopping. The green and red color schemes stand out. I think this is one of the most interesting features of the Furniture Shop Divi WooCommerce Theme.

Cart

The cart itself is clean and includes icons to show where the user is in the checkout process.

Wishlist Popup

When the user adds an item to the wishlist, a small popup confirms the item was added. It includes a list to view the wishlist.

Wishlist

The wishlist page includes the same styling as the rest of the site and includes social media sharing icons.

AJAX Search

Product search uses AJAX, so the user doesnâ€™t need to go to a different page to see the results. Itâ€™s fast and easy to use. It shows the categories and the products. This example shows the AJAX search box in the header.

Where to Buy Furniture Shop Divi WooCommerce Theme

Furniture Shop Divi WooCommerce Theme is available in the Divi Marketplace for $39.99. It includes unlimited usage, one year of updates and support, and a 30-day money-back guarantee.

Ending Thoughts

Thatâ€™s our look at the Furniture Shop Divi WooCommerce Theme for Divi. There are a lot of WooCommerce pages and features available within this Divi Child Theme. I found the pages and features easy to use. The color options make it easy to match the Child Theme to your branded colors, making it look different from the original design. If youâ€™re interested in a WooCommerce Child Theme, Furniture Shop Divi WooCommerce Theme is worth a look.

We want to hear from you. Have you used the Furniture Shop Divi WooCommerce Theme? Let us know how you like it in the comments.

The post Divi Product Highlight: Furniture Shop Divi WooCommerce Theme appeared first on Elegant Themes Blog.
17.09.2023
Divi Product Highlight: DiviCommerce

DiviCommerce is a third-party child theme for Divi thatâ€™s designed for building online stores. It includes lots of pages and features to create WooCommerce shops that stand out from the crowd. In this post, weâ€™ll look at the pages and features of DiviCommerce to help you decide if itâ€™s the right Divi child theme for your needs.

Installing DiviCommmerce

I found installing DiviCommerce to be intuitive. Install it like you would any WordPress theme but with Divi as the active theme. Got o Appearance > Themes > Add New Theme.

Select Upload Theme, click Choose File, select the DiviCommerce zipped file on your computer, and click Install Now.

Next, click Activate.

Finally, select DC Demo Import > Easy Demo Import.

Choose the files to import and click Import Demo Content. I recommend using the default settings.

Once the demo content imports, click Remove Demo Content & Import Functions. Your site now looks like the demo with dummy images to show the sizes needed. Add your content and your site is ready to use.

DiviCommerce Pages

DiviCommerce comes with 26 pages that include 6 home pages designed to create multiple types of online shops. It also includes 3 shop pages, 2 product pages, 2 checkout pages, 5 headers, 2 footers, and lots of extras. Features include Ajax product filters, cart popups, product Ajax search, popup forms, and WooCommerce variation swatches.

Letâ€™s take a look at the layouts. Iâ€™ll break the larger layouts into smaller groups so theyâ€™re easier to manage and show images from the downloaded child theme and the product demo.

DiviCommerce Home One

The hero section shows a full-screen image with a CTA.

Following this is a section for new arrivals. This includes hover effects for the product cards. A two-column section displays images that link to the shop. The images include the Ken Burns effect. Next, is another shop section with hover effects. Hereâ€™s the top portion of the product demo.

The bottom half of the first home layout shows another full-screen CTA, featured products, a unique deal countdown, a blog, and images.

DiviCommerce Home Two

The second home page shows a full-screen slider with CTAs.

The top half of the page includes CTAs to shop categories, a unique shop section with two products on one side and a CTA on the other, a shop section, and a full-width email signup form. All the product cards and buttons include hover effects.

The second half of Home Two shows a shop section, a deal countdown timer in a card over a full-screen background image, a blog, and images.

DiviCommerce Home Three

The top half of Home Three displays a full-width CTA, a shop section with new arrivals, a section with four images in two columns for category CTAs, and a wide email form.

The second half of the layout displays section shop sections, a blog section with a background image, and a section with customer images.

DiviCommerce Home Four

The fourth home page includes a unique hero section with two images. One is longer than the other and the text and CTA overlap both images. It also includes category images with the title at the bottom of the card and a shop section.

The second half of the layout displays two large category CTAs, a shop section, a deal section with a countdown timer, and a blog with a background image.

DiviCommerce Home Five

The fifth home page displays a full-screen hero section with the CTA on the right. It has a large section of category images with five smaller images and three larger images. Three shop sections show whatâ€™s new, whatâ€™s on sale, and the best sellers. This layout also includes the full-width email form and customer images.

DiviCommerce Home Six

The sixth home page is the most unique. It displays a sale countdown timer in the hero section. Each of the shop sections places the title in large text to the left of the section. This is followed by two image CTAs that include the title and button that overlap the image and each other. Another category section places includes images with box shadows that disappear on hover. This layout also includes the email form and customer images.

DiviCommerce Shop One

The first shop page displays a full-width image with a page title followed by the products in four columns with a sorting filter and a sidebar to the left. The sidebar includes the category, size, and color options. Products display a box shadow on hover.

DiviCommerce Shop Two

Shop Two includes a full-width image, places the products in a single column, and adds an interesting product filter where users can filter by category, size, and color above the shop section. It also includes the sorting filter and adds pagination at the bottom of the page. The filters open on hover.

DiviCommerce Shop Three

Shop Three doesnâ€™t include a full-width image. It places the shop categories at the top of the page with images. The shop section includes the sidebar, filter, hover effects, and pagination.

Product Page One

The first product page displays a large, featured image on the left and the product options on the right. The product options remain in place as you scroll. Breadcrumbs at the top of the page show the customers where they are in the navigation structure.

Following the featured image is a set of thumbnail images and another large image. Once the large image reaches the area of the product options, the options scroll with the page.

Next is the description and shipping information and a section for reviews.

Lastly, there is a section where customers can add their own reviews.

Product Page Two

The second product page follows the design of the first but adds the description and shipping information to the product options area in the toggles.

The bottom of the page adds a section of products the customer might be interested in. The product cards add box shadows on hover.

Cart Popup

The cart popup appears when a product is added to the cart. It includes a field to add a coupon code, a slider with similar products, and a checkout button.

Cart Page

DiviCommerce includes a styled cart page. The cart information includes a box shadow. The buttons are red to match the child themeâ€™s design.

Checkout Page One

It has two checkout pages. This is the first checkout page. It places the order and payment information on the right of the checkout form. The second checkout page places this information under the form and places company information on the right of the form.

About Us

The About Us page displays angled images that stand out. The page also includes a full-width image, several areas for text, and a couple of larger images.

Contact Us

The Contact Us page displays the contact information with blurbs, displays a contact form, toggles for the FAQs, and includes a full-width map.

DiviCommerce Headers

DiviCommerce includes 5 headers. They include multiple sections that can be used, deleted, or swapped to another header.

Header One

The first header adds a sale bar at the top and includes a search, account login, and a link for the popup shopping cart on the right. The logo and menu are on the left.

Header Two

Header two places the search box in the top bar. The shopping cart and menu swap sides.

Header Three

The third header places the menu in a new bar in the center and at the bottom and moves the search to the center.

Header Four

The fourth header centers the logo and the menu, places the search on the left, and the cart on the right.

Header Five

Finally, the fifth header places the search box in the top bar, moves the logo and menu to the left, and places the cart on the right.

DiviCommerce Footers

DiviCommerce includes two footers. Both work well for eCommerce.

Footer One

Footer number one includes two sections. The first section contains blurbs for information provided as text. The second section includes an Image Module for the logo, a Social Media Follow Module, and lots of Text Modules for information and links.

Footer Two

The second footer replaces the top section with an email form. The second section moves the Social Media Follow buttons to the right in its own column.

DiviCommerce Popup

DiviCommerce includes a popup made with the Divi Builder and a plugin called Popup Maker. The popup itself displays an email form with a sign-up CTA on one side and an image on the other side. It includes an overlay and a close button.

DiviCommerce Search

The Ajax search lists the categories and products as you type. The search is fast and the results stay open, allowing the customer to click anything in the results.

Where to Purchase DiviCommerce

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

Ending Thoughts on DiviCommerce

Thatâ€™s our look at the DiviCommerce child theme for Divi. This child theme includes lots of pages and layouts to build any type of WooCommerce shop. The five extra plugins with the child theme add many interesting features, such as the cart, popups, and filters. The Ajax features are fast They give the website many elegant and useful tools and stand out from the crowd.

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

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

10.09.2023
Divi Product Highlight: Hide & Show Pro
Hide & Show Pro is a third-party plugin for Divi that lets you show or hide content based on criteria that you set. Control who sees every section, row, column, and module based on location, status, purchases, and more. In this post, weâ€™ll look at Hide & Show Pro to see what it can do and how easy it is to hide or show your Divi content based on the conditions you choose.

How Hide & Show Works

Hide & Show Pro adds options to the Divi Builderâ€™s Sections, Rows, and Modules to either hide or show the element and choose a preset that determines the actions that will take place. The actions are based on the conditions within the preset thatâ€™s selected for that element. The preset can be used to hide and show the elements. This means you can swap the content based on the conditions you choose, such as the user role, date, language, etc.

Presets are created separately in the Preset settings editor, and can be used in any Divi element. The preset can be selected within any Divi element, so they can be reused as many times as you want and anywhere you want. To create one, simply go to the preset editor and make your selections.

Once youâ€™ve created the preset, you can use it in any Divi element. Go to the Advanced tab, choose Hide & Show, and select Hide or Show. Then, select the preset you want to use. The element will then show or hide based on your selection and act according to the selections in the preset.

This allows you to create a preset and apply it anywhere you want, and when you make changes to the preset, those changes automatically apply everywhere that preset is used. So, you can make a change in the preset editor, and that change is reflected across your website.

Now that weâ€™ve seen the basics of what Hide and Show Pro does, letâ€™s take a closer look at the presets.

Hide & Show Pro Presets

Presets determine the action of the Divi element. It determines who the action is for (who the element is shown to or hidden from), when the action takes place, where the action takes place, etc., all based on conditions that you choose. You can mix and match them to create some interesting and powerful combinations.

The presets give you a lot of control over who sees which content. You could create content that only logged-in visitors see, or only logged-out visitors see. This is great for creating banners for sales based on the date. You could also create content that shows based on the visitorâ€™s location, site language, what theyâ€™ve purchased from your store, their user role, and lots more. To use Hide & Show within your Divi layouts, youâ€™ll need to build presets.

New Preset

You can create your presets in the Options screen. To add a new preset, go to Dashboard > Hide & Show > New Preset. Give the preset a title and then make your choices in the panel on the right and adjust them in the main editor.

Weâ€™ll take a closer look at this panel and its settings in the next section. By default, the new preset includes the user status option with logged-in and logged-out preselected. You can disable one by clicking on its checkmark. You can also disable both by clicking on the toggle in the right sidebar. This is a common status, so it makes sense to include it by default.

All Presets

The All Presets screen shows a list of every preset you have available. You can edit them, delete them, and enable or disable them from this screen. It has three presets to get you started.

Hide & Show Pro Preset Options

The options panel includes 6 sections with options for each section. The sections include User, Schedule, Post, WooCommerce, Geolocation, and Other.

All include logic conditions, and you can define the logic, add multiple conditions, and enable any options you want for each one. Geolocation is the newest option. Weâ€™ll look at that one first and in greater detail.

You can choose options from one section, each section, or mix and match as many as you want. You can make your presets as simple or complex as you want. Use one, a few, or all of them. The possibilities are astounding.

Hide & Show Geolocation

Hide & Show Pro 3.0 added Geolocation. This requires a free or paid service, and you have several to choose from. It adds a geolocation option to the presets with four selections. Select Continent, Country, Region, and City. Enable one, all, or any combination you want. When you enable multiple options, theyâ€™re added as an AND statement, but you can click on the statement to change it to an OR statement.

This gives you a lot of control over the rules and allows you to include or exclude visitors from certain parts of the world. This is especially helpful if you ship to certain continents, have classes for local students, have multiple locations and want to present different content for each location, and lots more.

Hide & Show Geolocation by Continent

Selecting Continent adds the option to select the continent is or is not equal to, a dropdown box for the continent to choose, and a label that shows the continentâ€™s code. Add more continents by clicking the plus icon under the fields. Remove one by clicking the x icon to the right of the field you want to remove.

Iâ€™ve added two continents in the example below. The dropdown box shows the 7 continents you can choose from.

Hide & Show Geolocation by Country

Selecting Country adds the option to select the country is or is not equal to, a dropdown box for the country to choose, and a label that shows the continentâ€™s code. Add more countries by clicking the plus icon under the fields. Remove one by clicking the x icon to the right of the field you want to remove.

In the example below, Iâ€™ve selected Is in European Union in the section called Other, and selected Bahamas under Countries.

Hide & Show Geolocation by Region

Selecting Region lets you create rules. It adds the option to select that ANY rule can be true, or ALL rules must be true. It adds a dropdown box for the rule to choose from. Select that the region is equal to, is not equal to, does contain, or does not contain. The second field lets you enter the value that your selection will compare. Add more regions by clicking the plus icon under the fields. Remove one by clicking the x icon to the right of the field you want to remove.

Hide & Show Geolocation by City

Selecting City also includes rules. Select that ANY rule can be true, or ALL rules must be true. Choose the rule in the dropdown box. Select that the city is equal to, is not equal to, does contain, or does not contain. The second field lets you enter the value that your selection will compare. Add more cities by clicking the plus icon under the fields. Remove one by clicking the x icon to the right of the field you want to remove.

Hide & Show Geolocation Example

This example shows all four options. Iâ€™ve selected:

Continent is Equal To:
- North America
- South America
- Asia
- Europe
OR Country is equal to:
- Australia
- Bahamas
AND the Region does not contain:
- Alaska
OR the city is equal to Los Angeles.

Hide & Show User

Set the logic for the user ID based on what the user ID is or is not equal to. Hide or show the content based on user roles. You can also hide or show the content based on the user group. This one requires a free plugin. You can also hide or show the content based on the user metadata. All these can be used together with AND/OR logic. This is excellent for showing specific content to specific users.

Hide & Show Schedule

Set a daily, weekly, monthly, yearly, or custom schedule. They can work together with AND/OR logic. Select or deselect any time, day, month, etc., just by clicking. The custom schedule includes the option to choose a single day or a range of days. This is a great way to automatically show posts based on a schedule.

Hide & Show Post

For posts, you can select post ID, type, taxonomy, meta, or author meta. This lets you manually control individual access to posts. Add as many as you want. Specify if the is or is not equal to a certain ID. Choose if the page is or is not equal to a specific page or pages. The rest of the settings let you specify if any rule is true and lets you choose the rules. This is excellent if you want to show specific posts to certain visitors.

Hide & Show WooCommerce

WooCommerce gives you the most settings to choose from. They include the purchased item, count, and value, the cart item, count, and value, the stock status and level, the membership plan and status, and the subscription plan and status. The membership and subscription options require premium plugins from WooCommerce. The settings let you choose if any rule is true and allow you to choose the products or status.

This is a great way to show the stock status, create a sale based on inventory, create a sale based on purchases, show a monthly or annual sale, and lots more.

Hide & Show Pro Other

Other settings include the site language, query string, and custom filter. For the site language, choose if the language is or is not equal to the selections you make. For the query string, you build the query by adding the key, choosing the logic from a large list of options, and specifying the value. The custom filter lets you build a filter using code that youâ€™ll add to your themeâ€™s PHP file.

Hide & Show Pro Options

The Hide & Show options let you choose from 7 different geolocation providers. The free service from ipwhois.io is selected by default. Use the free service or enter the key for the premium service. You can customize the geolocation response using the code provided. You can also choose HTTPS encryption, set the number of days to keep the cache and clear the cache. Other settings let you add additional modules, exclude modules, and delete data.

Hide & Show Pro Divi Module Settings

A new option is added to the Advanced tab of Divi Sections, Rows, Columns, and Modules. The option allows you to disable, hide, or show Hide & Show mode. If you choose Hide or Show, youâ€™ll see a dropdown box where you can choose the preset you want to use. Hide & Show mode is off by default. Enabling Hide & Show mode gives you a lot of design control over all the Divi Builder elements.

In the example below, Iâ€™ve selected a blurb from the free Coaching Layout Pack for Divi. This section of the layout shows services. The website owner might choose to offer most of these services online but decided to only have workshops onsite. In this case, they could restrict the blurb about workshops to only show to visitors in a certain geolocation.

Iâ€™ve opened the Blurb Module, selected the Advanced tab, and opened the Hide & Show settings. I selected Show and chose my Geolocation Preset for that module. Now, this module will only display to visitors that match the geolocation I chose in my preset.

Hide & Show Pro Example

As an example, I want to build a section that will show custom pricing for existing customers. I want the pricing to show for the first week of every month, to only show to those that have purchased a specific product, and they must live in the United States.

The example below builds that query with AND statements. The preset settings include:
1. The User Status will only show to visitors that are logged in.
2. Check the User Role to show only to the administrator, customer, and subscribers user roles.
3. Use Monthly Schedule to display for the first 7 days of every month.
4. Check Purchase Item Only show to customers that have purchased a certain product.
5. Use Country to show only to customers that live in the United States.
All of these criteria must be met before the visitor sees the section with special pricing.

Next, I created a new section for the Pricing Page of the free Coaching Layout Pack for Divi. This section will show the special pricing for a custom service that only those that meet the criteria will see. Iâ€™ve opened the sectionâ€™s settings and selected my preset in the Show & Hide settings in the Advanced tab.

Now, every visitor that meets the criteria sees this new section above the original section.

All other visitors do not see the first section. Instead, theyâ€™ll only see the regular pricing section.

Where to Purchase

Hide & Show Pro is available in the Divi Marketplace for $39. 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 Hide & Show Pro for Divi. I found the plugin easy to use. I like that the settings are separate from the Divi Builder. This lets you build a preset and use it anywhere you want. Hide & Show Pro is an excellent choice if youâ€™re interested in gaining control over who can see specific content.

We want to hear from you. Have you used Hide & Show Pro for Divi? Let us know about your experience in the comments.

The post Divi Product Highlight: Hide & Show Pro appeared first on Elegant Themes Blog.
27.08.2023
Divi Plugin Highlight: DiviMenus

DiviMenus is a third-party plugin for Divi. It’s a menu-builder that makes it easy to manually create new menus to use instead of the default WordPress menus. It’s now been updated with a new module to create mega menus, dropdowns using WordPress menus, and all sorts of new creative ways to navigate through your content. In this post, we’ll look at DiviMenus via the Divi Popup Picnic Layout Pack to help you decide if it’s the right product for your needs.

What You Get with DiviMenus

Before we dive into the module, let’s take a look at some things you can expect from the DiviMenus plugin.

Features

The DiviMenus plugin includes 2 different modules: “DiviMenus” and “DiviMenus Flex”. You can use the one that suits you the best and assign link types to your menu items.

An example of this is being able to toggle entire Divi Sections as a Tabs module. This allows you to reveal any Layout stored in your Divi Library as a Popup or Mega Menu. You can also reveal a WordPress Menu stored in Appearance > Menus as a Collapsible Dropdown Menu. The features are advanced and completely customizable to your needs!

Free Layouts

DiviMenus also comes with a bunch of free layouts that you’re able to use when signing up. Let’s take a look at some examples.

Example #1

The first layout example highlights different marker colors on click. You can view the demo here.

Example #2

The second example lets you reveal any content by clicking on images displayed in a circular shape. View the live demo here.

Example #3

The last example lets you switch between Divi Sections by recreating a versatile Tab module. You can view the live demo here.

DiviMenus Modules

DiviMenus adds two modules to the Divi Builder. Firstly, is the original module called DiviMenus. Secondly, is a new module called DiviMenus Flex.

DiviMenus

DiviMenus includes submodules for each of the menu items. You can also adjust the menu’s shape, choose how it opens, choose the menu button type, adjust the title, choose icons, specify the URL, and more. The default is a hamburger icon within a gray circle. It can create menus that open on click or hover, menus that float in place, mega menus, and lots more.

Submodule

The submodule adds the items to the menu. I’ve added three menu items in the example below. Give each one a title, choose an icon, adjust how they work, and style them individually from the submodule’s settings. On the front end, these menu items show when the user clicks the hamburger icon. Additionally, you have the option to display the DiviMenu already open when the page loads and even hide the Menu Button.

The Design tab gives you control over the colors, sizes, borders, spacing, etc. If you don’t use custom styles in the Design tab, the menu item will inherit the styles from the main module. In the example below, I’ve changed the background color, icon color, and icon size. I also added a border to the menu items and changed the color of the hamburger menu.

DiviMenus Settings

DiviMenu Shape sets the menu in a specific layout. Choose from horizontal, vertical layout, or circular. The default is horizontal. This example shows Vertical. You can also adjust its open state, display inline, equal the heights for opened and closed, and bring the menu to the front.

The Circular option opens another menu where you can choose the menu items’ alignment. Choose from a full circle or a semicircle and choose its location. This example shows Semicircle – top. The items create a semicircle at the top of the menu icon.

This example shows Semicircle – left. All the items circle the left half of the menu icon.

Menu Button

The Menu Button settings let you use an icon, image, or text for the menu button and set its position within the open menu. The default is an icon. You can also hide, disable, or display it on click or hover. This example shows an image. I’ve selected a Divi logo.

This is Text. Enter any text you want into the field.

Menu Button Title

Menu Button Title adds a title to the menu icon. You can enter the text, choose when it displays, make it clickable, and hide it on phones.

Menu Items

The menu items can also be icons, images, or text. Icons are the default. This example shows an Image.

Once you select Image, the image settings open in the submodules, allowing you to specify an image for each menu item.

If you choose Text, each menu item displays the title you’ve given it.

Menu Items Title

You can also show the menu item titles along with the icons and images. Choose to display them on hover or always. You can also make them clickable and hide them on phones. This setting did work for me in the Divi Visual Builder.

DiviMenus Design Settings

The Design tab includes settings for the main menu and the menu items. Adjust the sizes, icon and text colors, background colors, border shapes, border colors, choose the text alignment, add padding, etc. For the text alignment, set the text at the top, bottom, right, or left of the menu item. I’ve adjusted many of these settings in the example below to match our layout pack better.

You can also adjust the DiviMenu alignment and choose to justify the closed DiviMenu, which will move the hamburger icon when the menu is closed. For this example, I’ve justified the closed DiviMenu. The menu icon moves to the center when the menu is closed. If you choose an alignment option, the menu icon remains in that location when closed.

Building Popups and Mega Menus with DiviMenus

Each submodule contains a section for links. Here, you can specify the URL, how the URL opens, enable it as active, set it to close on click, and choose the link type.

Link Type

The link type allows us to create some interesting menus. This includes URL, Popup, and Show. URL opens the page you’ve entered as the URL.

Popup Link Type

The Popup link type lets you choose a layout from your Divi library to display when the menu item is selected. Have it show on hover, add a close icon, etc. I’ve chosen a layout called Contact Form to display on hover.

When the user hovers over the menu item, the homepage layout displays as a popup. You can style the popup in the Design tab.

Show Link Type

Show provides settings to show or hide elements. It includes CSS options to bind the elements and is a little more complicated than the other settings. It’s a good setting to use because you can create submenus. You just have to know the CSS IDs of the elements you want to show. You can also add classes to the elements.

DiviMenus Flex

DiviMenus Flex is the newest module. It uses CSS flexbox and the new Sub Link Type to create mega menus and dropdown menus. It also works with WooCommerce and Easy Digital Downloads, and displays the number of items in the shopping cart. In this example, I’ve already added four menu items.

Submodules

The submodules create the menu items. Add a title, choose the content type, disable the click event, show the icon/image, and choose between hover and click options. It also includes link options to specify the URL and how it works, choose the link type to create popups and mega menus, or even show/hide any other element of your page content.

DiviMenus Flex Settings

The settings include direction and to show opened or closed. For the direction, select between horizontal and vertical. Horizontal is the default setting. I’ve selected Vertical in this example.

The logo settings let you add a logo to the menu. You can make it clickable and add the URL.

The menu button settings let you set the button’s position. Choose from first or last. You can also choose the content type. Select between icon, image, or text. Other options include hiding the button, disabling the button, and applying hover effects. Text provides a field where you can enter the text you want to display. I’ve added text and moved the button to last in this example.

Text also includes an option to add an icon or an image to the button. Choose the icon or image, and the placement, add padding, hide the text on certain devices, hide the icon or image on certain devices, and apply hover options.

Design Settings

The Design settings include lots of new features. Set the horizontal and vertical alignment, make the menu items fullwidth, make the menu button fullwidth, and adjust the logo. The logo settings let you choose the logo placement, alignment, width, and absolute position. I’ve adjusted the fullwidth menu button and horizontal alignment settings for the example below.

Adjust the colors, fonts, sizes, padding, position, and lots more. Adjust the menu button and menu items separately. The menu items follow the settings in the Design tab unless you’ve adjusted them in their submodules. For this example, I’ve added icons, and text to the menu items and then adjusted their background and font colors. I’ve adjusted the same settings for the button.

Building Popups and Mega Menus with DiviMenus Flex

The link options in the menu item submodules let us use DiviMenus Flex to build regular menus, add dropdown menus, create popups, and build mega menus. The Link Type option does this for us. If we choose URL, the default setting, the menu works as normal. Add the link, choose how it opens, choose its active state, and choose how it closes.

Popup Link Type

The popup link type lets you choose a layout from your Divi Library to use as a popup. If you choose to show the close icon, you’ll see an icon picker.

The Design tab adds options to style the popup, allowing you to apply customizable entrance and exit animations to enhance its visual effects.

Sub Link Type

The Sub Link type is interesting. It lets you choose something to use as a dropdown menu. Choose from a WordPress menu or a Divi Library layout.

If you choose a WordPress menu, you can select the menu from those you’ve created. You can enable to preview it in the Builder, use a custom display, choose how the menu behaves, make it collapsible, enable accordion, show a direction arrow, choose the icon, etc. This is great for creating custom menus that also use the standard WordPress menus. You’ll need to create a different menu for each one of the menu items where you want to display a WordPress menu.

If you choose Divi Library, you can select the layout to display. This allows you to use Divi layouts as mega menus. To enhance your editing experience, you have the option to enable the “Preview in the Builder” feature. This allows you to view the selected Divi layout within the Divi Builder itself, providing a glimpse of how it will appear outside of the builder. It’s worth noting that certain styles may appear slightly different due to the specific elements within the layout. However, this preview feature serves as a helpful aid, and the final result will be accurately displayed on the frontend.

Show Link Type

DiviMenus Flex also includes the Show link type that will show elements based on the CSS IDs or CSS Class you’ve included. Toggle the visibility, keep it visible, show on hover, hide on button click, hide on page click, and choose the initial state on page load. For example, when clicking on a menu item, you can reveal a specific element with a unique CSS ID, or simultaneously reveal multiple elements on your page with the same CSS Class.

Where to Purchase DiviMenus

DiviMenus is available in the Divi Marketplace for $49. It includes unlimited usage and one year of support and updates and comes with a 30-day money-back guarantee.

Ending Thoughts

That’s our look at DiviMenus. This is a powerful menu builder. I’ve only scratched the surface of what DiviMenus can do. I like that it now includes two modules and adds a logo, the ability to use WordPress menus as submenus, and the ability to easily create mega menus with Divi layouts. I found it intuitive, and it includes all the style options to customize every element of the menu. If you’re interested in a powerful menu builder, DiviMenus is worth a look.

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

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

23.07.2023
Divi Product Highlight: Divi Pixel
Divi Pixel is a third-party plugin for Divi that adds over 45 custom modules and more than 200 settings to extend the capabilities of Divi. These settings make it easy to create websites that stand out from the crowd. In this post, weâ€™ll look at Divi Pixel and see what it can do to help you decide if itâ€™s the right plugin for your needs.

What to Expect from Divi Pixel

Let’s start by taking a look at what you can expect from the Divi Pixel plugin, if you decide to purchase it.

45+ Customizable Modules

Divi Pixel adds a ton of new customizable modules to Divi. There’s a lot of variation in modules. It ranges from a before/after slider, to star rating, floating images, carousels, and more.

200+ Custom Options

Divi pixel also provides you with a ton of custom options, more than 200 extra options to take your website to the next level! These custom options help you customize your Divi website even further. This goes from being able to upload SVG files, to creating a custom login page, customizing your header & navigation, and more.

& More

The options and modules mentioned above aren’t the only ones that come with Divi Pixel. You can expect unique features dedicated to the Blog area and the mobile experience. There’s a also a layout injector included that lets you insert layouts wherever you want!

Installing Divi Pixel

Upload and activate Divi Pixel the same as any plugin. Go to the WordPress dashboard and select:
1. Plugins
2. Add New
3. Upload Plugin
4. Choose File
5. Install Now
Next, activate the plugin. Divi Pixel is now ready to use.

Divi Pixel Settings Screen

The settings are found in the dashboard under Divi > Divi Pixel. They include 7 tabs with detailed options.

The settings add features through CSS class IDs, options to enable, and modules added to the Divi Builder. The newest features are labeled. A few are marked as coming soon.

Weâ€™ll look at the latest features and some interesting features in each tab. Weâ€™ll see many of the settings on the back and front end.

Divi Pixel General Tab

The General tab includes 25 settings that include general options, header and navigation options, and footer options.

Particles Background

The Particles Background displays a CSS class ID to add to the module or section you want to display the background. It includes two class IDs to choose from and you can adjust them in the customizer settings.

Iâ€™ve added the CSS ID to the section.

Hereâ€™s the background with the animated particles enabled.

Maintenance Mode

Maintenance Mode sets your website to show that itâ€™s coming soon or performing updates. Select any page to show as the maintenance mode page. A custom URL provides access to the site.

Hereâ€™s the page I selected for my coming soon page. It now shows this page in place of my home page.

Allow TTF, OTF, and WOFF Uploads

Enabling this lets you upload more file types. These file types can now be uploaded the same as any regular file in your media library.

Custom Header and Navigation Styles

Custom Header and Navigation Styles includes hover animations, custom menu dropdown, CTA button, selecting the menu, button text and URL, CSS, a few mobile settings, and more.

Hereâ€™s the header on the front end. It has added a CTA button with a hover animation.

Footer Customizations

Footer customizations add new features to the theme customizer.

The customizer adds the footer menu, bottom bar, and social icons. Iâ€™ve adjusted the menu and bottom bar in this example. You can also see the custom scroll bar in this image, which is added separately.

Divi Pixel Blog Tab

The Blog tab adds 9 settings and lots of theme customizer options.

Custom Archive Page Style

The custom styles include 6 layouts. Choose from a single column with the image on top, a single column with the image on the left, a single column alternating, two columns with the image on top, three columns with the image on top, and alternating using smaller images. You can also apply these layouts to the Divi Blog Module with the CSS Class.

Hereâ€™s the default setting. It adds styling to all the elements including a styled button. The images are wide. This also shows another setting thatâ€™s enabled by default called Add icons to meta text and the Read More button. It also adds the author box, post navigation, and related posts, which youâ€™ll see on the posts themselves.

Changing the layout is as simple as clicking the one you want and saving the changes. Hereâ€™s the 3-column layout. The images are tall. Iâ€™m hovering over the middle image in the example below to show the overlay.

You can adjust all the styling with the theme customizer. It includes options for the categories, archives, buttons, sidebar, post navigation, author box, related articles, and comments. Iâ€™ve adjusted the title font and excerpt font in the example below. This example also shows the social icons added to the header.

Iâ€™ve adjusted the fonts for the navigation, author box, and related posts. You can adjust all the elements independently. For the author box, Iâ€™ve adjusted the title font, body font, and image.

Divi Pixel Social Media

The Divi Pixel Social Media tab lets you add social media icons to the header. Choose which part of the header the icons are added to, and the social networks to add.

Enable Divi Pixel Social Icons

You can enable the social media icons to display in the header. This also includes options to control how they work on click, for mobile devices, etc.

The icons are placed in the secondary menu by default.

You can also adjust them in the theme customizer. Adjust the icon, background, hover, animation, shape, size, etc. Iâ€™ve added the social icons to the primary menu, adjusted the size of the icons, and the hover settings for the icon and background colors.

Networks

Select from 19 popular networks. Display them by adding your URL.

Divi Pixel Mobile Tab

The mobile tab includes breakpoints, fixing the mobile header, hiding the search icon, changing the logo on mobile, etc. This gives you a lot of control over the mobile settings. You can upload any logo you want.

Mobile Menu

The mobile menu adds 9 settings that include options for the menusâ€™ animation style. Choose from a slider, squeeze, spin, elastic, collapse, stand, spring, minus, and vortex. Simply click the one you want. It shows an animation on the settings screen to give you an idea of how it would work on the front end.

You can adjust all the styling for the hamburger icon in the theme customizer. Adjust the color, open color, background color, opened background color, border radius, padding, etc. In this example, itâ€™s using a different logo, background color, and dropdown menu than the desktop version.

Collapse Submenu Items on Mobiles

Choosing Collapse Submenu Items on Mobiles opens another new option- Remove Parent Menu Link. This prevents the parent menu links from opening.

Divi Pixel Modules Tab

The Module tab adds over 40 new modules to the Divi Builder. Some of these work with the new post types that are added by Divi Pixel and accessed in the WordPress dashboard. You can show or hide them all or enable the specific modules you want. Weâ€™ll look at a few of the Divi Modules.

Testimonials

Testimonials adds a new post type where you can create the testimonials for the module to display. You can create them in the editor or get them from Facebook, Google, and WooCommerce. The editor includes fields for the title, content, image, name, company, website, and rating.

The module displays the testimonials and provides many options, including the number to display, testimonials to include or exclude, which elements to show or hide, popup settings, carousel settings, the review type, and more. All of the standard Divi design options are here as well.

Popup Maker

The popup maker uses the Divi Builder to create the layouts. The editor also includes trigger settings, popup location options, and customization. This one isnâ€™t a module, but you can show or hide it in the module settings. Itâ€™s added to any element with a CSS class ID.

The trigger settings let you choose the trigger events, close options, etc.

The location options include the user roles, site area, and posts that can show the popup. Choose post types, specific posts, and exceptions.

The customization options let you choose the overlay background color, popup animation, position, blur, and more.

FAQ with Schema Markup

Divi Pixel’s FAQ module is built upon Googleâ€™s Structured Data principles. The FAQ builder uses the classic editor. You can create them like any content in the classic editor and add FAQ categories.

Once youâ€™ve built the FAQs, you can display them with the FAQ Module. Show all FAQs or exclude specific FAQs, display by categories, output structured data and HTML, etc. Style them in the design tab.

Balloon

The Balloon Module creates a balloon that is selected as a menu item. Add any content within the balloon and style it in the design tab.

Content Toggle

The Content Toggle Module is interesting. It lets you specify two layouts and provides a toggle so the user can switch between them. Iâ€™ve specified two layouts. The image below shows the first layout.

Clicking the toggle changes to the second layout, as seen below.

Info Circle

The Info Circle Module is an interesting way to display information and content. It lets you add icons or images around a circle. Create as many sets of info as you want, choose icons and images for each one, and style them together or independently.

Divi Pixel Layout Injector Tab

The layout injector lets you select a Divi layout and place it in certain locations on the website. Place the layout before and after the navigation, footer, and after the blog and archive header. It can also build a 404 page.

Divi Pixel Supplementary Files

Divi Pixel also includes many demos you can import to get a head start on your layouts.

Where to Purchase Divi Pixel

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

Ending Thoughts

Thatâ€™s our look at Divi Pixel. There are a lot of features and modules in this plugin. Iâ€™ve only scratched the surface in this post. If you want to extend what you can do with Divi, Divi Pixel is a good place to start.

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

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

Installing Milly Child Theme

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

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

Milly Child Theme Pages and Layouts

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

Pages

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

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

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

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

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

Divi Library

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

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

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

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

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

This section shows a timeline in an alternating layout.

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

This example shows a pricing table.

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

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

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

Theme Builder

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

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

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

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

Milly Child Theme Sales Funnels

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

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

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

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

Milly Child Theme Header

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

Milly Child Theme Icons

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

This example shows the rest of the icons.

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

Milly Child Theme WooCommerce Pages and Layouts

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

Shop Page

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

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

Related products are also shown with a product slider.

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

Cart

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

Milly Theme Options

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

Colors

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

Overlays

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

Preloader

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

Options

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

Milly CSS Classes

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

Where to Purchase Milly Child Theme

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

Ending Thoughts on the Milly Child Theme

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

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

The post Divi Product Highlight: Milly Child Theme appeared first on Elegant Themes Blog.
11.06.2023
How to Create Gradient Dividers with Diviâ€™s Divider Module
Diviâ€™s Divider Module provides several methods to create interesting dividers. One of the most interesting and unique is the ability to create gradient dividers. In this post, weâ€™ll discuss how to create gradient dividers with the Divi Divider Module. Weâ€™ll look at how the gradient dividers work and see three examples to help you create your own.

Letâ€™s get started!

Preview

Desktop Gradient Divider Example One

Phone Gradient Divider Example One

Desktop Gradient Divider Example Two

Phone Gradient Divider Example Two

Desktop Gradient Divider Example Three

Phone Gradient Divider Example Three

How to Create Gradient Dividers with Diviâ€™s Divider Module

There are several ways to create a divider with Diviâ€™s Divider Module. By default, the module displays a divider line. We can disable this and use the moduleâ€™s Background settings to create a divider that we can style with the moduleâ€™s Background options. This includes colors, gradients, images, etc. Rather than showing the divider, weâ€™ll style the dividerâ€™s container and create a styled divider.

Hide Divider

The process is simple. First, add a Divider Module to your layout and then hide the divider in the content tab.

Divider Background

Next, select the type of background youâ€™d like to display in the Background settings in the Content tab. For this post, weâ€™ll focus on the Background Gradient settings.

Add Sizing and Spacing

Use the Sizing and Spacing options in the Design tab to control the height and width of the dividerâ€™s container to create a styled divider in just about any size or shape. Utilize width and height, max width and max height, module alignment, and top and bottom padding to create the size you want.

Add Border Radius

Add Border options, such as Border Radius, to further style the shape. You can adjust the corners together or independently to create interesting shapes. You can also add Border Width, Styles, etc., to create a unique design.

Gradient Divider Examples

Now, letâ€™s create three gradient dividers using the concepts we just discussed.

Gradient Divider Example One

For our first gradient divider, weâ€™ll use the landing page from the free Home Baker Layout Pack thatâ€™s available within Divi. The artwork in this layout pack has strong dark outlines with sharp gradients, all in shades of brown. Weâ€™ll mimic this with our gradient using colors from the layout pack.

For our first example, weâ€™ll use the Divider Module that is already in place in the hero section. This one is simple, but it adds a lot visually.

For reference, hereâ€™s the layout before we add the Divider Module.

Visibility

In the Divider Moduleâ€™s Visibility settings, select No for Show Divider.
- Show Divider: No
Gradient

Scroll down to Background and select the Background Gradient tab. For this one, weâ€™ll add five Gradient Stops. Weâ€™ll leave the rest of the gradient settings at their defaults. Here are the settings for each Gradient Stop.

Set the first Gradient Stop to 0px and its Color to #dcc087.
- First Gradient Stop: 0px, #dcc087
Place the second Gradient Stop at 16px and its Color to #e6b060.
- Second Gradient Stop: 16px, #e6b060
Place the third Gradient Stop at 22px and its Color to #f19d33.
- Third Gradient Stop: 22px, #f19d33
The fourth Gradient Stop almost sits on top of the third Gradient Stop. Place it at 31px and set its Color to #f49826.
- Fourth Gradient Stop: 31px, #f49826
Set the last Gradient Stop at 48px and its Color to #3b261e.
- Fifth Gradient Stop: 48px, #3b261e
Change the Gradient Unit to Pixels. We now have the colors weâ€™re looking for. Now, we just need to optimize the size.
- Gradient Unit: Pixels
Sizing

Next, go to the Design tab. Under Sizing, set the Width to 100%. Set the Height to 40px for all three device sizes. Close the module and save your settings.
- Width: 100%
- Height: 40px
Gradient Divider Example Two

For our second gradient divider, weâ€™ll use the landing page from the free Online Course Layout Pack thatâ€™s available within Divi. This one includes lots of rounded edges and even has a circle with a gradient that overlaps an image.

Weâ€™ll use this as our starting point for the design and create a new gradient divider. Weâ€™ll add a new Divider Module to the Chapter 1 section just to add a graphic.

For reference, hereâ€™s the layout before we add the Divider Module.

Right Column Spacing

First, open the Column settings that contain a description of the first chapter. This is the Right Column in the Row. Go to the Design settings and scroll down to Spacing. Change the Top Padding from 100px to 50px.
- Top Padding: 50px
Add a Divider Module

Next, add a new Divider Module under the Button Module for the chapter description.

Visibility

Open the Divider Moduleâ€™s Visibility settings and select No for Show Divider.
- Show Divider: No
Gradient

Next, scroll down to Background and select the Background Gradient tab. This one has two Gradient Stops. Change the Gradient Direction to 145deg.
- First Gradient Stop: 0px, #26ff5c
- Second Gradient Stop: 100px, #2981b6
- Gradient Direction: 145deg
Sizing

Next, select the Design tab. Under Sizing, change the Width for desktops to 45%. Change tablets to 24vw and phones to 40vw. Change Module Alignment to Center. Set Height to 200px for all devices.
- Width: 45% desktop, 24vw tablet, 40vw phone
- Module Alignment: Center
- Height: 200px
Border

Next, scroll down to Border. Weâ€™ll create an arched shape that mimics the images in the layout. Change the Rounded Corners to 400px for the Left and Right Top and 0px for the Left and Right Bottom. Close the module and save your settings.
- Rounded Corners top left, top right: 400px
- Rounded Corners bottom left, bottom right: 0px
Gradient Divider Example Three

For our third gradient divider, weâ€™ll use the landing page from the free Podcaster Layout Pack thatâ€™s available within Divi. This one has lots of gradient shapes throughout the layout that are made with images and dividers.

Weâ€™ll create a gradient divider with the design cues from those images and other elements. It will combine multiple gradients into one. Our divider will separate the featured episodes from the recent episodes.

For reference, hereâ€™s the layout before we add the Divider Module.

New Row

First, add a new Row above the title. This is where weâ€™ll add the Divider Module.

Add Divider Module

Next, add a Divider Module to the Row.

Visibility

In the Visibility settings, select No for Show Divider.
- Show Divider: No
Gradient

Scroll down to Background and select the Background Gradient tab. For this one, weâ€™ll use four Gradient Stops. Set the Direction to 90deg.
- First Gradient Stop: 0px, #f52791
- Second Gradient Stop: 38px, #3742fb
- Third Gradient Stop: 70px, f7d043
- Fourth Gradient Stop: 100px, #fe386f
- Direction: 90deg
Sizing

Next, go to the Design tab. Under Sizing, set the Height to 60px for desktops, 50px for tablets, and 40px for phones.
- Height: 60px desktop, 50px tablet, 40px phone
Border

Next, scroll down to Border. Set the Rounded Corners to 0px Top Left, 30px Top Right, 30px Bottom Left, and 0px Top Right. This creates a style that matches the email optin section. Close the module and save your settings.
- Top Left: 0px
- Top Right: 40px
- Bottom Left: 40px
- Bottom Right: 0px
Results

Desktop Gradient Divider Example One

Phone Gradient Divider Example One

Desktop Gradient Divider Example Two

Phone Gradient Divider Example Two

Desktop Gradient Divider Example Three

Phone Gradient Divider Example Three

Ending Thoughts

Thatâ€™s our look at how to create gradient dividers with Diviâ€™s Divider Module. The gradient option in the Divider Module works great for creating unique gradient dividers. Utilizing the sizing, spacing, and border corner options provides us with the tools to create gradient dividers in many sizes and shapes. With just a few simple settings, we can create unique gradient dividers that are sure to stand out from the crowd.

We want to hear from you. Do you create gradient dividers with Diviâ€™s Divider Module? Let us know about your experience in the comments.

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

Uploading Divi Footers Pack Layouts

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

Divi Footers Pack Layouts

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

Divi Footers Pack Footer Design 1

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

Here’s how it looks on the front end.

Footer Design 2

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

Footer Design 7

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

Footer Design 12

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

Footer Design 14

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

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

Footer Design 16

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

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

Footer Design 18

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

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

Footer Design 25

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

Footer Design 26

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

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

Footer Design 30

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

Footer Design 34

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

Footer Design 37

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

Footer Design 38

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

Footer Design 41

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

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

Footer Design 43

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

Divi Footers Pack Footer Design 46

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

Footer Design 52

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

Footer Design 55

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

Footer Design 59

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

Divi Footers Pack Footer Design 63

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

Footer Design 67

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

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

Footer Design 69

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

Footer Design 77

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

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

Divi Footers Pack Footer Design 81

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

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

Where to Purchase Divi Footers Pack

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

Ending Thoughts on Divi Footers Pack

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

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

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

What is Divi Block

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

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

Divi Block Online Tool

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

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

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

Block Menu

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

Editing Area

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

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

Header Builder Examples

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

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

Layout Examples

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

This example shows sections for About Us and Services.

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

Here are examples of a testimonial and a team layout.

This one shows a blog layout and client logos.

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

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

This example shows a contact form.

This example shows a footer.

Special Module Design Examples

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

Here’s the masonry gallery.

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

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

This example shows a horizontal timeline and gradient text.

Color Scheme

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

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

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

Designing a Layout with Divi Block

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

Header

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

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

Next, I’ll import the layout.

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

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

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

Homepage

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

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

Next, I’ll import the layout.

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

Here’s a portion of the CTA.

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

Footer

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

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

Next, I’ll import the layout.

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

Here’s the footer on the front end.

Where to Get Divi Block

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

Ending Thoughts

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

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

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