Top Divi Fonts & Font Combinations to Use in 2025

by Phoenix | Nov 12, 2024 | Uncategorized

Divi Mobile Menu

Top Divi Fonts & Font Combinations to Use in 2025

Choosing the right fonts and font combinations is essential for a visually appealing and readable website. With Divi’s vast typography options, you can create a unique and engaging user experience by pairing fonts that capture your brand’s style. In this article, we’ll cover some of the top font trends and combinations to use in Divi for 2025, helping you stay on the cutting edge of web design.

Divi Mobile Menu

About Divi Font and Text Styling Options

Divi provides a comprehensive suite of font and text styling options, empowering you to craft a unique visual experience for your content. You can effortlessly adjust various text properties, including font size, weight, line height, letter spacing, and font family, to align perfectly with your brand. Divi also supports advanced text design with third-party plugins from the Divi Marketplace, such as Divi Supreme Typing Text, Divi Next Fancy Text, Divi Carousel Maker, and Text Stroke by Divi Sensei, which add dynamic text animations and effects to elevate your site’s appeal. With these tools, Divi offers flexibility for any typography style, from clean and minimalist to bold and creative.

10 Best Divi Fonts

Divi Mobile Menu

01:

Montserrat

Montserrat is a popular geometric sans-serif font that’s modern and versatile. Known for its clean lines and minimalistic look, Montserrat is ideal for headers and bold text, giving any website a sleek, contemporary feel. It works well for brands in technology, design, and lifestyle industries.

Get Google Font

02:

Roboto

Roboto is one of the most widely used fonts for web content because of its readability and flexibility. It has a clean and straightforward design, making it suitable for both body text and headings. With its friendly and professional appearance, Roboto works well across various industries.

Get Google Font

03:

Playfair Display

Playfair Display is an elegant serif font with a classic, sophisticated look, often seen on high-end and editorial websites. With its expressive curves and unique style, this font is ideal for creating a sense of luxury and refinement, especially in headers.

Get Google Font

04:

Lato

Lato is a humanist sans-serif font that has become very popular for its warmth and readability. It’s designed to be used in body text but is also effective for subheadings and smaller headers. Lato gives a welcoming, professional feel, making it a great choice for brands that want a friendly and accessible style.

Get Google Font

05:

Poppins

Poppins is a geometric sans-serif font with rounded edges that give it a friendly and playful appearance. Its versatility and legibility make it suitable for both headlines and body text, and it’s often used on modern websites with a focus on style.

Get Google Font

06:

Raleway

Raleway is an elegant sans-serif font with thin, refined lines that add a touch of sophistication. Often used in high-end fashion and design sites, Raleway is great for headings and is known for its unique and stylish appearance.

Get Google Font

07:

Open Sans

Open Sans is a simple, friendly sans-serif font designed for maximum readability. It’s ideal for body text, creating a pleasant reading experience for users. This font is highly adaptable and works well across different screen sizes and types.

Get Google Font

08:

IBM Plex Sans

IBM Plex Sans is a modern, versatile sans-serif font with a professional edge, ideal for corporate and technology websites. Created by IBM, this font is designed for clarity and readability, making it a strong choice for tech-driven brands or professional services.

Get Google Font

09:

Source Sans Pro

Source Sans Pro is a versatile and highly readable sans-serif font created by Adobe, known for its clean and modern design. Its open letterforms and balanced proportions make it ideal for screen reading, bringing a professional yet approachable feel to any website. Source Sans Pro is perfect for brands aiming to deliver content clearly and effectively without sacrificing a contemporary look.

Get Google Font

10:

Ubuntu

Ubuntu is a humanist sans-serif font designed to be highly readable and approachable. With a slightly rounded appearance, it feels friendly and modern, making it a great choice for brands that want to convey warmth and accessibility.

Get Google Font

10 Best Divi Font Combinations

01:

Playfair Display + Montserrat

