Tag: divi marketplace

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

Let’s get started!

Installing DiviCity

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

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

DiviCity

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

DiviCity Header Section

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

DiviCity About Section

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

DiviCity Blog Section

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

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

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

DiviCity Numbers Section

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

DiviCity What to Do Section

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

DiviCity Where to Do It Section

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

DiviCity Visit Us Section

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

DiviCity Contact Section

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

DiviCity Mobile Layout

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

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

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

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

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

Purchase DiviCity

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

Final Thoughts

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

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

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

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

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

Let’s get started!

Installing Divi Timeline Layouts Pack

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

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

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

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

Divi Timeline Layouts Pack

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

Layout 1

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

Layout 3

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

Layout 6

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

Layout 8

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

Layout 10

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

Layout 14

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

Layout 18

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

Layout 20

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

Layout 22

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

Layout 29

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

Layout 33

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

Layout 37

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

Layout 40

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

Layout 48

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

Layout 53

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

Layout 59

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

Layout 62

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

Layout 66

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

Layout 68

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

Layout 72

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

Layout 76

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

Layout 79

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

Layout 81

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

Layout 85

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

Layout 88

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

Layout 90

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

Layout 94

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

Layout 96

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

Layout 98

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

Layout 100

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

Purchase Divi Timeline Layouts Pack

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

Final Thoughts

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

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

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

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

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

Let’s get started!

Installing Divi Contact Form Helper

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

Once the plugin is installed, activate the plugin.

Divi Contact Form Helper

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

Contact Form Module

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

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

Field Content Settings

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

Text Settings

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

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

Field Options Settings

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

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

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

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

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

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

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

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

And here is the alternative inline layout.

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

Here is the column layout with 2 columns.

And here is the inline layout.

File Upload Settings

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

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

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

Date Time Settings

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

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

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

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

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

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

Form Content Settings

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

Admin Email Settings

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

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

Confirmation Email Settings

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

Submission Entries

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

Submit Button

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

Integrations

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

After Submission Behavior

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

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

Admin Label

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

Design Settings

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

Field Label, Field Description, Success Message Text Settings

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

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

Success Button Settings

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

Here is the customized success button on the front end.

Date/Time Picker Settings

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

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

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

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

Submit Button

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

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

Border

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

Here is the focus input border highlighting the name field.

Dashboard

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

Entries

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

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

Send Email

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

Create Template

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

Create Post

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

Export CSV

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

Forms

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

Theme Options

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

General Settings

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

SMTP Settings

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

Auto Backup Settings

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

Custom Label Text

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

Divi Contact Form Helper Examples

Example 1

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

Example 2

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

Purchase Divi Contact Form Helper

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

Final Thoughts

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

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

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

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

DiviFlash Modules

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

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

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

Advanced Blurb

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

Advanced Carousel

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

Advanced Divider

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

Advanced Heading

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

Advanced List

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

Advanced Person

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

Advanced Tabs

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

Before and After Slider

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

Breadcrumbs

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

Business Hours

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

Data Table

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

Image Accordion

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

Image Carousel

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

Image Mask

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

Packery Gallery

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

Post Carousel

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

Post Grid

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

Scroll Image

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

Star Rating

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

Table

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

Testimonial Carousel

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

DiviFlash Plugin Settings

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

DiviFlash Extensions

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

Menu Extension Settings

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

Import/Export Settings

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

DiviFlash Layout Packs

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

Where to Purchase DiviFlash

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

Ending Thoughts

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

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

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

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

Let’s get started!

Installing Divi Headers Pack

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

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

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

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

Divi Headers Pack

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

Easy Headers

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

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

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

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

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

RTL Headers

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

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

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

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

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

Standard Headers

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

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

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

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

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

Vertical Logo Headers

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

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

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

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

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

WOO Headers

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

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

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

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

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

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

Creative Headers

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

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

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

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

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

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

Purchase Divi Headers Pack

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

Final Thoughts

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

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

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