Tag: Divi Plugin Highlight

Divi Plugin Highlight: Woo Essential

Woo Essential is a third-party plugin that adds 8 new Woo Commerce Modules to the Divi Builder. It also adds several features to streamline the shopping process, allowing you to display products and categories in multiple layouts and lots of feature options. In this post, weâ€™ll look at the modules and features of Woo Essential to help you decide if itâ€™s the right product for your needs.

Woo Essential Divi Modules

Woo Essential adds 8 modules to the Divi Builder. Some of the features require YITH WooCommerce Compare and YITH WooCommerce Wishlist plugins. The free versions are fine for this. Youâ€™ll see a notification if you donâ€™t have these installed. Simply click the notification to install and activate them after activating the Woo Essential plugin.

You wonâ€™t see all the modules in the Divi Builder at first. Instead, youâ€™ll see one module called Woo Essential. Click this module.

All the Woo Essential Modules will then display in the modal. You can now add the modules to any Divi layout to display WooCommerce products.

Letâ€™s take a closer look at each of the Woo Essential Modules. Iâ€™ll show the default settings and then show an example of some of the design features.

Woo Category Accordion

The Woo Category Accordion Module displays the images for the product categories. The images expand on hover to show a description of the category and the number of items in that category. It will show the category image if you have one set up.

You have full control over the design for every element. In this example, Iâ€™ve added a box shadow, rounded the corners, and changed the font colors and sizes for the category name, count, and description. Iâ€™ve also added padding and line height to the description.

Woo Category Carousel

The Woo Category Carousel creates a slider complete with navigation and automatic sliding.Â It has lots of settings to adjust the carousel.

Woo Category Grid

The Woo Category Grid displays the categories as cards in a grid. The grid is adjustable, so you can change the number of columns.

For this one, Iâ€™ve added a border, rounded the corners, adjusted the fonts, and changed the grid count and gap settings.

Woo Category Masonry

The Woo Category Masonry Module places the categories within a masonry grid.

In this example, Iâ€™ve adjusted the grid number and gap, and changed the fonts.

Woo Product Accordion

The Woo Product Accordion works like the Woo Category Accordion except it shows the products themselves. It expands on hover to show the product information. Choose which elements to display from the Add to Cart button, price, star rating, description, Featured Product Badge, Sale Badge type, and Sale Badge text. You can also control how the accordion works. All the product modules show the featured image by default.

In this example, Iâ€™ve adjusted the content background, changed the font colors, changed the badge color, increased the product name font size, and changed the add to cart button color.

Woo Product Carousel

The Woo Product Carousel displays the products in one of six layout options. Each includes a different hover effect for the buttons. You can also choose which elements to display, adjust the carousel settings, etc.

You can adjust every element independently. Iâ€™ve adjusted lots of the colors, borders, and fonts in this example. Iâ€™ve also added arrow navigation. This is Layout 3, which places the cart and other links at the bottom of the image on hover.

Woo Product Filter

The Woo Product Filter adds a WooCommerce product grid with a customizable filter. You can choose which of the elements to display.

You have full control over every element including the filter, grid, fonts, colors, etc. Iâ€™ve changed several of the colors, the font sizes, and adjusted the grid count in this example. Iâ€™ve also added a box shadow to both the filter and the product grid.

Woo Product Grid

The Woo Product Grid Module displays the products in a grid with a banner that shows the product counts. It has 8 layout options for the grid that changes the size of the image and places the buttons in different locations on hover. You can select the elements that display. This shows layout 8, which places the icons on the right of the image and the Add to Cart button at the bottom of the image on hover.

You can add pagination with buttons to each page or a Load More button. Iâ€™ve added the Load More button in this example and styled it. This is layout 3, which places the title and price under the image and adds the icons close to the bottom of the image on hover.

More Woo Essential Features

There are lots of features, most included within the modules, that add functionality to the WooCommerce listings. Hereâ€™s a quick look at several of those features.

Woo Essential Woo Mini Cart

The Mini Cart feature adds a popup menu to the shopping cart. Itâ€™s automatically added to the default WordPress header. It only works with the default header, so you wonâ€™t be able to add it to headers created with the Divi Builder. This means itâ€™s not as versatile as the other features of this plugin. You can customize all three of its elements independently with the Theme Customizer.

