Author: Chaucee Stillman

How To Write a Blog Post With Divi AI
Welcome to the future of writing! It’s no secret that writing quality content on your blog can help boost your SEO, increase your visibility in search results, and demonstrate your expertise. However, writing blog posts can be time-consuming and labor-intensive! By utilizing Divi AI, you can produce better content faster than ever.

Yes, you read that right â€“ Divi AI can write captivating blog posts too! If you’ve ever wondered how this revolutionary technology works and how it can assist you in crafting unique and engaging articles, then prepare to have your mind blown. Join us as we demystify writing compelling blog posts with Divi AI and explore the endless possibilities it holds for creating extraordinary blog posts that will captivate your readers like never before.

In celebration of the launch of Divi AI, we are offering a 40% off discount for unlimited Divi AI! for one week. Now’s the time to lock in those savings forever!

What Divi AI Can Do: A Brief Recap

We’ve been sharing all week about the fantastic power of Divi AI, but in case you haven’t heard about it, here’s a quick recap.

Divi AI is a powerful new web design assistant available within the Divi Builder. Divi AI can write copy, revise copy, and generate unique images. Whereas writing blog posts from scratch can take days to create and edit, writing a blog post with Divi AI can help banish writer’s block and help you create high-converting blog posts from start to finish faster than ever before.

How to Access Divi AI

To access Divi AI, you’ll need the following environment setup:
- You have website hosting and a domain.
- You have WordPress installed on your website.
- You have an Elegant Themes membership.
- You have the latest version of Divi activated and set as your theme (learn how to update Divi here).
Great! Now that your environment is set up and ready to go, let’s get to work!

How To Write A Blog Post With Divi AI

For our example, we’ll a blog post for a Digital Marketing Agency. To start, we’ll be using the free Digital Marketing Divi Layout Pack and the accompanying blog post Theme Builder template that goes with it.

Step One: Add a New Post

The first step is to navigate to your WordPress dashboard and add a new post. Hover over “Posts” in the lefthand sidebar and click “Add New” to add a new post.

Give your blog post a title and click “Use Divi Builder.” This will reload your blog post on the front end so you can use the Divi Builder and Divi AI as you’re writing your blog post.

As your page reloads, you’ll see three options popup: Build from Scratch, Choose a Premade Layout, or Clone Existing Page. Select “Build From Scratch.”

Next, we need to add a row. Click on the green “+” button to load the row options.

Let’s add one full-width row by clicking on it.

Next, click the grey “+” icon to load the module library. Scroll to “Text” and click it to load the text module.

By default, Divi modules load with demo content. There are two ways to generate text content with Divi AI in the Text module: by clicking the blue button at the top or by clicking the Divi AI icon in the text editor area.

Let’s select the AI icon on the text editor to configure some settings before auto-generating text. Once clicked, select “Write With AI.”

Once clicked, the AI window appears with all the settings and configurations available for Divi AI generation.

First, we’ll set the Content Type to Blog Post.

In the What are you writing about? section is where you type in a prompt for the blog post you want to write.

You can also use Divi AI to generate a prompt for you based on the content on the page! To do so, click the Divi AI icon in the text area.

Here, let’s select the context in which Divi AI should write the blog post. Since we have the blog post title added to the page, let’s select “This Page Content” so that Divi AI writes a blog post on the topic of the blog post title.

To customize your AI-generated results further, click “Guide Me” to load more Divi AI options.

The first option is the tone of voice. Let’s select “informative.”

We can even tell Divi AI what keywords we want in the blog post. Let’s type in “social media strategies.”

Next, we can adjust the length of the content by selecting from several options.

We’ll set it to about five list items using the dropdowns in this section.

Lastly, Divi AI can write the blog post in any language you choose. By default, Divi AI writes in the language of the prompt.

Now that we’ve set our prompt click “Generate Text” to see the results!

On the next screen, you’ll see the results.

However, we’re not done yet! Divi AI can also help you refine, lengthen, and simplify the results until you have the blog post of your dreams.

Tips For Writing Divi AI-Generated Blog Posts

When writing blog posts with Divi AI, keep these tips in mind.

Edit and Revise the Results

Even though Divi’s AI generation is pretty powerful, it’s essential to edit and revise AI-generated content to avoid copyright issues or sound like you’re writing as a robot. Always do a final review and edit before hitting “publish” on your AI-generated blog posts!

Stay True to Your Tone of Voice

While writing with AI helps save you time by doing some of the heavy lifting when it comes to research and writing, it’s important to remember to stay true to your voice when writing content for your website visitors. AI can help generate ideas and provide outlines; however, you want to create content that resonates with your readers and doesn’t sound unnatural or artificial.

Use Divi AI to Generate Blog Images

Divi AI can also generate on-brand and unique images for your blog postâ€”no more spending hours searching for the perfect image on stock photography websites. Now, you can create exactly what you want right with Divi AI! Learn how to generate Divi AI images here.

Write Compelling Blog Posts With Divi AI!

In addition to speeding up the blog writing process, Divi AI can also generate ideas you hadn’t thought of to include in your blog post and help you write compelling content that drives traffic to your website. Join today to access unlimited Divi AI generations!

Divi AI is the web design assistant you need! Not only does it help you work faster, it also helps provide multiple variations of the same design, making it easier to find your ideal outcome. If you’re signed up for Divi AI yet, take the opportunity to sign up today and enjoy the unlimited prompts you can enter! We hope you’ve enjoyed this tutorial, let us know if you have any questions in the comments and we’ll see you tomorrow for another Divi AI tutorial!

Get 40% Off Divi AI This Week!