Combining the classic elegance of Playfair Display with the clean modernity of Montserrat creates a sophisticated yet approachable design. Perfect for brands looking to convey professionalism and style, this pairing is ideal for luxury websites, editorial blogs, and high-end e-commerce stores. Playfair Display’s serif detail in headers draws the eye, while Montserrat’s smooth sans-serif body text ensures readability and balance, making it a powerful choice for any refined, user-friendly website.

02:

Poppins + Open Sans

The Poppins and Open Sans combo brings a friendly, modern look, perfect for creating an inviting user experience. Poppins’ bold, rounded headlines draw attention, while Open Sans keeps body text clean and readable. Ideal for brands seeking a professional yet approachable style.

03:

Merriweather + Lato

The pairing of Merriweather and Lato blends classic elegance with modern simplicity. Merriweather’s serif charm in headlines contrasts beautifully with Lato’s clean, sans-serif body text, offering both readability and style. Perfect for brands that want a timeless yet contemporary feel.

04:

Roboto Slab + Roboto

The combination of Roboto Slab and Roboto offers a sleek, modern look with a strong, structured feel. Roboto Slab’s bold serif headings pair effortlessly with Roboto’s clean, neutral body text, creating a balanced and professional design perfect for any website.

05:

Nunito + Source Sans Pro

Nunito brings a rounded, approachable feel to headings, while Source Sans Pro offers clean, neutral body text for excellent readability. This combination strikes the perfect balance between warmth and professionalism, making it ideal for modern, user-friendly websites.

3 Ways to Autoplay Video in Divi Without Plugins | Divi Video Autoplay Guide

by Phoenix | Nov 8, 2024 | Uncategorized

Divi autoplay video

3 Ways to Autoplay Video in Divi Without Plugins | Divi Video Autoplay Guide

Adding autoplay videos in Divi can create a dynamic and engaging experience for your visitors. Let’s explore three effective ways to make this happen—without the need for plugins. Choose the approach that best suits your design and functionality needs.

Method 01:

Autoplay Video with Controls on Hover

In this method, your video will autoplay but only display controls (like play, pause, and volume) when users hover over it. Perfect for instances where you want a sleek, minimalistic video experience.
Steps to Implement:

Go to Divi » Theme Options » Integration and paste the following code in the field labeled “Add code to the ”:

Next, navigate to the page or post where you want the autoplay video and enable the Divi Visual Builder.
Insert a Video Module and delete the default YouTube video.
Add your video from the WordPress Media Library (formats like MP4 and MOV work best).
Go to Advanced » CSS ID & Classes in the Video Module and set the CSS Class to dm-autoplay-btn.
Save changes and preview your page to confirm the video autoplays with controls visible on hover. (Note: Autoplay works only on the frontend, not in the Visual Builder.)

Pro Tip: If you want this functionality only on specific pages, add the code in a Divi Code Module on those pages instead of globally.

Method 02:

Autoplay with Unmute on Click

IThis method starts the video in autoplay mode, but the sound remains off. When users click anywhere on the video, it will unmute, allowing them to listen to the audio seamlessly.

Steps to Implement:

Go to Divi » Theme Options » Integration and paste this code in thefield:

In the Visual Builder, add a Video Module to your desired section.
Choose or upload your video from the Media Library.
Under Advanced » CSS ID & Classes, set the CSS Class to dividaddys-autoplay-click.
Save and preview to test the unmute-on-click feature. If the video doesn’t autoplay, clear your browser and site caches.

Pro Tip: If you want this functionality only on specific pages, add the code in a Divi Code Module on those pages instead of globally.

Method 03:

HTML5 Video Embed (Direct Code)

This approach allows for a simple HTML5 embed, ideal if your video is self-hosted and you want maximum control over its behavior.

Steps to Implement:

Add a Code Module in the desired Divi section.

Customize the attribute with the URL of your video.

Explanation of Attributes:

autoplay: Starts the video automatically.
muted: Mutes the video to allow autoplay across more browsers.
loop: Ensures the video replays after finishing.
playsinline: Prevents full-screen playback on mobile devices.
controls: Displays control options for users to interact with.

Each of these methods provides a unique way to enhance your Divi site with autoplay videos. Here’s a quick recap:

Hover Controls (Method 1): Best for videos where user interaction is limited to hover.
Unmute on Click (Method 2): Perfect if you want to give visitors control over sound.
HTML5 Embed (Method 3): Great for custom setups with full control over attributes.
Happy designing! 🖌️✨

Divi Documentation | More Tutorials

WooCommerce Shortcodes to Enhance Functionality on Divi Sites

by Phoenix | Nov 8, 2024 | Uncategorized

WooCommerce shortcodes for Divi

WooCommerce Shortcodes to Enhance Functionality on Divi Sites

If you’re a Divi theme user looking to maximize WooCommerce’s capabilities, shortcodes are your secret weapon 🔑. These quick snippets of code let you add and control e-commerce elements on your Divi site without needing advanced coding skills. In this guide, we’ll walk you through essential WooCommerce shortcodes and how to use them on Divi sites to create an optimized, user-friendly shopping experience. Let’s dive in and make your Divi site a shopping hub! 🚀

Divi Mobile Menu

Why Use WooCommerce Shortcodes on Divi?

Divi is known for its visual appeal and flexibility, but WooCommerce shortcodes give you even greater control over how and where e-commerce elements appear. Whether you’re running a small boutique or a large online store, these shortcodes can be used to customize pages, showcase featured products, and enhance the checkout experience. Here’s a look at the must-have WooCommerce shortcodes to make your Divi site stand out.

Essential WooCommerce Shortcodes for Divi

Divi Mobile Menu

01:

Display Product Pages with [product]

This shortcode is one of the most versatile in WooCommerce. It lets you display products based on specific criteria, like categories, tags, or sale items.
Example: [products limit="4" columns="2" category="featured"]
Usage: Use this shortcode on any page to showcase specific products, like new arrivals or sale items. Perfect for highlighting featured products directly on your homepage.

02:

Cart Page Shortcode [woocommerce_cart]

This shortcode generates the WooCommerce cart page.
Usage: Place this shortcode on a dedicated page to create a cart section, allowing users to view and adjust their cart items.

03:

Checkout Page Shortcode [woocommerce_checkout]

Want to create a streamlined checkout experience? The [woocommerce_checkout] shortcode is designed to render the full checkout form.
Usage: Use it on a dedicated checkout page for a seamless shopping journey, fully integrated with Divi’s clean layouts.

04:

Order Tracking Shortcode [woocommerce_order_tracking]

Enhance customer experience by letting users track their orders with this shortcode.
Usage: Use this shortcode on a custom order-tracking page to add a professional touch to post-purchase communication.

05:

Display Single Product with [product id=""]

To display a specific product, use the product ID within this shortcode.
Example: [product id="123"]
Usage: Ideal for landing pages or promotional sections where you want to emphasize a single, high-value item.

Divi Mobile Menu

Step-by-Step Guide to Using WooCommerce Shortcodes on Divi

Step 1: Identify the Placement of Your Shortcodes

Choose which page (e.g., homepage, shop page, or landing pages) will benefit most from each shortcode.

Step 2: Add Shortcodes to Divi Modules

In Divi’s Visual Builder, add a Text Module where you want to place the shortcode. Copy and paste your selected WooCommerce shortcode into the Text Module and save.

Step 3: Customize the Layout with Divi

Adjust the styling of each element, such as text, alignment, and spacing, to align with your site’s design. For example, use Divi’s row and column structures to arrange products in grids or lists.

Step 4: Preview and Test

Preview the page to ensure the shortcodes display correctly. Test their functionality, especially for the cart and checkout shortcodes, to make sure they work smoothly with WooCommerce.

Tips to Optimize WooCommerce Shortcodes on Divi