It includes four sections of settings for the main cart settings, cart design, view cart button, and checkout button.

Control how it works and change the size, shape, colors, fonts, icons, etc. Have it open on hover, on click, or slide from the right or left.

The Mini Cart opens a small modal showing the contents of your cart. It can also open a window to the right or left, depending on your settings. This example shows the modal opening on hover. The Fly-In option, which slides from the right or left, gives the modal the full height of the screen.

Woo Essential Quickview Popup

You can view the item details without leaving the current page. The quick view icon is added to several of the modules. Clicking this icon opens the details in a modal. The popup is fast and makes it easy to see the details of the product without loading another page.

The details include all the product information such as the description, gallery, Add to Cart button, category, etc.

Woo Essential Compare Products

You can compare multiple products by selecting the comparison icon. This process can be a little tricky at first, so many users might not be aware they can compare products.

To do the comparison, view the products individually that you want to compare. Then, click the compare icon on one of the products. The comparison modal with open with the products compared in a table. This does work, but it isnâ€™t as intuitive as I like. It did take a little work to figure out. The information I needed was in the documentation. You can scroll through the comparison and close the modal when youâ€™re ready.

Woo Essential Settings

Woo Essential adds a link to the WordPress dashboard. Select this link to open the settings. The first page, Home, includes links to the Knowledge Base, Support and Feedback, Feature Request, and the DiviNext YouTube Chanel.

Select Modules to see the second page. Here, you can disable or enable any of the Woo Essential Modules. This is good if you want to restrict the design to just a few modules. All are enabled by default.

Woo Essential Templates

The publisherâ€™s website contains 8 free starter layouts to help you get started with your designs. They also require another Divi plugin to work, so their usability is limited to those with both plugins. They look great and provide lots of sections to use.

Purchase Woo Essential

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

Ending Thoughts

Thatâ€™s our look at Woo Essentials for Divi. These 8 Divi Modules provide lots of options for product grids and accordions. Display individual products and categories with ease and style them with the Divi Builder. Easily see the content in the cart, the product details, and compare products. I would like to see the Mini Cart as a Divi Module so it can be added to headers created with the Divi Builder. It does work well, though, if youâ€™re using the default WordPress header. If youâ€™re interested in expanding your WooCommerce product pages with lots of interesting grids, Woo Essentials is worth a look.

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

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

19.02.2023
Divi Plugin Highlight: Divi Ajax Filter

Divi Ajax Filter is a third-party plugin that adds several new modules to the Divi Builder. These modules work together to create simple or complex filters. Divi Ajax Filter works with pages, posts, projects, and custom post types such as WooCommerce products and Advanced Custom Fields. In this post, weâ€™ll look at Divi Ajax Filter and see how it works to help you decide if this is the right product for your needs. We’ll be using the Divi Whiskey Layout Pack to showcase how you can use this plugin in the wild.

Divi Ajax Filter Modules

Divi Ajax Filter adds a block to the Divi Builder. Clicking this opens a submenu with the Ajax Filter Modules. The modules work together to a list of posts with a filter. You can use them to create layouts or display layouts youâ€™ve created.

Archive Loop â€“ Divi Ajax Filter

The Archive Loop Module displays any loop layout that you choose to display products or posts. In other words, it displays a list of the custom post type you choose. If you choose the product post type, it will display a list of your products. It canâ€™t be used in the Custom Loop Layout. Itâ€™s designed to be used with archives, category pages, and general pages.

Until you create and specify a loop layout, youâ€™ll see a message to create one. The loop layout should be created with the Divi Ajax Modules such as the Post Title and Thumbnail. You can also choose the default WooCommerce loop.

Module Options

You can also choose the post type such as posts, pages, media, projects, and products. Have it auto-detect your post type or set variable products as single products.

For the loop style, choose between a WooCommerce layout or a custom layout. If you choose Custom Layout, youâ€™ll see another dropdown box where you can choose a layout from your Divi Library.

Choose the number of posts to display. This gives you control over the number thatâ€™s displayed within the moduleâ€™s area, but you can show more posts with pagination a Load More button. Setting it as the main loop makes it the list of posts the filter controls. You can also add an order by sorting option and show the number of results.