For the next week, we are giving 40% off of Divi AI unlimited. Anyone who purchases Divi AI before the sale sends will save $115 per year and lock in those savings for LIFE! Plus, all of your team members can use Divi AI at no additional cost. Get the discount here ðŸ‘‡

The post How To Write a Blog Post With Divi AI appeared first on Elegant Themes Blog.
16.08.2023
How to Transform A Divi Layout Using Divi AI

Divi AI is a powerful new feature right within the Divi Builder that helps create fresh content for your website in seconds. From generating professional copywriting to one-of-a-kind images, this new tool will speed up your design process and give you the extra boost of productivity youâ€™ve been looking for.

In this post, we’re going to explore the ways you can transform any premade Divi Layout using Divi AI. Let’s get started!

What is Divi AI?

Divi AI is a powerful and intuitive web design assistant that understands Divi. It can write content, revise content, and generate unique images for your website. You can create custom content from prompts or even ask Divi AI to generate content based on the context of the page, section, or module youâ€™re working in.

What’s Possible with Divi AI

The options are endless with Divi AI! For a complete look at all that Divi AI can do, check out this list of features.

Auto-Generate Contextual Content

Not sure what to design next? Use Divi AI to generate context-specific website copy and images. Divi AI analyzes existing content and website details to recommend the content you should add next.

Create Unique Images

Divi AI also has the power to create unique images for your page design. You can generate images with prompts or by having Divi AI learn from your page and the context around your image to generate something highly relevant with just the click of a button.

Create Fresh Copywriting

Bid farewell to writer’s block! Whenever you face uncertainty about your next writing topic, turn to Divi AI. It evaluates your page’s content and provides fresh ideas to keep your creativity flowing.

Edit and Revise Existing Copywriting

Divi AI is like having your own Copy Editor on call, 24/7. Improve your existing content by using Divi AI to adjust the tone, modify the length, improve clarity, or add creativity to your copy. Navigate through variations, experiment with styles, and tailor your content to engage your audience.

How to Transform a Divi Layout Using Divi AI

Subscribe To Our Youtube Channel

Now it’s time to get into the fun stuff! Today we’re going to transform a premade Divi layout using Divi AI. First, we’ll need to select our layout.

Add a Divi Layout to Your Page

A great way to use the power of Divi AI is by transforming premade layout packs. Every week the designers here at Elegant Themes release custom-designed pre-made layout packs that are completely free to use. Layout packs are a great way to get started designing your website, and Divi AI can help you quickly customize the content so that it’s unique to you or your business. For more, here is a step-by-step tutorial on how to add a premade layout to your page.

For our purposes, we’ll be using the Coaching Layout Pack. To add a premade layout to your page, expand the Divi toolbar and click the purple + icon to load the Divi Library.

Type “coaching” into the search bar and select the Services page layout.

Select “Use This Layout” to load it to your page.

Now that we have a premade layout added to our page let’s explore the ways you can transform it using Divi AI!

How to Add Copy to Your Divi Layouts with Divi AI

Divi premade layout packs come with placeholder content. Using Divi AI, you can add text modules and ask Divi AI to generate fresh copywriting based on the context of the content on the rest of your page. Since layout packs are each based on a specific theme, Divi AI will then generate unique copy based on that theme’s page content.

How to Generate New Copy Automatically

Let’s generate some short descriptions for the services section of this page. We’ll start with the One on One service.

Access the module settings by hovering over the module and clicking the gear icon.

To auto-generate text, click the “Auto Generate Text With AI” blue button. Because this is a Blurb module, Divi AI will also automatically generate an image to go with it in case you decide to use an image instead of an icon.

Next, the AI-generated results will pop up. Since we’re editing a blurb module, Divi AI will generate a piece of content for each section in the blurb module. If you like the generated text, then click the blue “Use This Text” button. Or, you can choose to modify the text further by clicking the dropdown and selecting the action you want AI to take. You can also refine your result by writing further instructions in the Refine Result input field.

And here is the final result! Divi AI was able to automatically generate contextual content based on the rest of the page content. Pretty neat, right?!

How to Create New Copy Using the Divi AI Text Generator

There’s also another way to generate copy with Divi AI: by providing prompts. Let’s try this method with the Couple Therapy blurb module.

Open up the module settings and hover over the body text area. You’ll see an AI icon popup in the textarea box.

Next, click “Write With AI”.

Up will pop the prompt window where you can select the Content Type, write your prompt, tell Divi AI what context to consider, and further customization options like the tone of voice, keywords, content length, and language.

Content Type

Tell Divi AI what type of content you want it to write: Paragraph, Title, Button, Blog Post, or Social Media Post. For our example, we’ll select Paragraph.

What are you writing about?

Here you can type in the topic you are writing about and what you want Divi AI to create content for.

Added Context

Tell Divi AI what context (or no context) it should write in: This Page Content, This Section Content, This Module Content, No Context. By specifying what content you want Divi to reference, you’ll have more control over your contextual content. Let’s select “This Page Content.”

Tone of Voice

Choose the tone of voice you want Divi AI to use. Options include, Creative, Informative or Funny.

Must Use Keywords

For SEO purposes, here you can tell Divi AI what keywords you want to be included in the text.

Content Length

Here you can tell Divi AI how long or short you want the content to be.

Language

By default, Divi AI will write content in the same language as the prompt it’s given. However, if you’d like Divi AI to write in another language, you can select one from the dropdown here.

Click “Generate Text”

Once your settings are configured how you like, click the “Generate Text” button at the bottom to put Divi AI to work!

If you are happy with the generated text, you can click the “Use This Text” button to insert the text into the module. However, you can further customize the AI-generated text in the “Modify With AI” section. You shorten or length the text, check the spelling and grammar, rewrite it for experts or beginners, and so much more. You can also give more direction to the AI generator by typing in the “Refine Result” section and then clicking the “Regenerate” button.

