Author: Anika Huddleston

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.

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.

The Divi/Gutenberg/Woo Cross-Domain Content Copy Paste System (CCPS) plugin allows you to easily copy and paste Divi, Gutenberg, and WooCommerce layouts across websites on different domains. This could be convenient for building a layout on one site and moving it to a different site without having to export and import the layout with the Divi Library. You could also use this plugin to create your own repository of layouts for design projects. In this plugin highlight, we will take a look at the Divi/Gutenberg/Woo Cross-Domain Content Copy Paste System (CCPS) plugin and help you decide if it’s the right plugin for you.

Let’s get started!

Installing Divi/Gutenberg/Woo Cross-Domain Content Copy Paste System (CCPS)

The plugin comes as a .ZIP plugin file. To install the plugin, open the plugin page in your WordPress dashboard and click Add New. Click Choose File and select the .ZIP plugin file, then click Install Now. Once the plugin is installed, activate the plugin.

Repeat these steps to install the plugin on any website you want to be able to paste items. This plugin will need to be installed and activated in order for you to be able to copy and paste any layouts.

Divi/Gutenberg/Woo Cross-Domain Content Copy Paste System (CCPS)

Now let’s take a look at exactly how this plugin works.

Settings Page

Once the plugin is installed you will see a new settings page for the plugin appear in your WordPress dashboard menu. With these settings, you can change where the copy-paste functionality is enabled and change the button location.

You can also change the pages that have the bulk copy and paste function enabled and restrict the plugin usage by user roles. By default, all of the settings are enabled and you shouldn’t have to make any changes before using the plugin. The page also lists some tips and instructions for using the plugin.

Copy Divi Layouts

Here I have created a layout in Divi’s visual builder that I would like to copy to another website. As you can see, now that the plugin is activated there is a green icon at the bottom left corner of the Visual Builder.

When you click the green icon, you have two options: whole page or individual sections.

If you select Whole Page, you get an option to copy the page or paste the page. Since we want to copy this layout and paste it to a different website, we’ll select the copy option.

Now on my new site, I have installed and activated the plugin and added a new page. The copy and paste icon is there in the visual builder, so I’ll click the icon, then select the Whole Page option and click Paste Page.

Now the layout has been loaded onto the new page! Note that pasting a whole page will replace any content you had on the page.

Alternatively, you can choose to copy an individual section. To do so, click the copy and paste icon, then select Individual Sections.

When you hover over a section, it will have a green overlay with a button to copy the section and a button to paste a section. Click the copy button.

On the new website, click the copy and paste icon and select Individual Sections. If you highlight an existing section and click paste, that section will be replaced with your copied section. If you don’t want to replace a section on your new page, you can create a new blank section and paste it there.

Copy Gutenberg Layouts

This plugin also allows you to copy Gutenberg layouts to a different site. To do so, open or create a layout with the default editor (Gutenberg editor, not the Divi builder). At the top of the page is a button for Layout Copy Paste. Click the button, then select whole page or individual section. I’ll copy the whole page in this example.

On the new website, open a page with the default editor. Again, you should see the Layout Copy Paste button at the top. Click the button and select whole page, then click paste page.

Now your layout will be pasted onto the new site.

Bulk Copy and Download Pages, Posts, WooCommerce Products, and Media Files

A new feature added in version 2 of this plugin is the ability to bulk copy pages, posts, WooCommerce products, and media files from one site to another. You can also download an exported file of pages, posts, products, or media and upload them to another site through this feature. This is a very useful and time-saving feature to have if you’re moving lots of content from one site to another.

Here I’m looking at my pages in the WordPress dashboard. You can see the Content Copy Paste button at the very top of the page. Select the pages you would like to copy, then click the copy button.

On the other website, navigate to Pages, then click the paste button at the top.

Your copied pages will be pasted onto the new website.

If you’d rather generate a .ZIP file with your content, you can use the download button to save your content instead. Here’s what that looks like from the WooCommerce Products page.

Now on my new site, I can click the Content Copy Paste button from the Products page and click Upload to upload the .ZIP file with the product contents.

After the success message appears, you can see the products have been uploaded to the new site.

Divi/Gutenberg/Woo Cross-Domain Content Copy Paste System (CCPS) Tips and Updates

There are a few things to know before you use this plugin. First, you must always save the page you are copying from or pasting to before you can copy or paste. Copying and pasting is not possible between different browsers or within incognito windows. Additionally, cross-domain copy-pasting is not supported by the Safari web browser. Finally, this plugin does not work within the Divi theme builder environment. Despite these limitations, this plugin brings some great functionality to Divi and WordPress and could be very useful if you use your own premade layouts and often work between multiple domains.

Purchase Divi/Gutenberg/Woo Cross-Domain Content Copy Paste System (CCPS)

Divi/Gutenberg/Woo Cross-Domain Content Copy Paste System (CCPS) is available in the Divi Marketplace. It costs $49 for unlimited website usage and 1 year of support and updates. The price also includes a 30-day money-back guarantee.

Final Thoughts

Divi/Gutenberg/Woo Cross-Domain Content Copy Paste System (CCPS) is an interesting plugin that makes it easy to copy and paste Divi and Gutenberg layouts to sites on different domains. With this plugin, you can easily reuse design layouts for new projects and even create your own repository of layouts that you can effortlessly copy and paste. With new features in version 2 adding the ability to bulk copy and download pages, posts, media files, and even WooCommerce products, this plugin could be a serious time-saver when transferring content to other websites. The installation is simple and straightforward, and the plugin is very easy to use as well. If you are tired of importing and exporting Divi Builder files to new websites and want an alternative to a cloud-based layout repository like Divi Cloud, this could be a great plugin for you.

We would love to hear from you! Have you tried Divi/Gutenberg/Woo Cross-Domain Content Copy Paste System (CCPS)? Let us know what you think about it in the comments!

The post Divi Plugin Highlight: Divi/Gutenberg/Woo Cross-Domain Copy Paste for Divi and Gutenberg appeared first on Elegant Themes Blog.