The number of results still shows 1-9 results in the Divi Builder, but it will show the correct number of results on the front end as shown in the example below.

There are several options for how pagination is displayed. Choose from Load More, standard pagination, an infinite scroll, or none.

Have it scroll to the top after the ajax update or disable the feature. You can also fine-tune the paginationâ€™s position.

Disable, exclude, or include lots of elements such as products when the category has child categories, specific categories, and products. You can also set certain items to be included on load only. Enter them into the fields with commas.

Choose the animation for the filter and the infinite scroll option. It has six animations to choose from including three lines vertical, three lines horizontal, three dots bouncing, donut, donut multiple, and ripple. The animations are smooth and give it an extra sparkle.

Custom Layout Options

The Custom Layout Options let you choose a layout that youâ€™ve created to use as your custom taxonomy. You can also specify the custom taxonomies to include.

Default Layout Options

The default layout options let you choose between a grid or a classic blog layout. For the grid, choose the number of columns to display. You can also show the rating, excerpt, price, and the add to cart button.

Hereâ€™s how it looks on the front end. Iâ€™ve set it to display a grid with 4 columns. Iâ€™ve also disabled the excerpt option.

This one also includes color and padding options. Change the color of the sale badge, star ratings, and the productâ€™s background. Use the slider to add padding to all four sides of the product. Iâ€™ve added some padding, colored the stars, and changed the color of the Sale Badge color.

Hereâ€™s how it looks on the front end.

Design Settings

Design settings include detailed options for every element including fonts, colors, spacing, and the rest of the standard Divi settings.

Filter Posts â€“ Divi Ajax Filter

The Filter Posts Module works with the Archive Loop Module to filter the posts it displays. It shouldnâ€™t be used in the custom loop layout. The filter items are submodules. You can add as many as you want to create the filter.

New Filter Item

Adding a new filter item opens its submodule. This includes lots of settings. The Main Settings let you choose what to filter between categories, tags, prices, ratings, attributes, and custom taxonomies. You can also create a search box. Choose the post types, values, exclude options, etc.

Layout lets you choose to show the filter parameters, show the label, and select the filter width.

The Select options let you enable Select2 and change the option text.

Category, Tags, and Taxonomy lets you choose how the terms are ordered in the list, the display mode, the prefix, and the collapse options.

Range gives you full control over the filterâ€™s range settings. Hide the labels, choose the value type, set the range, choose the step levels, adjust the appearance, choose before and after text, and more.

Conditional Logic lets you create logic rules for the filter. This means you can fine-tune the filter to control the filter and make it as smart as possible.

Add multiple filter items to create the exact filter you want. Iâ€™ve created a filter with a search option, categories, tags, and prices. Users can select one of the filter tools or use them together.

Main Filter Post Settings

The Main Options include the filter update type (choose from a button click or a field change), choosing where it scrolls, adding text for the search and reset buttons, and enabling Select2.

The Layout Options determine the layout of the filter elements. Choose a side Colome or full-width column, set the sizes, the filter style between toggle and slide, and hide or show the buttons.

Mobile Options add toggles, let you choose the toggle style, change the button text, and toggle the filters individually.

Post Title â€“ Archive Pages

The Post Title Module displays the title and lets you choose the heading level, link to a single page, open a new tab, and enter the URL.

The Design tab includes separate settings for post titles and product titles. All the standard settings are included.

Thumbnail â€“ Divi Ajax Filter

The Thumbnail Module lets you choose the image size, link the image to a single page, use placeholder images with Advanced Custom Fields, open in a new tab, enable a title tag, and choose the image style.

The Thumbnail Image Sizes include lots of options.

Building a Product Filter

Firstly, Iâ€™ll build a product filter using the Archive Loop Module and the Filter Posts Module.

Next, for the Archive Loop Module, Iâ€™ve set it to Products and selected the default WooCommerce layout. This gives us the image, title, and price by default. Iâ€™ve set it as the main loop and enabled the Order By Menu and the Results Count. I selected Load More for the loading option. The Layout is set to a grid with 3 columns. Iâ€™ve also selected to show the rating, price, excerpt, and Add to Cart Button. The Sale Badge and Star Ratings have custom colors, and Iâ€™ve added some padding to the product.

Next are the design settings. Iâ€™ve adjusted the colors and styles of the individual text elements as well as the Add to Cart button.