In addition to all these options for customizing and refining the AI-generated text, you can go back to your initial prompt by clicking the white back arrow at the top left of the window that says “Content Results”. There, you can refine your settings and generate new text.

Once you generate another result, you’ll see an option to toggle between those results right underneath the AI-generated text. That way, you can compare and contrast your results and select the text you like the best and assemble it together for your own unique paragraph.

Rewrite and Revise Copy

Rewriting and revising copy with Divi AI is very similar. To do so, we’ll navigate to a text module that has existing content. Open up the module’s settings to edit the content.

There are two ways you can access the AI options. First, by clicking the blue “Auto Generate Text With AI” blue button at the top, or second, by clicking the AI icon within the text editor.

If you’d like Divi AI to auto-generate revised text, then click the blue button. You can further customize the results in the Content Results window using the options and settings explained above.

To use the Improve With AI feature, copy the existing text, click the Divi AI icon, and then select “Improve With AI.”

Paste the text into the editor, configure the style and settings you want to use, and then click “Generate Text.”

Generate Custom Images

No more spending hours on stock image sites to find the perfect image for your design. With Divi AI, you can generate custom images unique to your website! Here’s how you can generate a custom image using Divi AI and the Image Module.

First, open up the image module settings and hover over the image to see the AI icon. Click it to load the AI options: Generate With AI, Improve With AI, or choose from Quick Options like Generate & Replace, Reimagine, or Change Style. Let’s select “Generate With AI.”

The first option is to select the style of image you want to generate.

There are a variety of styles to choose from. You can create an image that is photographic, like a digital painting, concept art, a vector graphic, 3D renders, drawings, abstract art, comic book, watercolor, painting, anime, or cartoon.

Next, write a descriptive prompt of the image you want to generate. You can even use AI to help generate a prompt by clicking the AI Icon in the text area.

You can even upload a reference image to provide more context; however, this is optional. If you do use a reference photo, you can set the influence of the image by percentage. The less influence you assign the photo, the more influence your written prompt will have.

If you don’t upload a reference photo, you’ll have the option to choose the aspect ratio of the generated image: Square, Landscape, Portrait, or Custom Size.

You can even set the size (width and height) of the image.

Once the fields are filled out, click the “Generate Image” button and let the AI magic do its work!

On the next screen, you’ll see four generated images. If there is an image you like and want to use in your page design, click on the image and select “Use This Image.” You can also save the image to your media library by hovering over the image and clicking the downward arrow icon in the top right corner of the image. That way, you can save alternate image versions for future use!

If you’d like to continue refining your images, you can do so in several ways. First, you can select a generated image and ask AI to generate more images like that one.

In the Modify Selected Image area, you can even change the image type to another format, like a painting or vector image.

If you want to refine your prompt, you can do so in the New Description area. Type in your new prompt and hit regenerate to generate new images.

Once you have the image you want, click the “Use This Image” button to insert the image into your content!

Pro Tip: How to Create New Images that Match the Style of Your Premade Layout

If you like the current style and feel of your current layout, adding new images might throw off the entire design. With Divi AI, you can replace the existing images on your premade layout and keep the original style and feel of the original image.

For example, here is a screenshot of our Bake Shop premade layout.

Let’s say we wanted to use this layout to create a website for a coffee shop. We could replace these pretzel images with coffee-related images that have a similar style and color.

To do this, simply select and use one of the existing images as a reference image. Then add a short description, like “cup of coffee,” and bring the reference image influence dial down to 20%. Then generate a new image.

Repeat the process for the rest of the images on the page. Adjust the copy using AI as needed. And you have a new website with a similar style as the premade layout.

Final Thoughts

Divi AI is a powerful new tool for enhancing your efficiency and creativity while designing Divi websites. The best part is the more you use it, the better it gets to know your website and produces even more amazing results. Stay tuned for more Divi AI how-to’s this week, as we’re just getting started showing you how to harness the power of Divi AI!

Get 40% Off Divi AI During Our Introductory Sale!

For the next week, we are offering 40% off Divi AI. Anyone who purchases Divi AI before the sale sends willÂ save $115 per yearÂ and lock in those savings for life! Plus, all of yourÂ team membersÂ can use Divi AI at no additional cost. Get the discount here ðŸ‘‡

The post How to Transform A Divi Layout Using Divi AI appeared first on Elegant Themes Blog.

14.08.2023
How to Add Labels Above the Fields in Diviâ€™s Contact Form Module
The Divi Contact Form Module makes it easy for website visitors to get in touch with you and for you to collect information from your visitors.

By default, the Divi Contact Form Module field labels are displayed inside the input fields. However, sometimes, you might want to display the labels above the contact form fields. In this tutorial, we’ll show you how to accomplish that with a little bit of CSS.

What We’ll Accomplish

Our goal today is to go from this:

To this:

Let’s get to work!

How to Add Labels Above the Fields in Divi’s Contact Form Module

For this demonstration, we will use the Contact page design from the Free Whiskey Distillery Layout Pack. If you’re unfamiliar with how to load premade layout packs, check out this blog post: How to Use a Premade Layout Pack on Your Divi Website.

There are two ways we can input custom CSS on your Divi website: via the Theme Customizer, which will affect all contact forms across your website, or per page in the page’s settings which will affect individual contact forms. First, we’ll try the per-page method, and then I’ll show you how to add the CSS globally.

Navigate to Your Page

First, navigate to your contact form page and enable the Visual Builder.

Expand the Divi toolbar at the bottom of the page and click the gear icon to bring up the page’s settings. Then navigate to Advanced > Custom CSS and copy and paste the CSS code.

