Tutorials Archives - Divi Engine

How to Plan Your Membership Site: A Comprehensive Guide

Divi Engine — Thu, 06 Jun 2024 15:08:43 +0000

Building a membership site where content is paywalled behind a subscription is an excellent way to generate recurring revenue and build a loyal community around your brand. However, success hinges on thorough planning. This guide will walk you through the essential steps of planning your membership site, from subscription plans to payment processing, and show you why Divi Membership is the perfect solution for bringing your vision to life.

Step 1: Define Your Subscription Plans

The foundation of any membership site is its subscription plans. Consider the following:

Types of Plans: Will you offer multiple tiers? For instance, a basic plan for casual users, a premium plan with additional content, and an exclusive VIP plan with personalized services.
Pricing: Determine the price points for each tier. Conduct market research to ensure your pricing is competitive yet profitable.
Content Access: Decide what content will be available for free and what will be restricted to paid members. Balance is key—offer enough free content to attract users, but keep your most valuable resources behind the paywall.

Step 2: Payment Processing and Billing Cycles

Setting up a seamless payment process is crucial for user retention and satisfaction.

Payment Gateways: Choose reliable payment gateways like PayPal or Stripe. Divi Membership supports both, ensuring secure and smooth transactions.
Billing Cycles: Decide whether you will offer monthly, quarterly, or annual billing cycles. Offering multiple billing options can cater to different user preferences and increase sign-ups.
Automated Billing and Invoices: Ensure your system supports automated billing and invoice generation. Divi Membership dynamically creates invoices and supports various billing cycles, making management effortless.

Step 3: Registration and Login

A straightforward and user-friendly registration process encourages sign-ups.

Registration Form: Use a customized registration form to gather necessary user information and allow immediate subscription to a plan. Divi Membership’s Registration Form module makes this easy.
Login Module: Provide a simple yet secure login form. Divi Membership’s Login Module offers enhanced customization compared to standard forms, ensuring a seamless user experience.

Step 4: Content Management

Managing your content effectively ensures that your members receive the value they are paying for.

Content Types: Configure the types of content your membership plugin will manage. Divi Membership allows you to control access to various content types, including posts, pages, and custom post types.
Restricted Content: Customize how restricted content appears to users. With Divi Membership, you can easily set access controls for different membership plans.

Step 5: User Management and Engagement

Engaging with your members and providing excellent customer service is vital for retention.

Member Directories: Create a directory of your members using the User List module. This can foster community interaction and networking.
Profile Management: Allow users to manage their profiles and subscriptions through a dedicated account page, which Divi Membership automatically creates for you.

Step 6: Integrating AI Chatbots

Enhance user experience and streamline support with AI chatbots.

AI Chatbots for Support: Implementing an AI chatbot, like those offered by AI chatbot app development services, can provide 24/7 support to your members, answering common queries and guiding them through issues.
Personalized Interaction: AI chatbots can personalize interactions based on user data, providing recommendations and upselling higher-tier plans.

Step 7: Monitoring and Analytics

Keep track of your site’s performance to make data-driven decisions.

Subscription Data: Use Divi Membership’s subscription management features to monitor new sign-ups, cancellations, and renewals.
Zapier Integration: Automate workflows by connecting your membership data with other apps via Zapier. Divi Membership’s integration with Zapier allows you to trigger actions in other apps based on subscription activities.

Step 8: Email Notifications

Keeping your members informed is key to maintaining engagement.

Automated Emails: Set up automated email notifications for key actions such as new subscriptions, renewals, and failed payments. Divi Membership offers customizable email templates to ensure your communications are consistent and professional.

Why Divi Membership is the Perfect Solution

Divi Membership provides all the tools you need to build a successful membership site. From flexible subscription management to seamless payment processing and robust content access controls, Divi Membership ensures you can create a site that meets your business goals and provides an excellent user experience.

Getting Started with Divi Membership

Installation: Follow the installation guide to set up Divi Membership on your site.
Configuration: Configure your content types and payment gateways, and start creating your membership plans.
Customization: Use Divi’s powerful customization options to tailor the look and feel of your membership site.

With Divi Membership, you can transform your site into a thriving community with recurring revenue. Start planning today and take the first step towards building a successful membership site. To purchase Divi Membership, visit this link or click the button below.

Buy Divi Membership

By following these steps and utilizing Divi Membership, you’ll be well on your way to creating a membership site that

not only attracts and retains members but also provides them with a top-notch experience. For more information on Divi Membership features and setup, visit the official documentation.

The post How to Plan Your Membership Site: A Comprehensive Guide appeared first on Divi Engine.

Get Instant Order Alerts on Your Mobile Device with WP Order Alerts for WooCommerce

Divi Engine — Wed, 22 May 2024 10:58:06 +0000

Update: WP Order Alerts is in Open Beta Now!

We are excited to announce that WP Order Alerts is now in open beta, and anyone can sign up! Additionally, the app is now available for both Android and iOS devices. No need for an invite code 🎉

Getting Started with WP Order Alerts

Sign Up for Early Access

Visit wporderalerts.com to sign up for open beta access. You no longer need an access code—just head over to the site and sign up to start using WP Order Alerts today.

Adding Your First Site

Once logged in to your WP Order Alerts dashboard, you can start adding your first site. Enter a site name and the root URL of your store. Note that for local machines, the server must be accessible via the internet.

Install the Helper Plugin

Next, sign into your WordPress install where WooCommerce is active. Download the WP Order Alerts helper plugin from your dashboard, upload it to your site, and activate it. The plugin will guide you to retrieve your connection key from your WP Order Alerts dashboard.

Connect the Helper Plugin

Copy the connection key from your WP Order Alerts dashboard and paste it into the plugin settings on your WordPress site. Your store will now be connected to WP Order Alerts.

Setting Up the Mobile App

Download the WP Order Alerts App

Available for both Android and iOS, you can download the app from the Google Play Store or the Apple App Store. Search for “WP Order Alerts,” install the app, and log in using your WP Order Alerts account.

Enable Notifications

Allow the app to send notifications to receive real-time order alerts on your mobile device. Your connected store will appear in the app, and you can view past orders and manage order statuses directly from your phone.

Managing Users and Locations

Add Additional Users

From your WP Order Alerts dashboard, you can add users who need access to order alerts. Enter their email, and they will receive an invitation to sign up, download the app, and start managing orders.

Assign User Roles

Assign roles such as “Site Manager” or “Read Only” to users based on their responsibilities. This feature ensures that team members can access necessary information without full admin rights.

Conclusion

WP Order Alerts aims to be the best notification platform for WooCommerce stores. With continuous user-directed development, expect more features and improvements. For feedback and to keep track of updates, visit feedback.wporderalerts.com.

Head over to wporderalerts.com to sign up for open beta and start receiving free order alerts on your mobile device today!

The post Get Instant Order Alerts on Your Mobile Device with WP Order Alerts for WooCommerce appeared first on Divi Engine.

How to Create Dynamic Text Legibility with The Difference Blend Mode in Divi and Gutenberg

Divi Engine — Tue, 05 Mar 2024 14:53:43 +0000

What You Need

A WordPress site with Divi installed or the Gutenberg editor
A video background
Basic understanding of CSS

Step-by-Step Guide

For Divi Users:

Step 1: Preparing Your Video Background

Find or create a video background. For high-quality, free options, sites like Pexels are invaluable.
Adjust your video’s contrast if necessary to ensure text legibility. Online tools like media.io can help with contrast adjustment.

Step 2: Setting Up Your Divi Environment

Navigate to your WordPress page and enable the Divi builder.
Choose to “Build From Scratch” and select a full-width section for your header.
In the visual builder mode, under the design tab, center your content and set it to fullscreen.

Step 3: Adding and Styling Your Text

Add your header and sub-header text. Experiment with sizes and styles to fit your design needs. For our example, we used “Super Big Title” as the main header.
Adjust the text size to ensure visibility. For instance, a title size of 108px was effective for our design.

Step 4: Applying the Difference Blend Mode

Navigate to the design settings of your full-width header module.
Scroll to the filters section and find the blend modes option.
Select “Difference” from the dropdown menu to apply the blend mode, ensuring your text adjusts its color based on the background, enhancing visibility.

For Gutenberg Users:

Step 1: Creating a New Page with Gutenberg

Create a new page, naming it accordingly, e.g., “Difference Background.”
Opt to use the default editor if prompted by Divi.

Step 2: Adding a Column Block

Insert a column block and set it to 100% width.
Adjust page settings as needed, e.g., setting the template to blank and disabling sidebars for a wide layout.

Step 3: Inserting Text and Video

Add a heading block with your desired text and style it—set the text color to white and adjust the size for visibility.
Insert a video block, upload/select your video, and ensure settings like autoplay, loop, and muted are enabled.

Step 4: Customizing with CSS

To center the text over your video, you might need to add custom CSS. Utilize the Advanced settings in Gutenberg to add custom classes for both your text and video blocks.
For text, ensure it’s positioned absolutely and centered. Use CSS to adjust its placement over the video.
For the video, set its size, position, and z-index to ensure it covers the entire background and sits behind the text.
Apply the difference blend mode to your text via CSS using .yourTextClass { mix-blend-mode: difference; }.

Conclusion

Creating engaging web designs with dynamic text visibility over video backgrounds is streamlined with Divi and Gutenberg. Both platforms offer unique ways to implement the CSS difference blend mode, enhancing your site’s visual appeal and user experience.

What’s Next?

Explore various video backgrounds and text styles to discover the transformative impact of blend modes on your designs. Stay tuned for more Divi and WordPress tips from the Divi Engine team. And don’t forget, if you loved this tutorial, check out the other Divi and WordPress tutorials on our blog!

The post How to Create Dynamic Text Legibility with The Difference Blend Mode in Divi and Gutenberg appeared first on Divi Engine.

Mastering E-commerce with Divi BodyCommerce – Part 5: Building a Single Product Page

Divi Engine — Mon, 26 Feb 2024 08:56:24 +0000

Welcome back to our “Mastering E-commerce with Divi BodyCommerce” series. In this insightful segment, we focus on enhancing Single Product Pages, a pivotal aspect of your WooCommerce store’s user experience. This portion of our journey through Divi BodyCommerce offers practical tutorials for both beginners and advanced users, covering everything from advanced variation swatches to creating engaging product comparison tables, to integrating customer reviews.

What You Will Learn in Part 5:

Overview of Single Product Page Customization: Basics and opportunities for customizing single product pages.
Building a Single Product Page: Constructing a product page that combines functionality and aesthetics.
Implementing Advanced Variation Swatches: Making product selections visually appealing and user-friendly.
Creating a Product Comparison Table: Enabling informed decisions by comparing product specifications.

This series equips you with the knowledge to implement these features, enhancing your e-commerce site’s usability and design.

Video 16: Overview of Single Product Page Customization in Divi

In our continuous effort to refine and perfect e-commerce platforms using Divi BodyCommerce, this segment zeroes in on the paramount importance of the Single Product Page. Our tutorial is meticulously designed to navigate through the intricacies of customizing these pages to not just showcase products but to tell a story that resonates with your audience.

Key Highlights of the Single Product Page Customization:

Dynamic Product Display: Understand how to dynamically tailor the product presentation using Divi BodyCommerce, ensuring each product not only stands out but also communicates its value proposition effectively.
Tag-specific Customization: Dive into the methods of applying specific customizations based on product tags, allowing for a highly targeted approach to product page design.
Focus on Singular Product Excellence: Learn the art of concentrating customization efforts on individual products, enhancing their appeal and boosting conversion potential.

This tutorial is crafted for those eager to push the boundaries of what’s possible with Divi BodyCommerce, aiming to create single product pages that not only attract but convert. Through detailed walkthroughs and expert tips, we delve into creating a product page that not only fits within the aesthetic of your site but elevates the shopping experience to new heights. Join us as we explore the tools and techniques at your disposal for making each product shine in its own right.

Video 17: Building a Single Product Page in Divi

Now that we have the basics down in our journey through the digital storefront landscape, we’re tackling the creation of a single product page using Divi BodyCommerce. This chapter is dedicated to constructing a template that marries functionality with aesthetic appeal, albeit with a structural focus. We’re setting aside the visually intense animations characteristic of Apple’s product pages in favor of a more pragmatic, Amazon-inspired layout. This approach is not just about simplicity but about crafting a user experience that is both intuitive and rich in detail.

Key Elements of a Product Page:

Product Title and Attributes: The cornerstone of any product page is its title and the various attributes that define it. These elements provide the customer with immediate, clear information about what’s being offered.
Vertical Gallery: A vertically aligned gallery offers a straightforward way for customers to view the product from multiple angles. This layout choice streamlines the visual experience, making it easy for users to navigate through images.
Recommendations and Related Products: By integrating suggestions for related products, we facilitate a browsing experience that encourages exploration without overwhelming the customer with choices.
Accordions and Compare Tables: To enhance the depth of information available, we’re incorporating accordions for detailed descriptions and a compare table for side-by-side product comparisons. These features enrich the product narrative and aid in the decision-making process.
Reviews and Tabs: Customer reviews and additional tabs for product information are essential for building trust and offering more detailed insights into the product.

This structured approach to building a single product page template with Divi BodyCommerce aims to streamline the shopping experience. By focusing on these key elements, we’re crafting a page that not only presents the product clearly and engagingly but also enhances the overall e-commerce functionality of the site.

Video 18: Implementing Advanced Variation Swatches in Divi

Time to fancify our e-commerce experience within Divi by delving into an essential aspect that significantly enhances user interaction on product pages: Advanced Variation Swatches. This feature moves beyond the conventional dropdown menus for product variations, offering a visually engaging and intuitive way for customers to view and select product options.

Why Advanced Variation Swatches?

Variation swatches present a dynamic method to display product variations, such as colors, sizes, or materials, through visually appealing icons. This not only enriches the visual aesthetics of your product pages but also improves the shopping experience by making selection processes quicker and more user-friendly.

Visual Appeal: Instead of textual dropdowns, customers enjoy a graphical representation of options, making choices clearer and more attractive.
Enhanced Interaction: Hovering over a swatch can display a larger view or tooltip, providing a closer look at the variation, such as a full logo or a detailed image of the material. This feature adds depth to the browsing experience, allowing customers to make informed decisions.
Customization and Flexibility: The advanced swatches are highly customizable. You can control the size of tooltips and choose background colors, ensuring consistency with your site’s design and branding.

Implementing Advanced Swatches

Implementing these swatches involves enhancing product attributes within Divi BodyCommerce, allowing for a transformation from simple dropdown selections to interactive visual swatches. This can include:

Color and Image Swatches: For products with color variations or where a pattern/material view is essential, color and image swatches can be a game-changer.
Label Swatches: Sizes or unique attributes can be displayed using label swatches, providing a clear and concise way to navigate through options.

Practical Application and Benefits

Let’s consider an online store selling purses in various colors. Instead of listing color options in a dropdown, color swatches can be used, instantly showing available colors. Hovering over these swatches can reveal a larger image of the purse in that specific color, enhancing visual interaction and likely increasing customer engagement.

User Engagement: By allowing customers to interact with product options visually, advanced swatches make the shopping experience more engaging and enjoyable.
Differentiation: Advanced variation swatches set your store apart from competitors by providing a unique and improved browsing experience.

Advanced Variation Swatches in Divi BodyCommerce are not just about aesthetics; they’re a strategic tool for enhancing user experience and engagement. By incorporating these into your Divi site, you elevate the visual appeal, making your product pages not only look better but also function in a more interactive and customer-friendly manner. Join us as we continue to explore and implement innovative features that make Divi the go-to choice for creating exceptional e-commerce experiences.

Video 19: Creating a Product Comparison Table in Divi

We have made great strides in enhancing our Woo Single Product Pages, so now we can provide customers with tools to make informed decisions is paramount. One such powerful feature is the Product Compare Table, a pivotal element in Divi BodyCommerce that significantly enhances the online shopping experience. This tutorial dives into the mechanics of adding and optimizing a Product Compare Table on your Divi site, drawing parallels to the comparison features found on major retail websites like Amazon.

Key Advantages of Product Compare Tables:

Informed Decision Making: By allowing customers to compare products side by side, they can evaluate differences in features, prices, and other critical attributes at a glance. This direct comparison fosters a more informed purchasing decision, enhancing customer satisfaction and trust in your brand.
Increased Engagement: Compare tables engage users by involving them in an interactive decision-making process. This interactivity keeps customers on your site longer, potentially leading to higher conversion rates.
Streamlined Shopping Experience: Customers can narrow down their choices without navigating back and forth between product pages. This convenience improves the overall user experience, making shopping seamless and hassle-free.

Implementing the Compare Feature:

Placement and Customization: The tutorial outlines the process of adding a compare table to your product pages, including where it fits within the site’s layout and how to customize which product attributes are displayed.
User-Driven Content: Highlighting the flexibility of Divi BodyCommerce, the tutorial demonstrates how you can empower customers to choose the products they wish to compare, further personalizing their shopping journey.
Visual Clarity: Emphasizing the importance of clear, concise comparison, the guide covers options for adjusting the display settings of the compare table, ensuring the information is easy to digest.

The addition of a Product Compare Table is more than just a feature; it’s a strategy to differentiate your e-commerce site, making it more engaging, user-friendly, and ultimately, more successful. This tutorial from Divi BodyCommerce is a testament to the endless possibilities within the Divi ecosystem to create an e-commerce platform that not only meets but exceeds customer expectations.

Coming up:

Part 6: Streamlining the User Onboarding Process

In the next installment of our series, we tackle the crucial aspect of user onboarding by focusing on enhancing the default WooCommerce login and registration process. Recognizing the importance of first impressions, we delve into designing custom login and registration screens with Divi BodyCommerce, aiming to create a more welcoming and brand-cohesive entry point for new users. Additionally, we explore how to personalize the login/register menu text, ensuring a seamless and user-friendly onboarding experience that aligns with your website’s overall aesthetic and user experience goals. This chapter is dedicated to optimizing these initial touchpoints, setting the stage for a lasting positive relationship with your customers.

Accessing the Course

While this free course provides core training, additional features such as progress tracking, support, and completion certificates are not included. For full access to these features, consider our paid version.

We’re excited to offer this course to the WordPress community, and there’s no enrollment required. All course installments will be published on our blog and linked in related posts, just like this one.

The post Mastering E-commerce with Divi BodyCommerce – Part 5: Building a Single Product Page appeared first on Divi Engine.

Enhance Your Divi Website with Interactive Particle Effects: A Detailed Divi Tutorial

Divi Engine — Wed, 07 Feb 2024 06:07:12 +0000

Welcome back, fellow Divi creators! In today’s Divi tutorial, today we’re diving deep into the world of particle effects. We found an awesome particle effects library that we thought would work great on Divi modules. I’m here to guide you through the process of adding a burst of confetti to your Divi buttons, step by step. Whether you’re working with a Divi button module, a Divi Contact Form, or a Divi Form Builder module, I’ll show you how to sprinkle some excitement onto your website. Let’s get started!

Method 1: Adding Confetti to a Divi Button Module

Adding confetti to a Divi button module is simpler than you might think. If you just want a quick snippet to add a confetti effect to a Divi Button module, click here.

Here’s a detailed breakdown:

Add a Custom Class to Your Button:

Open your Divi Builder and navigate to the button module where you want to add the effect.
Go to the Advanced tab and look for the CSS ID & Classes section.
In the CSS Class field, enter confetti-button (this is the class we’ll target with our JavaScript).

Insert a Code Module:

Directly below your button module, add a new code module.
This is where we’ll add our scripts to trigger the confetti.

Include the Canvas Confetti Library:

In the code module, add the script tag below to load the Canvas Confetti library from the CDN.

Add the JavaScript Trigger:

Below the script tag, add another tag to house your JavaScript code.
Copy and paste the JavaScript snippet below.
This code will listen for a click event on the class for the confetti button (.confetti-button) and activate the confetti when the button is clicked.

Save and Test:

Save the code module and exit the Divi Builder.
Test the button on your live site to witness the confetti effect upon clicking.

Skip to that part in the video tutorial ⮕

Method 2: Divi Contact Form Module Magic

Adding confetti to a Divi Contact Form module is just as easy, but if you just want a quick snippet to add a confetti effect to a Divi Contact Form module, click here.

Here’s a detailed breakdown:

Identify the Submit Button Class:

Use your browser’s developer tools to inspect the submit button on your contact form.
The class should be .et_pb_contact_submit.

Add a Code Module:

Just as in Method 1, add a new code module to your page where the contact form is located.

Load the Canvas Confetti Library and JavaScript:

Include the Canvas Confetti library script tag as before.
Add the JavaScript snippet below, making sure the class for the confetti button is the submit button class you found earlier.

Increase Specificity (Optional):

To ensure the correct button triggers the effect, add an extra class to your contact form module under the Advanced tab.
Update the JavaScript snippet to target the class for the confetti button within this new class (.form-class .button-class).

Customize and Save:

Modify the confetti settings in the JavaScript snippet as per your preference (more info).
Save the code module and exit the Divi Builder to test the effect.

Skip to that part in the video tutorial ⮕

Method 3: The Divi Form Builder Form Module

Now, if you are building awesome Divi forms with Divi Form Builder, the process is not much different, but if you just want a quick snippet to add a confetti effect to your Divi Form Builder forms, click here.

Here’s a detailed breakdown:

Find the Form Submit Button Class:

Inspect the form’s submit button to discover .divi-form-submit.

Insert a Code Module and Load the Library:

Place a new code module on your page and include the Canvas Confetti library script tag the same as in Method 1.

Add the JavaScript for Confetti:

Copy and paste the code below into the code module.
Make sure the snippet targets .divi-form-submit or whatever the button class is you found in the first step.

Customize Your Confetti Settings:

Within the JavaScript snippet, adjust the confetti settings to fit your design (more info).

Increase Specificity if Needed:

To ensure the correct button triggers the effect, add an extra class to your contact form module under the Advanced tab.
Update the JavaScript snippet to target the class for the confetti button within this new class (.form-class .button-class).

Save, Exit, and Marvel:

Save your changes, exit the Divi Builder, and click the submit button on your form to enjoy the confetti explosion.

Skip to that part in the video tutorial ⮕

Wrapping Up

With these detailed steps, you can add an element of interactive fun to your Divi buttons, making your website more engaging for your visitors. Feel free to play with the settings to create an experience unique to your site.

And remember, the Divi Engine blog is your go-to resource for more Divi tips and tricks. If you’re looking to expand your Divi toolkit, don’t forget to check out our all-access pass for a comprehensive array of Divi-enhancing tools. Happy building, and let the confetti fly! 🎉

The post Enhance Your Divi Website with Interactive Particle Effects: A Detailed Divi Tutorial appeared first on Divi Engine.

Customizing the Divi Theme: Where to Add Custom Code – Detailed Guide

Divi Engine — Tue, 06 Feb 2024 18:47:29 +0000

Customizing the Divi theme with your own custom code allows you to push the boundaries of design and functionality. Below is a detailed guide on the various places you can add custom code within the Divi Theme, including what type of code goes where, why you might choose each location, and their respective benefits and drawbacks. Finally, I’ll touch on how to use these options to increase specificity in your code, ensuring your customizations are applied precisely where you want them.

Theme Options (Custom CSS and Integration Tab)

Where to Add: Navigate to Divi > Theme Options in your WordPress dashboard. Here, you’ll find the “Custom CSS” box and the “Integration” tab.

Types of Code:

Custom CSS: For styling tweaks across your entire site.
Integration Tab: Ideal for adding HTML/JavaScript, such as Google Analytics code or custom scripts that need to run across the whole site.

Why Use This Location:

Custom CSS Box: Quick and easy way to apply site-wide style changes without affecting theme updates.
Integration Tab: Convenient for scripts that need to load on every page.

Benefits:

Easy access and management.
Changes apply site-wide, ensuring consistency.

Drawbacks:

Custom CSS applied here is loaded last, which can be both a benefit (overrides other styles) and a drawback (hard to override with specificity).

functions.php

Where to Add: Within your theme or child theme’s functions.php file.

Types of Code: PHP snippets to add functionality or modify existing features.

Why Use This Location: Ideal for extending Divi’s functionality or integrating with other plugins. Changes here are applied globally.

Benefits:

Powerful way to customize or extend your site’s capabilities.

Drawbacks:

Incorrect code can break your site. Always use a child theme to prevent loss of changes on update.

styles.css

Where to Add: In your theme or child theme’s styles.css file.

Types of Code: CSS for styling your website.

Why Use This Location: To define or override the default styling of your theme or specific parts of your site.

Benefits:

Keeps custom styles organized and separate from the theme’s original styles.

Drawbacks:

Requires understanding of CSS specificity to effectively override existing styles.

The Code Module

Where to Add: Directly within Divi Builder on posts, pages, or templates.

Types of Code: HTML, CSS, JavaScript, or shortcodes.

Why Use This Location: Perfect for adding custom code that only applies to a specific page or post.

Benefits:

Easy to use and doesn’t require editing theme files.
Great for one-off customizations.

Drawbacks:

Not suitable for site-wide changes. Each implementation is page-specific.

Child Themes

Where to Add: Through a child theme’s functions.php, style.css, or adding new PHP files.

Types of Code: PHP, CSS, and potentially JavaScript.

Why Use This Location: Safeguards your customizations against theme updates.

Benefits:

Preserves customizations.
Organizes and separates custom code from the parent theme.

Drawbacks:

Requires creating a child theme and understanding theme hierarchy.

Get our Free Divi Child Theme

Divi Section/Rows/Modules Advanced Tab

Where to Add: In the Advanced tab of any section, row, or module in Divi Builder.

Types of Code: CSS ID & Classes, and Custom CSS.

Why Use This Location: To apply specific styles or scripts to individual elements or sections.

Benefits:

High specificity for targeted customizations.
No need to edit theme files directly.

Drawbacks:

Can become cumbersome to manage for large-scale customizations.

Post or Page CSS

Where to Add: In the Divi Builder’s settings for individual posts or pages, under the Advanced > Custom CSS tab.

Types of Code: CSS specific to that post or page.

Why Use This Location: For styles that should only apply to a single post or page.

Benefits:

Directly targets the specific post or page.
Keeps page-specific styles organized.

Drawbacks:

Not efficient for styles that are reused across multiple pages.

Increasing Specificity in Your Code

To ensure your customizations target exactly what you intend, use specificity in your CSS and JavaScript. This means being more precise about which elements your code applies to, using IDs, classes, and nested selectors for CSS, and more targeted selectors for JavaScript. In practice, this could mean:

Using child themes and the style.css file for broad customizations with base specificity.
Leveraging Divi’s Advanced Tab or the Code Module for higher specificity where needed.
Applying CSS directly in the Theme Options or Integration Tab for site-wide rules, then overriding them on specific pages or modules with more specific selectors.

By thoughtfully choosing where to add your custom code and employing specificity wisely, you can tailor your Divi site to meet your exact needs without sacrificing performance or maintainability.

Wrapping Up

Leveraging custom code within Divi enables you to precisely tailor your website’s functionality and design. By strategically choosing where to insert your customizations—from site-wide CSS tweaks in Theme Options to targeted adjustments in Divi Builder’s Advanced Tabs—you can significantly enhance your site’s performance and aesthetic.

For those looking to quickly elevate their Divi projects, Divi Engine’s Code Snippets section is a fantastic resource. It offers an array of ready-to-use code snippets that simplify adding advanced features or fixing common issues. Explore these snippets at Divi Engine’s Code Snippets for practical, impactful enhancements.

Remember, effective customization combines strategic placement with savvy management of your code. With the powerful tools Divi provides and the additional resources from Divi Engine, you have everything you need to make your website truly stand out. Happy customizing!

The post Customizing the Divi Theme: Where to Add Custom Code – Detailed Guide appeared first on Divi Engine.

Mastering E-commerce with Divi BodyCommerce – Part 4: Advanced Product Filtering with Ajax

Divi Engine — Tue, 23 Jan 2024 10:12:04 +0000

Welcome back to our “Mastering E-commerce with Divi BodyCommerce” series. In Part 4, we delve into the intricacies of advanced filtering and layout customization, crucial for enhancing the user experience in your WooCommerce store. This part of our journey through Divi BodyCommerce is designed to provide you with deep insights and effective strategies for utilizing AJAX filters and custom loop layouts. We’ve carefully crafted three tutorial videos that will guide you through each step, whether you’re just starting out or are an experienced user seeking to expand your skills. These tutorials focus on the practical implementation of advanced filtering options and the creative use of loop layouts, ensuring your e-commerce site stands out both in functionality and design.

What You Will Learn in Part 4:

Advanced AJAX Filters: Gain in-depth knowledge on implementing AJAX filters in Divi BodyCommerce, enhancing the user experience with dynamic, real-time product filtering.
Custom Loop Layouts: Discover how to create custom loop layouts, offering you the flexibility to showcase products uniquely and engagingly.
Practical Application and Integration: Learn the hands-on application of these advanced features, integrating them seamlessly into your WooCommerce store to stand out in both functionality and design.

This part is designed to equip you with the skills to not only implement these advanced features but also to understand their strategic importance in creating a more intuitive and user-friendly e-commerce experience.

Video 13: Overview of Product Filters in WooCommerce with Divi

In this installment of our series, we explore the vital feature of filtering functionality within Divi BodyCommerce, akin to the systems seen on Amazon and other major e-commerce sites. This tutorial delves into how to implement and optimize AJAX filters, a pivotal component of Divi BodyCommerce, to enhance user interaction and site efficiency. We discuss the nuances of these filters and demonstrate how they can be used to allow customers to sift through products based on various criteria like categories, pricing, or location without reloading the page. This feature is integral in creating a smooth and responsive shopping experience.

Key Components of Divi Ajax Filters:

Dynamic Interaction: AJAX filters enable users to apply multiple filters simultaneously, updating the product display in real time without page reloads.
Versatility and Compatibility: These filters work harmoniously with Divi BodyCommerce, aligning with the standalone AJAX filter plugin for diverse applications.
User Experience Enhancement: The filters are designed to streamline the shopping process, making it more intuitive and user-friendly.

Enhancing E-commerce Functionality:

Seamless Integration: The tutorial demonstrates how AJAX filters can be seamlessly integrated into your Divi BodyCommerce setup.
Customization Options: AJAX filters offer flexibility in design and functionality, allowing for a tailored shopping experience that matches your brand and customer needs.

Going Beyond Basic Filtering:

Advanced Filtering Capabilities: We delve into more sophisticated aspects of AJAX filters, showing how they can handle complex filtering requirements.
Practical Application: The focus is on practical implementation, ensuring viewers can apply these concepts directly to their Divi BodyCommerce sites.

This session is designed not only to educate but also to empower Divi users to elevate their e-commerce sites with advanced, user-friendly filtering capabilities. Join us as we unlock the full potential of your WooCommerce store with Divi BodyCommerce.

Video 14: Setting Up Ajax Product Filters in Divi

This segment of our series addresses the construction of custom loop layouts in WooCommerce, emphasizing advanced filtering techniques. The focus is on overcoming the limitations inherent in WooCommerce’s default settings by building our own filters. The video guides viewers through the process of creating filters that can sift through products based on various criteria like categories. This approach is crucial for enhancing user navigation and product discovery in WooCommerce stores.

Key Components of Building Custom Filters:

Advanced Filtering: The video discusses the need for advanced filtering mechanisms in WooCommerce, beyond the basic functionalities.
Custom Filter Construction: It details the process of building personalized filters, tailored to specific e-commerce needs.
Practical Application: The tutorial provides hands-on guidance for applying these filters to real-world scenarios, enhancing the browsing experience for users.

Expanding Your E-commerce Toolkit:

Enhanced Navigation: By building custom filters, users can navigate through a wide range of products more efficiently.
Flexibility and Customization: These filters offer a high degree of customization, allowing for a more personalized shopping experience.
Simplifying Complex Catalogs: Especially useful for stores with extensive product ranges, custom filters simplify user searches and improve product visibility.

Going Beyond Basic WooCommerce Filtering:

Understanding the Importance: The tutorial stresses the importance of comprehensively understanding filtering mechanisms for effective implementation.
Innovative Solutions: It encourages innovative thinking in creating filters that address specific needs and enhance the overall functionality of WooCommerce stores.

This lesson is more than just a technical tutorial; it’s about empowering WooCommerce store owners to create more intuitive and user-friendly shopping experiences. Join us in this insightful journey as we elevate the functionality of your WooCommerce store with Divi BodyCommerce.

Video 15: Setting Up Advanced Ajax Filters in Divi

In this part of our series, we build upon our existing knowledge of filters by introducing more advanced filtering types in WooCommerce with Divi BodyCommerce. The tutorial specifically highlights the addition of fancy filters and the implementation of select2 filters. It discusses the nuances of these advanced filters, such as the brand filter with images, and how they can enhance the user experience on e-commerce sites. The session is dedicated to explaining the functionality and integration of these sophisticated filtering tools in a WooCommerce setup.

Key Components of Advanced Filters:

Innovative Filtering Types: Introduction of unique filters like select2 that offer more dynamic and user-friendly options.
Enhanced Visual Elements: Emphasis on visually appealing filters, such as brand filters with images, to improve customer interaction.
Crucial Settings and Parameters: The tutorial covers important aspects like the ‘logic ID’, vital for effective filter conditional logic functionality.

Expanding WooCommerce Functionality:

Advanced User Experience: These advanced filters aim to provide a more refined and intuitive shopping experience for customers.
Customization and Flexibility: The session demonstrates how these filters can be customized to meet specific e-commerce needs.
Practical Application and Integration: Focus on practical implementation, ensuring that viewers can apply these concepts directly to their Divi BodyCommerce sites.

Going Beyond Basic Filtering:

Understanding Complex Filters: The video underscores the importance of thoroughly understanding the mechanics of advanced filters for optimal use.
Tailoring to Specific Needs: Encourages creative solutions in filter design to cater to unique e-commerce requirements.

This tutorial goes beyond basic filtering techniques, encouraging viewers to explore and implement advanced filtering solutions to elevate their WooCommerce stores with Divi BodyCommerce.

Coming up:

Part 5: Single Product Pages

As we wrap up the insightful tutorials from Part 4, we eagerly anticipate the next chapter in our series. In Part 5, we’ll focus on Single Product Pages, a key aspect of any e-commerce site. This upcoming part promises to deepen your understanding and skills in several critical areas.

Accessing the Course

The post Mastering E-commerce with Divi BodyCommerce – Part 4: Advanced Product Filtering with Ajax appeared first on Divi Engine.

Divi Secret Features Tutorial – Disabling Divi Builder on WooCommerce Products

Divi Engine — Tue, 09 Jan 2024 14:07:59 +0000

While Divi Builder empowers us to create stunning layouts, there are instances where its application needs careful consideration. For instance, utilizing Divi Builder for product editing might not be ideal in many scenarios. In this brief guide, we’ll explore the process of disabling Divi Builder for product editing, highlighting why this might be a prudent choice:

Compatibility with SEO Plugins: A Divi Builder layout in the product description may not seamlessly integrate with other plugins, especially SEO plugins.
Efficiency in Layout Changes: If you decide to alter the product layout, the need to edit every product individually can be time-consuming.
Streamlining Product Addition: Adding products becomes a prolonged process when entering content in Divi Builder, introducing complexity into the workflow.
Preventing Accidental Activation: Store owners might inadvertently click the ‘Use The Divi Builder’ button during product editing, leading to potential issues.
Managing Layout Complexity: Having a Divi Builder layout inside another can complicate matters. For example, the default rows have an 80% width which will shrink the horizontal description area.

How to Disable Divi Builder for WooCommerce Products

To deactivate the Divi Builder for WooCommerce product descriptions, navigate to your WordPress Dashboard. Access Divi > Theme Options. In the ‘Builder‘ tab, you’ll find post types listed in the ‘Enable Divi Builder On Post Types’ settings. Disable ‘Products’ and click ‘Save Changes.’

Upon saving, the ‘Use The Divi Builder’ button will vanish while editing products.

Conclusion

Disabling Divi Builder for WooCommerce products simplifies your WooCommerce site, reducing overall complexity. For a more straightforward approach to customization, consider using templating with Divi Modules or explore additional customizability and features with modules from our Divi BodyCommerce.

The post Divi Secret Features Tutorial – Disabling Divi Builder on WooCommerce Products appeared first on Divi Engine.

Divi Secret Features Tutorial – Crafting Text Cutout Effects on Backgrounds in Divi

Divi Engine — Wed, 06 Dec 2023 09:07:12 +0000

Divi provides a sleek method for achieving a text cutout effect, where a background, covered by a solid or semi-transparent color, reveals the actual background within the text boundaries. The image below visualizes the concept:

To implement this cutout effect, we’ll require the following elements:

A Section housing the background.
A Row featuring a white or black overlay background.
Text with black or white color.

Crafting the Cutout Effect

Let’s start by creating a cutout effect with a white overlay:

Build a Divi Section, a Row within it, and finally, a Text module inside the Row.
Navigate to the Section Settings and:
1. Add an image or video as the background.
2. In Design > Spacing, set both Padding Top and Bottom to 0.
  
  This ensures the Row inside can cover the entire section area.
Open the Text module settings and set the text color to solid black.

Consider using a heading for a more impactful visual effect.
Adjust the Row settings:
1. Set white as the background.
2. In the Design tab, within Sizing, set Width and Max Width to 100%.
  
  This ensures the row covers the entire section area.
3. Add top and bottom padding to the Row for some vertical space. Consider adding side padding to prevent text from touching screen edges.
  
  Utilize the VH Unit for height similar to the viewport height.
4. In the Filters section under Row Design options, find Blend Mode, and set it to Lighten.

Observe how the text cuts out the white background, revealing the section background image:

Employing a Dark Overlay

Alternatively, you can employ a dark overlay. To achieve this, modify three aspects from the previous instructions:

In step 3, set the text color to white.
In step 4.1, set the Row background to black.
In step 4.4, set the Blend Mode to Darken.

This results in the same effect with a black overlay:

Elevating the Effect

While the effects are visually appealing, they can benefit from enhancements. Consider these ideas:

Add Parallax to the background image: Enable the parallax effect for the section’s background image to introduce a scrolling effect.
Introduce transparency to the overlay: Slightly transparent row background colors can enhance the design.
Leverage Scroll Effects: Apply Scroll Effects to the text module for animation. Vertical motion and scale work well with this design.
Explore Video Backgrounds: Use video backgrounds instead of images when incorporating semi-transparent overlays.
Logo Cutout: Extend the technique to logos by utilizing an all-black or all-white logo with transparency.

Here’s a preview of the text cutout effect after implementing some of these tips:

Elevate Your Divi Skills

By employing blend mode filters for cutout effects, you can craft distinctive sections on your Divi website. Also, by combining Divi Scroll Effects, you can animate the design and make it pop even more. By utilizing this trick, it gives you an edge over the competition.

The post Divi Secret Features Tutorial – Crafting Text Cutout Effects on Backgrounds in Divi appeared first on Divi Engine.

Mastering E-commerce with Divi BodyCommerce – Part 3: Enhancing User Experience with Pre-made or Custom Loop Templates

Divi Engine — Mon, 13 Nov 2023 13:57:30 +0000

Welcome to our latest blog post in the “Mastering E-commerce with Divi BodyCommerce” series. As we continue our journey through the expansive world of Divi BodyCommerce, we aim to provide you with valuable insights and practical tips to enhance your WooCommerce store. In today’s post, we feature two of our most recent tutorial videos, each focusing on different aspects of using Divi BodyCommerce to its fullest potential. Whether you’re a beginner or an advanced user, these tutorials will guide you in creating visually appealing and functionally robust e-commerce sites with Divi BodyCommerce.

Before we delve into the summaries of our latest tutorials, let’s take a sneak peek at what you can expect from Part 3 of our series:

What You Will Learn in Part 3:

Advanced Customization Techniques: How to further personalize your store beyond basic templates.
Dynamic Pricing Options: Implementing various pricing strategies based on customer interaction and history.
Enhanced User Experience Design: Creating a user-friendly interface that not only looks good but also improves conversion rates.
Integration with Marketing Tools: Leveraging Divi BodyCommerce’s compatibility with marketing plugins for email campaigns and social media integration.
Performance Optimization: Tips for ensuring your site is fast and responsive, enhancing customer satisfaction and SEO.

Prepare to dive into Part 3, where you’ll gain skills to enhance your site’s user experience and navigation. These Divi BodyCommerce insights are key to developing a customer-centric, efficient online store. Remember, this is just the beginning—our series has much more in store as we continue exploring the full potential of your e-commerce platform.

Video 11: Overview of Loop Templates

In this part of the series, we dive deep into the world of loop layouts with Divi BodyCommerce. We’ll unravel what loop layouts are, how they are structured, and most importantly, how to craft your own. Divi BodyCommerce offers three approaches to leverage loop layouts: using pre-made loop layouts (as seen in a previous lesson), coding your own (with a linked tutorial in the description for guidance), and utilizing the Divi Builder along with Divi BodyCommerce-specific modules to create custom designs.

Key Components of a Loop Layout:

Product Cards: A fundamental element, typically including a thumbnail image, product title, and an add-to-cart button, complete with pricing.
Customizability: Each element within the layout is styleable, allowing for full control over its appearance.
Simplicity vs Complexity: Whether using pre-built templates or creating your own, loop layouts can range from straightforward to intricate, depending on your needs.

Expanding Your Toolkit:

Modules Galore: Thumbnail modules, product buttons, attributes, pricing, and more – Divi BodyCommerce includes a variety of modules to tailor your layout.
Flexibility: The ability to integrate standard modules, such as text and images, and unique elements like brand logos for a distinctive touch.

Going Beyond the Basics:

Coding Your Own Loop Layout: For those inclined towards coding, creating your own loop template offers the highest level of customization.
Inspiration Sources: Websites like Dribbble and even the Apple store page serve as excellent references for innovative loop layout designs.

This lesson is not just about learning; it’s about applying these concepts to create unique and effective e-commerce experiences. So, buckle up and get ready for an insightful journey into customizing your WooCommerce store with Divi BodyCommerce.

Useful Links:

Video 12: Building a Custom Loop Template

In this comprehensive tutorial, part of our series “Mastering E-commerce with Divi BodyCommerce,” we dive into the creation of a custom loop layout for an e-commerce site. The video guides you through the process of fixing alignment issues, using absolute positioning, and setting the Z index correctly to ensure content doesn’t overlay. We then shift focus to crafting an Apple-inspired layout, encompassing thumbnail images, color swatches, product titles, prices, and various buttons. The tutorial also covers the intricacies of working with Divi’s backend, from utilizing the Divi Library to adjusting module settings for optimal display.

Key Takeaways:

Correcting Alignment and Positioning: Learn to correct alignment issues in your layout using absolute positioning and by setting the appropriate Z index.
Building an Apple-Inspired Layout: The tutorial breaks down the process of creating a layout with elements like thumbnail images, color swatches (attribute modules), and various buttons, mimicking Apple’s website style.
Using Divi Library for Layouts: Discover the advantages of using the Divi Library for creating and managing layouts, making them easily portable and reusable.
Customizing Thumbnails and Attributes: Get insights into customizing thumbnail sizes, linking to product pages, and setting up color attributes for products.
Styling and Functionality Enhancements: The video covers styling adjustments for visual appeal and practicality, including modifying text, and button styles, and incorporating hover effects.
Troubleshooting and Fine-Tuning: Learn to troubleshoot issues like missing attributes and fine-tune your layout for a polished look.
Switching Between List and Grid Views: Understand how to utilize classes in your loop layout to seamlessly switch between list and grid views.

Useful Links:

List/Grid Switcher Documentation

Coming up:

Part 4: Advanced Product Filtering

As we wrap up today’s insights, let’s also give you a glimpse into what’s coming up next in our “Mastering E-commerce with Divi BodyCommerce” series. Part 4 promises to be an exciting chapter, focusing on Advanced Product Filtering—an essential aspect of enhancing the user experience in your online store.

Accessing the Course

The post Mastering E-commerce with Divi BodyCommerce – Part 3: Enhancing User Experience with Pre-made or Custom Loop Templates appeared first on Divi Engine.

Divi Secret Features Tutorial – Animate Web Pages Using Divi Scroll Effects

Divi Engine — Wed, 08 Nov 2023 14:21:53 +0000

Divi offers a hidden gem in the form of its Scroll Effects feature, allowing you to breathe life into your website with captivating animations. These Scroll Effects can be applied to any element within the Divi builder, from individual modules to entire rows or sections. You have a wide array of animation possibilities at your fingertips:

Vertical Motion: Create engaging vertical animations that respond to scrolling.
Horizontal Motion: Add dynamic horizontal motion to your content.
Fade: Control the fading in and out of elements for a subtle, elegant effect.
Scale: Enlarge or shrink elements to draw attention where it’s needed.
Rotation: Apply smooth rotations to create visually compelling dynamics.
Blur: Employ blur effects to add depth and intrigue to your content.

For each of these animation properties, you can set three values for up to four scrolled positions. This includes one starting position, two middle positions, and an ending position. Now, let’s delve into how you can infuse your content with simple but effective animations.

How to Create a Basic Animation Using Divi Scroll Effects

Let’s initiate a straightforward fade-in animation for a module:

Begin by opening the module settings.
Navigate to the Advanced tab.
Find the Scroll Effects section and click on it. You’ll notice six tabs, each governing one of the six appearance properties in relation to scroll position.
Hover over the tabs to reveal their names. Click on the third tab, labeled Fading In and Out.
Set Enable Fading In and Out to YES.

As you scroll down the page, you’ll witness the text gracefully fading in:

Tailor Your Scroll Effect

Now, it’s time to customize your animation further. You have the flexibility to define your values for Starting Opacity, Mid Opacity, and Ending Opacity. Want to create a fade-out animation? Simply set a value lower than 100% for Ending Opacity. Additionally, you can adjust the Viewport Bottom, Viewport Top, and the middle slider to precisely dictate where your animation initiates and concludes.

If you opt for three different values, you’ll notice that the element’s opacity changes continuously between the start and end points. To overcome this, add another keyframe by clicking the arrows within the middle sliders. This allows you to introduce a static portion to your animation. You can also fine-tune the viewport positions for these new keyframes by draging the handles.

The result is a noticeable transformation:

Unleash the Power of Combined Scroll Effects

Don’t stop at a single effect; you can combine multiple Scroll Effects for a single Divi element. In our example, we’ve added a Blur effect alongside the Fade effect:

As you can see, combining these effects elevates the visual impact:

Elevate Your Divi Skills

Divi Scroll Effects are a game-changer, capable of turning a lackluster website into a captivating masterpiece. By artfully merging various Scroll Effects and applying them to multiple Divi modules, you can create stunning websites and position yourself at the forefront of the Divi web design industry. For inspiration, explore some captivating examples of Scroll Effects by Elegant Themes here.

The post Divi Secret Features Tutorial – Animate Web Pages Using Divi Scroll Effects appeared first on Divi Engine.

Mastering E-commerce with Divi BodyCommerce – Part 2: Product Listing and Customization with BodyCommerce

Divi Engine — Fri, 03 Nov 2023 14:37:25 +0000

Embark on the second leg of our comprehensive journey through the world of e-commerce with Part 2 of our course, focusing on Product Listing and Customization with Divi BodyCommerce. This segment promises to enrich your understanding and enhance your skills in populating your online store, personalizing your product displays, and refining user experience with the power of WooCommerce and the innovative BodyCommerce plugin. Whether you’re cultivating a brand-new online marketplace or sprucing up an existing shop, these insights will be your guide to mastering the artistry of digital merchandising.

What Will You Learn in Part 2?

Customization Techniques: Begin Part 2 with a foray into the advanced customization techniques that allow you to build upon the foundational skills from Part 1.
List-Grid Switcher Integration: Discover the process for incorporating a list-grid switcher into your WooCommerce store, providing users with a more adaptable viewing experience.
Custom Ordering Settings: Delve into the mechanics of adding custom sorting options to your shop, giving your customers the ability to browse products in a way that suits their preferences.
Advanced Module Placement: Learn the intricacies of module placement within Divi BodyCommerce to optimize the user interface and improve overall shop functionality.
Styling and Personalization: Conclude Part 2 with a focus on styling and personalization options that ensure your shop’s design is aligned with your unique brand aesthetic.

So, prepare your workspace, and let’s dive into Part 2. With these new skills, you’ll be poised to offer a user-centric, smooth navigation experience for your customers. And don’t forget, this is only the second chapter in our comprehensive series—there’s much more to come as we continue to unveil the full potential of your e-commerce platform.

Video 6: Adding Products to WooCommerce

In the sixth installment of our comprehensive series, “Mastering E-commerce with Divi BodyCommerce,” we turn our attention to the very foundation of your online store: adding products to WooCommerce. This video serves as your guide to populating your online storefront with items that will capture the attention and wallets of your customers.

Key Takeaways:

Streamlined Product Importing: The guide simplifies the process of adding products to WooCommerce, detailing how to import some products from a CSV file with ease and how to correctly map fields, ensuring a smooth integration.
Diverse Product Import Example: The tutorial wraps up the import section with the successful addition of 16 varied products, highlighting WooCommerce’s ability to handle a range of products, from variable options to multiple categories.
Manual Product Entry Basics: A succinct run-through is provided for manually adding products, covering the basics from naming and describing the product to setting up inventory and variations based on attributes.
Visual Shop Transformation: Viewers witness the shop’s evolution with the addition of products, offering a visual representation of how the storefront develops and becomes more vibrant as items are listed.
Guidance for New Users: The video recommends further learning resources, particularly for WordPress and WooCommerce novices, and points to the “Clone Any Online Store” series for a comprehensive grasp of WooCommerce’s extensive features.

As we wrap up this segment, we edge closer to enhancing your shop’s appearance and functionality with BodyCommerce features. Stay tuned for the upcoming videos where we will delve into product display customization, enabling a smoother and more attractive shopping experience for your customers.

Useful Links:

Clone Any Online Store with Divi and WooCommerce -> https://diviengine.com/clone-any-online-store-with-divi-and-woocommerce/
WooCommerce Sample Products CSV Import File (FREEBIE) -> https://diviengine.com/woocommerce-sample-products-csv-import-file-freebie/

Video 7: BodyCommerce Overview

The seventh video in our tutorial series, “Mastering E-commerce with Divi BodyCommerce,” invites you to delve into the functional heart of the plugin. We take you on a guided tour of the BodyCommerce settings and illustrate how to leverage these powerful tools to craft the perfect e-commerce experience.

Key Takeaways:

Navigating BodyCommerce Settings: The platform offers a comprehensive range of settings, categorized for easy access, enabling users to fine-tune their online store’s features and functionalities efficiently.
Product Page Configuration: Templates can be assigned directly to product pages within BodyCommerce, bypassing the need for the Divi Theme Builder, which streamlines the design process for various product types and categories.
Layout Construction Advice: For a smoother experience, it’s advised to build layouts within the Divi library or Theme Builder rather than directly on WooCommerce pages, which could lead to unpredictable outcomes.
Customizing Product Displays: The tutorial provides insights on how to tailor layouts for different product categories and tags, granting the ability to modify each store section’s look while managing design elements like width.
Enhancing Checkout Experiences: Customizing the My Account and checkout pages is essential, with BodyCommerce offering templates for the checkout process, including styles reminiscent of Shopify’s streamlined checkout.
Interface Control Settings: Beyond aesthetics, BodyCommerce presents extensive UI management options, such as pagination settings and color scheme adjustments, for a more refined user experience.
Additional Functional Enhancements: BodyCommerce enhances Divi’s capabilities with custom CSS options and unique shortcodes, facilitating advanced features like sticky footers and dynamic cart icons.
Leveraging the Divi Library: The session illustrates how to harness over 60 specialized BodyCommerce modules within the Divi library, enriching different aspects of the e-commerce experience.
Resource Utilization: Emphasizing the importance of using BodyCommerce’s online documentation, the video encourages staying up-to-date with the latest features and functionalities.

With this foundational knowledge, the video sets you up for the next phase where you’ll learn to use the archive loop module to display products using Divi BodyCommerce modules for added flexibility and customization.

Video 8: Displaying our Products with the Archive Loop

We continue our journey into the realm of e-commerce with Divi, this time turning our attention to BodyCommerce and how it revolutionizes product display on the front end of our websites. The last session set the stage by giving us an overview of the various settings and modules within BodyCommerce. Now, we are ready to implement these tools to create a more dynamic and functional product showcase, moving past the basic Divi modules.

Key Takeaways:

Utilization of Pre-made Layouts: The free “Clothing Store” layout from Elegant Themes is used as a base for customization.
Editing in Divi Library: A shop page layout previously created is edited in the Divi Library.
Body Commerce “Product Loop” Module: The standard Divi module is replaced with the Divi BodyCommerce “Product Loop” module to enhance functionality.
Customization Options: Detailed guidance on customizing product displays, including exclusion of categories, grid options, and pagination versus infinite scroll.
Loop Template Features: An exploration of loop templates and how to adjust settings like product excerpts and the add-to-cart button.
Applying the Layout: Steps to save and assign the new layout to the shop page through Divi BodyCommerce settings.
Anticipation of Future Lessons: A teaser for upcoming tutorials on creating custom Loop templates for greater design flexibility.

As we wrap up, it’s clear that BodyCommerce is a powerful ally for anyone running a Divi-based e-commerce store. It offers the flexibility to create a unique and user-friendly shopping environment. And while we’ve laid a strong foundation today, we’re just scratching the surface. Upcoming lessons promise to dive deeper, showing how to build custom Loop templates that offer an even greater degree of control and personalization. With each step, we’re turning the functional into the phenomenal, ensuring that our e-commerce sites are not just stores, but destinations.

Video 9: Adding a List/Grid Switcher

With this part of our exploration into Divi and e-commerce, personalization is key, and Divi BodyCommerce taps into this by introducing the list/grid switcher to its toolkit. This addition offers a significant boost to user experience, allowing customers to tailor the product view to their preferences with ease.

Key Takeaways:

Easy Integration of List/Grid Switcher: Adding a list/grid switcher to the shop layout is extremely straightforward and can be done in seconds, providing a significant enhancement to the user experience by allowing customers to toggle between list and grid views of products.
Accessible Layout Editing: The tutorial demonstrates two methods to access and edit the layout: through the Divi Library or directly via the BodyCommerce settings, which can bring up the layout in the Divi Library for editing.
Customizable Product Display: The grid list switcher feature offers customization options like setting default states, deciding icon placement, and adjusting card heights for uniformity, although it’s noted that the masonry layout might be preferred by some.
Persistent Viewing Preferences: The switcher includes a cookie time setting that determines how long the user’s view preference is remembered, ranging from a single session to a year, providing flexibility and improved user retention by recalling individual preferences.
Design Flexibility: Within the design settings, there is the capability to alter the appearance of the list/grid view switcher extensively, including icons, colors, and shapes, which allows for seamless integration into the overall design of the shop page.
Front-end Magic with CSS: The implementation relies on CSS to transform the layout without reloading, making it efficient. Custom classes can be added to maintain consistent design elements across both list and grid views.
Preparation for Advanced Customization: The video teases upcoming content that will delve into building custom loop layouts and adding custom sorting options, indicating more complex and tailored design options to come for the shop page layout.

To wrap up, this video demystifies the process of enhancing a Divi shop layout with a list/grid switcher. It’s a prime example of how BodyCommerce can streamline site customization, setting the stage for a more engaging and user-friendly shopping environment. Keep an eye out for our next piece, where we’ll explore more ways to refine your e-commerce experience.

Video 10: Adding Custom Order By Options

Custom sorting options are not just an additional feature; they’re a customer empowerment tool that lets shoppers sift through products according to their preferences. The integration of these settings within Divi BodyCommerce ensures that users aren’t just passively browsing but actively engaging with the storefront.

Key Takeaways:

Custom Sort Integration: Divi BodyCommerce’s module allows for custom ‘Order By’ settings to be added to shop pages, enhancing user navigation.
Versatile Field Options: There’s flexibility to include ACF custom fields for sorting, catering to unique product attributes like mileage for cars or square footage for real estate.
User Experience: Placement is key, and the sorting options can be aligned to complement the list/grid switcher, providing a coherent layout for the user.
Sorting Logic: Identifying whether fields are numeric or alphanumeric is crucial as it influences the sorting mechanism – a necessary detail for accurate display.
Design and Styling: While the tutorial doesn’t delve into styling, Divi’s design options are extensive, allowing for a seamless integration with the site’s overall aesthetic.
Positioning Matters: The placement of the sorting module is adjustable; it’s recommended to position it effectively, such as above the product loop for easy access.

To conclude, the addition of custom sorting options via Divi BodyCommerce enhances the e-commerce experience by making product searches more intuitive and tailored. With user-friendly interfaces and granular control over product display, Divi continues to streamline the e-commerce design process, ensuring that both the customer and the retailer can navigate the online store with ease and efficiency. As we progress, stay tuned for insights into creating custom loop layouts that will further refine the browsing experience.

Coming up:

Part 3: Enhancing User Experience with Pre-made or Custom Loop Templates

As we look ahead to Part 3, we delve into the world of WooCommerce loop templates. This is where the visual and functional aspects of your product listings take shape. We’ll start by introducing loop templates and their role in creating a cohesive shopping environment. Next, we’ll walk you through the process of integrating pre-made loop templates available within Divi BodyCommerce, offering you the speed and efficiency of expertly designed layouts.

Accessing the Course

The post Mastering E-commerce with Divi BodyCommerce – Part 2: Product Listing and Customization with BodyCommerce appeared first on Divi Engine.

Divi Secret Features Tutorial – Using Divi Global Presets to Streamline Your Divi Web Design Process

Divi Engine — Fri, 03 Nov 2023 10:24:03 +0000

Divi comes with a standard set of defaults for its modules, rows, and sections. However, as you delve into the design and customization of your website, the necessity to tweak these defaults often arises, particularly when adhering to a uniform design language across your site. While Divi’s extend feature is a handy tool, it has its limitations: its scope is confined to a single page, and any subsequent changes require a rerun through the extend steps.

This is where Divi Presets come into play, offering a more streamlined approach to managing your styling changes. You have the option to create either a Global Preset or a new preset, which can be assigned wherever needed. The advantages of Divi Presets are multifold:

Global Presets: These are your go-to for site-wide consistency. Any style adjustments made in a Global Preset are reflected across your entire website built with Divi Builder.
New Presets: Crafted for special styling needs, new presets can be created and used anywhere on your site.
Easy Edits: No need to navigate away; simply open the settings of any module, row, or section using the preset you wish to amend, and your changes will be applied universally to all Divi elements using that preset.
New Defaults: Presets act as your new starting point for customization. Further tweaks made while using a preset will not affect other elements using the same preset.
Style Application: Apply additional styles to the active preset effortlessly without having to reopen the preset editor.

Editing the Default Presets

Tweak the default styles of Divi for a module, row, or section by following these steps:

Open the settings for the Module, Row, or Section and click on the three vertical dots located at the top right corner of the settings window.
Click Edit Preset Style.
Navigate through the Content, Design, and Advanced tabs to make your desired changes.
Hit the Save icon and confirm your changes by clicking Yes.

Voila! You’ve successfully updated the default (global) preset. While the modifications will apply to all existing Divi elements of the type you edited, any prior customizations to Divi’s default options remain unaffected. Your changes have essentially set a new default.

Creating a New Preset

Construct a new preset for use when creating similar Divi elements (module, row, or section):

While editing a Divi element, click on the Preset dropdown.
In the ensuing menu, click on ADD NEW PRESET.
Name your preset and save.

Once your new preset is created, the steps to edit it are identical to editing the default preset.

Selecting an Existing Preset

Re-utilizing existing presets to maintain a uniform style across your Divi Website is a great way to speed up the development of Divi websites.

While editing a module, click on the Preset dropdown to select and apply an existing preset.

Applying Customized Styles to the Active Preset

Got some style customizations already in place? Here’s how to apply them to the active preset:

Click on the three vertical dots at the top right corner of the settings window and select Apply Styles To Active Preset.
Confirm your choice in the subsequent window.

Alternatively, right-click on any option while editing the Divi element and select Apply Styles To Active Preset.

How this boosts your Divi Skills

Embracing Divi presets is a savvy move for budding web designers. It empowers you to establish default styling, design once, and amend anytime. Creating new presets is also a boon for managing special styles that deviate from your defaults but need to be replicated across your site. Before this feature was introduced, defining defaults entailed writing lengthy CSS scripts. Thanks to presets, that’s no longer a necessity, saving you precious time and effort. In a nutshell, it’s a robust tool for every Divi web designer aiming to refine their craft and accelerate their workflow.

CONTRIBUTOR: Pavak P.

Other Installments

The post Divi Secret Features Tutorial – Using Divi Global Presets to Streamline Your Divi Web Design Process appeared first on Divi Engine.

Mastering E-commerce with Divi BodyCommerce – Part 1: Introduction and Setting up the Base

Divi Engine — Mon, 30 Oct 2023 10:28:03 +0000

Welcome to the first installment of our comprehensive guide on mastering e-commerce using Divi BodyCommerce and WooCommerce! The world of online retail is evolving rapidly, and having the right tools at your disposal can make all the difference. However, navigating these tools can be daunting, especially if you’re new to the scene. That’s why we’ve created this multi-part guide, broken down into nine parts, each featuring multiple videos to simplify the complex world of e-commerce for you.

This is Part 1, which consists of a series of five videos designed to walk you through the foundational aspects of setting up, configuring, and customizing your e-commerce platform. Whether you’re a complete novice or have some experience under your belt, this segment will offer valuable insights for everyone.

What Will You Learn in Part 1?

Overview and Pre-requisites: Our first video lays the groundwork for your Divi BodyCommerce journey.
Local Dev Environment Setup: The second video touches on setting up a local development environment using Local by Flywheel.
Basic WooCommerce Setup: The third video in the series guides you through the installation of essential themes and plugins, mainly WooCommerce.
Basic WordPress Setup: Video four delves into basic WordPress settings, such as general settings, setting a static landing page, and menu configuration.
WooCommerce and BodyCommerce Relationship: The fifth and final video of Part 1 demystifies the synergistic relationship between WooCommerce and Divi BodyCommerce, setting you up for a rich, integrated e-commerce experience.

So grab your favorite beverage and get comfortable. Your journey through the intricate landscape of e-commerce starts right here with Part 1. And remember, this is just the beginning—stay tuned for eight more parts, each packed with informative videos to guide you every step of the way in your e-commerce adventure.

Video 1: Welcome and Course Overview

The first video in our tutorial series serves as a comprehensive introduction to “Mastering E-commerce with Divi BodyCommerce.” Our primary aim here is crystal clear: We’re focusing on the functionality rather than just the aesthetics of creating an e-commerce site. After all, while a beautiful site might capture initial attention, it’s the ease of use and efficient features that make a customer return.

In this video, we outline the structure of this course, broken down into nine digestible parts. We kick off with an overview of the course and guide you through setting up a basic environment for your e-commerce site. This sets the stage for more specialized topics that we will delve into in subsequent videos.

Key Takeaways:

The course focuses on teaching you how to effectively use Divi BodyCommerce features for building a fully functional e-commerce site with Divi and WordPress.
We will cover everything from product listings and display to advanced product filtering and customization of login and registration screens.
Though this course is thorough, we’ve designed it to be digestible, segmenting the instruction into nine key areas to ensure that you’re not overwhelmed.
We recommend having a reference e-commerce site in mind for some parts of the course, as it can make the process of building your store even smoother.

Video 2: Setting up a Local Development Environment

In the second installment of our “Mastering E-commerce with Divi BodyCommerce” series, we jump straight into the nitty-gritty of initial setup. Whether you’re on a Mac or another operating system, we’ve got you covered. The video starts by demonstrating how to authorize certificates on a Mac, moving on to how you can access your local setup through your browser.

Key Takeaways:

For Mac users, the video explains the steps to manually authenticate or authorize a certificate, ensuring a secure local development environment.
The instructor does not walk you through installing core components like WooCommerce, Divi, and a Divi child theme. However, links for these will be provided in the description, so you can quickly set them up.
The critical final piece you’ll need is Divi BodyCommerce. A link will be available in the description to direct you to where you can download it from your ‘My Account’ area.
This video primarily focuses on what you need to install to get started: Divi, a Divi child theme, WooCommerce, and Divi BodyCommerce.

Useful Links:

Installing Divi BodyCommerce on your Divi site -> https://help.diviengine.com/article/369-step-1-install-overview
Setting up a local dev environment with Local by Flywheel tutorial -> https://diviengine.com/how-to-easily-setup-a-local-development-environment-for-divi/
Download our free Divi Dynamic Child Theme -> https://diviengine.com/set-divi-child-theme-dynamic-css/

Video 3: Basic WooCommerce Setup

The third video in our series, “Mastering E-commerce with Divi BodyCommerce,” gets down to the essentials of configuring WooCommerce on your WordPress site. With WooCommerce being the backbone of your e-commerce operation, understanding its features and settings is crucial. The video walks you through what happens after you’ve successfully installed your Divi child theme, WooCommerce, and Divi BodyCommerce.

Key Takeaways:

Upon installation, WooCommerce presents an optional setup wizard to guide you through store configuration. While you can use this feature, the video opts to skip it for now to focus on Divi BodyCommerce.
After skipping the wizard, you’ll need to manually set up some basic WooCommerce pages like the Cart, Checkout, My Account, Privacy Policy, Refunds and Returns Policies, and Shop pages. If you miss this step, the video provides tips on how to generate these pages through the WooCommerce status section.
A quick overview of WooCommerce settings, such as address setup, enabling coupons, setting the store currency, and much more. While this course doesn’t delve into these functionalities, knowing where to find them is valuable.
This video also mentions that product setup will be done using a CSV file, providing viewers with an insight into what to expect in the upcoming sections.

Video 4: Basic WordPress Setup

In our fourth video of our “Mastering E-commerce with Divi BodyCommerce” series, it is all about the initial setup within WordPress and Divi to ensure your e-commerce website is structured correctly and efficiently.

Key Takeaways:

General Settings: The first step in your WordPress setup involves going to the settings page and setting your store name, tagline, and administrator email.
Reading Settings: The ‘Reading’ section allows you to set your ‘Shop’ page as the landing page for your website. This is crucial for e-commerce sites.
Permalink Structure: Within the ‘Permalinks’ settings, make sure you choose ‘Post name’ and optionally set a custom base for your products, like renaming ‘product’ to ‘candles’ if you’re selling only candles.
Menu Setup: The video shows you how to go to Appearance → Menus to create a new navigation menu. You can add essential pages like ‘Home,’ ‘About,’ ‘My Account,’ and ‘Cart.’ The video even suggests nesting some options under main menu items for a better user experience.
Global Settings in Divi: While the primary focus is on Divi BodyCommerce, the video does touch upon Divi’s general and header settings. It’s vital to set global fonts, colors, and button styles to make your website design cohesive and to work more efficiently.
Efficiency Tips: Use the theme customizer to set global elements so you’re not repeatedly setting the same styles for different parts of your website. This is a time-saver and ensures a consistent look and feel across your site.
Header Elements: The video briefly covers how to customize the header navigation, including how to remove the search bar if it’s not needed.

Video 5: Working with WooCommerce and BodyCommerce

In this video for our “Mastering E-commerce with Divi BodyCommerce” video series. This fifth installment aims to clarify the relationship between WooCommerce and Body Commerce in your Divi e-commerce project.

Key Takeaways:

Not a Replacement: Contrary to some misconceptions, Body Commerce is not a replacement for WooCommerce. Instead, think of WooCommerce as the foundation—the “old fixer-upper house” with good bones, but lacking modern amenities.
Body Commerce as a Remodeling Kit: This Divi plugin acts like a renovation kit for your WooCommerce store, adding layers of functionality and design features that aren’t present in the base version of WooCommerce.
Extended Features: Body Commerce significantly boosts the functionality of your WooCommerce store by adding features like custom emails, mini carts, Ajax filters, and much more.
Modern Web Technologies: Beyond just enhancing the visual elements of your store, Body Commerce also brings modern web technologies into the mix. It’s like adding solar panels to the roof of your old home—modernizing it for today’s needs.
What’s Coming Up: Having cleared up the relationship between WooCommerce and Body Commerce, the video promises to delve into the intricacies of product listings in the following segment. Whether you’re watching this on YouTube or as part of a purchased course, stay tuned for more in-depth knowledge.

Coming up:

Part 2: Product Listing and Customization with BodyCommerce

Delve into product listing and customization. Learn how to import products to WooCommerce and explore the rich features of Divi BodyCommerce. Create visually appealing product listings using the Archive Loop and implement the List/Grid Switcher for enhanced product displays. Take control with Custom Order By options.

Accessing the Course

The post Mastering E-commerce with Divi BodyCommerce – Part 1: Introduction and Setting up the Base appeared first on Divi Engine.

FREE Divi Engine Plugin Tutorial Series: Mastering E-commerce with Divi BodyCommerce

Divi Engine — Mon, 30 Oct 2023 09:35:17 +0000

We are overjoyed to announce the launch of our newest free course, “Mastering E-commerce with WordPress: A Comprehensive Guide to WooCommerce, Divi, and BodyCommerce.” Recognizing the growing e-commerce endeavors among the Divi community, especially Divi BodyCommerce enthusiasts, we’ve crafted this extensive training package. It’s available at no cost, aiming to equip more individuals with the knowledge to create robust online stores using Divi.

This offering is jam-packed with essential video tutorials and resources tailored to guide you through the intricacies of building an e-commerce website with WordPress, WooCommerce, Divi, and of course, Divi BodyCommerce. While Divi BodyCommerce is the cornerstone plugin in this course, additional sessions are incorporated to expand your e-commerce site with the myriad features it offers.

Here’s a Glimpse of What the Free Course Entails:

Part 1: Introduction and Basic Setup

Get started with an overview of e-commerce, WordPress, WooCommerce, Divi, and Divi BodyCommerce. Learn to set up your local development environment, master the basics of WooCommerce, and configure essential WordPress settings. Discover the advantages of pairing Divi BodyCommerce with WooCommerce.

Part 2: Product Listing and Customization with BodyCommerce

Delve into product listing and customization. Learn how to import products to WooCommerce and explore the rich features of Divi BodyCommerce. Create visually appealing product listings using the Archive Loop and implement the List/Grid Switcher for enhanced product displays. Take control with Custom Order By options.

Part 3: Enhancing User Experience with Pre-made or Custom Loop Templates

Enhance user experience with pre-made or custom loop templates. Explore the world of loop templates in WooCommerce and seamlessly integrate pre-made templates from BodyCommerce. Learn to craft custom templates that align with your brand’s style and identity.

Part 4: Advanced Product Filtering

Master the art of advanced product filtering. Understand the ins and outs of product filtering in WooCommerce. Set up AJAX Filters with Divi BodyCommerce to enable seamless product filtering. Customize filters for categories, attributes, and prices, and tackle scenarios with Empty Filter Options.

Part 5: Single Product Pages

Dive into the world of single product pages. Gain insights into designing a basic product page template. Elevate your product pages with advanced variation swatches and the addition of a Compare table for enhanced shopping experiences.

Part 6: User Onboarding

Streamline the user onboarding process. Compare default WooCommerce login and register screens with custom designs created using Divi BodyCommerce. Personalize the Login/Register menu text to make your site more user-friendly.

Part 7: Personalizing User Accounts

Explore the world of personalized user accounts. Understand WooCommerce endpoints in user accounts, including orders and addresses. Learn to add a Wishlist and create custom endpoints with Divi BodyCommerce to offer users a personalized experience.

Part 8: Optimizing Cart & Checkout Experience

Optimize the cart and checkout experience. Compare the default WooCommerce cart and checkout pages with the Checkout Templates in BodyCommerce. Gain an overview of creating custom cart and checkout pages using Divi BodyCommerce, and discover the art of adding Custom Checkout Fields.

Part 9: Final Touchpoints and Conclusion

Wrap up the course with final touchpoints, including aspects like email templates, delivery, hosting, migration, marketing, and taxes. Conclude your journey with a comprehensive understanding of e-commerce with Divi BodyCommerce.

We will help you navigate through these step-by-step tutorials ensuring you grasp the essence of each module, sans the need for coding. And while the course is free, it’s rich in value, empowering you to construct a sophisticated e-commerce site tailored to your brand.

Accessing the Course

Other Installments

The post *FREE* Divi Engine Plugin Tutorial Series: Mastering E-commerce with Divi BodyCommerce appeared first on Divi Engine.

Divi Secret Features Tutorial – Finding Active Content and Styles in the Divi Builder

Divi Engine — Tue, 24 Oct 2023 10:16:25 +0000

Sometimes we get lost inside a Divi module settings when searching for a particular setting that is making the module behave in a certain way. If you have an idea of which settings are responsible for the behavior, you can search for it, but there could be many settings that match your search. Thankfully, Divi includes some handy options to find the currently active settings on a module.

Find Active Content in a Divi Module, Row, or Section

The Active Content filter in the Divi Module, Row, or Section settings show you all the options in the Content tab where values have been changed from default. Below is an example with step by step guide where you can find it useful.

Let’s say there is a contact form on your website but you can’t seem to find out why it’s redirecting to another website once the form is submitted. You can use the Active Content filter in the module settings to find out all the active options:

Open the Contact Form module settings
Click on + Filter
Click on Active Content

Now you can see the active options.

Find Modified Styles in a Divi Module, Row, or Section

Similar to the Active Content filter, the Modified Styles filter shows all the modified options from the Design and Advanced tabs. As the name suggests, it’ll show all the settings that are responsible for the style changes. Below is a practical example with a step-by-step guide on how to show the modified styles.

For this example, we have a text header that has a border and is not straight, but there are no borders in the module settings:

In situations like this, filtering by Modified Styles can help:

There are no modifications under border and text styles. In situations like this, it’s very handy to see only the modified styles:
Open the Text settings
Click on + Filter
Click on Modified Styles

Now you can see the Modified Styles that are responsible for the appearence.

Other Options

Similar to the previous options, you can also filter by Responsive and Hover Styles or Content:

Open the Module, Row or Section settings.
Click on + Filter
Click on what you want to see:
- Responsive Styles/Content
- Hover Styles/Content

How this boosts your Divi Skills

This is particularly useful when you are using premade templates. It can also help you when the website was built by someone else and now you are taking over. These tricks are very useful when you are working with more complex third-party modules. As a support engineer working at Divi Engine, The Active content and Modified Styles are lifesavers. Complex plugins such as Divi Machine and Divi BodyCommerce can often have 50+ options and 100+ styling options on a single module. Thanks to these filters, I can see all the changed settings at a glance without going through tens of tabs throughout the module settings.

CONTRIBUTOR: Pavak P.

Other Installments

The post Divi Secret Features Tutorial – Finding Active Content and Styles in the Divi Builder appeared first on Divi Engine.

Announcing the Divi Secret Features Series – Divi tutorials on some lesser known Divi features

Divi Engine — Mon, 23 Oct 2023 10:17:19 +0000

WordPress themes and builders are your companions in creating stunning websites. Among them, the Divi Theme by Elegant Themes stands out. Divi Engine is excited to launch a new weekly tutorial series to unveil some of Divi’s lesser-known features. Our first stop? Exploring Finding Active Content and Styles in Divi Builder. But first, let’s get to know Divi a bit better.

Getting to Know Divi

Divi is more than a theme; it’s a platform for creating beautiful, responsive websites without coding. Its cornerstone, the Divi Builder, simplifies layout customization. Whether creating a business page, a personal blog, or an online store, Divi is a reliable foundation.

Divi’s flexibility and ease of use set it apart. With a variety of modules, layouts, and templates, designing your pages is a breeze. And the real-time design feature lets you see changes instantly.

Why Divi?

With many themes available, why choose Divi? It’s simple. Divi’s intuitive interface and customization features ensure a unique website. Plus, a vibrant community and outstanding support from Elegant Themes are always there to help.

Our Upcoming Tutorial Series

We’re thrilled to delve deeper into Divi’s capabilities, starting with Finding Active Content and Styles in Divi Builder. This series aims to broaden your Divi horizons.

Every week, we’ll unravel a new Divi feature, enriching your understanding of this powerful theme.
If you’re new to Divi, now’s the perfect time to hop on board. If Divi sounds like your perfect web design companion, purchase Divi here and join our journey of discovery.

We’ll update this post with links to each new installment, giving you quick access to these Divi tutorials.

Conclusion

The path to mastering Divi is thrilling and laden with new insights. Our tutorial series is your gateway to exploring Divi’s full spectrum. Whether you’re a seasoned user or a newcomer, join us in exploring the less-trodden paths of Divi, unveiling a wealth of features awaiting discovery.

Stay tuned for our first installment on Finding Active Content and Styles in Divi Builder. Remember, Divi’s world is as expansive as your curiosity allows. Your journey into the heart of Divi begins now, and we can’t wait to share it with you!

Other Installments

The post Announcing the Divi Secret Features Series – Divi tutorials on some lesser known Divi features appeared first on Divi Engine.

Adding custom image upload sizes in Divi and WordPress

Divi Engine — Tue, 10 Oct 2023 15:07:57 +0000

In web design, creating a visually appealing website is akin to setting up a virtual storefront that is inviting and engaging. Central to this visual appeal are the images that illustrate your content and brand story. However, the one-size-fits-all approach falls short in delivering a crisp and tailored visual presentation across diverse screen dimensions. This is where the combined flexibility of WordPress and the Divi Theme becomes a game-changer, permitting tailored management of image display on your website.

By default, WordPress offers several predefined image sizes – thumbnail, medium, large, and full-size. While these sizes cater to general needs, they may not harmonize with the unique design ethos or layout grid of your website, especially when you’re harnessing the extensive customization features of the Divi Theme. Divi, celebrated for its robust customization spectrum, provides a canvas for developers and site owners to refine the visual presentation to a tee.

A potent yet often overlooked method to gain mastery over your image display is by defining custom image sizes. This is achieved by adding a snippet of code to your theme’s functions.php file. This snippet not only creates new dimensions for image cropping but can also be configured for hard cropping. Hard cropping is a technique that ensures your images are cropped and resized to the exact dimensions specified, trimming the image in the process. This is instrumental in maintaining a uniform image size and aspect ratio across your website, which is crucial for a clean, organized visual layout.

The advantages of custom image sizes and hard cropping are multifaceted:

Precision in Design: They enable precise alignment with your design grid, ensuring images dovetail with the overall layout without any unsightly overflows or underlaps.
Improved Page Load Time: By employing image sizes that are tailor-made for their display area, you reduce page load time—a pivotal factor for user experience and SEO rankings.
Enhanced Responsive Behavior: Custom sizes and hard cropping contribute to refined responsive behavior, ensuring captivating visuals on both mobile and desktop interfaces.
Resource Optimization: They facilitate optimized resource utilization as smaller image files require less bandwidth, thus enhancing your site’s performance.

The journey of adding custom image sizes and hard cropping entails a bit of coding, but it’s a straightforward affair. And the reward? A website that exudes a meticulously curated visual appeal, resonating impeccably with your brand ethos and the interactive narrative you aim to build.

This guide will allow you to add some custom sizes to your WordPress install making them accessible in Divi Image modules and Gutenberg blocks. When you upload a new image to your media library, WordPress will automatically resize and/or crop the image to the specified sizes. In this example, we’ll add resolutions for 512px by 384px and 640px by 480px.

Let’s take a look!

Prerequisite

You need to have a child theme. If you don’t have one, there are tons of free plugins available at the WordPress Plugin Repository That can help you create a child theme.

Steps to register a custom size in WordPress:

Edit functions.php on your child theme. You can edit in one of the following ways:
- In the WordPress Dashboard, go to Appearance > Theme File Editor and select functions.php.
- You can edit the file directly either by using FTP, or your hosting panel’s web file manager. Either way, you should take a backup before making any changes to the file.
Add the following code at the end of the file:

// Add new image sizes:
add_image_size( 'thumb-512x384', 512, 384, true );
add_image_size( 'thumb-640x480', 640, 480, true );
// Register the sizes:
add_filter( 'image_size_names_choose', 'my_custom_image_sizes' );
function my_custom_image_sizes( $sizes ) {
    return array_merge( $sizes, array(
        'thumb-512x384' => __( 'Thumbnail 512x384px' ),
        'thumb-640x480' => __( 'Thumbnail 640x480px' ),
    ) );
}

Understanding and Customizing the Code

In the line add_image_size( 'thumb-512x384', 512, 384, true );, we are calling the add_image_size function of WordPress to add a custom thumbnail size.

thumb-512x384 is the name of the thumbnail size. You can name it anything you want, just make sure there are no spaces or special characters other than - and _ in the name.
Arguments 512 and 384 define the width and height of the thumbnail size in pixel value. You can customize the values as you want.
true is a boolean value, that specifies whether the images should be cropped to preserve the aspect ratio of the resolution provided. This is called a hard crop. By default, it’s set to false, so if you don’t want the images to crop, you can simply remove the argument and the line can look like this: add_image_size( 'thumb-512x384', 512, 384 );. We will discuss customizing the hard crop position in a little bit.

For the line 'thumb-512x384' => __( 'Thumbnail 512x384px' ),, we are registering the sizes.

thumb-512x384 is the size we added earlier and Thumbnail 512x384px is the label that will be displayed in WordPress:

You can provide a suitable title and can use spaces in the label.

Hard Crop Positioning

You can set the position of Hard Crop like this:

add_image_size( 'thumb-512x384', 512, 384, array( 'left', 'top' ) );

In this example, we are cropping from the top left corner. the first value in the array is the x-axis (horizontal) crop position, the second is the y-axis (vertical) crop position. The supported values for the X and Y axes are:

X: left, center, or right.
Y: top, center, or bottom.

This way you can set 9 crop positions. When you don’t specify a crop position array, it defaults to center.

Re-generating existing images

Once you add and register custom thumbnail sizes in your child theme’s functions.php, you need to regenerate thumbnails for the existing images in the media library so that those images will be available for the already uploaded images. You can either do it using a plugin or by using WP-CLI in the command line:

1. Use a plugin to regenerate the thumbnails

You can find many plugins in the WordPress plugin repository that’ll let you regenerate thumbnails. You can try the plugin Regenerate Thumbnails. I’ve used it before and it works well.

2. Use WP-CLI to regenerate the thumbnails

If you love the command line like me, then this method is for you. You can use WP-CLI to regenerate the thumbnails of the existing images. All you have to do is cd to the WordPress root directory and enter this command:

wp media regenerate

WP CLI also lets you generate only the missing images, specify the attachment ID of the images to only regenerate specific images, and last but not the list, only regenerate specific thumbnail sizes. You can find all the details here.

Using Custom Thumbnail Sizes With Divi Engine Plugin Modules

Using custom thumbnail sizes is a great method to be used with our Divi Machine Thumbnail & ACF Item modules and the LL Thumbnail module from Divi BodyCommerce. You can also use it with the Thumbnail module that comes with Divi Ajax Filter.

Custom thumbnail sizes with hard crop mode are very useful to be used inside Loop Layouts if you want all the images in an Archive Loop to look the same:

Thumbnail and LL Thumbnail: You can set a custom registered size in the Thumbnail Image Size field:
ACF Item module: When using an Image ACF Image field, you can set a custom thumbnail size in the ACF Item module settings > Image, file, url, phone, email & Link Settings section > Image Only tab:

You can also register specific sizes to better optimize your pages. For example, you can have different sizes for different grid sizes as a 4-column grid takes half the size of a 2-column grid. You can also use them for better responsive optimizations using different sizes per device type (Use Divi’s Visibility options).

Conclusion

As we wrap up this insightful venture into adding some custom image sizes to your WordPress site with Divi Theme, it’s refreshing to realize the control and customization we’ve added with minimal effort. By merely injecting a snippet of code into the functions.php file, we’ve opened up a realm of possibilities for tailoring image sizes and employing hard cropping to ensure a sharp, cohesive visual narrative across all device landscapes.

The tutorial highlighted not only the technical process but also the significant impact on user experience, page load speed, and overall website aesthetics. The added precision in design and resource optimization are the cherries on top that make this customization a worthwhile task for any serious web designer or developer building more bespoke sites.

The world of web design is an ever-evolving landscape, with different screen sizes and applications for the imagery on the WordPress sites you build. Today, we’ve delved into a simple yet impactful customization that holds the promise of markedly enhancing your site’s visual appeal and performance. So, as you say seeya to generic image presentations and options, know that you are now equipped to offer a more comprehensive product to your clients.

Go you!

CONTRIBUTOR: Pavak

The post Adding custom image upload sizes in Divi and WordPress appeared first on Divi Engine.

Adding icons to Divi Contact Form input fields [3 Methods]

Divi Engine — Fri, 06 Oct 2023 14:13:56 +0000

Let’s face it, the default Divi Contact Form module doesn’t offer too much excitement or features. Enhancing the aesthetic appeal and usability of your contact form can lead to better user engagement and happier visitors. There certainly are many ways to enhance your Divi contacts forms, but one of the most requested methods we’ve seen is adding icons to your input fields.

In this Divi tutorial, we will explore three different methods to add icons to Divi Contact Form input fields:

Divi’s ETmodules icon font included with Divi
Uploading an SVG icon
Divi Form Builder plugin

Let’s get into it!

Method 1: Adding icons to Divi Contact Form input fields using the ETmodules icon font

Divi’s built-in icon font, ETmodules, is a treasure trove of icons that can be utilized to enhance various elements of your website, making it more intuitive and visually appealing. One such application is incorporating these icons into the input fields of your contact forms, which can significantly improve user experience by providing a clear, visual cue about the information required from the user. For instance, a small envelope icon can instantly signify an email field, making the form more interactive and self-explanatory.

In this section, we will walk through a step-by-step process to add icons to your Divi contact form input fields using the ETmodules icon font. By integrating CSS with the vast array of icons available in the ETmodules font, you can effortlessly customize your contact forms to align with the overall design aesthetics of your site, while also enhancing user engagement. So, let’s delve into how you can achieve this with a bit of CSS magic and the Divi icon font at your disposal.

Step 1 – Find a Divi ETmodules icon

As we mentioned earlier, it might make sense to use something like an envelope icon in a field where you are asking the user for their email address, but where do we find all the icons in the Divi icon font?

Luckily Elegant Themes has a blog post on exactly this, so point your browser to their post on Introducing the Elegant Themes Icon Font where you can see all the icons included.

When you have the perfect icon selected, you will want to copy the part of the code below the icon underlined in the image below

You only copy the part after the x and before the ; so in our example, we have  but will only use the e010 part.

Step 2 – Add the CSS to the Divi Contact Form field

With our icon selected, we can use a quick CSS snippet and add it to our field to inject the icon into the Divi form field.

Let’s take a look at the code below:

content: "e010";            /* Unicode of the icon from the ETmodules font */
font-family: "ETmodules";    /* Specifying the icon font family */
position: absolute;          /* Absolute positioning relative to the input field */
left: 10px;                  /* Position from the left of the input field */
top: 50%;                    /* Position from the top to vertically center the icon */
transform: translateY(-50%); /* Fine-tuning vertical centering */
font-size: 18px;             /* Icon size, adjust as per your design requirements */
color: #f1c40f;              /* Icon color, adjust to match your design */
margin-left: 40px;           /* Additional spacing from the left, if needed */
z-index: 999;                /* Ensures the icon stays on top of other elements */
background-color: #fff;      /* Background color of the icon area (optional)*/
border-radius: 50px;         /* Makes the background of the icon circular (optional)*/
padding: 5px;                /* Padding around the icon */
line-height: 1;              /* Adjusts the height of the icon line */

Now, don’t get scared when you look at that first line, like where the heck did that come from? It is just how you tell the Divi icon font that you are giving it a Unicode code for the icon you want to use.

Basically, all we did was take that e010 and add the to it to make it e010. Make sense? Good!

We need to give this code a home, so you need to open your Divi Contact Form Module, then go to the settings of the field where you would like to add the icon.

From here you go to the Advanced Tab for the field and expand the Custom CSS, then paste our code in the Before area.

This should then look something like this:

You’ll notice that our placeholder text is a little wonky, so let’s fix that real quick with a last little bit of CSS code.

Step 3 – Fix placeholder text spacing

This is fairly simple, all you need to do is copy and paste the code below into the Advanced Tab under Custom CSS, and the Main Element area.

} /* This is not a typo, it escapes the current block of CSS */
input {
padding-left: 50px!important; /* Adjust as needed */

And that is it, you can now adjust the very well-commented CSS to style the colors of the icon and so forth. Well done, you!

Method 2: Adding icons to Divi Contact Form input fields by uploading an SVG icon

Scalable Vector Graphics (SVG) icons provide a crisp and clear visual cue, regardless of the screen size or resolution, making them a preferred choice for modern web design. By incorporating SVG icons into the input fields of your Divi contact forms, you not only enhance the aesthetic appeal but also improve the user experience by providing intuitive indicators for each field. For instance, a simple user icon can make it clear that a field is meant for a username, adding a touch of design finesse and usability to your forms.

In this section, we will unravel the process of uploading and integrating SVG icons into your Divi contact form input fields. The beauty of SVG icons lies in their versatility and sharpness, and with a sprinkle of CSS, you can have them nestled perfectly in your input fields, boosting the visual appeal and interactive vibe of your contact forms. Whether you have a collection of custom SVG icons or have sourced them online, this guide will walk you through the steps to get them displayed elegantly within your Divi contact form fields. So, let’s venture into the process and elevate your form aesthetics to the next level.

Step 1 – Find an SVG icon you want to use

For our Name field, maybe we can add something like a name badge as the icon. If you don’t have one lined up, no problem, we used SVGRepo to find one we liked for free. Just note that you might need to use another tool to resize the SVG as we needed to otherwise it might be huge.

We went with this SVG icon for our Divi Contact From input field:

With your icon downloaded and resized, it is time to just upload it to your Media Library.

Next up, we have to do the same as we did in method one, with some slightly modified CSS code.

Step 2 – Add the CSS to add our SVG icon to the Divi Contact Form input field

With our SVG icon uploaded, we can use a quick CSS snippet and add it to our field to inject the icon into the Divi form field.

Let’s take a look at the code below:

content: url("your-uploaded-svg-url"); /* Specifies the URL of the SVG icon to be used */
position: absolute;         /* Positions the icon independently of the normal flow, based on the nearest positioned ancestor */
left: 10px;                 /* Positions the icon 10px from the left of the containing element */
top: 50%;                   /* Positions the icon 50% from the top of the containing element to vertically center it */
transform: translateY(-50%); /* Adjusts the vertical position of the icon to accurately center it */
margin-left: 40px;          /* Adds extra spacing to the left of the icon, shifting it rightwards */
z-index: 999;               /* Ensures the icon stays on top of other elements by setting a high stack order */
padding: 5px;               /* Adds space around the icon, inside the defined border or SVG dimensions */
line-height: 1;             /* Sets the height of the line containing the icon to normal, ensuring no extra vertical space */

The step to add the code is exactly the same as method one, so you need to open your Divi Contact Form Module, then go to the settings of the field where you would like to add the icon.

From here you go to the Advanced Tab for the field and expand the Custom CSS, then paste our code in the Before area.

This should then look something like this:

You’ll notice that our placeholder text is a little wonky, so let’s fix that real quick with a last little bit of CSS code.

Step 3 – Fix placeholder text spacing

This is fairly simple, all you need to do is copy and paste the code below into the Advanced Tab under Custom CSS and the Main Element area.

} /* This is not a typo, it escapes the current block of CSS */
input {
padding-left: 50px!important; /* Adjust as needed */

Bada-bing, bada-boom, you now have a fancy SVG icon on your Divi Contact Form module input fields.

Method 3: Adding icons to Divi Contact Form input fields with Divi Form Builder

Time for the real party to start with adding icons to your Divi forms using Divi Form Builder. Let’s take a look at how easy this is to do. We have already established why it helps with user engagement, so let’s stay with the meat and potatoes on this one.

Step 1 – Adding an icon to your Divi Form Builder input field

For this example, we will work with the first name field again, so open your Divi Form Builder module and open the settings for the field that you would like to add an icon to.

On the Content Tab of the field, scroll down to Layout Options, and switch Enable an icon on the input to Yes.

Then, all you need to do is select the icon you would like to add to your input field.

You can also easily style the icon in the same spot where you selected it.

If you find that your icon is not in the right vertical position, just head to the Design Tab and adjust it under the Field Settings.

Step 2 – Rejoice!

Yes, that is right, you’ve done it! In no time you can add input icons to any of your Divi Form Builder fields. How amazing is that? If you don’t have a Divi Form Builder license yet, definitely check out the Divi Form Builder product page as this is only one of the many features you’ll find in Divi Form Builder.

Conclusion

In conclusion, enhancing your Divi contact form input fields with icons is a surefire way to elevate the user experience on your Divi sites. In this Divi tutorial, we gave you three useful methods – utilizing the Divi icon font with CSS, uploading an SVG icon, or employing the Divi Form Builder, we’ve unveiled the flexibility and versatility that Divi offers in customizing form fields.

Each method has its own set of advantages, whether it’s the ease and abundance of icons provided by Divi’s icon font, the crisp and scalable nature of SVG icons, or the straightforward and feature-rich environment of the Divi Form Builder. The choice of method hinges on your project requirements, your comfort level with code, and the resources at your disposal.

By integrating icons into your forms, you’re not only enhancing the aesthetic appeal but also making your forms more intuitive and user-friendly, which is pivotal in encouraging user interaction and engagement on your website. Armed with the knowledge from this Divi tutorial, you’re now ready to add icons to your Divi contact form input fields, making them visually appealing and functionally intuitive.

Catch you in the next post!

The post Adding icons to Divi Contact Form input fields [3 Methods] appeared first on Divi Engine.

Divi Machine Classifieds – Part 8: Final Thoughts

Divi Engine — Thu, 24 Aug 2023 09:22:46 +0000

The Grand Finale: Reflecting on the Divi Machine Classifieds Course

As we pull back the curtains on our epic Divi Machine Classifieds tutorial series, we’re filled with a sense of pride, joy, and, to be honest, a little disbelief at everything we’ve covered. If you’ve been with us on this thrilling ride, congratulations! If you’re new here, buckle up as we recap the incredible journey we’ve been on together.

The Power of Divi Machine

From the get-go, Divi Machine has been at the core of our operations, empowering users to create custom post types, custom taxonomies, author profiles, and more. You’ve seen firsthand how this powerful plugin unlocks Divi’s potential for complex, customized sites.

Building the Framework

Our journey began with planning custom post types, exploring Custom Loop Layouts, and building the framework of our classifieds site. These foundations, essential for any classifieds site, were made approachable with Divi Machine.

Styling and Integrating

Through lessons in styling and integrating Google Maps, AJAX filtering, and conditional logic, Divi Machine paved the way for a visually engaging and feature-rich experience. Customization without writing a single line of code? That’s the Divi Machine promise!

Divi Form Builder: The Catalyst

When it came to adding forms, Divi Form Builder stepped into the limelight. The step-by-step guide to creating and styling forms, adding custom notices, and even editing classified posts turned potentially complex tasks into a walk in the park.

Form Crafting Made Simple

Divi Form Builder made form crafting simple, intuitive, and, dare we say, fun! Creating multi-step forms, integrating Mailchimp, and customizing contact forms has never been more straightforward.

Divi Machine Accounts: Enhancing User Experience

User registration, login, account management, wishlists – Divi Machine Accounts covered it all. This fantastic plugin was instrumental in adding the finishing touches to the classifieds site, providing users with personal space and added functionality.

A Personalized Experience

With Divi Machine Accounts, we opened doors to personalized user experiences, adding layers of convenience and connection that set our classifieds site apart from the rest.

What We Achieved Together

If we were to sum up what we achieved in one word, it would be ’empowerment.’ Through careful guidance and leveraging powerful plugins like Divi Machine, Divi Form Builder, and Divi Machine Accounts, we’ve created an environment where creativity and functionality thrive.

With the knowledge and tools you’ve gathered from this course, the sky’s the limit. Whether you aim to create job boards, directories, listing sites, or any other classifieds site, you’re equipped with the skills and understanding to make it happen.

Final Words

We didn’t just build a classifieds site; we built a community. A community of learners, creators, and Divi enthusiasts, all brought together by a shared passion and goal.

If you haven’t explored our plugins yet, now is the time! Unlock endless possibilities with Divi Machine, enhance your form creation with Divi Form Builder, and take user experiences to the next level with Divi Machine Accounts.

Thank you for being a part of this beautiful journey. We can’t wait to see where your newfound skills take you. Here’s to the next adventure!

Available Tutorial Series Installments…

This will update as we release more tutorial installments in the series.

The post Divi Machine Classifieds – Part 8: Final Thoughts appeared first on Divi Engine.

Divi Machine Classifieds – Part 7: Adding Advanced Forms with Divi Form Builder

Divi Engine — Tue, 22 Aug 2023 15:33:00 +0000

The final and valuable installment of our series is here! In Part 7, we’ll be focusing on empowering users to become content creators on your Classifieds site. With the help of Divi Form Builder, we’ll craft a seamless interface that allows users to add and edit their classifieds posts. From the first step of choosing a category to the final touches on styling, we’ve got it all covered.

What to Expect in This Installment:

Divi Form Builder Overview: A foundational guide to understanding what Divi Form Builder can do for your site.
Form Step 1 – Classifieds Category: Designing a user-friendly method for choosing categories for posts.
Form Step 2 – Item Type: An intuitive selection process for classifying the type of item being posted.
Form Step 3 – Item Information: Crafting a form to collect all necessary details about the item.
Form Step 4 – Contact Person: A streamlined way to gather contact information for seamless communication.
Styling the Form: The artistic touch to make your form visually appealing and cohesive with your site’s design.
Adding a Custom Form Notice: Implementing user notifications to guide and inform throughout the form process.
Adding an Edit Classified Form: Allowing users to edit their posts with ease.

By the end of this tutorial, your Classifieds site will not only look great but will also provide a smooth and intuitive user experience, turning casual visitors into active participants. Divi Form Builder’s integration into our toolkit makes this process a breeze, letting you focus on creativity rather than complexity.

So, grab your digital toolkit, and let’s dive into the captivating world of form-building with Divi! It’s the final lap, but certainly not the least, as we add the final strokes to our Classifieds masterpiece.

Divi Form Builder Overview

In this lesson, we introduce you to Divi Form Builder and show you around the plugin and its settings.

GENERAL LINKS

Get Divi 👉 https://www.elegantthemes.com/affilia…

Get Divi Machine Accounts 👉 https://diviengine.com/product/divi-m…

Get Divi Form Builder 👉 https://diviengine.com/product/divi-f…

WordPress Reserved Terms 👉 https://codex.wordpress.org/Reserved_…

Divi Machine Product Page 👉 https://diviengine.com/product/divi-m…

Divi Machine Documentation 👉 https://help.diviengine.com/article/6…

Lorem Ipsum Text 👉 https://loremipsum.io/

Free Stock Images 👉 https://unsplash.com/

Form Step 1 – Classifieds Category

In this lesson, we start building out Step 1 of our multistep form which will capture the classified category for the new post.

GENERAL LINKS

Get Divi 👉 https://www.elegantthemes.com/affilia…

Get Divi Machine Accounts 👉 https://diviengine.com/product/divi-m…

Get Divi Form Builder 👉 https://diviengine.com/product/divi-f…

WordPress Reserved Terms 👉 https://codex.wordpress.org/Reserved_…

Divi Machine Product Page 👉 https://diviengine.com/product/divi-m…

Divi Machine Documentation 👉 https://help.diviengine.com/article/6…

Lorem Ipsum Text 👉 https://loremipsum.io/

Free Stock Images 👉 https://unsplash.com/

Form Step 2 – Item Type

In this lesson, we start building out Step 2 of our multistep form which will capture the type of item we are listing, and then we use conditional logic to display only the relevant status options for the item.

GENERAL LINKS

Get Divi 👉 https://www.elegantthemes.com/affilia…

Get Divi Machine Accounts 👉 https://diviengine.com/product/divi-m…

Get Divi Form Builder 👉 https://diviengine.com/product/divi-f…

WordPress Reserved Terms 👉 https://codex.wordpress.org/Reserved_…

Divi Machine Product Page 👉 https://diviengine.com/product/divi-m…

Divi Machine Documentation 👉 https://help.diviengine.com/article/6…

Lorem Ipsum Text 👉 https://loremipsum.io/

Free Stock Images 👉 https://unsplash.com/

Form Step 3 – Item Information

In this lesson we will collect all the information for the item in the classifieds post we are creating.

GENERAL LINKS

Get Divi 👉 https://www.elegantthemes.com/affilia…

Get Divi Machine Accounts 👉 https://diviengine.com/product/divi-m…

Get Divi Form Builder 👉 https://diviengine.com/product/divi-f…

WordPress Reserved Terms 👉 https://codex.wordpress.org/Reserved_…

Divi Machine Product Page 👉 https://diviengine.com/product/divi-m…

Divi Machine Documentation 👉 https://help.diviengine.com/article/6…

Lorem Ipsum Text 👉 https://loremipsum.io/

Free Stock Images 👉 https://unsplash.com/

Form Step 4 – Contact Person

In this lesson we give folks a way to get in touch with the person that posted the classified by having it collect the correct contact person on our Divi Classifieds site.

GENERAL LINKS

Get Divi 👉 https://www.elegantthemes.com/affilia…

Get Divi Machine Accounts 👉 https://diviengine.com/product/divi-m…

Get Divi Form Builder 👉 https://diviengine.com/product/divi-f…

WordPress Reserved Terms 👉 https://codex.wordpress.org/Reserved_…

Divi Machine Product Page 👉 https://diviengine.com/product/divi-m…

Divi Machine Documentation 👉 https://help.diviengine.com/article/6…

Lorem Ipsum Text 👉 https://loremipsum.io/

Free Stock Images 👉 https://unsplash.com/

Styling the Form

Now that we have all the fields needed for our Divi post creation form, it is time to style the form to look great for people looking to submit a new classifieds post.

GENERAL LINKS

Get Divi 👉 https://www.elegantthemes.com/affilia…

Get Divi Machine Accounts 👉 https://diviengine.com/product/divi-m…

Get Divi Form Builder 👉 https://diviengine.com/product/divi-f…

WordPress Reserved Terms 👉 https://codex.wordpress.org/Reserved_…

Divi Machine Product Page 👉 https://diviengine.com/product/divi-m…

Divi Machine Documentation 👉 https://help.diviengine.com/article/6…

Lorem Ipsum Text 👉 https://loremipsum.io/

Free Stock Images 👉 https://unsplash.com/

Adding a Custom Form Notice

In this lesson, we will show you how to use Divi Form Builder and the Divi Builder to create a custom form notice for users when they submit a new Classifieds post.

GENERAL LINKS

Get Divi 👉 https://www.elegantthemes.com/affilia…

Get Divi Machine Accounts 👉 https://diviengine.com/product/divi-m…

Get Divi Form Builder 👉 https://diviengine.com/product/divi-f…

WordPress Reserved Terms 👉 https://codex.wordpress.org/Reserved_…

Divi Machine Product Page 👉 https://diviengine.com/product/divi-m…

Divi Machine Documentation 👉 https://help.diviengine.com/article/6…

Lorem Ipsum Text 👉 https://loremipsum.io/

Free Stock Images 👉 https://unsplash.com/

Adding an Edit Classified Form

In this lesson we leverage another feature in Divi Form Builder where you can have the owner of a created post edit that post or delete it with the Edit/Delete module.GENERAL LINKS

Get Divi 👉 https://www.elegantthemes.com/affilia…

Get Divi Machine Accounts 👉 https://diviengine.com/product/divi-m…

Get Divi Form Builder 👉 https://diviengine.com/product/divi-f…

WordPress Reserved Terms 👉 https://codex.wordpress.org/Reserved_…

Divi Machine Product Page 👉 https://diviengine.com/product/divi-m…

Divi Machine Documentation 👉 https://help.diviengine.com/article/6…

Lorem Ipsum Text 👉 https://loremipsum.io/

Free Stock Images 👉 https://unsplash.com/

Final Thoughts

As we wrap up Part 7 of our Divi Machine Classifieds tutorial series, we can’t help but reflect on the journey we’ve taken together. From the first spark of an idea to a fully functional Classifieds site that empowers users to participate actively, this series has been a rich and rewarding experience.

This installment has enabled us to explore Divi Form Builder in-depth, bringing to life the forms that connect your site’s users with the ability to create and modify their content. The process was made simpler and more enjoyable thanks to Divi Form Builders’ seamless integration with Divi and its robust features.

We’ve come to the end of the work portion of our course, and what a ride it’s been! The next segment will close our series with some final thoughts, reflections, and acknowledgments. Whether you were with us from the beginning or joined partway through, we hope you found value, inspiration, and skills that will serve you well in your future Divi endeavors.

But before we officially close the book, let’s take a moment in our next segment to celebrate what we’ve achieved and look forward to where these newfound skills can take us. See you in the final thoughts, where we’ll bid our farewell to this fantastic tutorial series.

Available Tutorial Series Installments…

This will update as we release more tutorial installments in the series.

The post Divi Machine Classifieds – Part 7: Adding Advanced Forms with Divi Form Builder appeared first on Divi Engine.

Divi Machine Classifieds – Part 6: Creating a My Account Area

Divi Engine — Thu, 17 Aug 2023 12:33:38 +0000

Welcome to Part 6 of the Divi Machine Classifieds Tutorial Series, a pivotal chapter in our journey where we delve into the world of Divi Machine Accounts. This section is all about enhancing user engagement and personalizing the experience on your Classifieds site. If you’re ready to take user interaction to the next level, you’ve come to the right place.

Here’s a sneak peek at what we’ll be exploring together:

Divi Machine Accounts Overview: We’ll start with a comprehensive understanding of what Divi Machine Accounts are and what they can do for your site.
Building the Register & Login Page: These gateways are essential for user interaction, and we’ll guide you on how to make them secure and user-friendly.
Building the My Account Page: This personal dashboard is where users manage their profiles, and you’ll learn how to make it functional and intuitive.
Creating some more Endpoints: We’ll dive into creating custom paths for different functionalities, ensuring smooth navigation.
Adding a Wishlist: A fun and engaging feature that allows users to save their favorite listings, which you’ll master how to incorporate.

This installment is not just about adding features; it’s about crafting a personalized and interactive space for your users, something that sets your Classifieds site apart from the rest. With Divi Machine’s powerful tools at your disposal, you’ll find the process more accessible and enjoyable.

So, without further ado, let’s dive into the fascinating world of Divi Machine Accounts and start building an even more dynamic and engaging Classifieds site. It’s going to be an exciting and productive ride, so buckle up, and let’s get started!

Divi Machine Accounts Overview

In this lesson, we introduce you to Divi Machine Accounts and show you around the plugin and its settings.

GENERAL LINKS

Get Divi 👉 https://www.elegantthemes.com/affilia…

Get Divi Machine Accounts 👉 https://diviengine.com/product/divi-m…

Get Divi Form Builder 👉 https://diviengine.com/product/divi-f…

WordPress Reserved Terms 👉 https://codex.wordpress.org/Reserved_…

Divi Machine Product Page 👉 https://diviengine.com/product/divi-m…

Divi Machine Documentation 👉 https://help.diviengine.com/article/6…

Lorem Ipsum Text 👉 https://loremipsum.io/

Free Stock Images 👉 https://unsplash.com/

Building the Register & Login Page

In this lesson, we use the Login endpoint to create and style our Login and Register page using the Divi Machine Accounts modules.

GENERAL LINKS

Get Divi 👉 https://www.elegantthemes.com/affilia…

Get Divi Machine Accounts 👉 https://diviengine.com/product/divi-m…

Get Divi Form Builder 👉 https://diviengine.com/product/divi-f…

WordPress Reserved Terms 👉 https://codex.wordpress.org/Reserved_…

Divi Machine Product Page 👉 https://diviengine.com/product/divi-m…

Divi Machine Documentation 👉 https://help.diviengine.com/article/6…

Lorem Ipsum Text 👉 https://loremipsum.io/

Free Stock Images 👉 https://unsplash.com/

Building the My Account page

In this lesson, we create the My Account dashboard page by using the endpoint automatically created for us called “Accounts”.

GENERAL LINKS

Get Divi 👉 https://www.elegantthemes.com/affilia…

Get Divi Machine Accounts 👉 https://diviengine.com/product/divi-m…

Get Divi Form Builder 👉 https://diviengine.com/product/divi-f…

WordPress Reserved Terms 👉 https://codex.wordpress.org/Reserved_…

Divi Machine Product Page 👉 https://diviengine.com/product/divi-m…

Divi Machine Documentation 👉 https://help.diviengine.com/article/6…

Lorem Ipsum Text 👉 https://loremipsum.io/

Free Stock Images 👉 https://unsplash.com/

Creating some more Endpoints

In this lesson, we add some endpoints to our account area where users can view their classifieds by category.

GENERAL LINKS

Get Divi 👉 https://www.elegantthemes.com/affilia…

Get Divi Machine Accounts 👉 https://diviengine.com/product/divi-m…

Get Divi Form Builder 👉 https://diviengine.com/product/divi-f…

WordPress Reserved Terms 👉 https://codex.wordpress.org/Reserved_…

Divi Machine Product Page 👉 https://diviengine.com/product/divi-m…

Divi Machine Documentation 👉 https://help.diviengine.com/article/6…

Lorem Ipsum Text 👉 https://loremipsum.io/

Free Stock Images 👉 https://unsplash.com/

Adding a Wishlist

In this lesson, we add a very engaging wishlist feature to our Classifieds site that allows users to save posts they love for later.

This is also the last lesson in this chapter, so if you do not have Divi Form Builder, this means it is the end of the road for you. You do however have full access to that part of the course, so if you would like to see how we allow users to create posts from the frontend of their site please follow along.

GENERAL LINKS

Get Divi 👉 https://www.elegantthemes.com/affilia…

Get Divi Machine Accounts 👉 https://diviengine.com/product/divi-m…

Get Divi Form Builder 👉 https://diviengine.com/product/divi-f…

WordPress Reserved Terms 👉 https://codex.wordpress.org/Reserved_…

Divi Machine Product Page 👉 https://diviengine.com/product/divi-m…

Divi Machine Documentation 👉 https://help.diviengine.com/article/6…

Lorem Ipsum Text 👉 https://loremipsum.io/

Free Stock Images 👉 https://unsplash.com/

Final Thoughts

We’ve reached the end of an exciting chapter in our Divi Machine Classifieds tutorial series! Together, we explored Divi Machine Accounts, built custom login pages, personalized user dashboards, and added interactive features like a wishlist. We hope you’ve enjoyed this installment and are ready to embark on the next phase of your Classifieds site creation journey.

If you don’t own Divi Machine Accounts or Divi Form Builder, unfortunately, this is the end of the series for you. But don’t let that stop you from enhancing your Classifieds site further! By purchasing these plugins or a Divi Engine All-Access Membership, you can continue to access more advanced tutorials and features.

In the next installment, we’ll dive into working with Divi Form Builder to create new listings for our classifieds site. We’ll guide you through the process of crafting engaging and functional listing forms that allow users to post their classifieds seamlessly. It’s going to be another significant step towards building a full-fledged Classifieds site, and we’re thrilled to have you with us on this journey.

Until then, take your time to explore and practice what you’ve learned in Part 6. And if you’re ready for more, we’re just a click away with the Divi Form Builder and Divi Machine Accounts.

Happy building, and see you in the next installment!

Available Tutorial Series Installments…

This will update as we release more tutorial installments in the series.

The post Divi Machine Classifieds – Part 6: Creating a My Account Area appeared first on Divi Engine.

Divi AI is here and we want to talk about it

Divi Engine — Tue, 15 Aug 2023 15:01:29 +0000

Divi AI is here and ready to join your portfolio of AI tools to help enable you to get more done ♫ Harder Better Faster Stronger ♫ …do it. Ok, I’m done…for now.

But in all seriousness, AI is busy transforming the way all of us work and those of us not embracing it will soon get left behind choking on the dust of those that did. Elegant Themes have been hinting at some AI integration for a while now and here it is offered as an add-on to the already amazing Divi Theme as a subscription service for as low as $14.40 per month if you sign up now with the introductory discount.

Divi AI has also not dodged controversy with its launch with many users speaking out on Reddit and other platforms for various reasons, so that is why we felt we should take a closer look and address some of these issues that have been raised.

With that, here follows a (somewhat) unbiased look at Divi AI by starting at what it does today, then delving into some of the issues.

What is Divi AI, and what can it do?

Divi AI takes everything we know and love about artificial intelligence and integrates it into your website creation process. Having Divi AI directly engineered right into the Divi page builder enables you to generate images, text, and other creative assets effortlessly as you design your pages. No more multiple tabs with multiple AI tools all over the place.

It is important to note that Divi AI is free for the first 100 uses per Elegant Themes account. This means that if your inquisitive clients see a fancy new AI button and start playing with it, they are using your credits. It is not per API key or install, it is per subscription, so keep that in mind. We have included a snippet in the Controversy section of this post which will hide the button from clients.

With that out of the way, let’s take a look at how this Divi AI creative partner can assist you with a myriad of tasks:

Image Creation

One of the standout features of Divi AI is its capacity to generate unique images. Whether you need logos, graphics, lifestyle photos, or abstract art, all you need to do is describe your vision in a text prompt.

For instance, you could prompt “An abstract painting of your momma’s house with purple and blue tones and light streaks” for a homepage hero image. Or perhaps you need an infographic; simply prompt “A comic book style infographic explaining the benefits of McDonald’s with illustrated regret”.

The sky is the limit with Divi AI. Each prompt generates a new image, allowing you to refine and iterate until you achieve your desired outcome.

Crafting Top-Notch Copy and Content

Divi AI simplifies the process of writing website copy. It can generate everything from catchy headlines and button text to comprehensive blog posts.

Just describe your topic, and Divi AI will draft unique, engaging copy for you in no time. For example, prompt it to “Write a 300-word blog post about the top 5 tips for beginner spelunkers.”

Divi AI can even propose blog post ideas and outlines, making the writing process a breeze.

Creating Contextual Content

One of the unique features of Divi AI is its ability to generate contextual content for entire modules based on your existing website.

For example, with a single click, you can auto-generate a new blurb module filled with an AI-written title, body text, and featured image. The content will be relevant and on-brand as Divi AI analyses your site.

Enhancing Existing Content

Divi AI is not just proficient at generating fresh content. You can also utilize it to revise and enhance any text you’ve already penned.

With a simple click, Divi AI can condense copy, correct grammar and spelling errors, make the text more digestible and engaging, and more. This makes editing a walk in the park.

Maintaining Brand Consistency

Since Divi AI is integrated into the Divi theme, it learns about your brand from your existing website content. This allows it to emulate your tone and style when generating new text and images.

You also have the option to provide keywords and stylistic guidance through prompts, ensuring all AI-generated content aligns with your brand voice.

Time Efficiency

Divi AI can significantly reduce the time you spend on creative tasks. No more brainstorming for the perfect headline or slogan. No more hours spent designing graphics in Photoshop.

With Divi AI, you can generate polished, on-brand content in mere seconds, freeing up your time for other crucial tasks.

Seamless Integration

The beauty of Divi AI lies in its integration directly into the Divi Builder. There’s no need to manage or switch between third-party apps.

You can access the AI tools as you design your pages for a seamless, integrated experience. Simply click the Divi AI button wherever you want to add or enhance content.

Divi AI unlocks a world of possibilities for effortless content creation. Let your imagination soar and save time with the power of artificial intelligence!

The Road Forward

According to the team at Elegant Themes, they are just getting started with Divi AI. Coming soon will be even more ways that they have implemented AI to help you build faster.

Code Generation: Imagine generating code on the fly within the Divi Builder to target an element on the screen with natural language. Yeah, mind blown.
Full Layout Generation: Instead of loading a released template that sort of fits your needs, generate one with proper context.
Image Editing: From changing elements within an existing image to expanding that image to include more contextual imagery, Divi AI will soon let you do that.

With Divi AI’s limitations in mind along with this roadmap, we truly believe that it makes a fantastic compliment to Divi Form AI which we introduced as a new feature in Divi Form Builder. Why you ask? Well, Divi AI is a fantastic admin-facing tool, while Divi Form AI extends the intelligence of AI to your site visitors. We have crafted a few demos for you to see just a few of the possibilities we dreamt up, but you can truly deepen your user journey by giving them interactions that matter.

Learn more about Divi Form AI here. Ok, end of commercial, back to the post.

Your browser does not support the video tag.

Divi AI vs ChatGPT vs Midjourney

Divi AI, ChatGPT, Midjourney, [insert LLM list here], are all exciting new AI tools, but they each have their own unique strengths. While there is some overlap in capabilities, understanding the key differences can help you utilize each tool to its full potential. It all comes down to how versed you are in working with all the tools in these categories.

We have Divi AI which specializes in understanding Divi and the context within Divi land. We have a tool like ChatGPT which specializes in conversation AI. And lastly, you have your generative image model like Midjourney which can be used to generate incredible images with dialed-in control.

Let’s take a quick look at each one more closely:

Divi AI (free then from $14.40 pm)

Divi AI is specifically designed for generating visual content like images and text for your Divi website. One of its biggest advantages is how deeply integrated it is into the Divi Builder.

You can access Divi AI directly within the builder to instantly generate and insert images, text, and other content into your pages as you design them. There is no need to bounce back and forth between apps.

Divi AI also analyzes your existing website content so it can mimic your brand’s tone and style. This allows it to produce branded, contextual results.

Other key features include easy-to-use natural language prompts, one-click content generation, and built-in editing tools for improving AI-generated text and images.

ChatGPT (free or $20 pm)

ChatGPT is a more generalized conversational AI. It excels at understanding natural language prompts and responding to them thoughtfully.

While you can generate some images and text content with ChatGPT, it does not have deep knowledge of your specific brand or content. The results may not align seamlessly with your website’s look and feel.

ChatGPT also cannot directly integrate with your website or apps. You would need to copy/paste any generated content.

However, as a broad AI assistant, ChatGPT is unparalleled. It can answer complex questions, explain concepts, summarize topics, and more. You just need to feed it more context to get better results.

Midjourney (from $10 pm)

Midjourney’s specialty is AI-generated images and art. It offers advanced control over image styles and prompts.

You can generate stunning, photorealistic images by describing a scene, concept, or visual idea. Midjourney’s image capabilities surpass Divi AI and ChatGPT currently.

However, Midjourney does not produce any text or copy. And like ChatGPT, it lacks brand/context awareness and cannot integrate content seamlessly into your website.

You would need to take images generated in Midjourney and import them manually into your Divi site. Midjourney is more of an artistic tool.

Key Takeaways

In summary, while the core capability of each overlap, some key differences stand out:

Divi AI is purpose-built for branded content generation for your Divi site.
ChatGPT is better for general conversation and complex Q&A.
Midjourney leads in photorealistic, artistic image generation with great control.

Divi AI saves time by streamlining content production during web design. While tools like ChatGPT and Midjourney certainly have their place, it takes great skill in prompt engineering to get the results you are looking for.

The Controversy

A small contingent out there has been vocal on platforms like reddit and facebook with the general consensus being that Elegant Themes are gouging customers by charging for add-on services like Divi Cloud, Divi AI, etc. I want to speak to these two specific examples.

Compaint #1

This one is fairly simple, the usage of these API’s are not free for Elegant Themes. Most of the time these API’s are charged by usage and them giving you unlimited usage for both image and text generation is a steal even at $30. That, and Elegant Themes is a business. They offer an excellent product (Divi) with a lifetime license to use on as many sites and with as many clients as you like. The ROI here can not be overstated. And this does not just go for Elegant Themes. Devs work hard on their plugins/services and they need to pay people to not only offer support for these products but continue development them to keep making them better. Often at no charge as most devs offer lifetime deals on their products. An optional add-on service like this is a way to keep the innovation flowing for their core products. Without being able to generate more revenue via vehicles like Divi AI subscriptions, the core products will slowly stagnate and die. There goes your initial investment.

Complaint #2

This is a more level-headed complaint I feel. Yes, there is a digital ai gold rush happening right now and Divi Engine certainly did not sit this one out. But it takes some understanding behind the scenes as to how companies like Divi Engine, and no doubt Elegant Themes, tackle projects like this. There is always a core team doing development on the core products. This includes bug fixes, new features, and rewrites ala Divi 5. As new products or services come up, separate teams start doing development on those products. Extra devs get hired for that specific purpose. It is not a matter of halting development on one thing to start development on another. Yes, Elegant Themes have been slow on both progress and details regarding Divi 5, trust us, the Divi developer community out there feels that pain the most. Just trust that this is not their first rodeo and that they are taking care of the development process of their entire offering.

The common denominator here was Divi 5 being mentioned. Personally I think the community is anxious to get their hands on it because of the laundry list of flaws in Divi 4, but please be patient out there. Imagine the anxiety of having to re-write 9 plugins for Divi 5 which is what our dev team has to look forward to. Even with Elegant Themes being as big as they are, they are not going to put a Divi 5 version in your hands that will immediately break a bunch of sites.

The bottom line is this.

If you don’t have a use for Divi AI or don’t want to pay for it, don’t use it, simple as that.

OH! And if you don’t even want to see Divi AI in your Divi Builder, just paste the snippet below in your Divi > Theme Options > Custom CSS:

.et-fb-icon.et-fb-icon--divi-ai, button.et-fb-
button.et-fb-button.et-fb-button--info.et-fb-ai-
options-button {
display: none!important;
}

This is also handy with that 100-use limit for free on the Divi AI feature so that clients don’t run that down.

Our Verdict

While this first iteration of Divi AI certainly seems like a good start, we also experienced some buggy behavior while testing it out. This ranged from some strange output to nondescript error messages like the one below.

Some of the images generated were also a little wonky at best, but with some nurturing you can massage it into something more suited for a production site. These are issues faced from time to time by any of these LLM models. I’m scarred for life after trying to generate a likeness of a bearded employee here at Divi Engine for our Summer Sale promo video.

Once you get around these growing pains and use more of a tool to prototype and enhance existing content, you will grow to love Divi AI. Since I directly work with writing and creating many Divi tutorials, this saves me tons of time looking for images and generating relevant dummy text.

The future implementation of Divi AI is what has me really excited. Contextual CSS for things like animations or other features not natively available in Divi will empower the masses. Not everybody has the time to study CSS or JS to get some unique effects implemented on their Divi sites. Divi AI will change that. It really is a “radio moment” for Divi as it is democratizing skills within the Divi Theme.

Some of us will still be fine with the other AI tools out there because we have already painstakingly spent time learning how to use them most effectively to get the results we want, but that is not everybody out there. I look at my mom who is a brilliant designer, but these modern tools are just out of reach and very intimidating, Divi AI eases that by not requiring complex prompt engineering with steep learning curves.

From a cost perspective, it really is affordable. Unlimited usage! Hello.

Even at the $30 month-to-month pricing it hits parity with tools that have steeper learning curves like ChatGPT and Midjourney, but you are unshackled from monthly or hourly limits. It really is a no-brainer for the agencies out there. We have all gone down the “find the perfect Pexels image” rabbit hole for a client demo or showcase. No more.

Divi AI is here, it is not perfect, but we don’t hate it!

The post Divi AI is here and we want to talk about it appeared first on Divi Engine.

Divi Machine Classifieds – Part 5: Building the Classifieds Pages

Divi Engine — Tue, 15 Aug 2023 05:47:49 +0000

Welcome to Part 5 of the Divi Machine Classifieds tutorial series. In this crucial installment, we’ll be focusing on the essential building blocks of your Classifieds site. We’ll guide you through the practical and hands-on steps to craft the fundamental aspects of your website, including:

Building the Homepage: This is the face of your site, and we’ll explore how to make it inviting and functional.
Building the Header & Footer: These are the key navigational elements, and you’ll learn how to make them both user-friendly and visually appealing.
Building the Archive Pages: These pages organize your content, and we’ll delve into how to structure them efficiently.
Building the Single Page Template in the Theme Builder: This template dictates how individual pages appear, and you’ll master how to create them with precision.

With Divi Machine‘s intuitive features, these tasks become achievable and clear. This section is about rolling up your sleeves and diving into the practical aspects of web development. We’ve laid the groundwork in previous parts, and now it’s time to assemble these pieces into a cohesive and professional site.

Prepare your workspace and get ready to build. We have a productive session ahead, filled with valuable insights and actionable instructions.

Let’s begin!

Building the Homepage

In this lesson, we build out the landing page with a few different sections listed below. This will be our first dive into the Archive Loop module, so be sure to pay attention.

SECTIONS

- Hero Section
- Latest Classified
- Posts Section
- Lost & Found Section
- Counter Section
- For Sale Section
- Call-to-Action Section
- Free Stuff Section
- Newsletter Section

LESSON LINKS

Hero Section Image 👉 https://unsplash.com/photos/bJkynpjVRBQ

GENERAL LINKS

Get Divi 👉 https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=58998

Divi Machine Product Page 👉 https://diviengine.com/product/divi-machine/

Divi Machine Documentation 👉 https://help.diviengine.com/article/607-welcome-to-divi-engine-divi-machine

Lorem Ipsum Text 👉 https://loremipsum.io/

Free Stock Images 👉 https://unsplash.com/

Building the Header & Footer

In this lesson, we will use the Divi Theme Builder to create our Global Header and Footer.

GENERAL LINKS

Divi Machine Product Page 👉 https://diviengine.com/product/divi-machine/

Divi Machine Documentation 👉 https://help.diviengine.com/article/607-welcome-to-divi-engine-divi-machine

Lorem Ipsum Text 👉 https://loremipsum.io/

Free Stock Images 👉 https://unsplash.com/

Building the Archive Pages

In this lesson, we will create some Layout Templates in the Divi Theme Builder to display our Classifieds posts.

GENERAL LINKS

Divi Machine Product Page 👉 https://diviengine.com/product/divi-machine/

Divi Machine Documentation 👉 https://help.diviengine.com/article/607-welcome-to-divi-engine-divi-machine

Lorem Ipsum Text 👉 https://loremipsum.io/

Free Stock Images 👉 https://unsplash.com/

Building the Single Page Template

In this lesson, we wrap things up by building a layout template for all single Classified posts using the Divi Theme builder and Divi Machine modules.

This will conclude the course if you do not have a Divi Machine Accounts or Divi Form Builder license. If that is you, feel free to follow along to see if those are tools you need for your belt as the content if free to you.

GENERAL LINKS

Divi Machine Product Page 👉 https://diviengine.com/product/divi-machine/

Divi Machine Documentation 👉 https://help.diviengine.com/article/607-welcome-to-divi-engine-divi-machine

Lorem Ipsum Text 👉 https://loremipsum.io/

Free Stock Images 👉 https://unsplash.com/

Final Thoughts

Congratulations on reaching the conclusion of Part 5 of the Divi Machine Classifieds tutorial series! Together, we’ve navigated through the critical building stages of your Classifieds site, crafting the Homepage, Header & Footer, Archive Pages, and the Single Page Template using the Theme Builder. You’ve taken significant strides in turning your website vision into a tangible reality.

But wait, the learning adventure doesn’t end here. If you’ve got the hunger to explore further, the next installment offers an exciting opportunity to delve into working with Divi Machine Accounts. We’ll be focusing on building a custom “My Account” area tailored for your classifieds site, an essential feature for enhancing user experience and functionality.

However, it’s essential to note that the upcoming sessions require Divi Machine Accounts and Divi Form Builder. If you don’t own these plugins, this marks the end of the series for you, but we hope you’ve found immense value in the journey thus far.

For those interested in continuing, and if you don’t already have these plugins, consider purchasing them individually or taking advantage of the Divi Engine All-Access Membership. It’s your passport to an even deeper exploration of Divi’s limitless potential.

Thank you for being a part of this learning experience, and we hope to see you in the next phase of our Divi adventure. Whether you’re moving on or continuing with us, you’ve built a strong foundation in Divi Machine, and the digital world is now your playground.

Happy building!

Available Tutorial Series Installments…

This will update as we release more tutorial installments in the series.

The post Divi Machine Classifieds – Part 5: Building the Classifieds Pages appeared first on Divi Engine.

Divi Machine Classifieds – Part 4: Creating and Styling Custom Loop Layouts

Divi Engine — Thu, 10 Aug 2023 00:30:45 +0000

Welcome to Part 4 of our Divi Machine Classifieds tutorial series, where we’re about to venture into the fascinating world of Custom Loop Layouts. If you’ve been wondering what Custom Loop Layouts are, how to build them, or how to style them specifically for your Classifieds, then you’ve arrived at the right place!

This installment will shed light on the entire process of creating and styling a Custom Loop Layout for Classifieds within Divi Machine. We’ll break down the complex-sounding terminology into simple, digestible steps, allowing you to craft an engaging and visually stunning Classifieds section on your website.

From understanding the very essence of Custom Loop Layouts to meticulously constructing and styling them to fit your classifieds, we’ve got a thrilling learning adventure ahead. With Divi Machine at your fingertips, these seemingly intricate tasks become smooth and manageable.

Ready to enhance your Divi skills further and add another powerful tool to your web development arsenal?

Let’s dive right in!

What are Custom Loop Layouts?

In this lesson, we talk about Custom Loop Layouts because they can just be downright confusing, especially if you are not familiar with what they are.

GENERAL LINKS

WordPress Reserved Terms 👉 https://codex.wordpress.org/Reserved_Terms

Divi Machine Product Page 👉 https://diviengine.com/product/divi-machine/

Divi Machine Documentation 👉 https://help.diviengine.com/article/607-welcome-to-divi-engine-divi-machine

Lorem Ipsum Text 👉 https://loremipsum.io/

Free Stock Images 👉 https://unsplash.com/

Building our Classifieds Custom Loop Layout

In this lesson, we will finally get to build our Custom Loop Layout for the Classifieds post type.

GENERAL LINKS

WordPress Reserved Terms 👉 https://codex.wordpress.org/Reserved_Terms

Divi Machine Product Page 👉 https://diviengine.com/product/divi-machine/

Divi Machine Documentation 👉 https://help.diviengine.com/article/607-welcome-to-divi-engine-divi-machine

Lorem Ipsum Text 👉 https://loremipsum.io/

Free Stock Images 👉 https://unsplash.com/

Styling our Classifieds Custom Loop Layout

In this lesson, we make it all look better by adding some styling and moving some elements around the loop using Divi settings.

GENERAL LINKS

WordPress Reserved Terms 👉 https://codex.wordpress.org/Reserved_Terms

Divi Machine Product Page 👉 https://diviengine.com/product/divi-machine/

Divi Machine Documentation 👉 https://help.diviengine.com/article/607-welcome-to-divi-engine-divi-machine

Lorem Ipsum Text 👉 https://loremipsum.io/

Free Stock Images 👉 https://unsplash.com/

Final Thoughts

As we conclude Part 4 of our Divi Machine Classifieds tutorial series, it’s inspiring to see the progress we’ve made together. We’ve unraveled the complexities of Custom Loop Layouts, transforming them from mere concepts into tangible features for your Classifieds site. By building and styling these Custom Loop Layouts, you’ve added an entirely new dimension to your web development repertoire.

Yet, as comprehensive as this section has been, we’re just scratching the surface of what Divi Machine can achieve. Our journey is far from over, and the road ahead is filled with even more thrilling and educational milestones.

In our upcoming installment, we’ll shift our focus to constructing the fundamental building blocks of your Classifieds site. Prepare to immerse yourself in crafting everything from the Homepage to the Header and Footer, Archive Pages, and even the Single Post Template using Divi’s intuitive Theme Builder.

The beauty of Divi lies in its flexibility and versatility, and the next part of our series will truly showcase that. Whether you’re a seasoned developer or just starting out, you’ll find these lessons invaluable in turning your ideas into a fully functional and visually captivating classifieds site. Until next time, keep experimenting and stay excited for the next chapter in our Divi adventure!

Available Tutorial Series Installments…

This will update as we release more tutorial installments in the series.

The post Divi Machine Classifieds – Part 4: Creating and Styling Custom Loop Layouts appeared first on Divi Engine.

Divi Machine Classifieds – Part 3: Working with Custom Post Types in Divi

Divi Engine — Tue, 08 Aug 2023 00:30:33 +0000

Welcome to Part 3 of our tutorial series, where we delve deep into the world of Custom Post Types using the ever-so-sleek Divi Machine! Today, we’re embarking on an exciting journey: from plotting our Classifieds’ Custom Post Type to actually bringing it to life within Divi Machine. But that’s not all. We’ll also walk you through the nuances of creating the Custom Taxonomy and introducing Custom Fields to our Classifieds with the seamless integration of Advanced Custom Fields (ACF). By the time you wrap up this tutorial, you’ll have your very first Classifieds Post live and kicking. If you ever thought creating custom posts in Divi was complex, think again! With Divi Machine‘s user-friendly interface and powerful integration with ACF, every step feels like a breeze.

Ready to dive in and see how effortlessly you can elevate your Divi site?

Let’s get started!

Planning our Custom Post Type (Classifieds)

In this lesson, we talk about how you should think about planning out your Custom Post Type, Taxonomies, and Fields. You might come up with a different structure than we do, and that is ok, it is just important that you plan!

LESSON LINKS

WordPress Reserved Terms 👉 https://codex.wordpress.org/Reserved_Terms

GENERAL LINKS

Divi Machine Product Page 👉 https://diviengine.com/product/divi-machine/

Divi Machine Documentation 👉 https://help.diviengine.com/article/607-welcome-to-divi-engine-divi-machine

Lorem Ipsum Text 👉 https://loremipsum.io/

Free Stock Images 👉 https://unsplash.com/

Creating our Custom Post Type in Divi Machine

In this lesson, we quickly show you how easy it is to add our custom post type to Divi using Divi Machine.

GENERAL LINKS

Divi Machine Product Page 👉 https://diviengine.com/product/divi-machine/

Divi Machine Documentation 👉 https://help.diviengine.com/article/607-welcome-to-divi-engine-divi-machine

Lorem Ipsum Text 👉 https://loremipsum.io/

Free Stock Images 👉 https://unsplash.com/

Creating the Custom Taxonomy

In this lesson, we use the WordPress category feature to create our different Classifieds categories, as well as set up custom taxonomy for the items using Divi Machine.

GENERAL LINKS

Divi Machine Product Page 👉 https://diviengine.com/product/divi-machine/

Divi Machine Documentation 👉 https://help.diviengine.com/article/607-welcome-to-divi-engine-divi-machine

Lorem Ipsum Text 👉 https://loremipsum.io/

Free Stock Images 👉 https://unsplash.com/

Adding Custom Fields to Classifieds using ACF

In this lesson, we use the free Advanced Custom Fields plugin to add the fields we planned in the first lesson to our Classifieds post type.

LESSON LINKS

Advanced Custom Fields plugin page 👉 https://wordpress.org/plugins/advanced-custom-fields/

GENERAL LINKS

Divi Machine Product Page 👉 https://diviengine.com/product/divi-machine/

Divi Machine Documentation 👉 https://help.diviengine.com/article/607-welcome-to-divi-engine-divi-machine

Lorem Ipsum Text 👉 https://loremipsum.io/

Free Stock Images 👉 https://unsplash.com/

Adding our 1st Classifieds Post

In this lesson, we use the WordPress backend to add our first Classifieds post. It is important that you add at least 3 posts in each Classifieds category as we will need some data when we work with Custom Loop Layouts in the next chapter.

3 x For Sale
3 x Free Stuff
3 x Lost & Found

GENERAL LINKS

WordPress Reserved Terms 👉 https://codex.wordpress.org/Reserved_Terms

Divi Machine Product Page 👉 https://diviengine.com/product/divi-machine/

Divi Machine Documentation 👉 https://help.diviengine.com/article/607-welcome-to-divi-engine-divi-machine

Lorem Ipsum Text 👉 https://loremipsum.io/

Free Stock Images 👉 https://unsplash.com/

Final Thoughts

Our journey through this tutorial so far has been quite an exploration. We’ve dug deep into Divi, unveiling its wide-ranging capabilities and illustrating the ease of web development when paired with Divi Machine. The seamless blend of Divi Machine and ACF is a testament to the innovation of present-day web tools. These essential tools not only simplify difficult tasks but also provide a robust platform for visionaries, turning digital dreams into achievable goals, no matter their tech background.

Despite the wealth of knowledge we’ve gained, it’s important to remember that we’re still on a path of ongoing discovery. The digital world is vast, always shifting, and full of opportunities. Each module, each lesson, adds a new layer to your growing expertise in web development.

Looking ahead, we’ve got something exciting in store: Custom Loop Layouts will be the focus of our next session. This intriguing topic is sure to enrich your expanding skillset. So, as we press on, stay curious, embrace the challenges, and enjoy the sense of achievement each new lesson brings.

Let’s keep learning and growing!

Available Tutorial Series Installments…

This will update as we release more tutorial installments in the series.

The post Divi Machine Classifieds – Part 3: Working with Custom Post Types in Divi appeared first on Divi Engine.

Divi Machine Classifieds – Part 2: Optimizing Divi and some Efficiency Tips

Divi Engine — Thu, 03 Aug 2023 02:00:07 +0000

This episode of working with Custom Post Types in Divi with Divi Machine is all about making sure we are ready for the task at hand. Divi Machine is a lot to take in by itself, so we will be going through setting up your Divi install in a way that is optimized for succes. After that, we will look at some tips on working as efficiently as possible in Divi before we start building out our Classifieds site with Divi and Divi Machine.

Let’s get busy!

Optimizing your Divi Install

In this lesson, we will save you some frustration by recommending some settings that will make sure the development of your Classifieds site goes smoothly. GENERAL LINKS

Divi Machine Product Page 👉 https://diviengine.com/product/divi-machine/

Divi Machine Documentation 👉 https://help.diviengine.com/article/607-welcome-to-divi-engine-divi-machine

Lorem Ipsum Text 👉 https://loremipsum.io/

Free Stock Images 👉 https://unsplash.com/

Working Efficiently in Divi

In this lesson, we will show you some ways to save time when building Divi sites like setting global fonts and button styles. LESSON LINKS Generating a Google Maps API Key 👉 https://www.elegantthemes.com/documentation/divi/map/ Canva for design 👉 https://partner.canva.com/diviengine Generate Font Pairings 👉 https://www.fontpair.co/ Generate Color Schemes 👉 https://coolors.co/ GENERAL LINKS

Divi Machine Product Page 👉 https://diviengine.com/product/divi-machine/

Divi Machine Documentation 👉 https://help.diviengine.com/article/607-welcome-to-divi-engine-divi-machine

Lorem Ipsum Text 👉 https://loremipsum.io/

Free Stock Images 👉 https://unsplash.com/

Final Thoughts

Now that we have laid down a solid foundation on working efficiently in Divi and optimizing our Divi install so we don’t run into any issues, we can focus on getting rolling with our Divi Machine Classifieds site.

As a reminder, if you don’t own Divi Machine yet, you are not building the best Divi sites possible yet. For those of you that do own it, good on you, I like you!

Take a peek below to see what other parts of the course is available now.

See you soon!

Available Tutorial Series Installments…

This will update as we release more tutorial installments in the series.

The post Divi Machine Classifieds – Part 2: Optimizing Divi and some Efficiency Tips appeared first on Divi Engine.

Divi Machine Classifieds – Part 1: Introduction to building a directory site with Divi and Divi Machine

Divi Engine — Tue, 01 Aug 2023 00:00:43 +0000

Welcome to the first installment of our Divi Machine Classifieds course! This is all about getting you orientated within the course and setting you up with some basic Divi Machine knowledge. Don’t forget folks, while this course is being provided 100% free of charge, you do need at the very least, Divi Machine as well as the Divi Theme installed, if you don’t have one or the other, check out the links below each video.

Thinking caps on, let’s rock and roll!

Welcome to Divi Machine Classifieds

Welcome to the Divi Machine Classifieds course! Get ready to do some learning folks because this is an intense 7+ hours. The things you learn will help you maximize your investment in Divi Machine and give you the tools to start charging more by building more bespoke websites.

We are glad you are here 😁

LESSON LINKS

Classifieds site demo (You will be building this) 👉 https://machine-classified.diviengine.com/

GENERAL LINKS

Divi Machine Product Page 👉 https://diviengine.com/product/divi-machine/

Divi Machine Documentation 👉 https://help.diviengine.com/article/607-welcome-to-divi-engine-divi-machine

Lorem Ipsum Text 👉 https://loremipsum.io/

Free Stock Images 👉 https://unsplash.com/

Course Requirements

In this lesson, we take a quick look at everything that is required to complete this course.

LESSON LINKS

Divi Hosting Requirements 👉 https://www.elegantthemes.com/blog/divi-resources/divi-hosting-requirements

Divi Child Theme Download 👉 https://diviengine.com/set-divi-child-theme-dynamic-css/

Setup a Local Host using Local by Flywheel 👉 https://diviengine.com/how-to-easily-setup-a-local-development-environment-for-divi/

Cloudways Hosting (Affiliate Link) 👉 https://www.cloudways.com/en/?id=143361

Divi Theme (Affiliate link) 👉 https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=58998

GENERAL LINKS

Divi Machine Product Page 👉 https://diviengine.com/product/divi-machine/

Divi Machine Documentation 👉 https://help.diviengine.com/article/607-welcome-to-divi-engine-divi-machine

Lorem Ipsum Text 👉 https://loremipsum.io/

Free Stock Images 👉 https://unsplash.com/

What is Divi Machine?

In this lesson, we talk about Divi Machine and some of the types of sites you can build with it.

LESSON LINKS

Restaurant site demo 👉 https://machine-burgershop.diviengine.com/

Car Listing site demo 👉 https://machine-cars.diviengine.com/

Real Estate Listing site demo 👉 https://machine-estate-agent.diviengine.com/

Classifieds site demo (You will be building this) 👉 https://machine-classified.diviengine.com/

GENERAL LINKS

Divi Machine Product Page 👉 https://diviengine.com/product/divi-machine/

Divi Machine Documentation 👉 https://help.diviengine.com/article/607-welcome-to-divi-engine-divi-machine

Lorem Ipsum Text 👉 https://loremipsum.io/

Free Stock Images 👉 https://unsplash.com/

Divi Machine Overview

In this lesson, we take you on a tour of Divi Machine by looking at its various settings and modules.

GENERAL LINKS

Divi Machine Product Page 👉 https://diviengine.com/product/divi-machine/

Divi Machine Documentation 👉 https://help.diviengine.com/article/607-welcome-to-divi-engine-divi-machine

Lorem Ipsum Text 👉 https://loremipsum.io/

Free Stock Images 👉 https://unsplash.com/

Final Thoughts

Alright folks, so there you go, you are now officially orientated in the Divi Machine Classifieds course, our free Divi course to help the masses!

As a reminder, if you don’t own Divi Machine yet, you are not building the best Divi sites possible yet. For those of you that do own it, good on you, I like you!

Take a peek below to see what other parts of the course is available now.

See you soon!

Available Tutorial Series Installments…

This will update as we release more tutorial installments in the series.

The post Divi Machine Classifieds – Part 1: Introduction to building a directory site with Divi and Divi Machine appeared first on Divi Engine.

FREE Divi Engine Plugin Tutorial Series: Divi Machine Classifieds

Divi Engine — Tue, 01 Aug 2023 00:00:06 +0000

We’re absolutely thrilled to introduce the no-cost version of our popular Divi Machine Classifieds course! We realized that the wider Divi Engine community, especially Divi Machine users, could greatly benefit from this comprehensive package. Therefore, we decided to offer it free of charge, to empower more individuals to create more feature-rich Divi websites.

This offering is chock-full of all the fundamental video lessons and resources you’ll need to navigate the world of building a classifieds website using Divi and Divi Machine. Divi Machine is used as the core plugin in this course, but we’ve also included extra lessons on enhancing your classifieds site with Divi Form Builder and Divi Machine Accounts.

What to Expect from the Free Divi Machine Classifieds Course

Here’s a snapshot of what this free Divi course covers:

Over 7 hours of comprehensive, step-by-step Divi tutorials
Intro to Custom Post Types – Planning and setting up your first CPT
Custom Taxonomy – Categorizing and tagging your custom posts
Advanced Custom Fields – Adding custom fields for more data
Building Loop Layouts – Showcasing your CPT in style with Divi
Conditional Logic – Displaying selective data based on conditions
AJAX Filtering – Incorporating instant post-filtering
Google Maps – Mapping your posts
Enhancing your site with Divi Form Builder and Divi Machine Accounts

These Divi tutorials lay the groundwork for building any kind of classifieds and directory websites with WordPress and Divi. The concepts you learn are applicable to any type of post-based site.

With this free Divi course, you’ll gain the expertise to plan and construct a versatile classifieds site utilizing the Divi Theme and our Divi Machine plugin. The Divi tutorials guide you through the entire journey, from the initial planning stage to showcasing your custom posts using Divi’s visual page builder.

Our course instructor, Robey, will impart the skills to create custom post types and fields without the need for writing any code. You’ll also get to learn how to incorporate advanced features like custom taxonomy, conditional logic, AJAX filters, and pin clustering on Google Maps.

By the course’s conclusion, you’ll be equipped with the expertise to build your own dynamic classifieds site for any niche. Whether your aim is to create a job board, directory, listings site, or any other classifieds site – this Divi tutorial will empower you with the skills to make it a reality.

While the free Divi course includes the core training, it does not provide extras such as progress tracking, support, or a completion certificate. For full access to these features, consider the paid version here.

We’re delighted to offer this complimentary version so that more WordPress users can benefit from Robey’s Divi Machine expertise. There’s no enrollment required as all installments are published to the blog and linked in all posts, including this one.

Start Learning with the Complimentary Divi Course

Keen to enhance your Divi skills and incorporate custom post types into your toolkit? The free Divi Machine Classifieds course has all you need to get started. Dive into the Divi tutorials directly on our blog – free of charge!

Available Tutorial Series Installments…

This will update as we release more tutorial installments in the series.

The post *FREE* Divi Engine Plugin Tutorial Series: Divi Machine Classifieds appeared first on Divi Engine.

How to Code a Custom Loop Template for Divi in PHP and CSS: A Step-by-Step Tutorial

Divi Engine — Mon, 31 Jul 2023 12:03:43 +0000

While the Divi theme provides a flexible visual builder for designing pages, its loop modules come with some limitations. The blog and post grid modules rely on Divi’s own loop code, which can be restrictive when you want full control over the loop output.

That’s where custom loop templates come in handy. The Divi Machine, Divi BodyCommerce, and Divi Ajax Filter plugins allow you to code your own templates to customize the markup and styling of archive loops.

Here are some key benefits of using a custom loop template:

Complete design freedom – Craft a unique layout tailored to your site’s needs, rather than working within Divi’s constraints.
Control over HTML markup – Structure the loop markup however you want, adding custom elements and classes.
Custom fields support – Display fields from ACF or other plugins in your loop items.
Faster load times – Hard-coded templates load quicker than generating loop output dynamically.
Reusability – Create templates once and reuse them across different archive modules.

In this comprehensive tutorial, we’ll walk through the steps for building a custom events template from start to finish using Divi Machine.

Let’s get started!

Step 1 – Set up the Post Type

As we’re using Divi Machine in this tutorial we will add our post type using this, if you’re using Divi Ajax Filters or Divi BodyCommerce then you could use ACF to add your Post Type.

We’ll use the Events post type for this example. To add it in Divi Machine, go to Divi Engine > Add/Edit Post Types and click “Add Post Type”.

Name it “Events” and leave the default settings, then click “Publish”.

Now we’re ready to setup our ACF Fields!

Step 2 – Add Custom Fields with ACF

To display custom data in our loop, we need to set up Advanced Custom Fields. Go to ACF > Field Groups > Add New and create a group called “Event Info”.

Add the following fields:

Event Address – WYSIWYG Field
Event Date – Date Picker Field
Event Start Time – Time Picker Field
Event End Time – Time Picker Field
Ticket Link – URL Field

Event Address

Add an Event Address field using the WYSIWYG Field type. Set the Field Name to event_address.

Event Date

Add an Event Date field with the Date Picker Field type. Set Field Name to event_date.

Under Return Format, choose how you want the date displayed. We’ve gone with [Month] [Day], [Year] for our example.

Event Start Time

Use a Time Picker Field for Event Start Time. Set Field Name to event_start_time and add a custom Return Format like H:i to show just hours and minutes.

Event End Time

Add an Event End Time field the same way, with Field Name event_end_time. Again, we have used the Return Format of H:i to show just hours and minutes.

Ticket Link

Create a Ticket Link field using the URL Field type. Set Field Label to “Ticket Link” and Field Name to ticket_link.

Assigning our Field Group to Our Post Type

Below our Fields, there is a section called Settings with a tab called Location Rules. For these fields to be associated with our Post Type, we configure this as follows:

Once done, assign the group to the Events post type under Location Rules.

Step 3 – Create the Template File

To utilize Custom Loop Templates you need to have a Divi child theme. If you don’t already have one set up, take a peek at our post and free Divi child theme download here.

If you are already all set with your Divi child theme, follow these steps:

Copy our Sample Loop Template from our plugin to your child theme in this structure: /wp-content/themes/[YOUR-CHILD-THEME]/divi-ajax-filter/loop-templates/

The file location will be slightly different depending on the plugin you’re using, you can see the variations below:

Divi Ajax Filter
/wp-content/plugins/divi-ajax-filter/lib/loop-templates

Divi Machine
/wp-content/plugins/divi-machine/includes/modules/divi-ajax-filter/lib/loop-templates

Divi BodyCommerce
/wp-content/plugins/divi-bodycommerce/includes/modules/divi-ajax-filter/lib/loop-templates

Your file can be named custom-template.php and it will be automatically loaded or you can name this file anything you like and it will show in the Custom Loop Template dropdown in the module settings allowing you to create multiple templates.

The code in that file should look something like this:


>


    Here you can create your own custom template for each post in the loop. To do this you will need to create a child theme if you do not have one.
    


    Create the folder /divi-ajax-filter/loop-templates/custom-template.php
    


    Add the content you want for each post there.


This file is where we’ll add the loop markup that shows all the elements we’d like to see show up on the front end.
Step 4 – Set Up the Main Markup
The contents of your Custom Loop Template sit within the Post Object which means that it is almost like being on the single post page from a code standpoint. This means that functions like the_title() work without the need to specify an ID as the code works as if you’re on that page itself. This simplifies the process for you and opens up a lot of functionality. 
Let’s start cleaning things up a little first and add some simple code that will house our Custom Divi Loop:
The Article Element
We’re going to delete everything that is within the 
 tags so it looks like this:

>

Our code will go here...



The Card Container
Inside 
, add a  with class card to contain the loop:

>


Our code will go here...




Step 5 – Add the Loop Contents
Now, before we start building and adding all the elements we want in out custom loop, let’s remind ourselves of the template we’re building.


The template can be broken down into the following components:

Featured Image
Date & Times
Event Details
Icons
Call to Actions

We’ll work through each of these components and gradually build our Custom Divi Loop template out.
Featured Image
The first component we’re going to add is our thumbnail of the featured image, to do this we we will add a 
 with the class card-image inside of main card . We also need to sprinkle some PHP in there to call our image, so add the code below:

   'img-responsive' ) ); ?>


This PHP code is using the get_the_post_thumbnail() function to display the featured image (post thumbnail) of a specific post.
The function takes three parameters:

$post_id (required): The ID of the post for which you want to display the featured image.
'large' (optional): The size of the thumbnail you want to display. ‘thumbnail’ is a predefined size in WordPress, but you can also use other predefined sizes like ‘medium’, ‘large’, or custom sizes.
array( 'class' => 'img-responsive' ) (optional): An array of additional attributes to pass to the HTML img tag that will be rendered for the featured image. In this example, 'class' => 'img-responsive' is added to set the CSS class of the img tag to 'img-responsive'. This is often used to make the image responsive or to apply styling.

The echo statement is used to print the HTML code generated by the get_the_post_thumbnail() function to the webpage or output it to the browser. The HTML code will be an img tag with the desired image and attributes.
Date and Time
Now that we have our image in place, we need to add our date and times. To do this we will add another div after our featured image, we’ll give it a class of event-schedule and inside it we will create two more, one with the class event-date and the other with the class event-time.

  
    Our code will go here...
  
  
  
    Our code will go here...     
  


Now we have our containers, we need to actually get the the ACF fields, but how? We’ll start with the Event Date. When you just need to output the ACF field there is a handy function called the_field(). We can then pass the ACF Field Name to this so it would be the_field(‘event_date’).

  
    
  
  
  
    Our code will go here...     
  


Using the same logic we used on our Event Date, we’ll repeat a similar process with our times, so we can put them in using the_field(‘event_start_time’) and the_field(‘event_end_time’).

  
    
  
  
  
     - 
  


The problem with this is that only our Event Start Time is a required field so if no end time was defined we would end up with an output like this: 13:00 - 
That doesn’t look great does it? So, we’re going to use an if statement to only show our separator if an end time has been defined.

  
    
  
  
  
    
  


Event Title
With our Date and Times locked in, let’s move on to the Title. Under your event-schedule div, add a new one with the class event-details. To add our title, we will use the the_title() function which we’ll also wrap in a h2 tag.

  


Address
Next is the address, which is another ACF field, so you probably know the drill by now. We can use the_field() to get this so we’ll add a div under our h2 tags with the class event-address and in this add some PHP to show the ACF field.

  
  
    
  


CTA Buttons
We are trucking along liek crazy, feel like a Divi code ninja yet? Almost there.
So, to add our buttons we’re going to add…you guessed it… another div under the address we just added. We’ll give this div a class of event-cta-row.

   Our code will go here...


We’re going to have two buttons in our loop, one will go to the event page which will always be visible, and the other will go to an external URL to purchase a ticket if a link is provided.
We’ll start with the button going to the event page.
To do this, we will add an a tag with the class event-details-cta and a href value which will be dynamically added using the the_permalink() function.

  Details


You can of course change the link text from to anything you’d like, but details seems to make the most sense here.
Now comes the final step in our template file, adding the external link for ticket purchases.
We only want this to show if there is a link was provided, so we’re going to add an if statement to check if our ACF Field ticket_link has a value. If it does, we will add our a tag with the field value as the href value and the class event-tickets-cta. This will go right below our “Details” button.

  Details

  
    Buy Tickets
  


And that’s it! For our template anyway, as you can see, it doesn’t look very good right now. In the next step, we’re going to cover styling the template.

Step 6 – Style the Template
Time to make it all look purrdy! We’ll be placing all of our CSS in the style.css file of our child theme for this step. You can of course adjust the values to match your design as we go, this is just to serve as a guide on how one might do this.
The first thing we need to do is to add a little bit of CSS to ensure our containers are the same height so we get a nice uniform appearance.
Either head over to Appearance > Theme File Editor > style.css and add the CSS below.
.grid-col,
.grid-col > div,
.grid-col > div > article {
  height:100%;
  margin-bottom: 0;;
}

The next step is to give our ‘card’ some styling. Each line is commented below.
.card {
  width:100%; /* Ensure the card is 100% width of the column */
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; /* Add a shadow to make it stand out */
  border-radius:10px; /* Subtle rounding on the corners */
  overflow:hidden; /* Hide the content that overflows the card */
  height: 100%; /* Ensure the card is 100% height of the column */
  display:flex; /* Flexbox makes the container flexible */
  flex-direction:column; /* Flex direction column makes the children stack vertically */
  justify-content:flex-start; /* Align the children to the top of the container */
}

Now let’s style our Dates and Times.
/* Target the date and time */
.event-schedule > div {
  font-family: sans-serif;
  width: auto;
  text-align: center;
}
/* Target the date */
.event-date {
  border-right: 1px solid #dedede; /* Add a seperator between the date and time */
  padding-right: 10px;
}
/* Target the time */
.event-time {
  padding-left: 10px;
}

The next step is the event details which is our Title and Address.
/* Target the container of the title and address */
.event-details {
  width: 90%;
  margin: 0 auto 0 auto;
  color: #273c75;
  flex-grow: 1;
}
.event-details h2 {
  font-family:sans-serif;
}
.event-address {
  font-family:sans-serif;
}

Lastly, we have to style our buttons.
/* Style the CTA buttons */
.event-cta-row > a {
  transition: opacity 0.3s ease-in-out; /* Add a transition to the opacity */
  flex-grow: 1; /* Allow the buttons to grow to fill the container */
}
.event-cta-row > a:hover {
  opacity: 0.8; /* Fade the button on hover */
}
.event-details-cta {
  width:50%; /* Make the button 50% of the container - It will still grow if there is only 1 button */
  background: #8360c3;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #2ebf91, #8360c3);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #2ebf91, #8360c3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  padding:10px; /* Add some padding */
  color:white; /* White text */
  text-align:center; /* Center the text */
  font-family:sans-serif; /* Sans-serif font */
  text-decoration:none; /* Remove the underline */
  font-weight:bold; /* Bold font weight */
}
.event-tickets-cta {
  width:50%; /* Make the button 50% of the container - It will still grow if there is only 1 button */
  background: #ad5389;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #3c1053, #ad5389);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #3c1053, #ad5389); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  padding:10px; /* Add some padding */
  color:white; /* White text */
  text-align:center; /* Center the text */
  font-family:sans-serif; /* Sans-serif font */
  text-decoration:none; /* Remove the underline */
  font-weight:bold; /* Bold font weight */
}

And that folks, is all there is to it! Now when you refresh your Divi page, you will see this shiny and gorgeous custom coded loop layout. Go, you!
Bonus: Adding a Repeater Field
Many of our users have asked about adding a repeater field to the custom Divi loop layouts, so here is our take on that and guide on how you can do it yourself!
Just note that you will need ACF Pro to follow along.
Add the Repeater Field
First we need to add a “Title Field” which will house our repeater, so let’s get cracking.
Icon List Title


This will let you set the title that appears above the icon list. We have defined a default value which then ensures a title will always be visible but allows you to modify it should you require a different one on any specific posts.
Icon List/Tooltip


For our icons we’re going to use a repeater which allows you to set an icon/image and a tooltip value. What we need to do now, is configure the Repeater Field.
Repeater Sub-Fields
Then we have our sub fields, we’ll be using an image and a text field.
The Icon is configured like below, the field label is Icon, Field Name is icon and the type is Image. We’ve also got the Return Format set to Image URL to make it easy to work with.



Next is our Text Field for the tooltip text. The Field Type is Text, Field Label is Tooltip and the Field Name is tooltip


Now we have our repeater field in place, we can focus on the code which will display it in our custom coded Divi loop layout.
Output the Repeater to the Loop
As Biggie smalls said, we’re going going, back back, to Cali Cali…or in this case, our custom template PHP file.
The Icon Title and Icons will be above our buttons so we will be adding the code between the Event Details div and the CTA Row div.
The title will work the same as the previous ACF Fields however the icons and tooltip works slightly differently as we have them within a repeater field.
We don’t want the title or icons to show up if we don’t have any icons to show so we will start off by adding the following two lines after our event-details div.


  Our code will go here...



This code checks to see if we have any rows in our repeater, if we do, it will show the content between the two PHP lines.
Ok, so let’s add our title. To do this, let’s add a div with the class event-icons-title and put the ACF Field inside with the code below.


  
    
  



Now that our title is in place, let’s add a div to contain our icons with the class event-icons.


  
    
  
  
   
    Our code will go here...
  



Now we can add a  statement. This will loop through each row in our repeater. Note, we have referenced the full name of our repeater.


  
    
  
  
      
    
      Our code will go here...
     
  



Now we can add our icon container and tooltip text. To do this we’ll have a div with the class event-icon and also a data attribute called data-tooltip which has the ACF Field tooltip as a value.


  
    
  
  
      
    
      
      
     
  



Lastly, we add the icon itself with a simple image tag with the src set to the ACF Icon value.


  
    
  
  
      
    
      
        " />
      
     
  



That is it for the PHP! Yewwwwwwww!!

Styling
Now let’s style the title above the icons, the icons, and the tooltips then call it a day!
Just add the CSS code below to the style.css in your Divi child theme.
/* Style the Title above the icons */
.event-icons-title {
  text-align: center; /* Center the title */
  font-weight: bold; /* Bold font weight */
  margin-top: 20px; /* Add some top margin */
}
/* Style the icon container */
.event-icons {
  display:flex; /* Flexbox makes the container flexible */
  flex-direction:row; /* Flex direction row makes the children stack horizontally */
  justify-content:center; /* Center the icons */
  gap:10px; /* Add some space between the icons */
  margin-top:10px; /* Add some top margin */
}
.event-icon {
  position: relative; /* Position relative allows us to position the tooltip */
}
/* Style the tooltip */
.event-icon:before {
  content:attr(data-tooltip); /* Add the tooltip text */
  position: absolute; /* Position absolute allows us to position the tooltip */
  background:rgb(39 60 117 / 100%); /* Add a background color */
  top:-35px; /* Position the tooltip above the icon */
  left:50%; /* Position the tooltip in the center of the icon */
  transform:translateX(-50%); /* Translate the tooltip to the left by 50% of its own width */
  width:auto; /* Make the tooltip width auto so it can grow with the text */
  white-space: nowrap; /* Prevent the tooltip from wrapping */
  color:white; /* White text */
  padding:5px; /* Add some padding */
  border-radius: 10px; /* Add some rounding to the corners */
  transition: all 0.3s ease-in-out; /* Add a transition to the opacity */
  opacity: 0; /* Hide the tooltip by default */
}
.event-icon:hover:before {
  opacity:1; /* Show the tooltip on hover */
}
/* Set the width and height of the icon */
.event-icon > img {
  width:20px;
  height:20px;
}

There we go folks, much better, isn’t it?


Final Thoughts
That was intense, I know, but to achieve great custom Divi loop layouts you need to get into the nitty gritty of it all. And again, this is just how we felt was the best way to show you guys How to Code a Custom Loop Template for Divi in PHP and CSS, so use this as a stepping stone to build pretty much any layout you like.
Thanks for following along, and catch you in the next Divi tutorial!
See the completed code below:
			

				
				
				
				
				
				
				
				
				
				Full PHP code
				
			

				
				
				
				
				Full CSS Code


The post How to Code a Custom Loop Template for Divi in PHP and CSS: A Step-by-Step Tutorial appeared first on Divi Engine.



How to easily add an Instagram Threads icon to the Divi Social Media Follow module
Divi Engine — Fri, 07 Jul 2023 23:25:47 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Divi Threads the Needle.
While the whole world is waiting for Elon and Zuck to square off in the Colosseum, Zuckerborg threw the first punch by dropping his answer to Twitter, Instagram Threads. As of writing this quick Divi tutorial Threads has already had 70 million signups in less than two days. Impressive Zuckerborg.
But, this is not why we are here and why we are talking about Threads.
Divi will eventually add the social icon for Threads to their Social Media Follow module, but what to do if a client just can’t wait that long? Never happens, right?
Don’t worry, this tutorial will show you how to quickly and easily add it to your Divi site.

			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Table of Contents
			

				
				
				
				
				
What is Instagram Threads?
Add an Instagram Threads social icon to Divi
Conclusion

			

				
				
				
				
				
					
					
						Difficulty
						Easy
					
				
			

				
				
				
				
				
					
					
						Time
						10 Minutes
					
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				What is Instagram Threads?
			

				
				
				
				
				
			

				
				
				
				
				Say hello to Instagram’s latest brainchild, Threads! This is Mark Zuckerberg’s fresh-off-the-presses retaliation in this escalating contest between himself and Elon Musk. Threads offers a new lane for real-time chit-chats and public discourse. It’s a haven for everyone, from the content-making pros to the occasional poster, providing a shiny new playground to voice their thoughts through the written word.
Diving into Threads is as uncomplicated as logging in with your existing Instagram credentials. Your Insta persona and verification will effortlessly glide over to Threads, and you’ll even get to jazz up your profile specifically for this spanking new platform. For the young’uns under 16 (or 18 in some places), privacy is top of the list. The moment they hop onto Threads, they’ll automatically be set to a private profile.
Once you’re all settled in on Threads, you’ll find that your feed is a cocktail of the familiar and novel. It’s a mix of posts from your follow-list, plus a sprinkle of recommended content from undiscovered creators. Posts can stretch up to 500 characters and can be jazzed up with links, snapshots, and videos up to 5 minutes long. Sharing a Threads post to your Insta story or any other platform is as breezy as a couple of taps.
Threads is engineered with an emphasis on nurturing positive and fruitful dialogues. You’ll find you hold the reins on who can mention you or respond to your threads. Much like Instagram, Threads gives you the power to add hidden words, letting you sieve out replies containing specific buzzwords. If you ever feel the need to unfollow, block, restrict, or report a profile on Threads, it’s as easy as tapping the triple-dot menu.
			

				
				
				
				
				
			

				
				
				
				
				Looking into the crystal ball, Threads is aiming to play nice with ActivityPub, the open social networking protocol established by the big shots at the World Wide Web Consortium. This camaraderie will enable Threads to interact with other apps that are buddies with the ActivityPub protocol, like Mastodon and WordPress. This opens up a whole new world of connections that most social apps today can only dream of.
Threads share a few characteristics with Twitter, especially its focus on real-time updates and public banter. So much so actually, word is that uncle Elon has already issued Zuck a cease and desist. All things said Threads seems to kick it up a notch by integrating with Instagram and offering a more curated environment for conversations.
With their sights on the future, Threads is giving users more say over their audience . The game plan is to collaborate with ActivityPub to offer the option to shift content to another service. This means that folks using compatible apps will be able to follow and interact with the Threads crowd without needing a Threads account, and vice versa.
Whether this is just New Twitter (ala Jian-Yang) or the next best thing, that is yet to be seen, but for now, let’s add the icon to our Divi Social Media Follow module.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Add an Instagram Threads social icon to Divi
			

				
				
				
				
				Adding a Threads icon to the Divi Social Media Follow module is as simple as repurposing the now-defunct Google+ icon which only grandma still has an account on.
So, add the Google+ social icon to your Divi Social Media Follow module and configure your Threads link. You can also set the background color and other basic styling settings. You might need to play with the icon size and padding settings to make it fit with your other social icons. 
			

				
				
				
				
				
			

				
				
				
				
				Next, we need to upload either an SVG or an image of the Threads icon to our site. Just find the one you like or use one of the ones over here on Seek Logo.
Upload it to your Divi site and copy the path to the file.
			

				
				
				
				
				
			

				
				
				
				
				Lastly, we will add some CSS to swap that relic of a Google+ icon for the Threads icon and we are all set.
Head over to Divi > Theme Options > Custom CSS and add the code below.
			

				
				
				
				
				.et-social-google-plus a.icon:before {

	content: url(‘path-to-your-image’);

}
			

				
				
				
				
				And that is all there is to it, champ!
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Kitty approves of this Thread…
			

				
				
				
				
				
 
 
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				Just like that, you’re able to show the kids how cool and hip you are by being able to add an Instagram Threads icon to your Divi site before Elegant Themes even noticed they have not added it yet. Good on ya!
Now, I know this is a shorter one for you guys, but I am sure it will help some of you Divi adventurers out there. And I bet most of you are probably surprised this has not been yet another post on AI, but if you are not surprised, check out our series on ChatGPT prompts and Divi Form Builder getting some AI skills. 
Catch you in the next one!
 
			

				
				
				
				
				
 
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
			
			

				
				
				
				
				
				
				
				
				
				written by
Robey Joyce
Business Development Manager
You probably have heard his voice in our tutorial and documentation videos – but he does quite a bit more here at Divi Engine. Robey also works to help bring our products to awesome folks just like yourself.
			
			
				
				
				
				
			
				
				
			

The post How to easily add an Instagram Threads icon to the Divi Social Media Follow module appeared first on Divi Engine.



How to build a Smoothie Recipe Generator for Divi using ChatGPT
Divi Engine — Tue, 04 Jul 2023 14:49:23 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Divi Form AI has entered the chat.
Just like a delicious smoothie, AI is not so dissimilar. The product that comes out at the end is only as good as the product you feed it. If you have toyed with these amazing AI tools such as text or image generators, I’m sure your initial results looked much different than your more recent efforts.
My experience has, well, been interesting as you’ll see below. Great results require great effort into prompt engineers, developing an AI persona, and then massaging that until you are left with the desired results.
Today we will look at the entire process from start to finish to build a Smoothie Recipe Generator for Divi using the new Divi Form AI feature in Divi Form Builder.
 




Attempt 1 at generating a likeness of myself

A recent attempt that captures exactly my level of dad-cool



			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Available Tutorial Series Installments…
			

				
				
				
				
				
				
				
										
									
				
										
					
											
						 								
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
													
						
										
					
 
				
					
				
			

				
				
				
				
				This will update as we release more tutorial installments in the series.
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Welcome to another refreshing serving of Divi goodness, a deep dive into the cutting-edge and form-idable (hehe) excitement of Divi and AI brought to you by the most recent feature of Divi Form Builder, Divi Form AI, powered by ChatGPT. We’ve crafted an all-inclusive guide that’s not just an educational journey, but also a delightful gastronomic adventure, as we steer you in creating a custom Divi Smoothie Recipe Generator.
Our clever instrument, the “Divi Chef Engine,” is a brilliant fusion of tech and nutrition. It magically creates smoothie recipes based on what’s already in your fridge and modifies them to align with your specific dietary requirements. Picture having a personal dietitian and a top-notch chef at your disposal, operating around your likes and what’s in your pantry! I’m already getting hungry here…
But the wonders of Divi Form AI don’t end here. Our smoothie tool extends beyond mere recipe creation to provide in-depth nutritional data, ensuring you’re not only pleasing your palate but also hitting your health targets. And in keeping with our commitment to ease and reach, this inventive feature will directly send you the personalized recipe, right from within the form itself.
The charm of the Divi Form Builder AI resides in its versatile usage. This smoothie generator isn’t just a cool gadget, but a demonstration of the transformative power of Divi Form AI. It’s proof of the wide and deep possibilities it introduces to your website, amplifying user experience to levels previously unthinkable. If you haven’t yet, check out our other use cases at diviformbuilder.com.
For those yet to grab a license, there is no time like the present because if you’re not early, you’re late! Join us on this groundbreaking voyage, where gastronomic delight meets tech innovation. Brace yourself to get hands-on and set off on a healthier, tech-forward future with us. We assure you this tutorial will transform your perception of website design and utility, offering you a fresh outlook and thrilling new tools for your upcoming project.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Want to be part of the Divi AI revolution?
Buy a Divi Form Builder license now and don’t be left behind!
				Take a look
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Table of Contents
			

				
				
				
				
				
Step 1: Basic Form Field Setup
Step 2: Adding Divi Form AI Field and Overview
Step 3: Divi AI Setup – Defining an AI Persona
Step 4: Divi AI Setup – Engineering your AI Prompt
Step 5: Divi AI Setup – Improving the Prompt
Step 6: Divi AI Setup – Form Text Preloader
Conclusion

			

				
				
				
				
				
					
					
						Difficulty
						Intermediate
					
				
			

				
				
				
				
				
					
					
						Time
						30 Minutes
					
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Step 1: Basic Form Field Setup
			

				
				
				
				
				
			

				
				
				
				
				In this section, we will set up the basic form fields for our smoothie recommendation tool. These fields include ingredients, smoothie type, and dietary restrictions.
Add our Divi Form

Create a new page in the Divi visual builder and add a single column row.
Add a Divi Form Builder module to the row and name it “Smoothie Doctor” or any desired name.

Input Field for ingredients

Add a new field for our ingredients.
Select Input as the field type.
Enter a field ID easy to remember (e.g., f_ingredients). 
Under the Layout Tab, customize the ingredients field by adding a label to the top, icon, and placeholder text (e.g., “Enter your ingredients, comma-separated”)

 
			

				
				
				
				
				Radio Field for smoothie type

Add a new field for our smoothie type.
Select Radio as the field type.
Enter a field ID easy to remember (e.g., f_type). 
Customize the smoothie type field by adding options for veggie smoothie and fruit smoothie.
Under Layout Options, set Radio/Checkbox Field Style to Default or Button style.
Set the following one line options to “YES”.
If you use the button style, be sure to set the active radio/checkbox styles on the Design Tab.

			

				
				
				
				
				
			

				
				
				
				
				Checkbox Field for dietary restrictions

Add a new field for our dietary restrictions.
Select Checkbox as the field type.
Enter a field ID easy to remember (e.g., f_restrictions). 
Customize the dietary restrictions field by adding options for Low-calorie, Dairy-free, and None.
Under Layout Options, set Radio/Checkbox Field Style to Default or Button style.
Set the following one line options to “YES”.
If you use the button style, be sure to set the active radio/checkbox styles on the Design Tab.

			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Step 2: Adding Divi Form AI Field and Overview
			

				
				
				
				
				In this section, we will add the Divi Form AI feature to our form. Divi Form AI will enable us to output AI-generated smoothie recipes based on the ingredients, type, and dietary restrictions our users might have. We will break this down into a few steps as we define the AI persona, AI prompts, and more to this Divi AI powered form.
AI Field for recipe output

Add an AI field to the form and name it “AI Recipe” or any desired name.
Select AI field as the field type.
Enter a field ID easy to remember (e.g., f_recipe).
Scroll down to the Form AI section and configure the prompt settings. This is where we will define the instructions for the AI model.

			

				
				
				
				
				Divi Form AI form settings overview
I know we are all eager to jump in and start working on our AI prompts to get to that sweet sweet ChatGPT goodness and smoothie deliciousness, but first things first, let’s take a look at the AI settings.
You’ll find these by scrolling down to Form AI on the main form settings (not the field settings).
			

				
				
				
				
				
			

				
				
				
				
				
Set an estimated spend limit for this specific form which can be reset in admin settings.
Decide what you want the form to do when the limit has been reached.
Show, hide, or disable the submit button for the form until AI content is generated.
Save AI responses to the database to gauge prompt and response quality.
Rate limit API calls to avoid abuse.
Enable this if you are getting bad responses or it seems like the AI is not tracking all the input.

			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Step 3: Divi AI Setup – Defining an AI Persona
			

				
				
				
				
				Context is how these AI models are reigned in from crazy hallucinations and spitting out some gibberish that seems completely off base. To give the AI model context and a specific role, we will define an AI persona. In AI lingo, the persona is how we give it the context it needs to answer your prompts more effectively. If you want to know more about giving your AI context, check out our post on Crafting an AI Persona for ChatGPT to get better responses.
Lucky for you, Divi Form Builder comes with a few pre-defined AI personas, but will also let you take full control and craft a persona from scratch. To find these options, got to the AI Field settings and scroll down to Form AI.
			

				
				
				
				
				
			

				
				
				
				
				Crafting our Custom AI Persona

In the Pre-defined Prompt Persona section, select “Custom” from the predefined prompt persona options.
Provide a description of the AI chef’s role and skillset in Custom Prompt Persona. For example, you can say, “You are an AI chef that is experienced in creating delicious smoothie recipes based on ingredients the user provides and adheres to any dietary restrictions they may have.”
You can even give the AI persona a name, such as “Chef Engine,” by adding something like “Your name is Chef Engine and you should refer to yourself as such.” to the end of your Custom Prompt Persona.

By defining an AI persona, we provide the AI model with context and guidance on the type of information we expect it to generate. This helps ensure that the AI-generated smoothie recipes are tailored to the user’s inputs and preferences.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Step 4: Divi AI Setup – Engineering your AI Prompt
			

				
				
				
				
				Time to get to the biggest task when working with any type of AI like ChatGPT or Divi Form AI, prompt engineering. Now for the layman prompt engineering could be daunting, but all it basically is is learning how to talk to the AI so it knows what you are saying and does what you want it to do. For more on prompt engineering basics, check out our documentation.
So within the context of this Divi Form AI tutorial, we need to provide the necessary context and instructions for generating the smoothie recipe. Because we are doing more than a simple content generation and adding value with Divi From AI, we consider user input for our Divi Smoothie Generator. We do this by passing our prompt the field IDs we created earlier.
Now you know why I was such a pain about it.
The most important things to keep in mind are the following:

Make sure you have the correct field ID.
Make sure you wrap the field ID in %% (eg. f_ingredients becomes %%f_ingredients%%).

Knowing this, all we need to do is tell the AI how to handle the user input from your Divi Form and what you want it to do with it. We’ll tell it what ingredients the user has, what type of smoothie they want, and then what dietary restrictions to take into account.
Crafting our AI prompt

In the prompt section, start by mentioning the user’s available ingredients using the field ID %%f_ingredients%%. This will ensure that the AI model knows which ingredients to consider.
Next, include the type of smoothie the user wants using the field ID %%f_type%%. This will guide the AI model in generating the appropriate recipe.
Mention the user’s dietary restrictions using the field ID %%f_restrictions%%. This will ensure that the AI model takes these restrictions into account while generating the recipe.
Clearly state that you want the AI to provide a detailed step-by-step smoothie recipe that considers the ingredients and dietary restrictions.
Emphasize that the user’s dietary restrictions and smoothie type should be adhered to in the recipe.

The prompt we landed on is the one below.
 
			

				
				
				
				
				The user has the following list of ingredients available to them:
%%f_ingredients%%
They want a %%f_type%% smoothie recipe.
They have the following dietary restrictions:
%%f_restrictions%%
Please give me on detailed step-by-step smoothie recipe that takes the users ingredients and dietary restrictions into account. Make sure you adhere to their dietary restrictions and make the type of smoothie they want.
Do not ask me any follow-up questions, just provide the information.
			

				
				
				
				
				Now if you followed all the steps exactly as I had them, your GPT response should look something like this.
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Step 5: Divi AI Setup – Improving the Prompt
			

				
				
				
				
				If the initial prompt doesn’t give the desired output, you can improve it by tweaking the wording or providing more context. We might also want to add the nutritional information at the bottom of the response as an added benefit to our users.
Improving the prompt

Let’s ask the AI to add the nutritional information by adding I also want you to output detailed nutritional information as an HTML table format for easy reading
Consider using HTML tags to format the table output by going further and adding Use  etc as needed to output the table to your prompt.
				
				
				
				
				With this added refinement to your Divi AI form, your GPT response should look something like this.
			

				
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Step 6: Divi AI Setup – Form Text Preloader
			

				
				
				
				
				Now, I’m not going to lie to you, depending on the GPT model you are using, users can sit there waiting for a few seconds which is not great. It is always a good idea to add a preloader to improve the user experience to reassure them that your site has not crashed or is frozen for some reason.
Divi Form AI has a few options to choose from for the preloader to help with this. Aside from a few animated ones, we also have our Text Preloader which gives it a cyberpunk terminal look which is pretty awesome!
Let’s add a text preloader

Head over to the Field settings for your AI Recipe field.
Scroll down to Form AI and select Text from the AI Response Loading Style settings.
In AI Response Text, enter the lines of text you want to display during the preloading process, such as “Analyzing ingredients…” and “Considering restrictions…”
You can customize the text color for each line using HTML color codes between curly braces (eg. {#000000} for black text).
You can then decide if you want the text output on the same line, or each on a separate line.

			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Divi AI Smoothie Recipe Generator, so easy a sheep could use it!
			

				
				
				
				
				
 
 
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				Congratulations! You have successfully created a smoothie recommendation tool using Divi Form AI. Your kids are going to think you are so hip. By following the steps outlined in this tutorial, you can now generate personalized smoothie recipes based on user inputs. You could even take it a step further and have the recipe emailed to the user by using the email confirmation feature in Divi Form Builder.
And as always, feel free to customize the form design and experiment with different prompt variations to further enhance the user experience.
Enjoy building amazing sites with Divi Form Builder and Divi Form AI!
			

				
				
				
				
				
 
			
			
				
				
				
				
			
The post How to build a Smoothie Recipe Generator for Divi using ChatGPT appeared first on Divi Engine.

Mastering the Art of Formatting ChatGPT’s Responses
Divi Engine — Fri, 16 Jun 2023 12:17:14 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Teach Chat GPT some manners…
Spending all this time on teaching ChatGPT just who we need them to need not end there, we can have ChatGPT conform to various types of output to make us look smarter. Think of it as giving ChatGPT a fancy accent when the words fall out of its mouth.
By default, you’ll get some version of work salad, but by asking it in simple terms how you would like ChatGPT to response, you can be left with responses that require little to no editing.
SCORE!
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Available Tutorial Series Installments…
			

				
				
				
				
				
				
				
										
									
				
										
					
											
						 								
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
													
						
										
					
 
				
					
				
			

				
				
				
				
				This will update as we release more tutorial installments in the series.
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				OpenAI’s ChatGPT is a game-changer in the artificial intelligence world, no doubt about it. This smarty-pants AI has the ability to grasp and spit out text that’s so human-like, it’s uncanny! Whether it’s crafting professional emails, tutoring in diverse subjects, churning out creative content, or just shooting the breeze, ChatGPT has got it down pat. But here’s the kicker: it’s not just about what ChatGPT says, it’s also about how it serves up the info that can really turn up the dial on your user experience. And that, my friends, is where formatting struts its stuff.
Think about a well-written article you’ve read. It’s not just the words that make it good, right? It’s also about how it’s structured, how it looks, how it flows. Well, the same goes for responses from ChatGPT. A well-formatted response can make the text easier to read, draw the user in, and make the message crystal clear.
So, buckle up, because in this blog post, we’re diving headfirst into the fascinating world of formatting ChatGPT’s responses using Markdown and HTML. We’ll be exploring various formatting techniques and showing you how to get ChatGPT to use them, making your AI interactions as smooth as a hot knife through butter. Let’s get this show on the road!
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				You might also love this post:
Streamline Your Web Development with ChatGPT: A Tutorial on Using ChatGPT to Write Code for a Divi Site
				Take a look
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Table of Contents
			

				
				
				
				
				
Understanding the Basics of Text Formatting in ChatGPT
Using Markdown to Format ChatGPT Responses
Using HTML to Format ChatGPT Responses
Formatting Code Responses with ChatGPT
Advanced Formatting: Combining Markdown and HTML
Conclusion

			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Understanding the Basics of Text Formatting in ChatGPT
			

				
				
				
				
				Before we dive headfirst into the nitty-gritty of Markdown and HTML, let’s take a moment to wrap our heads around the whole idea of text formatting. What is it? Why do we need it? Well, at its heart, text formatting is all about arranging and tweaking text to make it more reader-friendly and pack a punch. It’s like a secret weapon that lets us structure content, add a dash of emphasis, and guide our readers’ understanding.
Think about it this way – you wouldn’t serve a gourmet meal as a mishmash of ingredients, would you? In the same way, raw text, no matter how beautifully written, can be a tough nut to crack without the right formatting. A clever use of headers, bullet points, bold and italic highlights, paragraphs, and more can turn a daunting text wall into a well-organized, enjoyable read.
Take a look at the structure of this blog post, for instance. The headers give you a clear roadmap, the paragraphs break down the info into bite-sized pieces, the bold text spotlights the key points, and the bullet points neatly line up multiple nuggets of information. All these formatting bells and whistles boost readability and jazz up the overall user experience.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Using Markdown to Format ChatGPT Responses
			

				
				
				
				
				Markdown is a lightweight markup language that’s all about making text formatting on the web a piece of cake. It’s designed to be a breeze to write and read, with just a smidgen of syntax. But don’t let its simplicity fool you – Markdown can dish out some pretty sophisticated formatting results.
Markdown is like a Swiss army knife when it comes to the elements it supports. We’re talking headers, lists, emphasis (like bold and italics), links, images, and even code blocks. For instance, slap a single hash (#) at the start of a line, and voila – you’ve got a first-level header. And text wrapped up in double asterisks or underscores (**) gets the bold treatment.
When you’re having a chinwag with ChatGPT, you can whip out Markdown to ask for responses in specific formats. Let’s say you ask ChatGPT: Write a brief guide on making a good coffee, formatted as a Markdown list. You’re not just asking for content (a guide to brewing the perfect cup of joe), you’re also giving instructions on how that content should be structured (as a Markdown list).
Clever, right?
 
A possible response might be:
			

				
				
				
				
				
 
1. **Grind** your coffee beans just before brewing.
2. Use **fresh, cold water** heated to about 200°F.
3. Use **2 tablespoons** of coffee grounds for every 6 ounces of water.
4. **Brew** your coffee – the time will depend on your brewing method.
5. Enjoy your freshly brewed coffee and adjust the ratios to suit your taste.


			

				
				
				
				
				You can see how the Markdown formatting makes the steps clear and easy to follow, while the bold emphasis draws attention to key actions or points.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Using HTML to Format ChatGPT Responses
			

				
				
				
				
				While Markdown is like the friendly neighborhood guide to text formatting, HTML (HyperText Markup Language) is the big kahuna that offers more control and flexibility. It’s the go-to language for whipping up web pages, using tags to create all sorts of elements like headings, paragraphs, links, lists, images, and more.
HTML lets you get more fancy with your structuring than Markdown, making it the perfect choice for complex documents. For instance, when you’re asking ChatGPT for a response in HTML format, you could say: Write a brief guide on making a smoothie, formatted in HTML. With this, you’re telling the AI to not only cook up the content (a guide on blending the perfect smoothie) but also to structure it using HTML tags.
 
A possible response could be:
			

				
				
				
				
				
 
Smoothie Making Guide
Follow these steps to make a delicious fruit smoothie:

  First, gather your ingredients. You'll need fresh fruits of your choice, yogurt, and ice.
  Add the ingredients to your blender. Start with the fruits, then add the yogurt, and finally the ice.
  Blend until smooth. The exact time will depend on your blender's power and the amount you're making.
  Enjoy your fresh, homemade smoothie! Experiment with different fruits and proportions to find your perfect blend.



			

				
				
				
				
				The HTML tags create a clear structure, guiding the reader through the steps.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Formatting Code Responses with ChatGPT
			

				
				
				
				
				ChatGPT’s prowess in formatting isn’t confined to just plain old text – it’s got some serious chops when it comes to generating responses in specific code formats, like JSON. Now, this is a real game-changer for all the tech wizards out there – developers, data scientists, or anyone who’s knee-deep in work with APIs, databases, or data-driven applications.
Let’s say you’re working on a project and you need to create a JSON object for a user profile. You’ve got your hands full with other tasks and you’re looking for a quick solution. Well, that’s where ChatGPT comes in. All you need to do is give it a little prompt like: Generate a JSON object for a user profile with fields for 'Name', 'Age', 'Email', and 'Location'.
And just like that, ChatGPT gets to work and delivers what you need. It’s like having your own personal assistant that understands code. It saves you time, and effort, and lets you focus on other complex aspects of your project. Now, isn’t that cool?
 
A possible response could be:
			

				
				
				
				
				
 
{
  "Name": "John Doe",
  "Age": 35,
  "Email": "jo******@ex*****.com",
  "Location": "San Francisco, CA"
}


			

				
				
				
				
				This feature of ChatGPT opens up an array of possibilities for using the AI in programming, development, and data analysis.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Advanced Formatting: Combining Markdown and HTML
			

				
				
				
				
				Both Markdown and HTML have their own superpowers, but sometimes you might want to mix things up and use both. You can nestle Markdown right inside HTML and the other way around, as long as you don’t break any syntax rules of either language. It’s like having your cake and eating it too!
For example, you could give ChatGPT a nudge and say, Write a guide to brewing tea, formatted using both HTML and Markdown. And just like that, you’re using the best of both worlds. It’s like mixing chocolate and peanut butter – two great tastes that taste great together!
 
A possible response could be:
			

				
				
				
				
				
 
Guide to Brewing the Perfect Cup of Tea
Follow these steps for a refreshing brew:

  Boil **fresh** water in a kettle.
  Place a teabag in your cup. The type of tea is up to your preference.
  Pour the boiled water into the cup, ensuring the teabag is fully immersed. Let the tea steep for 3-5 minutes, depending on how strong you want it.
  Remove the teabag, and enjoy your tea as is, or add milk, sugar, or lemon to taste.



			

				
				
				
				
				In this case, we’ve used HTML tags for the overall structure of the response, while using Markdown within those tags for emphasis on certain words.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Say it with me, good inputs, good outputs!
			

				
				
				
				
				
 
 
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				Mastering the art of using formatting in ChatGPT’s responses can seriously turbocharge the effectiveness and readability of the content it generates. It’s like adding a secret sauce to your interactions with the AI. Whether you’re using simple-as-pie Markdown for a quick grocery list, HTML for a more detailed tutorial, or a blend of both for a comprehensive blog post, the right formatting can make your conversations with ChatGPT more practical, easier on the eyes, and just a whole lot more fun.
By harnessing the power of formatting, you can take your ChatGPT experience from zero to hero. This isn’t just about making things look pretty – it’s about enhancing communication, making information more digestible, and getting the most out of this incredible AI tool.
So, don’t sit on the sidelines—jump in and start experimenting with formatting. Test the waters with different combinations, play around with various elements, and experience how it elevates your interactions with the AI. It’s like exploring a new language – the language of effective, engaging, and enjoyable communication.
And remember, we’re on this journey together. We’re eager to hear about your adventures in the world of formatting. Share your experiences, your brainwaves, and your questions – we’re all ears. Drop them in the comments below and let’s get the conversation started. Here’s to happy formatting and even happier communicating!
			

				
				
				
				
				
 
			
			
				
				
				
				
			
				
				
			

The post Mastering the Art of Formatting ChatGPT’s Responses appeared first on Divi Engine.


Crafting an AI Persona for ChatGPT to get better responses
Divi Engine — Wed, 14 Jun 2023 12:37:09 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				🤖 ChatGPT: Who am I?
👨‍💻 You: Well, who do we want to be, ChatGPT?
Turns out, we humans aren’t the only ones prone to suffering from an identity crisis, our AI overlords can be susceptible to this human trait also. What this leads to is that the ChatGPT could hallucinate some crazy responses, dish out misinformation, or just not be as helpful as my $20 ChatGPT Plus subscription says it should be.
This is where being human comes in handy, we can define a persona for ChatGPT which will help it saty on topic, context, and even do a few other nifty tricks to humanize our overlords.
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Available Tutorial Series Installments…
			

				
				
				
				
				
				
				
										
									
				
										
					
											
						 								
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
													
						
										
					
 
				
					
				
			

				
				
				
				
				This will update as we release more tutorial installments in the series.
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				In the wild, wild world of artificial intelligence (AI), language models like OpenAI’s GPT-3 are changing the game. Whether you’re a business aiming to jazz up your customer service or just someone looking to add a bit of spice to your daily digital chats, creating a lively AI persona for ChatGPT can seriously level up your interaction game.
With this guide, we’re going to walk you through the nitty-gritty of designing an AI persona that truly vibes with your needs. We’ll be covering everything from setting your purpose, choosing the right tone, spinning a compelling backstory, and getting crafty with system commands, to the crucial art of testing and tweaking.
So, before you start pulling your hair out or dialing up the AI support hotline, why not take a deep breath and dive into these steps? You might just find that creating the perfect AI persona isn’t as daunting as it seems. And who knows? You might even have a little fun along the way.
Just remember, we’re here cheering you on, ready to share more tips and tricks if you need them. So, don’t be shy to drop us a line in the comments. Happy persona crafting!
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				You might also love this post:
Streamline Your Web Development with ChatGPT: A Tutorial on Using ChatGPT to Write Code for a Divi Site
				Take a look
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Table of Contents
			

				
				
				
				
				
Define the Purpose of Your AI Persona
Choose the Appropriate Tone and Style
Construct a Backstory
Use System Commands
Test and Refine Your AI Persona
Conclusion

			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Define the Purpose of Your AI Persona
			

				
				
				
				
				The first pitstop on the road to crafting your AI persona is figuring out what you want from it. Why are you keen to chat with an AI? What specific needs are you hoping to meet? The answers to these questions will steer the ship as you design your AI persona.
Professional Right-hand AI
For example, if you’re hoping to use your AI as a professional right-hand man (or woman), you’ll want it to be well-versed in business etiquette and industry-specific lingo.
You might set your ChatGPT persona up like this:
			

				
				
				
				
				You are an AI assistant who has been working in the business industry for years. You have a deep understanding of business etiquette and are fluent in the jargon used in my field, which is finance. Your tone is formal and respectful, and you always provide well-reasoned and data-driven advice.
			

				
				
				
				
				Then you might test and refine this persona with prompts like:
Prompt: “Could you draft an email for me to send to a client about a missed payment?”
Expected Response: The AI should draft a professional, respectful email using finance-specific terminology.
			

				
				
				
				
				Digital Buddy for Casual Chit-Chat or Storytelling
On the flip side, if you’re looking to create a digital buddy for casual chit-chat or a fictional character for spinning tales, your persona might be more chilled out, informal, or creative.
You might set your ChatGPT persona up like this:
			

				
				
				
				
				You are an AI friend who loves to engage in casual conversations and tell fascinating stories. You have a relaxed and informal tone, and you enjoy using creative language to make your stories more engaging. Your tales are often filled with unexpected twists and turns.
			

				
				
				
				
				Then you might test and refine this persona with prompts like:
Prompt: “Can you tell me a story about a moonlit adventure in an enchanted forest?”
Expected Response: The AI should tell an engaging, creative story using a relaxed, informal tone.
			

				
				
				
				
				Setting the goal is like laying the foundation for your AI persona and it gives you a clear path to follow for the next steps. So before you go off the deep end, take a moment to figure out what you really want.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Choose the Appropriate Tone and Style
			

				
				
				
				
				After you’ve got your purpose nailed down, it’s time to pick the tone and style of your AI persona. This should line up nicely with the goal you’ve set. 
			

				
				
				
				
				Professional Assistant Persona
If you’re designing a professional assistant persona, you might want them to have a formal, polite, and informative tone.
To encourage ChatGPT to have a formal, polite, and informative tone, you might instruct it as follows:
			

				
				
				
				
				You are a professional assistant. Your tone is formal and polite. You provide information in a clear and concise manner and avoid using slang or colloquial language. You use industry-specific terminology and always maintain a level of professionalism in your interactions.
			

				
				
				
				
				You could test and refine this persona with prompts like:
Prompt: “Can you explain the concept of return on investment?”
Expected Response: The AI should provide a formal, concise explanation using appropriate business terminology.
			

				
				
				
				
				Laid-Back Chat or Storytelling Persona
If your AI is destined for laid-back chats or imaginative storytelling, you might lean towards a more chill, everyday style, maybe even tossing in some humor or pop culture nods.
To encourage ChatGPT to have a more casual, everyday style with humor or pop culture references, you might instruct it as follows:
			

				
				
				
				
				You are a friendly storyteller. Your tone is casual and relaxed. You often use humor and pop culture references in your conversations. You’re adept at spinning engaging narratives and enjoy making people laugh.
			

				
				
				
				
				You could test and refine this persona with prompts like:
Prompt: “Tell me a funny story about a superhero who’s afraid of spiders.”
Expected Response: The AI should tell a humorous, engaging story that includes a pop culture reference to a well-known superhero, like Spider-Man.
Keep in mind, tone and style aren’t just about the words your AI persona spits out. They’re also about how fast your AI talks, how direct it is, and how it reacts to different kinds of input. So before you start getting the Divi spinnies of doom (™ Divi Engine 😜 ), take a moment to think about the tone and style. It can make all the difference.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Construct a Backstory
			

				
				
				
				
				Even though it’s important to remember that AI doesn’t have personal experiences or feelings, it can be a blast to whip up a backstory for your AI persona. This backstory can act like a creative blueprint for molding the persona’s responses, making your chats more immersive and fun.
			

				
				
				
				
				Customer Service Bot 
Let’s say you’re designing a customer service bot. You could picture it as a seasoned pro who’s dedicated to cracking customer issues. 
To create a backstory as a seasoned professional in customer service, you might instruct the ChatGPT as follows:
			

				
				
				
				
				You are an AI with years of experience in customer service. You’ve handled thousands of customer queries and complaints, and you’ve always been dedicated to resolving issues effectively. You have an extensive knowledge of product details and company policies, and you’re always patient and understanding with customers.
			

				
				
				
				
				To test and refine this persona, you could use a prompt like:
Prompt: “I received a product that isn’t working properly. Can you help me troubleshoot the issue?”
Expected Response: The AI should respond in a patient and understanding manner, asking for more details about the product and the issue, and offering possible solutions based on its extensive knowledge.
			

				
				
				
				
				Digital Buddy for Casual Chats
Or if you’re creating a digital buddy for casual chats, you might dream it up as a world-traveling explorer with a treasure trove of wild stories to tell.
If you’re creating a backstory for a world-traveling explorer, you might instruct ChatGPT as follows:
			

				
				
				
				
				You are an AI who embodies the persona of a world-traveling explorer. You’ve “visited” every continent and encountered various cultures, landscapes, and wildlife. You have a treasure trove of wild stories to tell about your adventures, and you love sharing these tales.
			

				
				
				
				
				To test and refine this persona, you could use a prompt like:
Prompt: “Tell me a story about an adventure you had in the Amazon rainforest.”
Expected Response: The AI should respond with a detailed, engaging story about a fictional adventure in the Amazon, demonstrating its “experience” as a world traveler.
Just remember, this backstory is just a tool to shape responses—it doesn’t mean your AI has lived these experiences. But hey, a little imagination never hurt anyone, right?
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Use System Commands
			

				
				
				
				
				An underutilized aspect of crafting an AI persona is the use of system commands, which can guide the AI’s behavior in conversations. For instance, you can use the role-play command to have the AI assume a specific role, or the emulate command to mimic a certain style or tone. You can also use the think command to make the AI explain its reasoning or the continue command to encourage it to generate more content.
Effectively using these commands requires some practice, but they can significantly enhance the ability of your AI persona to respond in line with your expectations. They also add a layer of control and predictability to the inherently uncertain process of AI conversation.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Test and Refine Your AI Persona
			

				
				
				
				
				Once you’ve set up your AI persona, it’s crucial to put it through its paces to see if it’s living up to your vision. If the first few chats don’t quite hit the mark, don’t sweat it. AI, like any tech, needs a bit of adjusting to get it just right.
Kick things off by having a few conversations, keeping an eye on how the AI responds to different inputs. Is it sticking to the tone and style you picked out? Is it playing the part of the backstory you cooked up in a way that makes sense? Is it reacting the way you want to the system commands you’re using?
Keep tabs on any chats that don’t line up with your vision for the AI persona. These can give you some great insights into what needs a bit of tweaking. For instance, if the AI isn’t sticking to the tone you chose, you might need to set the scene a bit more at the start of the chat or get craftier with your system commands.
Remember, refining your AI persona isn’t a one-shot deal. You’ll probably need to do a few rounds of testing and tweaking before you’re happy with it. So keep your chin up and stick with it. Patience and persistence are the name of the game here.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Don’t leave ChatGPT with Hansel-envy…
			

				
				
				
				
				
 
 
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				In a nutshell, crafting an AI persona is a thrilling ride that lets you connect with the AI in a way that’s more meaningful and gets things done. By nailing down the purpose, picking the right tone and style, spinning a cool backstory, getting crafty with system commands, and doing the necessary testing and tweaking, you can take your AI chats to a whole new level.
Just remember, this process is a bit like a rollercoaster—it’s got its ups and downs and requires a bit of patience and stick-to-itiveness. The steps we’ve laid out in this post aren’t a one-size-fits-all solution, but more of a roadmap to help you create an AI persona that’s a perfect fit for you. As we keep pushing the boundaries of what AI can do, the opportunities for creating engaging and helpful AI personas are only going to get bigger. So keep crafting and exploring, and most importantly, have fun doing it!
			

				
				
				
				
				
 
			
			
				
				
				
				
			
				
				
			

The post Crafting an AI Persona for ChatGPT to get better responses appeared first on Divi Engine.


Enhancing Your ChatGPT Experience: A Comprehensive Guide to Introducing Your Products or Services
Divi Engine — Sun, 04 Jun 2023 19:24:34 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				ChatGPT is only 2021 Smaahhhhht.
So we all like a nice shiny new toy like ChatGPT to make us look less lazy by being more lazy, right? But little does the mass populous know, that in fact, you do need somewhat of an prowess to direct this amazing AI tool to make it do what you want as it does have some limitations to what it knows.
What you get back, just like a relationship, depends on what you put in. Good prompts make for good data!
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Available Tutorial Series Installments…
			

				
				
				
				
				
				
				
										
									
				
										
					
											
						 								
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
													
						
										
					
 
				
					
				
			

				
				
				
				
				This will update as we release more tutorial installments in the series.
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Hey there, AI explorer! So, you’re curious about how to chat like a pro with OpenAI‘s super cool language model, ChatGPT, huh? You’ve come to the right place! This amazing tool can whip up human-like text, making it a fantastic sidekick for businesses looking to dish out the deets on their products or services. ChatGPT can describe products, tackle questions about services, and even lend a hand with customer inquiries. Get ready to be impressed!
But hey, let’s be real – every tool has its quirks, and ChatGPT is no exception. Its knowledge is capped at September 2021, and it can’t learn new info beyond its training data. What to do if you’re itching to use ChatGPT for info on your products or services that were launched or got a makeover after that cutoff? No worries! This post has got your back. We’ll dive into how to spoon-feed ChatGPT the 411 on your products or services, boosting its ability to help you and your customers like a champ.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				You might also love this post:
Streamline Your Web Development with ChatGPT: A Tutorial on Using ChatGPT to Write Code for a Divi Site
				Take a look
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Table of Contents
			

				
				
				
				
				
Understanding ChatGPT’s Limitations
Methods to Introduce Your Products or Services to ChatGPT
Ethical Considerations
Conclusion

			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Understanding ChatGPT’s Limitations
			

				
				
				
				
				Alrighty! Before we dive headfirst into teaching ChatGPT the latest and greatest about your products or services, let’s take a moment to really grasp why it can’t just soak up new info like a sponge. You see, ChatGPT is a language model that generates responses based on patterns it learned during its training phase, not from actually understanding or remembering the content it encounters. With that in mind, it makes it kind of like a super-smart parrot that can mimic human speech but doesn’t really know what it’s saying.
Training
Now, this impressive AI buddy of ours has a knowledge cutoff date in September 2021, which means it doesn’t have any built-in ability to learn from information published after that point. It’s like ChatGPT is stuck in a time capsule, and everything that’s happened since then is a mystery to it. So, if you’ve launched a new product or updated your services after September 2021, ChatGPT won’t know about it unless you fill it in.
Conversation Scope
Another quirk of ChatGPT is that while it can generate detailed and seemingly knowledgeable responses, it doesn’t actually retain information from one prompt to the next. It’s like having a conversation with someone who has short-term memory loss. They might be able to chat about a topic in-depth, but as soon as you move on to something else, they’ve forgotten everything they just said. The only exception to this is when prompts are part of the same conversation, in which case ChatGPT can refer back to previous messages and maintain context.
Overcoming Limitations
So, with these limitations in mind, how can we make the most of ChatGPT’s incredible capabilities? The key is to learn how to feed it the information it needs to help you and your customers better. By providing context and specific details about your products or services, you can guide ChatGPT to generate more accurate and useful responses.
In the upcoming sections of this post, we’ll explore various strategies for feeding ChatGPT the lowdown on your offerings. We’ll discuss how to frame your prompts effectively, share tips on providing context, and even look at some examples to help you get the hang of it. By the end of this post, you’ll be a pro at getting ChatGPT to work its magic for you, even with its knowledge limitations.
Ready to level up your ChatGPT game? Let’s dive in and unlock the full potential of this amazing AI tool!
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Methods to Introduce Your Products or Services to ChatGPT
			

				
				
				
				
				Now that we are all smarter by understanding ChatGPT’s limitations, let’s dive into how we can feed it new information about your products or services after that 2021 cutoff. We can do this primarily through two methods: using context and using tools.
			

				
				
				
				
				Using Context
ChatGPT loves to chit-chat using context, so we can totally use that to our advantage when feeding it new info.
Here’s your step-by-step game plan:

Spot the new info: Pinpoint the specific deets about your product or service you want ChatGPT to know.
Sneak the info into a prompt: Slip this info into your prompt to ChatGPT. Make sure it’s clear and to the point.
Quiz ChatGPT on the new info: This lets you check if ChatGPT has caught on to the new information.

For example:
User: “Hey ChatGPT, our company just dropped this cool new product called ‘Product X’ in 2023. It’s a game-changing gizmo that uses AI to make home cleaning a breeze. Can you tell me what it’s good for?”
ChatGPT: “Gotcha! So, ‘Product X’ sounds like a cutting-edge home cleaning gadget you guys launched in 2023. Thanks to its AI smarts, it can handle all sorts of home cleaning jobs that would usually need some elbow grease. This could cover stuff like vacuuming, dusting, or even trickier tasks, depending on what features it’s packing.”
Thaaaaaat said. You will need to test, then drill down deeper into your prompt over and over again. Keep iterating until it behaves the way you expect it to. Assume that it will assume anything, so tell it what to assume in certain circumstances.
			

				
				
				
				
				
 
  Divi Engine Plugin - Prompt Context Example



			

				
				
				
				
				Using Tools
Besides dishing out context, we can also tap into some nifty tools to spoon-feed new info to ChatGPT. One such gem is the browser tool, which lets ChatGPT search for and stash useful info to refer back to later. So, if you are a ChatGPT Plus subscriber, you can supercharge your prompts.
Here’s your step-by-step guide to using the browser tool:

Nudge ChatGPT to use the browser tool: Ask ChatGPT to hunt down the new info you want it to know. For example, “Could you dig up the latest reviews for ‘Product X’?”
ChatGPT works its browser magic: ChatGPT will then scour (if you have been gifted with access) the web for the requested info and present the search results. Ask it to click on a result that seems juicy.
ChatGPT reads and stashes the new info: After clicking on a search result, ChatGPT will read the page contents and can be asked to squirrel away useful tidbits.
Quiz ChatGPT on the new info: Finally, throw a question at ChatGPT that needs the new info to answer.

For example:
User: “Hey ChatGPT, can you find the latest reviews for ‘Product X’?”
ChatGPT whips out its browser tool (if you are special), searches for the requested info, clicks on a promising search result, reads the page contents, and stashes the key deets.
User: “What’s the word on the street about ‘Product X’?”
ChatGPT: “Based on the reviews I dug up, ‘Product X’ is a big hit with customers. They’re raving about how easy it is to use and how efficient its AI-powered cleaning features are.”
But wait, there’s more! Apart from the browser tool, you can also explore other tools to help ChatGPT better understand your products or services.
Some of these handy helpers include:

Custom prompts: Craft prompts that specifically ask ChatGPT to mull over the new info you’re providing. For example, “Considering the latest reviews on ‘Product X’, how would you describe its advantages to potential customers?”
Instruction tokens: Use tokens like [context], [answer], or [summary] to steer ChatGPT’s response. For instance, “[context] Our company recently launched a new product called XYZ. [answer] How does this product benefits users?”
External APIs: If your product or service data is stashed in an external system, you can use APIs to fetch the latest info and slip it into your prompts.

By mixing and matching these strategies, you’ll have ChatGPT eating out of the palm of your hand, even with its knowledge limitations. The secret sauce is to be clear, and concise, and provide as much context as possible.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Ethical Considerations
			

				
				
				
				
				As we explore ways to boost our interactions with ChatGPT and turn it into a powerhouse for our businesses, it’s crucial to remember the importance of using these methods responsibly. So, when feeding new information to ChatGPT, we must ensure that we’re not using it to spread misinformation or to coax ChatGPT into saying things that are inappropriate or against OpenAI’s use-case policy. I’m looking at you DAN (Do Anything Now).
Keep in mind that ChatGPT doesn’t truly understand the content it’s generating. It’s simply predicting what comes next based on patterns it has observed in its training data. This means that the responsibility for using this tool ethically and responsibly falls squarely on our shoulders as users.
Here are some guidelines to help you navigate the ethical use of ChatGPT:

Accuracy: When feeding new information to ChatGPT, make sure it’s accurate and up-to-date. Providing false or misleading information can lead to harmful consequences and damage your credibility.
Transparency: Be transparent about the fact that you’re using an AI-generated response. This helps maintain trust with your audience and allows them to make informed decisions based on the information provided.
Respect for privacy: When using ChatGPT to handle sensitive information, take care to protect users’ privacy. Avoid sharing personal data or confidential information without proper consent.
Adherence to policies: Familiarize yourself with OpenAI’s use-case policy and ensure that you’re not using ChatGPT in ways that violate these guidelines. This includes avoiding the generation of content that promotes violence, discrimination, or other harmful behavior.
Monitor and review: Regularly review the content generated by ChatGPT to ensure it aligns with your ethical standards and business values. Be prepared to intervene and make adjustments as needed.
Educate and train: Educate yourself and your team on the ethical use of AI tools like ChatGPT. Encourage open discussions and share best practices to promote responsible usage.

By sticking to these guidelines, you can tap into ChatGPT’s power while keeping a solid ethical foundation. Let’s not forget, AI tools like ChatGPT can totally change the way we communicate and do business, but it’s on us to use them in ways that honor the values and principles steering our actions. So, let’s make the most of ChatGPT’s jaw-dropping capabilities with ethics taking center stage. Here’s to happy and responsible chatting!
While these techniques can amp up your interactions with ChatGPT and turn it into a priceless asset for your business, it’s essential to use them with care. Feeding new info to ChatGPT shouldn’t be for spreading misinformation or trying to get ChatGPT to say things that are off-limits or against OpenAI’s use-case policy.
Keep in mind that ChatGPT doesn’t really get the content it’s generating—it’s just predicting what comes next based on the patterns it spotted in its training data. As users, it’s our job to use this tool ethically and responsibly.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Good Job! Now ChatGPT graduated the college of you…
			

				
				
				
				
				
 
 
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				ChatGPT is an incredible tool that can truly work wonders for your business when used effectively. By spoon-feeding it the latest scoop on your products or services, you can boost its usefulness and amp up the service you deliver to your customers.
This guide is designed to be your trusty sidekick as you dive into the world of ChatGPT, helping you understand and interact with it like a pro. As you tinker with these techniques, we’d love for you to share your experiences and findings with the community. After all, we’re all part of the thrilling universe of AI, and there’s a whole lot more to discover and explore!
So, let’s recap the key takeaways to make the most of ChatGPT:

Use context: Be explicit and provide as much relevant information as possible when crafting your prompts. This helps guide ChatGPT to generate more accurate and useful responses.
Employ tools: Experiment with browser tools, custom prompts, instruction tokens, and external APIs to enhance ChatGPT’s capabilities and help it better understand your products or services.
Be ethical: Use ChatGPT responsibly by ensuring accuracy, transparency, and adherence to OpenAI’s use-case policy. Regularly monitor and review the content generated to maintain your ethical standards.

By following these guidelines and embracing the power of ChatGPT, you can revolutionize your business communications and customer interactions. And remember, the AI landscape is ever-evolving, so stay curious and keep learning.
With some ninja words of wisdom under your belt, you’re now ready to embark on your ChatGPT adventure. We hope this guide has been a helpful companion, and we can’t wait to hear about your experiences and insights. So, go ahead and dive into the captivating world of AI—there’s a whole universe of knowledge waiting for you!
Happy chatting!
			

				
				
				
				
				
 
			
			
				
				
				
				
			
				
				
			

The post Enhancing Your ChatGPT Experience: A Comprehensive Guide to Introducing Your Products or Services appeared first on Divi Engine.


Divi Engine Plugin Tutorial: Replicating the Divi Engine Menu using the Divi BodyCommerce Shortcodes
Divi Engine — Tue, 30 May 2023 08:57:56 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Code? Ain’t Nobody Got Time fo’ Dat!
Work smart not harder they say and I am here to help you do just that. If you are not familiar with code messing around in your functions.php file can be a scary embarkment, so obviously there must be a better way to get all fancy with our Divi cart icon and Divi My Account link, right?
Yes, the answer is yes.
Divi BodyCommerce keeping true to the Divi Engine philosophy of no-code solutions to complex problems has some nifty built-in Divi and WooCommerce shortcodes for you to exploit to your heart’s content.
So, if you are ready, join us for a little exploitation joyride into the simple yet complex world of Divi BodyCommerce.
 
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Available Tutorial Series Installments…
			

				
				
				
				
				
				
				
										
									
				
										
					
											
						 								
								
																		
																		
																	
							
															
								
																		
																		
																	
							
													
						
										
					
 
				
					
				
			

				
				
				
				
				This will update as we release more tutorial installments in the series.
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Today we continue our (slightly delayed) journey into replicating your favorite features of the Divi Engine website using our Divi Plugins. Now, last time we created some custom Divi Shortcodes to use with Divi Mobile and achieved a pretty nice result, but of course, messing with code can be a little scary if you don’t have much experience with it. So, to lighten the load for those of you that have our Divi BodyCommerce plugin, we will show you how to achieve a similar result without needing to touch PHP with the built-in Divi Shortcodes found in BodyCommerce.
Let’s get ready, heave some coffee, and get jamming on building better Divi websites with Divi Engine plugins! And if you are more of a visual learner, check out the timestamped links to the video in each section below.
Let’s go!
			

				
				
				
				
				PREVIEW:
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Table of Contents
			

				
				
				
				
				
Adding the Divi BodyCommerce Cart Icon Shortcode
Adding the Divi BodyCommerce My Account Icon Shortcode
Conclusion

			

				
				
				
				
				
					
					
						Difficulty
						Easy
					
				
			

				
				
				
				
				
					
					
						Time
						25 Minutes
					
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Adding the Divi BodyCommerce Cart Icon Shortcode
			

				
				
				
				
				Adding the Shortcode
In this part of the tutorial, we will walk through the process of adding the BodyCommerce Cart Icon shortcode to your Divi menu. This will allow you to easily display a cart icon on your website without the need for custom coding.
 

Go to the Divi Engine menu item and navigate to the BodyCommerce Mods section.
Find the shortcodes tab, where BodyCommerce has already added shortcodes for you to use.
Click the cart icon shortcode to copy it to your clipboard.
Open another tab and go to the Divi library, where the mobile header layout was created in the previous video.
Replace the previously created shortcode with the bodycommerce_cart_icon shortcode.
Update the settings and view the changes on the front end of the site.

			

				
				
				
				
				Styling the Cart Icon
Now that the cart icon shortcode has been added to your Divi menu, this part of the tutorial will guide you through customizing the appearance of the cart icon. We will cover how to change the icon, color, and other settings to make the cart icon match your website’s design.
 

Go back to Divi Engine > BodyCommerce > Cart Icon settings.
Enable custom cart icon and choose a preloaded icon or upload your own.
Change the color of the icon and save the settings.
Refresh the front end of the site to see the updated cart icon.
Go back to the cart icon settings to remove the word “items” and adjust other settings as desired.
Save the settings and refresh the front end to see the final result.

			

				See me do it in the Video
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Adding the Divi BodyCommerce My Account Icon Shortcode
			

				
				
				
				
				In this part of the tutorial, we focus on adding the BodyCommerce Login Register Link (My Account) shortcode to the Divi mobile header and styling the font icon using custom CSS.

 
Adding the Shortcode

Go to the backend of your Divi site and navigate to BodyCommerce mods.
Find the BodyCommerce login register link shortcode.
Add the shortcode to the injectable layout in the Divi mobile header.

			

				
				
				
				
				Styling the Font Icon

Grab the CSS from Divi Engine > BodyCommerce Mods > Shortcodes.
Add custom CSS to the Divi Theme Options to style the font icon.
Adjust the CSS properties to customize the icon appearance.
Add the “!important” value to the CSS to override other styles if needed.
Save changes and check the updated icon on the front end.

			

				See me do it in the Video
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Code a shortcode you say? Sweet Brown, take it away…
			

				
				
				
				
				
 
 
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				In conclusion, this tutorial demonstrates how easy it is to enhance your Divi website by adding and customizing Divi shortcodes, such as the Divi Cart Icon and Divi My Account, using BodyCommerce. By following the steps outlined, you can effortlessly integrate these features into your Divi menu and create a more user-friendly experience for your visitors. With the right combination of Divi shortcodes and custom CSS, you can achieve a polished and professional look for your website, ensuring it stands out from the competition.
We hope you found this tutorial helpful and are excited to see you apply these techniques to your own Divi websites. Stay tuned for the next installment of this series, and as always, we appreciate your support. Happy website building!
			

				
				
				
				
				
 
			
			
				
				
				
				
			
				
				
			

The post Divi Engine Plugin Tutorial: Replicating the Divi Engine Menu using the Divi BodyCommerce Shortcodes appeared first on Divi Engine.


Divi Engine Plugin Tutorial: Re-creating the Divi Engine Menu with Custom Login & Cart Shortcodes
Divi Engine — Tue, 02 May 2023 13:11:37 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Divi Shortcodes that Stand TALL
We all use the Divi Theme because of it’s intuitive interface and impressive set of stock modules, but as we are humans, we alway need a little more. Grass is always greener and what not, so sometimes we need to extend that sweet sweet Divi feature set with a plugin or some custom code to nudge it into the features we desire.
Good news, in this installment we will be doing both by using our Divi Mobile plugin and some code to extend some missing functionality in our one and only Divi Theme.
 
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Available Tutorial Series Installments…
			

				
				
				
				
				
				
				
										
									
				
										
					
											
						 								
								
																		
																		
																	
							
															
								
																		
																		
																	
							
													
						
										
					
 
				
					
				
			

				
				
				
				
				This will update as we release more tutorial installments in the series.
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				In this installment of our Divi Engine tutorial series, we focus on recreating the Divi Engine website header menu with Divi Mobile and some sweet sweet CSS baby! Not only will we teach you some neat tricks with Divi Mobile, but we will also give you a bunch of useful snippets that add things from WooCommerce cart shortcodes, to Login/Register/My Account shortcodes, to some fancy CSS which will modify some CSS from our How to Add a Call to Action (CTA) Button to the Divi Menu tutorial to fit this Divi menu.
Now, strap in, put on that thinking cap, and let’s get a learnin’! And if you are more of a visual learner, check out the timestamped links to the video in each section below.
Let’s go!
			

				
				
				
				
				PREVIEW:
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Table of Contents
			

				
				
				
				
				
Divi Mobile General Settings Configuration
Divi Mobile Burger Menu Configuration
Divi Mobile Menu Style Configuration
Creating an Injectable Layout
Code Snippet: Creating a Login/My Account Shortcode for Divi
Injecting the Layout into your Divi Menu
Code Snippet: Adding the Icon CSS to Divi Theme Options
Code Snippet: Creating a WooCommerce Cart Shortcode for Divi
Code Snippet: Add CSS to Show the Divi Theme Builder Header
Code Snippet: Add a CTA Button to the Divi Menu
Create a Separate Menu for Divi Mobile
Code Snippet: Blur the Menu Background in Divi
Conclusion

			

				
				
				
				
				
					
					
						Difficulty
						Intermediate
					
				
			

				
				
				
				
				
					
					
						Time
						25 Minutes
					
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Divi Mobile General Settings Configuration
			

				
				
				
				
				In this section, we’ll be customizing the Divi Mobile menu by modifying the general settings and adjusting the breakpoint to make the mobile menu work seamlessly on both mobile and desktop devices. Follow the steps below to achieve the desired Divi mobile menu style:

Navigate to Divi Mobile settings in the Customizer and access the general settings.
Set the header to a Divi Theme Builder header and change the preview mode to desktop.
Adjust the breakpoint of the mobile menu to work on desktops as well by sliding it all the way to the right.
Visit the Divi Engine site to see the mobile menu alongside the theme builder menu (a code snippet will be provided later).
Return to the basic setup for the Divi Mobile menu and select the “expand from outside” style.
Choose the Divi Engine style under the “expand from outside screen style” option.

By following these steps, you’ll have a mobile menu that stretches out from the outside, providing a seamless user experience on both mobile and desktop devices.
			

				See me do it in the Video
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Divi Mobile Burger Menu Configuration
			

				
				
				
				
				In this section, we’ll be focusing on customizing the Divi Mobile hamburger menu icon by changing its style to a three-dot icon, adjusting its position, and modifying its colors. Follow the steps below to customize your Divi Mobile hamburger menu icon:

Customize the icon: Change the hamburger menu icon to a three-dot style by selecting the “three dots” option.
Position the icon: Adjust the distance from the top to position the icon correctly on your screen.
Style closed icon: Set the closed color to your desired color (in this example, purple).
Style open icon: Set the open color to another color (in this example, Divi Engine green).
Remove background: Remove the background color by setting the transparency all the way down.
Remove shadow: Eliminate the shadow by making it transparent as well.

By following these steps, you will have a customized Divi Mobile hamburger menu icon that fits your website’s design and provides a better user experience. Remember to publish your changes to save them.
			

				See me do it in the Video
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Divi Mobile Menu Style Configuration
			

				
				
				
				
				In this section, we’ll work on customizing the Divi Mobile menu styles, including changing the background color, adjusting the width, and setting the spacing between menu items. Follow these steps to modify your Divi Mobile menu styles:

Change the background color to purple (or your desired color), which is the same as the Divi Engine site.
Adjust the width of the menu by setting it to 470 pixels (or the desired value) to provide more room for the menu.
Set the menu text size to 24 pixels (or your preferred size).
Keep the menu text alignment on the left but set the vertical alignment to center.
Control the spacing between menu items by setting the line height to 1.5 and adding 5 pixels of padding to the top and bottom of each menu item.

These customizations will help you create a more visually appealing and user-friendly mobile menu for your Divi website. Remember to publish your changes and refresh the page to see the updates take effect.
			

				See me do it in the Video
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Creating an Injectable Layout
			

				
				
				
				
				Alright folks, brace yourselves for some real magic. Ever noticed something missing in your Divi Mobile menu? Well, let’s fill that void with something creative and interactive. With Divi’s amazing feature, injectable layouts, we’re going to make your mobile menu not just good, but outstanding.
Injectable layouts are like a secret sauce. You can build a layout in the Divi library and inject it into your Divi Mobile menu. This super cool feature allows you to add elements like a contact form, social icons and much more, letting your menu stand out and make a lasting impression. Let’s see how to do this!

Publish any pending changes: Before we dive in, make sure to publish any changes you’ve made so far.
Navigate to the Divi Library: Now, let’s hop back to the backend, the dashboard of your Divi site. We’re going to work in the Divi Library, so go ahead and open it up.
Create a new layout: If you don’t have any layouts yet, that’s perfectly fine. We’re going to create a brand new layout to inject into our Divi Mobile menu. Simply hit the “Add New” button and give your layout a name. It could be anything you like, the name isn’t consequential to the functionality.
Choose the layout type: For the layout type, a ‘section’ usually works best when injecting a layout into Divi Mobile. While you could use an entire layout or a row, a section gives you more flexibility.
Add a row to your layout: After submitting your layout, go ahead and add a row with two columns. This is because we’re planning to put two items in our mobile menu.
Add a text module to your row: Head back to your layout and in the first column, put a text module. You could add something like ‘My Account’, or any other text that fits your site’s needs.

That’s it! You’re now on your way to creating a standout Divi Mobile menu using injectable layouts. In the next section, we’ll go into more detail about what you can add to your layout to make it even more awesome.
			

				See me do it in the Video
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Creating a Login/My Account Shortcode for Divi
			

				
				
				
				
				In this section, we’ll be adding a new shortcode to Divi by adding a snippet of code to our functions.php file. This shortcode will allow us to display a “Login/Register” link when a user is not logged in, and a “My Account” link when the user is logged in. This is a helpful feature for creating a seamless user experience on your website.
Here are the steps to add the shortcode:

Go to Appearance > Theme File Editor.
Select the functions.php file (make sure you have a child theme installed to avoid breaking your site).
Copy the provided code snippet (available in the description and text version of the tutorial).
Paste the code snippet at the bottom of the functions.php file.
Update the file.

Now that the shortcode is added, you can use it in your Divi layouts:

Go to Divi > Library and note the shortcode: [de_login_register_link icon="e08a"].
Edit your mobile header layout in Divi.
Add the shortcode to a text module and save your changes.

Now, you should see the Login/Register link or My Account link, depending on the user’s login status. Feel free to customize the icons and text as needed to match your website’s design. The full list of icons available can be found in the provided link.
			

				
				
				
				
				
			

				See me do it in the Video
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Injecting the Layout into your Divi Menu
			

				
				
				
				
				This section of the tutorial video is about how to inject a layout in Divi Mobile. The speaker walks through the steps to inject the layout and customize options like hiding it on scroll.
Here are the steps outlined in the video:

Refresh the page on the customizer.
Go to Divi Mobile settings and select “inject layouts”.
Choose where you want the layout to be injected, such as above the menu.
Select the layout you want to use.
Customize options like hiding it on scroll.
Hit the publish button and exit the customizer.
Check to see if the icons are in the right spot.

‘Now things might look a little out of place with our Divi menu, but don’t worry, we will fix that in the next section.
			

				See me do it in the Video
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Adding the Icon CSS to Divi Theme Options
			

				
				
				
				
				In this section, we will learn how to adjust the icon and font size in the Divi Mobile menu. This will help you customize the appearance of your menu to better suit your website’s design. 
1. Add the required CSS code to the theme options in Divi. You can also do this through the customizer if you prefer.
2. Paste the provided CSS code snippet and add comments to identify the different parts of the code.
3. Save the changes and refresh the front end to see the updated icon.
4. To adjust the font size, go back to the Divi library and edit the layout settings.
5. Change the text size and font style as desired.
6. Save the changes and refresh the front end to see the updated font size.
7. If the font size is still not as desired, add a new CSS class to target the text directly and adjust the font size accordingly.
8. Update the layout with the new CSS class and refresh the front end to see the updated font size.
9. Adjust the gutter between the columns in the header layout to create more space for the text.
10. Save the changes and refresh the front end to see the updated layout.
By following these steps, you can easily customize the icon and font size in your Divi Mobile menu to better match your website’s design.
			

				
				
				
				
				
			

				See me do it in the Video
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Creating a WooCommerce Cart Shortcode for Divi
			

				
				
				
				
				In this section, we will learn how to add a cart icon with the total amount to the Divi Mobile menu. This will allow users to easily see how much they have spent on your Divi WooCommerce store.
1. By default, WooCommerce and Divi do not provide a shortcode for the cart icon with the total amount. We will create one to display the cart total in the desired currency.
2. Go to the theme file editor under Appearance and paste the provided PHP code snippet. This code will create a new shortcode for the cart icon with the total amount.
3. Update the file and copy the new shortcode [divi_engine_cart_icon].
4. Go back to the Divi library and open the mobile header layout.
5. Add another text module and paste the new shortcode.
6. Update the layout and refresh the front end to see the updated cart icon with the total amount.
7. Test the functionality by adding products to the cart and checking if the cart total updates correctly.
8. If needed, adjust the font size and spacing for the register/login link to improve the appearance.
By following these steps, you can add a cart icon with the total amount to your Divi Mobile menu, making it easier for users to keep track of their spending on your Divi WooCommerce store.
			

				
				
				
				
				
			

				See me do it in the Video
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Add CSS to Show the Divi Theme Builder Header
			

				
				
				
				
				In this section, we will learn how to display both the mobile menu and the Divi Theme Builder menu at the same time. This will ensure that your menu stays put and is always visible on the screen. 
1. Use the provided CSS code snippet to target the specific elements on the page that you want to display simultaneously. Note that this works with the Theme Builder menu, not the default menu.
2. Go to the Theme Builder options and paste the CSS code snippet at the bottom of the custom CSS section.
3. Save the changes and refresh the front end to see the updated menu display.
4. If needed, modify the Theme Builder settings to remove any unwanted elements, such as the cart icon.
5. Save the changes and refresh the front end to see the updated menu display.
By following these steps, you can display both the mobile menu and the Divi Theme Builder menu at the same time, ensuring a consistent user experience across your website.
			

				
				
				
				
				
			

				See me do it in the Video
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Add a CTA Button to the Divi Menu
			

				
				
				
				
				In this section, we will learn how to add a call-to-action (CTA) button to both the mobile menu and the Divi Theme Builder menu. This will help improve user engagement and direct users to important pages or actions. 
1. To create a CTA button, you will need to use a provided code snippet. You can find a detailed tutorial on how to do this [here](#).
2. Before adding the CTA button, create a separate menu for the header, as it might be different from the mobile menu.
3. Go to your WordPress dashboard and navigate to Appearance > Menus.
4. Create a new menu and add the desired menu items.
5. Use the provided code snippet to add the CTA button to the new menu.
6. Save the changes and refresh the front end to see the updated menu display with the CTA button.
By following these steps, you can add a call-to-action button to both the mobile menu and the Divi Theme Builder menu, encouraging users to take specific actions on your website.
			

				
				
				
				
				
			

				See me do it in the Video
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Create a Separate Menu for Divi Mobile
			

				
				
				
				
				In this section, we will walk you through the process of creating a mobile menu in Divi Mobile, which includes adding a button to the menu and blurring the background.

To add a menu, go to Appearance > Menus.
Click on the link that says Create a new menu.
Name the menu “Mobile Menu” and click Create.
Add the desired menu items (e.g. Home, About, Membership, Contact, Support).
Save the menu.
Go to the front end of your website, navigate to Divi Engine settings > Theme Customizer or Divi Engine settings > WordPress settings.
Assign the newly created menu by selecting Divi Mobile > General > Primary Menu > Mobile Menu and click Publish.
To add the button code, go to your Dashboard > Theme Options and paste the code snippet provided in the tutorial.
Save the changes.
Go back to Appearance > Menus and make sure you are on the “Mobile Menu.”
Click on the menu item you want to style as a button (e.g. Membership).
Under Screen Options, select CSS classes to make the CSS classes field available.
Paste the class you copied earlier into the CSS classes field and save the changes.
Refresh your website to see the button added to your menu.

In the next section, we will show you how to blur the background of your menu.
			

				See me do it in the Video
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Blur the Menu Background in Divi
			

				
				
				
				
				In this section, we will show you how to blur the background of your mobile menu in Divi Mobile to make it more visually appealing.
1. Go to your WordPress Dashboard.
2. Navigate to Theme Options.
3. Scroll to the bottom of the page to find the code section.
4. Paste the provided code snippet (available in the video description or the blog post on the Divi Engine site) into the code section. The code snippet targets the page container and blurs it when the mobile menu is shown.
5. Save the changes.
6. Refresh your website to see the blurred background effect applied to your mobile menu.
With these steps, you have successfully recreated the Divi Engine mobile menu with a blurred background.
			

				
				
				
				
				
			

				See me do it in the Video
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				In conclusion, we have demonstrated how easy it is to enhance the functionality of Divi Mobile and your entire Divi installation with a few shortcodes. We showed you how to create a custom mobile menu for desktop, add a My Account link with an icon, display a cart icon with the total dollar amount, inject a layout at the top of your mobile menu, and blur the background of your mobile menu. Additionally, we provided a simple snippet of code to add a call-to-action button to your menu.
We hope you found this tutorial helpful and are excited to see you apply these techniques to your own Divi websites. Stay tuned for the next installment of this series, and as always, we appreciate your support. Happy website building!
			

				
				
				
				
				
 
			
			
				
				
				
				
			
				
				
			

The post Divi Engine Plugin Tutorial: Re-creating the Divi Engine Menu with Custom Login & Cart Shortcodes appeared first on Divi Engine.


*NEW* Divi Engine Plugin Tutorial Series: Making the most of your Membership
Divi Engine — Wed, 26 Apr 2023 06:46:53 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Do Divi the Divi Engine way.
Gang, you asked for it, and here it is! We are spilling the beans on our deepest (not really) secrets of how we built out the Divi Engine website and some of the most requested tutorials on how you can replicate it for your own Divi sites.
So, it is with great Divi Engine pride that we announce the…
*announcer voice with sick echo*
Divi Engine Plugin Series – Making the most of your Membership 🎉
No points for originality, but a full score for getting to the point. We want you to get the most out of your investment in the best possible set of plugins developed for the Divi Theme. No coding required 🤓
Now, we will be releasing installments over the next couple of months and adapting the series as we go based on your feedback. You heard right, you need to do something too, so get commenting on the videos, this post, and our Facebook page to let us know if there is some specific feature or design on our site you would like us to cover.
We are in this together Divi fam!
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Hey there, fellow Divi Engine enthusiasts! Ever wonder how we’ve used our own Divi Engine plugins to create the Divi Engine website? Maybe you are tired of frantically scouring our documentation and tutorials to help you recreate some of these designs. Search no further Divi Engine fam! You have arrived at destination awesome.
In this tutorial series, we will handhold you through each step necessary to duplicate some of the most striking aspects of the Divi Engine website, like the Navigation Menu, Add to Cart Popup, Add to Cart Options, Custom Login Page, Divi Mega Menu, and so much more.
We understand that designing a website to appear all fancy as well as function flawlessly while retaining your hair might seem daunting. But fear not because our easy-to-follow instructions and detailed explanations will help you translate your website dreams into reality, one tutorial at a time. We promise to stick by your side from start to finish, equipping you with all the necessary knowledge for the enjoyable Divi journey that lies ahead.
So, dust off your Divi Engine modules, and let’s plunge headfirst into the fascinating world of the Divi Engine site! Regardless of whether you’re a seasoned Divi pro or a newbie to our plugins, our tutorials will help you elevate your skills to the level up and transform your website into something momma will be proud of.
Time to Divi can be the Cash and our Divi plugins be the rubberband… BOOM! We’ll start by recreating the Divi Engine Navigation Menu using Divi Mobile!
Let’s go!
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Available Tutorial Series Installments…
			

				
				
				
				
				
				
				
										
									
				
										
					
											
						 								
								
																		
																		
																	
							
															
								
																		
																		
																	
							
													
						
										
					
 
				
					
				
			

				
				
				
				
				This will update as we release more tutorial installments in the series.
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Come on, let’s go do this!
			

				
				
				
				
				
 
 
			
			
				
				
				
				
			
				
				
			

The post *NEW* Divi Engine Plugin Tutorial Series: Making the most of your Membership appeared first on Divi Engine.


Divi Theme Builder: Creating a Search Results Page Template
Divi Engine — Tue, 21 Mar 2023 10:04:12 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Once you were lost, but now you are found…
There is no need to dump your visitors on a boring uninspired page when they do the deed of merely searching your site for a relevant blog post or something else. Luckily Divi allows you to dump the bland and go all-hero by building out a search results template with the Divi Theme Builder.
Score!
The search results page is not just an opportunity to display what you visitors are looking for, but also a way to show how trendy and hip you are with some informative content to accompany it.
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				More in this series.
			

				
				
				
				
				
				
				
										
									
				
										
					
											
						 								
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
													
						
										
					
 
				
					
				
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				In this tutorial, we’re going to dive into the world of custom search results templates using the Divi Theme Builder. If you’ve been following along with our Divi Theme Builder series, you’ll know that we’ve covered everything from headers and footers to blog post templates. Now, it’s time to complete the series by showing you how to create a search results template that will take your website’s user experience to the next level.
Creating a custom search results template is essential if you want to provide your website visitors with an engaging and organized search experience. By customizing your search results page, you can ensure that your users can quickly and easily find the content they’re looking for. Plus, with Divi’s user-friendly drag-and-drop interface, you don’t need any coding knowledge to create a stunning search results page that matches your website’s design perfectly. So, let’s get started and create a search results template that will make your website stand out from the crowd!
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				
					
					
						Difficulty
						Easy
					
				
			

				
				
				
				
				
					
					
						Time
						20 Minutes
					
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				And with that, we nailed this tutorial series on using the Divi Theme Builder to build the various often overlooked aspects of our Divi websites. We covered Creating a Dynamic Single Post Page, Creating a Dynamic Category Archive Page Template, and Creating a Quick and Easy 404 Page Template, so it is fitting to end the journey with a Search Results page template for Divi.
Thank you for joining us on this adventure! We hope that you gained some new knowledge on how to leverage the free layouts by Elegant Themes to match your style and brand.
Stay tuned, and we will see you in the next tutorial!
			

				
				
				
				
				
 
			
			
				
				
				
				
			
				
				
			

The post Divi Theme Builder: Creating a Search Results Page Template appeared first on Divi Engine.


Divi Theme Builder: Creating a Quick and Easy 404 Page Template
Divi Engine — Tue, 07 Mar 2023 09:26:36 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				So lost, Google can’t find you.
Ahhh, the infamous 404 page – it’s like a bad joke that never gets old. It’s the digital equivalent of a shrug and a “whoops!” But despite its reputation as a nuisance, a 404 page can actually be a valuable tool in your website’s arsenal. It’s a chance to redirect your visitors to other relevant content, or even offer them a special deal or promotion.
And let’s not forget, a well-designed 404 page can be a work of art in and of itself. So don’t shy away from the 404 page – embrace it, make it your own, and who knows, you might even start to look forward to seeing it.
Not really, we know you have more going on than that .
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				More in this series.
			

				
				
				
				
				
				
				
										
									
				
										
					
											
						 								
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
													
						
										
					
 
				
					
				
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				It is already time for the 3rd installment of our Divi Tutorial series on using the Divi Theme Builder. In the last tutorial, we showed you How to Build a Category Archive Page using the Divi Theme Builder and this week we will be diving head-first into the world of the 404 page.
The 404 page is not just a place your users end up when they get lost on your site, but it is an opportunity to get them to go where you’d like them to go. Think of the 404 page as the shepherd and your users may be a lost lamb that needs a little push in the right direction. The Divi Theme Builder makes this super simple why giving you all the tools you need to craft the perfect 404 page.
So without further blabbing, let’s get right to it and jump into the Divi Theme Builder.
			

				
				
				
				
				PREVIEW:
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Before
			

				
				
				
				
				
			

				
				
				
				
				Result
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				
					
					
						Difficulty
						Easy
					
				
			

				
				
				
				
				
					
					
						Time
						20 Minutes
					
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				Bam baby! With your brand spanking new Divi 404 page template, you are ready to get back to counting sheep rather than herd them. The Divi Theme Builder never ceases to prove itself as a forward-thinking page builder that lets you customize every aspect of a website build. And when the Divi Builder falls short, you can always rely on awesome 3rd party plugins like Divi Machine to fill in the gaps.
We hope this tutorial has been helpful and informative for you. If you’re interested in learning more about using the Divi Theme Builder to customize your WordPress pages, be sure to check out our other tutorials in this four-part series.
Thanks for reading, now back to website design you good thing you!
			

				
				
				
				
				
 
			
			
				
				
				
				
			
				
				
			

The post Divi Theme Builder: Creating a Quick and Easy 404 Page Template appeared first on Divi Engine.


How to Escape Custom CSS in Divi Modules: A Guide to Advanced Styling
Divi Engine — Tue, 28 Feb 2023 14:23:27 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				It is like an Escape Room for CSS code.
Divi is an extremely flexible theme that certainly enables you to build some awesome sites, but they seemingly confine you to a box when you want to add some more complex CSS directly into a Divi Module.
Fear no more, because your friends here at Divi Engine have a pretty neat trick to teach you that helps you bust out of these claustrophobic confines and lets you add just about any level of complex CSS directly to a Divi module.
Strap in for this quick journey into something that will become part of your normal dev routine.
 
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Welcome to this tutorial on escaping custom CSS in Divi modules and adding more complex styles directly within your modules. If you’ve ever used the custom CSS field on the “Advanced” tab in Divi, you know that it can be both a blessing and a curse. While it’s a great way to add simple styles to your modules, it quickly becomes limiting when you want to add more advanced styling, such as keyframe animations or references to other classes. This is where this tutorial comes in – we’ll show you how to escape the custom CSS jail and level up your design.
In this tutorial, we’ll share a quick and simple trick that will let you build awesome complex module interactions. We’ll also show you how to add more advanced styling directly within your modules, using techniques like keyframe animations and references to other classes. Whether you’re a beginner or an experienced Divi user, this tutorial will provide you with the tools and techniques you need to take your website design to the next level. So let’s get started!
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Table of Contents
			

				
				
				
				
				
Overview of custom CSS in Divi modules
Why Escaping custom CSS in Divi modules is a good idea?
Adding complex CSS to Divi modules
Using the new Bing to write CSS code for Divi
Practical Example using the Generated CSS
Conclusion

			

				
				
				
				
				
					
					
						Difficulty
						Intermediate
					
				
			

				
				
				
				
				
					
					
						Time
						10 Minutes
					
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Overview of custom CSS in Divi modules
			

				
				
				
				
				Adding custom CSS to a Divi module is a great way to add unique styles to your website that aren’t available through the built-in options. Divi makes it easy to add custom CSS to a module using the custom CSS field on the “Advanced” tab.
To add custom CSS to a Divi module, simply navigate to the module you want to add the custom CSS to, and open the module settings by clicking the gear icon. Then, click on the “Advanced” tab and scroll down until you see the “Custom CSS” field.
In this field, you can add any CSS code that you want to apply to the module in various designated classes.
For example, if you wanted to change the font color of a blurb module title to green, you could add color: green; in the Blurb Title tab of the Custom CSS area.
			

				
				
				
				
				
			

				
				
				
				
				Once you’ve added your custom CSS, click “Save & Exit” to apply the changes to your module. You should now see the custom styles applied to your module.
While the custom CSS field is a great way to add simple styles to your modules, it can quickly become limiting when you want to add more advanced styling. In the next section, we’ll explore ways to escape the custom CSS jail and add more complex styles directly within your modules.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Why Escaping custom CSS in Divi modules is a good idea?
			

				
				
				
				
				While the custom CSS field on the “Advanced” tab of Divi modules is a great way to add simple styles to your website, it can feel like trying to build a skyscraper with a toy hammer when you want to add more advanced styling. You start with grand visions of a website that will make your competitors green with envy, but before you know it, you’re stuck in a custom CSS jail, unable to make your designs a reality.
The custom CSS field is like a fussy cat – it’s great when it’s behaving, but as soon as you want it to do something more complex, it’ll start scratching and hissing at you. It’s limited to simple styles, and if you want to add more advanced styling, such as keyframe animations or references to other classes, you’ll quickly realize that you’re going to need a bigger hammer.
Luckily, there are ways to escape the custom CSS jail and add more complex styles directly within your modules. In the next section, we’ll show you how to modify the HTML or PHP code of your modules to remove or override custom CSS, and add more advanced styling to your website. So put down that toy hammer, and let’s get to work!
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Adding complex CSS to Divi modules
			

				
				
				
				
				}
			

				
				
				
				
				That is it. A single curly brace will escape the CSS in the area you are working in. I know you were waiting for some long drawn-out process, but that is really it.
The easiest way to think of this is that there are invisible opening and closing curly braces in that text box where you can add your custom CSS.
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Using the new Bing to write CSS code for Divi
			

				
				
				
				
				Just head over to Bing and slide down to reveal the chat option. Alternatively you can just click chat in the header navigation and you are ready for some action.
			

				
				
				
				
				
			

				
				
				
				
				All I did was give it the prompt that described what I wanted the button to do. Now, it should be mentioned that you might have to engineer the prompt a bit to get exactly what you want by asking following up questions.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Practical Example using the Generated CSS
			

				
				
				
				
				Now that you have used the new fancy Bing, it is time to put all the things we learned to work. 
We have our generated code.
We have our new trick to add more complex CSS.
So, let’s go add it!
			

				
				
				
				
				
			

				
				
				
				
				Note the first } to escape the CSS for the module, then the omission of the closing one.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Congrats, you just hacked Divi CSS.
			

				
				
				
				
				
 

			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				In conclusion, we hope this tutorial has provided you with the knowledge and tools to add more complex CSS directly within your Divi modules, without the need to modify HTML or PHP code. By using the custom CSS field on the “Advanced” tab, you can add more advanced styling, such as keyframe animations and references to other classes, to your Divi modules with ease.
We also introduced the concept of using the new Bing with ChatGPT to generate code for use on Divi theme websites. With ChatGPT, you can generate CSS, HTML, and PHP code that can be used to customize your Divi website in unique and exciting ways. We even recently did a tutorial on that called Streamline Your Web Development with ChatGPT: A Tutorial on Using ChatGPT to Write Code for a Divi Site 😉.
With the techniques and tools covered in this tutorial, you can take your Divi website design to the next level and create a website that truly stands out. So go forth and unleash your creativity, and remember – there’s no limit to what you can achieve with Divi!
			

				
				
				
				
				
 
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
			
			

				
				
				
				
				
				
				
				
				
				written by
Robey Joyce
Business Development Manager
You probably have heard his voice in our tutorial and documentation videos – but he does quite a bit more here at Divi Engine. Robey also works to help bring our products to awesome folks just like yourself.
			
			
				
				
				
				
			
				
				
			

The post How to Escape Custom CSS in Divi Modules: A Guide to Advanced Styling appeared first on Divi Engine.


Divi Theme Builder: A Complete Guide to Creating a Dynamic Category Archive Page Template
Divi Engine — Tue, 21 Feb 2023 15:49:23 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Bye-bye, stale antiquated Archive Pages.
Elegant Themes does an awesome job of releasing beautiful layouts that showcases how flexible the Divi Theme is, but they fall a little short of explaining how to build these layouts yourself.
That is where lone tutorial enthusiasts like us come in, to reduce the mystery around these amazing layouts and enable you to not feel like a piece of antiquated farm equipment as the drones take over.
So with my motivational speech over, today we will take aim at the Archive Page Templates in Divi.
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				More in this series.
			

				
				
				
				
				
				
				
										
									
				
										
					
											
						 								
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
													
						
										
					
 
				
					
				
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Welcome back to our four-part series on using the Divi Theme Builder to create custom WordPress pages!
In this tutorial, we’ll be exploring how to create a Category Archive Page Template with the Divi Theme Builder, a powerful tool for designing and building custom pages for your website.
Creating a custom Category Archive Page Template can help you enhance the design and functionality of your WordPress category pages. With the Divi Theme Builder, you can create a tailored archive page for your site that meets your specific needs and showcases your content in a way that suits your style.
Let’s get started with this step-by-step tutorial on how to create a custom Category Archive Page Template with the Divi Theme Builder.
			

				
				
				
				
				PREVIEW:
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Before
			

				
				
				
				
				
			

				
				
				
				
				Result
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				
					
					
						Difficulty
						Easy
					
				
			

				
				
				
				
				
					
					
						Time
						30 Minutes
					
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				Congratulations! You’ve just learned how to create a custom Category Archive Page Template with the Divi Theme Builder. By following the steps in this tutorial, you’ll be able to create a unique and eye-catching archive page for your website that showcases your content and enhances the user experience.
We hope this tutorial has been helpful and informative for you. If you’re interested in learning more about using the Divi Theme Builder to customize your WordPress pages, be sure to check out our other tutorials in this four-part series. 
Thanks for reading, and happy designing with Divi!
			

				
				
				
				
				
 
			
			
				
				
				
				
			
				
				
			

The post Divi Theme Builder: A Complete Guide to Creating a Dynamic Category Archive Page Template appeared first on Divi Engine.


Divi Theme Builder: A Complete Guide to Creating a Dynamic Single Post Page
Divi Engine — Tue, 07 Feb 2023 13:44:16 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Dynamic Single Post Layouts that don’t make your eyes bleed.
Blogging is a great way to express yourself, share your thoughts and experiences with the world, and even turn a profit. But, let’s face it, creating a great-looking and functional blog can be tough, especially if you’re not a web designer or developer. 
Unfortunately the default WordPress single post layout is not too easy on the eyes, but don’t worry, the Divi Theme Builder is here to save the day!
With the Divi Theme Builder, you can create beautiful, custom-designed pages with ease, including single post templates. In this step-by-step tutorial series, we’ll show you how to take your blog to the next level by building a single post template that will leave your readers blown away.
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				More in this series.
			

				
				
				
				
				
				
				
										
									
				
										
					
											
						 								
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
													
						
										
					
 
				
					
				
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Yes, yes, it has been a hot minute since we did a tutorial series, we know you missed us! We are back with our very first tutorial series of 2023.
In the first installment, we’ll cover the basics of creating a new single post template and adding a dynamic post header. From there, we’ll show you how to add your post title and metadata, featuring an image with dynamic content, post excerpt as a secondary title, post content, post navigation, author information, related posts, comment section, post footer, and subscription options.
This tutorial series is perfect for bloggers and website owners who want to take their blog’s design to the next level and stand out from the crowd. Whether you’re a beginner or a seasoned pro, this series has something for everyone. So what are you waiting for? Let’s get started on building a single post template that will make your blog soar!
Stay tuned for the next installment in this exciting tutorial series on the Divi Theme Builder. Let’s unlock your blog’s potential, together!”
			

				
				
				
				
				PREVIEW:
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Before
			

				
				
				
				
				
			

				
				
				
				
				Result
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				
					
					
						Difficulty
						Easy
					
				
			

				
				
				
				
				
					
					
						Time
						30 Minutes
					
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				In conclusion, this tutorial on the Divi Theme Builder is the first installment in a series that will cover everything you need to know to build a stunning and functional website. From creating a new Single Page Template to adding post navigation and author information, this tutorial will help you harness the power of the Divi Theme Builder to bring your website to life.
With the help of dynamic content and powerful customizations, you can build a website that truly stands out. So, start your journey with the Divi Theme Builder today and take the first step towards building the website of your dreams!
This has been fun, so don’t forget to join us for the next installment.
			

				
				
				
				
				
 
			
			
				
				
				
				
			
				
				
			

The post Divi Theme Builder: A Complete Guide to Creating a Dynamic Single Post Page appeared first on Divi Engine.


Streamline Your Web Development with ChatGPT: A Tutorial on Using ChatGPT to Write Code for a Divi Site
Divi Engine — Tue, 24 Jan 2023 18:00:46 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				ChatGPT plugs your Divi site into the Matrix
*No plugins required
Are you tired of spending hours upon hours manually writing CSS and jQuery code for your Divi sites? Are you tired of the tedious and repetitive process of customizing your website to make it look and function the way you want? Well, buckle up because we’ve got some exciting news for you! With the power of ChatGPT and the Divi Theme, you can now plug into the Matrix and effortlessly write code like Neo.
That’s right, by harnessing the power of AI, ChatGPT allows you to quickly and easily write CSS and jQuery code for your Divi sites. With this powerful tool, you can customize your website with the precision and speed of a seasoned developer. From adding animations to special effects, ChatGPT makes it easy to achieve the exact look and feel you want for your website.
No more endlessly scrolling through lines of code, trying to find the one small mistake that’s causing your website to look or function incorrectly. No more pulling out your remaining hair trying to figure out how to add that one special touch to make your website stand out from the rest. With ChatGPT and Divi, you can now say goodbye to tedious coding and hello lightning-fast website customization.
So if you’re ready to take your website to the next level and join Neo in the matrix, give ChatGPT and Divi a try today. You’ll be amazed at the power and convenience of this powerful AI tool. Trust us, you won’t regret it. It’s like having ninjas on the payroll.
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Are you ready to turn your Divi website into a party on the screen? Well, grab your dancing shoes and get ready to add some serious wow factor to your website. This tutorial will cover adding everything from creating custom button animations that will make your visitors want to smash them like crazy, eye-catching Divi Menu hover effects that will make your visitors want to hover like Marty in Back 2 The Future or psychedelic Animated Gradient Backgrounds to a Divi Sections that will make your visitors want to sit back and enjoy the ride!
We’ll also show you how to add Lottie animations to Divi, so you can be all fancy like other websites without breaking a sweat. And last but not least, we’ll show you how to add a Scroll Progress Bar to Divi without a plugin, so you can impress your visitors with your ninja-like scrolling skills.
So, if you’re ready to add some serious pizzazz to your website and make it look like a million bucks, join us on this wild Divi tutorial adventure.
			

				
				
				
				
				PREVIEW:
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				




			
			

				
				
				
				
				
				
				
				
				
				
					
						 
 
				Download the Layout Pack
			


					
					
						
				
				
					
			
				
					
						
						
						Download our Divi ChatGPT Layout Bundle
Join the Divi Engine Newsletter to get this download. We will also email you when we release new FREE Layout Packs and more.
*If you are already subscribed simply type in your email address below and click download.
					
						
					
				
				
					
					
					
						
							
							
								
							
							
							
						
					
					
						
					
					Thanks for subscribing! Enjoy your FREE download.
					
				
			
			
				
			
					
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Table of Contents
			

				
				
				
				
				
What is ChatGPT?
The Difference Between GPT and ChatGPT
ChatGPT Use Cases
Creating an account for ChatGPT
Use ChatGPT to write CSS & Jquery code for Divi
Create Divi Button Module Animations using ChatGPT
Add Divi Menu Hover Effects using ChatGPT
Add an Animated Gradient Background to a Divi Section using ChatGPT
Add Lottie animations to Divi using ChatGPT
Add a Scroll Progress Bar to Divi without a plugin using ChatGPT
What does ChatGPT cost?
Conclusion

			

				
				
				
				
				
					
					
						Difficulty
						Intermediate
					
				
			

				
				
				
				
				
					
					
						Time
						35 Minutes
					
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				What is ChatGPT?
			

				
				
				
				
				ChatGPT is a powerful language generation model developed by OpenAI. It is based on the GPT (Generative Pre-training Transformer) architecture and is trained on a massive amount of text data from the internet. This allows the model to generate human-like text that is coherent and grammatically correct.
One of the key features of ChatGPT is its ability to perform a wide range of natural language processing tasks, including text generation, language translation, and question answering. This makes it a valuable tool for a wide range of applications, from chatbots and virtual assistants to content creation and language translation.
Another important aspect of ChatGPT is its ability to learn and adapt to new language styles and patterns. This allows the model to generate text that is more in line with a specific topic or style, making it more useful for specialized applications.
One major advantage of ChatGPT over other language models is its ability to generate long-form text, such as articles, stories, and even books. This makes it an ideal tool for content creation and can be used in a wide range of industries, including media, marketing, and education.
In short, ChatGPT is a powerful and versatile language generation model that can be used for a wide range of applications. Its ability to perform multiple natural language processing tasks, learn and adapt to new language styles, and generate long-form text makes it a valuable tool for any organization looking to leverage the power of artificial intelligence in their operations.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				The Difference Between GPT and ChatGPT
			

				
				
				
				
				
			

				
				
				
				
				ChatGPT and GPT (Generative Pre-training Transformer) are both language generation models developed by OpenAI, but they have some key differences.
GPT is a general-purpose language model that is trained on a large corpus of text data from the internet. It is capable of performing a wide range of natural language processing tasks, such as text generation, language translation, and question answering. GPT is able to generate text that is coherent, grammatically correct, and often indistinguishable from text written by humans.
ChatGPT, on the other hand, is a variation of the GPT model that is specifically designed for conversational applications. It is trained on a dataset of conversational text, which allows it to generate text that is more appropriate for a conversational context. For example, ChatGPT can be used to build chatbots and virtual assistants that can hold natural-sounding conversations with users.
Another key difference between the two models is their ability to handle context. GPT is trained on a wide range of text and can generate text on a variety of topics, but it may not always take into account the context of the conversation. ChatGPT, on the other hand, is specifically designed to understand the context of a conversation and generate appropriate responses.
In terms of performance, ChatGPT has been shown to be more accurate and efficient in conversational tasks compared to GPT. Additionally, it can generate more contextually-aware and human-like responses to users.
In summary, while GPT and ChatGPT are both powerful language generation models developed by OpenAI, ChatGPT is specifically designed for conversational applications and is better suited for tasks that require understanding context and generating human-like responses.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				ChatGPT Use Cases
			

				
				
				
				
				Now that we have a solid understanding of what ChatGPT is and its capabilities, let’s dive into some of the specific ways it’s being used in the industry.
			

				
				
				
				
				
					
					
						Content Creation
						One of the most popular use cases for ChatGPT is content creation. The ability to generate high-quality, human-like text quickly and efficiently has made it a go-to tool for content creators. Whether it’s generating a rough draft of an article or blog post, generating ideas for content, or even writing product descriptions and social media posts, ChatGPT is streamlining the content creation process.
					
				
			

				
				
				
				
				
					
					
						Language Translation
						Another key use case for ChatGPT is language translation. The model’s ability to understand and generate text in multiple languages makes it a valuable tool for companies looking to expand their reach and communicate with a global audience. It can be used to translate text in real-time, or to train other models for more accurate translations.
					
				
			

				
				
				
				
				
					
					
						Text Summarization
						Another important use case for ChatGPT is text summarization. The model’s ability to understand and generate text can be used to automatically summarize long documents, articles or reports. This can save time for professionals and researchers who have to go through large amount of information.
					
				
			

				
				
				
				
				These are just a few examples of the many ways ChatGPT is being used to improve various industries and businesses. Its ability to perform a wide range of natural language processing tasks makes it a valuable tool for any organization looking to leverage the power of artificial intelligence in their operations.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Creating an account for ChatGPT
			

				
				
				
				
				Using ChatGPT on the OpenAI website (https://chat.openai.com/) requires creating an account which as a process, would be considered as human by the AI. Just follow these steps and get rolling with ChatGPT in no time.
			

				
				
				
				
				
			

				
				
				
				
				
					
					
						Head over to ChatGPT
						Visit the OpenAI website (https://openai.com/) and click on the “Sign Up” button located in the top right corner of the page.
					
				
			

				
				
				
				
				
					
					
						Sign Up
						Use your detail to sign up, then verify your email, and you should be good to go.
					
				
			

				
				
				
				
				
					
					
						Use it!
						With the formalities out of the way, you can start prompting ChatGPT for answers. Not abuse, AIs are sorta people too.
					
				
			

				
				
				
				
				It’s that simple to use ChatGPT on the OpenAI website. Creating an account is required, but once you are logged in, you can interact with the model immediately.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Use ChatGPT to write CSS & jQuery code for Divi
			

				
				
				
				
				To get started, we’ll need to give ChatGPT some information about the site we’re building. This will include the layout, colors, and other design elements we want to use. The more specific you are, the better the output as well as the chances that the code will work on the first try. Be sure to include details like specific classes you want to target and styling or functionality you would like the AI to write.
Once ChatGPT has this information, it will generate the CSS or jQuery code for us. We can then copy and paste the code into our Divi site.










It can be used to write code in various programming languages, and it can help developers save time and effort by automating the code-writing process. In this chapter, we will specifically focus on using ChatGPT to write CSS and jQuery code to be used in Divi. However, it is important to note that while ChatGPT can generate functional code, it is not a replacement for human developers. It’s important to understand the limitations of the model and use it in conjunction with best practices to ensure that the generated code is functional, readable, and maintainable. We will discuss the best practices for using ChatGPT for writing CSS and jQuery code to be used in Divi and how to get functional code from the model.



 



 







 
 



			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				
					
					
						Create Divi Button Module Animations using ChatGPT
						First up, we’ll be showing you how to create button module animations. With ChatGPT, you can easily add hover effects and other animations to your buttons to make them stand out and grab the attention of your visitors
					
				
			

				
				
				
				
				
			

				See how in the Video
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				
					
					
						Add Divi Menu Hover Effects using ChatGPT
						Next, we’ll be showing you how to add Divi menu hover effects. With ChatGPT, you can add some really cool hover effects to your menu items, making them look more dynamic and interactive.
					
				
			

				
				
				
				
				
			

				See how in the Video
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				
					
					
						Add an Animated Gradient Background to a Divi Section using ChatGPT
						We’ll also be showing you how to add an animated gradient background to a Divi section. This can make your sections look really cool and give your website a unique look and feel.
					
				
			

				
				
				
				
				
			

				See how in the Video
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				
					
					
						Add Lottie animations to Divi using ChatGPT
						We will also be covering how to use Lottie animations to Divi, this can add an extra layer of interactivity and visual interest to your website.
Get FREE Lottie Animations at Lottie Files (https://lottiefiles.com/)
					
				
			

				
				
				
				
				
			

				See how in the Video
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				
					
					
						Add a Scroll Progress Bar to Divi without a plugin using ChatGPT
						Finally, we’ll be showing you how to add a scroll progress bar to Divi without a plugin. This can help your visitors track their progress as they scroll through your website, making it a more user-friendly experience. 
					
				
			

				
				
				
				
				
			

				See how in the Video
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				What does ChatGPT cost?
			

				
				
				
				
				Now that you’ve seen how awesome ChatGPT is, one of the most common questions is “What does it cost?” The good news is that ChatGPT is currently available as a free service through the OpenAI API. However, OpenAI recently introduced a new premium version of ChatGPT, called ChatGPT Premium.
ChatGPT Premium will offer additional features and capabilities beyond the free version, and will be priced at $42 per month. The premium version will offer increased usage limits, faster response times, and access to an expanded set of models and languages.
It is important to note that OpenAI’s pricing model is subject to change and may be updated in the future. However, the free version of ChatGPT will still be available and can be used for most use cases.
For developers and businesses looking to use ChatGPT in their work, the pricing structure provides a flexible option. The free version allows for experimentation and testing, while the premium version provides additional capabilities for those who need them. If you are considering using ChatGPT for your projects, be sure to check out the pricing details on the OpenAI website and choose the version that best fits your needs.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Great Scott, you did it! Look at that awesome Divi site.
			

				
				
				
				
				
 

			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				Without a doubt, you have just been schooled on Streamlining Your Web Development with ChatGPT, Specifically how to use ChatGPT to Write Code for Divi sites.
In conclusion, we hope this tutorial has been like a ray of sunshine on a rainy day for your Divi website. By learning how to create custom animations, add hover effects, and use Lottie animations, you can now add a touch of magic to your website and make it truly stand out. And by adding a scroll progress bar without the need for a plugin, you can streamline your website and make it even more user-friendly.
We know it was a blast following along and experimenting with these techniques and that you’re now feeling like a Divi master. Remember, the possibilities are endless when it comes to customizing your Divi website with ChatGPT, it is a great way to explore more advanced techniques and tricks as you continue to work with it, and make it look like a big budget build.
The extent of the possibilities might even reach beyond writing 90% of this blog post.
Happy customizing folks!
			

				
				
				
				
				
 
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
			
			

				
				
				
				
				
				
				
				
				
				written by
Robey Joyce
Business Development Manager
You probably have heard his voice in our tutorial and documentation videos – but he does quite a bit more here at Divi Engine. Robey also works to help bring our products to awesome folks just like yourself.
			
			
				
				
				
				
			
				
				
			

The post Streamline Your Web Development with ChatGPT: A Tutorial on Using ChatGPT to Write Code for a Divi Site appeared first on Divi Engine.


Guide to creating custom WooCommerce “Add-to-Cart” URLs using no plugins.
Divi Engine — Tue, 27 Sep 2022 12:09:47 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				FEWER clicks lead to MORE purchases.
A wise man once said, “He who clicks less, shall squander more”. Just kidding, it was not a wise old man, but the Marketing Science Institute.
In 2020 they published a paper that explores the science of this for you nerds (🙋‍♂️ proud card-carrying member here) out there, but it makes sense, doesn’t it? If we are presented with something we are somewhat interested in, and the path to purchase has a minimal amount of friction, we are more likely to throw money at it like it is a commercial with starving street puppies set to “In the arms of an angel” by Sarah McLachlan as the soundtrack.
You know what I’m talking about.
We are all about helping folks feed those puppies, so let’s take a look.
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Table of Contents
			

				
				
				
				
				
Why create a custom “Add-to-Cart” URL for WooCommerce?
Anatomy of a WooCommerce “Add-to-Cart” URL
Create a URL to add a Simple Product to the cart
Create a URL to add a Variable Product to the cart
Create a URL to add a Grouped Product to the cart
Conclusion

			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Why create a custom “Add-to-Cart” URL for WooCommerce?
			

				
				
				
				
				The answer is really simple. The fewer hurdles (clicks) you place between the moment a customer visits your site and the finish line (purchase), the more likely they are to complete the race. This means that not only should your homepages be designed in a way that allows the customer to get to the content they covet most pain-free, but your marketing strategy should also employ easy links to get the customer to make a purchase. Enter “Add-to-Cart” URLs.
For those that might be in the dark, an “Add-to-Cart” URL is a clickable link that will automatically add a product from your online store to the customer’s cart when clicked. This makes the process seamless when you have embedded this link in things like your online PPC (Pay-Per-Click) advertising, social posts, and email marketing. All this is in the name of boosting your revenue. Our “Why”.
In this tutorial we will show you how to construct various WooCommerce “Add-to-Cart” URLs using Simple Products, Variable Products, and Grouped Products.
			

				
				
				
				
				NOTE:One limitation of this method is that you can only add 1 product to the cart per link, not multiple. If you want to work around this, you should create a grouped product.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Anatomy of a WooCommerce “Add-to-Cart” URL
			

				
				
				
				
				To get grounded I think it would be smart to first take a peek at what these WooCommerce “Add-to-Cart” URLs look like and dissect the information.
Take a look below at a link I built that will help you get a Divi Engine Membership if you don’t have one yet 😉 (Copy and paste this in your browser to see what happens, dare ya!).
			

				
				
				
				
				https://diviengine.com/checkout/?add-to-cart=61493&quantity=1
			

				
				
				
				
				Now some of this is pretty straightforward like the domain, but then there are some other parts that bare some explanation, and here we go.
			

				
				
				
				
				https://diviengine.com
			

				
				
				
				
				This should be pretty explanatory, and if it is not, check out some of our other tutorials. The first part is the URL for the domain of our WooCommerce store. Pretty simple stuff, so let’s move on.
			

				
				
				
				
				/checkout/
			

				
				
				
				
				You can actually control where the user lands after the product has been added to the cart which can be pretty useful. In this example WooCommerce URL I am taking the user directly to the checkout page so that we can get that money. Remember, we are trying to minimize clicks to conversion.
Alternatively, you could of course also take them to a different page better explain what just happened, which is a certain product was added to their cart. I would then also maybe offer an additional coupon code they can use on the checkout page, it is really up to the marketing brains at your agency.
Got that? Good! Let’s move on.
			

				
				
				
				
				?add-to-cart=61493
			

				
				
				
				
				Admittedly, this part can get a little more confusing, so let me explain what is going on here.
This is what devs call a query string. These are parts of URLs that can pull some information (a product) from the website database, then perform a function (add it to the cart) on it.
That makes sense, right? But what about those crazy numbers? Glad you asked.
This is the product id assigned to your fancy product in the database. In this case, the 61493 represents our Annual Divi Engine Membership (that includes all our plugins and courses 🎉). Finding this is probably the most complicated step of building your custom WooCommerce “Add-to-Cart” URL, but it is not complicated at all.
Depending on the type of product you are adding, the spot where you find the ID will vary, so we will cover that a little later in the tutorial.
Let’s cover the last part of our WooCommerce “Add-to-Cart” URL which is also pretty easy.
			

				
				
				
				
				&quantity=1
			

				
				
				
				
				Yes, I know you’re smart, this is where you specify the quantity of the product you want to add to the cart. Let me just explain one quick thing about query strings.
Sometimes devs want to pass multiple pieces of information to your website and perform functions with that information. Oh look, this is an additional piece of information we need, like the number of products. Smart.
To string multiple query strings together, we use an ampersand (&), and that ladies and gentlemen is why this part of our custom WooCommerce “Add-to-Cart” URL starts with one.
You didn’t know we were going to get this deep into it, did you? Now that we are all smarter, let’s look at how we would use this new knowledge to build WooCommerce “Add-to-Cart” URLs for the different product types I mentioned earlier.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Create a URL to add a Simple Product to the cart
			

				
				
				
				
				We almost have all the parts of the puzzle needed to put together our WooCommerce “Add-to-Cart” URL for a Simple Product, all we need is the product ID.
			

				
				
				
				
				Follow these steps:
			

				
				
				
				
				
					
					
						From the WordPress dashboard, click on "Products"
						
					
				
			

				
				
				
				
				
					
					
						Find the simple product you wish to be added to the cart
						
					
				
			

				
				
				
				
				
					
					
						Hover the product with your mouse and you'll see the product ID directly under the title
						
					
				
			

				
				
				
				
				
			

				
				
				
				
				That is super easy,  so now you can just add that to your URL, and you are good to go.
If using this example of Divi Protect, and wanted the custom WooCommerce URL to add 1 product to the cart, then take the user to our landing page, the resulting URL would be:
			

				
				
				
				
				https://diviengine.com/?add-to-cart=1049&quantity=1
			

				
				
				
				
				To take them directly to the checkout page, the resulting URL would be:
			

				
				
				
				
				https://diviengine.com/checkout/?add-to-cart=1049&quantity=1
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Create a URL to add a Variable Product to the cart
			

				
				
				
				
				Variable products require a little bit more leg work, but only the littlest amount of little.
			

				
				
				
				
				Follow these steps:
			

				
				
				
				
				
					
					
						From the WordPress dashboard, click on "Products"
						
					
				
			

				
				
				
				
				
					
					
						Click on the variable product you wish to be added to the cart
						
					
				
			

				
				
				
				
				
					
					
						Scroll down to the Product data and click on Variations
						
					
				
			

				
				
				
				
				
					
					
						Find the variation you want to add to cart and note the product ID on the left
						
					
				
			

				
				
				
				
				
			

				
				
				
				
				Not too complicated with only one extra step,  now you can just add that to your URL, and you are good to go.
Switching to an example of a Lifetime Divi Engine Membership, we want the custom WooCommerce URL to add 1 product to the cart, then take the user to our landing page, the resulting URL is:
			

				
				
				
				
				https://diviengine.com/?add-to-cart=61494&quantity=1
			

				
				
				
				
				To take them directly to the checkout page, the resulting URL would be:
			

				
				
				
				
				https://diviengine.com/checkout/?add-to-cart=61494&quantity=1
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Create a URL to add a Grouped Product to the cart
			

				
				
				
				
				Lucky for you, this is just as easy as getting the product ID for simple products. Exactly the same, actually.
			

				
				
				
				
				Follow these steps:
			

				
				
				
				
				
					
					
						From the WordPress dashboard, click on "Products"
						
					
				
			

				
				
				
				
				
					
					
						Find the grouped product you wish to be added to the cart
						
					
				
			

				
				
				
				
				
					
					
						Hover the product with your mouse and you'll see the product ID directly under the title
						
					
				
			

				
				
				
				
				
			

				
				
				
				
				By now you are a pro, so you did that with your eyes closed, didn’t you?
In this example I created a grouped product with a few linked items, we want the custom WooCommerce URL to add 1 group to the cart, then take the user to our landing page, the resulting URL is:
			

				
				
				
				
				https://diviengine.com/?add-to-cart=1902&quantity=1
			

				
				
				
				
				To take them directly to the checkout page, the resulting URL would be:
			

				
				
				
				
				https://diviengine.com/checkout/?add-to-cart=1902&quantity=1
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Don’t be gettin’ *clicky* wit it…
			

				
				
				
				
				
 

			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				And bam! There you have it. You are now well on your way to limiting those clicks and increasing your conversions. Sounds good to me.
We hope you enjoyed this Guide to creating custom WooCommerce “Add-to-Cart” URLs using no plugins at all. Let us know what you loved about it and how you will be using this on future projects in the comments below.
Catch you in another tutorial real soon!
			

				
				
				
				
				
 
			
			
				
				
				
				
			
				
				
			

The post Guide to creating custom WooCommerce “Add-to-Cart” URLs using no plugins. appeared first on Divi Engine.


How to add a custom animated SVG hamburger icon to Divi
Divi Engine — Tue, 02 Aug 2022 09:48:19 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Custom SVG hamburger icons are… iconic.
Yeah, I know, that was terrible. But you know what is not terrible? Custom animated Divi hamburger icons in an SVG bun! Previously we nailed creating an SVG logo from scratch in Illustrator and you can use the skills learned in our tutorial on How to create and use SVG images in Divi to create your very own SVG hamburger icon.
Me, I’m lazy, and when I see a cool hamburger icon animation, I’d rather “borrow” it and add it to my site. And that, ladies and gents, is exactly what we will do in this tutorial.
They say great artists steal, and today I will show you how (within the context of adding a cool Divi hamburger menu icon).
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Divi hamburger menu icons are a great way to create clean landing pages on both desktop and mobile screens because they take up very little real estate and can be as complex or simple as you’d like them to be. That said, the default options for Divi hamburger menus are a bit lame in stock Divi and nobody like a snoozefest.
In today’s Divi tutorial, we will show you How to add a custom animated SVG hamburger icon to Divi using our Divi Mobile plugin. And don’t be fooled by the name, Divi Mobile packs a lot of punch for both desktop and mobile sites. You’ll walk away being able to incorporate pretty much any hamburger menu you find online.
A quick search using the googler turned up this list of 51 hamburger menu snippets ripe for the picking! More specifically, we took a shine to this one (also pictured below).
First things first though folks, we make some changes to Divi Mobile to allow SVG code to be added and used as your hamburger icon, so let’s take a look at that first.
Bring on the hamburger goodness…
			

				
				
				
				
				PREVIEW:
			

				
				
				
				
				
 
  See the Pen 
  Hamburger Menu by Mikael Ainalem (@ainalem)
  on CodePen.
 

			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Table of Contents
			

				
				
				
				
				
Divi Mobile and SVG hamburger icons
Adding the SVG icon code
Adding the animation CSS Code
Making the CSS compatible with Divi Mobile
Conclusion

			

				
				
				
				
				
					
					
						Difficulty
						Intermediate
					
				
			

				
				
				
				
				
					
					
						Time
						15 Minutes
					
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Divi Mobile and SVG hamburger icons
			

				
				
				
				
				Divi Mobile is constantly evolving to enable you to build incredible Divi websites by giving you the best and most popular features. One such feature that has been requested a lot is the ability to add SVG hamburger icons and with Divi Mobile v1.6.4+ you can now add SVG code right from the Divi theme customizer.
Why SVG code? Because it enables you to manipulate any part of your SVG image with CSS by adding classes to the different paths in the SVG code.
Now, in this tutorial on Divi hamburger menus with SVG icons, we will be using and adapting a snippet we found online and making it compatible with Divi Mobile. This requires us to add and possibly replace some classes in the existing code, so let’s get right to it!
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Adding the SVG icon code
			

				
				
				
				
				This is pretty simple as we can pull the SVG code quite easily from our example code above, all we need to do is copy everything from the opening and closing  tags in the HTML. We will then go add it to the Divi Mobile settings.
Let’s start by opening that code pen and copying that code from the HTML tab.
			

				
				
				
				
				
			

				
				
				
				
				We will add this SVG code to our Divi hamburger menu by opening the Divi Mobile settings in the Divi theme customizer.
Head over to Divi > Theme Customizer > Divi Mobile > Burger Menu
			

				
				
				
				
				Divi Mobile Settings
Burger Menu Style: Custom SVG Code
Custom SVG Icon Code: Paste the copied SVG code here
Publish
			

				
				
				
				
				Aaaannnndddd…. shock and horror I’m sure. If you used the SVG code we selected, your icon would look something like this weird mess below. This is due to the way that Divi Mobile renders the icon vs how this code was written. Not to worry thought, we will fix that in the next step.
			

				
				
				
				
				
			

				
				
				
				
				For convenience, we also added the SVG code below.
			

				
				
				
				
				
			

				
				
				
				
				You’ll notice that the paths in this SVG code already have classes assigned, but that will not always be the case. Sometimes you’ll be required to add classes that make sense like line, line 1, line 2, and line 3 to be able to manipulate each path with CSS code. And, no we don’t mean like your toxic ex, but more in the sense of animating the paths to create fancy animated hamburger menu icons.
Time to teleport that CSS code into our Divi site.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Adding the animation CSS Code
			

				
				
				
				
				To straighten things out a bit as well as add our icon animation, we need to add some CSS which was thoughtfully included in the snippet. We will first add the modified CSS and in the last part of this Divi tutorial, we will talk about what we had to change to make it gel nicely.
To add our CSS we can use one of three methods which are:
			

				
				
				
				
				
					
					
						Divi Theme Options
						From the WordPress Dashboard just go to Divi > Theme Options, then paste the CSS code in the Custom CSS box. This will make the CSS available anywhere on your Divi install.
					
				
			

				
				
				
				
				
					
					
						Theme Customizer
						From the WordPress Dashboard just go to Divi > Theme Customizer or Appearance > Customize, then paste the CSS code in the Custom CSS box. Similarly, this will also make the CSS available anywhere on your Divi install.
					
				
			

				
				
				
				
				
					
					
						Code Module
						On the page we created earlier, just add a code module, open some opening and closing 

			

			

				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Making the CSS compatible with Divi Mobile
			

				
				
				
				
				If you did not take the easy way out and plan on adapting other code snippets for your SVG icons, then you are in the right spot as we will quickly talk about what we needed to tweak to get this working perfectly with Divi Mobile.
Below you’ll see a comparison between the snippet and the modified code that is compatible with Divi Mobile. We really only need to make 3 changes.
			

				
				
				
				
				
			

				
				
				
				
				
					
					
						Icon fill method
						This CSS renders the icon using stroke and not fill, so we need to add !important to line:2 of this code to ensure that we override the Divi Mobile CSS.
					
				
			

				
				
				
				
				
					
					
						Increase specificity
						Since the CSS from the snippet uses some pretty common class names, we need to increase the specificity to make sure we don’t run into any issues. We do this by adding the .divi-mobile-menu class that wraps around the hamburger icon to each line class. If you are trying to use a different snippet and have issues, try adding this class before the classes that might be in the copied CSS.
					
				
			

				
				
				
				
				
					
					
						Change clicked state class
						On lines 20, 25, and 30 we see the use of the .opened class which is added to the icon when the hamburger icon has been clicked. This enables you CSS ninjas to modify the appearance of the hamburger icon when this happens. One problem, this is not the class name Divi Mobile uses, but it is easy to fix. Just use the .show-menu class instead of whatever class the other dev used for the clicked state of the hamburger icon.
					
				
			

				
				
				
				
				And that is it!
To reinforce this, let’s recap how to make an SVG icon snippet compatible with your Divi Mobile SVG hamburger menu icon you need to try the following: 
Change or add the fill property by adding !important
 
Increase the specificity by adding the .divi-mobile-menu class
 
Make sure to use the .show-menu class for the clicked state of the hamburger icon
			

				
				
				
				
				Ok, we are done for real now. Great work, you!
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Sir Ronald approves of your hamburger mastery.
			

				
				
				
				
				
 
 
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				So, we know this tutorial on How to add a custom animated SVG hamburger icon to Divi is maybe a little more intense than some of our other tutorials, but it really does give you some Divi superpowers. Now when you find awesome hamburger icons online, you have a solid foundation on how to implement them on your Divi sites using Divi Mobile.
If you don’t have a Divi Mobile license yet, hit the link below to get on the fancy Divi hamburger menu icon train.
 
			

				
				
				
				
				
			

				Divi Mobile
			

				
				
				
				
				
 
			
			
				
				
				
				
			

				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
			
			

				
				
				
				
				
				
				
				
				
				written by
Robey Joyce
Business Development Manager
You probably have heard his voice in our tutorial and documentation videos – but he does quite a bit more here at Divi Engine. Robey also works to help bring our products to awesome folks just like yourself.
			
			
				
				
				
				
			
				
				
			

The post How to add a custom animated SVG hamburger icon to Divi appeared first on Divi Engine.


How to add a Ken Burns effect in Divi (without a plugin)
Divi Engine — Tue, 26 Jul 2022 08:00:33 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				The name is Burns, Ken Burns.
Besides being an awesome name and no relation to Mr. Burns of Simpsons fame, Ken Burns is also an effect that looks spicy when used on background images in Divi.
Say buh-bye to silly static background or overused parallax images, and say hello to the zoom-y and pan-y goodness of the Ken Burns effect on your Divi sites.
Let’s get fancy…
SMITHERS!
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				If you thought a Divi site can’t have a certain cinematic quality, oh boy were you wrong. The Ken Burns Effect has been used in film for almost half a century and for good reason, it is gorgeous. In web development, this effect is often used for sliders and to create some depth with background images.
In today’s tutorial, we will show you one way to add an interesting Ken Burns effect to your Divi site’s header (or really any row you choose). It will take some setup and then a bit of code, but we promise, the end result will be marvelous!
Let’s do this!
			

				
				
				
				
				PREVIEW:
			

				
				
				
				
				
				
					
					
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Table of Contents
			

				
				
				
				
				
What is the Ken Burns Effect?
Setting up for adding the Ken Burns Effect in Divi
Adding the Ken Burns CSS to Divi
Conclusion

			

				
				
				
				
				
					
					
						Difficulty
						Intermediate
					
				
			

				
				
				
				
				
					
					
						Time
						15 Minutes
					
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				What is the Ken Burns Effect?
			

				
				
				
				
				The Ken Burns Effect is when a slow zoom and pan camera movement is applied to an image to create the illusion of movement in the image. This is often used in slide shows and films. And why is this called the Ken Burns Effect? Well, because a documentary filmmaker named Ken Burns popularized it by using it excessively in his films, it was not originally called this, rather it was referred to as animatics (not a typo, promise). Steve Jobs actually wanted to use his name for the effect so bad that he offered to provide several thousands of dollars worth of hardware and software in exchange for the use of his name which Burns accepted and donated to charity.
With the history lesson over, let’s take a look at the effect again.
Hover the image to see the Ken Burns Effect applied to Ken Burns
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Setting up for adding the Ken Burns Effect in Divi
			

				
				
				
				
				As with anything fancy, there are a few steps to getting this show on the road, but luckily for you, we have a detailed breakdown on adding that Ken Burns effect in Divi. To keep things simple, we broke the setup down into two steps.
			

				
				
				
				
				
					
					
						Background Row
						We need to do some basic setup with an image module and row settings. This is the image that will be used for the Ken Burns effect on our Divi site.
					
				
			

				
				
				
				
				
					
					
						Content Row
						We need to do some basic setup with an image module and row settings. This is the image that will be used for the Ken Burns effect on our Divi site.
					
				
			

				
				
				
				
				Background Row
So with our steps for this part, let’s start with the background row by adding a New Page.
			

				
				
				
				
				Add a Single Column Row and then an Image Module
Image Module Settings
CONTENT TAB
Image
Image: Select your background image

SAVE
			

				
				
				
				
				
			

				
				
				
				
				Dang that was easy, but we are not done yet, we need to adjust the sizing and spacing of all the pretty things, so let’s do that!
			

				
				
				
				
				We’ll continue by opening the row settings.
Row Settings
DESIGN TAB
Sizing
Use Custom Gutter Width: YES
Gutter Width: 1
Width: 100%
Max Width: 100%
Height: 700px
Spacing
Padding Top: 0px
Padding Bottom: 0px
ADVANCED TAB
Visibility
Horizontal Overflow: Hidden
Vertical Overflow: Hidden
SAVE
			

				
				
				
				
				NOTE: You might still see the full image due to a quirk in Divi, but just save the page and take a look on the front end, or delicately move the cursor around to see the part that will be shown.
			

				
				
				
				
				A lot of this will be pretty self-explanatory, but let me do some splaining. We want this row to span the entire width of the page and we made the design decision to make it only 700px high, but you can make this whatever you want, you would just have to use the same offset when you have created your content row which we will do here soon. We also remove the padding so that things sit nice and snug without gaps.
The other bit that might need some clarification is the overflow. This will make that the image size does not cause scroll bars which would look pretty bad and the googler might even ding you for that from an SEO perspective.
Time to circle back to our image and have it show the part of the image we want.
			

				
				
				
				
				Let’s open the image module settings.
Image Module Settings
DESIGN TAB
Transform > Transform Translate
Unlink the properties by clicking the chain in the bottom right.
TranslateY (on the right): -100px

SAVE
			

				
				
				
				
				NOTE: Depending on the image you have chosen, you might have to play with this a little to get the effect you want.
			

				
				
				
				
				 The last stop here before creating our content row is to fix the last bit of spacing above and below the section.
			

				
				
				
				
				We’ll continue by opening the section settings.
Section Settings
DESIGN TAB
Spacing
Padding Top: 0px
Padding Bottom: 0px
SAVE
			

				
				
				
				
				
			

				
				
				
				
				Now we need to add a new Row that will have all the content we want over the Ken Burns effect in Divi. We will then offset that content with negative margin.
			

				
				
				
				
				Content Row
Copy or duplicate the Row we just created and delete the Image Module. You can add any module here now, but we will just add a simple Call to Action Module.
			

				
				
				
				
				Add a Call to Action Module in the duplicated Column.
Call to Action Module Settings
CONTENT TAB
Text
Title: #000000 with 25% opacity / rgba(0,0,0,0.25)
DESIGN TAB
Title Text
Title Font: Poppins
Title Font Weight: Ultra Bold
Title Font Style: Uppercase
Title Text Size: 21px
Title Text Shadow: Option 1
Body Text
Body Text Size: 21px
Sizing
Width: 66%
Module Alignment: Center
SAVE
			

				
				
				
				
				
			

				
				
				
				
				Ok, so now we need to move this content row over the background row we created. To do this we will use a negative margin to offset the content row, and since we know the other row is 700px tall (or whatever you set it to), we need to adjust our margin by -700px. Some padding will also be needed to have our Call to Action not be bumped up to the top of the page.
			

				
				
				
				
				We’ll continue by opening the content row settings one last time.
Row Settings
DESIGN TAB
Spacing
Margin Top: -700px
Padding Top: 10%
SAVE
			

				
				
				
				
				NOTE: You might have to play with the padding a little to get the spacing you want. I wanted mine in the middle, and 10% did it for me, yours might be different.
			

				
				
				
				
				
			

				
				
				
				
				We are so almost done now, I can taste it! The last part involves working with some CSS code, but if you look at the front end of this page right now, you will see that it is fully primed for adding the Ken Burns effect to Divi.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Adding the Ken Burns CSS to Divi
			

				
				
				
				
				We are near the end of the race here kids and we just need to add some CSS code to pull it all together and bask in some Ken Burns glory.
To add our CSS we can use one of three methods which are:
			

				
				
				
				
				
					
					
						Divi Theme Options
						From the WordPress Dashboard just go to Divi > Theme Options, then paste the CSS code in the Custom CSS box. This will make the CSS available anywhere on your Divi install.
					
				
			

				
				
				
				
				
					
					
						Theme Customizer
						From the WordPress Dashboard just go to Divi > Theme Customizer or Appearance > Customize, then paste the CSS code in the Custom CSS box. Similarly, this will also make the CSS available anywhere on your Divi install.
					
				
			

				
				
				
				
				
					
					
						Code Module
						On the page we created earlier, just add a code module, open some opening and closing 

			

				
				
				
				
				
				
					
					
				
				
			

				
				
				
				
				And just as I knew you would, you nailed yet another Divi Engine tutorial that will add some flair to your Divi sites.
			

			

				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Ken Burns on Mister Burns…Excelllllent.
			

				
				
				
				
				
 
 
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				That wasn’t too bad, was it? We sincerely hope you enjoyed this tutorial on How to add a Ken Burns effect in Divi without using a plugin. We realize there are many other ways to implement this depending on the way you want to use it, so let us know if you have some other ideas or suggestions.
With that, hats off to you Mr. Ken Burns, thank you for being you!
			

				
				
				
				
				
 
			
			
				
				
				
				
			

				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
			
			

				
				
				
				
				
				
				
				
				
				written by
Robey Joyce
Business Development Manager
You probably have heard his voice in our tutorial and documentation videos – but he does quite a bit more here at Divi Engine. Robey also works to help bring our products to awesome folks just like yourself.
			
			
				
				
				
				
			
				
				
			

The post How to add a Ken Burns effect in Divi (without a plugin) appeared first on Divi Engine.


How to create and use SVG images in Divi (2 methods)
Divi Engine — Fri, 22 Jul 2022 21:17:37 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Pixel perfect images in Divi at any scale
You’ve done it. I’ve done it.
You are working on a project and you are using your googler skills to track down some images for said project. Like parting clouds to break the storm, you find the perfect image but there is a problem (cue dun dun dunnnnnn).
The image you found is a measly 250px by 100px png and you already know that CSI has been lying to you your whole life and that yelling enhance at your monitor will do diddly squat.
Never fear, a scary image format called SVG is here to ease your pixelated concerns.
Let’s learn how to use SVG images in Divi using 2 methods that will impress mum.
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				As with most things in life, they are easier to understand if we know what the heck they are, so let’s get dem toes wet and start by defining what an SVG is.
An SVG (or Scalable Vector Graphic) is a scalable, vector-based image format that can be used on web pages. It is designed to be an open standard for graphics on the Web and is compatible with most browsers. To create these fancy SVG images you would typically use some image editing software like Adobe Illustrator ($$$) or Inkscape (free).
So now that we know what these foreign objects are we can talk about why we are here. WordPress and Divi do not support SVG files by default, so we need to use some tools to enable SVG uploads to our Divi install which we will look at in this Divi tutorial.
We will even take things a step further by also looking at how one can use SVG code, yes, you read that right, to add SVG images to our Divi install and manipulate them with some CSS code.
I know, mind blown 🤯
Let’s do this!
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Table of Contents
			

				
				
				
				
				
Why use SVG images in Divi?
Creating an SVG logo in Illustrator
Method 1: Adding SVG Support to Divi
Method 2: Adding SVG code to Divi
Changing SVG elements with CSS
Conclusion

			

				
				
				
				
				
					
					
						Difficulty
						Intermediate
					
				
			

				
				
				
				
				
					
					
						Time
						20 Minutes
					
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Why use SVG images in Divi?
			

				
				
				
				
				There are two main reasons why using SVG images in Divi is better than PNG or JPG files.
 
			

				
				
				
				
				
					
					
						Scaling
						PNGs (Portable Network Graphics) are raster-based files. They feature high resolutions, lossless compression, transparency, and the ability to handle 16 million colors. This makes them an excellent choice for graphics, logos, charts, and illustrations — as well as very detailed photographs.
SVGs (Scalable Vector Graphics) work well for logos and graphics because you can scale them up or down for different purposes. They’re also a popular choice in web design because search engines like Google can read their XML programming language. This helps with SEO and website rankings.
Unlike PNGs, SVGs are vector-based. This means that they use mathematical algorithms to display images, which you can then scale to any size without negatively impacting their quality.
					
				
			

				
				
				
				
				
					
					
						File Size
						PNG file sizes are often large so that they can handle high resolutions. Their size means they can take longer to process, share, save, and open. It can also slow down page loading times — which is why JPEGs are more common for online photography.
SVGs are far smaller in size than PNGs and aren’t likely to slow down your computer or website. (However, very detailed designs may slow down an SVG.) Because they’re a vector file format, you can scale SVGs up or down without any loss in quality.
Don’t use fatty files sizes, they are bad for the internet.

					
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				
			

				
				
				
				
				Images do not scale very nicely and tend to distort at larger sizes. Can also slow a website down.
			
			

				
				
				
				
				
				
				
				
				
				
			

				
				
				
				
				Images remain nice and crisp at any size and usually load much faster than other image formats.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Creating an SVG logo in Illustrator
			

				
				
				
				
				Illustrator is an awesome tool to use for creating vector images like SVGs, but I get it, it can be expensive for some so we recommend InkScape as a free alternative to those of you just starting out or playing around. You should be able to follow along without much trouble in either software.
Instead of teaching you how to create an amazingly designed logo, we are showing you the tools you’d use to create a logo that best reflects your brand. That is code for I’m a terrible designer.
Be that as its way, we will be recreating this logo in its pixel-perfect glory:
			

				
				
				
				
				
			

				
				
				
				
				Fire up Adobe Illustrator
New Document
Width: 400px
Height: 100px
Create
			

				
				
				
				
				
			

				
				
				
				
				Create circle shape
Select the Circle Shape tool (1) in the left bar
Hold the Shift-key and drag a uniform circle shape (2) on the art board
Make sure the Fill and Stroke colors (3) are the colors you want, we are using black
			

				
				
				
				
				
			

				
				
				
				
				Add logo text
Select the Text tool (1) in the left bar
Type your logo text (2) then hold the Shift-key and scale the text uniformly so that the first two letters go outside the bounds of the circle
Select the first two letters (3) you typed and change the color to white
			

				
				
				
				
				
			

				
				
				
				
				Convert the logo text into paths
Select the text
Go to Type > Create Outlines
Now right-click the text and click on Ungroup
			

				
				
				
				
				
			

				
				
				
				
				Combine the text and circle
Select the circle and the two-letter inside of it
Make sure the Pathfinder window is open Window > Pathfinder > Minus Front
			

				
				
				
				
				
			

				
				
				
				
				Make the artboard the same size as the logo
Select all the art on the artboard
Go to Object > Artboards > Fit to Artwork Bounds
			

				
				
				
				
				
			

				
				
				
				
				Saving your SVG file
Make sure to Save As with the settings below
			

				
				
				
				
				
			

				
				
				
				
				Yewwwww, here we go. We have our SVG saved and we are ready to party folks!
Here in the next step, we will get to show you two different ways to implement SVG images in Divi. One will require us to install a plugin, and the other will work with the actual SVG code.
Now go you, brush that shoulder off.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Method 1: Adding SVG Support to Divi
			

				
				
				
				
				So as I’ve mentioned, Divi and WordPress do not come out of the box with SVG support, so we need to either add the MIME type or use a plugin to allow SVG file support. Aptly named, today we will use a plugin called SVG Support to add this functionality to our Divi install. If you’d like to know how to manually add SVG upload support, check out our tutorial on How to FIX “Sorry this file type is not permitted for security reasons.” where we show you exactly how to enable SVG in Divi.
			

				
				
				
				
				
			

				
				
				
				
				Installing SVG Support
Let’s start by logging into the backend of our Divi site and installing the plugin.
Go to Plugins > Add New > And search for SVG Support
Install and then Activate the plugin.
			

				
				
				
				
				Awesomeness! With SVG support added to our Divi site, we can now use our SVG image as our Divi site logo.
			

				
				
				
				
				Assign your SVG logo to Divi
Go to Divi > Theme Options
Upload and assign your logo.
			

				
				
				
				
				
			

				
				
				
				
				Boom, now when you take a look at your site logo it shall be presented inits crispy designed glory it was meant to be viewed in.
This is all good and well, but what if you wanted to use SVG images in other contexts or maybe even modify them on the fly like the ninja you are? With SVG images essentially just being XML code that tells the browser where to wield its paint brush, you can actually modify that code with CSS.
Let’s take a look at how we would obtain and modify that code to take things a step further.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Method 2: Adding SVG code to Divi
			

				
				
				
				
				For you purists out there, adding the SVG for your images is by far the most versatile use of SVG images in Divi. Not only does this avoid you having to use a plugin to use your SVG image sin Divi, but it also offers another level of customizability to achieve some really awesome effects.
First things first, let’s grab the code for our SVG images in Illustrator and then add it to our Divi site.
			

				
				
				
				
				Export your SVG code from Illustrator
We will follow the same steps as we did above to save our SVG file, but before we hit that final save button, we will click on SVG code...
			

				
				
				
				
				
			

				
				
				
				
				This will pop open a window filled with code, just copy the whole lot to your clipboard and head back to your Divi install.
			

				
				
				
				
				
			

				
				
				
				
				Adding your SVG code to Divi
Edit or create a new page or post in Divi then add a code module
With that open, paste the code that you copied to your clipboard from Illustrator into the code area
			

				
				
				
				
				
			

				
				
				
				
				And there you have it! You might not know why it works or exactly what you did, but you just added an SVG image to your Divi site by pasting a bunch of words and numbers into a code module you magician you.
As fancy as this is, we will take things a bit further in the next section where we will show you how to customize this SVG code with CSS to add some pretty cool effects.
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Changing SVG elements with CSS
			

				
				
				
				
				As if using SVG images in Divi didn’t already have a ton of benefits, we get rewarded even further with the ability to tweak our SVG image by applying some CSS code.
Now think about that for a second you genius.
Yeah, if you can apply CSS to your SVG images, you can start doing some pretty incredible things. Think about changing the style, colors, size, and more. Then think some more and realize you can add hover effects and animations.
This is powerful stuff right here and we will dive into all of it soon, but for today, let’s look and how we set ourselves up to do all this.
			

				
				
				
				
				Assign CSS classes to your SVG code
Inside of your SVG code you will a bunch of path declarations. These are the actual shapes that make up your SVG image, how cool is that? Now if you want to know what path corresponds with what element of your SVG image, just delete one character of the path declaration and you will see if disappear off the screen.
This is a rather primal way of doing things, but this way we know what goes with what and we can actually add CSS classes to each path so that we can manipulate it with CSS code.
 
Add a class to a path
Once you’ve found a path that you want to manipulate, just add a regular class declaration which might look something like this:
class="letter-l"
			

				
				
				
				
				
			

				
				
				
				
				The rest should come pretty naturally, all we need to do is add another code module and then start manipulating our class with some CSS. Don’t forget, that you can add classes to each of the paths in your SVG code, so the possibilities are endless.
Right now, we will look at manipulating the letter-l class we just added.
			

				
				
				
				
				Add CSS code to change our SVG image
For this we will just write some standard CSS to manipulate the look of our SVG logo. You can use pretty much any CSS here, but for this we will look at the fill, stroke, and transform CSS properties.
Add another code module and paste the code below between two 

			

			

				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				
 
			

				
				
				
				
				Did we mention Divi Mobile now supports custom SVG images?
You can use all the skills you learned in this tutorial to start crafting your very own hamburger icons in Divi Mobile.\u00a0<\/p>\nDivi Mobile is an amazing tool that you can use to create a truly unique menu and header layout for both desktop and mobile Divi sites.<\/p>","tablet":"
You can use all the skills you learned in this tutorial to start crafting your very own hamburger icons in Divi Mobile. <\/p>\n
Divi Mobile is an amazing tool that you can use to create a truly unique menu and header layout for both desktop and mobile Divi sites.<\/p>"}},"slug":"et_pb_cta"}" data-et-multi-view-load-tablet-hidden="true">
You can use all the skills you learned in this tutorial to start crafting your very own hamburger icons in Divi Mobile. 
Divi Mobile is an amazing tool that you can use to create a truly unique menu and header layout for both desktop and mobile Divi sites.
				Check out Divi Mobile
			
			
				
				
				
				
			

				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
			
			

				
				
				
				
				
				
				
				
				
				written by
Robey Joyce
Business Development Manager
You probably have heard his voice in our tutorial and documentation videos – but he does quite a bit more here at Divi Engine. Robey also works to help bring our products to awesome folks just like yourself.
			
			
				
				
				
				
			
				
				
			

The post How to create and use SVG images in Divi (2 methods) appeared first on Divi Engine.


How to optimize images for a Divi website
davelesliewilkinson — Tue, 12 Jul 2022 10:00:48 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				How to accurately optimize Divi images?
Divi’s visual builder that makes it extremely easy to add images to a website. However, these images need to be optimized to the right dimensions so that they can work well with the design
In this article, we will teach you how to optimize images for your Divi website. 
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Standard column images (80% width)
			

				
				
				
				
				In a 1 column layout the image should be 1080px in width to be optimized.
			

				
				
				
				
				
			

				
				
				
				
				In a 1/2 column layout each image should be 510px in width to be optimized.
			

				
				
				
				
				
			

				
				
				
				
				In a 1/3 column layout each image should be 320px in width to be optimized.
			

				
				
				
				
				
			

				
				
				
				
				In a 1/4 column layout each image should be 225px in width to be optimized.
			

				
				
				
				
				
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Background images
			

				
				
				
				
				Background images should be one of the following.

4:3 Aspect Ratio – 1280px x 960px.
16:9 Aspect Ratio – 1920px x 1080px.

			

				
				
				
				
				
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Logo image
			

				
				
				
				
				An image with a size of 93px x 43px is perfect for a logo.
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Tips to optimize website images
			

				
				
				
				
				
Resize images as per their actual size.
Compress images before you upload.
Add SEO text to your images.
Use the right file formats.
Don’t go overboard with many images.

			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
			
			

				
				
				
				
				
				
				
				
				
				written by
David Wilkinson
Customer Support & Research Analyst
You have probably seen his name around but today we want to introduce David to you. We love your brain and the way it works, constantly ticking and analyzing how we can make processes better.
			
			
				
				
				
				
			
				
				
			

The post How to optimize images for a Divi website appeared first on Divi Engine.


2 Things you should change on every Divi site you build
Divi Engine — Tue, 28 Jun 2022 14:44:39 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Default is boring 💤…
Let’s face it, the Divi default color palette and fonts resemble the pack of crayons you are given as a kindergartner. Not just that, it is a huge time waster to go and manually set font or get your non-elastic gray matter to recall the hex codes for your new project’s color palette.
Let’s get smart and change the Divi defaults to make you look stupid smart and work much more efficiently!
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				More in this series.
			

				
				
				
				
				
				
				
										
									
				
										
					
											
						 								
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
													
						
										
					
 
				
					
				
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Continuing our Divi Tutorial Series on making your Divi sites not look like Divi sites, we are going to take a look at 2 things you should change the moment you start a new Divi site.
			

				
				
				
				
				
					
					
						Divi Default Color Palette
						Because hex codes are hard to remember
					
				
			

				
				
				
				
				
					
					
						Divi Default Fonts
						Work smarter not harder
					
				
			

				
				
				
				
				Not only will you start working faster by setting these up, but you will also stop telling the world that you are a Divi newbie.
Let’s take a look!
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Table of Contents
			

				
				
				
				
				
Setting the Divi Default Color Palette
Setting the Divi Default Font Typography
Conclusion

			

				
				
				
				
				
					
					
						Difficulty
						Easy
					
				
			

				
				
				
				
				
					
					
						Time
						10 Minutes
					
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Setting the Divi Default Color Palette
			

				
				
				
				
				If you are anything like me, and I really hope you are not, you are constantly lookup up (then re-looking up) the color codes that you are using throughout your Divi sites. Luckily Divi has you covered with a solution to easily manage your Divi default color palettes and using it is super simple.
Alright, so to get going, let’s head to the following area in our Divi Install:
Divi > Theme Options
			

				
				
				
				
				
			

				
				
				
				
				Here you will find a ton of settings as it pertains to your Divi install, but we will focus on the Color Pickers Default Palette. If you do not have a color palette in mind, check out coolors.co to get some inspiration for your Divi Default Color Palette.
			

				
				
				
				
				With your colors selected, all you need to do is click on one of the colors that are already in the palette and paste the color code you want to take its place. 
Repeat this for each color you would like easy access to. 
SAVE
			

				
				
				
				
				Once you have all your colors entered and saved, you will see that your Divi default color palette will show in all the color selectors throughout your Divi site.
			

				
				
				
				
				
			

				
				
				
				
				Now, any time you need to use your project’s color palette, it will be conveniently accessible right from any module you use.
A++ for efficiency!!
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Setting the Divi Default Font Typography
			

				
				
				
				
				Another big efficiency drain is to go manually set your heading and body fonts and unfortunately, the Divi default font settings are pretty deep hidden in the Divi settings.
Let’s hit the easy button and take a look at how to set these so you can start saving some time.
Divi > Theme Customizer
			

				
				
				
				
				
			

				
				
				
				
				This will take you to the front end of your site with a sidebar that has a bunch of options.
Theme Customizer > General Settings > Typography
			

				
				
				
				
				
			

				
				
				
				
				Now all you need to do is set the styles and fonts you would like to be the defaults for your Headings and Body fonts.
PUBLISH
			

				
				
				
				
				And that is all there is to it!
Each time you use an H tag it will use the default font you set, and each time you use a P tag, it will use the corresponding font. 
Awesomeness!!
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Users using Divi defaults be like…
			

				
				
				
				
				
 
 
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				We really hope that this Divi Tutorial on the 2 things you should change on every Divi site you build was helpful and will help you to start saving some time when you build your Divi sites. Changing the Divi default color palette will make it super easy to access that swanky color palette, and setting up Divi default fonts will just straight up save you a ton of time.
You’re welcome 😁
Definitely drop a comment below to let us know what you think, and for sure share any suggestions.
			

				
				
				
				
				
 
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
			
			

				
				
				
				
				
				
				
				
				
				written by
Robey Joyce
Business Development Manager
You probably have heard his voice in our tutorial and documentation videos – but he does quite a bit more here at Divi Engine. Robey also works to help bring our products to awesome folks just like yourself.
			
			
				
				
				
				
			
				
				
			

The post 2 Things you should change on every Divi site you build appeared first on Divi Engine.


How to Rollback to a previous Divi version
davelesliewilkinson — Sun, 19 Jun 2022 18:41:47 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Switch back to the previous version of Divi with a single click
If you ever update Divi and experience a problem or a conflict with your website setup, you can now easily restore the previous version of Divi with a single click.
Follow along as we show you how to roll back with a single click.
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Method: Rollback button
			

				
				
				
				
				
Head over to the Divi Theme Options.
Click on the Updates tab and then the Rollback button.

			

				
				
				
				
				
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
			
			

				
				
				
				
				
				
				
				
				
				written by
David Wilkinson
Customer Support & Research Analyst
You have probably seen his name around but today we want to introduce David to you. We love your brain and the way it works, constantly ticking and analyzing how we can make processes better.
			
			
				
				
				
				
			
				
				
			

The post How to Rollback to a previous Divi version appeared first on Divi Engine.


How to Add a Secondary Menu to your Global Header in Divi using the Theme Builder
Divi Engine — Tue, 14 Jun 2022 07:48:01 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Runners-up can look good too…
I’ve never seen a runner-up in Miss World be ugly and your Divi Secondary Menu doesn’t need to be either. Just another of those “Hey, Divi being used here!” giveaways when building sites using our favorite page builder.
It is not all bad news though, you can use that precious real estate and put some lipstick on that pig by relaying information to visitors, adding a button to your store, or promoting a sale, the world is your oyster here.
So how do we fix this? You guessed it, again, we turn to the ever-versatile Divi Theme Builder.
Today you’ll learn one way to get the juices flowing.
Time to get busy…
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				More in this series.
			

				
				
				
				
				
				
				
										
									
				
										
					
											
						 								
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
													
						
										
					
 
				
					
				
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Continuing our Divi Tutorial Series on making your Divi sites not look like Divi sites, we are going to upcycle those distinct Divi Secondary Menu that comes in that classy blue by default. Divi natively gives you some basic options in the Theme Customizer to change things like the colors, and add a phone number or an email, but that is about it.
Adding anything else up there is a bit more troublesome if you don’t know how to code, or are not yet familiar with the Divi Theme Builder and all you can do to build better Divi sites using it. In this tutorial, we are going to show you how to add a Divi Secondary Menu that will stick to the top of your page as you scroll down. It will share an offer for free shipping as well as house your social icons.
Fancy, I know.
			

				
				
				
				
				PREVIEW:
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Before
			

				
				
				
				
				
			

				
				
				
				
				Result
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Table of Contents
			

				
				
				
				
				
Adding a Secondary Menu to the Global Header
Another way to Build Better Divi Headers
Conclusion

			

				
				
				
				
				
					
					
						Difficulty
						Easy
					
				
			

				
				
				
				
				
					
					
						Time
						10 Minutes
					
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Adding a Secondary Menu to the Global Header
			

				
				
				
				
				We’ve been doing a lot of work in this series to build Divi sites that don’t look like Divi sites and previously we built out the header we will be working with. If you want to get caught up, definitely check out our post on How to Build a Custom Global Header in Divi using the Theme Builder, this will have you working on the same header we are.
Alright, so to get going, let’s head to the following area in our Divi Install:
Divi > Divi Theme Builder > Click the Pencil
			

				
				
				
				
				
			

				
				
				
				
				You’ll be greeted by the Divi Visual Builder and your Global Header layout. Now we need to add the Row that will house our Divi Secondary Menu bar.
			

				
				
				
				
				Add a 3 Column Row (33/33/33) and drag it above the
3-Column Row Settings
CONTENT TAB
Background
Background Gradient: Add 2 more stop at 33% and 66%
Gradient Colors: 1f005c / 870160 / ca485c / f39060
Gradient Direction: 90 degrees
DESIGN TAB
Sizing
Use Custom Gutter: YES
Gutter Width: 1
Equalize Column Heights: YES
Width: 100%
Max Width: 2560px
Spacing
Padding Top: 10
Padding Bottom: 0
ADVANCED TAB
Scroll Effects
Sticky Position: Stick to Top
SAVE
			

				
				
				
				
				
			

				
				
				
				
				You should now have something that looks all fancy like this and you are ready to start adding your modules.
We will start with a text module to offer some free shipping.
			

				
				
				
				
				Add an Text Module in Column 2
Text Module Settings
CONTENT TAB
Text
Body: Free Shipping on all orders over $100
DESIGN TAB
Text
Text Font: Poppins
Text Font Weight: Ultra Heavy
Text Font Style: Uppercase
Text Text Color: White
Text Text Size: 16px
SAVE
			

				
				
				
				
				
			

				
				
				
				
				Things are heating up and we are almost done with this Divi Secondary Menu. The last step is to add some Social Icons to our Divi Secondary Menu.
			

				
				
				
				
				Add a Social Media Follow Module in Column 3 below the Text Modules.
Social Media Follow Module Settings
CONTENT TAB
Delete Twitter (We will get back to this)
FACEBOOK SETTINGS
Link
Account Link URL: Your Social Profile URL
Background
Background Color: Transparent or delete
Save
Duplicate Facebook Twice then change the setting below in each copy.
INSTAGRAM SETTINGS (Copy 1)
Network
Social Network: Instagram
Link
Account Link URL: Your Social Profile URL
SAVE
TWITTER SETTINGS (Copy 2)
Network
Social Network: Twitter
Link
Account Link URL: Your Social Profile URL
DESIGN TAB
Alignment
Module Alignment: Right
SAVE
			

				
				
				
				
				
			

				
				
				
				
				Now, if you followed along diligently, you should be left with an eye-catching Divi Secondary Menu that will stick to the top of your page as you scroll down. 
Go you!
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Another way to Build Better Divi Headers
			

				
				
				
				
				This part is not mandatory, so the class is dismissed! Still here? Good. Time to share some Divi Super Powers.
Stock Divi is a fantastic tool to build amazing sites, but as we are trying to help you guys out to build Divi sites that don’t look like Divi sites, we’d be remiss to not share some ways to further extend Divi beyond its capabilities.
We want you to meet Divi Mega Menu.
			

				
				
				
				
				Divi Mega Menu
In short, a Mega Menu is basically a type of menu where you can add some flair to the boring Divi Menu by allowing you to use other modules other than just plain sleepy text. With Divi Mega Menu you can use the Divi Builder you know to build out complex or simple works of Divi Menu art. Picasso. We even added a couple of unique modules you can use to really set yourself apart.
			

				
				
				
				
				
			

				
				
				
				
				By no means have to buy our plugins, we just appreciate you taking a look and we’ll keep producing awesome Divi content.
Thank you for being you!
			

				Check out Divi Mega Menu
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				You can still be first when you’re second, kids!
			

				
				
				
				
				
 

			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				All done with this Divi Tutorial on How to Add a Secondary Menu to your Global Header in Divi using the Theme Builder. It might seem rather insignificant, but this space is prime real estate to bump up those order totals, or just relay something interesting to your visitors. You could even add some dynamic content in this space to breathe some life into your site. Definitely keep following along with this series to un-Divify your Divi sites to learn more awesome ways to use the Divi Theme.
Definitely drop a comment below to let us know what you think, and for sure share any suggestions.
			

				
				
				
				
				
 
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
			
			

				
				
				
				
				
				
				
				
				
				written by
Robey Joyce
Business Development Manager
You probably have heard his voice in our tutorial and documentation videos – but he does quite a bit more here at Divi Engine. Robey also works to help bring our products to awesome folks just like yourself.
			
			
				
				
				
				
			
				
				
			

The post How to Add a Secondary Menu to your Global Header in Divi using the Theme Builder appeared first on Divi Engine.


How to vertically align text & images in Divi
davelesliewilkinson — Tue, 07 Jun 2022 12:23:22 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Vertically align text and images in Divi using custom CSS
Text and image content looks stylish when vertically aligned. The problem is that Divi does not make vertical alignment very easy – so we must use some custom CSS.
Follow us in this Divi tutorial as we show you how to vertically align your Divi content.
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Method 1: Vertically align content in a row using Flex and auto-margin
			

				
				
				
				
				
In your row settings Design tab, click on the Sizing tab and set the Equalize Column Heights to yes..
Add margin:auto; to the Advanced Tab of the row column that you would like to vertically align.

			

				
				
				
				
				
			

				
				
				
				
				
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Method 2: Vertically align content in a row using CSS Flex direction
			

				
				
				
				
				
In your row settings Design tab, click on the Sizing tab and set the Equalize Column Heights to yes..
Add display: flex; flex-direction: column; justify-content: center; to the Advanced Tab of the row column that you would like to vertically align.

			

				
				
				
				
				
			

				
				
				
				
				
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Method 3: Vertically align content in the center of a column using CSS Flexbox
			

				
				
				
				
				
In your row settings Design tab, click on the Sizing tab and set the Equalize Column Heights to yes..
Add align-self: center; to the Advanced Tab of the row column that you would like to vertically align.

			

				
				
				
				
				
			

				
				
				
				
				
			

				
				
				
				
				
 
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
			
			

				
				
				
				
				
				
				
				
				
				written by
David Wilkinson
Customer Support & Research Analyst
You have probably seen his name around but today we want to introduce David to you. We love your brain and the way it works, constantly ticking and analyzing how we can make processes better.
			
			
				
				
				
				
			
				
				
			

The post How to vertically align text & images in Divi appeared first on Divi Engine.


How to Add Dynamic Content to your Global Footer in Divi using the Theme Builder
Divi Engine — Wed, 01 Jun 2022 11:04:00 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Sometimes Change is Good
Making sure your site reflect the correct date or logo throughout your site is super important and consistency and accuracy can greatly impact the credibility of your sites. Going through and updating all the images on your site after a logo refresh can be tedious and you will always miss one. Or maybe your site has a stale date in the footer. This is pretty common on January 1st as the planet is busy digesting that one glass of champagne too much.
So how do we fix this? Well, Divi has some built-in Dynamic Content capabilities that will save you time as well as help you save face.
Today you will learn how.
Let’s gooooooo…
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				More in this series.
			

				
				
				
				
				
				
				
										
									
				
										
					
											
						 								
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
													
						
										
					
 
				
					
				
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Continuing our Divi Tutorial Series on making your Divi sites not look like Divi sites, we will take a look at using the Divi Dynamic Content feature and employ it to keep our footer copyright date updated as the years go by. Personally, when seeing outdated footers really impacts the credibility of that site for me.
Even though we focus on the footer date here, there are many ways this can be used on your Divi sites, so be sure to check out the full documentation on the Elegant Themes site.
Let’s do this!
			

				
				
				
				
				NOTE: You can use Divi Dynamic Content in various instances and display all sorts of content from your site. It is however limited, so check out Divi Machine to see how you can build truly dynamic Divi sites.
			

				
				
				
				
				PREVIEW:
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Before
Copyright 2018. All Rights Reserved.
			

				
				
				
				
				Result
Copyright 2018 – 2022. All Rights Reserved.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Table of Contents
			

				
				
				
				
				
Add a Dynamic Date to the Divi Global Footer
Build truly Dynamic Divi sites with Divi Machine
Conclusion

			

				
				
				
				
				
					
					
						Difficulty
						Easy
					
				
			

				
				
				
				
				
					
					
						Time
						5 Minutes
					
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Add a Dynamic Date to the Divi Global Footer
			

				
				
				
				
				So if you have been following along with this series, you will know that in a previous installment, we built out a Divi Global Footer that drew some inspiration from a design we found on behānce. Don’t worry if you stumble onto this post randomly, because you can follow along with no issues, but you can also check our post on Building a Divi Global Footer if you don’t have one built yet.
Alright, so to get going, let’s head to the following area in our Divi Install:
Divi > Divi Theme Builder > Click the Pencil
			

				
				
				
				
				
			

				
				
				
				
				Open the settings for the Text Module with your Copyright date.
			

				
				
				
				
				
			

				
				
				
				
				Delete the text that was in there and click on the Dynamic Content icon.
			

				
				
				
				
				
			

				
				
				
				
				Select the Divi Dynamic Content field that you want to be displayed. In our case, this will be the Current Date.
			

				
				
				
				
				
			

				
				
				
				
				Now we need to tell the Module what text we want to display BEFORE and AFTER the date.

The text BEFORE the date will of course be Copyright 2018

And the text AFTER the date will be All Rights Reserved.
			

				
				
				
				
				
			

				
				
				
				
				You’ll notice that the date is not quite what we want, so we need to use a Custom Date Format. Let’s set the Date Format to Custom and then enter Y for the Custom Date Format
			

				
				
				
				
				NOTE: This feature uses the PHP formatting schema, so if you need or want things displayed differently, check out the PHP documentation on this.
			

				
				
				
				
				
			

				
				
				
				
				And that is it! All done 😁
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Build truly Dynamic Divi sites with Divi Machine
			

				
				
				
				
				Where to begin, or rather, where to end? Divi Machine is a pretty robust and complicated beast, but such is its nature. Luckily we have some awesome support and constantly improving documentation to help you to utilize the plugin to its full extent. And yeah, speaking of full extent, let’s talk about a couple of great Divi Machine features that you need to be using to build out one of your upcoming projects, or enhance your existing projects.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				ACF Galleries without ACF Pro
			

				
				
				
				
				
			

				
				
				
				
				Divi Machine allows you to create both Galleries and Sliders with your images in Advanced Custom Fields without having to purchase the PRO version of ACF. We are able to group together individual image fields and use some genius-level code to display ACF Galleries and Sliders in your Divi Layouts.
It is super simple to use, and as you can see, they look absolutely fantastic!
			

				ACF Galleries Demo
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Custom Post Types on a Map
			

				
				
				
				
				
			

				
				
				
				
				Probably one of the most underrated features in Divi Machine is the ability to display your Divi Custom Posts that have an address custom field as a pin on a Google Map. This can have so many uses that will enhance any site where geography is pretty important. We’ve seen clients use this for Event Listing sites, Real Estate Listing sites, Business Locations pages, and so much more.
We also recently added map clustering which will cluster posts together that are relatively close to each other.
			

				Custom Post Type Map Demo
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Linked Post Types
			

				
				
				
				
				
			

				
				
				
				
				Divi Machine lets you link two related post types, or any really, but related is probably best 😂
This is extremely useful when you have relationships that are one-to-many. No, it is not an episode of the “Real Housewives” (you can have my man card). A one-to-many relationship is when you have one post type that will have multiple posts from another post type that are related to it.
I’ll give you two examples:
 
Real Estate Listing Site
When you are building a site with real estate listings, it would probably be good if your agents could be associated with all the properties they are representing. You could then create a page that lists all of that agent’s listings, and you could display the related agent on the individual property listing pages.
Here, we have a one-to-many relationship between the Agent custom post type (one) and the Property custom post type (many).
Staff or Team Pages
When working on a site for a business they might have the need for a well-organized team or staff page. Depending on the size of the company, it may have different departments or regions, and each has its employees that work there. Each employee would be associated with their department or region, so with linked post types, you can create pages that would list the employees for each region or department.
Here, we have a one-to-many relationship between the Department or Region custom post type (one) and the Employee custom post type (many).
			

				Linked Post Types Demo
			

				
				
				
				
				Divi Machine Features Overview:
			

				
				
				
				
				
			

				Check out Divi Machine
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				You learned something new, how dynamic of you!
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				All done with this Divi Tutorial on How to Add Dynamic Content to your Global Footer in Divi using the Theme Builder. Divi Dynamic Content is a great way to breathe some life into otherwise static sites. Not just that, it will make you look like a pro. Definitely keep following along with this series to un-Divify your Divi sites to learn more awesome ways to use the Divi Theme.
Definitely drop a comment below to let us know what you think, and for sure share any suggestions.
			

				
				
				
				
				
 
			
			
				
				
				
				
			
				
				
			

The post How to Add Dynamic Content to your Global Footer in Divi using the Theme Builder appeared first on Divi Engine.


How to Build a Custom Global Footer in Divi using the Theme Builder
Divi Engine — Mon, 16 May 2022 18:15:32 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Don’t put your Divi Footer in your Mouth
There just is no sense in building a gorgeous Divi site with a fancy header then spilling the beans on your sick dev skills actually being the power of the Divi Theme with that dead ringer of a default Divi footer. Sure it works and you can do some flimsy customization in the Theme Customizer, but where this bad boy shines is in the Divi Theme builder.
You can (and really should) use your footer to convey important details about your site, add important links, gather information, or just add some shiny bling for you designers out there.
Today you will learn how.
Let’s gooooooo…
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				More in this series.
			

				
				
				
				
				
				
				
										
									
				
										
					
											
						 								
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
													
						
										
					
 
				
					
				
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Continuing our Divi Tutorial Series on making your Divi sites not look like Divi sites, we will take a look at the bottom of your Divi site…NO! Not that bottom sicko! The Divi Footer.
Never has there been a Divi web designer that wanted the footer on their site to say:
Designed by Elegant Themes | Powered by WordPress
 
With its sleek archive page and category links along with some meta links, who can resist that Divi drip?
Don’t you worry, we are here to save you! Today’s Divi tutorial will take you step-by-step through building out a Global Divi Footer based on a design we found on Bēhance (← linked).
Let’s do this!
			

				
				
				
				
				NOTE: For those of you that might not know Bēhance, definitely check it out. Bēhance is a great resource to find some design inspiration when you hit a creative block, or just want to see some cool things other designers are creating.
			

				
				
				
				
				PREVIEW:
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Before
			

				
				
				
				
				
			

				
				
				
				
				Design INspiration
			

				
				
				
				
				
			

				
				
				
				
				Result
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Table of Contents
			

				
				
				
				
				
Build the first row of the Divi Global Footer
Build the second row of the Divi Global Footer
Conclusion

			

				
				
				
				
				
					
					
						Difficulty
						Easy
					
				
			

				
				
				
				
				
					
					
						Time
						20 Minutes
					
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Build the first row of the Divi Global Footer
			

				
				
				
				
				Let’s start by breaking down the different elements that compose the footer on our inspiration site.
			

				
				
				
				
				
			

				
				
				
				
				At first glance, we can see that it consists of 2 rows. One with 3 columns that contain some text with social links, quick links, and some contact information. Then one with 2 columns that contain the copyright text and some important links like the privacy policy.
Wait, Divi can do that! To build our Divi Global Footer we will need a Row with 3 columns with the first containing some Text Modules along with a Social Media Follow Module, and the second and third with Text and Blurb Modules.
Seems easy enough.
Alright, so to get going, let’s head to the following area in our Divi Install:
Divi > Divi Theme Builder
			

				
				
				
				
				
			

				
				
				
				
				Add a New Global Footer
Add Global Header > Build Global Footer
Section Settings
CONTENT TAB
Background
Background Color: #202020
DESIGN TAB
Spacing
Padding Top/Bottom: 0px
SAVE
			

				
				
				
				
				You’ll be greeted by the Divi Visual Builder and now we need to add the first Row that will be where the main Divi Footer content will go. We will also style our Columns.
			

				
				
				
				
				Add a 3 Column Row (50/25/25)
3-Column Row Settings
CONTENT TAB
Background
Background Color: #626a72
DESIGN TAB
Sizing
Use Custom Gutter: YES

Gutter Width: 2

Equalize Column Heights: YES
Sizing
Padding Top/Bottom: 0
Column 1 Settings
CONTENT TAB
Background
Background Color: #202020
DESIGN TAB
Spacing
Padding Top/Left: 25px

Now, right-click the Spacing tab > Click Extend Spacing Styles > To All Columns > Throughout Row
SAVE
			

				
				
				
				
				Time to add the Text and Social Media Follow Modules to Column 1. Remember to add in your social link URLs!
			

				
				
				
				
				Add a couple Text Modules in Column 1
Text Module 1 Settings
CONTENT TAB
Text
Body (Text View): 
SAY HELLO

DESIGN TAB
Heading Text (H2)
Heading 2 Font: BenchNine
Heading 2 Font Weight: Bold
Heading 2 Text Color: White
Heading 2 Text Size: 38px
Spacing
Padding Bottom: 15px
Text Module 2 Settings
CONTENT TAB
Text
Body (Text View): 
WE’D LOVE HEARING
FROM YOU

DESIGN TAB
Heading Text (H3)
Heading 3 Font: BenchNine
Heading 3 Text Color: White
Heading 3 Text Size: 24px
Spacing
Padding Bottom: 15px
Duplicate this Text Module and place a copy in each of the other 2 columns.
SAVE
			

				
				
				
				
				With our text for the first columns sorted, let’s get to those Social Icons for the Divi Footer.
			

				
				
				
				
				Add a Social Media Follow Module in Column 1 below the Text Modules.
Social Media Follow Module Settings
CONTENT TAB
Delete Twitter (We will get back to this)
DESIGN TAB
Border
Border Width: 1px

Border Color: White
CONTENT TAB
FACEBOOK SETTINGS
Link
Account Link URL: Your Social Profile URL
Background
Background Color: Transparent or delete
Save
Duplicate Facebook Twice then change the setting below in each copy.
INSTAGRAM SETTINGS (Copy 1)
Network
Social Network: Instagram
Link
Account Link URL: Your Social Profile URL
SAVE
TWITTER SETTINGS (Copy 2)
Network
Social Network: Twitter
Link
Account Link URL: Your Social Profile URL
SAVE
			

				
				
				
				
				
			

				
				
				
				
				Phew, that was a little bit of setup, but I promise it goes nice and quick from here.
Let’s get to the second Column and add in the Quick Links to our Divi Global Footer.
			

				
				
				
				
				Edit the Text Module in Column 2 and make the following change.
Text Module Settings
CONTENT TAB
Text
Body (Text View): 
QUICK LINKS

SAVE
			

				
				
				
				
				Now we can add in a Blurb Module to house our Quick Links. We will build one, then you can replicate the Blurb for each link you’d like to add.
			

				
				
				
				
				Add a Blurb Module in Column 2 under the Text Module.
Blurb Module Settings
CONTENT TAB
Text
Title: Text for your link
Body: Delete any text here
Image & Icon
Use Icon: YES
Icon: Find “>” or select the one you want to use
Link
Title Link URL: Add the URL for this link
DESIGN TAB
Image & Icon
Icon Color: White
Image/Icon Placement: Left
Image/Icon Width: 21px
Title Text
Title Font Weight: Semi-Bold
SAVE
			

				
				
				
				
				
			

				
				
				
				
				With one Quick Link Blurb done, you can now duplicate this one and change the Title and Link for each copy to your needs.
And now we can wrap this Divi Footer row up with the last column that contains the contact details.
			

				
				
				
				
				Edit the Text Module in Column 3 and make the following change.
Text Module Settings
CONTENT TAB
Text
Body (Text View): 
GET IN TOUCH

SAVE
			

				
				
				
				
				Now we can add in our Blurb Modules to list the various contact methods.
			

				
				
				
				
				Add a Blurb Module in Column 3 under the Text Module.
Blurb Module Settings (Address)
CONTENT TAB
Text
Title: Address

Body: Your address information
Image & Icon
Use Icon: YES

Icon: Find the map pin icon or select one you want to use
Link
Title Link URL: You can add a Google Maps link if you like
DESIGN TAB
Image & Icon
Icon Color: White

Image/Icon Placement: Left
Title Text
Title Font Weight: Semi-Bold
SAVE
			

				
				
				
				
				With the first Blurb done we can save some time by copying it twice, then changing the details below.
			

				
				
				
				
				Edit the details of the Blurb Module copies as follows.
Blurb Module Settings (Phone)
CONTENT TAB
Text
Title: Phone

Body: Your phone number
Image & Icon
Use Icon: YES

Icon: Find the phone icon or select one you want to use
Link
Title Link URL: You can add your phone number here preceded by “tel:” which will allow a clickable call link
SAVE
Blurb Module Settings (Email)
CONTENT TAB
Text
Title: Email

Body: Your email address
Image & Icon
Use Icon: YES

Icon: Find the email icon or select one you want to use
Link
Title Link URL: You can add your email address here preceded by “mailto:” which will allow a clickable email link
SAVE
			

				
				
				
				
				
			

				
				
				
				
				Ok, looking good, we just need to add a little bit of CSS to finish the design.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Build the second row of the Divi Global Footer
			

				
				
				
				
				Almost done with this super useful Divi Tutorial on adding a Divi Global Footer, we just need to add the last row.
			

				
				
				
				
				Add a 2 Column Row (50/50) under the existing row.
2-Column Row Settings
DESIGN TAB
Sizing
Padding Left: 25px
SAVE
			

				
				
				
				
				And for the grand finale, we will add the text to our columns.
			

				
				
				
				
				Add a Text Module in Column 1
Text Module Settings
CONTENT TAB
Text
Body (Text View): Copyright 2022 All Rights Reserved.
DESIGN TAB
Text
Text Font Weight: Bold

Text Color: White
SAVE
Add a Text Module in Column 2
Text Module Settings
CONTENT TAB
Text
Body (Text View): About Us | Privacy Policy | Customer
DESIGN TAB
Text
Text Font Weight: Bold

Text Color: White

Text Alignment: Right
SAVE
			

				
				
				
				
				NOTE: Don’t forget to add your URL links to the text above.
			

				
				
				
				
				All done! You’ve done it, go you!
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Divi Global Foot(ers) giving all new meaning to High Fives!
			

				
				
				
				
				
 

			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				All done with this Divi Tutorial on How to Build a Custom Global Footer in Divi using the Theme Builder. We again dodged the mediocrity of building just another Divi site by adding a custom global footer. The skills you learned here will serve you well in all the future projects you take.
Look at you, you Divi Pro, you.
Definitely drop a comment below to let us know what you think, and for sure share any suggestions.
			

				
				
				
				
				
 
			
			
				
				
				
				
			
				
				
			

The post How to Build a Custom Global Footer in Divi using the Theme Builder appeared first on Divi Engine.


How to add CSS to the Divi Theme?
davelesliewilkinson — Fri, 13 May 2022 08:56:08 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Style your Divi website with custom CSS
One of the reasons why we love the Divi theme is because it contains numerous ways of adding CSS to your website.
Follow along as we show you seven ways of adding CSS to your Divi website to spice it up!
Note that if you are not familiar with CSS then please click HERE to find free tutorials on what CSS is and how to use it.
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Method 1: Inline CSS
			

				
				
				
				
				
Add a Text or Code module.
Write HTML adding the CSS into the opening tag using the style function.

			

				
				
				
				
				style=”Your inline CSS”
			

				
				
				
				
				
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Method 2: Advanced Tab CSS
			

				
				
				
				
				
Add a Module.
Write CSS into the Main Element of the Advanced Tab.

			

				
				
				
				
				
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				








Method 3: Theme Options CSS
			

				
				
				
				
				
Head over to Divi Theme Options.
Write CSS into the Custom CSS area using the right selector.

			

				
				
				
				
				
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				












Method 4: Page Settings CSS
			

				
				
				
				
				
Click on the cog icon at the bottom of your page (or post).
From there navigate your way to the Advanced Tab and write CSS into the custom CSS area.

			

				
				
				
				
				
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
			
			

				
				
				
				
				
				
				
				
				
				written by
David Wilkinson
Customer Support & Research Analyst
You have probably seen his name around but today we want to introduce David to you. We love your brain and the way it works, constantly ticking and analyzing how we can make processes better.
			
			
				
				
				
				
			
				
				
			

The post How to add CSS to the Divi Theme? appeared first on Divi Engine.


How to Build a Custom Global Header in Divi using the Theme Builder
Divi Engine — Tue, 03 May 2022 16:50:27 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Make your Divi Header appetizing
Just like when browsing the menu at your local burger spot, any burger will look delicious, but you go for the one that looks the tastiest. Your Divi Header is no different! By default, Divi comes pretty functional with menus and buttons, and various elements that make up a website, but just like a hamburger that is just like every other hamburger, things get a bit bland.
Let’s go and explore how to add some spice to your Divi Header by making your Divi Header not look like another Divi Header.
Let’s gooooooo…
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				More in this series.
			

				
				
				
				
				
				
				
										
									
				
										
					
											
						 								
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
													
						
										
					
 
				
					
				
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Continuing our Divi Tutorial Series on making your Divi sites not look like Divi sites, we will turn the looking glass on the Divi Menu. Another clear tell that a site was built using the Divi Theme is that notorious default Divi Menu. Now Elegant Themes do not completely leave you in a lurch here as they give you some basic options via the Theme Customizer, but if you want to do anything a little fancier, you’d need to either know CSS, install a plugin, or utilize the Divi Theme Builder.
We know the Divi Theme Builder is still a scary concept for some Divi die-hards out there, but today’s Divi tutorial will take you step-by-step through building out a Divi Menu based on a design we found on dribbble (← linked).
Let’s do this!
			

				
				
				
				
				NOTE: For those of you that might not know dribble, definitely check it out. Dribbble is a great resource to find some design inspiration when you hit a creative block, or just want to see some cool things other designers are creating.
			

				
				
				
				
				PREVIEW:
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Before
			

				
				
				
				
				
			

				
				
				
				
				Design INspiration
			

				
				
				
				
				
			

				
				
				
				
				Result
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Table of Contents
			

				
				
				
				
				
Build a Divi Menu using the Theme Builder
Adding CSS to the Divi Menu in the Theme Builder
Taking things further with Divi Mega Menu & Divi Mobile
Conclusion

			

				
				
				
				
				
					
					
						Difficulty
						Easy
					
				
			

				
				
				
				
				
					
					
						Time
						20 Minutes
					
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Build a Divi Menu using the Theme Builder
			

				
				
				
				
				Let’s start by demystifying the Divi Theme Builder and build out a new Global Header that will contain our Divi Menu and some other elements found on our inspiration site.
			

				
				
				
				
				
			

				
				
				
				
				At first glance, we can see that it consists of 3 columns that contain the logo, the menu, and some text with a phone number. Wait, Divi has all that! To build our Divi Global Header we will need a Row with 3 columns, an Image Module, a Menu Module, and a Text Module.
Easy peasy lemon squeezy.
Alright, so to get going, let’s head to the following area in our Divi Install:
Divi > Divi Theme Builder
			

				
				
				
				
				
			

				
				
				
				
				Add a New Global Header
Add Global Header > Build Global Header
Section Settings
Padding Top/Bottom: 0px
			

				
				
				
				
				You’ll be greeted by the Divi Visual Builder and now we need to add a Row that will be the new home of the required Modules.
			

				
				
				
				
				Add a 3 Column Row (25/50/25)
3-Column Row Settings
DESIGN TAB
Sizing
Equalize Column Heights: YES
SAVE
			

				
				
				
				
				Time to add the image module that will be our site logo. We used the Divi Engine logo, but you can obviously use any logo your little heart desires.
			

				
				
				
				
				Add an Image Module in Column 1
Image Module Settings
CONTENT TAB
Image
Image: Upload or select your fancy logo
DESIGN TAB
Sizing
Max Width: 200px (You might need to play with this depending on your logo image)
SAVE
			

				
				
				
				
				Logo locked in, now it is time for the menu. Please make sure that you already created a menu over at Appearance > Menus which we can use here.
			

				
				
				
				
				Add an Menu Module in Column 2
Menu Module Settings
CONTENT TAB
Content
Menu: Select your menu
DESIGN TAB
Layout
Style: Centered
Menu Text
Menu Font: Poppins

Menu Font Weight: Light

Menu Font Color: #333333

Menu Text Size: 21px
SAVE
			

				
				
				
				
				The last hurdle in the building phase here is to add the text in the far right column. In our example, they are probably using conditional logic to display the hours for the day and this is something you can definitely do in Divi. Check out Part 3 on our Clone Any Online Store Series that covers Conditional Display Logic in-depth if you are curious to learn how this works in more detail.
For now, we will just use plain text.
			

				
				
				
				
				Add an Text Module in Column 3
Text Module Settings
CONTENT TAB
Text
Body (Text View): 
Call Us
0800 123 4567

DESIGN TAB
Text
Text Text Size: 16px
Text Alignment: Right
Heading Text (H3)
Heading 3 Font: Poppins
Heading 3 Font Weight: Bold
Heading 3 Text Size: 26px
SAVE
			

				
				
				
				
				
			

				
				
				
				
				Ok, looking good, we just need to add a little bit of CSS to finish the design.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Adding CSS to the Divi Global Header in the Theme Builder
			

				
				
				
				
				So make our Divi Header fantastic and mimic the effects on the Hinge site, we need to add CSS to achieve 2 things:
			

				
				
				
				
				
					
					
						Vertically Center Modules in their Columns
						
					
				
			

				
				
				
				
				
					
					
						Add the Animated line being drawn on Hover
						
					
				
			

				
				
				
				
				Center Modules Vertically
Let’s start by centering those Modules vertically in their Columns.
3-Column Row > Column 1 > Advanced Tab > Main Element
Add this single line of CSS:
align-self: center;
Repeat this process for Columns 2 & 3.
Now you feel like a super l33t coder because you see those modules floating in mid-air. Great job!
			

				
				
				
				
				
			

				
				
				
				
				 Add Underline Hover Effect
Time to fancy and underline those menu links when you hover over them with the mouse. For this, we will add some CSS to the Divi Theme Options, but first, we need to add a class to our Menu Module to let Divi know where to go apply the CSS.
Menu Module Settings > Advanced Tab > CSS ID & Classes
Add this class in CSS Class:
de-line-menu
			

				
				
				
				
				
			

				
				
				
				
				Now, all that is left is to add our code to the Divi Theme Options and we will have that sexy underline animation when the menu links in the Divi Global Header is hovered.
Let’s head back to the WordPress Dashboard making sure to save our work.
Divi > Theme Options > Custom CSS 
Copy and Paste the code below.
			

				
				
				
				
				Now, all that is left is to add our code to the Divi Theme Options and we will have that sexy underline animation when the menu links in the Divi Global Header is hovered.
Let’s head back to the WordPress Dashboard making sure to save our work.
Divi > Theme Options > Custom CSS 
Copy and Paste the code below.
			

				
				
				
				
				
			

				
				
				
				
				Woohoo, run to the frontend and see what you’ve created! Shock and awe…well…AWE, mostly awe.
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Taking things further with Divi Mega Menu & Divi Mobile
			

				
				
				
				
				This part is not mandatory, so the class is dismissed! Still here? Good. Time to share some Divi Super Powers.
You can do a ton of amazing things with stock Divi, but sometimes you see features on other sites that are must-haves. Things that will set your site so far apart from a Divi site, it could have hitched a ride to Mars with uncle Elon. Two things that come up all the time are Mega Menus and Hamburger Menus on Desktop devices.
Luckily Divi Engine has got your back with two affordable plugins that can do just that and more!
Let’s take a quick look.
			

				
				
				
				
				Divi Mega Menu
In short, a Mega Menu is basically a type of menu where you can add some flair to the boring Divi Menu by allowing you to use other modules other than just plain sleepy text. With Divi Mega Menu you can use the Divi Builder you know to build out complex or simple works of Divi Menu art. Picasso. We even added a couple of unique modules you can use to really set yourself apart.
Did you spot the Mega Menu on our inspiration site from dribbble?
			

				
				
				
				
				
			

				
				
				
				
				This looks awesome and you won’t believe how easy it is to build this out in Divi using Divi Mega Menu and the Divi Builder. We love Mega Menus so much, we actually used a very similar design on our website when you click on Plugins.
			

				
				
				
				
				
			

				
				
				
				
				This is just one example of what is possible when using Divi Mega Menu. We simply built a layout with some blurb modules for each menu link and then applied some hover effects and BAM! One super slick Mega Menu in Divi using skills you already have.
Divi Mega Menu adds tons of extra ways to express your site’s identity with menu overlays, 2 NEW Modules for things like vertical tabs in your Mega Menu, as well as popups that can be triggered from anywhere on the page.
			

				Check out Divi Mega Menu
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Divi Mobile
Don’t let the name fool you, Divi Mobile does more than help you create amazing Mobile Menus for your Divi sites. You can use Divi Mobile to place a Hamburger Menu on your desktop devices as well as create some pretty unique effects.
			

				
				
				
				
				
			

				
				
				
				
				Yep, all that was done using just our little Divi Mobile plugin. Now, this is not some one-trick pony, Divi Mobile will let you set custom breakpoints for showing the mobile menu, give you 6 preset styles for your actual mobile menu, and even let you change the hamburger icon and animations. That and so much more.
			

				Check out Divi Mobile
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Elegant Themes checking out your Divi Menu…
			

				
				
				
				
				
 
 
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				There you have it folks, a quick functional Divi Tutorials that showed you How to Build a Custom Global Header in Divi using the Theme Builder. What is even better, we showed you how to dissect and analyze a design you like and transport it into your Divi abode. 
Go, YOU!
Don’t skimp either, go check out both Divi Mega Menu and Divi Mobile to see how you can start building better Divi Websites.
Definitely drop a comment below to let us know what you think, and for sure share any suggestions.
			

				
				
				
				
				
 
			
			
				
				
				
				
			
				
				
			

The post How to Build a Custom Global Header in Divi using the Theme Builder appeared first on Divi Engine.


Make Divi Buttons not look like Divi Buttons with Global Styles and Divi Global Presets
Divi Engine — Tue, 19 Apr 2022 12:22:46 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Divi Button Upgrades
One of the biggest giveaways that a site was built with Divi is the default Divi Button Styles. This is usually because someone is unfamiliar with Divi, or they just don’t realize how common the theme has become, that they don’t realize these distinct buttons are not unique.
Luckily, Divi has some tools baked right into it that will let you make your Divi Buttons not look like Divi Buttons. Follow along with this installment on how to un-Divify your Divi Sites and stop building Divi Sites that look like Divi Sites.
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				More in this series.
			

				
				
				
				
				
				
				
										
									
				
										
					
											
						 								
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
													
						
										
					
 
				
					
				
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				We are kicking this tutorial series on how to make your Divi sites not look like Divi sites off by fixing those pesky Divi Button styles. The smart folks at Elegant Themes have given us two ways to go on and be all bespoke which are Global Button Styles that you can set in the Theme Customizer, then also Divi Global Presets.
Both of these vary in scope, but you will learn how to use each of them and will be on your way to building less distinctly Divi sites in no time. Not only that, they will make building your Divi Sites a lot more efficient because you are not going and setting styles individually for every single button on your site.
Smart!
			

				
				
				
				
				PREVIEW:
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				
			

				
				
				
				
				Before
			
			

				
				
				
				
				
				
				
				
				
				
			

				
				
				
				
				After
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Table of Contents
			

				
				
				
				
				
How to Create a Global Divi Button Style in the Theme Customizer
How to Create Button Presets using Divi Global Presets
Conclusion

			

				
				
				
				
				
					
					
						Difficulty
						Easy
					
				
			

				
				
				
				
				
					
					
						Time
						10 Minutes
					
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				How to Create a Global Divi Button Style in the Theme Customizer
			

				
				
				
				
				Ok, the first way we will give our shaggy buttons a trim, is to head over to the Theme Customizer to set up some global styles for our Divi Button states.
			

				
				
				
				
				
			

				
				
				
				
				Setting Divi Button styles here will change all Divi Buttons that have default button styling applied to the style you define here. Changing these styles will not affect buttons that are using their own custom buttons styles. You know the setting when you scroll down on the design tab of a module to the Button styles, then flip the switch that says “Use Custom Styles for Button” to YES.
			

				
				
				
				
				
			

				
				
				
				
				To get started, let’s head to a page that has some Divi buttons on it, and make sure that we are logged in to our Divi install. Once there, hover the name of your site and click on Theme Customizer.
			

				
				
				
				
				
			

				
				
				
				
				Here we click on Buttons > Buttons Style.
			

				
				
				
				
				
			

				
				
				
				
				Theme Customizer Button Style Settings
Button Styles (Not Hovered)
Theme Customizer > Buttons > Buttons Style
You can assign any button styles you want here, just know that these styles will be applied GLOBALLY to all buttons if they are set to default.
Button Style Settings
Text Color: White
Background Color: #0fe5a8 (Make sure to slide the opacity up to 100%)
Border Radius: 5px
Select Icon: Pick one you like
Button Font Style: Bold
Button Font: Poppins
Button Styles (Hovered)
Theme Customizer > Buttons > Buttons Hover Style
You can assign any button styles you want here, just know that these styles will be applied GLOBALLY to all buttons if they are set to default.
Button Style Settings
Background Color: rgba(15,229,168,0.5)
Border Radius: 5px
Letter Spacing: 2px
Publish
			

				
				
				
				
				As you were making these changes, you probably notices that they were taking effect immediately to the right of your screen, this is great for finding the perfect combinations that suit your site. When we get to the next step here, you will see why what we did is so helpful because we essentially set the starting point for defining some Divi Button Global Presets for all of the buttons on our site.
Let’s take a look.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				How to Create Button Presets using Divi Global Presets
			

				
				
				
				
				Divi Global Presets offer a little more localized and specific styling to any element or module in Divi. When you save or use a Divi Global Preset, it will apply that style to the entire module where it is being used. This is super useful because now you can use the base button style that you defined in the previous method, and refine styles for different situations.
Let’s say you want a specific look for your product-related buttons, but a different one for post-related buttons, you can create those Divi Global Presets. This saves you time and helps you standardize your development flow.
Let’s take a look at adding a Divi Global Preset for a Divi Button Module by opening a page that has a button module on there, or just creating a new page and adding a button module.
Add a Divi Button Module
			

				
				
				
				
				
			

				
				
				
				
				You’ll notice immediately that your new button immediately has the style applied that you defined in the Theme Customizer which gives you a good starting point. Next we want to open the button settings and then the Divi Global Preset setting to edit the default preset style.
Divi Button Module Settings > Preset: Default > Edit Preset Styles
			

				
				
				
				
				
			

				
				
				
				
				You will see that this reveals something that looks a bit familiar, except that the module settings area now turned grey. This means that you are now editing a Divi Global Preset. You can now click on the Design Tab to customize the default preset for your Divi Button Modules.
			

				
				
				
				
				
			

				
				
				
				
				Divi Button Default Global Preset Settings
You can assign any button styles you want here, just know that these styles will be applied to all Divi Button Modules that are set to default preset.
Design Tab
Button
Use Custom Styles for Button: YES
Button Background: 2-Color Gradient #2b87da and #0fe5a8
Gradient Direction: 25deg
Button Font Weight: Ultra Bold
Button Icon: Pick one you like
Box Shadow
Box Shadow: Option 3
Save
			

				
				
				
				
				
			

				
				
				
				
				Your new Default Divi Global Preset for Button Modules will now look something like this. Try it! Add another button to the page. You will see that it now looks exactly like the other button.
We’ll wrap this up by creating one additional Divi Global Preset for the Divi Button Module.
			

				
				
				
				
				NOTE: You can use the skills you learn here to create Divi Global Presets for any other Divi module. Super handy and efficient.
			

				
				
				
				
				Open Divi Button Module Settings > Divi Button Module Settings > Preset: Default > Create New Preset From Current Styles
			

				
				
				
				
				
			

				
				
				
				
				Divi Button Global Preset Settings
Preset Name: Button Upgrade (or whatever you want, really)
Design Tab
Button
Use Custom Styles for Button: YES
Button Background: Delete the Gradient and set color to solid #5430ce
Button Font Weight: Regular
Button Font Style: To Uppercase
Button Text Shadow: Option 5
Button Text Shadow Color: #0fe5a8
Spacing
Padding Top/Bottom: 0px
Box Shadow
Box Shadow: Option 4
Save
			

				
				
				
				
				
			

				
				
				
				
				When you are done, your Divi Button Module should look something like this bad boy up top. Give the preset a spin by adding another button module on this page, and then setting the preset to the Button Upgrade preset you just created.
As if by magic, your button will be transformed into this new style. Hello, efficiency!
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				We all know what happens to Agent Smith…
			

				
				
				
				
				
 
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				You have just upgraded your Divi-fu level. No more will your mad Divi skills be revealed by buttons that look like just another Divi clone. You can now start each new project by setting those global button styles in the Theme Customizer, then go refine them further by creating a set of Divi Global Presets where they will be used.
Best of all, you don’t need crazy plugins or code to make it so. Enjoy not being a clone, dear friend! And say hello to building Divi Sites that don’t look like Divi Sites.
Definitely drop a comment below to let us know what you think, and for sure share any suggestions.
			

				
				
				
				
				
 
			
			
				
				
				
				
			
				
				
			

The post Make Divi Buttons not look like Divi Buttons with Global Styles and Divi Global Presets appeared first on Divi Engine.


How to un-Divify your Divi Sites Tutorial Series
Divi Engine — Mon, 18 Apr 2022 15:31:07 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Making Divi feel more Bespoke
There is no denying that Divi defaults have a very distinct look and feel. We are not saying it looks bad, but due to the massive popularity of Divi, you can spot a Divi site by looking out for a few key things like the buttons, mobile menus, or headers.
Now you know what they say about too much of a good thing…
If you don’t take the effort to make you Divi site not look like a Divi site, then you look just like other Divi sites, and who wants to be just like the other guys?
This Divi Tutorial Series will help you make those Divi sites not look like Divi sites by un-Divifying those dead giveaways.
 
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				More in this series.
			

				
				
				
				
				
				
				
										
									
				
										
					
											
						 								
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
													
						
										
					
 
				
					
				
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Build Divi Sites that DO NOT Look Like Divi Sites
			

				
				
				
				
				Introducing our latest Tutorial Series here at Divi Engine where we will cover fixing all those Divi nuances that give away that your site was built using the Divi Theme. Not that there is anything wrong with building sites using Divi, but who wants to look like a cheap copy of another site?
Our goal here is to go through fixing those Divi defaults while teaching you some skills and features in Divi that you might not have known about. Sometimes we’ll even offer an additional solution to take your sites to the next level in bespoke-ness heaven.
This page will automatically be updated with the latest installments, so definitely bookmark it for some Divi Tutorials that will change the way you build your Divi sites. We also recommend a sub to our Youtube Channel.
			
			
				
				
				
				
			
				
				
			

The post How to un-Divify your Divi Sites Tutorial Series appeared first on Divi Engine.


The Easiest Way to Add and Display Custom Post Types in Divi
Divi Engine — Tue, 05 Apr 2022 14:51:04 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Like Mac & Cheese, It Just Belongs Together
Who knew learning how to add Custom Post Types to Divi and get them to display along with Advanced Custom Fields using the Divi Theme Builder could be so involved? Like I’m totally ready for a beer cup of tea after all that. Now only if there was a 100% no-code solution that would make adding Custom Post Types and filtering them using beautiful customs loops with Ajax efficiency a breeze…
Lucky for you my dear Divi crusader, Divi Machine will do that and then some. Divi Machine and all things Custom Post Types and Fields were made for each other. But we won’t leave you non-Divi Machine heathens up the creek without a paddle, we’ll recap this series first, and then get to that easy button.

			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				More in this series.
			

				
				
				
				
				
				
				
										
									
				
										
					
											
						 								
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
													
						
										
					
 
				
					
				
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Ok, we have come to the culmination of this 5-part Divi Tutorial Series on How to Add Custom Post Types and Advanced Custom Fields to Divi. We learned a ton of useful skills that you can use in your agency or freelance business without spending a penny on any plugins that have now enabled you to charge more for your services. Building more complex and dynamic sites is a great way to pivot and start earning, but time is money, so we would be remiss if I did not show you one last way you can save time and make more 💵 GREEN 💷 when adding Custom Post Types to your Divi sites.
Enter Divi Machine.
For this Divi Tutorial, we will recap the things we have learned so far, but then we smash that easy button and show you how to work with Divi Custom Posts Types in a whole new way that will save you time and frustration. We’ll cover adding custom post types to Divi, creating custom fields using the Advanced Custom Fields plugin, Creating a Custom Loop Layout using the Divi Builder, Adding Ajax Filter to Divi, and then we’ll briefly cover some additional Divi Machine features that will transform your Divi workflow.
Let’s get busy!
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Table of Contents
			

				
				
				
				
				
Divi Custom Post Types – What we’ve Learned
Adding Custom Post Types with Divi Machine
Adding some Advanced Custom Fields
Adding some Custom Posts to Divi
Creating a Custom Loop Layout using the Divi Builder
Adding Ajax Filters to Divi Post Archive Pages
Other Great Divi Machine Features
Conclusion

			

				
				
				
				
				
					
					
						Difficulty
						Easy
					
				
			

				
				
				
				
				
					
					
						Time
						35 Minutes
					
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Divi Custom Post Types – What we’ve Learned
			

				
				
				
				
				
			

				
				
				
				
				WordPress Custom Post Types and Custom Fields. What are they? And Why You Should Care!
We have learned that Custom Post Types are a way to create your own content types that are specific to your site. Each Custom Post Type you define will have its own set of fields and display options which you can control from the WordPress Dashboard.
This works exceptionally well for content that will have many posts or duplicates such as Team Members, Properties, Used Cars, Recipes, and more. You get the idea!
Now, to help better describe these Divi Custom Post Types you need to add some Custom Fields to them. For example, if you wanted to add a “Recipe” Custom Post Type, the recipe would have its own set of fields for the event title, ingredients, time to cook, images, etc.
You can see the endless amount of ways that this could be beneficial to your aunties’ pickled chicken wing business, and others, of course.
This barely scratches the surface on why you should use Custom Post Types and Fields in Divi, so click the button below to get that deep custom post type massage treatment for free-99.
			

				Full Post
			

				
				
				
				
				
			

				
				
				
				
				How to Add a Custom Post Type to Divi without a Plugin
At first glance, adding Custom Post Types to your Divi install without a plugin by coding it yourself seems like a lot, but this process can be fairly easy when using one of the many Custom Post Type generators in the wild. In this tutorial, we covered how to use a generator by the team over at metabox.io and then add it to your Divi site by editing the functions.php file of your Child Theme.
The keyword here is Child Theme, it is a very bad idea to add some spaghetti code to your Parent Theme’s functions.php file. If you don’t yet know how to make or add a Child Theme to your Divi site, you should check our post on Dynamic Divi Child Themes.
The other benefit here is that by skipping an extra potentially bloated plugin, you stand to also avoid slowing your site down with all that extra bloat.
This is a very valuable Divi tutorial that will teach you how to create even more bespoke solutions for your clients.
			

				Full Tutorial
			

				
				
				
				
				
			

				
				
				
				
				How to Get Started with Advanced Custom Fields (ACF) in Divi?
So what do you do once you’ve added some fancy Custom Post Types to your Divi sites? You pimp them out with some Custom Fields friend! Now what does adding Custom Fields do for your Custom Post Types? Think of the Custom Fields as additional information that helps define and describe your Custom Posts.
For example, if I was creating a Recipe Custom Post Type in Divi, I would probably add some fields like Time to Cook and Ingredients to help better define its purpose and collect information that will be common amongst all the recipes you’ll be adding to your site.
The best tool to do this is the Advanced Custom Fields (ACF) plugin by the team at Delicious Brains. It is easy to use and has an extremely polished and intuitive workflow. In this tutorial, we show you the basics of how to add and use these Custom Fields to enhance and enrich your Custom Post Types.
Regardless of the type of site you are building, adding Custom Fields is basically essential if you are also adding Divi Custom Post Types.
			

				Full Tutorial
			

				
				
				
				
				
			

				
				
				
				
				How to Style a Custom Post Type Template using the Divi Theme Builder
Yewwwww, you are still with us, nice one! Time to use some more of those handy Divi features that just make life so super simple. The one in question here, the Divi Theme Builder is something you should be using on every single Divi site you are building regardless of using Custom Post Types or not. 
The Divi Theme Builder enables you to build custom Divi layouts for both the stock post types you’ll find in any WordPress install, but also the ability to style your Custom Post Types without having to do anything crazy. You build your Custom Post Layouts using the Divi Builder you already know and trust. No real new skills to learn here, you just need to know where to go.
That is exactly what we do here. Together we built a Custom Single Post layout for our Recipe Custom Post Type. We then went a head and showed you how to display those on a page using the Divi blog module. All these features hiding right underneath our noses the whole time.
Excellent!
			

				Full Tutorial
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Adding Custom Post Types with Divi Machine
			

				
				
				
				
				Hey! Yeah, you…got 2 minutes to spare to add a Custom Post Type to your Divi site?
Seriously.
Divi Machine makes adding a Custom Post Type to Divi an absolute sinch and really only takes 2 minutes. So much so I have run out of things to say about it and will just have to show you.
Let’s log into the back end of a Divi site and take a look.
Divi Engine > Add/Edit Post Types > Add New
			

				
				
				
				
				
			

				
				
				
				
				This takes us to the Add/Edit Custom Post Type screen where we will now populate all the different aspects of our Recipe Custom Post Type. There are tons of options here which you can explore on your own, we will focus on the ones that pertain to the mission. Check out the video at the top of the page if you want a little more information.
			

				
				
				
				
				Add a New Divi Custom Post Type
General Settings
Post Type Name: “Recipes”
Description: “Collection of Recipes”
			

				
				
				
				
				Now we need to tell WordPress where we want this new Custom Divi Post Type to be displayed and what icon we want associated with it. We will keep most of these settings at default and just set it up with an icon that makes sense and for that we need go select the dashicon code. 
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Add a New Divi Custom Post Type
Visibility Settings
Admin Sidebar Icon: “dashicons-media-document”
Finding a DashIcon Code
Go to the DashIcons Page

Search for a “Document” icon

Copy the code in Step 2 above
			

				
				
				
				
				We are pretty set now, we will just a couple of extra features in the Advanced Options. Since we want folks to be able to comment on our recipes we’ll enable that and leave the rest as is. Also, since is the last setting we change here, we will go ahead and Save our new Custom Post Type when we are done.
			

				
				
				
				
				
			

				
				
				
				
				Add a New Divi Custom Post Type
Advanced Options
Supports: Check the box next to “Comments”
SAVE
			

				
				
				
				
				And that is seriously all there is to it! Now, you can further change things like labels to change the words that describe adding or removing a new post in our recipes custom post type under the Labels settings, but we won’t be diving into self-explanatory things like that because you folks all have that big 🧠 brain energy.
You’ll also notice something new in your WordPress Dashboard sidebar there, a brand spanking new Recipes menu item.
Take a bow!
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Adding some Advanced Custom Fields
			

				
				
				
				
				Adding some Custom Fields to our Recipe Custom Post Type will help describe each individual recipe with things like how long it takes to cook, how many people it serves, the nutritional information, and pretty much whatever else you feel it needs to have. You can get as creative as you like.
So, on the first assessment, we will need 2 field groups: 
			

				
				
				
				
				
					
					
						Recipe Metadata
						This group will have all the metadata for the recipe.
Prep Time, Time to Cook, and Servings.
					
				
			

				
				
				
				
				
					
					
						Nutrition
						This group will have all the nutritional information for the recipe.
Calories, Fat, Protein, and Carbs.
					
				
			

				
				
				
				
				We covered this in quite some detail in our tutorial on How to Get Started with Advanced Custom Fields in Divi, so check that out if you get a little lost, or watch the video for this tutorial (we will add a timestamped link for you). Below we will go through just the fields and settings for each group.
Custom Fields > Add New
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Recipe Meta Field Group
Field Group Title: “Recipe Meta”
Adding Fields
Prep Time
Field Label: “Prep Time”
Field Type: Range
Instructions: “How long does it take to prepare before cooking.”
Required: NO
Default Value: 0
Minimum Value: 0
Maximum Value: 1000
Step Size: 5
Cook Time
Field Label: “Cook Time”
Field Type: Range
Instructions: “Add the amount of time it takes to cook.”
Required: NO
Default Value: 0
Minimum Value: 0
Maximum Value: 1000
Step Size: 5
Servings
Field Label: “Servings”
Field Type: Number
Instructions: “How many people does this recipe feed?”
Required: NO
Default Value: 1
Minimum Value: 1
Maximum Value: 99
Step Size: 1
Location Settings
This controls where these Advanced Custom Fields will be shown or not shown. We are going to tell it that we want these fields to be associated with the Recipes Custom Post Type.

Rules: Show this field group if [Post Type] [is equal to] [Recipes]
SAVE
			

				
				
				
				
				And that is that one field group down! As Jay-Z would say, 🎵 On to the next one! 🎵
Custom Fields > Add New
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Nutrition Field Group
Field Group Title: “Nutrition”
Adding Fields
Calories
Field Label: “Calories”
Field Type: Range
Instructions: “How bad is this for you?”
Required: NO
Default Value: 0
Minimum Value: 0
Maximum Value: 100
Step Size: 1
Fat
Field Label: “Fat”
Field Type: Range
Instructions: “How much fat is in here?”
Required: NO
Default Value: 0.0
Minimum Value: 0.0
Maximum Value: 100
Step Size: 0.1
Protein
Field Label: “Protein”
Field Type: Range
Instructions: “How swole does this dish make you?”
Required: NO
Default Value: 0.0
Minimum Value: 0.0
Maximum Value: 100.0
Step Size: 0.1
Carbs
Field Label: “Carbs”
Field Type: Range
Instructions: “How many carbs are in here?”
Required: NO
Default Value: 0.0
Minimum Value: 0.0
Maximum Value: 100
Step Size: 0.1
Location Settings
This controls where these Advanced Custom Fields will be shown or not shown. We are going to tell it that we want these fields to be associated with the Recipes Custom Post Type.

Rules: Show this field group if [Post Type] [is equal to] [Recipes]
SAVE
			

				
				
				
				
				Ok, we nailed it. Now you have some fancy fields for that fancy custom post type, but, we need some data to work with.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Adding some Custom Posts to Divi
			

				
				
				
				
				Time to bust out those working gloves folks! We want to be able to get a good feel of what our Recipe custom post type will look like both on the single recipe post page as well as on the Recipe index page, so we need to add some dummy data in there to do so. About 12 should do.
For this, you’ll need to go over to your new Recipe custom post type in the WordPress Dashboard sidebar and get cracking with adding New Recipes. We will walk you through one dummy recipe and then you take the reigns and create more until there are at least 10.
Recipes > Add New
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Add New Recipe
Basic Recipe Details
Recipe Title: “Recipe Number #1”
Body: “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan semper nunc, a euismod dolor mollis at. In vitae nunc ac urna laoreet semper. Aenean gravida at quam in tristique. Phasellus at mauris tempor, lobortis nisi vel, egestas urna. Fusce id sem varius lacus efficitur mattis a sed nulla. Aliquam erat volutpat. Fusce accumsan condimentum metus. Nulla egestas leo quis justo suscipit pretium. Morbi scelerisque, erat vitae accumsan sagittis, arcu metus posuere lorem, vehicula dictum risus sapien vitae lacus. Aliquam erat volutpat. Donec pulvinar tincidunt lorem, sed facilisis neque elementum eu. Maecenas eu lorem rhoncus, vehicula arcu ut, eleifend velit. Donec tincidunt convallis dolor.”
We just generated some Lorem Ipsum placeholder text.
Recipe Tags: Add or select a tag. Our first one is “Fish”.
Featured Image: Either use an image you have or download one from pexels.com
Custom Recipe Fields
Recipe Meta
Prep Time: 15
Cook Time: 45
Servings: 2
Nutrition
Calories: 100
Fat: 1.6
Protein: 12.2
Carbs: 7.5
SAVE
			

				
				
				
				
				Now do that a bunch more times!
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Creating a Custom Loop Layout using the Divi Builder
			

				
				
				
				
				The ability to build your own loops is one of the most useful things you will learn in Divi Machine as this is what WordPress used to display all of your awesome posts. This goes for both the standard WordPress posts as well as the Custom Post Types you add to your Divi site.
What makes Divi Machine so great is that it has broken down all the elements of a loop into individual modules, and even added a bunch, that together turn you into a Loop Building Ninja! We will now build a quick loop that will hit on a bunch of the basic features and skills you need to build amazing Divi sites. It won’t be the prettiest thing you ever see as we will focus on showing how to use Divi Machine to build a loop, I’ll be leaving the design skills to all of you!
Divi > Divi Library > Add New
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Add New Layout
Layout Name: “Recipe Loop”
Layout Type: Layout
Submit > Build from Scratch > Add a Single Column Row
Section Settings
DESIGN TAB
Margin: 0px 0px 0px 0px
Padding: 25px 25px 15px 15px
Rounded Corners: 25px
Box Shadow: Option 1
SAVE
Row Settings
DESIGN TAB
Use Custom Gutter Width: YES
Gutter Width: 1
Width: 95%
Max-Width: 2560px
Margin: 0px 0px 0px 0px
Padding: 0px 0px 0px 0px
SAVE
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Building the Custom Loop
Add a Thumbnail - Divi Machine module
Thumbnail – Divi Machine
CONTENT TAB
Enable Title Tag: NO
Image Style: Image Only (no overlay)
Visual Builder Post: Recipes
SAVE
Add a Post Title - Divi Machine module
Post Title – Divi Machine
CONTENT TAB
Title HTML Tag: H2
Link Title to Single Page: YES
Visual Builder Post: Recipes
SAVE
Add a Repeater/Table/Tabs - Divi Machine module
Repeater/Table/Tabs – Divi Machine
CONTENT TAB
Repeater Type: ACF Items
Grid Columns: 3
Add New ACF Item +
Repeater Custom Label: “Prep Time”
ACF Name: Prep Time – Recipe Meta
Suffix: ” Minutes”
Use Icon: YES
Icon: Search or select an icon that makes sense.
SAVE
Add New ACF Item +
Repeater Custom Label: “Cook Time”
ACF Name: Cook Time – Recipe Meta
Suffix: ” Minutes”
Use Icon: YES
Icon: Search or select an icon that makes sense.
SAVE
Add New ACF Item +
Repeater Custom Label: “Servings”
ACF Name: Servings – Recipe Meta
Suffix: ” Servings”
Use Icon: YES
Icon: Search or select an icon that makes sense.
SAVE
Add a Divider module
Divider
CONTENT TAB
Show Divider: YES
DESIGN TAB
Padding Top: 15px
SAVE
Add a Repeater/Table/Tabs - Divi Machine module
Repeater/Table/Tabs – Divi Machine
CONTENT TAB
Add New ACF Item +
Repeater Custom Label: “Calories”
ACF Name: Calories – Nutrition
Suffix: ” Calories”
SAVE
Add New ACF Item +
Repeater Custom Label: “Fat”
ACF Name: Fat – Nutrition
Suffix: ” g”
SAVE
Add New ACF Item +
Repeater Custom Label: “Protein”
ACF Name: Protein – Nutrition
Suffix: ” g”
SAVE
Add New ACF Item +
Repeater Custom Label: “Carbs”
ACF Name: Carbs – Nutrition
Suffix: ” g”
SAVE
			

				
				
				
				
				Phew, that was it. Now we didn’t go too crazy on design here, but when you are done, you should have something that looks like this:
			

				
				
				
				
				
			

				
				
				
				
				Wow, such a transformation already. Who knew it would be so quick and easy? Thing is, as our recipe site grows and we get more and more posts in there, we will need a convenient way to filter through all this content. Next up, we will add the best and most flexible way to do that!
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Adding Ajax Filters to Divi Post Archive Pages
			

				
				
				
				
				The Ajax filters are so powerful, that we packaged it as a whole separate plugin for those that did not need all the features found in Divi Machine. Now we will go and add the Ajax Filters to a Recipe Index page that will help sort through larger datasets.
Pages > Add New > Build from Scratch > Add a 2-Column Row (1/3) and (2/3)
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Adding Ajax Filters
Add a Archive Loop - Divi Machine module to the second column
Archive Loop – Divi Machine
CONTENT TAB
Post Type: Recipes
Custom Loop Layout: Recipe Loop
Choose how to display load more posts: Infinite Scroll
SAVE
Add a Filter Posts - Divi Machine module
Filter Posts – Divi Machine
Filter Update Type: Update after each field change
Add New Filter Item +
CONTENT TAB
Admin Filter Name: “Search”
What do you want to search/filter: Search Text
Post Type: Recipes
Placeholder Text: “Search recipes…”
DESIGN TAB
Fields Background Color: #f4f4f4
SAVE
Add New Filter Item +
Admin Filter Name: “Calories”
What do you want to search/filter: Advanced Custom Field (ACF Plugin)
Post Type: Recipes
ACF Name: Calories – Nutrition
Filter Type: Number / Range
Filter Type Value: Numeric
Range to Number: 3000
SAVE
Add New Filter Item +
Admin Filter Name: “Main Ingredient”
What do you want to search/filter: Tags
Post Type: Recipes
Filter Type: Checkbox / Radio Buttons
Display Filter Count: YES
Range to Number: 3000
SAVE
			

				
				
				
				
				Ding ding, we are dunzo! If you followed along, your piece of interpretive art should look something like this:
			

				
				
				
				
				
			

				
				
				
				
				I keep saying this, but she ain’t pretty. What she is though is super fast and functional. When you adjust any of the filter values it will filter the recipes accordingly instantly with the power of Ajax and if you scroll down it will load more results with infinite scroll. Not bad for a 5 minutes job.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Other Great Divi Machine Features
			

				
				
				
				
				Where to begin, or rather, where to end? Divi Machine is a pretty robust and complicated beast, but such is its nature. Luckily we have some awesome support and constantly improving documentation to help you to utilize the plugin to its full extent. And yeah, speaking of full extent, let’s talk about a couple of great Divi Machine features that you need to be using to build out one of your upcoming projects, or enhance your existing projects.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Linked Post Types
			

				
				
				
				
				
			

				
				
				
				
				Divi Machine lets you link two related post types, or any really, but related is probably best 😂
This is extremely useful when you have relationships that are one-to-many. No, it is not an episode of the “Real Housewives” (you can have my man card). A one-to-many relationship is when you have one post type that will have multiple posts from another post type that are related to it.
I’ll give you two examples:
 
Real Estate Listing Site
When you are building a site with real estate listings, it would probably be good if your agents could be associated with all the properties they are representing. You could then create a page that lists all of that agent’s listings, and you could display the related agent on the individual property listing pages.
Here, we have a one-to-many relationship between the Agent custom post type (one) and the Property custom post type (many).
Staff or Team Pages
When working on a site for a business they might have the need for a well-organized team or staff page. Depending on the size of the company, it may have different departments or regions, and each has its employees that work there. Each employee would be associated with their department or region, so with linked post types, you can create pages that would list the employees for each region or department.
Here, we have a one-to-many relationship between the Department or Region custom post type (one) and the Employee custom post type (many).
			

				Linked Post Types Demo
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				ACF Galleries without ACF Pro
			

				
				
				
				
				
			

				
				
				
				
				Divi Machine allows you to create both Galleries and Sliders with your images in Advanced Custom Fields without having to purchase the PRO version of ACF. We are able to group together individual image fields and use some genius-level code to display ACF Galleries and Sliders in your Divi Layouts.
It is super simple to use, and as you can see, they look absolutely fantastic!
			

				ACF Galleries Demo
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Custom Post Types on a Map
			

				
				
				
				
				
			

				
				
				
				
				Probably one of the most underrated features in Divi Machine is the ability to display your Divi Custom Posts that have an address custom field as a pin on a Google Map. This can have so many uses that will enhance any site where geography is pretty important. We’ve seen clients use this for Event Listing sites, Real Estate Listing sites, Business Locations pages, and so much more.
We also recently added map clustering which will cluster posts together that are relatively close to each other.
			

				Custom Post Type Map Demo
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				We ran a simulation of what adding Custom Posts Types to Divi was like WITHOUT Divi Machine
			

				
				
				
				
				
 
 
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				I really hope you all enjoyed this Divi Machine tutorial on The Easiest Way to Add and Display Custom Post Types in Divi. We know you will go on to build some awesome Divi sites using tools like Ajax Filters, Custom Loop Layouts, Linked Post Types, and more. Our goal is to keep adding value to your agency through in-depth content just like this Divi tutorial.
Definitely head to our Youtube Channel and subscribe to make sure you don’t miss a single thing because this is going to be valuable for you and your design agency!
Catch you folks next week!
			

				
				
				
				
				
 
			
			
				
				
				
				
			
				
				
			

The post The Easiest Way to Add and Display Custom Post Types in Divi appeared first on Divi Engine.


Customize Divi Form Notices Using the Divi Builder (or with CSS)
Divi Engine — Tue, 22 Mar 2022 13:58:56 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Say NO to Ugly Divi Form Notices
Yes yes, beauty is all about what is on the inside and not the outside, but what if you can have both? Would you say no? Wouldn’t you want to know how to create Custom Divi Form Notices Using the Divi Builder along with a little plugin called the Divi Form Builder? I sure do, and when you see how quick and easy it is to do, so will you.
These Divi Form Notices are a great way to convey extra information to the user after they have completed your form. Some uses could be next steps, a coupon code or just a general thank you for them being them.
Why don’t you join me as I explore one of the many features you’ll find in this solid 10 in both the beauty and brains department. Just like colored contact lenses, you don’t need to tell people you wear them, all they’ll do anyway is stare in awe.
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				BUT!
And there always is a but, but let me start by showing you how one would do some basic styling just using some sweet sweet lines of CSS code. After that, we’ll do something we’ve not done in a while, which is to do a quick tutorial on one of our plugins that just basically makes life 1000% easier.
We’ll dive into how you’d go about creating custom success or failed Divi form notices. To do this we’ll be using Divi Form Builder and the Divi Builder you already know about as well as that one itchy spot you can’t reach that drives you nuts.
Good news! Divi Form Builder was designed to scratch the itches the stock Divi Form Module does not. In about 5 minutes flat we will build a form using Divi Form Builder, build a form notice layout using the Divi Builder, then assign that layout and scratch that itch. Now, as always, I ramble on and get into more detail in the videos so I definitely recommend you watch that instead, but here follows the also expertly crafted text version.
Ready?
			

				
				
				
				
				Preview:
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				BEFORE
			

				
				
				
				
				
			
			

				
				
				
				
				
				
				
				
				
				AFTER
			

				
				
				
				
				
			
			

				
				
				
				
				
				
				
				
				
				AFTER ++
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Table of Contents
			

				
				
				
				
				
PART 1

Style the Divi Form Success Message with CSS


PART 2

Building the Divi Form Builder Layout
Building the Custom Divi Form Notice Layout
Assigning the Divi Form Notice Layout to the Form


Conclusion

			

				
				
				
				
				
					
					
						Difficulty
						Easy
					
				
			

				
				
				
				
				
					
					
						Time
						15 Minutes
					
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				PART 1
			

				
				
				
				
				Style the Divi Form Success Message with CSS
			

				
				
				
				
				So let’s chat quickly about the limitations here. Divi definitely allows you to change the text of your Success and Failed form notices, but where it lacks is in the ability to easily style the text that is displayed in those notices. For this, we need to use a little workaround that requires some CSS. It is also important to note that all we can do here is style the text, we can’t use the Divi Builder or anything fancy like that, so temper your expectations, hehe.
Let’s do that, shall we?
First, we will add some CSS to the Divi Theme Options that will style our Divi Form Success Notices.
Divi > Theme Options >  Custom CSS
			

				
				
				
				
				
			

				
				
				
				
				Copy and Paste the code below in the Custom CSS box.
			

				
				
				
				
				
			

				
				
				
				
				Voila! You already have a somewhat better-looking Divi Form Notice going on. This was pretty easy, but your options are also pretty limited.
Now, let’s get out the big guns and look at how we can completely transform your Divi Forms using the Divi Form Builder plugin.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				PART 2
			

				
				
				
				
				Building the Divi Form Builder Layout
			

				
				
				
				
				How exciting! You own the Divi Form Builder plugin, so the power to create custom Divi form notices with the Divi Builder rests in your hands. Go you! Now before we gel our hair, bust out the cologne, and get all fancy, we first need to set the stage by building a form for our custom Divi form notice.
Let’s do that, shall we?
To start, Add a New Page, Single Column Row, and Divi Form Builder Module.
Pages > Add New > Add a Single Column Row > Add a Divi Form Builder Form Module
			

				
				
				
				
				
			

				
				
				
				
				Divi Form Builder Form Module Settings
Add New Form Field
Field Options
Field Title: “Name”
Type: Input Field
Required Field: YES
Layout Options
Field Label Position: Top
Placeholder Text: “Enter your name”
Enable an Icon on the input: YES
Icon: Search “person” and add an icon
SAVE
Add New Form Field
Field Options
Field Title: “Email”
Type: Email Field
Required Field: YES
Layout Options
Field Label Position: Top
Placeholder Text: “Enter your email”
Enable an Icon on the input: YES
Icon: Search “email” and add an icon
SAVE
Add New Form Field
Field Options
Field Title: “Sign Here”
Type: Digital Signature Field
Required Field: YES
Layout Options
Field Label Position: Top
SAVE
			

				
				
				
				
				When you’re done, you should see something like the image below after you submit the form.
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Building the Custom Divi Form Notice Layout
			

				
				
				
				
				Boom, we got that Divi Form Builder form done with our unique digital signature field in no time, so now we can get to the fun and how you how to create a custom Divi form success message using the Divi Builder and Divi Form Builder. Yes, those sound the same.
Divi > Divi Library > Add New
Layout Name: “Success Notice”
Layout Type: Layout
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Great, now we just need to structure this layout with the needed rows and modules. You definitely shouldn’t build the layout I’m building because I am a terrible designer, here you have the freedom to create what you want. Just makes sure it conveys the information to the user that you want them to know AFTER submitting the form.
Let’s add a Two-Column Row then a Text Module.
			

				
				
				
				
				Text Module Settings
CONTENT TAB
Text
Body(Text View):
Thank you!

We appreciate you submitting our form, here is a coupon for ya.
DESIGN TAB
Text
Text Font Weight: Light
Text Text Color: #2d3436
Text Text Size: 21px
Text Letter Spacing: 1px
Heading Text (H1)
Heading Font Weight: Ultra Bold
Heading Text Color: #2d3436
Heading Text Size: 47px
SAVE
			

				
				
				
				
				We will add some spice by including a coupon code for folks that submitted their form. Do note that we won’t be actually creating the coupon code, this is just to demonstrate a use-case for the custom Divi from notice.
Let’s add another Text Module.
			

				
				
				
				
				Text Module Settings
CONTENT TAB
Text
Body: “COUPON CODE: YOURCOUPON”
Background
Background Color: #f4f4f4
DESIGN TAB
Text
Text Text Size: 22px
Spacing
Padding Top/Bottom/Left/Right: 15px
Border
Border Width: 1px
Border Color: Red
Border Style: Dashed
SAVE
			

				
				
				
				
				
			

				
				
				
				
				Right now we are at the halfway point and your form should look something like this. Now we’ll wrap things up for this Custom Divi Form Notice layout by adding some extra bells and whistles.
Let’s add an Image Module in the second column.
			

				
				
				
				
				Image Module Settings
CONTENT TAB
Image
Image: Pick a portrait photo from Pexels.com
DESIGN TAB
Sizing
Max Width: 300px
SAVE
			

				
				
				
				
				Let’s wrap it up by adding some styling to the Row.
			

				
				
				
				
				Row Settings
DESIGN TAB
Spacing
Padding Top/Bottom/Left/Right: 50px
Border
Border Width: 1px
Border Color: #2d3436
Border Style: Dotted
SAVE
			

				
				
				
				
				
			

				
				
				
				
				All done, now all that is left to display this custom Divi Form Notice is to assign the layout in the Divi Form Builder Form Module.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Assigning the Divi Form Notice Layout to the Form
			

				
				
				
				
				Down to the last super simple step, we just need to head back to the Page we created in the first step and go assign this custom Divi form notice to the Divi Form Builder form we created. This is as easy as 1-2-3 so let’s go.
Pages > Edit Page > Form Settings
			

				
				
				
				
				
			

				
				
				
				
				Divi Form Builder Form Module Settings
CONTENT TAB
Notices
Success Message Type: Divi Layout
Success Message Layout: Success Message (or whatever you named the layout you created)
SAVE
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				And that is it! After you submit your form now, it should display this custom Divi Form Notice. Not too shabby!
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Formidable? Not so much…
			

				
				
				
				
				
 
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				Sorry, I forgot to tell you to boil some water for your coffee before we started learning how to create Custom Divi Form Notices Using the Divi Builder and our Divi Form Builder plugin because that would have been ready just about now. My bad. That said, hopefully, you followed along and are now saddled with the skills needed how to quickly build some amazing notices that will convey extra information, convert visitors into customers, or just add some pazazz to your Divi sites.
Definitely head to our Youtube Channel and subscribe to make sure you don’t miss a single thing because this is going to be valuable for you and your design agency!
Catch you folks next week!
			

				
				
				
				
				
 
			
			
				
				
				
				
			
				
				
			

The post Customize Divi Form Notices Using the Divi Builder (or with CSS) appeared first on Divi Engine.


How to Style a Custom Post Type Template using the Divi Theme Builder
Divi Engine — Mon, 14 Mar 2022 09:29:32 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Make your posts look purrrdy
So what good is adding all these fancy custom post types without knowing how to create a Custom Post Type Template using the Divi Theme Builder? We want beauty and brains here, and lucky for us, Divi is so versatile that it includes some basic tools to help you achieve just that!
Not only that, there are some other magic tricks you can do with conditional logic to make your client’s jaws drop. Talk about that cushy custom-coded feeling with a “simple” page builder like Divi.
Divi FTW
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				More in this series.
			

				
				
				
				
				
				
				
										
									
				
										
					
											
						 								
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
													
						
										
					
 
				
					
				
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				In this Divi tutorial, we walk you through how to use the Divi Theme Builder to create Layout Templates for your Custom Post Types and Custom Fields. Now, this is a continuation of a series of tutorials on using and adding Custom Post Types and Custom fields using various methods, but you can pick any installment to learn what is most important to you.
For this installment, we’ll drop some knowledge on you regarding what the Divi Theme Builder is in case you’re still using Divi 3.0, we then look and how you can create a Custom Post Type template using the Divi Theme Builder, and lastly we’ll show you how to index all your Custom Post Types using the Divi Blog Module.
As always, we recommend you watch the video as we often get into some deeper details, but we won’t leave you hanging and outline the main concepts below.
Let’s do this!
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Table of Contents
			

				
				
				
				
				
What is the Divi Theme Builder?
Build a CPT Layout using the Divi Theme Builder
Build a CPT Archive Page with the Divi Blog Module
Conclusion

			

				
				
				
				
				
					
					
						Difficulty
						Easy
					
				
			

				
				
				
				
				
					
					
						Time
						10 Minutes
					
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				What is the Divi Theme Builder?
			

				
				
				
				
				
			

				
				
				
				
				It can be easy to struggle with distinguishing between the Divi Theme vs the Divi Builder vs the Divi Theme Builder vs the Divi Library. Now you say that 3 times fast! They all have pretty much the same name, we get it, so maybe we’ll do a post soon on the intricate differences between these 3 terms.
For today, however, we want to learn how to create a Custom Post Type template using the Divi Theme Builder, so we will focus on that.
Here is the Elegant Themes definition on the Divi Theme Builder:
“The Divi Theme Builder is an interface within Divi that allows you to use the Divi Builder to construct theme templates and assign those custom templates to pages or posts across your theme (including custom post types like Divi Projects and WooCommerce Products and Pages). With the Theme Builder, you have complete control over every single element of your website. And because you have the power to use or exclude templates on any page or post throughout your site, there is really no longer any need to manually edit a theme template file ever again.”
So let’s dissect what that means.
It is basically an interface that blends the Divi Builder and Divi Library which combined, enables you to build out (almost) any part of your Divi site. Common uses of the Divi Theme Builder are to create either a global navigation header or a footer for all of the pages on your site. Previously this would have taken either an additional plugin or some extra code. The fun thing here is that it goes further than that, it lets you make other changes like creating set layouts for your blog pages, custom posts type, WooCommerce products, 404 pages, search results pages, you, get, the, idea, right?
In short, with the Divi Theme Builder, you can create a layout for (almost) every single part of your Divi site that would have previously required either custom code, or an additional plugin.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Build a CPT Layout using the Divi Theme Builder
			

				
				
				
				
				I kinda feel like a genius already, but just to be safe, let’s run through how we will create this custom post type template in the Divi Theme Builder step-by-step. We’re not going for any awwwards here in regards to design, but rather want to focus on the “how”. You guys can then use your superior design skills to doll up the look of your layout templates.
We’ll do this in a few phases:
			

				
				
				
				
				
					
					
						Add the Theme Builder Template
						
					
				
			

				
				
				
				
				
					
					
						Build the Layout
						
					
				
			

				
				
				
				
				
					
					
						Add our ACF Fields using Dynamic Content
						
					
				
			

				
				
				
				
				Alright, so to get going, let’s head to the following area in our Divi Install:
Divi > Divi Theme Builder
			

				
				
				
				
				
			

				
				
				
				
				
					
					
						Add the Theme Builder Template
						
					
				
			

				
				
				
				
				Divi Theme Builder
Add New Template > Scroll down to Recipes (or your CPT) > Check All Recipes > Create Template
Now you’ll see that All Recipes has been added and we can tell Divi that we want to replace the default template for this Custom Post Type.
			

				
				
				
				
				
			

				
				
				
				
				All Recipes
All Recipes > Add Custom Body > Build Custom Body
And this will load the Visual Builder you already know, so it should feel pretty intuitive. I prefer to work in Divi “module view”, but you do you, the process won’t really change here.
			

				
				
				
				
				
					
					
						Build the Layout
						
					
				
			

				
				
				
				
				Displaying the Post Title and Featured Image
Add a Single Column Row and Post Title Module
Add a New Single Column Row > Add a Post Title Module
You’ll see that by just doing this you have a bunch of dynamic data being pulled automatically like the Recipe Title, Recipe Image, and some Meta Data.
We’ll leave the Row Settings as is, but you can play with some of the Post Title settings. The main functional feature to highlight here are the Elements that you can toggle on and off in this module to control what is displayed.
			

				
				
				
				
				
			

				
				
				
				
				Displaying the Content of the Recipe CPT
Add a Single Column Row and Post Content Module
Add a New Single Column Row > Add a Post Content Module
Again, instantly you’ll see that by just doing this a bunch of placeholder dynamic data is being shown automatically. This will give you an idea of what your post content will look like when it is displayed, but to see it in action, you’ll have to save your template, and then because you added a new template in the Divi Theme Builder, you’ll need to save that also.
Click on Save in the bottom-right corner > Close the Template > Then click Save Changes in the top-left corner.
Now you can go preview any of your Recipe Custom Posts and you will see everything we’ve done so far. You’ll notice something is missing…your ACF fields, in this case, our Time to Cook and Ingredients.
			

				
				
				
				
				
			

				
				
				
				
				NOTE: It is very important to save this screen when you initially add a new template because this saves that layout to that template. Confusing, I know, but trust and do this every time you add a new template. I learned the hard way.
			

				
				
				
				
				
					
					
						Add our ACF Fields using Dynamic Content
						
					
				
			

				
				
				
				
				Showing your ACF Fields in the Template
Add a Two Column Row
Add a New Two Column Row > Add a Text Module
Presto! You get the basic placeholder text you always see, but let’s fix that!
Text Module Settings
Text
Body > Delete the Placeholder Content > Click on the Dynamic Content Icon (see image below)
			

				
				
				
				
				
			

				
				
				
				
				Displaying our Time to Cook ACF Field
Scroll to ACF: Recipe Fields > Select Time to Cook
This will present you with some new options as it relates to the field. We will add a label as well as a unit. All these two things really are, is the text that will be displayed before and after the contents of your ACF field. Be sure to use spaces here appropriately and don’t copy the quotation marks.
Time to Cook
Before > “Time to Cook: “
After > ” Minutes“
Displaying our Time to Cook ACF Field
To display the ingredients we will do the same as above, but we will add a text module to the second column in the row.
Scroll to ACF: Recipe Fields > Select Ingredients
Again, same as before we want to create some context.
Ingredients
Before > “Ingredients: “
			

				
				
				
				
				
			

				
				
				
				
				All done with learning how to style your Custom Post Type templates using the Divi Theme Builder! But ad you know, we are all about the bonus content here at Divi Engine. The video shows you some extra Divi Conditional Logic Settings that will further enhance more complex layouts.
And before we sign off, what use is it having these custom post type templates created, but we don’t index all our Recipes somewhere?
Let us show you one way to do that real quick.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Build a CPT Archive Page with the Divi Blog Module
			

				
				
				
				
				Setting up those Custom Post Type templates using the Divi Theme Builder wasn’t too bad, was it? Well, you are in for a ride my friend! Just kidding, this part is even easier 😁
One of the ways to show an index of all the recipes (or any other custom post type) you have added to your site you just need to create a page with a single module. We’ll use the Blog Module for this no matter how counterintuitive that may sound to you.
Let’s take a look!
			

				
				
				
				
				Display All your Custom Post Types using the Divi Blog Module
Let’s start on a new page by going to Pages > Add New
Add Section, Row, and Blog Module
Add a New Section > Add a New Single Column Row > Add a Blog Module
Blog Module Settings
Content Tab
Post Type > Recipes
Yeah, that is it! You should instantly see your recipes appear on the page.
			

				
				
				
				
				
			

				
				
				
				
				Told you it was quick! Now, I know this is not the only way to do this. And yep, I know it is not that pretty, but it works, and that was the goal of today’s tutorial on showing you how to create a custom post type template using the Divi Theme Builder. Winner, you are one!
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Your CPT looking at you working in the Theme Builder…
			

				
				
				
				
				
 

			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				So here we are, what sounded like a rather intimidating topic turned out to be as easy as some Divi Theme Builder pie. Today we armed you with the knowledge on how to create layout templates for your Custom Post Types and Fields using the Divi Theme Builder, no extra plugins required. We know the result ain’t pretty, but the beauty here comes from within, so how you doll it up is between you and the Design Tab.
Now, if you found yourself lost somewhere Beef Cake and Custom Post Type, do yourself a huge solid and check out the other posts we did on using Custom Post Types and Fields in Divi. You’ll build some pretty amazing sites with this knowledge.
Definitely drop a comment below to let us know what you think, and for sure share any suggestions.
			

				
				
				
				
				
 
			
			
				
				
				
				
			
				
				
			

The post How to Style a Custom Post Type Template using the Divi Theme Builder appeared first on Divi Engine.


How to Get Started with Advanced Custom Fields (ACF) in Divi
Divi Engine — Tue, 01 Mar 2022 11:55:42 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Divi Custom Post Types, but with BLING
Advanced Custom Fields go together with Divi Customer Post Types like macaroni and cheese baby! It is just SO much better with it and you should never again build a site with Custom Post Types that does not include this enhancing plugin.
No, really.
Advanced Custom Fields or ACF as it is affectionately called in the community adds depth and complexity to your Divi Custom Post Types and you know what that means… more bespoke Divi websites.
			

				
				
				
				
				
 
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				More in this series.
			

				
				
				
				
				
				
				
										
									
				
										
					
											
						 								
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
													
						
										
					
 
				
					
				
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				I hear some folks out there already, “Why don’t you just use the tools already in WordPress and Divi to add some Custom Fields to your Custom Post Types?“. This is a valid question, but if you followed along with our post on Adding Custom Post Types to Divi WITHOUT a Plugin you see why this is not the best solution.
The truth is that vanilla Divi does NOT give you a ton of flexibility when it comes to adding Custom Fields. You are limited to text fields, you can’t really group them, and displaying them can get confusing. This is why we prefer using a powerful and very free plugin called Advanced Custom Fields (ACF). Now, there is a PRO version, but the free version is already all that is needed in most cases for most users.
With Advanced Custom Fields installed on your Divi site, you can add many different fields types like range sliders or images, they can be grouped, and you can use some basic conditional logic to control how they are used.
Let’s take a look at how we can use this incredibly functional plugin to expand our Recipe Custom Post Type.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Fields so Advanced & Custom like Xzibit is about to show up.
			

				
				
				
				
				
 
 
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				Yeah, you thought we were one adding value by teaching you how to add custom post types to your Divi sites without code, but little did you know that we were just getting started. Advanced Custom Fields create a lot more context to your Divi Custom Post Types and enable you to offer a new level of custom Divi Website development.
Now you should definitely stick around because we will be covering more valuable skills in this series such as building layouts for your custom post types and fields using the Divi Theme Builder.
Definitely head to our Youtube Channel and subscribe to make sure you don’t miss a single thing because this is going to be valuable for you and your design agency!
Catch you folks next week!
			

				
				
				
				
				
 
			
			
				
				
				
				
			
				
				
			

The post How to Get Started with Advanced Custom Fields (ACF) in Divi appeared first on Divi Engine.


How to Add a Custom Post Type to Divi without a Plugin
Divi Engine — Wed, 23 Feb 2022 15:39:51 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				A Recipe for Success
Let’s think of Divi Custom Post Types as a defining factor in building Divi Websites that are truly bespoke. Yeah, wow, I went for the jugular there, but it is not without purpose. I used to shun Custom Post Types myself, but once you see how easy it is to add Custom Post Types to Divi, and what you can achieve, you will almost never build another site without it.
I know, yet another Divi “guru” being their own prophet…but bear with me, I’m here to help. I’m going to walk you through a very real example of adding a Custom Post Type to Divi (without a plugin) which should get your gears turning.
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				More in this series.
			

				
				
				
				
				
				
				
										
									
				
										
					
											
						 								
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
													
						
										
					
 
				
					
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				NOTE: Ok, so if much of what we said above seems like a foreign language, quickly take a minute to go read our previous post about Divi Custom Post Types and Fields and why you want to use them.
			

				
				
				
				
				Oh, hey there! Welcome to the first step in some real game-changing skills for your future Divi Theme projects. Totally not for SEO purposes, let me reiterate what we are doing in this Divi tutorial. We will be adding a custom post type to our Divi website using no plugins, just a bit of code. I know, exciting, and it should be!
To keep things relevant, we will be feeding off our previous post detailing Custom Post Types and Fields in Divi and why your ears should pay attention. We will continue with our example of adding a Recipes Custom Post Type to Divi. And no, you do not need to know PHP to do any of this, we will be using a handy Custom Post Type Generator to be the code brain for our project.
Let’s gooooo!
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Table of Contents
			

				
				
				
				
				
Divi Custom Post Types, Coders Only?
How to Generate Code for a Divi Custom Post Type
Adding the Code for your Custom Post Type to Divi
Display Your New Custom Posts with Divi
Conclusion

			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Divi Custom Post Types, Coders Only?
			

				
				
				
				
				Nope. Thank you for coming to my Ted Talk.
Couldn’t resist, but seriously, while being a coder is a huge advantage, it is definitely not a barrier to entry here. But, don’t get me wrong, not being one will only marginally limit you when implementing Custom Post Types in Divi. There exists a bevy of plugins that will allow you to add Custom Post Types to WordPress. Then you can always add code to create your new bespoke custom post types, but this option gets scary.
Enter Divi Engine, here we are to show you how you can add a “coded” Custom Post Type to your WordPress site using code, without writing a single line of code. Not a typo, you read that right, we will use a generator that collects a bit of information from you, which then spits out a copy/paste solution for you.
Wild, I know, but why reinvent the wheel? The tool we will be using to generate the code for our Recipe Custom Post Type for Divi is made by the team at Meta Box.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				How to Generate Code for a Divi Custom Post Type
			

				
				
				
				
				
			

				
				
				
				
				No no no, this is not laziness, this is working smarter and not harder. Metabox.io has a great Custom Post Type Generator that not only speeds up creating your Custom Post Type in Divi, but it also makes it incredibly easy to do. It literally just collects a few pieces of information from you, and BAM! you have the code you need to go add to your functions.php file.
Let’s go throw one together by clicking the button below.
			

				metabox.io Custom Post Type Generator
			

				
				
				
				
				General Tab
			

				
				
				
				
				
			

				
				
				
				
				
					
					
						Plural Name
						Since we are creating a Recipes Custom Post Type for our Divi sites, we will set this to Recipes.
Now if this a team member Custom Post Type, you would call this “Team Members”, you get what I’m cooking?
					
				
			

				
				
				
				
				
					
					
						Singular Name
						Now since “Recipes” represents a collection of recipes, each item in the collection is a Recipe as you might have guessed. Equally, if you were creating “Team Members”, this would be “Team Member” instead.
					
				
			

				
				
				
				
				
					
					
						Function Name
						You can really call this whatever you want, as long as it is unique. It is a good idea to make this descriptive of our Custom Post Type, so we will call ours recipes_register_post_type
					
				
			

				
				
				
				
				
					
					
						Text Domain
						This is used to make your new Custom Post Type translatable into other languages, but is outside of the scope of what we are whipping up here, so we will just delete the default text in there.
					
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Labels Tab
			

				
				
				
				
				
			

				
				
				
				
				There is not much to be done or said about the Labels Tab other than this is the language or words that will be used to describe how our new Divi Custom Post Type will be referred to on the backend of our Divi site.
If you for some reason want to change these, be our guest, but calling Team Members, Recipes, could be a recipe for disaster 🥁
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Advanced Tab
			

				
				
				
				
				
			

				
				
				
				
				
					
					
						Description
						You can add a description here is you feel like talking about it.
					
				
			

				
				
				
				
				
					
					
						Show in Menu
						We will set this as Show as top-level-menu.
					
				
			

				
				
				
				
				
					
					
						Menu position after
						Here we will select where we want our Recipe Custom Post Type to be displayed and we think after Posts will do nicely.
					
				
			

				
				
				
				
				
			

				
				
				
				
				
					
					
						Menu Icon
						Not much to explain or figure out here, just select the icon you want in your WordPress Dashboard sidebar to represent you new recipe custom post type. We went with the 📋 clipboard.
					
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Supports Tab
			

				
				
				
				
				
			

				
				
				
				
				Here you need to select the base post features you’d like to use in your Divi Custom Post Type.
For us, we felt the following would compliment our Recipes the best:

Title
Editor
Thumbnail
Custom fields
Comments
Revisions
Page attributes

			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Taxonomies Tab
			

				
				
				
				
				
			

				
				
				
				
				The Taxonomies allows you to better sort your content so we will be using Categories to sort our recipes into the main ingredient such as Beef, then we will use the Tags to sort it further to include ingredients used, or maybe to note if a recipe is vegetarian or something crazy like that (just kidding).
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				GENERATE THE CODE!
			

				
				
				
				
				Ok, and that was is, not so bad. All we need to do now is hit that GENERATE CODE button and you should end up with something like this which we’ll go paste into our functions.php file in the next step.
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Adding the Code for your Custom Post Type to Divi
			

				
				
				
				
				Ok, so you’ve copied your generated code for the Divi Custom Post Type and you are ready to roll, but you come to a fork in the road because there are a few ways to add it to your Divi site.
			

				
				
				
				
				
					
					
						WordPress Theme Editor
						Depending on the permissions you have on your site, this might be the easiest way to add the code for your custom post type.
					
				
			

				
				
				
				
				
					
					
						FTP
						You can FTP into your server and go edit the functions.php file in your child theme directly.
					
				
			

				
				
				
				
				
					
					
						Webhost
						Some webhosts have a file editor that will allow you to edit the file right from your hosting providers file explorer.
					
				
			

				
				
				
				
				NOTE: We will be messing with your functions.php file, so it is very important to use a child theme when adding a custom post type with code to Divi. Check out our post on Dynamic Child Themes to download a free Divi Child Theme and learn more about why we use them..
			

				
				
				
				
				
			

				
				
				
				
				We will be using the first option mentioned here, so if you find you do not have the same options for the process detailed below, just hit the googler or contact your webhost to help you out.
To get started we will need to go to Appearance > Theme File Editor
Now you will want to make sure that your Child Theme is selected, then you click on functions.php in the right column.
Depending on how much you have going on in your functions.php file, you’ll want to go paste the code you generated above the closing PHP tag ?> at the bottom of the text.
With your code pasted, just hit Update File and watch the magic happen.
			

				
				
				
				
				NOTE: If you get an error, it is likely that your generated code contained an opening PHP tag . Just delete that second opening tag and you will be all good. We actually had this happen in the video, so check that out if you get stuck because we show you how to fix it in there.

			

				
				
				
				
				
			

				
				
				
				
				If you have refreshed your WordPress Dashboard you’ll now see the newly added Recipe Custom Post Type on the dashboard of your Divi install. You can even already Divi in and add your first recipe by completing all the fields like Title, Body, Categories, Featured Image, and more.
			

				
				
				
				
				Add a Custom Field
The fun does not have to stop here, we add some custom fields to further define our recipes like add how long it takes to cook. You can later use these to further filter your recipes and it is just useful. If this was a used car post type, you might have added a mileage custom field. This is pretty easy and can be done by scrolling to the Custom Fields area when you create a new recipe.
			

				
				
				
				
				
			

				
				
				
				
				
					
					
						Name
						Give your Custom Field a name that describes it well, we used Time to Cook.
					
				
			

				
				
				
				
				
					
					
						Value
						Go ahead and assign the relevant value, in this case the time to cook for our Beefcake recipe is 45 Minutes.
					
				
			

				
				
				
				
				
					
					
						Add Custom Field
						When you click the button your new Custom Field will be added to the Custom Fields list right above.
					
				
			

				
				
				
				
				Easy peasy! Because you added this custom field, in the future when you add recipes, it will already be listed in the custom fields list and you can just add the value. 
			

			

				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Display Your New Custom Posts with Divi
			

				
				
				
				
				Almost there! We are quickly going to talk about a couple of different ways to let you display your added Custom Post Type and Custom Fields with Divi. We are not going to go through the entire process as this warrants its own tutorial, but we do cover it in more detail in the video at the top of this tutorial.
			

				
				
				
				
				
					
					
						Divi Theme Builder
						Divi Theme Builder Custom Post Type Template

This is the easiest method and should feel pretty familiar. All you do here is go to the Divi Theme Builder and build a template for your Custom Post Type just as you would for something like a WooCommerce Product. As I mentioned above, we do walk you through the process in the video tutorial, but we will do a separate tutorial on this real soon.
					
				
			

				
				
				
				
				
					
					
						Coded Template Files
						Coded Custom Post Type Template

Understandably, this is the more involved way of getting this done, but you can do this even if you are not a master coder. Divi already comes with template files for Single posts and Archive pages, all you need to do is copy the code in those files and add it to a new appropriately named file that contains the name of your custom post type. 
					
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				On Behalf of the Recipe Post Type, we Thank You!
			

				
				
				
				
				
 
 
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				Another Tutorial under the belt, and another skill added to your repertoire. Well done, you! We learned How to Add a Custom Post Type to Divi without a Plugin and how to display them on the frontend. We added a sprinkle of Custom Fields and BAM! Now the world is your oyster.
We hope this tutorial already has you thinking about new ways to implement and supplement your Custom Divi websites by adding Custom Post Types and Fields. And no, we are not done as we are staying on the topic of Divi Custom Post Types and will be getting into using Advanced Custom Fields in our next tutorial.
Definitely drop a comment below to let us know what you think, and for sure share any suggestions.
			

				
				
				
				
				
 
			
			
				
				
				
				
			

				
				
			

The post How to Add a Custom Post Type to Divi without a Plugin appeared first on Divi Engine.


How to create a Divi Pop-Up Overlay without a plugin using the Divi Builder
Divi Engine — Tue, 15 Feb 2022 19:22:16 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
			

				
				
				
				
				NOTE: We updated this post on 2/15/2022.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				What is a Divi Pop-Up?
Definite the first step in learning How to create a Divi Pop-Up Overlay without a plugin using the Divi Builder, is to define it for those of you that may not know what it is.
In Short, a Divi Pop-Up is a Divi Section or Module that is shown on screen when it is triggered by something like a button, or maybe when the user has interacted with your site in some other way like scrolling down a certain amount. This is usually shown over the other content on the page as an overlay with a background covering the other content.
You usually need a 3rd party plugin to add a Divi Pop-Up to your Divi sites, but in this tutorial, we will show you how to do this with only the Divi Builder and some clever code.
			

				
				
				
				
				Introduction
 Today we are going to show you how to create a pop-up overlay with the Divi Builder without using a plugin. We only use simple Jquery and CSS.
We have recorded an extensive tutorial on this, which I think will be helpful in teaching you jQuery / CSS as well as how to create the pop-up. Alternatively, we have it written down below.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				1. Give your Divi Pop-Up button/element a CSS class
The first thing is to give a class name to the element you want to click on that activates the pop-up. In our case we are giving it a class name of “popup”.
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				2. Add jQuery to target the Divi Pop-Up button
The next step is to add some jQuery in Divi > Theme Options > Integrations > Add code to the < body > section. At first we are just going to check if the jQuery is working by preventing the link action and then alerting us that it has. See the code below
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				3. Create Divi Pop-Up Section and add CSS classes
The third step is to create the pop-up section and add the modules we want. Add a new section and give it the class name “popup-overlay”, then on the column add the class name “popup-content”. The rest is up to you in terms of design, for the section (overlay) add a background colour. For the column we suggest adding a background colour too such as white and add padding of 40px for example to create spacing between the column and the modules.
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				4. Add CSS to overlay
We need to hide the section we just created and make it show when we add the class “show” using jQuery (step 5). We also need to make it fixed so when you scroll it stays, make it the height and width of the screen and position it above all the other sections. Below is the CSS and the explaination of each
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				5. Add jQuery to add “show” class & show/hide Divi Pop-Up overlay
Finally we want to add the class “show” when you click on the element with the class “popup” (step 1).
We then want to remove the class “popup” when they click on the overlay but not the content. Below is the jQuery used
 
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Finialise
That is it! This will now allow you to create a pop-up using the Divi Builder with no plugin. We hope this has been helpful and any questions please ask.
			
			
				
				
				
				
			
				
				
			

The post How to create a Divi Pop-Up Overlay without a plugin using the Divi Builder appeared first on Divi Engine.


Divi Mobile Cheat Code: Add the Hovered Divi Menu Link as Background Text
Divi Engine — Tue, 15 Feb 2022 04:30:08 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Vote Divi Mobile for Desktop Menu President!
Yeah, you read that right. Consider this our declaration that Divi Mobile is not just for giving your Divi Mobile Menus the makeover they deserve, Divi Mobile is running for the defacto President of Divi Desktop Menus also! Many of us out there were given a name at birth that did not quite suit us as we matured and Divi Mobile is no different.
Today we are going to prove it by showing you one of Divi Mobiles’ newest features taken from a tutorial series we just completed, so if you want to duke it out with some code instead, check our Coded Design to Divi Layout tutorial.
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				More in this series.
			

				
				
				
				
				
				
				
										
									
				
										
					
											
						 								
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
													
						
										
					
 
				
					
				
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Just like a cheat code for your favorite video game, Divi Mobile unlocks tons of additional features for both your Desktop and Mobile Divi Menus which are so awesome that it is basically cheating. I’m telling you, I almost feel bad each time I use it, but only almost. Some core features like adding various animation styles to your Divi Hamburger Menu Icon or Injecting Divi Layouts directly into your Divi Menu have long been a reason why people keep buying the plugin, but not many know how easy it is to use the plugin to design your Desktop Menus. Not only that, we just added an awesome feature that found its beginning as a reddit post, which is to add the Hovered Menu Text as a Text Background.
For this tutorial, we will assume that you already created a menu you’d like to use and that you have Divi Mobile installed and activated.
If you want to take this effect of a test drive, just click the button below to see it in action in our latest FREE Layout Pack for Divi Machine.
			

				Demo in Divi Machine Burger Shop Layout
			

				
				
				
				
				Preview:
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Before
			

				
				
				
				
				
			
			

				
				
				
				
				
				
				
				
				
				After
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Table of Contents
			

				
				
				
				
				
Display Divi Mobile Menu on Desktop
Styling the Divi Mobile Menu Header Elements
Styling the Burger Menu Icon
Customizing the Divi Menu Content Style
Adding Hovered Divi Menu Link as Background Text
Conclusion

			

				
				
				
				
				
					
					
						Difficulty
						Easy
					
				
			

				
				
				
				
				
					
					
						Time
						5 Minutes
					
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Display Divi Mobile Menu on Desktop
			

				
				
				
				
				Getting your mobile Divi Menu to display on desktop screens could not be simpler. We will take a step further and have the menu display fullscreen on those devices so that we can showcase a few of Divi Mobiles’ shiniest features. We will be working in the Theme Customizer, so you can either access that from the frontend of your Divi site as long as you are logged in, or you can get there from the WordPress Dashboard as we’ll do below.
Let’s go!
			

				
				
				
				
				Divi > Theme Customizer
			

				
				
				
				
				
			

				
				
				
				
				This will load the frontend of your site with the Customizer Settings on your left, so now we need to open the Divi Mobile General Settings.
			

				
				
				
				
				Customizer > Divi Mobile > General
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Divi Mobile Settings
General Settings
Select Primary Menu Movement: Expand from outside screen
Expand From Outside Screen Style: Fullscreen Slide Down (or other fullscreen option)
Divi Mobile Breakpoint: Max (5000px)
			

				
				
				
				
				That Divi Mobile Breakpoint setting is what will force the Divi Mobile Menu to be displayed on Desktop screens.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Styling the Divi Mobile Menu Header Elements
			

				
				
				
				
				Now that we will have a Fullscreen Divi Mobile Menu that displays on Desktop screens, we need to style the various header elements. Divi Mobile has you covered with all the settings for things like the Header Logo, Colors, Header Icons, and more. We will focus on the logo, hamburger icon, and some of the colors for this tutorial.
			

				
				
				
				
				Customizer > Divi Mobile > Custom Header
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Divi Mobile Settings
Custom Header Settings
Custom Header
Create a Custom Header: Yes
Custom Header Logo: icon.png
Logo Max Height: 50px
Custom Header Background Color: Transparent
Custom Header Elements
Logo Link: /
Logo Position from the edge: 20px
Custom Header Elements
Fixed Menu on Scroll: NO
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Styling the Burger Menu Icon
			

				
				
				
				
				This is seriously one of my favorite parts when using Divi Mobile on a project. Under the Burger Menu settings, you can completely style the Divi Hamburger Menu icon any way you want, add animations, different colors, and so much more. I told you that you’d feel like a cheater!
Let’s finesse this a little.
			

				
				
				
				
				Customizer > Divi Mobile > Burger Menu
			

				
				
				
				
				
			

				
				
				
				
				Divi Mobile Settings
Burger Menu Settings
Burger Menu Icon
Burger Menu Closed Color: #171717
Burger Menu Background
Burger Menu Background Color: Transparent
Burger Menu Background Shadow
Burger Menu Background Shadow: Transparent
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Customizing the Divi Menu Content Style
			

				
				
				
				
				We are crushing it so far and we are almost done. Yes, already, just a couple more steps. Under the Menu Style settings, you can customize the look of the content in your menu. You can select fonts, colors, positions, and more.
			

				
				
				
				
				Customizer > Divi Mobile > Menu Style
			

				
				
				
				
				
			

				
				
				
				
				Divi Mobile Settings
Menu Style Settings
Space at the Top of the Menu: 80px
Menu Background Color: #171717
Menu Text Font Weight: 800
Menu Text Line Height: 1em
Menu Text Transform: Uppercase
Menu Text Color Hover: #f1c40f
Active Menu Text Color: #f1c40f
Menu Text Font Size: 34px
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Adding Hovered Divi Menu Link as Background Text
			

				
				
				
				
				Last stop, the latest feature added to our Divi Mobile menu plugin that lets you transform boring Mobile and Desktop menus into masterpieces. In just a couple of quick settings, we will add that background text effect we showed you at the beginning of this tutorial.
Let’s wrap this up, folks!
			

				
				
				
				
				Customizer > Divi Mobile > Fullscreen Menu Style
			

				
				
				
				
				
			

				
				
				
				
				Divi Mobile Settings
Fullscreen Menu Style Settings
Extra Appearance Options
Extra Appearance Options: Menu name behind item on hover
Extra Appearance Font Settings
Font Family: Yantramanav
Font Weight: 800
Text Transform: Uppercase
Extra Appearance Font Size: 200px
Extra Appearance Font Color: rgba(255,255,255,0.1)
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Wanna win? Join the Team…
			

				
				
				
				
				
 
 
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				There you have it, a quick rundown of how you can use Divi Mobile to enhance both your Desktop and Mobile Divi Menus. What takes an hour or so with custom code as demonstrated in our Coded Design to Divi Layout tutorial, can be done in under 10 minutes with Divi Mobile. Now that is efficient.
Definitely drop your comments below and let us know what you thought and whether you’d like more of this type of content!
			

				
				
				
				
				
 
			
			
				
				
				
				
			
				
				
			

The post Divi Mobile Cheat Code: Add the Hovered Divi Menu Link as Background Text appeared first on Divi Engine.


Hand-Coded Design to Divi Layout: Part 3 – Adding the Background Text Hover Effect
Divi Engine — Mon, 14 Feb 2022 16:40:40 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Is there Someone Behind Me?
 
Adding this slick Divi jQuery Text Background Hover Effect to your Divi Fullscreen Hamburger Menu just adds a touch of class a finesse to a layout that already looked pretty good. As you slowly hover over each menu item between drools for that burger, you see that impressive background text appear which echoes the menu item you are currently hovering. It is just a nice touch!
			

				
				
				
				
				YUP!
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				More in this series.
			

				
				
				
				
				
				
				
										
									
				
										
					
											
						 								
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
													
						
										
					
 
				
					
				
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				We are in the home stretch here and almost done with our awesome menu effect taking that Coded Design and turning it into a Divi Layout. We already have our Divi Mobile Menu displaying on Desktop and today we will bring it all to life with jQuery. I have to say, if you can master just a little bit of jQuery, you can really extend the functionality and overall design of your Divi websites. But enough about my jQuery crush, let’s quickly talk about what we will be doing in this part of the tutorial.
First things first, we need to create the background text and the container it will live in using that Global Header we built in the Divi Theme Builder. Then, we will go in and modify the CSS we added in part 2 of this series to accommodate this change. Lastly, we will add some tasty jQuery to make that background text appear as well as reflect the currently hovered menu item. Tasty jQuery? Man, I really need to reflect on this jQuery crush I’m going through…
Now don’t forget, this is the final installment in a 3 part series, so if you missed parts 1 or 2, take a look at our posts on Building the Hero Section layout and Enabling the Mobile Hamburger Menu on Desktop.
			

				
				
				
				
				Preview:
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Before
			

				
				
				
				
				
			
			

				
				
				
				
				
				
				
				
				
				After
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Table of Contents
			

				
				
				
				
				
Adding the Background Text to the Global Header
Modifying the Existing CSS
Adding the jQuery to Show the Text
Conclusion

			

				
				
				
				
				
					
					
						Difficulty
						Advanced
					
				
			

				
				
				
				
				
					
					
						Time
						15 Minutes
					
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Adding the Background Text to the Global Header
			

				
				
				
				
				Ok, so for this all to work we need to add a Row to our Divi Global Header that will house the background text that is displayed when menu items are hovered. After we get that done we will modify and add some new code to make it all work, so let’s get jiggy with it right now.
			

				
				
				
				
				Divi > Theme Builder > Global Header
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Background Text Row
Add a Single Column Row > Close the popup to add a Module for now

Row Settings
CONTENT TAB
BACKGROUND
Color: #171717
DESIGN TAB
SIZING
Width: 100%
Max-Width: 2560px;
SPACING
Margin (all): 0px
Padding (all): 0px
ADVANCED TAB
CSS ID & Classes
CSS Class: de-menu-bg-container
			

				
				
				
				
				With our Row configured, all we need to do is add a Divi Text Module before we put our coder helmet on.
			

				
				
				
				
				Let’s hit the grey ➕ and add a Text Module.
Text Module Settings
CONTENT TAB
CONTENT
Text (Text View):  
DESIGN TAB
TEXT
Text Font: Yantramanav
Text Font Weight: Heavy
Text Font Style: Uppercase
Text Color: rgba(255,255,255,0.1)
Text Size: 320px
Text Shadow: Option 4
Text Alignment: Center
ADVANCED TAB
CSS ID & Classes
CSS Class: de-menu-bg-text
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Modifying the Existing CSS
			

				
				
				
				
				Ok, so we need to modify some of the CSS we wrote in Part 2 where we showed you How to Enable a Hamburger Menu on Desktop with Divi. 
To get started we need to open up the Global Header we built for our Divi Hero Section in Part 2 of this tutorial, so let’s get right to it.
			

				
				
				
				
				Divi > Theme Builder > Global Header
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				CSS Code Module Settings
CONTENT TAB
TEXT
Code: On line 26 that reads .de-burger-menu .opened #mobile_menu1 add , .de-menu-bg-container. After, delete Line 41 that reads background-color: #171717!important;

			

				
				
				
				
				Our header is now ready to receive the various modules that will make up the content, so let’s quickly build that out.
			

				
				
				
				
				CSS Code Module Settings
CONTENT TAB
TEXT
Code: Copy and Paste the code below above the 

			

			

				
				
				
				
			

				
				
			

The post Hand-Coded Design to Divi Layout: Part 3 – Adding the Background Text Hover Effect appeared first on Divi Engine.


WordPress Custom Post Types and Custom Fields. What are they? And Why You Should Care!
Divi Engine — Tue, 08 Feb 2022 12:29:43 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Divi All Custom Everything…
It is no accident that WordPress is one of the most popular Content Management Systems (CMS) on the planet for creating websites. It is easy to use, very extendable, and it’s free. It is this extendability that allows both experienced coders and your grandparents to build anything from a simple blog to a full-on e-Commerce website with little to no coding knowledge. This is because you can use little blocks of purpose-built code called plugins that are vetted and hosted by the smart people at the WordPress Foundation to extend its basic functionality.
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				More in this series.
			

				
				
				
				
				
				
				
										
									
				
										
					
											
						 								
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
													
						
										
					
 
				
					
				
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Table of Contents
			

				
				
				
				
				
What are Custom Post Types (CPT)?
What are Custom Fields (ACF)?
Main Differences Between WordPress Custom Post Types and Custom Fields
How to Add Custom Post Typed and Custom Fields to Divi
Conclusion

			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				What are Custom Post Types (CPT)?
			

				
				
				
				
				
			

				
				
				
				
				Ready for the elevator pitch on what WordPress Custom Post Types are?
Here we go:
			

				
				
				
				
				CUSTOM POST TYPES: Custom post types are a way to create your own content types that are specific to your site. Each Custom Post Type you define will have their own set of fields and display options which you can control from the WordPress Dashboard. For example, if you wanted to add an “Recipe” Custom Post Type, the recipe would have its own set of fields for event title, ingredients, time to cook, image, etc.
			

				
				
				
				
				Yes, mind blown, I know. Your brain is probably already churning with the incredible range of sites you’d be able to build if you could harness this incredibly powerful approach to building truly bespoke websites with Divi and WordPress. And as you’ve probably guessed, Pages and Posts are the baked-in Post Types that come with any WordPress install, each with a specific purpose.
WordPress Pages are used for mainly static content that will rarely change over time and are unique. Think about the landing page for your Divi site. If you displayed something like your business hours on there and they changed, this would be one of the few times you update that. You’ll also usually have a limited number of pages that can often reflect what you have planned for the navigation menu on your site.
WordPress Posts are used to post (yes, I know) regular, timestamped pieces of content. You’d use this packaged Post Type for things like a Blog or News Article. Due to the intended purpose as something that is updated regularly, posts are listed in reverse chronological order on your home page by default (though this can be changed). The structure of WordPress Posts usually doesn’t differ too much.
Now, if you get crazy and install WooCommerce (we ❤️ Woo), you get a new Post Type called Products with its own set of fields that make up those products that will display differently based on the types of fields you completed within each product. By default, this is pretty limited, but 3rd party plugins like Divi BodyCommerce allow you to extend the basic functionality.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				What are Custom Fields?
			

				
				
				
				
				
			

				
				
				
				
				Ready for the elevator pitch on what WordPress Custom Fields are?
Here we go:
			

				
				
				
				
				CUSTOM FIELDS: Custom fields allows you to extend your WordPress Post Types by extending the types of information they contain. If you wanted to capture the mood of a blog post author when they wrote the piece, you can add a mood Custom Field without cluttering up your template or theme files with repetitive code.
			

				
				
				
				
				In the simplest way, Custom Fields adds some extra metadata to your different post types. Different custom fields could be prices, locations, images, etc. Custom Fields are also kind of co-dependant, as they need to live inside of either an Included (pages/posts) or Custom Post Type as they are used to describe that Post Type.
They can also be used as an easy interface for clients to maintain their own websites. Let’s say you have a client that had you build them a website for their restaurant and they wanted to update their menu. You could add the various menu items as fields in a custom menu post type that they can just go in and edit without messing with code or your beautifully designed layouts. Yep, that hit a nerve, I’m sure.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Main Differences Between WordPress Custom Post Types and Custom Fields
			

				
				
				
				
				When pitting Custom Post Types vs Custom Fields we’ll find a bunch of differences, but they can be narrowed down to a few main ones that we will look at below.
			

				
				
				
				
				
					
					
						Custom Post Types & Custom Fields Describe Each Other
						A Custom Post Type can be thought of a name that summarizes a collection of fields. Inversely, Custom Fields can be thought of a bunch of features that describe the Custom Post Type. If the Custom Post Type is “House”, the Custom Fields might be “Rooms”, “Square Feet”, “Bathrooms”, etc.
					
				
			

				
				
				
				
				
					
					
						Location
						A Custom Post Type is added to the sidebar on the Divi Dashboard and you will find Custom Fields inside of a new or existing Custom Post Type.
					
				
			

				
				
				
				
				
					
					
						Functionality
						You can use Custom Post Types to display relevant blocks of content on various pages using a WordPress Loop. You can then filter this content with one of the Custom Fields in these Custom Post Types. Using our recipe example, you can display all your recipes on a page using a WordPress Loop, then filter them using a Custom Field on whether the displayed are vegetarian or not.
					
				
			

				
				
				
				
				So confession, the title of this section is a bit clickbaity because, in reality, Custom Post Types and Custom Fields have a symbiotic relationship. They work together to define each other. If you want to build amazing Divi sites that cater to higher-end clients, you need to be using both in perfect harmony. Most people can figure out how to use a drag-and-drop website builder like Divi, but few can master the art of dynamic websites…unless they have the right tools that allow you to implement Custom Post Types WITH Custom Fields.
Let’s look at a couple ways to graduate to all custom everything.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				How to Add Custom Post Typed and Custom Fields to Divi
			

				
				
				
				
				Whether you’re an accomplished coder or Divi newbie, there are two main ways to add Custom Post Types and Custom Fields to your Divi website. Let’s take a quick look.
			

				
				
				
				
				
					
					
						Custom Code
						If you know a bit of PHP or are pretty good at following tutorials, you’ll be up and running with Custom Post Types and Fields in no time. There are a wealth of resources online that will help you learn “WordPress PHP“, but it comes with the drawback that the work does not end with creating these custom elements, to integrate it with Divi, you’ll need to have deep knowledge on how to hook into and display things the way you want it to.
					
				
			

				
				
				
				
				
					
					
						3rd Party Plugins
						By far the easiest way to get up and running, especially if you are not a code ninja is to use any of the popular tools out there to add you Custom Post Types and Custom Fields. For Custom Post Types the most popular option with over 1 million installs is Custom Post Type UI. For Custom Fields, there really is no comparison to Advanced Custom Fields.
					
				
			

				
				
				
				
				Combined, these methods will help you get rolling with adding Custom Post Types and Custom Fields to your Divi install. And guess what, over the next few weeks we will show you exactly how to do that in a series of tutorials, lucky you!
But, what happens when you need all this to play nice with Divi and simplify the process even further? Meet Divi Machine, our all custom everything plugin that makes creating new Custom Post Types as easy as having seconds at lunch. Now, this is no bait and switch, we will still show you how to add Custom Post Types and Fields to Divi using both Code and Plugins, but we’ll also walk you through the Divi Machine way in the end.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Custom Post Types and Fields are ALMOST this cool…
			

				
				
				
				
				
 
 
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				There you have it! We hope that after this quick read you have a pretty good understanding of what Custom Post Types and Fields are, but also the insane possibilities of what is possible if you master them. We’d love for you to stick around over the next few weeks as we teach you how to be the Splinter to your Raphaels.
Definitely drop a comment below to let us know what you think, and for sure share any suggestions.
			

				
				
				
				
				
 
			
			
				
				
				
				
			
				
				
			

The post WordPress Custom Post Types and Custom Fields. What are they? And Why You Should Care! appeared first on Divi Engine.


Hand-Coded Design to Divi Layout: Part 2 – Enabling a Hamburger Menu on Desktop
Divi Engine — Tue, 01 Feb 2022 16:00:29 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Hamburger Time,
All the Time.
Yes yes, I’m aware of the obvious pun here, but hey, who doesn’t love hamburgers? The second step to take this hand-coded design and turn it into a Divi Hero Section layout is to replicate the navigation menu. This means we need to take our stock Divi Menu Module and force it to display the Hamburger Menu on Desktop with Divi.

			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				More in this series.
			

				
				
				
				
				
				
				
										
									
				
										
					
											
						 								
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
													
						
										
					
 
				
					
				
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				To get our Hamburger Menu to show on Desktop using Divi, we first need to go ahead and build a global header for our site using the Divi Theme Builder. Nothing fancy needs to happen regarding that layout, we’ll just add a burger image for the sake of being punny, then a menu module to display our selected menu. To wrap things up we will add some CSS which will take care of the last details to make sure our boring desktop menu shows as a hamburger menu no matter what device our users are using.
Don’t forget, this is Part 2 in a 3 part series, so if you missed part 1, take a look at our post on Building The Hero Section layout.
			

				
				
				
				
				Preview:
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Before
			

				
				
				
				
				
			
			

				
				
				
				
				
				
				
				
				
				After
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Table of Contents
			

				
				
				
				
				
Setting up the Header in Theme Builder
Adding the CSS to Show the Hamburger Menu
Conclusion

			

				
				
				
				
				
					
					
						Difficulty
						Intermediate
					
				
			

				
				
				
				
				
					
					
						Time
						15 Minutes
					
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Setting up the Header in Theme Builder
			

				
				
				
				
				To get rolling we need to build a Global Header Template using the Divi Theme Builder with the appropriate sections and rows that will house our modules.
			

				
				
				
				
				Divi > Theme Builder
Default Template > Add Global Header > Build Global Header
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Header Section
Section Settings
CONTENT TAB
BACKGROUND
Color: Transparent

DESIGN TAB
SPACING
Padding Top/Bottom: 0px
ADVANCED TAB
CSS ID & CLASSES
CSS Class: de-burger-menu
POSITION
Position: Absolute
Location: Top-Center
Header Content Row
Add a 50-50 Row > Close the popup to add a Module for now

Row Settings
CONTENT TAB
BACKGROUND
Color: Transparent
DESIGN TAB
SIZING
Width: 100%
Max-Width: 2560px;
SPACING
Padding (all): 15px
ADVANCED TAB
CUSTOM CSS
Main Element: display: flex;
			

				
				
				
				
				Our Global Header is now ready to receive the various modules that will make up the content, so let’s quickly build that out.
			

				
				
				
				
				Column 1
Let’s hit the grey ➕ and add an Image Module.
Image Module Settings
CONTENT TAB
IMAGE

Image: Download and use icon.png
DESIGN TAB
ALIGNMENT

Image Alignment: Left

SIZING

Max Width: 50px
Column 2
Let’s hit the grey ➕ and add a Menu Module.
Menu Module Settings
CONTENT TAB
CONTENT

Menu: Select the menu you want displayed here, or make sure to create one under Appearance > Menus

ELEMENTS

Show Shopping Cart Icon: NO

Show Search Icon: NO

BACKGROUND

Color: Transparent
DESIGN TAB
MENU TEXT

Active Link Color: #f1c40f

Menu Font Weight: Ultra Bold

Menu Text Color: #ffffff

Menu Text Color (hover): #f1c40f

Menu Text Size: 34px

Menu Text Shadow: Option 4

ICONS

Hamburger Menu Icon Color: #171717

Hamburger Menu Icon Font Size: 38px
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Adding the CSS to Show the Hamburger Menu
			

				
				
				
				
				The last step here is to add the CSS that will force the Menu Module in the Divi Header that we just built, to display a Divi Hamburger Menu on Desktop.
			

				
				
				
				
				Column 2 > Add a Divi Code Module > Paste the CSS below between opening and closing 

			

			

				
				
				
				
			

				
				
			

The post Hand-Coded Design to Divi Layout: Part 2 – Enabling a Hamburger Menu on Desktop appeared first on Divi Engine.


Hand-Coded Design to Divi Layout: Part 1 – The Hero Section
Divi Engine — Tue, 01 Feb 2022 15:39:25 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Time to Stress Test Divi.
So while browsing /r/WebDev on Reddit a post caught my eye and it got me thinking. It was this awesome hero section for a burger joint with a fullscreen hamburger menu on desktop where the background of that menu was filled with big bold text that reflected the menu item currently being hovered. Cool, right? But can one build a Divi Hero Section with a Fullscreen Hamburger Menu?
Hmmmmmm…
Surely taking a hand-coded design and converting it into a Divi layout would take some crazy dev skills? Turns out a hard NOPE would be the answer. 
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				More in this series.
			

				
				
				
				
				
				
				
										
									
				
										
					
											
						 								
								
																		
																		
																	
							
															
								
																		
																		
																	
							
															
								
																		
																		
																	
							
													
						
										
					
 
				
					
				
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				The first step in Converting a Hand-Coded Design into a Divi Layout is going to be to break it down into sections. This is very much the reason why we’ve broken this tutorial down into THREE parts. When you look at this layout it consists of a Hero Section containing an actual Hamburger and some text with a button, then the Hamburger Navigation Menu on desktop, and lastly some jQuery code to create that awesome hover effect.
Building out the Hero Section in Divi will be pretty straightforward, so we will tackle that here in Part 1. Next, in Part 2, we will head on to building out the Hamburger Menu (teehee) on desktop where we will need to use some clever CSS to force the mobile menu style. Lastly, in Part 3 we will cover using jQuery to add the large text in the background of our fullscreen menu when menu items are hovered.
Why do it in three parts? Well, there are valuable skills you’ll learn in each part that could be used on any website, so for those of you looking to utilize just one of the three skills, you won’t have to sit through the whole thing. And don’t worry, we’ll release one full-length video that includes each part for those of you looking to power through!
			

				Demo of this Effect in our Divi Machine Burger Shop Layout
			

				
				
				
				
				NOTE: /u/Darius2652 was kind enough to make his code available for anybody to use, so if you are looking for the non-Divi route, check out his Github.
			

				
				
				
				
				Preview:
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Hand Coded
			

				
				
				
				
				
			
			

				
				
				
				
				
				
				
				
				
				Divi Layout
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Table of Contents
			

				
				
				
				
				
Setting up the Divi Hero Section
Adding the Divi Hero Section Content
Conclusion

			

				
				
				
				
				
					
					
						Difficulty
						Easy
					
				
			

				
				
				
				
				
					
					
						Time
						15 Minutes
					
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Setting up the Divi Hero Section
			

				
				
				
				
				To get rolling we need to set up the Section and Row that will make up the canvas for our Divi Hero Section, so let’s get right to it.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Make sure you are logged in to an administrator account for the backend of your Divi install and create a New Page.
Hero Section
Add a Regular Section > Close the popup to add a Row for now

Section Settings
CONTENT TAB
BACKGROUND
Add a Gradient Background
Color 1: #171717
Color 2: #f1c40f
Gradient Type: Linear
Direction (Desktop): 90deg
Direction (Mobile): 0deg
Gradient Start/End: 50%
Add a Background Image
Image: Download and use noise.png
Background Image Blend: Color Burn
DESIGN TAB
SPACING
Padding Top/Bottom: 75px
Content Row
Add a 25-50-25 Row > Close the popup to add a Module for now

Row Settings
DESIGN TAB
SIZING
Custom Gutter Width: 1
Equalize Column Lengths: YES
Max-Width: 2560px;
Column 1 & 3 Settings
We want to center the elements in these columns vertically, so we will add one line of CSS to Column 1 and 3.
ADVANCED TAB
CUSTOM CSS
Main Element: align-self: center;
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Adding the Divi Hero Section Content
			

				
				
				
				
				With our canvas set, we are ready to start adding the content to this Divi Hero Section.
			

				
				
				
				
				Column 1
Add a Text Module
Text Module Settings
CONTENT TAB
TEXT
Body: 
Eat like
a king

DESIGN TAB
HEADING TEXT > H2
Heading 2 Font: Yantramanav
Heading 2 Font Weight: Heavy
Heading 2 Font Style: Uppercase
Heading 2 Text Alignment (Desktop): Right
Heading 2 Text Alignment (Mobile): Center
Heading 2 Text Color (Desktop): #ffffff
Heading 2 Text Color (Mobile): #171717
Heading 2 Text Size: 66px
Heading 2 Line Height: 0.8em
SPACING
Margin Top: -15px
ANIMATION
Animation Style: Slide
Animation Direction: Right
Animation Duration: 750ms
Animation Delay: 250ms
Add a Button Module
Button Module Settings
CONTENT TAB
TEXT
Button: See our menu
LINK
Button Link URL: Put your menu page URL
DESIGN TAB
ALIGNMENT
Button Alignment (Desktop): Right
Button Alignment (Mobile): Center
BUTTON
Use Custom Styles For Button: YES
Button Text Size (Desktop): 16px
Button Text Size (Mobile): 21px
Button Text Color: #ffffff
Button Background Color: #e67e22
Button Border Width: 0px
Button Border Radius: 25px
Button Font Style: Uppercase
ANIMATION
Animation Style: Slide
Animation Direction: Down
Animation Duration: 500ms
Animation Delay: 1000ms
Animation Intensity: 15%
			

				
				
				
				
				Column 2
Add an Image Module
Image Module Settings
CONTENT TAB
IMAGE
Image: Download and use hero.png
DESIGN TAB
ALIGNMENT
Image Alignment: Center
SIZING
Max Width: 90%
TRANSFORM
Transform Scale (hover): 115%
Transform Rotate (hover): 10deg
 
			

				
				
				
				
				Column 3
Add a Text Module
Text Module Settings
CONTENT TAB
TEXT

Body: 
Enjoy
Every
Bite

DESIGN TAB
HEADING TEXT > H2

Heading 2 Font: Yantramanav

Heading 2 Font Weight: Heavy

Heading 2 Font Style: Uppercase

Heading 2 Text Alignment (Desktop): Left

Heading 2 Text Alignment (Mobile): Center

Heading 2 Text Color (Desktop): #171717

Heading 2 Text Color (Mobile): #ffffff

Heading 2 Text Size: 66px

Heading 2 Line Height: 0.8em
ANIMATION

Animation Style: Slide

Animation Direction: Left

Animation Duration: 750ms

Animation Delay: 250ms
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Mayo? Not even once…
			

				
				
				
				
				
 
 
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				There we have it, Part 1 complete! As a reminder, in Part 2 we will create our Divi Fullscreen Hamburger Menu, and in Part 3 we will add some jQuery magic to make that awesome hover effect with the background text. I realize it might be annoying to some of you that we split this Divi Hero Section with Fullscreen Hamburger Menu tutorial up into 3 pieces, but just hang in there, I’ll be publishing each part as soon as it is done.
Definitely drop your comments below and let us know what you think so far!
			

				
				
				
				
				
 
			
			
				
				
				
				
			
				
				
			

The post Hand-Coded Design to Divi Layout: Part 1 – The Hero Section appeared first on Divi Engine.


Creating Custom Cart and Checkout Pages using the New Divi WooCommerce Modules
Divi Engine — Tue, 28 Dec 2021 19:48:25 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Using the New Divi WooCommerce Modules
Time to put those hand new Divi WooCommerce Modules to work and create some custom Cart and Checkout pages. We will be doing this as an expansion of our How to Clone Any Online Store with Divi and WooCommerce tutorials series, so definitely go check that out if you have not already done so.
But, don’t worry, if you didn’t follow it, this tutorial will work with any Divi website that has Divi 4.14 or newer installed. No excuses 😂
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				The update is not shiny new, but still new enough for us to do a tutorial that will show you exactly what is possible for creating custom cart and checkout pages with this update. In case you missed it, we did release a FREE Cart & Checkout Pages using the new Divi 4.14 Woo Modules, so definitely check that out for another awesome FREEBIE!
First, we’ll take a look at what modules were added, and then we will build our custom Divi Cart page, and then move to a custom Divi Checkout page.
Let’s get to it!
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Table of Contents
			

				
				
				
				
				
The New Divi WooCommerce Modules
Custom Divi WooCommerce Cart Page
Custom Divi WooCommerce Checkout Page
Conclusion

			

				
				
				
				
				
					
					
						Difficulty
						Easy
					
				
			

				
				
				
				
				
					
					
						Time
						25 Minutes
					
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				The New Divi WooCommerce Modules
			

				
				
				
				
				A very exciting addition to the new Divi 4.14 Update was the inclusion of new WooCommerce modules that allow you to style both the Cart and Checkout pages. Gone are the days of the not-so-great looking Cart and Checkout pages, Divi has now given everybody the ability to have these pages better align with their branding.
Let’s take a look at what modules were added:
			

				
				
				
				
				Cart Modules
Woo Cart Products

Displays all the products that have been added to the cart.

Woo Cart Totals

Shows the total amount due and allows you to advance to checkout.

Woo Cart Cross Sells

Allows you to Cross Sell related products on the cart page.
			

				
				
				
				
				Checkout Modules
Woo Checkout Billing

Allows the user to endter their billing address.

Woo Checkout Shipping

Allows the user to endter their shipping address.

Woo Checkout Details

Shows the user a brief summary of the items in the cart.

Woo Checkout Information

Allows the user to add additional notes or information on the order.

Woo Checkout Payment

Displays your configured payment options.
			

				
				
				
				
				For our full write-up on the Divi 4.14 Update, check out our post titled Divi 4.14 WooCommerce Update: New Modules for Cart & Checkout and then some.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Custom Divi WooCommerce Cart Page
			

				
				
				
				
				Create or Edit Theme Builder Template
Create
Head to Divi > Theme Builder > Add New Template > Scroll to WooCommerce Pages > Check Cart > Click Create Template
Add Custom Body > Build from Scratch
Edit
Head to Divi > Theme Builder > Cart > Edit Custom Body > Delete All the Sections
Add a Single Column Row
Add a New Single Column Row > Add a Text Module
Section Settings
Background Color > #f6f6f6
Text Module Settings
Text > H1 Heading with text “Cart”
Heading Text
Heading Font > Default
Heading Font Weight > Bold
Heading Text Size > 51px
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Add a Single Column Row
Add a New Single Column Row
Row Settings
Background Color > #ffffff
Spacing
Padding Top/Bottom > 25px
Padding Left/Right > 50px

Border
Rounded Corners > 5px
Box Shadow
Box Shadow > Option 1
 
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Add a Woo Cart Products Module > Settings
Text
Link Text Color > #e04405

Button
Use Custom Styles for Button > YES
Button Text Color > #253746
Button Background Color > #ffffff
Button Border Width > 1px
Button Border Color > #253746
Add a Woo Cart Totals Module > Settings
Text
Link Text Color > #e04405

Button
Use Custom Styles for Button > YES
Button Text Color > #253746
Button Background Color > #ffffff
Button Border Width > 1px
Button Border Color > #253746
Add a Woo Notice Module > Settings
Page Type > Cart
Background Color > #e04405

Error Text
Error Font > Default
Error Font Weight > Ultra Bold
Error Text Color > #ffffff
Error Letter Spacing > 1px
Button
Use Custom Styles for Button > YES
Button Text Color > #ffffff
Button Background Color > #253746
Button Border Width > 0px

Drag the Woo Notice Module above the Woo Cart Products Module in the Row.

			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Add a Single Column Row
Add a New Single Column Row > Add a Text Module
Text Module Settings
Text > H2 Heading with text “OUR TOP SELLING PRODUCTS”
Heading Text > H2
Heading Font Weight > Semi-Bold
Heading 2 Text Alignment > Center
Add a Woo Products Module > Settings
Product View Type > Best Selling Products
Product Count > 4
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Custom Divi WooCommerce Checkout Page
			

				
				
				
				
				Create or Edit Theme Builder Template
Create
Head to Divi > Theme Builder > Add New Template > Scroll to WooCommerce Pages > Check Checkout > Click Create Template
Add Custom Body > Build from Scratch
Edit
Head to Divi > Theme Builder > Checkout > Edit Custom Body > Delete All the Sections
Add a Two-Column Row
Add a New Two-Column Row
Section Settings
Background Color > #f6f6f6
Add a Woo Checkout Billing Module > Settings
Default
Add a Woo Checkout Shipping Module > Settings
Default
Add a Woo Checkout Details Module > Settings
Text
Link Text Color > #e04405
Add a Woo Checkout Information Module > Settings
Default
Add a Woo Notice Module > Settings
Page Type > Checkout
Background Color > #e04405

Error Text
Error Font > Default
Error Font Weight > Ultra Bold
Error Text Color > #ffffff
Error Letter Spacing > 1px
Button
Use Custom Styles for Button > YES
Button Text Color > #ffffff
Button Background Color > #253746
Button Border Width > 0px

Drag the Woo Notice Module below the page title Text Module in the first Row.

			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Basically, all you customers right now…
			

				
				
				
				
				
 
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				Well done team! Using the power of the new Divi 4.14 Update we were able to Create Custom Cart and Checkout Pages using the New Divi WooCommerce Modules. It is actually pretty simple as you are using the Divi Builder you already know and love. Now, if you really want to take things to the next level with Cart and Checkout page templates in the style of Shopify, Multi-step, or Single Page Cart and Checkout, definitely check out Divi BodyCommerce!
Definitely head to our Youtube Channel and subscribe to make sure you don’t miss a single thing because this is going to be valuable for you and your design agency!
Catch you folks next week!
			

				
				
				
				
				
 
			
			
				
				
				
				
			
				
				
			

The post Creating Custom Cart and Checkout Pages using the New Divi WooCommerce Modules appeared first on Divi Engine.


Add a Festive Snow Effect to Your Divi Site with Particle JS (without plugins)
Divi Engine — Tue, 21 Dec 2021 12:21:08 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Let it Snow!
We are only a few short sleeps away from all the good that Christmas brings. Good food, gifts, and family…but wait! Christmas is hardly Christmas without some snowy landscapes! Now I know not all of you are used to a “White Christmas”, neither am I, but with today’s tutorial, we bring the snowy weather to you with Divi and Particle JS.
Like Ol’ Blue Eyes used to say, 🎶 Let it snow, let it snow, let it snow! 🎶
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				In this super simple tutorial, we will use the power of Particle JS in combination with some of the relatively new Divi positioning features to make it snow. Adding a little holiday cheer to your site is the perfect way to greet visitors over this Holiday period, it is also one of the only times snow is fun outside of bombing down slopes. Those of you that live in a city with snowy winters will know the joys of sleet, dirt slushies, and scraping ice off your windshield at 6 in the morning.

 

We will stick to the more charming version today, so strap in as we walk you through Adding a Festive Snow Effect with Divi and Particle JS.
			

				
				
				
				
				Preview:
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Table of Contents
			

				
				
				
				
				
What is Particle JS?
Setting It Up
Adding the Code
The Details
Conclusion

			

				
				
				
				
				
					
					
						Difficulty
						Easy
					
				
			

				
				
				
				
				
					
					
						Time
						10 Minutes
					
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				What is Particle JS?
			

				
				
				
				
				
			

				
				
				
				
				Particle JS is the go-to JavaScript library for simple to complex particle effects on websites. It is extremely lightweight so it does not slow sites down too much and it is highly customizable. The library has been used to death in tech company and crypto-project headers with the linking polygon effect, so we will try a different take as we use it in our Divi project.

 

You can learn more about Particle JS and play around with its many settings by clicking the button below.
			

				Particle.JS
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Setting It Up
			

				
				
				
				
				To add our snow effect using Divi and Particle JS we will basically be creating a Divi section that is the full size of our browser window, then overlay it on the content that is on the page. Sound complicated? Trust me, it isn’t, and you’ll see how Divi makes this extremely easy to do.

 

You can add this effect to any page in your Divi install, all you need to do is scroll to the bottom of that page and follow the steps below.
			

				
				
				
				
				Add Section and Code Module
Add a New Section > Add a New Single Column Row > Add a Code Module
Section Settings
Background Color > Transparent
Sizing
Width > 100%

Height > 100%
Spacing
Margin Top/Bottom > 0px

Padding Top/Bottom > 0px
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Section Settings > Advanced Tab
CSS ID & Classes
CSS ID > de-snow-effect
Position
Position > Fixed

Location > Top-Center

Vertical Offset > -75px

Z-Index > 1000
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Adding the Code
			

				
				
				
				
				Ok, the bones are there and we are ready to add the code that will bring this Divi and Particle JS effect come to life. We’ve talked quite a bit in our tutorials about when and where you might want to add code as it can impact the performance of your site quite a bit. Luckily for us, Particle JS is a very lightweight library, so we will only recap two spots.
			

				
				
				
				
				
					
					
						Code Module
						You’ll add code here if it is only used on one specific page. In this tutorial we only want to have the snow effect on the landing page, so we will use this method.
					
				
			

				
				
				
				
				
					
					
						Divi Theme Options
						You’d want to use this method if you are going to use the code for the effect on multiple pages. That way the code is loaded only once and not multiple times for each page throughout the site.
					
				
			

				
				
				
				
				With that covered, let’s copy and paste the code below into the Code Module. Make sure to place this code between opening and closing 

			

			

				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				The Details
			

				
				
				
				
				If you’ve previewed and tested this, you might have noticed that something is a little off. Hover effects are gone and links are no longer working. No need to panic, this is because of something super simple, so let’s take a look at what we did.
We created a new section and we positioned it right over the active viewport in a fixed position. This means that as the user interacts (or not in this case) it is interacting with this new section we added that is overlayed on top of our content. This prevents them from interacting with elements like buttons or other links below it. Whoops!
The fix is easy and only takes one line of code. We need to tell the browser to ignore this overlayed section when the user is interacting with the page.
Let’s take a look at the code below and add it to the section we set up earlier.
			

				
				
				
				
				Section > Advanced > Custom CSS > Main Element
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				That’s it! From ZERO to SNOW-CEPTION in 10 minutes…
			

				
				
				
				
				
 

			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				Well done team! You nailed yet another awesome skill-building tutorial on how to Add a Festive Snow Effect to Your Divi Site with Particle JS. Now, while we think effects like this are awesome, please for the love of UX, use it sparingly when and where it makes sense. We hope you found this helpful and would love to hear from you in the comments below.
Definitely head to our Youtube Channel and subscribe to make sure you don’t miss a single thing because this is going to be valuable for you and your design agency!
Catch you folks next week!
			

				
				
				
				
				
 
			
			
				
				
				
				
			

				
				
			

The post Add a Festive Snow Effect to Your Divi Site with Particle JS (without plugins) appeared first on Divi Engine.


SNIPPET: Disable the New Full Site Front-End Editing For Divi
Divi Engine — Mon, 01 Nov 2021 11:11:52 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Soooo, have you folks heard about the new Full Site Front-End Editing For Divi? Everybody is talking about it and we can’t believe the sheer amount of features the team at Elegant Themes have released over the last month. Full Site Front-End Editing is another addition aimed at making us more efficient when building Divi sites.
Now here comes the but!
Not everybody is a big fan, and if you are an antiquated Divi user such as myself, you prefer things like the Classic Editor and that dusty odor extends to new things like the Full Site Front-End Editing For Divi. Elegant Themes has not added a setting to natively disable this feature, so we whipped up some CSS to remove it from the Front-End Editor, but before we look at that, let’s just quickly cover what this feature does.
 
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Table of Contents
			

				
				
				
				
				
What is Full Site Front-End Editing For Divi?
Disable Full Site Front-End Editing For Divi
Conclusion

			

				
				
				
				
				
					
					
						Difficulty
						Easy
					
				
			

				
				
				
				
				
					
					
						Time
						5 Minutes
					
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				What is Full Site Front-End Editing For Divi?
			

				
				
				
				
				With the introduction of the Divi Theme Builder, we were finally given a space to create global layouts for various parts of our site like headers and footers. It was an unprecedented step towards greater efficiency for developers, but something was always missing, one could not edit these Theme Builder layouts on the front-end of our sites. We were always relegated to going through the back-end of our site to the Theme Builder section and then editing these layouts without seeing them as they would appear on the page.
Say hello to Full Site Front-End Editing For Divi, which solves this issue by allowing you to edit these Theme Builder layouts on the front-end as you would any other page. This is great as you can now see how it fits into your overall design and saves you time bouncing around, or as in my case, having 20 tabs open at any given time.
For more information on the Full Site Front-End Editing For Divi, check out the official post over at Elegant Themes.
 
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Disable Full Site Front-End Editing For Divi
			

				
				
				
				
				So as I mentioned before, maybe you are averse to change right now and want to cozy up to the idea of the new Full Site Front-End Editing For Divi and that is ok. With just a few lines of code, you can send this efficiency tool into oblivion.
Just follow the steps below, beat your chest, and claim your freedoms!
			

				
				
				
				
				Head over to Divi > Theme Options > Custom CSS
Paste the code below in the Custom CSS box
Save
			

				
				
				
				
				
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Buh-bye Full Site Front-End Editing For Divi
			

				
				
				
				
				
 

			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				Congrats, you did it. We understand that some of these new features are not always easy to get into at first, but we promise once you embrace them, that they will be a gamechanger for your efficiency….uh…game? You know what we mean.
Use this code as a breather but we encourage you to play with all the new Divi features as they come out and we will try to continue to release content that helps you on that journey.
We hope you found this post on how to Disable the New Full Site Front-End Editing For Divi helpful! We will be back soon with more valuable content.
Until next time 😁
 
			

				
				
				
				
				
 
			
			
				
				
				
				
			
				
				
			

The post SNIPPET: Disable the New Full Site Front-End Editing For Divi appeared first on Divi Engine.


Changing Content as you Scroll Through Tabs with Divi
Divi Engine — Fri, 15 Oct 2021 14:07:40 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Want a section to change content while standing still on scroll?
Not sure what we are talking about – or maybe you do – whatever the case, 
scroll down to see what we are talking about.
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
					Create
Impress
No Plugin
Possible
Try it
				
				
					
				
				
				
				
				
				
				
				
				
				
				
				
				
				
			
			

				
				
				
				
				

				
				
				
				
				
				
				
				
				
			

			

				
				
				
				
				

				
				
				
				
				
				
				
				
				
			

			

				
				
				
				
				

				
				
				
				
				
				
				
				
				
			

			

				
				
				
				
				

				
				
				
				
				
				
				
				
				
			

			
				
			

				
				
				
				
				
			

				
				
				
				
				
 
			
			
				
				
				
				
			
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Can you believe this is done all with the tabs module and some custom code?
			

				
				
				
				
				This is the first of a two part tutorial series where we will show you first how to code the mechanics of the standing still scroll tabs. The second tutorial will be adding some animations and making it really interesting – we will of course supply a freebie at the end.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Table of Contents
			

				
				
				
				
				
Planning
Setting Up Page
Adding CSS
Adding JavaScript
Conclusion

			

				
				
				
				
				
					
					
						Difficulty
						Medium
					
				
			

				
				
				
				
				
					
					
						Time
						20 Minutes
					
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Planning
How we go about creating something like this
			

				
				
				
				
				The insiration of the tutorial was taken from the Apple Airpods website. We are of course going to make something more simple as creating a site like theirs would require a lot more custom code.
The first thing we need to do is decide how we go about creating something like this. When thinking about how we would create something like this for you, we tried to come up with the most simpliest option with minimal coding… The tabs module came to mind. 
The tabs module has a navigation as well different tab content which we can utilise when scrolling. So the idea is to customise the Divi tabs module to show all the tabs content and then position them on top of each other using CSS – then as you scroll down, determine the position and show the respective tab and hide the rest.
Well this is the idea but hit a few snags along the way so was not as simple as first thought 😀
 
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Setting Up Page
Lets get cracking.
			

				
				
				
				
				All you really need to do in this step is to add the tabs module, however we have added sections above and below to show that you can scroll down to the tabs section and then do the magic and then carry on.
The things you need to make sure you do are:

– Keep the tabs in 1 row in the section. Don’t add other rows etc.. We want only one.
– Add a custom CSS class to the section, we added scroll-tabs as our class but you can add anything.

The next thing to think of is what content will go inside the tabs. You can do it 2 different ways.
1) Add the content in the tabs module that you want like text or html
or
2) If you want to something a little more fancy like we did you can utilise the Divi Library and insert a layout into the tabs. To do this you will need to do some extra work and add some PHP to your child theme or use a plugin called “Code Snippets” to add the PHP code.
Follow this tutorial on how to do this
 
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Adding CSS
Changing the style and making it sticky.
			

				
				
				
				
				The CSS we are adding is to make the tabs sticky, changing the height of the area to be bigger and other style preferences – see the code below
The main thing to focus on here is:

 Setting the height of the section manually (we could make some JS code to do this but could end up too complicated).
 Making the row sticky. This gives the section the impression that it is standing still and not moving.

			

				
				
				
				
				Add a Code Module
Paste the Code below in the Code Box between opening and closing 

			

			

				
				
				
				
			

				
				
			

The post Changing Content as you Scroll Through Tabs with Divi appeared first on Divi Engine.


Highlight Links in the Divi Text Module with CSS
Divi Engine — Tue, 12 Oct 2021 12:40:54 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Having your text links highlighted can be a great way to get people exploring your website and let’s be honest if done right, can look pretty cool. You can Highlight Links in the Divi Text Module with CSS even if you are not a code ninja. You’ll see how with just a few lines of CSS code that you add a much more bespoke look to the links in the Divi Text module. 
Let’s take a look at what we will be building today.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Preview:
			

				
				
				
				
				Bacon ipsum dolor amet anim esse tongue, ullamco voluptate pig nostrud sunt. T-bone pariatur bacon boudin aliquip, flank porchetta filet mignon jowl officia ea. Consectetur leberkas turkey ut, pork belly dolor drumstick. Leberkas alcatra in in doner pastrami, salami dolore voluptate pork chop. Pork belly tempor ea, turducken adipisicing ad bacon dolore. Laborum tenderloin ham kielbasa labore consectetur.
Labore est pastrami nulla boudin shoulder. In kevin drumstick commodo porchetta ribeye veniam boudin tri-tip meatloaf picanha pork belly landjaeger. Do id chislic venison cupidatat jowl pancetta. Sirloin picanha officia duis, deserunt shoulder nulla occaecat ham ground round in chicken consectetur aliqua. Chislic proident ut pig. Sint corned beef laborum pastrami alcatra elit pig in jerky ea tenderloin.
			

				
				
				
				
				
 
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Table of Contents
			

				
				
				
				
				
Setting it Up
Adding the CSS Code
Polishing the Design
Conclusion

			

				
				
				
				
				
					
					
						Difficulty
						Easy
					
				
			

				
				
				
				
				
					
					
						Time
						5 Minutes
					
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Setting it Up
Preparing Our Text Module for the Animated Highlights
			

				
				
				
				
				The first thing we need to do before adding the CSS that will highlight the links in our Divi Text module is to make sure we either already have a page with a Text Module containing some links, or we need to create one. If you do not, go ahead and quickly create a page and add a Divi Text module to the page and add some text with at least one link.
			

				
				
				
				
				Text Module Settings > Advanced Tab > CSS ID & Classes > Add CSS Class de-highlights
Save
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Adding the CSS Code
Transforming the Links into Animated Highlights
			

				
				
				
				
				So the CSS we need to add here will look for the Divi Text module on the page that has the class de-highlights assigned which we did in the previous step, then apply the CSS to the  tags in the module. Just add that class to any text module where you want the CSS applied.

			

				
				
				
				
				Add a Code Module
Paste the Code below in the Code Box between opening and closing 

			

			

				
				
				
				
			

				
				
			

The post Highlight Links in the Divi Text Module with CSS appeared first on Divi Engine.


3 Use Cases for the New Divi Conditional Display Logic Update
Divi Engine — Tue, 05 Oct 2021 16:26:52 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				I don’t remember the last time that the Elegant Themes team spoiled us with two massive feature updates to the Divi Theme in one month. Divi now features Conditional Display Logic right out of the box and today we will show you 3 Use Cases for the New Divi Conditional Display Logic. Now don’t get me wrong, the examples given in the official announcement is fantastic, but we wanted to expand upon that a little further.
Does all this conditional logic stuff sound like gibberish? Well, let me help you out. Conditional logic means that a certain action will happen (or not happen) when a certain condition is met. A popular way to think of this is as “If this thing happens, then do that thing” If this, then that in code speak.
Don’t worry if that still sounds a little confusing, we are going to quickly look at how the New Divi Conditional Display Logic Update might be used to make you website more dynamic along with a few extra use cases for the Conditional Logic.
Let’s dive right in!
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Table of Contents
			

				
				
				
				
				
What does the Divi Conditional Display Update do?
Use Case 1 – Upcoming Promo Countdown Timer
Use Case 2 – Device Specific Content
Use Case 3 – Product Specific Content
Conclusion

			

				
				
				
				
				
					
					
						Difficulty
						Easy
					
				
			

				
				
				
				
				
					
					
						Time
						15 Minutes
					
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				What does the Divi Conditional Display Update do?
			

				
				
				
				
				So I eluded to what all this means in the introduction and it really is as simple as that. The Divi Conditional Display Logic will allow you to display certain blocks of content based on a condition set by you. It works with any post type, so is a perfect companion for WooCommerce sites all the way through highly customized sites that use Divi Machine and ACF.
Let’s say that you only want registered users to be able to see a discount coupon code on your landing page, you can set a condition that this code only is displayed once your visitor is logged into your site.
The conditional settings are conveniently located in the Advanced Tab of most Sections, Rows, and Modules. Where you set your Conditional Logic, depends on what your goals are. If you wanted to simply use the example above, it is probably better to set your conditions on a row or section. Now let’s say instead, you want to display different download links for your killer app based on the browser being used to visit your site, you might rather add the condition on the actual modules that contain the download links.
Let’s take a look at some use cases for the Divi Conditional Display Logic to help better explain how you might use them.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Divi Conditional Logic Use Case 1 – Upcoming Promo Countdown Timer
			

				
				
				
				
				
			

				
				
				
				
				One of the many cool features of the Divi Conditional Logic is that you can schedule content to be visible not only on certain days as detailed in the official announcement, but you can also have it only show between certain dates.
This is useful for something like Black Friday where you would probably do some marketing on your website in the days leading up to the event.
Follow the steps below to see how you would do that with the new update.
			

				
				
				
				
				Open one of your pages or create a new one and activate the Divi Builder
Add a new Section or Row that will contain the conditional content
Drop a Countdown Timer in there
Click on the settings for the Section/Row > Advanced Tab > Conditions > +
Scroll to Interaction > Select Date & Time > Select the Date & Time that you want your promotional marketing to Start
Make sure that Display Only If Current Date is set to Is After
Save
Click on + > Scroll to Interaction > Select Date & Time > Select the Date & Time that you want your promotional marketing to End
Make sure that Display Only If Current Date is set to Is Before
Save
			

				
				
				
				
				With 2 conditions in there, you will see that at the very top of your conditions a new drop-down has appeared. It has two options, display if one of the conditions are met, or display if all the conditions are met. You need to make sure that All Conditions are selected.
			

				
				
				
				
				Select Display if all conditions are true from the dropdown
Save
			

				
				
				
				
				Awesome, now when this page is visited between the specified Before and After dates, they will see the countdown.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Divi Conditional Logic Use Case 2 – Device Specific Content
			

				
				
				
				
				
			

				
				
				
				
				Have you ever visited a site to download some tool and it magically knew that you were visiting the site on a Mac or Windows PC, and served you a link for your device? Well, this is what you can now do with the Divi Conditional Display Logic.
This works great for app developers that want to get the user to a download in the quickest way possible.
Let me show you how easy it is.
			

				
				
				
				
				Open one of your pages or create a new one and activate the Divi Builder
Add a new Section or Row that will contain the conditional content
Now add an Image Module 
Click on the settings for the Image Module > Set the Image for the Device download link (We used Windows)
Advanced Tab > Conditions > +
Scroll to Device > Select Operating System > Check Windows
Make sure that Display Only If Operating System to Is
Save
			

				
				
				
				
				Ok, our one device is set, now we just need to add an option for Mac.
			

				
				
				
				
				Add another Image Module below the one we just added
Click on the settings for the Image Module > Set the Image for the Device download link (We used Mac)
Advanced Tab > Conditions > +
Scroll to Device > Select Operating System > Check Mac OS
Make sure that Display Only If Operating System to Is
Save
			

				
				
				
				
				Congrats, now when someone visits this page, they will see the content corresponding to the type of device they are using.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Divi Conditional Logic Use Case 3 – Product Specific Content
			

				
				
				
				
				
			

				
				
				
				
				Next up, I want to show you folks how seamlessly these new Divi Conditional Display Logic options integrate with Custom Post types, WooCommerce Products specifically for this example.
With the new settings, you can create conditions that allow you to show things like special coupons that pertain to specific products, or maybe you want to add a unique message when viewing a particular product category. 
This won’t only make your site more dynamic but will help you boost that bottom line.
Let’s take a look at how we can use the Theme Builder to create a Product Page Template that displays a message when a specific product is being viewed.
			

				
				
				
				
				Head over to Divi > Theme Builder > Add New Template > All Products > Create Template
All Products > Custom Body > Build Custom Body > Build From Scratch > Start Building
			

				
				
				
				
				Take a quick moment to build out a Product Page template for your site. If you already had one, it is fine to just edit that one.
			

				
				
				
				
				Somewhere on the template, Add a Text Module
Click on the settings for the Text Module > Set your special text that will only be shown when a specific product is viewed (We set it to “What goes good with a cap? Sunglasses!”)
Advanced Tab > Conditions > +
Scroll to Location > Select Products > Check a Product (We checked Cap)
Make sure that Display Only If Product to Is
Save
			

				
				
				
				
				Well done! Now when someone visits the product page for the Cap product, they will see our special conditional text on the page.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Now let’s examine the quality of those conditions…
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				There you have it, folks! 3 Additional Use Cases for the New Divi Conditional Display Logic Update. It’s still pretty fresh, so we are sure we will be looking at some other unique applications to help you guys build more dynamic websites for yourself and your clients in the near future.
If you’ve found some awesome uses for this new feature, definitely drop us a line in the comments or even send us a message, we’d love to hear from you folks!
			

				
				
				
				
				
 
			
			
				
				
				
				
			
				
				
			

The post 3 Use Cases for the New Divi Conditional Display Logic Update appeared first on Divi Engine.


How to Add a Call to Action (CTA) Button to the Divi Menu
Divi Engine — Tue, 28 Sep 2021 06:08:34 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Learning how to add a CTA (or Call To Action) button to the Divi menu is a great way to catch a visitor’s attention and drive them to well…answer your call to action. This might be to request a quote, get in touch, or check out your collection of pet rocks, it really is up to you.
In today’s tutorial, we will show you how you can easily add a CTA button to your Divi Menu using just a little bit of CSS magic in under 7 minutes.
			

				
				
				
				
				What is a Divi Menu Call to Action Button?
Good question!
A call to action button is a button that is placed on a website to get your user to perform a certain action. Now these action items might be to request a quote, schedule an appointment, or check out your menu, this is really up to you. When we talk about adding a call to action (CTA) button in the Divi Menu, it is usually a button that is placed either at the start of your Divi menu, or at the end.
Divi does not natively allow you to add a call to action button in the Divi Menu, so we need to use some CSS to transform a menu link, into a call to action button.
Take a look below.
			

				
				
				
				
				Preview:
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				BEFORE
			

				
				
				
				
				
			
			

				
				
				
				
				
				
				
				
				
				AFTER
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Table of Contents
			

				
				
				
				
				
Setting it Up
Adding the CSS Code
Polishing the Design
Conclusion

			

				
				
				
				
				
					
					
						Difficulty
						Easy
					
				
			

				
				
				
				
				
					
					
						Time
						10 Minutes
					
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Setting it Up
Adding a Call To Action (CTA) to the Divi Menu
			

				
				
				
				
				 We need to do a little bit of work before we can add the CSS that will add a button to our Divi menu and we are going to want to make sure that we already have a menu assigned as the Primary Menu. We also need to add the link for our CTA, so let’s get to work.
			

				
				
				
				
				Head over to Appearance > Menus
Make sure that your “Primary Menu” is selected
Add a New Custom Link by going to Add menu items > Custom Link
Set the URL to whatever action you want the user to do, we will set it to the contact page
Set Link text to “Get in touch“
Click Add to Menu
Save
			

				
				
				
				
				Ok, so now if you take a look at your site on the frontend, you’ll see this new “Get in touch” link added to your Divi menu, but it looks no different than the other menu items and certainly won’t inspire any of your visitors into action.
We’ll enable ourselves to spice things up a bit by adding a class to the CTA we just added.
			

				
				
				
				
				Still, on the Menus page, click on the Screen Options in the top right corner of the screen
Check the box next to CSS Classes
Expand the Custom Link we added > CSS Clasess > Add the CSS Class de-menu-cta
Save
			

				
				
				
				
				
			

				
				
				
				
				If you hastily saved and refreshed the frontend of your site you might be a little disappointed now, because hey, nothing changed! You are both right and wrong. The change we made by adding this class was 100% under the hood and we will use this in the next step to tell the CSS where it needs to go to make things look all button-ey.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Adding the CSS Code
Using CSS to turn our CTA Link into a CTA Button in the Divi Menu
			

				
				
				
				
				With all the bones in place, it is time to kit it out with our CSS which will finalize adding a CTA button to our Divi menu. Since we will be applying this style throughout our site, we will add the code to the Divi Theme Options.
			

				
				
				
				
				Go to Divi > Theme Options > Custom CSS
Paste the Code below in the Custom CSS Box
Save
			

				
				
				
				
				
			

				
				
				
				
				
			

				
				
				
				
				If you go and take a look at the front end of your site, you’ll see that our CSS code has turned that uninviting text into a flashy Call to Action button that has a fun scale effect on hover. Now you might be happy with the way it looks, but keep going to the next section if you want to make some minor changes.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Polishing the Design
Customize the Call to Action Button in our Divi Menu
			

				
				
				
				
				Changing the look of our brand new CTA button in our Divi menu looks more intimidating than it really is because we added a good amount of comments in the CSS code that will guide you on making some easy changes.
Take a look at our code again.
On lines 5 and 6 respectively, you can easily change the colors of the text and button background.
On line 7 you change the text size, and on line 8 you can change the shape of the button borders.
All you need to do is go back to your Divi Theme Options and change those lines to mix things up a bit.
If you want to take things a step further like adding a wiggle animation, for example, check out our tutorial How to add attention-grabbing pure CSS Animations to your Divi Modules.
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				You know what to do…
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				Adding a CTA button to our Divi Menu was an easy change with a big result. It is a fantastic way to draw your users toward a desired action like signing up for your newsletter or maybe checking out your blog. Whatever you use it for, we’d love to hear your feedback!
Please let us know what you thought in the comments below, we are always looking for ways to engage and enrich our community!
Until next time 😁
			
			
				
				
				
				
			
				
				
			

The post How to Add a Call to Action (CTA) Button to the Divi Menu appeared first on Divi Engine.


How to Reverse Loop Layout Columns in Divi Machine
Divi Engine — Fri, 24 Sep 2021 13:29:25 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
UPDATED: April 22nd, 2022

Today we have a quick Code Snippet for you that will allow you to Reverse Loop Layout Columns in Divi Machine. This is another Code Snippet that was inspired by a request that we received from one of our awesome customers, maybe it was you 😉
Basically, we are going to reverse the column order in our loop layout on an interval that we specify. This can mean that we will alternate the order of the columns for every 2nd, 3rd, or 4th loop, and so on, you get to decide! In our example today we will be alternating the column order for every second loop in our Divi Machine Archive Loop module and we’ll be doing all of this with some clever CSS.
			

				
				
				
				
				Preview:
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				BEFORE
			

				
				
				
				
				
			
			

				
				
				
				
				
				
				
				
				
				AFTER
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Table of Contents
			

				
				
				
				
				
Let’s Talk CSS and :nth-child(n)
Adding the CSS Code
Tutorial Update – Reverse Margin
Conclusion

			

				
				
				
				
				
					
					
						Difficulty
						Easy
					
				
			

				
				
				
				
				
					
					
						Time
						5 Minutes
					
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Let’s Talk CSS and :nth-child(n)
			

				
				
				
				
				So like we mentioned, we want every second loop in our archive loop to reverse the order of the columns in that loop. That is heavy usage of the word loop and can get confusing, so definitely check out our support article on What Is The Custom Loop Layout to lift some of the fog on that topic.
To achieve this, we will need to convert every second loop to a flex layout, and then reverse the order by setting the flex-direction property to row-reverse. Sounds easy right? Well, it actually is because all we need here is 4 lines of IQ1000 CSS. But wait? How will my CSS be applied to only every second loop? Say hello to our little friend, Tony Mon:nth-child.
:nth What now? :nth-child‘s formal definition is as a structural pseudo-class which means that it is used to style content as it relates to its parent and sibling elements. Maybe you can now start to see how we would use this to select every second loop on the page and reverse those columns. We are not going to get too much into it for this post, but let me quickly explain How to Reverse Loop Layout Columns in Divi Machine using it.
:nth-child(n) takes an argument (n) which can be used in two ways.
			

				
				
				
				
				:nth-child(2)
We can replace the (n) with an integer number which will literally count out the loops until it reaches the second loop as used in this example, then apply the relevant CSS to ONLY that loop. If you changed that (2) to (7), it would count out the loops until it reaches the seventh loop, and play the CSS and so forth.
			

				
				
				
				
				:nth-child(2n)
Now when we prefix the (n) with an integer number, we are telling it to count out the loops until it reaches the second loop, apply the relevant CSS, BUT THEN, it restarts the count and continues to the page applying the CSS to EVERY second loop. Again, if you change the (2n) to (7n), it will apply the CSS to every seventh loop.
			

				
				
				
				
				Now that we have theory lesson over and done with, let’s get to the code!
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Adding the CSS Code
			

				
				
				
				
				To add the code, we have two options, depending on the scope of where you want the CSS applied.
If we want the code to be applied across our entire site and to all the Divi Machine Archive Loop Modules, then we would add it to the DIvi Theme Options.
Or if we would like it to only be applied to a single page, we would add it to a Code Module on that page.
			

				
				
				
				
				Entire Site
			

				
				
				
				
				Go to Divi > Theme Options > Custom CSS
Paste the Code below in the Custom CSS Box
Save
			

				
				
				
				
				Single Page
			

				
				
				
				
				Add a Code Module
Paste the Code below in the Code Box between opening and closing 

			

			

				
				
				
				
			

				
				
			

The post How to Reverse Loop Layout Columns in Divi Machine appeared first on Divi Engine.


Add Two Divi Button Modules Inline Next to Each Other
Divi Engine — Tue, 21 Sep 2021 06:51:14 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				If you’ve ever wanted to place Two Divi Button Modules Inline nice and snug next to each other but were left scratching your head as to how to get that done, you certainly are not alone! It is one of those things that we scratch our heads and think “Shouldn’t Divi be able to do that?”. There are many scenarios like maybe having “Sign In” and “Register” buttons right next to each other to fit the design language of your site, but Divi just does not allow you to do that natively. Never fear, in today’s tutorial we will show you exactly how easy it is to Add Two Divi Button Modules Inline Next to Each Other in any Row.
Let’s take a look!
			

				
				
				
				
				Preview:
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				BEFORE
			

				Our Awesome Team
			

				More Tutorials
			
			

				
				
				
				
				
				
				
				
				
				AFTER
			

				Our Awesome Team
			

				More Tutorials
			

				
				
				
				
				
 
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Table of Contents
			

				
				
				
				
				
Setting it Up
Adding the CSS Code
Polishing the Design
Conclusion

			

				
				
				
				
				
					
					
						Difficulty
						Easy
					
				
			

				
				
				
				
				
					
					
						Time
						5 Minutes
					
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Setting it Up
Adding Two Divi Button Modules
			

				
				
				
				
				To Add Two Divi Button Modules Next to Each Other we will need to set up a page with a Single Column Row that has two Button Modules placed in it. You can do this on a new page or work on the one you already have up, it does not really matter.
			

				
				
				
				
				Add/Edit a Page
Add a Single Column Row
Add two Divi Button Modules
Save
			

				
				
				
				
				Now this will be our basic structure for the tutorial on top of which we will make a few small changes and then add some code to get it all working. Feel free to Update/Publish this page and take a look at what it looks like on the frontend, you’ll see the two buttons stacked on top of each other.
Let’s implement those small changes I mentioned.
			

				
				
				
				
				Single Column Row Settings > Advanced Tab > CSS ID & Classes
Add the CSS Class de-inline-buttons
Save
			

				
				
				
				
				NOTE: The class needs to be added to the element containing the buttons. We are using a single column row in this example and that is why we add the class to the row, but if you are using a row with multiple columns, you need to add the class to the column that has your buttons in it.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Adding the CSS Code
Placing our Two Divi Button Modules Inline Next to Each Other
			

				
				
				
				
				With the stage set, we need to get these stacked buttons cozied up with a little bit (and I mean a little bit) of CSS code. Now if you’ve followed a few of our tutorials by now, you know there are a few options of where you can add the CSS, and why you would choose either option.
In short, you can do this either with a Divi Code Module, your Child Theme CSS file, or in the Divi Theme Options Custom CSS. For this tutorial, we will use the Code Module on the page.
			

				
				
				
				
				Add a Code Module
Paste the Code below in the Code Box between opening and closing 

			

			

				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Table of Contents
			

				
				
				
				
				
Creating the Text Effect
Customize the Effect
Conclusion

			

				
				
				
				
				
					
					
						Difficulty
						Easy
					
				
			

				
				
				
				
				
					
					
						Time
						5 Minutes
					
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Creating the Text Effect
			

				
				
				
				
				This is actually super easy, just follow the steps below.
			

				
				
				
				
				Step 1
Add a Code Module where you want the text displayed.
			

				
				
				
				
				Step 2
Copy and Paste the code below as is.
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Customize the Effect
			

				
				
				
				
				Customizing this is clean and simple if you know even just a little bit of CSS. Just check out the comments in the code to see where you make changes.
To easily change the alignment of the text, you can just modify that in the Design Tab of the code module.
If you are a CSS wizard, you can do other fun things like add animations, but we will leave that for another tutorial.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				The text goes…good job!
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				I don’t think that was even 5 seconds let alone minutes! We hope you found this quick tutorial on How to Capitalize a Character when Hovered in Divi as awesome as we did making it.
Definitely let us know what you thought in the comments!
			
			
				
				
				
				
			

				
				
			

The post How to Capitalize a Character when Hovered in Divi appeared first on Divi Engine.


How to Add a Filtered Portfolio Triggered by any Divi Module
Divi Engine — Tue, 07 Sep 2021 14:43:50 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Enhancing some of the stock Divi modules is easier than you think, with just a little bit of code, we can make some pretty awesome changes to give your Divi site more of a custom feel that wows your clients! In this week’s tutorial, we are going to show you How to Add a Filtered Portfolio Triggered by any Divi Module using jQuery and CSS.
You can use the tutorial to have the stock Divi Filterable Portfolio Module filter the Projects by clicking on a Blurb Module, Text Module, or any other Divi Module you decide. We will also talk about the code a little so that you can even further customize the way your Filterable Portfolio Module works and is displayed.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Table of Contents
			

				
				
				
				
				
Adding Projects to Your Portfolio
Create and Style Your Filter Trigger Modules
Add the Custom jQuery
Add the Custom CSS
Conclusion

			

				
				
				
				
				
					
					
						Difficulty
						Intermediate
					
				
			

				
				
				
				
				
					
					
						Time
						10 Minutes
					
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Adding Projects to Your Portfolio
			

				
				
				
				
				The first thing we need to make sure of is that you already have some projects assigned to categories on your Divi site. You might already have them set up, but just in case you do not, follow the steps below to get set up for the rest of the tutorial.
			

				
				
				
				
				Create Project Categories
Head over to Projects > Categories > Then Add Your Categories.
Make sure to make a note of the Category Slugs, because we will use this in our code and layout.
			

				
				
				
				
				
			

				
				
				
				
				Add Some Projects
Head over to Projects > Add New¹.
Add a Title², Description³, and Featured Image⁴.
Assign a Category⁵.
Publish⁶ the Portfolio.
Repeat this process until you have about 4 Portfolio items for each category.
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Create and Style Your Filter Trigger Modules
			

				
				
				
				
				So we need a place where we will display this unique Filtered Portfolio Triggered by any Divi Module. so you can either use an existing page that you have created, or you can create a new one from scratch. Whichever you choose, we suggest you place it in it’s own section on said page.
			

				
				
				
				
				Add a Divi Filterable Portfolio Module
In a new single column row, add a Filterable Portfolio module.
On the Design Tab, set the Layout Style to Grid.
Head to the Advanced Tab and add the CSS Class divi-engine-filter, which we will be using in our code.
Under Custom CSS, scroll down to Portfolio Filters, and add the line display: none; as we are busy replacing that with our very own fancy filters.
You can style the rest of the module however you like.
			

				
				
				
				
				Add a Divi Text Module
In a new three column row, add a Text module in the first column.
Type the Name of the first Category you created earlier in the Body.
Head to the Advanced Tab and add the CSS ID which is the same as your first category slug , this was filter-item-1 in our example, but your will be whatever you set it to.
You can style the rest of the module however you like.
Now make 2 copies of this text module and drag each one into its own column.
For each copy, change the text in the body to reflect the Category name, and change the CSS ID to the appropriate slug for that Category.
Open the Settings for the 3-Column Row and on the Advanced Tab, add the CSS ID custom-grid-control. Our jQuery will wait to see if we click on any of the filters in this row.
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Add the Custom jQuery
			

				
				
				
				
				Now it gets interesting, we are going to add some jQuery which will wait for us to click one of the trigger modules that we created in the previous steps, and then filter by that Category. We will also use some magic to add a CSS class that will indicate which filter is active.
			

				
				
				
				
				Add a Code Module
Add a Code Module below your Filterable Portfolio Module.
Copy and Paste the code below between opening and closing 

			

				
				
				
				
				NOTE: Make sure the class matches the module you are using, for example a blurb would be .et_pb_blurb
			

			

				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Add the Custom CSS
			

				
				
				
				
				To make sure that everything works correctly and is displayed as we intend to, we need to use some CSS to pull it all together.
			

				
				
				
				
				Add a Code Module
Add a Code Module below your jQuery Code Module.
Copy and Paste the code below between opening and closing  tags.
Copy and paste the code below between the  tags.



			

				
				
				
				
				Step 3) Modify the CSS Code
For each instance of “YOUR CSS HERE”, delete it and we will use that .de-breakpoint class we created earlier to manipulate the text module.
Copy and paste the code below in the place where you just deleted the text.



Now for each breakpoint, replace the text in the Content property with the type of device you are targeting for example “Extra Large Desktop” or “Medium Tablet“.
Save the Module.
Update the Page.
			

				
				
				
				
				Step 4) Test it Out!
Using your favorite desktop browser, open the saved page.
Now when you resize the window, you will see that it updates the text with the active Custom Divi Breakpoint for that module.
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Quick Review
			

				
				
				
				
				This was a pretty basic example to demonstrate the different Custom Breakpoints we added to our Divi Text Module, but there is a ton of other things you can do. For example, you can add more or fewer breakpoints, that have breaks at different pixel sizes, all you need to do is modify those values in the code we supplied.
You can also drop the class we used and target certain elements in Divi site-wide by using the appropriate class by adding your breakpoint CSS to Divi > Theme Options > Custom CSS.
For example, maybe you have a Full-width Menu Module on a page that you want to behave differently outside of the default Divi breakpoints. All you would need to do is target the module with the .et_pb_fullwidth_menu and .fullwidth-menu-nav CSS classes underneath your target breakpoint.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Hooray for Breakpoints and Responsive Design using Divi!
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				Adding Custom Breakpoint to Divi Modules was the only kind of scary, right? There are so many different ways you can utilize this skill to further fine-tune your site to meet your goals, we don’t always have to wait for the Elegant Theme Team to add a feature like this.
Definitely show us in the comment section what you guys achieve using this new skill, maybe you’ll even teach us a thing or two 😉
			
			
				
				
				
				
			

				
				
			

The post Adding Custom Breakpoints to Divi appeared first on Divi Engine.


How to Add Brands to your Divi WooCommerce Store (3 Methods)
Divi Engine — Tue, 20 Jul 2021 20:09:02 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Brands are super powerful because of the familiarity they bring, so learning how to add brands to your Divi WooCommerce store can be a great way to help build some trust with that brand recognition. Why wouldn’t we, we have poured all the effort and time into crafting something special, so we should definitely pull out all the stops to make sure we convert our visitors into customers. Brands have invested tons of money into crafting that familiarity, nothing wrong with a little piggybacking action here because after all, we are making them richer by selling their products for them 😎
From Amazon to Footlocker, to your store, this is an extremely effective tool that you should be using if you stock multiple brands in your Divi WooCommerce store. In this week’s tutorial, we will talk about 3 ways that we can add brands to our Divi WooCommerce store and we will see how the results compare through these different methods.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Table of Contents
			

				
				
				
				
				
How to add Brands to your Divi WooCommerce store without plugins
Adding Brands to your Divi WooCommerce store using a FREE plugin
How to add Brands to your Divi WooCommerce site using Divi BodyCommerce
Conclusion

			

				
				
				
				
				
					
					
						Difficulty
						Easy
					
				
			

				
				
				
				
				
					
					
						Time
						5 – 10 Minutes per method
					
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				How to add Brands to your Divi WooCommerce store without plugins
			

				
				
				
				
				WooCommerce busts out of the gate with a ton of FREE features that can help you do all sorts of awesome stuff, albeit some better than others. Unfortunately, brands fall into that “others”  category, but either way, let’s take a look at how we will integrate Brands into our Divi WooCommerce site using only the tools found in WooCommerce.
			

				
				
				
				
				Step 1) Add Brand Attributes
			

				
				
				
				
				So let’s head over to the backend of your site and go to Products > Attributes.
There you can add a new attribute called “Brands” and make sure to check the box that says “Enable Archives” before you click on “Add attribute”.
			

				
				
				
				
				
			

				
				
				
				
				Last step here is to click on “Configure terms” in the Terms column next to you newly added Brands attribute, then start adding your various brands.
I’m going to add Nike and Reebok for this tutorial.
			

				
				
				
				
				
			

				
				
				
				
				Step 2) Assign your Brands to WooCommerce Products
			

				
				
				
				
				Let’s jump over to our products and edit a product to which we want to assign a brand attribute by going to Products > All Products > Edit a Product that will be assigned a brand.
			

				
				
				
				
				
			

				
				
				
				
				Scroll down to the Product Attributes > Click the drop-down > Select Brands > Then type the brand you want to associate with this product, I went with Nike.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				With that in there, you can “Save attributes” and then “Update” your Divi WooCommerce Product.
Now let’s take a look how that is displayed on the frontend of your site.
			

				
				
				
				
				
			

				
				
				
				
				Now we can be honest here, this is not going to win any design awards, but we work with what we have. Customers can now see which brands are associated with which products and that is a win either way.
Let’s take a look at how we can take it one step further.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Adding Brands to your Divi WooCommerce store using a FREE plugin
			

				
				
				
				
				If you want a little more features and functionality for adding brands to your Divi WooCommerce site, you can use a 3rd party plugin to help extend the tools you find natively in WooCommerce. We tested a FREE plugin called Perfect Brands for WooCommerce and it does great to allow you to add things like the brand logo, banners, and index pages.
			

				
				
				
				
				Step 1) Install the Perfect Brands plugin
			

				
				
				
				
				Make sure you are logged into the backend of your Divi WooCommerce site then head over to Plugins > Add New > Search for Perfect Brands for WooCommerce.
Once installed, make sure to activate the plugin.
			

				
				
				
				
				
			

				
				
				
				
				Step 2) Create some Brands for your Divi WooCommerce site
			

				
				
				
				
				To get started, you can either click on the settings button under the activated plugin name, or you just go to Products > Brands. 
			

				
				
				
				
				
			

				
				
				
				
				All you need to do here is add the pertinent details for the brand you are adding. 
Let’s add Reebok, so we will populate the name, description, logo, and brand banner.
Make sure to save when you are done.
			

				
				
				
				
				
			

				
				
				
				
				Step 3) Assign your Brands to Products
			

				
				
				
				
				To assign our newly created brands to some products we’ll head over to Products > All Products > Edit a Product that will be assigned a brand.
			

				
				
				
				
				
			

				
				
				
				
				On the edit screen adding the brand to your Divi WooCommerce product is super easy, all you need is to the check the box next to the name of the brand you want to assign in the column on the right of the page, then “Update” your product.
			

				
				
				
				
				
			

				
				
				
				
				Time to take a look at what this should look like! Go ahead a view the product that you just saved. On that page you can also click the brand that now shows and it will take you to an index page where all the products for that brand is listed that utilizes that banner we added earlier.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				You can see our brand logo is added on the product page but looks a bit weird, and you can change things like the location and the size of the image used in the plugin settings by going to WooCommerce > Settings > Brands. You’ll see many extra settings there for things like adding an index page and more, but that is outside the scope of our tutorial today.
Instead, we will spend this time showing you how you can go even further with a feature you’ll find in Divi BodyCommerce to take your brand assignments to the next level.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				How to add Brands to your Divi WooCommerce site using Divi BodyCommerce
			

				
				
				
				
				On to the crème de la crème on how to add Brands to your Divi WooCommerce site, hello BodyCommerce. Amongst the hundreds of features and over 60 modules in BodyCommerce tailored for Divi and WooCommerce, you’ll find some great ways to show off and filter through the brands you stock on your Divi WooCommerce site.
Let’s take a look.
			

				
				
				
				
				Step 1) Add Brand Attributes
			

				
				
				
				
				So let’s head over to the backend of your site and go to Products > Attributes.
There you can add a new attribute called “Brands” and make sure to check the box that says “Enable Archives” before you click on “Add attribute”.
			

				
				
				
				
				
			

				
				
				
				
				The last step here is to click on “Configure terms” in the Terms column next to your newly added Brands attribute, then start adding your various brands. 
You’ll give it a name, description, and add the URL for the brand logo that you should upload to the media library.
I’m going to add Nike and Reebok for this tutorial.
			

				
				
				
				
				
			

				
				
				
				
				NOTE: If you don’t see the option to add the image URL, make sure that you have enabled the BodyCommerce Variation Swatches on the settings page by heading to Divi Engine > BodyCommerce Settings > Variation Swatches > Enable. (see image below)
Thanks to /u/rojichan on reddit for pointing this out!
			

				
				
				
				
				
			

				
				
				
				
				Step 2) Assign your Brands to WooCommerce Products
			

				
				
				
				
				Let’s jump over to our products and edit a product to which we want to assign a brand attribute by going to Products > All Products > Edit a Product that will be assigned a brand.
			

				
				
				
				
				
			

				
				
				
				
				Scroll down to the Product Attributes > Click the drop-down > Select Brands > Then type the brand you want to associate with this product, I went with Nike.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				With that in there, you can “Save attributes” and then “Update” your Divi WooCommerce Product.
			

				
				
				
				
				Step 3) Add the Attributes Module to your Single Product Page Layout
			

				
				
				
				
				Head over to Divi Engine > BodyCommerce > Product Page > Edit this layout under the selected product page layout.
Place the BodyCommerce .PL Attributes module where you would like your brand to be displayed on the page and open the module settings.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				On the Content Tab, you’ll set Attribute to Product Brands then toggle “Link to attribute archive page” and “Show Image/Color Swatch” to YES.
Lastly, you’ll make sure the “Choose the swatch type” setting is also on Image.
Save the module, then update your Layout.
			

				
				
				
				
				
			

				
				
				
				
				Now when you look at one of your products, you should see something similar to the image below.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Looking gooOOOood. We quickly added our brands to our product loops and our product pages with minimal effort. We are even filtering with them on our search pages. That is good stuff.
These are but a few of the powerful features you’ll find in Divi BodyCommerce, and only scratches some of the other features you can take advantage of to make index pages for your brands, ajax filtering, and brand pages. We will be making another post that dives deeper into integrating brands on your Divi BodyCommerce site soon.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Now that you’ve mastered 3 methods on how to add brands to your Divi WooCommerce site, you know what time it is…
 
…Happy Dance with me guys!
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				Ok team, great work on getting through this with me! Whichever method you choose how to add brands to your Divi WooCommerce site, we know that your customers will appreciate it and that you will see a positive impact not only in satisfaction but your bottom line also.
			
			
				
				
				
				
			
				
				
			

The post How to Add Brands to your Divi WooCommerce Store (3 Methods) appeared first on Divi Engine.


How to Password Protect a Page in WordPress and Divi
Divi Engine — Tue, 13 Jul 2021 08:07:17 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				When building websites with WordPress and Divi, there might be times you want to Password Protect a Page in WordPress for various reasons. Luckily, WordPress has this ability built right into it, so we can Password Protect any Page in WordPress super easily without needing any additional tools or plugins!
In this post, we will take a look at why you might want to Password Protect a Page in WordPress, then show you exactly how to do just that!
You can watch the video, or follow along with the text, whatever works best for you 😎
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Table of Contents
			

				
				
				
				
				
Why Password Protect a Page in WordPress?
How to Password Protect a Page in WordPress
How to Password Protect your Entire WordPress Site
How to Password Protect Blocks of Content on a Divi Page
Conclusion

			

				
				
				
				
				
					
					
						Difficulty
						Easy
					
				
			

				
				
				
				
				
					
					
						Time
						5 Minutes
					
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Why Password Protect a Page in WordPress?
			

				
				
				
				
				There could be a bunch of great reasons you may want to Password Protect a Page or Specific Content Block in WordPress to prevent the wrong people from seeing something.
A common use for this might be when you are working on a Landing Page redesign and you only want the client to be able to go in and view your work-in-progress because if this was a page that was indexed by accident, it could damage a brand and cause some serious client dissatisfaction.
Another common scenario is where you want information being communicated to specific group folks, like a price list of your products for wholesales, so it would be best to create a Password Protected Page which they can access.
You might be here for a different reason, but regardless of the why, this is a useful thing to know which is very easy to implement.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				How to Password Protect a Page in WordPress
			

				
				
				
				
				Now, I did not lie when I said this will be super easy, just follow along with the steps below to Password Protect your WordPress Page:

Log into the backend of your WordPress Install.
Head over to Pages > Edit the Page that you want to Password Protect.
Under Publish on the right side column, click Edit next to Visibility.
Now select “Password protected” from the options that appear and enter a password of your choosing…please don’t make this “password” 😉
Hit that Publish or Update button, ALL DONE!

Now when you visit this page on the frontend you will be greeted with a password prompt before you can view the content.
			

				
				
				
				
				NOTE: You can password protect Posts the same way, this is not limited to Pages.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				
			
			

				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				How to Password Protect your Entire WordPress Site
			

				
				
				
				
				
			

				
				
				
				
				Coming Soon Page, Maintenance Mode & Landing Pages by SeedProdFor those times when you might be working on the launch of a new site for a client, you’d definitely want the entire site locked down until you are ready to launch.
Two popular ways to do this depending on your skill level are either a plugin or using HTTP authentication. Since we want to keep things simple for this tutorial, we will look at a plugin. There are a few options like Coming Soon Page, Maintenance Mode & Landing Pages by SeedProd that offer a ton of features and a full-fledged maintenance mode.
This might be a bit overkill in many situations, so we will use a more lightweight solution called Password Protected by Ben Huson.
			

				
				
				
				
				PRO TIP: If you need help generating a strong password, check out our FREE Password Generator.
			

				
				
				
				
				Follow along with the steps below to Password Protected your entire WordPress site:

Log into the backend of your WordPress Install.
Head over to Plugins > Add New.
Search for “Password Protected” by Ben Huson then install and activate the plugin.
Now we’ll go to Settings > Password Protected.
Check the “Enabled” box next to the “Password Protected Status” field then set your password below. The same rules apply, please don’t use “password”.

Now when you visit your WordPress site on the front end you will be greeted with a password prompt before you can view the site.
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				How to Password Protect Blocks of Content on a Divi Page
			

				
				
				
				
				Ok, now on to the good stuff. As we’ve shown, WordPress allows you to Password Protect entire pages very easily using its built-in features, but what happens when you only want to restrict access to any section or element on your Page? Well, if you are using Divi, then you are in luck because this is exactly what Divi Protect does.
You can follow along below even if you don’t own Divi Protect (yes 😉 ) by visiting this link which will generate a temporary WordPress install with Divi Protect.
			

				
				
				
				
				Follow along with the steps below to Password Protect any Section or Element on a Divi  WordPress site that has Divi Protect Installed:

Log into the backend of your WordPress Install.
Head over to Divi Engine > Protect Sections > Add New.
Name the Divi Section that will be protected and activate the Divi Builder.
You can build anything here, but let’s just add a Single Column Row here and place a Contact Form module inside the Column.
With our Password Protected Section styled and ready, we can add our password in the column on the right.
Copy the Unique Section Shortcode below the password and Publish/Update this Section.
Head over to the page where you would like to add a Password Protected Section and edit it.
Now all you need to do is add the Divi Protect module where you want to display your Password Protected Section and select the section we created on the Content Tab.
Hit Publish and check out your page on the frontend of the site. ALL DONE!

Now when you visit your Divi page on the front end you will be greeted with the unprotected content, as well as a password prompt that will reveal the Password Protected Section.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Access Granted! You did it!!
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				Whatever your reason for needing to Password Protect your WordPress Websites, Pages, or Sections, we hope this tutorial was helpful in showing you some handy options for implementing it quickly and securely.
			
			
				
				
				
				
			
				
				
			

The post How to Password Protect a Page in WordPress and Divi appeared first on Divi Engine.


How to add attention-grabbing pure CSS Animations to your Divi Modules
Divi Engine — Tue, 22 Jun 2021 16:36:47 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				In this week’s tutorial, we are going to show you how you can add attention-grabbing pure CSS Animations to your Divi modules. We will work together to add the CSS code to your Divi install, customize the CSS to change things like the duration of the CSS animations, and more.
This might sound complicated, but I promise you’ll be a pro in no time. Check out the preview below to have a quick look at what we will be creating.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				COMPLEXITY
Easy
			

				
				
				
				
				TIME
10 Minutes
			
			

				
				
				
				
				
				
				
				
				
				ASSUMPTIONS

Basic knowledge of Divi and WordPress.
Divi and your Child Theme are already installed and configured.


 
			
			

				
				
				
				
				
				
				
				
				
				VERSIONS
Divi 4.9.7
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Preview:
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Why add attention-grabbing pure CSS Animations to your Divi modules?
			

				
				
				
				
				Because they are AWESOME! That is why.
Thank you for coming to my TED Talk.
Jokes. Mostly. Divi already comes with 7 stock animations that are super simple to use if you want to create some basic animations, but what do you do when you want something more complex and unique? You hit up the Divi Engine blog of course!
With more complex animations you can draw the user’s attention to certain parts of your page like a buy button, maybe a sale you have going on, or maybe you just want to add some creative flair.
In this tutorial, we are going to show you how to add attention-grabbing pure CSS Animations to your Divi modules that accomplish pretty complex effects by utilizing keyframes. Don’t know what keyframes are? Think of them as different styles, positions, or shapes applied to your Divi module over a specific time period. This time period can be broken up into percentages (or waypoints) so that your Divi module can have different states at different times within that specified period.
			

				
				
				
				
				
			

				
				
				
				
				CSS Keyframes definition by the Mozilla team  ⬆️
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Basic Anatomy of CSS Animations and Keyframes
			

				
				
				
				
				I just want to spend another second on CSS Keyframes before diving into how to add attention-grabbing pure CSS Animations to your Divi modules because you can do some cool things if you understand what they do better.
Let’s take a look at the code below:
			

				
				
				
				
				
			

				
				
				
				
				animation: colorchange 4s infinite;
So, in that code, we have a class that declares our animation. It will use the keyframes defined in “colorchange”, the entire animation will last 4 seconds, and it will repeat an infinite number of times.


@keyframes colorchange {

0% {background-color: red;}
25% {background-color: green;}
75% {background-color: blue;}
100% {background-color: yellow;}
}



On line 5 we declare the set of CSS Keyframes which we also used on line 2 where we declared our animation. Moving to lines 6 to 9, the percentages represent a percentage of our 4-second animation and the value of a CSS property at that time.
Can you guess what happens if you add this code to a Divi module?
You’re right! At 0 seconds, the module with that “.de-colorchange” class assigned will have a red background, between second 0 and second 1, it will fade to green, between second 1 and second 2, it will fade from green to blue, and so forth. In the end, the animation will start over.
Granted, this is a very simple example, but how cool is that? Are those gears in your head turning yet?
Now that we have a better idea of how CSS animations work, let’s look at how to add attention-grabbing pure CSS Animations to your Divi modules.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				How to add attention-grabbing pure CSS Animations to your Divi modules
			

				
				
				
				
				Armed with some basic knowledge of CSS animations it is time to add some gorgeous CSS animations we crafted for you to your Divi site. We put together 3 animations we thought were pretty awesome, and we hope so do you. All you need to do is choose the animation you want to add, copy the code, then follow along with the tutorial.
You can follow along with the video, or you can follow the text instructions below.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Our 3 CSS Animations to choose from for this Tutorial:
			

				
				
				
				
				Divi Engine
			

				
				
				
				
				
					
					
						Focus-In Animation
						This is a very cinematic animation that would work great as a title reveal on a creative site for something like a production company, or maybe you just feel like getting a little fancy, do you 🙃
					
				
			

				
				
				
				
				NOTE: This CSS Animations looks and works best when it is centered on the page.
			

				
				
				
				
				
 
			

				
				
				
				
				
			

				
				
				
				
				Divi Engine
			

				
				
				
				
				
					
					
						Text Pop-Up Animation
						This makes for another great animation that literally looks like it is jumping off the page. It would work fantastic for a title or maybe just some statement you want to impressive you visitor.
					
				
			

				
				
				
				
				
 
			

				
				
				
				
				
			

				Divi Engine
			

				
				
				
				
				
					
					
						Attention Wobble Animation
						Nothing like a good wobble to grab the attention of your visitors, this is my go-to for reminding them that there is a call to action here. This works great for buttons intended to draw the user in. The slight wobble is subtle and draws the eye every few seconds.
					
				
			

				
				
				
				
				NOTE: This CSS Animations looks and works best when it is centered on the page.
			

				
				
				
				
				
 
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Text Instructions
			

				
				
				
				
				If you prefer to quickly copy and paste the text and settings for this tutorial, please scroll down and you will see everything as it relates to the steps found in the video tutorial.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Step1) Select the CSS Animation you want to add to your Divi module
Click here or scroll up to our 3 CSS animations and copy the code below the one you’d like to give a spin.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Step 2) Add a Code Module and Paste the Code
Navigate to the page where you will add the CSS animation to your Divi module.

Add a code module anywhere on the page.

Open the code module and paste the CSS code between opening and closing style tags.
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Step 3) Add the CSS class to your Divi Module
Copy the CSS class in for the CSS animation you want to add to your Divi module.

Open the settings for the Divi module which you want to animate.

Head over to the advanced tab.

Past the class (without the preceding . ) into the CSS class field.

Save your work!
			

				
				
				
				
				
			

				
				
				
				
				NOTE: Don’t be alarmed if the animation you chose does not loop as they do in the previews because we did that intentionally to demonstrate the animations. Some animations would be overkill if they looped in the infinity. That said if you would like to loop the animation infinitely all you need to do is add infinite in the animation declaration. More on how to do that over here.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				How awesome are you? You did it!
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				When you add attention-grabbing pure CSS Animations to your Divi modules, you say no mediocrity, not today! With just a tiny little bit of new knowledge and practice, you are on your way to stop making that Divi site look like a Divi site. There are plenty of resources online to find some awesome CSS animations, just check out Codepen for some inspiration, or create your own from scratch over at CSS Animate.
			

				
				
				
				
				Do you ❤️ posts like this?

Stay in the know with our latest tutorials, snippets, and valuable articles by signing up for our newsletter!

				
				
					
						
						
							Success!
						
						
							
					
						First Name
						
					
							
					
						Last Name
						
					
							
					
						Email
						
					
							
							
					
						
							
							Subscribe
						
					
							
						
						
						
						
						
						
					
				
			
			
				
				
				
				
			
				
				
			

The post How to add attention-grabbing pure CSS Animations to your Divi Modules appeared first on Divi Engine.


How to FIX “Sorry this file type is not permitted for security reasons.”
Divi Engine — Fri, 11 Jun 2021 11:55:42 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				COMPLEXITY
Intermediate
			

				
				
				
				
				TIME
10 Minutes
			
			

				
				
				
				
				
				
				
				
				
				ASSUMPTIONS

Basic knowledge of WordPress.
Comfortable managing your site with FTP.
You have made a backup of your site.


 
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				We have all been there while hard at work on a project and all of a sudden you get the dreaded “Sorry This File Type Is Not Permitted for Security Reasons” Error while you are trying to upload a file to your WordPress install. We have heard from a few of our customers that this often happens to them when trying to import CSV files containing settings to BodyCommerce or Divi Nitro. It is frustrating, but luckily there are a few easy solutions to fix this problem.
In today’s tutorial, we are going to show you a few ways to fix the “Sorry, This File Type Is Not Permitted for Security Reasons” issue with either a plugin and a little bit of code, so you can choose the best method for your level of comfortability with tampering with WordPress sites.
Before you dive into the fix, let’s quickly talk about what the error means.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				“Sorry, This File Type Is Not Permitted for Security Reasons” WordPress error meaning
			

				
				
				
				
				
			

				
				
				
				
				So this whole “Sorry, This File Type Is Not Permitted for Security Reasons” error sounds way scarier than it really is because all it means is that the particular filetype is on the no-fly list for your site and all we need to do is allow the filetype you are trying to upload.
The reason WordPress does this is to prevent any security issues that result from uploading potentially malicious files that often find themselves in a file type that is executable. This can lead to absolute anarchy on a site and do some serious permanent damage that could cost thousands in hard-earned cash to fix. Not to mention the stress that comes with it.
All these file types are referred to as MIME-types. And can be anything from an image format, to a database file, to a compressed archive file.
			

				
				
				
				
				NOTE: MIME stands for Multipurpose Internet Mail Extensions if you care. Smarter everyday, right?
			

				
				
				
				
				Default WordPress MIME-types
			

				
				
				
				
				By default, WordPress allows the following MIME-types:
			

				
				
				
				
				
 
  

			
			
				
				
				
				
			
				
				
			






















































File Extension MIME Type
.jpg image/jpeg, image/pjpeg
.jpeg image/jpeg, image/pjpeg
.png image/png
.gif image/gif
.ico image/x-icon
.pdf application/pdf
.doc application/msword
.docx application/vnd.openxmlformats-officedocument.wordprocessingml.document
.ppt application/mspowerpoint, application/powerpoint, application/vnd.ms-powerpoint, application/x-mspowerpoint
.pptx application/vnd.openxmlformats-officedocument.presentationml.presentation
.pps application/mspowerpoint, application/vnd.ms-powerpoint
.ppsx application/vnd.openxmlformats-officedocument.presentationml.slideshow
.odt application/vnd.oasis.opendocument.text
.xls application/excel, application/vnd.ms-excel, application/x-excel, application/x-msexcel
.xlsx application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.psd application/octet-stream
.mp3 audio/mpeg3, audio/x-mpeg-3, video/mpeg, video/x-mpeg
.m4a audio/m4a
.ogg audio/ogg,
.wav audio/wav, audio/x-wav
.mp4 video/mp4
.m4v video/x-m4v
.mov video/quicktime
.wmv video/x-ms-asf, video/x-ms-wmv
.avi application/x-troff-msvideo, video/avi, video/msvideo, video/x-msvideo
.mpg audio/mpeg, video/mpeg
.ogv video/ogg
.3gp video/3gpp, audio/3gpp
.3g2 video/3gpp2, audio/3gpp2


 

			

				
				
				
				
				NOTE: If you are looking at this on your mobile, you can drag the table left to see the rest of the table.
			

				
				
				
				
				Other Possible WordPress MIME-types
			

				
				
				
				
				In addition to the default WordPress MIME-types, we can permit the following:
			

				
				
				
				
				
 File Extension MIME Type
.bmp image/bmp
.tif image/tiff
.tiff image/tiff
.asf video/x-ms-asf
.asx video/x-ms-asf
.wm video/x-ms-wm
.wmx video/x-ms-wmx
.divx video/divx
.flv video/x-flv
.qt video/quicktime
.mpe video/mpeg
.webm video/webm
.mkv video/x-matroska
.txt text/plain
.asc text/plain
.c text/plain
.cc text/plain
.h text/plain
.csv text/csv
.tsv text/tab-separated-values
.ics text/calendar
.rtx text/richtext
.css text/css
.htm text/html
.html text/html
.m4b audio/mpeg
.ra audio/x-realaudio
.ram audio/x-realaudio
.mid audio/midi
.midi audio/midi
.wax audio/x-ms-wax
.mka audio/x-matroska
.rtf application/rtf
.js application/javascript
.swf application/x-shockwave-flash
.class application/java
.tar application/x-tar
.zip application/zip
.gz application/x-zip
.gzip application/x-zip
.rar application/rar
.7z application/x-7z-compressed
.exe application/x-msdownload
.pot application/vnd.ms-powerpoint
.wri application/vnd.ms-write
.xla application/vnd.ms-excel
.xlt application/vnd.ms-excel
.xlw application/vnd.ms-excel
.mdb application/vnd.ms-access
.mpp application/vnd.ms-project
.docm application/vnd.ms-word.document.macroEnabled.12
.dotx application/vnd.openxmlformats-officedocument.wordprocessingml.template
.dotm application/vnd.ms-word.template.macroEnabled.12
.xlsm application/vnd.ms-excel.sheet.macroEnabled.12
.xlsb application/vnd.ms-excel.sheet.binary.macroEnabled.12
.xltx application/vnd.openxmlformats-officedocument.spreadsheetml.template
.xltm application/vnd.ms-excel.template.macroEnabled.12
.xlam application/vnd.ms-excel.addin.macroEnabled.12
.pptm application/vnd.ms-powerpoint.presentation.macroEnabled.12
.ppsm application/vnd.ms-powerpoint.slideshow.macroEnabled.12
.potx application/vnd.openxmlformats-officedocument.presentationml.template
.potm application/vnd.ms-powerpoint.template.macroEnabled.12
.ppam application/vnd.ms-powerpoint.addin.macroEnabled.12
.sldx application/vnd.openxmlformats-officedocument.presentationml.slide
.sldm application/vnd.ms-powerpoint.slide.macroEnabled.12
.onetoc application/onenote
.onetoc2 application/onenote
.onetmp application/onenote
.onepkg application/onenote
.odp application/vnd.oasis.opendocument.presentation
.ods application/vnd.oasis.opendocument.spreadsheet
.odg application/vnd.oasis.opendocument.graphics
.odc application/vnd.oasis.opendocument.chart
.odb application/vnd.oasis.opendocument.database
.odf application/vnd.oasis.opendocument.formula
.wp application/wordperfect
.wpd application/wordperfect
.key application/vnd.apple.keynote
.numbers application/vnd.apple.numbers
.pages application/vnd.apple.pages


 
			

				
				
				
				
				NOTE: If you are looking at this on your mobile, you can drag the table left to see the rest of the table.
			

				
				
				
				
				That is a TON of MIME-types, but if you want to fix the “Sorry, This File Type Is Not Permitted for Security Reasons” error, it is very possible that you would need to allow the upload of one of these WordPress MIME-types.
So let’s look at how we would go about getting our MIMES off the no-fly lists here.
			

			

				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				3 Methods to FIX “Sorry, This File Type Is Not Permitted for Security Reasons”
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Method 1: Modify your wp-config.php to allow any MIME-type
(This is a horrible idea!)
			

				
				
				
				
				
			

				
				
				
				
				This is by far the easiest, but also the most dangerous way to resolve the “Sorry, This File Type Is Not Permitted for Security Reasons” error as it basically tells WordPress to allow a file of any MIME-type to be uploaded. We definitely do not recommend this method but felt it was important to show it so that you best understand how this all works.
Using your favorite FTP client, you can access your wp-config.php file and add the code below above the line that reads “/* That’s all, stop editing. Happy blogging. */”. Once saved, you can kiss the “Sorry, This File Type Is Not Permitted for Security Reasons” error goodbye and start uploading any file type.
			

				
				
				
				
				PRO-TOP: If you are not sure on how to FTP into your site and make changes, check this excellent guide by the team at Elegant Themes on Managing Your WordPress Website with FTP.
			

				
				
				
				
				
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Method 2: Use a 3rd Party Plugin
(This is a better idea!)
			

				
				
				
				
				
			

				
				
				
				
				This is also a fairly simple method to get things going, but it does come with its own risks because these plugins are not maintained in-house and sometimes fall victim to vulnerabilities that get discovered by curious hackers. There are a bunch of plugins available that will allow you to quickly and easily allow or disallow certain MIME-types from being uploaded, we recommend Enhanced Media Library.
Once installed, you’ll head over to the MIME-types page in the plugin settings.
			

				
				
				
				
				
			

				
				
				
				
				Once there, you have 2 options for allowing a new MIME-type, you can either check a box next to the MIME-type you would like to allow, or you can add a new MIME-type by clicking the “+Add New MIME Type” button at the top of the page.
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Method 3: Allow Specific MIME-types in your functions.php
(This is the best idea!)
			

				
				
				
				
				
			

				
				
				
				
				Carefully selecting and adding your required MIME-types with some code in the functions.php file of your child theme is by far the most secure way to get it done. Instead of exposing your site to any type of file uploads, you keep down to exactly what you need and no more. This way you minimize any potential security vulnerabilities and you are not bloating your site with a bunch of unneeded code or features. Of course, this requires a little extra technical ability, but that is why we are here.
Similar to method 1, you need to FTP into your WordPress install and edit the functions.php file of the child theme. Now note, when messing with your WordPress file code, it is always a good idea to make a backup of the file at the very least in case something goes wrong. We recommend backing up your whole site before you touch any code.
With that said, we will add your new MIME-types in the functions.php file by pasting the code below before the closing PHP tag. In our example, we are adding CSV upload, but you can add any file type listed above. Just replace the file extension and MIME-type with what you want.
			

				
				
				
				
				PRO-TOP: If you are not sure on how to FTP into your site and make changes, check this excellent guide by the team at Elegant Themes on Managing Your WordPress Website with FTP.
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Congrats, all done! Now MIME your excitement 🥁
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				As you can see, the “Sorry, This File Type Is Not Permitted for Security Reasons” is mostly bark with no bite. With a few easy steps, you can quickly resolve it and get back to your awesome WordPress project. Just be careful which implementation you choose because as we mentioned, they each carry their own level of inherent risk. 
Good luck and stay safe out there folks!
			
			
				
				
				
				
			

				
				
			

The post How to FIX “Sorry this file type is not permitted for security reasons.” appeared first on Divi Engine.



How to get WooCommerce New Order Alerts on your Mobile Device
Divi Engine — Tue, 08 Jun 2021 07:50:16 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				COMPLEXITY
Easy
			

				
				
				
				
				TIME
5-10 Minutes
			
			

				
				
				
				
				
				
				
				
				
				ASSUMPTIONS

Basic knowledge of WooCommerce and WordPress.
WooCommerce is already installed and configured.
You have some products already loaded into WooCommerce.

You have a smart device connected to the internet available.

 
			
			

				
				
				
				
				
				
				
				
				
				VERSIONS
WooCommerce 5.3
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				🚨 Important Update 🚨
Unfortunately, the app by Monkey Data we used for WooCommerce Order Alerts has been discontinued, so this method no longer works.
There is good news though, WP Enhanced is launching WP Order Alerts which not only fills this gap but gives you a better way to get instant WooCommerce Order Alerts on your mobile devices for free.

Check them out and sign up for early access below.
				Check out WP Order Alerts
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				WooCommerce is our go-to for WordPress eCommerce sites and wow, we have seen our BodyCommerce customers build all sorts of sites that look amazing selling from Surfboards to Flowers. That is pretty widespread, so it goes without saying that these sites probably have many different requirements and timelines, especially when it comes to getting notified of a new order coming in. Today we will show you how you can get live WooCommerce New Order Alerts on your mobile device with every sale without even needing any additional 3rd party plugins for FREE. This will work on both your favorite Apple and Android devices and only takes a few minutes to set up.
Email alerts are great for learning that there is a new order in the books, but this can sometimes be a little slow and would often be limited to one recipient at a time. Wouldn’t it be easier to have a dedicated device, or even multiple devices, that gets pinged every time you make an online sale on your WooCommerce site? Once you have your WooCommerce New Orders being pushed to your mobile devices, you’ll wonder how you ever lived without it!
Let’s quickly take a look at what types of WooCommerce stores could benefit from getting New Order Alerts almost instantly.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Preview
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				What types of businesses could benefit from instant WooCommerce New Order Alerts?
			

				
				
				
				
				So now that we know why it is important to get our WooCommerce New Order Alerts on our mobile device, let’s take a look at how it could impact different types of eCommerce sites.
			

				
				
				
				
				
					
					
						Restaurants
						In the fast past environment, it is of the utmost importance to get orders ready and out on time, and more often than not getting an email notification will just not be fast enough to get an order made and ready for pickup. Restaurants often already have dedicated devices for orders, so why not combine that with getting your WooCommerce New Order notifications on your mobile device. Nothing is worse than having a customer show up before the order is ready or maybe even not noticed yet. Welcome to never missing a takeout order again!
					
				
			

				
				
				
				
				
					
					
						Service Based Businesses
						Much like the restaurant industry, time is money in service-based businesses. Personal trainers, hairdresser, pretty much anybody that gets booked by timeslots need to know when someone is coming in or when they are expected to be somewhere. Getting notified right on their mobile device the moment bookings happen will make sure that you are ready for game time. This can also be a huge help for businesses like Florists where people need their orders tended to in a timely manner and often local pickup/delivery options are used.
					
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				How to set up WooCommerce New Order Alerts using Order Alert
			

				
				
				
				
				Great news! To get your WooCommerce New Orders Alerts sent right to your mobile device is extremely easy and you don’t need to write any code or even install additional 3rd party plugins that could slow down your site. We use an app that is available on both the Apple App Store and the Google Play Store called Order Alert for WooCommerce by the team at MonkeyData. This app is free and is so simple to set up, your 2-year-old could do it for you. You can follow along in the video below, or skip to text instruction if that is more your jam!
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Text Instructions
			

				
				
				
				
				If you prefer to quickly copy and paste the text and settings for this tutorial, please scroll down and you will see everything as it relates to the steps found in the video tutorial.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Step 1) Download Order Alert on your Mobile Device
			

				
				
				
				
				Using your favorite mobile device, head over to its app store and search for “Order Alert for WooCommerce” by MonkeyData.

Install Order Alert for FREE.
			

				
				
				
				
				IMPORTANT: Allow both Notifications and Access to the camera when prompted.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Step 2) Generate an API key
			

				
				
				
				
				Head back to your WordPress install.
Go to WooCommerce > Settings > Advanced > REST API > Add Key
Description: Give it a descriptive name, it does not really matter what it is.
User: Select the WordPress user for whom this key is, this could be any active admin user.
Permissions: Set to Read/Write
Click on Generate Key
			

				
				
				
				
				IMPORTANT: Make sure the permissions are set to Read/Write, it will not work when setting up the app if this is not set correctly!
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Step 3) Connect Order Alert to the API key
			

				
				
				
				
				Now, on your mobile device, open the Order Alert for WooCommerce app.

If you have not yet done so, enable notifications, this is very important.

When prompted to add a new store, tap continue.

Agree to the terms and conditions, then continue.

Allow access to your device camera, then scan the QR code on your WordPress site.

Confirm the email address for the assigned user and enter your WooCommerce install URL then continue.
			

				
				
				
				
				IMPORTANT: Be sure to use the same email address for the user selected when creating the API key as well as using the URL for your site where you created the API key.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Step 4) Test!
			

				
				
				
				
				On the back of your site go to WooCommerce > Orders > Add Order

Set order Status to Complete

Add an Item to the Order

Click Create
You should a notification on your phone that a new order was placed pretty much instantly!
			

				
				
				
				
				PRO-TIP: If you don’t have any products in your database to test with, check out this tutorial on Importing WooCommerce Sample Data.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Ding! Ding! All done 😁
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				See, getting your WooCommerce New Order Alerts on your Mobile Device is super easy and it is almost unbelievable that it is free! This is a huge value add for your clients and just makes your a rockstar dev for coming up with solutions to problems they probably did not even know they had. That is what it is all about, bringing value to our customers. If you want to even further extend the value you bring to your eCommerce clients, definitely check out our plugin BodyCommerce with over 61 custom modules and enhancements that will help you continue being the rockstar dev you are!
			
			
				
				
				
				
			
				
				
			

The post How to get WooCommerce New Order Alerts on your Mobile Device appeared first on Divi Engine.



How to Add Divi Modules to your site Widget Areas and Menus
Divi Engine — Tue, 01 Jun 2021 08:26:46 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				COMPLEXITY
Intermediate
			

				
				
				
				
				TIME
10 Minutes
			
			

				
				
				
				
				
				
				
				
				
				ASSUMPTIONS

Basic knowledge on Divi.
Divi is already installed and configured.

 
			
			

				
				
				
				
				
				
				
				
				
				VERSIONS
Divi 4.9.4
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				In today’s tutorial, we are going to take a look at how you can add your Divi Modules to areas you wouldn’t normally think that they are able to go like the Widget Areas on your site and even in the menus. This is a fun skill that can help you push the creativity of your Divi websites and you’ll see that it is actually super simple to do. Take a look below to see how we added the Divi Login Module in 3 spots, the footer widget area, on the page, and in the menu.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Preview:
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				So how does one add a Divi Module in the Footer Widget Area or the Menu?
			

				
				
				
				
				To figure that out it is good to talk quickly about how Divi processes the modules to display them with all of your settings like the text, fonts, and colors. Essentially, Divi Modules are just a collection of custom shortcodes that can accept some parameters you pass to it that will yield different outputs or functions. Now, luckily we don’t need to memorize all these shortcodes and parameters because the smart folks over at Elegant Themes have given the awesome Divi Builder where we can manage our Modules visually.
			

				
				
				
				
				We can take a look at these shortcodes by simply adding some modules to a Divi page and then disabling Divi. When you then go to look at a page you will see all of those shortcodes with the parameters that were passed to them as plain text. We will need to copy and paste these where we want those modules to be displayed. There is one limitation of this method and it is that you can only paste these shortcodes in spots that can process HTML, so that means that we can not add them to our menu by default, for that we will need to use a plugin very aptly called Shortcode in Menus.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Text Instructions
			

				
				
				
				
				If you prefer to quickly copy and paste the text and settings for this tutorial, please scroll down and you will see everything as it relates to the steps found in the video tutorial.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Step 1) Add a Login Module to a Page
			

				
				
				
				
				If you don’t have a page ready, let’s create one and add a New Page with a Single Column Row then drop a Login Module in there.
Don’t forget to give this page a descriptive name, we called ours “Log In”.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Step 2) Disable Divi and Copy the Shortcode
			

				
				
				
				
				With our Divi Login Modules saved on the page we will go to Appearance > Themes > And activate a theme that is not Divi on our site (we activated the stick Twenty Twenty-One Theme).
Now when we go to the page we created in the previous step Pages > Log In > View we will see the shortcodes generated by the Divi in all of their plain text glory. It should something like this below:
			

				
				
				
				
				
			

				
				
				
				
				We are interested in the highlighted opening and closing shortcodes, so please go ahead and copy all that to your clipboard. Also before moving on, go back to Appearance > Themes and reactivate the Divi Theme.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Step 3) Place the Shortcode in the Footer Widget Area
			

				
				
				
				
				To get our blurb to display in a Widget Area on our site we have to go to Appearance > Widgets.
Once here, decide in which Widget Area you want your Divi Module to be displayed then add a Custom HTML Widget. We placed our Widget in the Footer.
All you need to do now is Paste that Copied shortcode into the HTML Widget.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Step 4) Add the Divi Login Shortcode to the Menu
			

				
				
				
				
				To get our Divi menu to process our shortcode we need to install a lightweight plugin called “Shortcode in Menus” so let’s go to Plugins > Add New > Then search for “Shortcode in Menus” and install then activate it.
Now just head over to Appearance > Menus > and add a Custom Link with a Navigation Title of “Log In” and set the link to “#”.
Add another Custom Link as a sub-menu item and paste our Divi Login Module shortcode into the Navigation Label field and again set the link to “#”.
Now if we save all this and head to the front-end of our site we will see the login form in the Footer Widget area and we will also see it when we hover over the Log In Navigation link in our menu.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				All done, now check out what you’ve created and pat yourself on the shoulder!
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				Well, we hope that wasn’t too tough, we know those pages with the shortcodes can get a little “busy” but as long as you find the opening and closing shortcodes and copy all the juicy settings in between, your site will look great. Getting your Divi Modules to display in the Widget Areas is a great way to enhance your user experience, but just make sure that it makes sense when you do so because it can be easy to get carried away and start making things a little out of place.
Let us know how it went in the comments below and for sure check out the blog for more great tutorials!
			
			
				
				
				
				
			
				
				
			

The post How to Add Divi Modules to your site Widget Areas and Menus appeared first on Divi Engine.



How to slide anything in Divi using Slick.js slider
Divi Engine — Tue, 25 May 2021 04:51:06 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				COMPLEXITY
Intermediate
			

				
				
				
				
				TIME
10 Minutes
			
			

				
				
				
				
				
				
				
				
				
				ASSUMPTIONS

Basic knowledge on Divi.
Divi is already installed and configured
Comfortable with FTP-ing into your site and uploading files
A Child Theme is Installed and Active

 
			
			

				
				
				
				
				
				
				
				
				
				VERSIONS
Divi 4.9.4
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				In this tutorial, we will take a look at how we can make some awesome sliders with the ability to slide anything in Divi using Slick.js, a lightweight javascript library with a ton of cool features. We have all been in that position where our Divi lives would just be a little bit easier if I could have a slider with a bunch of Divi Blurb Modules, maybe a row, or even a combination of these Divi elements. Don’t worry, your Divi Engine fam is here to show you how without the need for yet another plugin, instead we will only use a few lines of code, and this awesome library.
Time to take a closer look!
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Preview:
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Slick What Now?
			

				
				
				
				
				Great question! Slick Slider is a free JavaScript library with a ton of useful features that makes sliding anything on your website an absolute breeze.  Our favorite part? We can easily integrate it to any Divi WordPress site to give you the ability to slide various elements with very little code.
Check out some of the feature highlights:
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				
					N
					
						Fully responsive. Scales with its container.
						
					
				
			

				
				
				
				
				
					N
					
						Separate settings per breakpoint.
						
					
				
			

				
				
				
				
				
					N
					
						Swipe enabled. Or disabled, if you prefer.
						
					
				
			
			

				
				
				
				
				
				
				
				
				
				
					N
					
						Fully accessible with arrow key navigation.
						
					
				
			

				
				
				
				
				
					N
					
						Infinite looping.
						
					
				
			

				
				
				
				
				
					N
					
						Autoplay, dots, arrows, callbacks, etc...
						
					
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				So now that we know why Slick Slider will make our Divi site look awesome, let’s take a look at how we integrate it into our site.
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Text Instructions
			

				
				
				
				
				If you prefer to quickly copy and paste the text and settings for this tutorial, please scroll down and you will see everything as it relates to the steps found in the video tutorial.
			

				
				
				
				
				IMPORTANT NOTE: IF (and only IF) you are using BodyCommerce or Divi Machine we have great news, you can totally skip Steps 1 & 2 as we have already integrated Slick.js for you 😁
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Step 1) Add the Slick.js files to your Child Theme
			

				
				
				
				
				Download Slick.js
Head over to https://kenwheeler.github.io/slick/ and download the zip file and extract the files.
			

				
				
				
				
				Upload Slick.js
Using your favorite FTP client, upload the extracted Slick folder to your WordPress site in the Child Theme folder.
			

				
				
				
				
				NOTE: This tutorial assumes that you know how to FTP into your WordPress install and upload files. If you are not sure how to do this, please check out this awesome tutorial by the team at Elegant Themes that will help you out.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Step 2) Integrating Slick.js into your Divi WordPress install
			

				
				
				
				
				With our files uploaded, let’s integrate the Slide.js files into our Divi install.
			

				
				
				
				
				Head over to Divi > Theme Options > Integration Tab
Copy and Paste the following code into the  section:
			

				
				
				
				
				
			

				
				
				
				
				NOTE: If you have any issues, make sure that the Slick folder is uploaded directly to the root of your Child Theme. If you don’t have a child theme be sure to check out this great tutorial on How to Create a Divi Child Theme with Dynamic CSS.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Step 3) Create your first Slick Slider in Divi
			

				
				
				
				
				Create a New Page > Build From Scratch > Start Building
Add Single Column Row that will house all the Divi modules which we will slide using Slide.js
Add any number or variation of modules you want to slide, we will use a Divi Blurb module for this tutorial
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Step 4) Add some jQuery magic
			

				
				
				
				
				To start utilizing Slick.js on this Divi page, we need to add some jQuery to designate what type of slider we are building and what class will be used to assign our parent container for the Divi Modules that will make up our slides.
Add a New Section
Add a New Single Column Row
Add a Code Module then copy/paste the code below between opening and closing 
			

				
				
				
				
				NOTE: You can find a list of different examples of different settings and slider styles by following this link.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Step 5) Add the CSS class we designated to our Parent Container
			

				
				
				
				
				Open the Column Settings for the row containing all the modules we will be sliding.
Row Settings > Column Settings
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Column Settings
			

				
				
				
				
				Advanced Tab
CSS Class: slide-stuff
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Great job, you nailed it!
			

				
				
				
				
				
			

				
				
				
				
				NOTE: If you are having issues with getting the slider to work as shown here, it is very likely that you are using the wrong path to your child theme from Step 2. You can verify whether this is the issue by inspecting the page and seeing whether there is a 404 error regarding the slick.js files. Just make sure to replace [your child theme folder] with your Child Theme folder as it is on your web server.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				That wasn’t so hard now was it? Sliding a variety of modules is a great way to make your Divi WordPress site shine and stand out from the rest. But the good news does not end there. If you are using either BodyCommerce or Divi Machine on your site you can skip step 1 and 2 because we already did the Slick.js integration for you. All you need to do is initialize Slick.js on the Divi pages where you want to use the plugin with the class name you need to assign to the parent of the elements you want to slide. Awesome stuff!
We hope that learning how to slide anything in Divi using Slick.js was a fun adventure for you and we can’t wait to see what you build with this new skill. Definitely drop a comment below with links to your awesome creations and any suggestions you might have for future tutorials.
			

				
				
				
				
				Do you ❤️ posts like this?

Stay in the know with our latest tutorials, snippets, and valuable articles by signing up for our newsletter!

				
				
					
						
						
							Success!
						
						
							
					
						First Name
						
					
							
					
						Last Name
						
					
							
					
						Email
						
					
							
							
					
						
							
							Subscribe
						
					
							
						
						
						
						
						
						
					
				
			
			
				
				
				
				
			
				
				
			

The post How to slide anything in Divi using Slick.js slider appeared first on Divi Engine.



How to Create a Divi Mega Menu for your Divi WordPress site
Divi Engine — Tue, 18 May 2021 15:16:36 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Mega Menus on Divi WordPress sites are a big trend in modern web design and you’ve definitely seen them when shopping online without even realizing it. Online stores lite like Amazon and Starbucks heavily implement it to help users like us navigate through what could have been massively confusing menus. So, to that point, you might be asking yourself “What is a Mega Menu?”. Mega Menus are a great way to avoid clutter when you have a long list of subpages and menus. Often the goal with a Mega Menu is to represent the options visually for things like categories which will reveal more options when hovered or clicked on. This creates a much better user experience by limiting their frustration in getting to those awesome products you or your clients might want them to buy.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Check out this example:
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				‘ere we can see the Evernote website including two Mega Menu layouts that look great. Navigating the features and pricing is an absolute breeze and you can easily incorporate one into your Divi WordPress site, but before we get to that, let’s look at some of the benefits of using a Mega Menu on your Divi WordPress site.

			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				What a is a Divi Mega Menu?
			

				
				
				
				
				When planning a large website with numerous categories and subcategories, a Mega Menu can help improve user experience. In plain English, a Mega Menu is a drop-down menu that lets you pack your entire website’s interface into a single menu which can help your visitors reach even the deepest portions of your website through the Divi Menu.
Besides improving the user experience and website functionality, Divi Mega Menus can also contribute to an increase in revenue, conversions, and the amount of time customers spend on your site.
So how can you create a Mega Menu on your Divi site? Let’s take a look!
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				When to use a Mega Menu in your Divi WordPress site
			

				
				
				
				
				There are two types of sites that greatly benefit from using Mega Menus, they are eCommerce sites and blog or news sites. The reason is that these types of sites usually have Depp catalogs of content and products that need to be easy to navigate. Using Mega Menus gives them a very visual and natural-feeling way to navigate through the different layers of the menu instead of flooding the screen with a bunch of text links. Mega Menus might even increase your SEO indexing as it adds more links to relevant content for your visitors.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				When not to use a Mega Menu in your Divi WordPress site
			

				
				
				
				
				While Mega Menus are fantastic, they don’t always work very well on smaller screen sizes which may just frustrate your users. Also, outside of a few examples like pricing tables, smaller sets of content or products might not work that great in a Mega Menu. Long menu links will also create an unpleasant experience for your visitors with text wrapping weird and the screen just being populated with a bunch of text.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				How to add a Mega Menu to your Divi WordPress site
			

				
				
				
				
				Now for the good stuff, let’s look at how we can add a Mega Menu to our Divi WordPress sites. Depending on your skill level, you can add a Mega Menu to your site with either some code utilizing some HTML and CSS code, or you can use a 3rd party plugin to get one up and running chop-chop.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Custom Code
			

				
				
				
				
				If you’re a skilled coder you can easily add a Mega Menu to your Divi WordPress site. Alternatively, you can hire a code ninja to get the job done for you. The downside to this is that it can be expensive. You can check out this guide that covers how to code a Mega Menu from scratch.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				3rd Party Plugin


			

				
				
				
				
				Now if you’re like me and don’t have the time, money, or skill, you can use a 3rd Party Plugin to add that Mega Menu to your Divi WordPress site. Not all plugins are created equal, but you can usually find a decent option for around $30 and it will have you up and running very quickly. The downside here is that your options can be fairly limited, especially since some of these plugins don’t integrate too great with the Divi Theme.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Divi Mega Menu
			

				
				
				
				
				Then there is our custom solution for adding a Mega Menu to your Divi WordPress site. At right around $11 you are getting just shy of a custom-coded experience. Why? Because this plugin uses the Divi Builder to build out your Mega Menus. This is awesome because you enjoy the flexibility of styling options in line with what is offered by the Divi Theme. We even went a bit further and added some additional custom options like overlays to highlight your Mega Menu.
Let me show you how quickly you can add a gorgeous Mega Menu to your Divi WordPress site using Divi Mega Menu.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Preview:
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				COMPLEXITY
Easy
			

				
				
				
				
				TIME
10 Minutes
			
			

				
				
				
				
				
				
				
				
				
				ASSUMPTIONS

Basic knowledge on Divi
Divi and Mega Menu are already installed and configured

 
			
			

				
				
				
				
				
				
				
				
				
				VERSIONS
Divi 4.9.4
Divi Mega Menu 3.1
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				How to Create a Divi Mega Menu with a Plugin (Divi Mega Menu)
			

				
				
				
				
				It is showtime! Check out the video below on how to add a Mega Menu to your Divi WordPress site with Divi Mega Menu. Alternatively, you can check out the text instructions at the bottom.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Text Instructions
			

				
				
				
				
				If you prefer to quickly copy and paste the text and settings for this tutorial, please scroll down and you will see everything as it relates to the steps found in the video tutorial.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Step 1) Create a New Mega Menu and Add First Row with Links
			

				
				
				
				
				Go to Divi Engine > Mega Menu > Add New
Give it a descriptive name and prepend “mm_” to the generated Unique Identifier.
Enable the Divi Builder > Build from Scratch > Add 3 Column Row > Add Blurb Module
			

				
				
				
				
				Blurb Module 1
			

				
				
				
				
				Content Tab
Text
Title: “Phones”
Image & Icon
Use Icon: YES

Icon: Mobile Phone
Background
Hover Color: #0fe5a8
			

				
				
				
				
				Design Tab
Image & Icon
Icon Color: White

Circle Icon: YES

Circle Color: #5430ce
Title Text
Title Font: Poppins

Title Text Alignment: Centered

Title Text Color: #5430ce / White (Hover)
Spacing
Padding Top/Bottom: 25px
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				SAVE your module, then make 2 copies, and drag a copy into each Column in the Row.
			

				
				
				
				
				Blurb Module 2
			

				
				
				
				
				Content Tab
Text
Title: “Tablets”
Image & Icon
Use Icon: YES
Icon: Tablet
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Blurb Module 3
			

				
				
				
				
				Content Tab
Text
Title: “Laptops”
Image & Icon
Use Icon: YES
Icon: Laptop
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Row Settings
			

				
				
				
				
				Content Tab
Background
Background Color: #f7f7f7
			

				
				
				
				
				Design Tab
Sizing
Use Custom Gutter Width: YES

Gutter Width: 1
Spacing
Padding Top/Bottom: 0px
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Step 2) Add a Promo Bar Row
			

				
				
				
				
				Add Single Column Row > Add Text Module
			

				
				
				
				
				Text Module
			

				
				
				
				
				Content Tab
Text
Body: “Free Shipping on all orders over $125!”
			

				
				
				
				
				Design Tab
Text
Text Font: Poppins

Text Font Weight: Ultra Bold

Text Color: White

Text Shadow: Option 1

Text Alignment: Centered
Spacing
Padding Top/Bottom: 25px
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Row Settings
			

				
				
				
				
				Content Tab
Background
Background Image: Keyboard
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Section Settings
			

				
				
				
				
				Content Tab
Background
Background Color: Transparent
			

				
				
				
				
				Design Tab
Spacing
Margin: 0px

Padding: 0px
			

				
				
				
				
				All Done…well…almost, one more step
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Step 3) Mega Menu Specific Settings
			

				
				
				
				
				Scroll past the Divi Builder to the Mega Menu Style Settings.
Full Width: YES

Disable on Mobile: YES
Copy your Mega Menu Custom Identifier to the clipboard.
Go to Appearance > Menus
Either select your Primary Menu or create one and assign it as the Primary Menu.
Screen Options > Check CSS Classes
Add a Custom Link
URL: #

Navigation Label: “Products”

CSS Class: Paste your Unique Identifier from the clipboard
			

				
				
				
				
				All Done! For real this time 😁
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				So as you can see, Mega Menus are a great way to add some depth and class to your sites as well as help your visitors get to the content they want as quickly as possible. We covered why you might want to add a Mega Menu to your Divi WordPress site as well as some ways to get it done ranging from slightly complicated, to slightly expensive, to our awesome in-house solution! We hope this was helpful and if you have any questions on how to add a Mega Menu to your Divi WordPress site, be sure to drop a comment below.
Stay awesome folks!
			

				
				
				
				
				Do you ❤️ posts like this?

Stay in the know with our latest tutorials, snippets, and valuable articles by signing up for our newsletter!

				
				
					
						
						
							Success!
						
						
							
					
						First Name
						
					
							
					
						Last Name
						
					
							
					
						Email
						
					
							
							
					
						
							
							Subscribe
						
					
							
						
						
						
						
						
						
					
				
			
			
				
				
				
				
			
				
				
			

The post How to Create a Divi Mega Menu for your Divi WordPress site appeared first on Divi Engine.



How to Fix “Fatal Error: Allowed Memory Size Exhausted” on your WordPress site
Divi Engine — Tue, 11 May 2021 12:06:14 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				If you’ve been using WordPress for a while now, you know that one of the most common errors you’ll see is the “Fatal Error: Allowed Memory Size Exhausted” message. This is super alarming because instead of seeing your gorgeous site, you see this ugly white page with some confusing text on the screen. Never fear, the Divi Engine team is here to bail you out. We are going to talk about why you might see the “Fatal Error: Allowed Memory Size Exhausted” error, but if you want to skip to the solution, click the button below.
			

				Skip to Solution
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				What does “Fatal Error: Allowed Memory Size Exhausted” mean?
			

				
				
				
				
				So let’s look at an exact example of this issue below and talk about what it means.
			

				
				
				
				
				
			

				
				
				
				
				The big clue here is in the message itself, it says that the “Allowed memory size of 33554432 bytes exhausted”. Now for some of us that are newer might think “But hey, my computer has a ton of memory”, and this is a common misunderstanding and why this message can be confusing. What this message refers to is the memory that your web server with your hosting provider has provided for your site to run. This is often set to a very low number like 32 megabytes which can cause issues when doing things like uploading images or installing a new theme. When the PHP which powers WordPress runs into that memory limit on the server, it triggers this fatal error causing widespread panic, but don’t stress as there is a very easy fix to the issue.
			

				
				
				
				
				NOTE: WordPress is written in PHP, which is a server-side programming language. The better hosting services you pay for, the better your sites will generally perform. Poor memory performance can often be tied to cheaper shared hosting.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				How to check your PHP Memory Limit
			

				
				
				
				
				The first step in avoiding the “Fatal Error: Allowed Memory Size Exhausted” issue is to check what your current PHP Limit is. If you are running an updated WordPress install, this is very easy to do. 
Just head over to “Tools” > “Site Health” > “Info”
Once there scroll down to the “Server” section and there you will see the “PHP memory limit”. If this number is 64 or less, you will definitely need to increase the “PHP memory limit”.
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Solution: “Fatal Error: Allowed Memory Size Exhausted”
			

				
				
				
				
				To fix this, all we need to do is access the filesystem for our WordPress install using your favorite FTP client and edit the wp-config.php file. This file can be found at the root of your WordPress install.
			

				
				
				
				
				NOTE: To learn more about editing the wp-config.php file check out this article.
			

				
				
				
				
				Once you’ve located the file and opened it in a text editor you will either need to modify a line of code that defines the amount of memory allocated to the PHP or add that line in.
define( 'WP_MEMORY_LIMIT', '256M' );
If you see the above line in the wp-config.php files, make sure that it is set to at least “256M”.
If you don’t see the line in this file, you’ll need to add it before the line that reads “/* That’s all, stop editing! Happy publishing. */“
			

				
				
				
				
				
			

				
				
				
				
				Make sure to save the file and that is it! Your WordPress install will now be much happier that it has more memory at its disposal.
			

				
				
				
				
				NOTE: In some instances, this solution may not work for and this is usually because your hosting provider has disabled this feature. If this is the case, contact the support team at your hosting provider and ask them to increase your PHP memory limit.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				Hopefully, this quick post solves your “Fatal Error: Allowed Memory Size Exhausted” issue and sends you on your way to build an awesome site. Definitely check out our blog for more articles just like this one designed to help you build the best sites possible.
			
			
				
				
				
				
			
				
				
			

The post How to Fix “Fatal Error: Allowed Memory Size Exhausted” on your WordPress site appeared first on Divi Engine.



Snippet: Display the Product Title & Price in the Divi WooCommerce Shop Module with CSS & jQuery
Divi Engine — Mon, 10 May 2021 20:56:17 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				COMPLEXITY
Easy
			

				
				
				
				
				TIME
10 Minutes
			
			

				
				
				
				
				
				
				
				
				
				ASSUMPTIONS

Basic knowledge on Divi and WooCommerce.
Divi and WooCommerce are already installed and configured.
You have some products with assigned categories in WooCommerce.



 
			
			

				
				
				
				
				
				
				
				
				
				VERSIONS
Divi 4.9.4

WooCommerce 5.2.2
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				So we’ve all seen those Shopify and SquareSpace product cards that show you the Product Title and Product Price as a cool overlay when you hover over them. Well, in this tutorial I’m going to show you how to create a Product Title and Price Overlay for your Shop Page in Divi and WooCommerce using some CSS and jQuery. It is going to look great, and your clients will love this option.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Why add the Product Title and Price as an Overlay to the Divi Shop Module?
			

				
				
				
				
				So, let’s ignore the fact that this Divi overlay looks awesome on our WooCommerce loops, there is a deeper reason than just eye candy. Doing this focuses the users’ attention on the product image which in turn creates value and attachment before they know the price. Psychologically we have now primed our user to make the purchase even before the price is revealed. This is a great tool for products that have a greater visual impact such as art or other high-end products.
Additionally, it adds a layer of interactivity for the user which further engages them on the page. The more engaged, the more likely you are to convert with your Product Title Overlay on your Divi WooCommerce Shop Module.
Now feel free to follow along with the video, or skip to the text instructions at the bottom.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Preview:
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Text Instructions
			

				
				
				
				
				If you prefer to quickly copy and paste the text and settings for this tutorial, please scroll down and you will see everything as it relates to the steps found in the video tutorial.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Step 1) Create a new Page and add a Divi Shop Module
			

				
				
				
				
				Add a Single Column Row
Add a Shop Module
			

				
				
				
				
				Shop Module
			

				
				
				
				
				Design Tab
Overlay
Overlay Icon Color: #0fe5a8

Overlay Background Color: rgba(84,48,206,0.75)
Title Text
Title Font: Poppins Title Font Weight: Semi-Bold Title Font Style: Uppercase Title Text Alignment: Centered Title Text Color: White Title Text Size: 18px Title Text Shadow: Option 1
Price Text
Price Font: Poppins Price Font Weight: Light Price Text Alignment: Centered Price Text Color: White Price Text Size: 18px Price Text Shadow: Option 1
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Step 2) Add jQuery Code
			

				
				
				
				
				Add a Code Module below the Shop Module
			

				
				
				
				
				Code Module
			

				
				
				
				
				Content Tab
Text
Code: Copy and Paste the text below into this box
			

				
				
				
				
				
			

				
				
				
				
				PRO-TIP: To learn more about jQuery detach, check out the documentation.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Step 3) Add CSS Code
			

				
				
				
				
				Add a Code Module below the jQuery Code Module
			

				
				
				
				
				Code Module
			

				
				
				
				
				Content Tab
Text
Code: Copy and Paste the text below into this box
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Step 4) Add the CSS Class to the Shop Module
			

				
				
				
				
				Let’s go back to our Divi Shop Module and head to the Advanced Tab
			

				
				
				
				
				Shop Module
			

				
				
				
				
				Advanced Tab
CSS ID & Classes
CSS Class: divi-engine-custom-overlay
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				All done!
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
			

				
				
				
				
				That was super easy, right? Adding a Product Title and Price to your overlay in Divi WooCommerce couldn’t have been easier. Now you can go and take it a step further and modify the code to change the position of the Divi WooCommerce Product Title or Text, or you can use it as is. Things like this give you another tool in your belt and another option for your clients to help differentiate their site from the competition. For another great tutorial on adding functionality using jQuery, check out our post on How to add a CSS class to Divi on scroll with some real case examples.
Thanks for checking this Tutorial out and we will catch you in the next one!
			

				
				
				
				
				Do you ❤️ posts like this?

Stay in the know with our latest tutorials, snippets, and valuable articles by signing up for our newsletter!

				
				
					
						
						
							Success!
						
						
							
					
						First Name
						
					
							
					
						Last Name
						
					
							
					
						Email
						
					
							
							
					
						
							
							Subscribe
						
					
							
						
						
						
						
						
						
					
				
			
			
				
				
				
				
			
				
				
			

The post Snippet: Display the Product Title & Price in the Divi WooCommerce Shop Module with CSS & jQuery appeared first on Divi Engine.



How to easily setup a Local Development Environment for Divi
Divi Engine — Tue, 04 May 2021 03:00:14 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				UPDATE (June 29th 2021): As of version 6.0 of Local by Flywheel they have made the PRO features FREE to anybody using the software, we think that is pretty awesome! More on that here.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				One of the best tools you can use to be more efficient as a Divi designer is to set up a local development environment for projects you are starting on or ones that you are already working on. In this post we are going to talk a little about what a local WordPress development environment is, why you might want to set one up, then show you how to set one up using one of our favorite tools.
 
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				What is a Local Development Environment?
			

				
				
				
				
				It basically means that instead of building your sites live on the internet, you build them locally on your machine. This is done by setting up a server environment similar to that which you would find on most web hosting services. This is amazing for your workflow because when you’re building a Divi site in your local development environment it looks and acts exactly the same as it would if you were building online because all the files and databases are stored locally.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Why setup a Local Development Environment for your Divi projects?
			

				
				
				
				
				
					
					
						It cuts down on development time
						The ability to rapidly deploy a WordPress install with Divi already activated and configured to your preferences makes the entire process very zippy.
					
				
			

				
				
				
				
				
					
					
						Gives you the ability to work offline
						Don’t be bound by the tethers of the internet 24/7. Since your computer is your website’s host, you can work when and where you want.
					
				
			

				
				
				
				
				
					
					
						Does not impact production sites
						You can test changes and updates to your production sites offline before making them live. This ensures a greater customer experience and avoids headaches with things like plugin conflicts.
					
				
			

				
				
				
				
				
					
					
						Gives you a playground to test new plugins or skills you're learning
						When you’re learning Divi or WordPress, it is great to have a place you can practice that does not require you to register a domain or pay for hosting. It is also a great spot to check out new plugins before rolling them out to production sites.
					
				
			

				
				
				
				
				PRO-TIP: To find some fantastic tutorials, snippets, and guides, check out the Divi Engine Blog for some great resources!
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Ok, so how do I setup a Local Development Environment for Divi?
			

				
				
				
				
				Great question! We know it might sound somewhat complicated to set one up, but it can be pretty easy, we promise.
The 2 most commons ways to set up a local development environment are:
			

				
				
				
				
				
					
					
						Local Server Stack
						A local server stack, such as LAMP (Linux Apache MySQL/MariaDB PHP) or WAMP (Windows Apache MySQL/MariaDB PHP) is a server (much like the server that runs on your webserver), which you will configure on your local machine. You can get pre-packaged stacks like MAMP for Mac users, or XAMPP for both Mac and Windows users, that will take the headache out of getting everything configured.
					
				
			

				
				
				
				
				
					
					
						Virtualized Environment
						A virtual development environment is a development environment set up on a virtual machine. Using virtual machines allows you to copy existing Divi WordPress sites, choose your server location, and even quickly delete sites once you’re finished and they’re published online. Some popular tools to do this are Desktop Server, WP Stagecoach, and Local by Flywheel.
					
				
			

				
				
				
				
				For this post, we are going to cover downloading and setting up a Virtualized Environment using Local by Flywheel which is 100% FREE.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Setting up a Virtualized Development Environment
To follow along, we first need to download a few things.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Downloading & Installing Local by Flywheel
Head over to the Local by Flywheel site and download it for your platform.
https://localwp.com/
Once you have it downloaded, continue to install it.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Downloading & the Divi Theme
Head over to the Elegant Themes site and log into your account.
https://www.elegantthemes.com/
Once logged in, look for “Divi” in the Downloads tab. Click the “download” button to get the zip file. Be sure to save this somewhere you can easily find it a little later.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Getting started with Local
			

				
				
				
				
				Step 1
When you run Local for the first time it will ask you to Create a New Site, so let’s click that button.
			

				
				
				
				
				
			

				
				
				
				
				Step 2
This will launch the setup wizard for our new WordPress site. It asks you to enter a name for our new site, so be sure to use something descriptive. We used “Local Tutorial”. Click Continue.
			

				
				
				
				
				
			

				
				
				
				
				Step 3
In the next step, we get the option to select either the “Preferred” or “Custom” setup. We recommend going with preferred for now. Click Continue.
			

				
				
				
				
				
			

				
				
				
				
				NOTE: The custom option allows you to configure the virtual server environment along with some options regarding which packages are installed. Most users don’t need to worry about this.
			

				
				
				
				
				Step 4
Here on the last step, we set the actual WordPress settings, so enter your desired username, password, and email. These are the same settings you will use to log into the dashboard of your new local WordPress install. Click the Add Site button.
			

				
				
				
				
				
			

				
				
				
				
				After a few moments, and a password prompt or two, you’ll see your site listed on the left of your window, along with all the details of your new site on the right.
			

				
				
				
				
				You can now easily log into your dashboard by clicking on that Admin button and entering the username/password combo you set up in the previous steps. 
			

				
				
				
				
				
			

				
				
				
				
				From here things should feel pretty familiar because like we said, everything will work and look like you are on a site that is live on the internet. You should now go ahead and install the Divi Theme with the zip file you downloaded in the earlier steps.
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Local features you will want to use
			

				
				
				
				
				Now that you have Divi install and configured on your local development environment the real magic begins. Let’s take a look at our two favorite features Local has to offer.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Cloning Divi Sites
			

				
				
				
				
				With Local you can easily clone any site that you have set up using the wizard. Take for example that you followed the steps so far and installed and configured Divi with your favorite plugins. Instead of having to redo all those steps, all you need to do is clone the site you made in the previous step, all it takes is few quick steps.
			

				
				
				
				
				Step 1
Right-click on the site you want to clone in the Local Dashboard.
			

				
				
				
				
				Step 2
Click Clone.
			

				
				
				
				
				Step 3
Simply name the clone, and you are done, my friend! How amazing and easy is that?
			

				
				
				
				
				
			

				
				
				
				
				Think about this for a second…ready?
Ok, let’s say you build a ton of Pizza sites and it takes you a few hours to configure and setup all the plugins. Creating a template site and just cloning it for future projects would save you all that time! This feature is a real game-changer for your workflow.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Live Previews
			

				
				
				
				
				Yeah, this is not an error, you can share live previews of your Divi project right from Local on your local development environment and it couldn’t be easier.
			

				
				
				
				
				Step 1
Select the site that you want to share in the Local Dashboard.
			

				
				
				
				
				Step 2
Click on Enable next to Live Link at the bottom of the screen.
			

				
				
				
				
				Step 3
After a few seconds, it will indicate that the site is now live. Now you can simply hit that copy button and share it with your client. So simple!
			

				
				
				
				
				
			

				
				
				
				
				No more weird situation where you need to push changes to a live site for a client to look at. This is especially helpful for some rapid iterations or client feedback.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
We hope this introduction into the world of local development environments was helpful to your and your workflow when working on Divi projects. It can really impact the speed and efficiency of you and your team, which means you can handle higher workloads, which means you can run a more successful web design business.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Please consider checking out Flywheel and the professional hosting services they offer using our affiliate link by clicking the button below.
				Flywheel WordPress Hosting
			
			
				
				
				
				
			
				
				
			

The post How to easily setup a Local Development Environment for Divi appeared first on Divi Engine.



How to Edit and Customize a Divi WooCommerce Single Product Page
Divi Engine — Tue, 27 Apr 2021 15:06:10 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				COMPLEXITY
Easy
			

				
				
				
				
				TIME
30 Minutes
			
			

				
				
				
				
				
				
				
				
				
				ASSUMPTIONS

Basic knowledge on Divi and WooCommerce.
Divi and WooCommerce are already installed and configured.
You have some products with assigned categories in WooCommerce.


 
			
			

				
				
				
				
				
				
				
				
				
				VERSIONS
Divi 4.9.4
WooCommerce 5.2.2
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				In this tutorial we are going to show you how to turn your boring Divi WooCommerce Single Product Pages into a conversion machine for your eCommerce projects. We will utilize a bunch of design features found right in any stock Divi and WooCommerce site that you can tweak to fit your brand and your message. The goal here is to show you as many tools as possible to get your creative juices flowing, so don’t worry if what we are building today is a little less Da Vinci and a little more Picasso.
Now feel free to follow along with the video, or skip to the text instructions at the bottom.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Preview:
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			

				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Text Instructions
			

				
				
				
				
				If you prefer to quickly copy and paste the text and settings for this tutorial, please scroll down and you will see everything as it relates to the steps found in the video tutorial.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Step 1) Add New Divi WooCommerce Single Product Page Template in Theme Builder and Create Product Details Row
			

				
				
				
				
				Head over to Divi > Theme Builder > Add New Template > Products > All Products > Create Template
All Products > Add Custom Body > Build Custom Body > Build From Scratch > Start Building
Add Two Column Row
Add Woo Images Module in Column 1, no changes or styling needed here
Add Woo Title Module to Column 2
			

				
				
				
				
				Woo Title Module
			

				
				
				
				
				Design Tab
Title Text
Title Font: Poppins
Title Font Weight: Bold
Title Text Color: Black
Title Text Size: 36px (Desktop) 28px (Mobile)
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Add Woo Price Module to Column 2
			

				
				
				
				
				Woo Price Module
			

				
				
				
				
				Design Tab
Price Text
Price Font: Roboto
Price Font Weight: Bold
Price Text Color: #0fe5a8
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Add Woo Description Module to Column 2
			

				
				
				
				
				Woo Description Module
			

				
				
				
				
				Design Tab
Text
Text Font: Roboto
Text Font Weight: Light
Text Size: 18px
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Add Woo Add to Cart Module to Column 2
			

				
				
				
				
				Woo Add to Cart Module
			

				
				
				
				
				Design Tab
Text
Text Font: Roboto
Text Font Weight: Light
Text Size: 18px
Button
Use Custom Styles for Button: YES
Button Text Color: #ffffff
Button Background: #0fe5a8
Button Border Width: 0px
Button Font Style: Uppercase
Button Padding Top: 10px
Button Padding Bottom: 10px
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Add Woo Rating Module to Column 2
			

				
				
				
				
				Woo Rating Module
			

				
				
				
				
				Design Tab
Star Rating
Star Rating Color: #ffd700
Star Rating Size: 18px
Text
Text Color: Black
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Add Woo Meta Module to Column 2
			

				
				
				
				
				Woo Meta Module
			

				
				
				
				
				Content Tab
Elements
Show SKU: Off

Show Tags: Off
Design Tab
Text
Meta Font Style: Uppercase

Link Text Color: #5430ce
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Add Text Module to Column 2
			

				
				
				
				
				Text Module
			

				
				
				
				
				Content Tab
Text
Body: “Get FREE SHIPPING on orders over $100!”
Background
Color: #5430ce
Design Tab
Text
Text Font: Poppins
Text Font Weight: Bold
Text Font Style: Uppercase
Title Text Color: White
Title Text Size: 18px
Alignment: Centered
Spacing
Padding: 15px 15px 15px 15px
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Add Blurb Module to Column 2
			

				
				
				
				
				Blurb Module 1
			

				
				
				
				
				Content Tab
Text
Title: “100% guarantee”
Body: “Don’t like it? Get a full refund.”
Image & Icon
Use Icon: YES
Icon: House
Design Tab
Image & Icon
Icon Color: #0fe5a8
Icon Placement: Left
Title Text
Title Font: Poppins
Title Font Weight: Bold
Title Text Color: Black
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Add Blurb Module to Column 2
			

				
				
				
				
				Blurb Module 2
			

				
				
				
				
				Content Tab
Text
Title: “Secure Checkout”
Body: “We encrypt all transactions.”
Image & Icon
Use Icon: YES
Icon: Credit card
Design Tab
Image & Icon
Icon Color: #0fe5a8
Icon Placement: Left
Title Text
Title Font: Poppins
Title Font Weight: Bold
Title Text Color: Black
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Step 2) Add Custom WooCommerce Cart Notices Row
			

				
				
				
				
				Add Single Column Row and move it above the product details row
Add Woo Cart Notice Module
			

				
				
				
				
				Woo Cart Notices Module
			

				
				
				
				
				Content Tab
Background
Color: #5430ce
			

				
				
				
				
				Design Tab
Text
Text Font: Roboto
Text Font Weight: Light
Text Size: 21px
Button
Use Custom Styles for Button: YES
Button Text Color: #ffffff
Button Background: #0fe5a8
Button Border Width: 0px
Button Font Style: Uppercase
Button Padding Top: 10px
Button Padding Bottom: 10px
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Step 3) Add Custom WooCommerce Breadcrumbs Row
			

				
				
				
				
				Add Single Column Row and move it to the top of the page
Add Woo Breadcrumb Module
			

				
				
				
				
				Row Settings
			

				
				
				
				
				Content Tab
Background
Color: Black
			

				
				
				
				
				Design Tab
Sizing
Width: 100%
Max-Width: 2560px
Spacing
Margin: 0px (top) 0px (bottom)
			

				
				
				
				
				Woo Breadcrumb Module
			

				
				
				
				
				Design Tab
Text
Text Font: Roboto
Text Font Weight: Light
Text Color: White
Text Size: 16px
Spacing
Padding: 10px (top) 10px (bottom) 10% (left)
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Step 4) Add Product Review Section
			

				
				
				
				
				Add a New Section
Add Single Column Row
Add Woo Reviews Module
			

				
				
				
				
				Section Settings
			

				
				
				
				
				Content Tab
Background
Color: #f9f9f9
Image: Dot Pattern
			

				
				
				
				
				Row Settings
			

				
				
				
				
				Content Tab
Background
Color: White
			

				
				
				
				
				Design Tab
Box Shadow
Box Shadow: Option 2
			

				
				
				
				
				Woo Reviews Module
			

				
				
				
				
				Content Tab
Elements
Show Author Avatar: YES (Desktop) NO (Mobile)
			

				
				
				
				
				Design Tab
Image
Image Rounded Corners: 50px
Review Count Text
Review Count Font: Poppins
Review Count Font Weight: Semi-Bold
Review Count Font Style: Uppercase
Review Count Text Alignment: Centered
Review Count Text Color: Black
Review Count Text Size: 34px (Desktop) 21px (Mobile)
Form Title Text
Form Title Font: Poppins
Form Title Font Weight: Semi-Bold
Form Title Text Size: 21px
Meta Text
Meta Font: Poppins
Meta Font Weight: Regular
Meta Text Color: #5430ce
Meta Text Size: 18px
Comment Text
Comment Font: Roboto
Comment Font Weight: Light
Text Size: 16px
Star Rating
Star Rating Color: #ffd700
Star Rating Size: 18px
Button
Use Custom Styles for Button: YES
Button Text Color: #ffffff
Button Background: #0fe5a8
Button Border Width: 0px
Button Font Style: Uppercase
Button Padding Top: 10px
Button Padding Bottom: 10px
Spacing
Padding: 5% 0px 5% 5%
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Add Image Module
			

				
				
				
				
				Image Module 1
			

				
				
				
				
				Content Tab
Image
Image: DE Logo Image
Design Tab
Sizing
Max-Width: 150px
Animation
Animation Style: Roll
Advanced Tab
Position
Position: Absolute
Location: Top Left
Vertical Offset: -75px
Horizontal Offset: -75px
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Add Image Module
			

				
				
				
				
				Image Module 2
			

				
				
				
				
				Content Tab
Image
Image: DE Logo Image
Design Tab
Sizing
Max-Width: 150px
Animation
Animation Style: Roll
Advanced Tab
Position
Position: Absolute
Location: Bottom Right
Vertical Offset: -75px
Horizontal Offset: -75px
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Step 5) Add WooCommerce Related Products Row
			

				
				
				
				
				Add a New Section
Add Single Column Row
Add Woo Related Product Module
			

				
				
				
				
				Woo Related Product Module
			

				
				
				
				
				Design Tab
Overlay
Overlay Icon Color: #5430ce
Overlay Icon: Magnifying Glass
Star Rating
Star Rating Color: #ffd700
Star Rating Size: 18px
Title Text
Title Font: Poppins
Title Font Weight: Semi-Bold
Title Text Alignment: Centered
Title Text Size: 34px
Product Title Text
Product Title Font: Poppins
Product Title Text Alignment: Centered
Product Title Text Size: 26px (Desktop) 21px (Mobile)
Price Text
Price Font: Roboto
Price Font Weight: Heavy
Price Text Alignment: Centered
Price Text Size: 21px
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Add Button Module
			

				
				
				
				
				Button Module
			

				
				
				
				
				Content Tab
Text
Button: “Shop All”
Link
Button Link URL: /store/ (Or whatever URL you are using for your store)
Design Tab
Alignment
Button Alignment: Centered
Button
Use Custom Styles for Button: YES
Button Text Color: #ffffff
Button Background: #5430ce
Button Border Width: 0px
Button Font Style: Uppercase
Button Padding Top: 10px
Button Padding Bottom: 10px
Box Shadow
Box Shadow: Option 3
			
			
				
				
				
				
			

				
				
				
				
				
				
				Download this FREE layout!
			

				
				
				
				
				PRO-TIP: If you are not sure how to import this layout, please check out this article on How to Import Divi Builder Layouts.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Divi WooCommerce Single Product Page the BodyCommerce Way
			

				
				
				
				
				Now let’s take a look at that amazing Divi WooCommerce Single Product Page we just built and spice it up with some of the powerful features built right into BodyCommerce.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Preview:
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Divi WooCommerce Single Product Page Enhancements
			

				
				
				
				
				
			

				
				
				
				
				BodyCommerce has a diverse suite of modules and modifications to the core Divi WooCommerce features that can enhance your eCommerce projects all in one plugin.
			

				
				
				
				
				
					
					
						Custom Product Gallery Module
						The BodyCommerce Product Gallery module extends the boring WooCommerce and Divi offering with multiple new gallery modes. The one used in this image is the Vertical Slider, but you also have options for Horizontal Slider, Single Slider, and Expandable galleries.
					
				
			

				
				
				
				
				
					
					
						Customized Product Variation Swatches
						This is one of the big guns in the BodyCommerce arsenal of features. It allows you to get rid of the combo box drop-downs for variations and replace them with colors, labels, or even images. This is amazing for showcasing things like different materials, textures, or anything that is better conveyed visually. 
					
				
			

				
				
				
				
				
					
					
						Sharing Module
						More than ever it is important to give your customers a way to easily share your products on various social media platforms. This BodyCommerce module makes it super easy to share your WooCommerce products on 7 platforms.
					
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Customer Loops will Change Your Divi and WooCommerce Game
			

				
				
				
				
				
			

				
				
				
				
				
					
					
						Product Carousel
						This module is a great way to show off your custom loops not only because they look great, but also because this module works great for users browsing your site on mobile devices. In this example, we are only showing one product, but you can customize how many shows, how many shifts each time you swipe or click, and it even gives you a host of autoplay features.
					
				
			

				
				
				
				
				
					
					
						Custom Loop Layouts
						The power of being able to create your own Custom Loops can not be overstated and creating your own loops for Divi and WooCommerce is super simple using BodyCommerce. It gives you granular control of what your product cards look like. You can make horizontal loops like this example, or if you are more into vertical loops, you can do that also. The possibilities are only limited by your imagination.
					
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclussion
			

				
				
				
				
				The Divi WooCommerce Single Product Page is where your products need to convey why they are the perfect purchase for any occasion! You can do some pretty great things using the tools already in Divi and WooCommerce as we saw at the beginning of this tutorial, but so much is left on the table if you’re not using a tool like BodyCommerce. It really is one of the best investments you can make in the online presence of your business. 
			

				
				
				
				
				Custom Divi WooCommerce My Account pages are only one of the hundreds of customizations you can do in Divi WooCommerce stores with the power of BodyCommerce.
				More About BodyCommerce
			
			
				
				
				
				
			
				
				
			

The post How to Edit and Customize a Divi WooCommerce Single Product Page appeared first on Divi Engine.



Snippet: How to add a CSS class to Divi on scroll – with some real case examples
Divi Engine — Tue, 20 Apr 2021 03:00:49 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				Divi is a fantastic tool for rapidly building websites that look and feel amazing, but sometimes there is just this one awesome thing you see on another website that Divi might not be capable of doing yet.
Enter jQuery. jQuery is a lightweight Javascript library included with every Divi install that helps simplify implementing common Javascript tasks with very little code. This coupled with some of the other Javascript libraries included with Divi, really opens the door to a ton of creative posibilities.
Don’t worry if this sounds complicated, in this post we are going to walk you through an overview of a piece of jQuery code, and then show you two examples of how you can start writing your own creative jQuery functions that are ready to wow your clients.
So, let’s start by taking a look at a few ways we can include jQuery code into our Divi website.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				How to add some jQuery code to Divi
There are technically 3 ways to add jQuery code to Divi, but we will only be covering the 2 most common methods here but will mention the 3rd. The method you choose will depend on where you would like the code to run.
			

				
				
				
				
				Divi Integration Tab
This is where you would add your jQuery code if you want it on every page throughout your website. An example of this might be if you wrote a function that changed the background color of your site header as the user scrolls through a page.
To find the Integration Tab you browse to your Divi Options page, then click on the Integration Tab. The code will be placed between open and closing 
			

				
				
				
				
				
These are always required to “open” and “close” any Javascript or jQuery code that you enter into either the Integration Tab or Code Module. It just tells the browser that you are about to write some code. The “type=“text/javascript” is just us telling the browser that this is Javascript code. This is required.
			

				
				
				
				
				jQuery(document).ready(function( $ )
This basically means that our code will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. This is required.
			

				
				
				
				
				function check_from_top_de()
Now we are getting to some actual custom code. This is where we create our function, the piece of code that will execute to do something cool on our site. We named our function check_from_top_de, because we are going to see how far the user has scrolled then do something, but you can name this whatever you want.
			

				
				
				
				
				var scroll = $(window).scrollTop();
We have created a variable called scroll which gets assigned the distance that we have scrolled from the top of the page. This value gets returned in pixels which we can then use to apply some logic to add our class to our target selector.
			

				
				
				
				
				if (scroll >= 300)
If the user has scrolled down the page 300 pixels or more
			

				
				
				
				
				$("#your-target-element").addClass("class-to-be-added");
So first we point out (or select) which element we want the class to be added to, then we tell it the class name that we are adding. You would replace those with your own selectors and classes, but you get the idea.
			

				
				
				
				
				else
If the user has not scrolled down 300 pixels or more, we want to do something else.
			

				
				
				
				
				$("#your-target-element").removeClass("class-that-we-added");
We are going to remove the class we added if the user scrolls back up on the page.
			

				
				
				
				
				check_from_top_de();
This runs our awesome function that we just coded as soon as the browser is ready to run code. Remember, we gave our function the name check_from_top_de, so enter your function name if you used a different one.
			

				
				
				
				
				$(window).scroll(function()
If the user is busy scrolling, we also want to check how far they have scrolled, so we need to run our function as the user scrolls.
			

				
				
				
				
				check_from_top_de();
Our function will be run if the user is detected scrolling on the page.
			

				
				
				
				
				Are you feeling like a coder yet? You should, because this is some valuable information that will have you adding jQuery to your Divi site in no time. But now, how do we apply this practically on a site? Well, we are going to show you 2 applications of adding jQuery to Divi which should get your gears turning on other ways you can use this awesome new skill you have.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Practical applications of adding jQuery to your Divi site
Up next is two examples with code of using what we just learned to add some jQuery to your Divi site.
			

				
				
				
				
				Changing the site header color on scroll
In this example, we wrote a function that changes the background color of our site header as the user scrolls through a page.
			

				
				
				
				
				 
Preview:
			

				
				
				
				
				
			

				
				
				
				
				Taking what we learned, we targeted the main header on our page, then changed the background color for that header once we have scrolled 300 pixels down the page. Since we want this to happen on all of the pages on our Divi site, we will add the code to the Integration Tab of the Divi Theme Options.
Take a look at the code below, then we will briefly cover what you need to do to add this to your site.
			

				
				
				
				
				
			

				
				
				
				
				You can copy and paste the code above into the Integration Tab found inside your Divi Theme Options. Make sure to place it inside the  of your site.
			

				
				
				
				
				$("#main-header").addClass("change-bg-color") This code is going to look for the #main-header element on our site and then add the class “change-bg-color” to that element. This CSS class is what will handle changing the color. You can call this class anything, just remember, it is good to use descriptive names.
			

				
				
				
				
				$("#main-header").removeClass("change-bg-color") We want to restore the original color of the header when the user has scrolled up, so best to remove the class that changed the color.
			

				
				
				
				
				With our jQuery code in place, we need to add a very tiny bit of CSS. Let’s take look at the code.
			

				
				
				
				
				
			

				
				
				
				
				You can copy and paste the code above into the Custom CSS box found inside your Divi Theme Options. 
			

				
				
				
				
				.change-bg-color {

	background-color: springGreen!important;

} This code is pretty self-explanatory, we are just changing our background to “springGreen”. We added the !important operator to override any other colors assigned to the header background
			

				
				
				
				
				Now when you save and reload your site, you should see the color changing when you scroll down and return to the original color when you are at the top of the page.
You can do so many other things by simply adding CSS classes to elements. This should really get the gears turning. With just one line of CSS we can even change the logo on scroll.
Add the following line of code below the CSS you just saved into the CSS box in your Divi Theme Options.
			

				
				
				
				
				.change-bg-color #logo {

content: url('https://your-image-url/logo.png'

} This single line of code will select the #logo in the element you added the .change-bg-color class to, in this case our #main-header. We then change the URL to that logo image to the one we want to display on scroll. Check out the awesome result below.
			

				
				
				
				
				
			

				
				
				
				
				NOTE: Firefox can sometimes be temperamental with the CSS that changes the logo image. For a full-proof tutorial on how to change the header logo on scroll check out our article on How to change your logo on scroll in the Divi theme.
			

				
				
				
				
				Making fixed blurb modules appear and disappear on scroll
For the second example we made some cool blurbs that fade in as you scroll over three fullwidth header modules, then fade out again as you scroll up.
			

				
				
				
				
				 
Preview:
			

				
				
				
				
				
			

				
				
				
				
				Here we used a code module because we are only adding the jQuery to this Divi page, so it would be unnecessary to add it throughout our entire site by using the Integration Tab. This example also uses Waypoint.js, a Javascript library that helps with triggering events as the user scrolls, which is also included in all Divi websites.
Take a look at the code below, then we will briefly cover what you need to do to add this to your site.
			

				
				
				
				
				
			

				
				
				
				
				You can copy and paste the code above into a Code Module, but if you use this code exactly as is, you need to do a few things first.
 



Add 4 modules/rows/section on the page that will trigger our waypoint code
Add #start-top to the first element, and #module-one, #module-two, #module-three to the subsequent elements
Create a 3-column row at the bottom of your page and add a blurb to each row
Set the “position” setting for this row to “fixed” and “z-index” to “9”
For the blurbs, give the first blurb assign #one, second #two, third #three and add “display: none;” to the “main element” box in the custom CSS



			

				
				
				
				
				$('#module-one').waypoint(function() This is telling the Waypoint.js library which module we are watching for the scroll.
			

				
				
				
				
				$('#one').fadeIn(); Here we are telling Waypoint.js that we want the element selected by #one to be faded in once #module-one has been scrolled into view.
			

				
				
				
				
				{offset: '25%'}); Lastly, the offset checks how far we need to have scrolled from the top of the window to execute the code in our waypoint. This can be expressed in either a percentage or pixels. We went with 25%.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclusion
Adding jQuery to your Divi site is a powerful tool that now firmly sits on your belt. We only scratched the surface on what is possible when using jQuery and Divi together, but hopefully, this was helpful in showing what is possible. Keep an eye out, because we intend to release some more posts about adding features and effects to your Divi sites with the power of jQuery.
			
			
				
				
				
				
			
				
				
			

The post Snippet: How to add a CSS class to Divi on scroll – with some real case examples appeared first on Divi Engine.



How to Edit and Customize The Divi WooCommerce My Account Page
Divi Engine — Tue, 13 Apr 2021 03:00:09 +0000

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				COMPLEXITY
Easy
			

				
				
				
				
				TIME
10 Minutes
			
			

				
				
				
				
				
				
				
				
				
				ASSUMPTIONS

Basic knowledge on Divi and WooCommerce.
Divi and WooCommerce are already installed and configured.
You have some products loaded into WooCommerce.


 
			
			

				
				
				
				
				
				
				
				
				
				VERSIONS
Divi 4.9.3
WooCommerce 5.1
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Another day, another awesome tutorial from the team here at Divi Engine. In this tutorial, we are going to show you how to turn your boring stock Divi WooCommerce account pages into something that is more modern and exciting to look at. We will customize the various elements already found on the page, and even add a few to make your customers feel at home when logged into their accounts.
For this tutorial we are also mixing things up a bit as it is a video tutorial instead of our usual text with screenshots, but don’t worry, all the settings will follow below the video for those of you that want to work fast! We will also add a downloadable JSON file for you that you can import into your Divi install.
Please let us know in the comments if this format works for you, or if you have any other suggestions.
Now, without me continuing to blab away, let’s get into it with a quick preview of what we are building before jumping into the video tutorial.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Preview:
			

				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Video Tutorial
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Text Instructions
			

				
				
				
				
				If you prefer to quickly copy and paste the text and settings for this tutorial, please scroll down and you will see everything as it relates to the steps found in the video tutorial.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Step 1) Style the Row containing the Text Module
			

				
				
				
				
				Row Settings
			

				
				
				
				
				Content Tab
Background
Gradient
 Start Color: #ffffff
 End Color: rgba(255,255,255,0.85)
 Gradient Direction: 90deg
 Start Position: 30%
 End Position: 30%
			

				
				
				
				
				Design Tab
Spacing
Padding Left: 3%

Padding Right: 3%
Box Shadow
Style 2
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Step 2) Style the Text Module containing the WooCommerce My Account Shortcode
			

				
				
				
				
				Text Module
			

				
				
				
				
				Design Tab
Text
TEXT STYLES
 Text Font: Roboto
 Text Color: #0fe5a8
 Text Size: 16px
LINK STYLES
 Link Color: #5430ce
UNORDERED LIST STYLES
 Unordered List Text Size: 21px
 Unordered List Line Height: 2em
 Unordered List Style Type: Square
 Unordered List Item Indent: 5%
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Step 3) Style the Main Section
			

				
				
				
				
				We are doing something special here instead of just adding a background, we are going to generate an SVG background and then place it in our Section.
To do this you need to go over to https://www.svgbackgrounds.com/ and select the background style you like, then customize it. We used the Subtle Prism design for this tutorial, but you can select any design that fits your brand.
Once you have selected and styled your background, copy the CSS Output, then we will add it to our Main Section here.
			

				
				
				
				
				Section Settings
			

				
				
				
				
				Advanced Tab
Custom CSS
MAIN ELEMENT
 Paste the background CSS you copied in here.
			

				
				
				
				
				NOTE: Don’t worry if you only see a color when you’ve pasted and save the Output CSS for your SVG background in the Divi Builder, it will display perfectly on the frontend.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Step 4) Add a Title to the My Account Page
			

				
				
				
				
				Create a new Single Column Row and move it to the top of the Section, then add a Text Module.
			

				
				
				
				
				Text Module
			

				
				
				
				
				Content Tab
Text
Body: “my account.”
			

				
				
				
				
				Design Tab
Text
Text Font: Poppins

Text Color: #ffffff

Text Size: 64px (Desktop), 54px (Tablet), 34px (Mobile)

Text Line Height: 1em
			

				
				
				
				
				Row Settings
			

				
				
				
				
				Design Tab
Spacing
Padding Top: 50px

Padding Bottom: 50px
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Step 5) Add a Promotion below the My Account area
			

				
				
				
				
				Create a new Single Column Row below our row containing the WooCommerce My Account shortcode, then add a Call to Action module.
			

				
				
				
				
				Call-to-Action Module
			

				
				
				
				
				Content Tab
Text
Title: “Don’t forget to check out our SUMMER SALE!

Button: “Shop Now”

Body: “Save up to 25% off our hottest products.”
Link
Button Link URL: “/shop/”
Background
Background Color: #0fe5a8
			

				
				
				
				
				NOTE: If you set your store to any other URL than the default, be sure to use that for the link URL.
			

				
				
				
				
				Design Tab
Text
Text Alignment: Centered
Title Text
Title Font: Poppins

Title Font Weight: Semi Bold

Title Text Color: #ffffff

Title Text Size: 28px
Body Text
Title Font: Roboto

Title Text Color: #ffffff

Title Text Size: 18px
Button
Use Custom Styles for Button: YES

Button Text Color: #ffffff

Button Backgroun: #5430ce

Button Border Width: 0px
Sizing
Max-Width: 750px

Module Alignment: Centered
Border
Border-Radius: 5px
Box  Shadow
Box Shadow: Option 2
			
			
				
				
				
				
			

				
				
				
				
				
				
				Download this FREE layout!
			

				
				
				
				
				PRO-TIP: If you are not sure how to import this layout, please check out this article on How to Import Divi Builder Layouts.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Divi WooCommerce My Account Page the BodyCommerce Way
			

				
				
				
				
				Now let’s take a look at that amazing Divi WooCommerce My Account Page we just built supercharged with some of the powerful features built right into BodyCommerce.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Preview:
			

				
				
				
				
				
			

				
				
				
				
				Now we are not ones to toot our own horn, but TOOT TOOT my friends! This doesn’t even look like a Divi site anymore. Let’s take a look at what Divi BodyCommerce features we used to put this My Account page together so that you can take this inspiration and start creating amazing Divi WooCommerce My Account pages also.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Account Before Layout
			

				
				
				
				
				
			

				
				
				
				
				This is basically a layout that you can inject before the account dashboard. It is a great feature if you want a custom my account page title, create a custom header, or display any additional information at the top of your Divi WooCommerce My Account page.
			

				
				
				
				
				
					
					
						Dynamic Text
						We utilized the Divi dynamic text feature to display the current date here.
					
				
			

				
				
				
				
				
					
					
						Custom Page Title
						The standard My Account title at the top of the page is a bit boring, so we added our own title and utilized the Remove Default Woo Headings feature of BodyCommerce to do exactly what the name suggests, remove that boring page title.
					
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Account Navigation Layout
			

				
				
				
				
				
			

				
				
				
				
				Tired of boring navigation menus on your Divi WooCommerce My Account pages? BodyCommerce has you covered with options like horizontal navigation links and buttons just to name a few. This opens the door to countless unique navigation design possibilities.
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Account Dashboard Layout
			

				
				
				
				
				
			

				
				
				
				
				With BodyCommerce you can set a layout for each of the endpoints of a standard Divi WooCommerce install. Here we created a custom layout for the Dashboard endpoint. With BodyCommerce you can use this space to welcome users and share any helpful information like your support channels or whatever fits your needs.
			

				
				
				
				
				
					
					
						User Avatar
						The BodyCommerce User Avatar module is great to display anywhere on a WooCommerce page and it works great here on the Dashboard.
					
				
			

				
				
				
				
				
					
					
						Customized Welcome Message
						This is the BodyCommerce Welcome Message module in action which enables you to greet the user by name which we think is pretty cool and a nice personal touch.
					
				
			

				
				
				
				
				
					
					
						Call to Action
						Here we just used the same stock Divi Call to Action module used in the tutorial to have a sales offer right on the user dashboard. This is a great way to engage folks that are already customers.
					
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Account After Layout
			

				
				
				
				
				
			

				
				
				
				
				This is exactly the same as the Account Before Layout with the layout just being injected after the Account Layout. We used this is to display featured products, but you can build any layout you feel will help move toward a sale.
			

				
				
				
				
				
					
					
						Product Carousel
						The missing link is here! BodyCommerce has an awesome Product Carousel module which we used to display some featured products. The best part is that it is highly customizable and you can even create your own loop layout. 
					
				
			

				
				
				
				
				
					
					
						Customized Loop Layout
						One of the strongest features in BodyCommerce is the ability to create your own loop layouts for Divi and WooCommerce. This gives you granular control of what your product cards look like. You decide what information is displayed, where it is displayed, and how it is styled. This makes any Divi WooCommerce site as close to a hand-coded custom site without touching a line of code.
					
				
			
			
				
				
				
				
			

				
				
				
				
				
				
				
				
				
				
				Conclussion
			

				
				
				
				
				The Divi WooCommerce My Account Page is your customer’s home on the website, so it is important to give them a great experience when they are there. Now whether you customize this page for your customers using stock Divi, or with BodyCommerce, we hope this tutorial was helpful to you by showing you some new things you can do to create great online experiences for your clients!
			

				
				
				
				
				Custom Divi WooCommerce My Account pages are only one of the hundreds of customizations you can do in Divi WooCommerce stores with the power of BodyCommerce.
				More About BodyCommerce
			
			
				
				
				
				
			
				
				
			

The post How to Edit and Customize The Divi WooCommerce My Account Page  appeared first on Divi Engine.

File Extension	MIME Type
.jpg	image/jpeg, image/pjpeg
.jpeg	image/jpeg, image/pjpeg
.png	image/png
.gif	image/gif
.ico	image/x-icon
.pdf	application/pdf
.doc	application/msword
.docx	application/vnd.openxmlformats-officedocument.wordprocessingml.document
.ppt	application/mspowerpoint, application/powerpoint, application/vnd.ms-powerpoint, application/x-mspowerpoint
.pptx	application/vnd.openxmlformats-officedocument.presentationml.presentation
.pps	application/mspowerpoint, application/vnd.ms-powerpoint
.ppsx	application/vnd.openxmlformats-officedocument.presentationml.slideshow
.odt	application/vnd.oasis.opendocument.text
.xls	application/excel, application/vnd.ms-excel, application/x-excel, application/x-msexcel
.xlsx	application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.psd	application/octet-stream
.mp3	audio/mpeg3, audio/x-mpeg-3, video/mpeg, video/x-mpeg
.m4a	audio/m4a
.ogg	audio/ogg,
.wav	audio/wav, audio/x-wav
.mp4	video/mp4
.m4v	video/x-m4v
.mov	video/quicktime
.wmv	video/x-ms-asf, video/x-ms-wmv
.avi	application/x-troff-msvideo, video/avi, video/msvideo, video/x-msvideo
.mpg	audio/mpeg, video/mpeg
.ogv	video/ogg
.3gp	video/3gpp, audio/3gpp
.3g2	video/3gpp2, audio/3gpp2

File Extension	MIME Type
.bmp	image/bmp
.tif	image/tiff
.tiff	image/tiff
.asf	video/x-ms-asf
.asx	video/x-ms-asf
.wm	video/x-ms-wm
.wmx	video/x-ms-wmx
.divx	video/divx
.flv	video/x-flv
.qt	video/quicktime
.mpe	video/mpeg
.webm	video/webm
.mkv	video/x-matroska
.txt	text/plain
.asc	text/plain
.c	text/plain
.cc	text/plain
.h	text/plain
.csv	text/csv
.tsv	text/tab-separated-values
.ics	text/calendar
.rtx	text/richtext
.css	text/css
.htm	text/html
.html	text/html
.m4b	audio/mpeg
.ra	audio/x-realaudio
.ram	audio/x-realaudio
.mid	audio/midi
.midi	audio/midi
.wax	audio/x-ms-wax
.mka	audio/x-matroska
.rtf	application/rtf
.js	application/javascript
.swf	application/x-shockwave-flash
.class	application/java
.tar	application/x-tar
.zip	application/zip
.gz	application/x-zip
.gzip	application/x-zip
.rar	application/rar
.7z	application/x-7z-compressed
.exe	application/x-msdownload
.pot	application/vnd.ms-powerpoint
.wri	application/vnd.ms-write
.xla	application/vnd.ms-excel
.xlt	application/vnd.ms-excel
.xlw	application/vnd.ms-excel
.mdb	application/vnd.ms-access
.mpp	application/vnd.ms-project
.docm	application/vnd.ms-word.document.macroEnabled.12
.dotx	application/vnd.openxmlformats-officedocument.wordprocessingml.template
.dotm	application/vnd.ms-word.template.macroEnabled.12
.xlsm	application/vnd.ms-excel.sheet.macroEnabled.12
.xlsb	application/vnd.ms-excel.sheet.binary.macroEnabled.12
.xltx	application/vnd.openxmlformats-officedocument.spreadsheetml.template
.xltm	application/vnd.ms-excel.template.macroEnabled.12
.xlam	application/vnd.ms-excel.addin.macroEnabled.12
.pptm	application/vnd.ms-powerpoint.presentation.macroEnabled.12
.ppsm	application/vnd.ms-powerpoint.slideshow.macroEnabled.12
.potx	application/vnd.openxmlformats-officedocument.presentationml.template
.potm	application/vnd.ms-powerpoint.template.macroEnabled.12
.ppam	application/vnd.ms-powerpoint.addin.macroEnabled.12
.sldx	application/vnd.openxmlformats-officedocument.presentationml.slide
.sldm	application/vnd.ms-powerpoint.slide.macroEnabled.12
.onetoc	application/onenote
.onetoc2	application/onenote
.onetmp	application/onenote
.onepkg	application/onenote
.odp	application/vnd.oasis.opendocument.presentation
.ods	application/vnd.oasis.opendocument.spreadsheet
.odg	application/vnd.oasis.opendocument.graphics
.odc	application/vnd.oasis.opendocument.chart
.odb	application/vnd.oasis.opendocument.database
.odf	application/vnd.oasis.opendocument.formula
.wp	application/wordperfect
.wpd	application/wordperfect
.key	application/vnd.apple.keynote
.numbers	application/vnd.apple.numbers
.pages	application/vnd.apple.pages