Lastly, for the filter, Iâ€™ve added search, categories, price, and rating.Â For the category filter, I selected Radio Buttons. The Price is set between $5 and $100.

For the Filterâ€™s design settings, Iâ€™ve adjusted the font colors, button colors, etc.

Product Filter Results

Hereâ€™s how it looks on the front end with the stylings of the Divi Whiskey Layout Pack.

Hereâ€™s the sorting feature. Userâ€™s can select the default sorting, sort by popularity, average rating, latest, price low to high, or price high to low.

Here are the results for the search option. Iâ€™m using the WooCommerce demo products. I searched for â€œpinkâ€ and found two results.

For the categories, I selected the “Kitchen” category radio button and found the four results.

In this example, Iâ€™ve filtered the products by price range. Iâ€™ve selected 5-30 and sorted by price from low to high.

You can also use the filters together. For this example, Iâ€™ve selected the “Kitchen” category and set the price range from $30 to $50. It shows the products in my inventory in that category and price range.

Where to Purchase Divi Ajax Filter

Divi Ajax Filter is available in the Divi Marketplace for $97. It includes one year of support and updates and a 30-day money-back guarantee.

Ending Thoughts

Thatâ€™s our look at Divi Ajax Filter. This is a powerful set of modules for the Divi Builder that creates amazing filters for lots of WordPress post types. Divi Ajax Filter is complex. It does take some time to learn, but itâ€™s not too difficult to understand and use once you get started. Following the demos will save you some time and reduce the learning curve considerably. If youâ€™re interested in an advanced filter for your post types, Divi Ajax Filter is a great choice.

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

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

25.12.2022
Divi Plugin Highlight: Divi WooCommerce Extended
Divi WooCommerce Extended is a third-party plugin for Divi with the goal of being the only tool youâ€™ll need to build eCommerce websites with Divi. It includes five modules with lots of features and options. In this post, weâ€™ll look at Divi WooCommerce Extended to help you decide if itâ€™s the right product to design your WooCommerce shop.

Divi WooCommerce Extended Modules

Divi WooCommerce Extended adds 5 modules to the Divi Builder. The modules can be used together, independently, on product pages, shop pages, and regular pages.

Features include:
1. Mini Cart
2. Quick View
3. Product Carousel
4. Categories
5. Ajax Search
6. Tab Manager
7. Checkout Manager and
8. Divi Library Shortcode Extension
Weâ€™ll take a closer look at each module, through the eyes of our Perfumery Layout Pack.

Divi WooCommerce Extended Mini Cart

The Mini Cart Module provides lots of display options for the cart icon. For the icon type, choose from Diviâ€™s native icons or a custom icon. The native icons include an icon picker.

The custom option lets you choose an icon or image from your Media Library.

The mini cart can display as a dropdown, overlay, off canvas, or modal. Trigger options include click or hover. Placement options include the top or bottom and on the right or left. You can also add a title and choose the elements that display from a list.

Text options include the view cart button, checkout button, and empty cart text. It also includes a separate option for the cart background.

Design Settings

The Design settings let you customize the icon color, size, line height, text shadow, fonts, etc. It includes options for all the text including the product count, mini cart title, product name, quantity, and price, subtotal. It also includes settings for the view cart button, checkout button, empty cart, cart sizing, and standard settings. For this example, Iâ€™ve changed the icon color and size and added a text shadow. The text options donâ€™t show in the Visual Builder, so youâ€™ll have to see them on the front end.

Mini Cart Examples

This example shows Dropdown. Iâ€™ve added a DWE Products Module and added a few products to my shopping cart. The number of items in the cart appears above the cart icon. When I click on the cart, a dropdown opens to show the contents of my cart. All the elements can be styled. Iâ€™ve changed the color and size of the cart, added a shadow, changed the font and increased the size of the fonts. Iâ€™ve also styled the buttons to match the buttons within the layout pack.

This example shows Overlay. You can place it in any of the four corners of the screen.

This example shows Off Canvas. The screen is pushed to one side as the contents are locked into place. Clicking anywhere on the screen closes the window. It can be placed on the right or left side of the screen.

This example shows Modal. It displays the cart content over the screen and includes adjustments to show the close button, the close button position, chose close or esc, and close on background click.