This is the CSS code you’ll have to copy and paste into the Custom CSS box:
```
/* Displays titles above the fields */
.et_pb_contact_form_label {
    display: block;
}

/* Hides placeholder text */
.et_pb_contact_form_container .input::placeholder {
    color: transparent;
}

/* Hides duplicate titles on checkboxes and radios */
.et_pb_contact_field_options_title {
    display: none;
}
```
Here’s what we got so far. You’ll notice that our font styling doesn’t carry over, and there is now a duplicate title above the dropdown field.

So to fix that, we’ll add some font styling CSS to the code and a few more lines of code to remove the duplicate title above the dropdown field.

Here’s the updated final code:
```
/* Displays titles above the fields */
.et_pb_contact_form_label {
    display: block;
    font-family: 'Playfair Display';
    color: #E7E2BC;
    font-size: 15pt;
    font-style: italic;
    margin-bottom: 15px;
}

/* Hides placeholder text */
.et_pb_contact_form_container .input::placeholder {
    color: transparent;
}

/* Hides duplicate titles on checkboxes and radios */
.et_pb_contact_field_options_title {
    display: none;
}


/* Remove title above dropdown */
.et_pb_contact_field[data-type=select] .et_pb_contact_form_label {
    display: none;
}
```
And here is the final result!

Doing This Globally

Adding the code globally will affect all contact forms on your website. If you want the changes to apply to a specific contact form only, you’ll need to add a CSS ID to the module in the advanced tab. After doing so, place the “#” + your CSS ID in front of every CSS class you’re targeting in the code.

There are three places you can add the CSS code to take effect globally. To your child theme’s style.css stylesheet:

Or the Custom CSS block in Divi > Theme Options:

Or to the Theme Customizer:

And that’s it!

More Resources

There are so many ways you can style the contact form module to make it all your own. Check out these other tutorials on the contact form to get started!
The post How to Add Labels Above the Fields in Divi’s Contact Form Module appeared first on Elegant Themes Blog.
04.07.2023
How to Add Multiple Pins to Your Divi Map
The Divi Map Module makes it easy to embed a Google Map to your Divi website. This is a great way to share your business location on a contact page, in a footer, or on an about page.

In this post, we’re going to demonstrate how to add multiple location pins to your Divi map. This is a great feature if your business has multiple locations or you’re putting together a local guide to show off your favorite coffee shops, etc.

Let’s dive in!

What You Need to Get Started

To get started, you will need to do the following:
1. Install DiviÂ on your WordPress website.
2. Add a Page, give it a title, and publish it.
3. Enable the Visual Builder.
4. Create yourÂ Google API Key.
Select Build From Scratch

Once you click the â€œUse Divi Builderâ€ button the page will reload using Diviâ€™s drag and drop builder interface. Three options will pop up â€“ Build From Scratch, Choose A Premade Layout, and Clone Existing Page. For todayâ€™s purposes, select â€œBuild From Scratchâ€. This will give us a blank slate where we can build our designs.

How to Add Multiple Pins to Your Divi Map

Letâ€™s get into the tutorial! Hereâ€™s how to add multiple location pins to your Divi Map.

Add Your Google API Key

Before weâ€™ll be able to fully use the map module and its functionalities, youâ€™ll need to add yourÂ Google API KeyÂ to your Theme Options.
1. From your WordPress dashboard, go to Divi > Theme Options and paste your Google API Key.
2. Click â€œSave Changesâ€.
Add a Section and Row and the Map Module

Navigate back to the page you just created and add a section and a one-column row to your page. Then load the module library and click Map. Once added, the module window will pop up with all the settings and functionalities available within the map module.

Add a New Pin

To add a new location pin, click “Add A New Pin”. This will bring up the settings for that new pin. In the Text tab, type in the title and a description text you want to be displayed here. In the Map tab, paste the address for the pin in the Map Pin Address input field and then click find.

Choosing a Map Center Address

Choosing a map center address determines how your map is oriented. This is helpful when you want to show multiple pins at once. Below, we have the map center address as San Diego, CA 92104, USA so that it shows all of our pins within that area.

Final Thoughts

And there you have it! You can add as many pins to your map as you’d like. Adding pins to the map module is simple and easy and results in an interactive Google Map that is easy to use for your website visitors.

The post How to Add Multiple Pins to Your Divi Map appeared first on Elegant Themes Blog.
21.02.2023
How to Add a Button to Your Divi Map Locationâ€™s Info Box
The Divi Map module integrates with Google Maps seamlessly and is an easy way to add an interactive map to your Divi website. This is great for showing your business’s location or creating a local guide of your favorite boutiques and businesses.

In this post, we’re going to show you how to add a button to the location info box for one of your pinned addresses.

Design Preview

First, let’s take a look at what we’re trying to accomplish. With some simple HTML, we’ll be able to accomplish adding a button inside the location info box for a pinned address.

Let’s dive in!

What You Need to Get Started

To get started, you will need to do the following:
1. Install DiviÂ on your WordPress website.
2. Add a Page, give it a title, and publish it.
3. Enable the Visual Builder.
4. Create yourÂ Google API Key.
Select Build From Scratch

Once you click the â€œUse Divi Builderâ€ button the page will reload using Diviâ€™s drag and drop builder interface. Three options will pop up â€“ Build From Scratch, Choose A Premade Layout, and Clone Existing Page. For todayâ€™s purposes, select â€œBuild From Scratchâ€. This will give us a blank slate where we can build our designs.

Add Your Google API Key

Before weâ€™ll be able to fully use the map module and its functionalities, youâ€™ll need to add yourÂ Google API KeyÂ to your Theme Options.
1. From your WordPress dashboard, go to Divi > Theme Options and paste your Google API Key.
2. Click â€œSave Changesâ€.
Method 1: How to Add a Button to Your Divi Map Location’s Info Box

