10. Let's Celebrate!

Nu firar vi!You are a star!

 

6.5 Design a Homepage With Divi

  • Your progress:

The homepage is your chance to create an excellent first impression for your visitors. The first thing they’ll notice is the hero area, and we’ve put extra effort into making it beautiful. It features a stunning background image with an overlay, a divider shape at the bottom, a prominent heading, and two eye-catching call-to-action buttons. As you scroll down, you’ll find three blurbs with a captivating hover effect that elevates them from the surface when hovered over. Each blurb contains a classic image on the left and text with a button on the right. Next, we have a client or custom slider showcasing testimonials, and below that, you’ll see the three latest news in a dynamic and automatically updated blog grid.

Just before the header, we’ve included a full-width image. That sums up the design elements we’re incorporating into our homepage. To start building this layout, let’s head to our development site, enable the visual builder, and remove any temporary content you may have added previously. We’ll begin by creating a row with a single column to add the hero section’s text. Before we proceed, let’s set the background image. Click on the section’s cogwheel, navigate to the background tab, and upload the background image. Adjust the image settings to make it look perfect. To make the text more readable against the background, you can change the background blend mode to “Multiply” and add a black background color with reduced opacity. This creates a nice overlay effect.

Now, let’s work on the heading. You can edit the text for the main heading, and, for a stylish design, change the font to “Cormorant Garamond,” set it to white or a lighter color, increase the font size to 100 pixels, and adjust the line height for better readability.

Next, you can add an icon above the heading. Insert an image module and center-align it. Adjust the placement of the icon as needed. Below the heading, add the additional text. For consistent styling, change the font to “Carla,” set the font size to 18 pixels, center-align the text, and use a light gray color.

Now, let’s add the call-to-action buttons. Create a new row with two columns. Place a button module in the first column, and in the second column, add another button module. Customize the button text, link them to the appropriate pages on your website, and ensure proper alignment.

Since you’ll be creating multiple buttons on your site, it’s efficient to create a global preset for these button styles. Right-click on the purple bar and apply these styles to the active preset. This way, you can easily use these styles for all your buttons throughout the website.

To add a new button, simply click the plus sign in a column, select the button module, customize its content and link, and apply your global button styles.

For spacing, you can fine-tune it using padding and margin settings in the row and module settings. Adjust the top and bottom padding to control the spacing. To eliminate the tight spacing inside the button and create a smooth hover effect, use the spacing settings.

Now, let’s create the blurbs. Start by adding a section and create a row with three columns. Insert blurb modules into each column, and customize the text and images accordingly. Add styling to make the blurbs look consistent with your design. You can also apply the hover effect to lift the blurbs slightly when hovered over.

For better alignment, use the “Use Custom Gutter Width” setting in the row design settings to control the space between the blurbs. Set the gutter width to your preferred value, like “2.”

Next, we’ll focus on the testimonial slider section. Create a new section and insert a single-column row. Add a slider module to this row. Customize each slide by pasting the content, changing the name, and editing other details as needed. For example, apply a background color and style the text. Use HTML and inline CSS to fine-tune the design, including fonts, colors, and text formatting. Duplicate slides as necessary and modify the content accordingly.

Finally, configure the slider settings to control the automatic sliding duration and the hover behavior. Apply the desired animation settings.

Now, let’s create the “Latest News” section. Add a new section with a one-column row. Place a text module to display the title. Format the text using the global presets for consistency.

Below the title, add another row with one column. Insert a blog module into this column and configure it to display the three latest news posts. Adjust the settings, like displaying the excerpt, featured images, and other post details, to your liking.

In the design settings for the blog module, switch the layout to a grid layout. Style the elements within each blog post, such as the title, metadata, excerpt, and the “Read More” button. Apply consistent styling using the global presets to maintain a cohesive design.

You can create custom styling for the blog posts’ overlay and box shadow to match your design. To ensure a balanced look, use the “Blog” module’s custom line height to control spacing.

For spacing control, adjust the row settings and set a custom gutter width to fine-tune the spacing between the blog posts.

Finally, add a “View All News” button at the end of the “Latest News” section by including a button module and linking it to the news page on your site.

Now, it’s time to build the “Call to Action” section. Create a section with one column, and add a text module to display a compelling message. Use the global presets for text formatting to maintain a consistent design.

To achieve the dark background, set the background image for the section in the section settings. Adjust the image’s opacity using background blend modes to create a subtle overlay effect. Center-align the text within the section for a balanced look.

Add an image module to display an icon, and a button module for the call to action button. Customize the button text and link, and adjust the module’s size and alignment as needed.

For spacing adjustments, use module and row settings, including max-width for

the button module to control its size.

Now, you’ve built the homepage with all the necessary elements following your design concept. You can save this layout to your Divi library for easy reuse throughout your website. Don’t forget to adjust the mobile and tablet views for responsive design, ensuring your site looks great on all devices. Also, make sure to add your content and make any additional customizations to match your brand and business needs.

With this structure in place, you can continue building the rest of your website using Divi. Customizing headers, footers, and other key pages is an essential part of the website development process. You can also use Divi’s built-in options to control site-wide design, fonts, colors, and other global settings to maintain a consistent design throughout your website.

In the next chapter, we’ll make some tweaks for the mobile optimization.

This is a free course about how to design a website with WordPress and Divi. The course is funded by affiliate links. If you purchase something from these links, we'll receive a commission but it will never cost more for you. Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes or SiteGround. DiviMundo is 100% independent. We only promote services that we like and use ourselves on a daily basis.

Victor Duse
Victor Duse was born in Sweden in 1980 and has over 20 years experience of web design, web development and teaching in sectors like media, marketing, energy, industry and the public sector. He's the founder of DiviMundo and the WordPress Agency Duse Media in Malmö, Sweden. Victor is a Brazilian Jiu-Jitsu black belt and he has a soft spot for dark chocolate.

Comments

Feel free to ask questions and leave feedback on the tutorial here.

2 Comments
  1. I have a question. I’m very new to all of this and am following this course with the Divi Crib website learning how to build. All of a sudden, when I go to choose the font for some text, my recent/past choices are no longer at the top like they have been and I’m having to scroll down to find them in the long list. Is there a way to get those back up at the top like they were? I have tried clearing my cache in my browser and in WordPress but that didn’t help. Thank you.

    Reply
    • Hi Cynthia! I get the same result when I’m testing with the latest version of Divi, so it could be a bug in this version. Report it to the Elegant Themes support and they will hopefully fix the issue asap. Until then, use the search feature to find the font quickly.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Affiliate Disclaimer

All content on DiviMundo is funded by you – our beloved readers. Some of the links are affiliate links. This means that if you click on the link and purchase something, I will receive an affiliate commission. But it will never cost more for you. Thanks for your support!

Victor Duse, founder of DiviMundo