Divi WooCommerce Extended Product Ajax Search

Divi WooCommerce Extended Product Ajax Search adds a fully customizable product search. The Configuration customizations include the search field placeholder, number of search results, order by, order, and the text for no results.

Search Area

For the search area, you can choose where the module will perform the search. You can use these settings to make the search as wide or as narrow as you want.

Display

The display options let you choose what to show. You can show the search icon, choose the fields, select the number of columns, and choose the column spacing. You can also show or hide the scrollbar.

Background

It includes lots of background options that include the search result box background, search result item background, and regular background settings.

Design Settings

The Design settings include all the font adjustments, borders, backgrounds, etc. Adjust the fields, search icon, loader, and more. In this example, Iâ€™ve changed the fonts and styled the search icon. Iâ€™ve also rounded the corners and changed the colors.

Product Ajax Search Examples

Hereâ€™s how the search results look with the default settings of 1 column using my design settings from the example above.

This example shows 2 columns.

Divi WooCommerce Extended Products

Divi WooCommerce Extended Products displays the WooCommerce products as cards within a grid. Itâ€™s fully adjustable with several view types and layouts. This example uses the default view type and layout 1. You can choose the number of products to display, add an offset number in case a product is already being displayed in another module and set the order options.

For the view type, choose the default option or select to show featured products, sale products, best-selling products, or top-rated products.

It includes 3 layout options. They place the elements in different locations within the cards. Layout 1 places the price above the add-to-cart button. This example shows layout 2, which places them side-by-side.

Layout 3 places the add to cart button above the title.

You can show or hide the out-of-stock products. If you hide them, you can label them as out-of-stock if you want or add any label you want to use. You can also choose the categories and tags to include and choose the taxonomy relation for some logic control.

Display

The display options let you choose the number of columns, the space between the columns, show masonry, show a sorting dropdown, display a quick view link, add quick view text and an icon, choose which elements to show, add zoom effects, choose the thumbnail size, and lots more. You can enable any of the elements individually, so you can disable the images, sale badge, etc. Iâ€™ve changed this example to 2 columns, styled the Sale label and customized the button.

Pagination

Pagination adds page numbers. You can also enable the previous and next links and add the text you want them to display.

Product Background

The product background settings control the background for the text area of the card.

Design Settings

The Design settings let you adjust every element independently. You have full control over the sizes, colors, fonts, backgrounds, borders, etc. Iâ€™ve adjusted many of the settings in this example.

Divi WooCommerce Extended Products Carousel

Divi WooCommerce Extended Products Carousel presents the WooCommerce products within a slider. It includes the same settings as the WCE Products Module and adds those for the carousel. You can select the product type, layout, number to display, the sorting order, hide products out of stock, choose categories, etc.

Display

All the display options are also the same. Show a quick view button, choose the elements to show or hide, add text, and show the sale badge.

Slider

It doesnâ€™t include pagination. Instead, it has slider options. Choose the slide effect between Slide, Cube, Coverflow, and Flip. Each of the options has different settings. Select the number of products to display within a slide, adjust the space between the slides, equalize the heights, enable loop, enable autoplay, adjust the speed, etc. This example shows Coverflow.

The slider also includes the standard types of navigation. You can show them or disable them. You can also choose the arrows from the list of icons, show them only on hover, and choose their position from 8 options. This shows the default option inside the slider. This example shows Arrows in their default position.

This example shows the arrows in the top center.

It also includes dot pagination with 6 styles to choose from. This example shows Solid Dot.

This example shows Rounded Line.

It also has an option called Dynamic Dots. This changes the sizes of the dots to show those closest to the current slide are larger than those that are further away.

Design Settings

The Design settings include options for every element of the slider. Iâ€™ve adjusted font colors, background colors, borders, arrows, and dots in this example.

Divi WooCommerce Extended Products Categories

Divi WooCommerce Extended Products Categories creates cards that represent each of the categories in your WooCommerce shop. It includes 2 layouts, and you can select the categories you want to display. This is layout 1. It places the title and number of items in that category under the featured image for the category.

This is layout 2. It places the title and number of items over the image and displays the card as an outlined square.

Display

The display options include the number of columns, column spacing, masonry, thumbnail, zoom effect, thumbnail size, and product count.