Letâ€™s get into the tutorial! Hereâ€™s how to add a button to the location info box.

Add a Section and Row and the Map Module

Navigate back to the page you just created and add a section and a one-column row to your page. Then load the module library and click Map. Once added, the module window will pop up with all the settings and functionalities available within the map module.

AddÂ a Pin

Click “Add New Pin” to add a pin to your map. This will bring up that pin’s settings where you can type in a title and add a description text. To add a button in the text area, add the following HTML:
```
&amp;lt;a class=&amp;quot;et_pb_button&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;Get Directions&amp;lt;/a&amp;gt;
```
The key here is to add the class of et_pb_button that turns a regular text link into a button. Don’t forget to replace the # sign with the URL you want this button to link to.

Then add your pin’s location in the Map tab in the Map Pin Address field and click find.

And there you have it! A button appears in the pin’s location info box.

Method 2: Styling the Button with a Unique CSS Class

There’s also another way to achieve this and it’s to add a unique CSS class to the HTML to style the button. Here is the HTML you’ll need:
```
&amp;lt;a class=&amp;quot;get-directions-btn&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;Get Directions&amp;lt;/a&amp;gt;
```
The unique CSS class we added wasÂ get-directions-btn. We can use this CSS class to apply unique styles to the button. You can do this by pasting on-page CSS or by using your child theme’s style sheet. In today’s example, we’re going the paste the CSS in our Page Settings.

To achieve the button style below, copy and paste this CSS in to your Page Settings:
```
.get-directions-btn {
  background-color: #1d1d1d!important;
  color: #f9f9f9;
  border-radius: 100px!important; 
  padding: 5px;}
```
Final Thoughts

Adding a button to your pin’s location box offers a clean direction button link that makes it easy for your visitors to get directions fast. You can also style the button using CSS added to your page! With that, the styling options are endless. Have fun customizing!

The post How to Add a Button to Your Divi Map Location’s Info Box appeared first on Elegant Themes Blog.
05.12.2022
How to Balance the Primary & Secondary Buttons in Your Divi Fullwidth Header Module
The Divi Fullwidth Header module makes it easy to add beautiful hero sections to your website. The module comes with two buttons, a title text, subtitle text, body text, a logo, and an image, making the customization options endless.

In todayâ€™s post, we’re going to demonstrate how to re-create hero sections using the Divi Fullwidth Header. We’ll start our design by using 3 premade layout packs and design our sections with a focus on balancing the primary and secondary buttons.Â We want the primary button to stand out, as itâ€™s our main call to action while keeping the secondary button visible and accessible without overtaking the primary button.

Design Principles of Primary and Secondary Buttons

Primary buttons and secondary buttons help guide your website visitors towards certain actions. Primary buttons are typically the most common or desired action and secondary buttons are a less common action. This helps guide visitors to where they want to go.

To accomplish this, primary buttons should stand out visually and secondary buttons should not stand out as much. That means primary buttons should be more distinctive and have more visual weight so that it attracts more attention.

Now that we have an understanding of how primary and secondary buttons work, let’s get to the tutorial!

Design Preview

Here’s a look at the three fullwidth headers we will be designing today.

UX Fullwidth Header

Divi Retirement Center Fullwidth Header

Financial Planning Fullwidth Header

Download the Layouts for FREE

To lay your hands on the designs from this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our newsletter by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If youâ€™re already on the list, simply enter your email address below and click download. You will not be â€œresubscribedâ€ or receive extra emails.

Download the Files

Download For Free

Join the Divi NewsletterÂ and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

To import the header template to your Divi Library, do the following:
1. Navigate to the Divi Theme Builder.
2. Click the Import button at the top right of the page.
3. In the portability popup, select the import tab
4. Choose the download file from your computer (make sure to unzip the file first and use the JSON file).
5. Then click the import button.
Once done, the section layout will be available in the Divi Builder.

Letâ€™s get to the tutorial, shall we?

What You Need to Get Started

To get started, you will need to do the following:
1. Install Divi on your WordPress website.
2. Add a Page and give it a title.
3. Enable the Visual Builder
Ux Fullwidth Header Design Steps

Now that we have our page set up, let’s start with the fullwidth header for a UX landing page.

Setting Up Our Page

Before we can begin styling, we’ll need to load the free UX premade layout pack from the Divi Library. When you enable the Visual Builder you’ll see three options pop-up, select Choose A Premade Layout.

Load Layout Pack

To do load the UX layout pack onto your page:
1. In the “Premade Layouts” tab use the search function to find the UX layout pack.
2. Once you’ve found it click on it. This will bring up the layout details and pages available.
3. Click on the landing page design, then click “Use This Layout”.
We’ll be recreating the top section of the layout as a fullwidth header module.

Delete First Section

Since we are going to recreate the first section using the Fullwidth Header module instead, we’ll need to delete this section. Hover over the section and click the trash icon.

Add Fullwidth Section

Before we can add the fullwidth header, we need to add a fullwidth section.

Click the “+” arrow to bring up the Divi sections and then click “fullwidth”. This will automatically bring up the Divi Fullwidth Module library.

Add Fullwidth Header

Inside the Divi Fullwidth Module Library, click “Fullwidth Header”.

AddingÂ Content

Before we begin styling the module, let’s add the content needed for this module.

Add Text Content

Underneath the Text tab, add the following content:
1. Title: Improve Your UX Design Knowledge
2. Subtitle: UX Design Course
3. Button #1: Course Overview
4. Button #2: Learn More
5. Body: Placeholder text
Add Images