Combine Shortcodes: You can mix multiple shortcodes on the same page, like showing a product grid above a checkout button, for quicker purchases.
SEO Advantage: Shortcodes like [products] and [product] help display specific items on strategic pages, which can boost keyword relevance for product-focused searches.
Regular Updates: Always keep WooCommerce and Divi updated to avoid compatibility issues with shortcodes.

Conclusion

With WooCommerce shortcodes, you can turn any Divi site into a fully functional e-commerce platform! From product displays to cart management, these shortcodes provide flexibility to shape your customer’s shopping experience. So, start experimenting with these codes and give your Divi e-commerce site the boost it deserves! 🌟

Divi Tutorial Hub | WooCommerce Documentation:

Enable a Gradient Overlay with a Parallax Background in Divi

by Phoenix | Oct 26, 2024 | Uncategorized

Gradient Overlay with Parallax Background

Enable a Gradient Overlay with a Parallax Background in Divi

Want to give your Divi section that sleek, layered look with a gradient overlay on a parallax background? 💥 You’ve come to the right place! Normally, Divi doesn’t make this combo easy—but we’ve got a quick CSS trick to make it happen directly in the section’s settings. Let’s dive in! 🚀

content: “”;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #359f99 0%, #1d2a54 95%);
opacity: 0.9;
z-index: 2;
pointer-events: none;

Divi Mobile Menu

Step 01:

Add the CSS Directly to the Section

In the Divi Builder, open the section where you want to create this effect.
Head to the Advanced tab, then click on Custom CSS.
In the Before field, paste the following CSS:

Step 03:

Set the Background Image and Enable Parallax

Go to the section’s Background settings and open the Image tab.
Select your background image, then turn on the Parallax option. ✨

Gradient Overlay with a Parallax Background

Damm! You can also inspect below comment section for result!

Step 04:

Configure Your Gradient Overlay

You can easily change the gradient in the code
Choose your colors, set the direction, and adjust opacity to get the perfect overlay effect. 🎉

Gradient Generator | More Tutorials

Pro Tip:

💡 This works by adding custom CSS to the section’s Before styling. If you’ve already got any custom styles in the Before box, you might want to double-check to avoid conflicts! 🧐

How To Add Multiple Recipient Email Addresses In Divi Contact Form

by Phoenix | Oct 26, 2024 | Uncategorized

multiple recipient email addresses in divi

How To Add Multiple Recipient Email Addresses In Divi Contact Form

Yo, Divi Enthusiasts! Ever wanted your Divi contact form to send emails to more than one person? Whether you’re running a business or just need multiple team members in the loop, adding multiple recipient email addresses is a breeze. Let’s dive in and show you how to make this happen—no sweat! 😎

Step 01:

Open Your Divi Contact Form Module💻

First things first—jump into your Divi Builder and find the page that contains your contact form. Once you’ve located the form, click on the module settings (you know the gear icon 🔧) to get started.

Step 02:

Head to the “Email” Section

In the Contact Form Module settings, scroll down to the Email section. This is where the magic happens. ✨

multiple recipient email addresses in divi

Step 03:

Add Multiple Recipients (Separated by Commas)

Here’s the hack: You can send form submissions to multiple recipients by simply adding their email addresses, separated by commas.

For example:
youremail@domain.com, teammate@domain.com, boss@domain.com

*Pro Tip*: Make sure to check for typos! You don’t want those emails getting lost in the void.

Step 04:

A Test It Out

Before you celebrate, make sure to test it! Send a test message through the form and confirm that everyone on your recipient list gets the email.

Divi Documentation | More Tutorials

Step 5: You’re Done—Enjoy the Power of Multiple Email Recipients!

And just like that, you’ve leveled up your Divi contact form game. Now you can easily keep your whole team in the loop with every submission. 🙌
Feeling like a web wizard yet? Explore more Divi tricks and level up your website skills with our other tutorials. Stay tuned, DiviDaddy’s got your back! 🚀