Background

The background settings place a background color behind the title and product counts.

Hereâ€™s how the background looks with layout 2.

Design Settings

The design settings include options for all the elements. In this example, Iâ€™ve adjusted the text colors, sizes, weights, spacing to match the styling we’ve used across the page template and from the Perfumery Layout Pack.

Where to Purchase Divi WooCommerce Extended

Divi WooCommerce Extended is available in the Divi Marketplace for $59. It includes unlimited usage, 1 year of support and updates, and a 20-day money-back guarantee.

Ending Thoughts

Thatâ€™s our quick look at Divi WooCommerce Extended. These five modules add a lot of features to Divi for building shop pages for your WooCommerce products. Iâ€™ve only touched on the main features and itâ€™s easy to see how powerful it is. If youâ€™re interested in adding new features to your WooCommerce shop, Divi WooCommerce Extended is worth a look.

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

The post Divi Plugin Highlight: Divi WooCommerce Extended appeared first on Elegant Themes Blog.
01.11.2022
Divi Plugin Highlight: Divi Elastic Gallery

Divi Elastic Gallery is a third-party plugin for Divi that adds a new gallery module to the Divi Builder. Display images with several layout options, choose how the images react when clicked, adjust the captions, titles, filter, pagination, and more. In this post, weâ€™ll take a close look at Divi Elastic Gallery to help you decide if itâ€™s the right Divi Module for your needs.

Divi Elastic Gallery Module

Divi Elastic Gallery adds a new module to the Divi Builder called Elastic Gallery.

The moduleâ€™s Content tab includes Gallery Settings, Background, and Admin Label. Gallery Settings includes the image selector and lots of image adjustments. To add images to the gallery, select Add Gallery Images. The Media Library will open, and you can choose the images you want to display.

Gallery Settings

Adding images automatically display them in the gallery. You can add as many as you want and it doesnâ€™t matter what size they are.

Iâ€™ve selected images of various sizes for the example below. The images have automatically adjusted in size to fit the space. This created a mosaic with various columns. We can adjust the number of images per row, the height of the images, the space between them, the image size, etc. Weâ€™ll look at a few of the settings.

Row Height and Space Between the Images

A couple of these settings took me a minute to understand. Hereâ€™s my explanation of each setting based on the documentation and my tests.

The Minimum Row Height adds images to each row until the size is higher than the minimum. Using a lower number displays more images in the gallery. In the example below, Iâ€™ve set the Minimum Row Height to 145.

Minimum Row Images determines the number of images that will appear in as many rows as possible, starting with the bottom row. In the example below, Iâ€™ve set the Minimum Row Images to 6. The bottom row displays 6 images, and the top row displays 3. If I set it to 4, the top row displays one image and the second and third rows display 4 images.

Space Between Images determines the number of pixels between each image on the top, bottom, and sides. Iâ€™ve set the example below to 21 pixels and there are 21 pixels on all sides between every image.

Image Onclick Action

The Image Onclick Action determines what happens when the user clicks an image in the gallery. It can open the image in a lightbox, link to other pages, or do nothing. If you have it open in a lightbox, youâ€™ll see options for the lightbox. If you have it to link to other pages, youâ€™ll see a field where you can enter each URL with instructions on how to add the links.

Hereâ€™s a look at the lightbox options. You can adjust the lightbox color and choose between five options for the image title and caption in the popup. Show nothing, the title outside the image, the title and caption outside the image, the title inside the image, or the title and caption inside the image. Showing the title adds an option for the legend color.

Hereâ€™s the default lightbox. It has a dark background, arrow navigation, a close icon, and a title under the image.

For this example, Iâ€™ve added the title inside the image and changed the background color.

Categories Filter

The Categories Filter lets you choose the categories to display and change the text for the All Categories button.

Pagination

The Pagination option adds pagination under the gallery. You can also choose the page size, which determines the number of images that displays on each page. in this example, I’ve selected a Page Size of 4. This shows 4 images per page and creates 3 pages to show my images.

Divi Elastic Gallery Design Options

The Elastic Gallery Module includes all the standard Divi settings, allowing you full control over the styling of each element. Hereâ€™s a look at the main settings.

Overlay