Now that we have our text content in place, we need to add two images to our design.
1. In the Images tab, add the logo image (the stars) and the header image (the photo of the person holding a phone).
Change Background Color

In the Background tab, configure this setting:
1. Background Color: #131517
Styling The Fullwidth Header

Now that we have our content set up, let’s add some styling to it via the Design tab.

Scroll Down Icon

Let’s add the scroll down icon, the downward arrow.
1. This design uses a scroll down icon, so toggle this option to yes.
2. Select the downward arrow icon and then set the icon color to white.
Image

Let’s add curves to our images by rounding the corners.

In the image tab, configure the following settings:
1. Image Rounded Corners: Click the chainlink button to unlink the corners, then type 1000px in the bottom left and bottom right input boxes. This will round the bottom left and bottom right corners of our images.
Title Text

Here let’s style the title text for this module. In the Title Text tab, configure these settings:
1. Title font: PT Sans
2. Title Font Weight: Bold
3. Title Text Size: 5rem
4. Title Line Height: 1.2em
Body Text

This is where we style the body text of this module. In the Body Text tab, configure these settings:
1. Body Font: Mukta
2. Body Text Size: 18px
Subtitle Text

This is where we style the subtitle text for this module. In the Subtitle Text tab, configure these settings:
1. Subtitle Font: Mukta
2. Subtitle Font Weight: Bold
3. Subtitle Font Style: Uppercase
4. Subtitle Text Color: #13d678
5. Subtitle Letter Spacing: 3px
Button One

This is where we can set custom styles for button one, the primary button. In the Button One tab, configure these settings:
1. Use Custom Styles For Button One: Yes
2. Button One Color: #ffffff
3. Button One Background: #13d678
4. Button One Border Width: 0px
5. Button One Border Radius: 100px
6. Button One Font: Mukta
7. Button One Font Weight: Bold
8. Show Button One Icon: Yes
9. Button One Icon: Right Arrow
10. Only Show Icon On Hover For Button One: No
Button Two

Now let’s style the secondary button, the second button. In the Button Two tab, configure these settings:
1. Use Custom Styles For Button One: Yes
2. Button One Color: #ffffff
3. Button One Background: #303030
4. Button One Border Width: 0px
5. Button One Border Radius: 100px
6. Button One Font: Mukta
7. Button One Font Weight: Bold
8. Show Button One Icon: Yes
9. Button One Icon: Right Arrow
10. Only Show Icon On Hover For Button One: Yes
Add Button Links

Don’t forget to add links to your buttons! In the Link tab, configure the following settings:
1. Button #1 Link URL: Paste the URL for button one here.
2. Button #2 Link URL: Paste the URL for button two here.
Save Your Design

Now that we have our fully designed Fullwidth Header, make sure to save your design!
1. Click the green arrow at the bottom right of the module window.
2. Then click the save icon on the Divi toolbar to save your page design.
3. Exit the Visual Builder.
Have Fun Experimenting

The ways to style the Divi Fullwidth Header module are endless. Taking advantage of the primary button and secondary button can help direct your visitors to the page you want them to view or take the action (like submit an inquiry) you want them to take.

Let’s take a look at two other Fullwidth Header examples that have a primary button that stands out.

Divi Retirement Center Fullwidth Header

Button Styles

Let’s look at the unique styles for the primary and secondary buttons.

Button One

In the Button One Tab, configure the following settings:
1. Use Custom Styles For Button One: Yes
2. Button One Text Size: 14px
3. Button One Color: #ffffff
4. Button One Background: #0a0a0a
5. Button One Border Width: 0px
6. Button One Border Radius: 10px
7. Button One Font Weight: Bold
Button Two

In the Button Two Tab, configure the following settings:
1. Use Custom Styles For Button One: Yes
2. Button One Text Size: 14px
3. Button One Color: #ffffff
4. Button One Background: #0a0a0a
5. Button One Border Width: 0px
6. Button One Border Radius: 10px
7. Button One Font Weight: Bold
And there you have it! Two unique buttons, one that stands out, and one that takes the second seat.

Financial Planning Fullwidth Header

Button Styles

Let’s look at the unique styles for the primary and secondary buttons.

Button One

In the Button One Tab, configure the following settings:
1. Use Custom Styles For Button One: Yes
2. Button One Text Size: 18px
3. Button One Text Color: #ffffff
4. Button One Background Color: #1b4ffe
5. Button One Padding: 15px Top and Bottom; 25px Left and Right
Button Two

In the Button Two Tab, configure the following settings:
1. Use Custom Styles For Button Two: Yes
2. Button Two Text Color: #1b4ffe
3. Button Two Background Color: Transparent
4. Button Two Icon Color: #1b4ffe
Final Thoughts

The Divi Fullwidth Header makes it easy to create stunning hero sections on your website. Making strategic use of the primary and secondary buttons will improve your user experience and help website visitors take the actions they want to take. The customization options are endless with the Fullwidth Header so have fun experimenting!

The post How to Balance the Primary & Secondary Buttons in Your Divi Fullwidth Header Module appeared first on Elegant Themes Blog.
25.10.2022
How to Style Your Fullwidth Header Moduleâ€™s Background
Divi’s Fullwidth Header module makes it easy to design a stunning hero section for your website in just minutes. A hero section is the very first section of your website that your visitors will see, so you’ll want it to be branded, informative, and compelling. Thankfully, the Divi Fullwidth Header comes packed with content options: header text, subtitle text, body text, two images, and two buttons. We’ll be utilizing all of these elements in our fullwidth headers today.

In this post, we’re going to demonstrate 3 ways to design your fullwidth header’s background with eye-catching designs. Ready to get started? Let’s dive in!

Design Preview