The Overlay settings let you choose between showing an icon, the image title to display in the overlay, or only showing the overlay. Change the colors and fonts with the standard Divi settings. in the example below, Iâ€™ve selected to show the title and changed the overlay color, font color, font size, style, and added a shadow to the font.

Hover Animations

The hover animations determine how the overlay appears when the user hovers over the image. Choose from 7 animations or disable animations.

You can also choose an animation for the image that takes place at the same time as the overlay animation. Choose from 5 animations or disable the image animation. Iâ€™ve selected Grayscale to Color in the example below. This changes the images to grayscale and shows the image in color when you hover over it.

Images

The Image settings control the rounded corners and border. Adjust the borderâ€™s styles, width, and color. In the example below, Iâ€™ve made the rounded corners 30px, added a 1-pixel border, and changed the color to purple.

Gallery Filter

The Gallery Filter has an amazing number of options. Adjust the alignment, color, fonts, borders, etc., for the category buttons, and then adjust the current category independently. The currently active category will use the regular filter settings if you donâ€™t adjust it separately.

In the example below, Iâ€™ve set the filter to display on the right. Iâ€™ve also increased the size of the fonts, font style, and weight, added line length, changed the background color, added a border, rounded two of the corners, and added right and left padding. I customized the active category independently.

Gallery Pagination

The Gallery Pagination also has an amazing number of options. Adjust the alignment, colors, fonts, borders, spacing, shadows, and more. In this example, Iâ€™ve adjusted the size of the fonts, changed their weight, rounded the corners, changed the colors of the fonts and backgrounds, and given them a box shadow. Iâ€™ve also added a border to the active page, squared the corners, reversed the colors, and increased the size of its font.

Divi Elastic Gallery Example

Hereâ€™s how Divi Elastic Gallery looks within a layout. Iâ€™m using the free Leather Goods Layout Pack thatâ€™s available within Divi. Iâ€™ve made the gallery full width changed the colors to match the layout and changed the images to grayscale and have them change to color on hover. The space between the images is zero. The font is Inter, with bold for the weight, and TT for the style. Iâ€™ve added 20px Padding to the top and bottom and 30px Padding to the left and right.

This example shows the Elastic Gallery with one of the images showing the hover effect. It was easy to make the gallery match the layout.

Purchase Divi Elastic Gallery

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

Ending Thoughts

Thatâ€™s our look at Divi Elastic Gallery. This is a simple module, but it has a lot of display and styling options to create just about any type of gallery you need. A couple of the Min settings take some tweaking to get the design you want, but I was impressed with the layouts I was able to get from it. If youâ€™re interested in a feature-rich gallery module for Divi, Elastic Gallery is worth a look.

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

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

30.10.2022
Divi Product Highlight: Ultimate Divi Modules UI Bundle

Ultimate Divi Modules UI Bundle is a third-party layout bundle for Divi. This bundle includes lots of pre-styled layouts, modules, and extras. This bundle is always growing and currently includes over 3600 styles and 35 layout packs. Theyâ€™re Divi Library layouts, so they can be customized and used the same as any Divi layout â€” including being added to your Divi Cloud! In this post, weâ€™ll look at some of the new additions to the Ultimate Divi Modules UI Bundle to help you decide if this Divi product is right for you.

Letâ€™s get started.

Uploading Ultimate Divi Modules UI Bundle Layouts

Ultimate Divi Modules UI Bundle Layouts are provided as JSON files with 10 layouts per file. Upload them to your Divi Library as normal by going to Divi > Divi Library in the WordPress dashboard. Select Import & Export, choose the Import tab of the modal that opens, navigate to and select your JSON file, and click Import Divi Builder Layouts. You can then use the layouts the same way as any Divi layout including the Divi Theme Builder and Divi Cloud.

Ultimate Divi Modules UI Bundle Page Layouts

Ultimate Divi Modules UI Bundle now has over 82 modules, 3600 styles, and 35 complete website layout packs. The bundle has added over 1600 styles and 24 layouts since last October. In the following sections, weâ€™ll look at some of the new additions.

Blog Layouts

Ultimate Divi Modules UI Bundle has 50 blog layouts. They include the blog and code modules for CSS and JS code. The example below shows layouts 41 and 42. Both add the publish date over the blog image. Layout 41 places the title and author name over the image while layout 42 places them under the image. A line separates the title and author name.