Let’s take a look at the 3 fullwidth headers we’ll be designing today.

Divi Bushcraft Community

The first design uses Divi’s background image options to create a textured background that is unique and on-brand for the Bushcraft Community.

Mrs. Nicole’s 2nd Grade

This second design uses a background image and background gradient to create a clean, modern, and fresh welcome header for Mrs. Nicole’s 2nd-grade class.

Realtor Header

The third design utilizes a background image, background gradient, and background pattern, all combined to create an elevated yet subtle design for a realtor’s home page.

Download the Layouts for FREE

To lay your hands on the designs from this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our newsletter by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If youâ€™re already on the list, simply enter your email address below and click download. You will not be â€œresubscribedâ€ or receive extra emails.

Download the Files

Download For Free

Join the Divi NewsletterÂ and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

To import the header template to your Divi Library, do the following:
1. Navigate to the Divi Theme Builder.
2. Click the Import button at the top right of the page.
3. In the portability popup, select the import tab
4. Choose the download file from your computer (make sure to unzip the file first and use the JSON file).
5. Then click the import button.
Once done, the section layout will be available in the Divi Builder.

Letâ€™s get to the tutorial, shall we?

What You Need to Get Started

To get started, you will need to do the following:
1. Install DiviÂ on your WordPress website.
2. Add a Page, give it a title, and publish it.
3. Enable the Visual Builder.
Setting Up Our Page

Once you click the “Use Divi Builder” button the page will reload using Divi’s drag and drop builder interface. Three options will pop up and for today’s purposes select “Build From Scratch” so that we have a blank slate where we can build our fullwidth headers.

How to Design the Divi Bushcraft Community Fullwidth Header

Add a Fulldwith Section and Fullwidth Header

First, we’ll need to add a fullwidth section to our page. Click on the “+” icon to bring up the section options and then click “Fullwidth”. This will load the fullwidth module library where you can select “Fullwidth Header” from the options. This will load the fullwidth header module to your page.

Add The Content

Now we’re going to add our module content in the Text tab. Configure the following settings:
1. Header Text: Divi Bushcraft Community
2. Subtitle Text: Divi Bushcraft
3. Button #1: Join Today
4. Button #2: Learn More
5. Body Text: At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.
Style the Background

This design utilizes a background image from the free Divi Bushcraft pre-made layout pack. You can get all of the images from that layout pack in this post. Simply scroll all the way to the bottom of the post and click to download the high-res images.

Add Background Image

Once you have the photos, add a background image.
1. Click the third icon, the image icon.
2. Click “Add Background Image”. This will bring up the media library where you can upload a new photo or select a photo from your media library.
3. The set the Background Image Blend Mode to Overlay.
4. Click the first icon, the paint bucket icon, and set a background color of: rgba(10,10,10,0.3)
Choose the Layout

Underneath the Design settings, in the Layout tab, select center alignment. Toggle the “Make Fullscreen” option to “yes”.

Style Title Text

Style the Title Text by configuring these settings:
1. Title Heading Level: H1
2. Title Font: Josefin Sans
3. Title Font Weight: Bold
4. Title Font Style: Uppercase
5. Title Text Size: 7rem
Style Body Text

Style the body text by configuring these settings:
1. Body Font: Josefin Sans
2. Body Text Size: 20px
Style Subtitle Text

Style the subtitle text by configuring these settings:
1. Subtitle Font: Josefin Sans
2. Subtitle Font Weight: Semi Bold
3. Subtitle Font Style: Uppercase
4. Subtitle Letter Spacing: 3px
5. Subtitle Line Height: 5em
Style Button #1

Now let’s style the buttons! For button one, configure these settings:
1. Use Custom Styles For Button One: Yes
2. Button One Text Size: 14px
3. Button One Text Color: #666b4a
4. Button One Background: #ead5a4
5. Button One Border Width: 0px
6. Button One Border Radius: 0px
7. Button One Letter Spacing: 3px
8. Button One Font Style: Uppercase
9. Button One Padding: 15px top and bottom; 25px left and right.
Style Button #2

To style button #2, configure the following settings:
1. Use Custom Styles For Button One: Yes
2. Button One Text Size: 14px
3. Button One Text Color: #ead5a4
4. Button One Background: #666b4a
5. Button One Border Width: 0px
6. Button One Border Radius: 0px
7. Button One Letter Spacing: 3px
8. Button One Font Style: Uppercase
9. Button One Padding: 15px top and bottom; 25px left and right.
And, voila!Â Â You have a beautifully styled fullwidth header with a textured background image with an overlay for the Divi Bushcraft Community.

How to Design Mrs. Nicole’s Fullwidth Header

Now let’s design a fullwidth header for Mrs. Nicole’s 2nd-grade class! This header uses a background image and gradient to create a fun and fresh design. Let’s get started!

Add a new page, then add a Fullwidth Section and Fullwidth Header

First, weâ€™ll need to add a fullwidth section to our page. Click on the â€œ+â€ icon to bring up the section options and then click â€œFullwidthâ€. This will load the fullwidth module library where you can select â€œFullwidth Headerâ€ from the options. This will load the fullwidth header module to your page.

Add The Content

Now weâ€™re going to add our module content in the Text tab. Configure the following settings:
1. Header Text: Welcome To Mrs. Nicole’s 2nd Grade Class
2. Subtitle Text: Welcome
3. Button #1: View Assignments
4. Button #2: Contact Mrs. Nicole
5. Body Text: Donec sollicitudin molestie malesuada. Nulla quis lorem ut libero malesuada feugiat.
Style the Background

This design uses images from the free Classroom pre-made layout pack. You can download the full-res images by scrolling to the bottom of this post.