Blog layout 47 includes an interesting design with the meta and content overlapping the image.

Blog layout 50 places the blog posts in a single column. The date sits over the featured image and the content includes a dark blue background.

Content Ticker

The bundle includes 15 content tickers created with text modules, content sliders, and styled with CSS. The example below shows styles 11 through 13. The title sits on one side and includes a darker background. The sliders create the tickers and include a lighter background and navigation styled to match the title.

Portfolio Modules

The bundle includes 50 portfolio modules. They add interesting overlays with animations to the featured images. This example shows Portfolio Module 41. Its overlay has a dark blue background with white text and a light blue divider line.

This example shows style 43. Its overlay includes a white background with a parallelogram shape. The text is dark and light blue.

Ultimate Divi Modules UI Bundle WooCommerce

The bundle adds lots of WooCommerce layouts including footers, widgets, tickers, and more. This is the Woo Category Block style 8. It includes multiple Woo Product Modules in a unique layout. It has a gray overlay that changes the text to white.

Style 10 adds text to the productâ€™s image. An overlay with a blue background and white text.

Ultimate Divi Modules UI Bundle Layout Packs

Ultimate Divi Modules UI Bundle also includes layout packs to build complete websites. Import a single page or the enter layout pack at once. Most have between 13-15 page layouts. Weâ€™ll look at the home page for a few of the new layouts as this will show many of the styled modules.

Content Writer Layout Pack

The Content Writer Layout Pack includes 13 pages. The layouts include lots of styled modules, icons, animations, and more. It includes all the standard pages and adds a History page for information about the company and how they work.

This example shows the design of the Content Writer home page layout. It includes red highlights throughout. The unique Person Modules reveal the social icons on hover. The style of the Blog Module includes text that overlaps the featured image.

Divi Agency Layout Pack

The Divi Agency Layout Pack also includes 13-page layouts. It includes the standard pages and adds a Careers page.

The home page includes lots of styled modules with animations for the buttons, sliding backgrounds for the services, social media icons and image color changes for the Person Modules, and overlays for the Portfolio Module.

Music Concert Layout Pack

The Music Concert bundle was designed to create a website where bands can showcase their concerts. The layout pack includes 15 layouts. Several of the layouts are designed specifically for bands including a page to apply to be an artist. This also includes a blog layout page and a page with code.

The home page includes a slider for the latest events. The Person Modules display social icons on hover. Top events show in another slider. Blurbs display a faint number in the background.

Fashion Shop Layout Pack

The Ultimate Divi Modules UI Bundle Fashion Shop layout bundle is one of several that was designed for use with WooCommerce. It comes with 44 layouts with a combination of pages and modules. They include sliders, shop grids, carousels, widgets, etc. Many of them include multiple module designs, making them ideal for creating unique shop and product pages.

The home page displays a slider to several shop pages, numbered blurbs, shop CTAs with custom overlays, multiple product grids, a styled newsletter form, and lots more.

Promotion Block Style V1 to V3

Hereâ€™s a look at the promotion blocks. It includes three different designs. The first design places images in a grid with text and buttons over the images. It includes a styled overlay animation.

The second design has a grid without space between the images. It doesnâ€™t include an overlay, but it does add a CTA.

The third layout adds another column to the grid with taller images on the outside and wider images in the middle.

Promotion Banner V1 to V3

The layout pack also includes three full-width banners to promote sales and work as CTAs that point to the shop. The image below shows all three banners.

Product Showcase

The product showcase displays the WooCommerce product element on one side and a custom product element on the other in an alternating layout.

Purchase Ultimate Divi Modules UI Bundle

Ultimate Divi Modules UI Bundle is available in the Divi Marketplace. The regular price is $149 but might be discounted. It includes unlimited usage and lifetime updates.

Ending Thoughts

Thatâ€™s our look at the Ultimate Divi Modules UI Bundle. This bundle has lots of layouts and modules to help you get started on any type of website. This bundle includes many layouts, modules, and elements to give you a head start on your Divi website. Weâ€™ve only scratched the surface of whatâ€™s included in this layout bundle. There is a lot here for the money.

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

The post Divi Product Highlight: Ultimate Divi Modules UI Bundle appeared first on Elegant Themes Blog.

09.10.2022