Style the background by configuring these settings:
1. Click the second tab, the gradient icon.
2. Set the gradient stops to: #ffffff at 40%, and transparent at 18%.
3. Set the gradient direction to 219 degrees.
4. Toggle “yes” for the Place Gradient Above Background Image.
5. Click on the third icon, the image icon, and click “Add Background Image”.
Choose the Layout

Here is where we’re going to align the module content to the center and make it fullscreen.
1. Text & Logo Alignment: Center
2. Make Fullscreen: Yes
Style the Title Text

Style the title text by configuring these settings:
1. Title Font: Candal
2. Title Text Size: 4rem
Style the Body Text

Style the body text by configuring these settings:
1. Body Font: Montserrat
2. Body Text Color: #6d6d6d
3. Body Text Size: 20px
Style the Subtitle Text

Style the subtitle text by configuring these settings:
1. Subtitle Font Weight: Ultra Bold
2. Subtitle font Style: Uppercase
3. Subtitle Text Color: rgba(28,10,10,0.6)
4. Subtitle Letter Spacing: 3px
5. Subtitle Line Height: 3em
Style Button #1

Style button #1 by configuring these settings:
1. Use Custom Styles For Button One: Yes
2. Button One Text Size: 15px
3. Button One Text Color: #ffffff
4. Button One Background: #000000
5. Button One Border Width: 0px
6. Button One Border Radius: 0px
7. Button One Letter Spacing: 3px
8. Button One Font Weight: Ultra Bold
9. Button One Font Style: Uppercase
10. Button One Padding: 15px top and bottom; 25px left and right.
Style Button #2

Style button #2 by configuring these settings:
1. Use Custom Styles For Button Two: Yes
2. Button Two Text Size: 15px
3. Button Two Text Color: #ffd078
4. Button Two Background: transparent
5. Button Two Border Width: 0px
6. Button Two Border Radius: 0px
7. Button Two Letter Spacing: 3px
8. Button Two Font Weight: Ultra Bold
9. Button Two Font Style: Uppercase
10. Button Two Icon Color: #ffd078
11. Only Show Icon On Hover For Button Two: No
12. Button Two Padding: 15px top and bottom; 25px left and right.
Sizing

Set the content width to 70%.

Voila! You now have a fully designed fullwidth header for Mrs. Nicole’s 2nd grade class.

How to Design a Realtor’s Fullwidth Header

Let’s design this elegant and modern fullwidth header for a realtor’s website. This section utilizes a background image, background gradient, AND a background pattern. Let’s get to work!

Add a new page, then add a Fullwidth Section and Fullwidth Header

First, weâ€™ll need to add a fullwidth section to our page. Click on the â€œ+â€ icon to bring up the section options and then click â€œFullwidthâ€. This will load the fullwidth module library where you can select â€œFullwidth Headerâ€ from the options. This will load the fullwidth header module to your page.

Add Content

First, let’s add the content needed for this module in the Text tab:
1. Title: Let’s Find Your Dream Home
2. Subtitle: Dave Merrit – Realtor
3. Button #1 – Book A Free Consult
4. Button #2 – Email Me
5. Body Text: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.
Style the Background

Add a Gradient

In the background tab, click the second icon, the gradient icon, and configure these settings:
1. Gradient Stops: rgba(56,65,58,0.74) at 100% and #38413a at 70%
2. Gradient Direction: 88deg
3. Place Gradient Above Background Image: Yes
Add Image

Click the third icon, the image icon, and then click “Add Background Image” to upload your image. This demonstration uses images from the free Realtor pre-made layout pack. You can download the full-resolution images by scrolling to the bottom of this post.

Add a Background Pattern

Add a background pattern by configuring these settings:
1. Select Tufted from the dropdown.
2. Pattern Color: rgba(0,0,0,0.2)
Choose the Layout

Here is where weâ€™re going to align the module content to the center and make it fullscreen.
1. Text & Logo Alignment: Center
2. Make Fullscreen: Yes
Style the Title Text

Style the title text by configuring these settings:
1. Title Font: Merriweather
2. title Text Size: 5rem
Style the Body Text

Style the body text by configuring these settings:
1. Body Font: Open Sans
2. Body Text Size: 16px
3. Body Line Height: 2em
Style the Subtitle Text

Style the subtitle text by configuring these settings:
1. Subtitle Font: Open Sans
2. Subtitle Font Weight: Bold
3. Subtitle Font Style: Uppercase
4. Subtitle Text Color: #b4926b
5. Subtitle Letter Spacing: 3px
Style Button #1

Style button #1 by configuring these settings:
1. Use Custom Styles For Button One: Yes
2. Button One Text Size: 18px
3. Button One Background: #b4926b
4. Button One Border Width: 0px
5. Button One Border Radius: 0px
6. Button One Padding: 10px top and bottom; 25px left and right.
Style Button #2

Style button #2 by configuring these settings:
1. Use Custom Styles For Button Two: Yes
2. Button Two Text Size: 18px
3. Button Two Border Width: 1px
4. Button Two Border Color: rgba(255,255,255,0.19)
5. Button Two Border Radius: 0x
6. Button Two Padding: 10px top and bottom; 25px left and right
Voila!Â Now you have a beautiful fullwidth header for a realtor website.

Final Thoughts

The Divi Fullwidth Header is a fast and easy way to build a stunning website hero section for your website. Since website hero sections are so essential in making a great first impression, it’s important that your design is branded, eye-catching, and informative. With the Fullwidth Header, it’s easy to build a header that hits all of those goals within one module. Now that you’ve seen what’s possible with the Fullwidth Header, how will you design yours?

The post How to Style Your Fullwidth Header Module’s Background appeared first on Elegant Themes Blog.
27.09.2022