Step 1: Define Your Subscription Plans

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

1. 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.
2. Pricing: Determine the price points for each tier. Conduct market research to ensure your pricing is competitive yet profitable.
3. 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.

1. Payment Gateways: Choose reliable payment gateways like PayPal or Stripe. Divi Membership supports both, ensuring secure and smooth transactions.
2. 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.
3. 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.

1. 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.
2. 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.

1. 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.
2. 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.

1. Member Directories: Create a directory of your members using the User List module. This can foster community interaction and networking.
2. 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.

1. 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.
2. 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.

1. Subscription Data: Use Divi Membership’s subscription management features to monitor new sign-ups, cancellations, and renewals.
2. 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.

1. 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

1. Installation: Follow the installation guide to set up Divi Membership on your site.
2. Configuration: Configure your content types and payment gateways, and start creating your membership plans.
3. 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.

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.

Getting Started with WP Order Alerts

1. 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.

1. 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.

1. 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.

1. 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

1. 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.

1. 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

1. 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.

1. 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.

From Tech Enthusiast to Agency Founder

Andy’s journey into the digital world began with a deep-rooted passion for technology. Influenced by the innovative concepts in Tim Ferriss’s “The Four Hour Workweek,” Andy was inspired to create a business that not only fulfilled his creative instincts but also offered flexibility and autonomy. This led to the birth of FuzzUK, a design agency known for its cutting-edge web solutions and user-centric designs.

Discovering Divi and Divi Engine

The pivotal point in Andy’s career came with his introduction to Divi. While exploring tools that could offer both versatility and efficiency in web design, Andy and his team discovered Divi and soon after, the Divi Engine’s suite of plugins. These tools have been crucial in transforming his business, allowing FuzzUK to push the boundaries of what’s possible in web design.

A Success Story Powered by Divi Engine Plugins

Enhancing Web Capabilities with Divi Engine

One of Andy’s significant challenges was creating sophisticated, highly customized websites that could meet the varied demands of his clients. Here, Divi Engine plugins like Divi BodyCommerce and Divi Machine played a transformative role. These plugins enabled FuzzUK to extend their service offerings beyond standard design solutions, incorporating advanced functionalities that significantly improved client satisfaction.

Beyond Borders: Global Impact

Despite being based in the UK, FuzzUK serves an international clientele, showcasing the universal appeal and scalability of their digital solutions. This global reach is supported by a robust online presence and strategic use of Divi Engine tools, which ensure that clients receive state-of-the-art, efficient, and effective web designs regardless of their location.

Key Takeaways from Andy’s Story

Andy’s journey with FuzzUK highlights several insights for aspiring digital entrepreneurs:

• Embrace Comprehensive Tools: Utilizing a suite of tools like those offered by Divi Engine can significantly enhance the capabilities of your web design projects.
• Leverage Creative and Technical Skills: Combining technical understanding with creative execution can lead to groundbreaking results in digital design.
• Expand Beyond Geographical Limits: The digital landscape knows no boundaries. With the right tools and strategies, you can cater to clients worldwide.

Connect with Andy and FuzzUK

Inspired by Andy’s story and interested in learning more about his work or maybe discussing a project? Visit FuzzUK’s Website to explore their portfolio and connect.

Special Offer for Our Readers: Andy is offering a 25% discount on all FuzzUK maintenance packages when you mention this interview. This is a fantastic opportunity to ensure your website remains at the cutting edge, supported by top-tier maintenance services.

Explore More with Divi Engine

Are you ready to start your own success story in web design? Learn more about how Divi Engine can elevate your web design projects. Check out our plugins and begin your journey to digital excellence today.

Stay tuned for more inspirational stories and valuable insights from the Divi Engine community. Happy designing!

The post Empowering Design with Divi – A Conversation with Andy of FuzzUK appeared first on Divi Engine.

Quick Links:

Divi 5 Explained

Before we get into how amazing Divi 5 is, let’s quickly explore what is new in Divi 5, and what new challenges it presents for developers. This will help give some context to the decisions we made and how we are approaching development.

What is New with Divi 5?

Obviously Divi 5 will present a massive list of enhancements, don’t expect an host of new features just yet. Divi 5 will be addressing many of the growing pains of one of the most popular page builders out there, so the real focus of the release is on speed, future-proofing, and creating an stronger Divi ecosystem for developers.

Core Technology Overhaul: Divi 5 introduces a foundational overhaul, reengineering the theme’s core for better performance, stability, scalability, and extendability. This update includes a complete rewrite of the underlying codebase, preparing Divi for future web standards and technologies.

New Builder API: The release features a new Builder API, significantly expanding customization options for developers. This API facilitates the creation of custom modules and deeper integrations, allowing for a more tailored experience and innovative feature development within the Divi ecosystem.

Enhanced Gutenberg Integration: Divi 5 enhances its compatibility with Gutenberg, aiming to seamlessly integrate Gutenberg blocks within Divi layouts. This compatibility extends the functionality of Divi pages, combining the power of Divi’s design capabilities with the flexibility of Gutenberg’s block-based editing.

Elimination of Shortcodes: In a significant shift, Divi 5 moves away from using shortcodes, adopting a modern storage format. This transition aims to streamline the editing process, reduce bugs, and improve the stability and speed of loading Divi content, ensuring a smoother workflow for users.

Performance and Speed Improvements: With a focus on speeding up both the front-end and the builder interface, Divi 5 enhances the user experience by decreasing load times and improving responsiveness. This is achieved through optimized code and the latest web performance techniques.

Future-Proofing and PHP Compatibility: Divi 5 is designed to be future-proof, aligning with the latest WordPress releases and PHP versions. This ensures that websites using Divi are secure, performant, and compatible with the latest web technology standards.

Challenges with Divi 5

Adapting to New Builder API and Core Changes: Divi 5 introduces a significant overhaul of its core technologies and a new Builder API. This necessitates that third-party plugin developers extensively recode their modules to align with these changes. The shift away from shortcodes to a modern storage format requires adaptations in how data is handled and stored, adding complexity and potential labor to the development process.

Frequent Updates and Breaking Changes: The transition to Divi 5 includes constant updates that can lead to breaking changes, as highlighted in the development documents. These changes can affect everything from simple plugin functions to complex integrations, requiring developers to continuously update their code to maintain compatibility. This constant need for updates can disrupt development cycles and difficulty in mapping timelines.

Increased Complexity in Customization and Extension: With the introduction of a more robust and flexible API, the complexity of creating custom modules or extending existing functionality increases. Developers must understand and implement intricate API details to fully utilize the capabilities of Divi 5, which could steepen the learning curve and lengthen development timelines.

Migration and Compatibility Issues: Developers face the challenge of migrating existing websites and modules to Divi 5. This involves ensuring compatibility with the new version, which may require significant testing and debugging. The move away from shortcodes alone is a substantial change that could impact many existing websites, necessitating careful planning and execution to ensure smooth transitions.

Performance Optimization: While Divi 5 aims to improve performance, the initial versions may still face optimization issues as developers begin to utilize the new features extensively. Identifying and rectifying these issues will require diligent testing and optimization to ensure that the enhancements in Divi 5 effectively translate into faster and more responsive websites.

Documentation and Learning Resources: The release of a substantially updated platform like Divi 5 also brings about the need for comprehensive documentation and learning resources. Developers will rely heavily on updated documentation to understand and implement the new features correctly. Delays or inadequacies in providing these resources can hinder the adoption and efficient use of the platform.

In summary, while Divi 5 presents significant advancements, it also poses considerable challenges for developers, particularly those of us who create and maintain third-party extensions. These challenges underscore the need for thorough preparation, continuous learning, and active community engagement to leverage Divi 5’s full potential.

Our Strategic Approach to Divi 5

The evolution of Divi into its fifth iteration presents a pivotal opportunity for growth and innovation in how you build your sites and how we develop our plugins. With 10 plugins that almost all have a number of custom modules, it presents a huge task which we are fully committed to. We’ll get into more detail, but for those of you just looking for the TLDR; version, take a look at the Frequently Asked Questions at the bottom of this post.

Focused Plugin Development

Divi Engine is all in with Divi 5 and we have Peter almost exclusively doing full-time development to get our plugins ready. We made some other strategic moves in regards to development resources to make this possible, so you might see Jeff helping you out on support tickets more.

To dive in and explore the state of the Divi Dev Beta , mainly the new API, we decided to start with Divi Ajax Filter due to it’s shared modules with Divi BodyCommerce and Divi Machine. In the last few weeks we have learned a lot, especially that we shifted gears at what is probably the best time to do so as there have been many breaking updates to how the Divi 5 API functions and how modules are handled. When we initially looked into the Divi 5 Alpha and started playing around things were still very raw and could not really get anything going that didn’t require some “hacky” code that would have needed to be rewritten. Even as recently as the end of March some updates were introduced that would have required us to redo weeks of work, so we are thankful that Divi 5 and its developer documentation is now in a state where it makes sense to go full steam.

Now what does full-steam look like for our Divi 5 development? The quick way would be is to jump in and make sure that all of our modules are Divi 5 compatible without looking at the rest of our code. We decided against this as we recognize many opportunities to improve our base code, but also take advantage of the modularity of the Divi 5 API which will help us extend our plugins more efficiently and stable in the future. So, we decided to re-code our plugins from the ground up.

This will ensure that we take advantage of every benefit offered through the new Divi 5 API.

Existing Plugin Enhancement

Our focus isn’t just on being fully geared up for Divi 5; it’s about enhancement and building a strong foundation to build on. The fact that we are re-coding our Divi plugins from scratch gives us many ways to enhance your experience and squeeze every drop of value out of your investment in our products.

Let’s list what this will look like right now:

1. Less Fragmentation

We will be streamlining module features across like modules to give you more freedom and ability to use plugins like Divi Machine. For example, the goal is to extend the Loop Options available in the Archive Loop module to that of the Post Carousel module, which is all made more convenient with how Divi 5 handles module features and settings.

It is still early days, but we hope that this more modular architecture in Divi 5 will then further allow us to extend features and settings between the different plugins in our suite where it makes sense to do so. This could work great for the Ajax filtering features in Divi Ajax Filter, Divi Machine, and Divi BodyCommerce.

2. Improved Settings Framework

When we started Divi Engine, we used an admin framework for our plugins called the Titan Framework. This was great as it kickstarted the development process and got plugins out there faster. It was less great because it would sometimes affect plugin performance, which is an issue.

Starting with Divi Machine, we moved away from the Titan Framework and developed our own zippier settings framework, and the Divi 5 re-coding project will be the introduction of this to our entire Divi plugin suite.

3. Visual Builder Compatibility

We know this is a bit of a contentious point in the community so we want to assure you that we will be sporting full visual builder compatibility as we launch our plugins on the Divi 5 platform. It is no secret that it is frustrating not being able to see changes as you make them in the visual builder and we will be fixing that.

Interactive Community Engagement

Understanding that our community’s needs are paramount, so we want you to participate directly in our development process. Starting with this poll, we want to hear from you on certain development decisions as we walk this path to Divi 5.

A Collaborative Journey with Elegant Themes

The anticipation for Divi 5 within our community is palpable, and we share your eagerness to dive into its new features and capabilities. It’s a sentiment echoed by our partners at Elegant Themes, who are working tirelessly to ensure Divi 5 not only meets but exceeds our collective expectations. This development phase is a testament to the power of collaboration and patience, as highlighted by insights from Elegant Themes’ leadership. Our shared goal is clear: to deliver a robust, innovative, and transformative version of Divi that sets a new benchmark for web design.

Looking Ahead with Anticipation

As we continue to adapt and innovate alongside Divi 5, our vision for the future is bright. We’re excited about the potential that Divi 5 brings to the Divi Engine family and the broader community. This transition is more than a theme update; it’s an opportunity to redefine what’s possible in web design using our suite of Divi plugins.

We want to extend our deepest gratitude to you, our community, for your continued support, patience, and engagement. Your enthusiasm inspires us, your feedback drives us, and your trust in us fuels our commitment to building the best dang Divi plugins out there. As we forge ahead on this journey together, we look forward to sharing more updates, celebrating milestones, and exploring the new horizons that Divi 5 will unveil.

Stay tuned, stay engaged, and let’s embrace the future of Divi, together.

Warmest regards,

Frequently Asked Questions

The post Divi 5 Dev Letter #1: A look into the state of Divi 5 and our plans to update our plugins for it appeared first on Divi Engine.

What is the GPL?

At its core, the GPL is designed to guarantee that open-source software and it derivatives remains free and accessible. It allows users to modify and redistribute software as long as the same rights are preserved in downstream versions. What is a downstream version you ask? Well, things like Divi plugins that operate on the WordPress layer which is an open-source content management system (CMS).

This enables developers like us to build upon the WordPress and Divi ecosystems by extending them with features that are not available natively. These WordPress and Divi plugins then get listed on the WordPress repository and Marketplaces which deepens our reach. This also means that there is a thriving community of other developers like our friends at Pee-Aye Creative that share knowledge and help each other out.

Tie all of this together and it has given the WordPress and Divi developer community a way to run businesses that employ many great folks that are able to put food on the table doing what they love best, which is build amazing products that pay this help forward.

Overall, the GPL is a great concept as long as folks out there do not abuse it. Enter, GPL Clubs.

What are GPL Clubs?

A GPL Club is an unethical entity that abuses and exploits the GNU General Public License (GPL) to resell software, such as WordPress and Divi plugins or themes, often at a significantly reduced price compared to that of the original developers. While technically legal under the terms of the GPL, which allows for the free redistribution of licensed software, the practice of these clubs are outright dodgy and skirts the ethical boundaries of fair business practices. By simply reselling existing work without contributing to its development or offering any post-sale support, these clubs can undercut developers who invest significant resources in creating, maintaining, and supporting their software. The model poses a considerable ethical dilemma, as it capitalizes on the open-source ethos intended for collaboration and improvement, not commercial exploitation at the expense of original developers.

Let’s take the Divi Theme for example. Currently, the Divi Theme is listed at a very reasonable $249 on the Elegant Themes website:

Now let us look at a GPL Club that sells an outdated version of the Divi Theme for under $5:

It does not take a genius to calculate the damage this does to the developers and the people that count on them. Not convinced? Let’s take a look at what running a business like Divi Engine costs.

TLDR; GPL Clubs are run by non-developers, that are not responsible for the livelihood of others, and do not contribute to the ethical and collaborative roots of the GPL. They portray themselves as the WordPress and Divi plugin Robin Hood, stealing from the rich and giving to the poor, but don’t be fooled, they do real harm.

The Cost of Doing Business

Businesses like ours are not akin to those startup millionaires you see from silicon valley or read about in hackernews. We are generally small teams, sometimes even family like here at Divi Engine or Divi Supreme, that are spread around the world just trying to create a great place to work as well as deliver exceptional products and support. But, there are expenses associated with delivering just that, and those don’t always leave much room for fat stacks of profit moneys.

That said, without lifting the skirt too much (gotta buy me a drink for that first), this is ballpark what it costs to run a Divi development business based in the United Kingdom.

This is without taking into account the losses we take with unethical practices like GPL Clubs and group buying. Nor does it account for periods where efforts need to be scaled (cost more) for non-negotiables like recoding all of our plugins for Divi 5.

Does not leave much room for profit, does it?

And we are a smaller team. If you look at the folks at WPZone that employ a much larger group of folks, these expenses could easily be double. But that is enough of that, what folks should really be worried about are the risks of buying WordPress or Divi plugins from a GPL Club.

Risks of Purchasing from GPL Clubs

When considering the purchase of software from GPL Clubs, it’s crucial to understand the significant risks involved. GPL Clubs exploit the redistributive permissions of the GNU General Public License (GPL) to resell open-source software, such as WordPress plugins and themes, at reduced prices. While this practice is technically legal, it comes with substantial drawbacks that can negatively affect users and the broader software ecosystem. Not to mention the ability of developers to maintain their products.

Here are some of the key risks associated with using software from GPL Clubs:

Security Vulnerabilities and Risks to Client Sites:

• Software from GPL Clubs lacks access to plugin updates which often includes critical security patches. This exposes users to significant risks, as outdated software can be a target for hackers, just google WPScan to see how easy it is to find these exploits.
• Websites using such plugins are more susceptible to attacks, which can lead to data breaches, malware infections, and other security incidents that compromise both the site and its visitors.
• GPL Clubs also often null the WordPress and Divi plugins to remove measures taken by the developers to prevent it being used without a legitimate license. Sounds great, right? No, because it is pretty much standard practice to add malicious code enabling botnets, or backdoors into WordPress sites.

No New Features:

• Developers love building and enhancing new features in their WordPress and Divi plugins, but since illegitimate copies without licenses purchased from GPL Clubs do no include updates, you do not get to enjoy these features.

No Official Support and Potential Compatibility Issues:

• Absence of support means users have nowhere to turn when they face technical issues, potentially leading to prolonged downtime and loss of business. We often get GPL Club customers looking for support and have no other option than to turn them away if they are not willing to purchase a legitimate license.
• Compatibility problems may arise with other software components, causing system instability or failure, which is particularly detrimental for business-critical operations.

Ethical and Professional Concerns:

• The character and operational methods of those who run GPL clubs are often questionable. They profit from the hard work of original developers without contributing to the development or improvement of the software.
• Supporting such entities can reflect poorly on one’s own business ethics and professionalism, potentially damaging one’s reputation in the industry.
• While reselling GPL-licensed software is not illegal, it raises ethical concerns about undermining the developers who dedicate time and resources to create and maintain these products.
• Financial support diverted from the original developers to GPL clubs can stifle innovation and development within the software community.

Reputation Risk and Impact on Business:

• Using potentially compromised or unsupported software can lead to operational failures or security incidents, adversely affecting a business’s reputation.
• Clients and partners may question the reliability and integrity of a business that relies on software obtained from ethically dubious sources.
• If clients find out you used WordPress or Divi plugins from aGPL Club instead of legitimate plugins that keep their sites safe and updated, this could lead to the version of word-of-mouth you don’t want.

These risks underline the importance of weighing the broader implications and potential downsides of purchasing from GPL Clubs. Not only is there a direct impact on security and functionality, but the indirect effects on business reputation and ethical standing in the community can be just as damaging. Supporting original developers not only fosters innovation and improves software quality but also ensures that users receive the most value through continuous updates and reliable support, safeguarding their operations and ethical standing in the industry.

The Value of Purchasing Directly from Developers

Purchasing software through legitimate sources, rather than GPL Clubs, brings a multitude of benefits that extend far beyond the initial transaction. When you buy directly from the developers or authorized marketplaces, you’re investing in a package of ongoing value that ensures not only the functionality and security of the software but also supports the ecosystem that continues to innovate and improve it.

Reliable Support and Customer Service

One of the most significant advantages of purchasing from legitimate sources is the access to dedicated support and customer service. This means any issues you encounter can be swiftly addressed by knowledgeable staff who understand the plugin thoroughly. Whether it’s troubleshooting, customization help, or guidance through updates, official support ensures that you get the most out of your purchase.

Regular Updates

Legitimate sources provide regular updates which include not just new features, but also important security patches. These updates are crucial as they protect your websites from new vulnerabilities and ensure that it remains compatible with the ever-evolving WordPress and Divi environments. This continuous improvement cycle is absent in plugins acquired from GPL Clubs, where updates will not be available or secure.

Guaranteed Code Integrity

When purchasing directly from the developer, you are guaranteed that the code is original and unmodified. This assurance is vital for the security and stability of the plugin and your websites, as modified code can often introduce vulnerabilities or unwanted behaviors that could compromise your sites operation.

Sustaining Development and Innovation

Your purchase is an investment into the future development of the plugins. It enables developers to continue improving existing plugins and add new features, as well as to conceptualize and develop new plugins. This reinvestment into the plugin ecosystem enhances the value and utility of the plugins over time.

Supporting the Livelihood of Developers

Behind every plugin is a team of hardworking professionals. By purchasing through legitimate channels, you are directly supporting the livelihoods of these individuals and their families. This financial support helps maintain motivated and dedicated teams that can focus on delivering high-quality plugins.

Try this Instead of Using a GPL Club

This strategy is so simple, but it is one all successful agencies use.

Pass the expense of plugin licenses on to the client!

And if clients are not happy with this, they are probably not worth having as a client because they will fight you on every nickel and dime. Just apply the Pareto Principle (80-20 rule) here and work with clients that understand they will get what they pay for. These clients will always pay more to get the best possible result as they know the value in doing so, just as you should. Anybody can build a decent WordPress or Divi site, but how many can do it well? How many do it SEO-optimized or perfectly responsive? And how many offer excellent after-sales support? Not many, if any.

Ok, my lecture is over now.

Conclusion

So, is purchasing from a GPL Club worth it? Of course not! While GPL Clubs may offer tempting prices, the true cost of opting for such unethical sources can be high, considering the risks and lack of benefits. Investing in plugins through legitimate sources ensures you receive a secure, stable, and supported product while also contributing to the ongoing development and sustainability of the software ecosystem. This not only benefits your business but also supports the broader community of developers and website users.

The post Beyond the Price Tag: The Real Cost of Using a GPL Club for WordPress and Divi Plugins appeared first on Divi Engine.

Morten’s adventure began in Denmark, where his passion for multimedia design and technology led him to explore the digital world. His quest for freedom and innovation drove him to Thailand, where the lifestyle of a digital nomad beckoned. With a background in web design and a keen interest in WordPress, Morten embarked on a new chapter of his life, eventually leading to the inception of his web agency named ​​WebFar.

Discovering Divi and Divi Engine

The pivotal moment in Morten’s journey was his introduction to Divi. The search for a versatile, cost-effective solution for building websites led Morten and his team to Divi and, subsequently, to Divi Engine’s suite of plugins. Morten recalls the moment he realized that while Divi offered a vast array of possibilities, there were still challenges that required advanced solutions. This realization led him to Divi Engine, where he found the tools necessary to elevate his projects and meet the complex needs of his clients​​.

A Success Story Powered by Divi Engine Plugins

One of Morten’s first encounters with Divi Engine was through Divi BodyCommerce, a plugin designed to enhance e-commerce sites beyond the capabilities of Divi alone. Morten’s endeavor to create a detailed and functional e-commerce site for a client showcased the plugin’s ability to address and fulfill specific design and functionality requirements. This experience opened the door to other Divi Engine plugins, each contributing to the success and growth of Morten’s agency​​.

Beyond Borders: Serving Clients from Thailand to Denmark

Despite being based in Thailand, Morten’s agency (WebFar) predominantly serves clients in Denmark and Europe. This global approach is facilitated by word-of-mouth recommendations and a solid network back in Denmark. The digital landscape allows Morten’s team to deliver top-notch services across continents, proving that creativity and talent know no boundaries​​.

Key Takeaways from Morten’s Journey

Morten’s success story with Divi Engine highlights several key takeaways for aspiring digital entrepreneurs and web designers:

• Embrace the Digital Nomad Lifestyle: With the right skills and tools, it’s possible to build a successful business from anywhere in the world.
• Leverage the Right Tools: The combination of Divi and Divi Engine plugins can unlock unlimited potential for web design projects.
• Build on Your Network: Utilizing existing networks and word-of-mouth can be a powerful strategy for acquiring new clients, even in a digital-centric business.
• Never Stop Exploring: The world of web design is ever-evolving. Stay curious and open to new solutions that can enhance your projects and delight your clients.

Connect with Morten

Are you inspired by Morten’s journey and want to see more of his work? Check out his agency’s website and YouTube channels to dive deeper into his world of web design and digital creativity:

• WebFar Site: Explore WebFar
• WebFar YouTube Channel: Watch Now
• Music and Coding YouTube Channel: Discover More

These platforms showcase Morten’s expertise and the innovative use of Divi and Divi Engine plugins in creating dynamic, engaging websites. Whether you’re a fellow web designer or a business owner looking for inspiration, Morten’s channels are a treasure trove of knowledge and creativity.

Discover More with Divi Engine

Inspired by Morten’s story? Explore how Divi Engine can empower your web design projects and help you achieve your digital dreams. Visit our plugins page to start your own success story today.

Stay tuned for more customer success stories and tips from the world of Divi Engine. Happy designing!

The post Unlocking Digital Success with Divi Engine: Morten’s Entrepreneurial Journey appeared first on Divi Engine.

• 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.

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:

1. 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.
2. 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.
3. 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.

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:

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

Insert a Code Module:

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

Include the Canvas Confetti Library:

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

            <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.js"></script>
        

Add the JavaScript Trigger:

1. Below the script tag, add another tag to house your JavaScript code.
2. Copy and paste the JavaScript snippet below.
3. 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.

            <script>
// Listens for the 'DOMContentLoaded' event to ensure the HTML is fully loaded before running the script.
document.addEventListener('DOMContentLoaded', function() {

  // Selects the first element with the class '.confetti-button' as the target button.
  const button = document.querySelector('.confetti-button');  // You can change the class, just make sure it is defined in the module also.  

  // Adds an event listener for the "click" event on the targeted button.
  button.addEventListener('click', function(event) {
    // Retrieves the position and size of the button to calculate where the confetti should appear.
    const rect = button.getBoundingClientRect();

    // Calculates the horizontal (x) center of the button.
    const x = (rect.left + rect.right) / 2;

    // Calculates the vertical (y) center of the button.
    const y = (rect.top + rect.bottom) / 2;

    // Configures the settings for the confetti effect.
    const confettiSettings = {
      particleCount: 100, // Defines the number of confetti particles.
      spread: 70,         // Sets the spread angle of the confetti.
      // Specifies the origin point for the confetti effect based on the button's location.
      origin: { x: x / window.innerWidth, y: y / window.innerHeight }
    };

    // Triggers the confetti effect with the defined settings when the button is clicked.
    confetti(confettiSettings);
  });
});
</script>
        

Save and Test:

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

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:

1. Use your browser’s developer tools to inspect the submit button on your contact form.
2. 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:

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

            <script>
// Event listener for when the DOM (Document Object Model) is fully loaded.
document.addEventListener('DOMContentLoaded', function() {

    // Selects the first submit button within the Divi Contact Form module.
    var submitButton = document.querySelector('.et_pb_contact_submit');

    // Checks if the submit button exists to prevent errors if the button is not found.
    if (submitButton) {
        // Adds a new class 'confetti-button' to the submit button for later reference.
        submitButton.classList.add('confetti-button');
    }

    // Selects the button with the class 'confetti-button'.
    const confettiButton = document.querySelector('.confetti-button');

    // Checks if the confetti button exists to avoid errors.
    if (confettiButton) {
        // Attaches an event listener for a 'click' event on the confetti button.
        confettiButton.addEventListener('click', function(event) {
            // Gets the position and dimensions of the confetti button.
            const rect = confettiButton.getBoundingClientRect();

            // Calculates the horizontal (x) and vertical (y) center points of the button.
            const x = (rect.left + rect.right) / 2;
            const y = (rect.top + rect.bottom) / 2;

            // Defines settings for the confetti effect.
            const confettiSettings = {
                particleCount: 100, // Number of confetti particles.
                spread: 70,        // Spread angle of the confetti.
                // Sets the origin point for the confetti effect based on button's position.
                origin: { x: x / window.innerWidth, y: y / window.innerHeight }
            };

            // Triggers the confetti effect with the defined settings.
            confetti(confettiSettings);
        });
    }
});
</script>
        

Increase Specificity (Optional):

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

Customize and Save:

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

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:

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

            <script>
document.addEventListener('DOMContentLoaded', function() {
    // Adding the 'confetti-button' class to a specific submit button
    var submitButton = document.querySelector('.divi-form-submit'); //set your selector here
    if (submitButton) {
        submitButton.classList.add('confetti-button'); //confetti-button class being added to the element above

        // Attaching the confetti effect to the button with the 'confetti-button' class
        submitButton.addEventListener('click', function(e) {
            if (!e.target.matches('.confetti-button')) return; // Check if the clicked element has the class

            // Calculate the button's position for the confetti effect
            const rect = submitButton.getBoundingClientRect();
            const x = (rect.left + rect.right) / 2;
            const y = (rect.top + rect.bottom) / 2;

            // Configure confetti settings
            const confettiSettings = {
                particleCount: 100, // Number of particles generated
                spread: 70, // How far do the particles spread from the origin
                origin: { x: x / window.innerWidth, y: y / window.innerHeight } // The center point of where the particles originate from
            };

            // Trigger the confetti effect
            confetti(confettiSettings);
        });
    }
});
</script>
        

Customize Your Confetti Settings:

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

Increase Specificity if Needed:

1. To ensure the correct button triggers the effect, add an extra class to your contact form module under the Advanced tab.
2. 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.

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.

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.

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.

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

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 4: Advanced Product Filtering with Ajax appeared first on Divi Engine.

• 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.

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

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

Crafting the Cutout Effect

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

1. Build a Divi Section, a Row within it, and finally, a Text module inside the Row.
2. 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.
3. Open the Text module settings and set the text color to solid black.
   
   Consider using a heading for a more impactful visual effect.
4. 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:

1. Add Parallax to the background image: Enable the parallax effect for the section’s background image to introduce a scrolling effect.
2. Introduce transparency to the overlay: Slightly transparent row background colors can enhance the design.
3. Leverage Scroll Effects: Apply Scroll Effects to the text module for animation. Vertical motion and scale work well with this design.
4. Explore Video Backgrounds: Use video backgrounds instead of images when incorporating semi-transparent overlays.
5. 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.

Have you ever imagined turning your website into an exclusive club for your most dedicated followers? Well, dream no more! Our recent workshop peeled back the curtain on the Divi Membership plugin, it’s all about unlocking the full potential of membership sites right within the Divi ecosystem.

This powerful new tool is designed to help you effortlessly create a gated community or a premium content platform, giving you the power to monetize your site and provide exclusive access to your most valuable assets.

To kick things off, Peter, our fearless leader and one of the brains behind this incredible plugin, hosted an in-depth workshop. He took us on a detailed tour of Divi Membership, showcasing the endless possibilities it offers for website owners and developers alike. If you’ve ever considered adding a membership layer to your site, this workshop was an unmissable event, filled with insights, tips, and live demonstrations of the plugin in action.

A Sneak Peek into Divi Membership

Imagine a world where your content knows no bounds yet is safeguarded behind a velvet rope, accessible only to those who’ve joined your ranks. That’s exactly what Divi Membership brings to the table. This plugin is your golden ticket to:

• Content Restriction: Like a VIP bouncer, Divi Membership ensures only members can peek behind the curtain to access your premium content.
• Payment Integrations: With seamless Stripe and PayPal integrations, monetizing your content becomes as easy as pie.
• Email Notifications: Keep your members in the loop with automated emails for welcome messages, subscription renewals, and more.
• In-depth Reporting: Track your success with detailed reports on sign-ups and revenue, ensuring you’re always on top of your game.

Learn More about Divi Membership

Questions from Our Community

Our live Q&A session turned into a treasure trove of insights. Here’s what we unearthed:

1. User Role Customization: Can membership levels dictate user roles? Currently, it’s a one-size-fits-all approach, but we’re brainstorming ways to add more granularity.
2. LMS Integration: Will this work with my LMS? Absolutely! Custom post types mean your educational content is ripe for the Divi Membership treatment.
3. Divi Machine Accounts Synergy: Can we blend Divi Membership with Divi Machine Accounts? While they’re not integrated yet, we’re all ears for your input on this potential pairing.
4. WooCommerce Gateway Compatibility: What about using local payment gateways? We’re considering how we might tap into WooCommerce’s gateway lineup without needing the full WooCommerce setup.

Catch the Replay Right Here

Missed the live demo? No worries! We’ve embedded the workshop video below, so you can catch all the action and see Divi Membership in all its glory.

What’s Next?

This workshop was just the beginning. We’re committed to evolving Divi Membership based on your feedback, making it the most user-friendly, powerful membership plugin for Divi out there.

Stay tuned to the Divi Engine blog for more updates, tips, and inspiring stories from Divi creators like you.

Happy Divi-ing!

The post Dive Deep into the Divi Membership plugin: Workshop Highlights and Your Questions Answered appeared first on Divi Engine.

In this blog post, we’re excited to share some of the highlights and questions that were asked and answered during our conversation. Whether you’re a seasoned Divi user or just starting out, there’s something here for everyone.

From Holiday Traditions to Online Platforms

The chat kicked off with a light-hearted discussion about Thanksgiving traditions in the USA, with Nelson sharing his experiences of the holiday. The conversation then shifted to the Cosmos platform, a virtual space where the Divi community can interact and play games. It’s clear that the platform has a lot to offer for remote teams, with users exploring its various features, including a map view and the ability to pull guests into conversations.

Reflecting on the Divi Bonanza Event

Nelson and Peter reminisced about their participation in the recent Divi Bonanza event, a gathering of Divi enthusiasts that saw them fielding questions and sharing their insights. They discussed the randomness of the questions asked and the desire for different ones, highlighting the unpredictable nature of live Q&A sessions.

The Art of Divi Product Development

One of the core discussions centered around product development within the Divi ecosystem. Both Nelson and Peter shared their philosophies on creating products that solve real problems rather than simply adding to the noise. They talked about the importance of complementing existing products and the challenge of staying focused amidst a sea of new ideas.

Divi 5: The Future and Its Challenges

A significant portion of the chat was dedicated to Divi 5 (Dy5), the much-anticipated update to the Divi theme. They discussed the challenges facing developers, such as rebuilding modules and the uncertainty of the release schedule. Despite the hurdles, they also touched on the positives, such as potential performance improvements and a faster Divi Builder experience.

Customer Service: The Heart of Business

Nelson and Peter delved into their approaches to customer service, emphasizing kindness, respect, and the personal touch. They shared stories of how treating customers well has led to positive outcomes and the importance of not taking negative feedback personally.

Tools of the Trade: Boosting Productivity

When asked about productivity tools, Nelson praised Type Desk for its quick response capabilities and Gmail for its support system. He shared how these tools have streamlined his workflow and allowed him to manage customer interactions more efficiently.

The Divi Marketplace Debate

The Divi Marketplace was a hot topic, with Nelson and Peter discussing the pros and cons of selling products there versus on their own websites. They addressed issues like delayed updates on the marketplace, the review process, and the impact on customer support, providing valuable insights for both developers and customers.

Balancing Pixels and Parenthood

The conversation wrapped up with a candid discussion about work-life balance, particularly when working from home. They shared how they manage their time between family and work, the flexibility it provides, and the unique challenges it presents.

We hope you enjoyed this behind-the-scenes look at the lives of Divi product developers. The full video of our chat is now available on the Divi Engine blog. Whether you’re looking for tips on product development, insights into the upcoming Divi 5, or just a bit of Divi camaraderie, be sure to check it out!

The post A Peek Behind the Pixels: A Candid Conversation with Divi Creators appeared first on Divi Engine.

Enterprises sometimes find themselves at a crossroads, contemplating a pivotal decision: whether to migrate to a different Enterprise Content Management System (CMS). This choice is rarely straightforward and can stem from various reasons.

For instance, a company might consider transitioning from Drupal to WordPress, seeking to harness WordPress’s rich plugin ecosystem and its vibrant, supportive community.

However, such migrations are not without their challenges. 

Transitioning to a new CMS can be a complex and daunting task, often laden with technical intricacies and potential pitfalls. From data transfer risks to the learning curve for new systems, businesses need to navigate a labyrinth of considerations to ensure a smooth transition.

Amidst these complexities, partnering with a specialized agency, particularly one experienced in Drupal to WordPress migration, can be a game-changer. Such an agency can provide the expertise and guidance necessary to mitigate risks, streamline the process, and tailor the migration to the specific needs of the business.

In this article, let’s delve into the four crucial factors to consider when migrating to a different enterprise CMS, ensuring that your transition is as seamless and effective as possible.

1. Assessing Current Needs

Embarking on a migration journey to a new Enterprise CMS necessitates a thorough understanding of your current needs and the limitations that compel this shift. The decision to migrate should not be taken lightly, considering the intricacies and resources involved in such a process.

Begin by introspecting the reasons behind your migration. Perhaps your current CMS lacks certain functionalities, or maybe the costs associated with it are no longer sustainable. 

For many, the move might be motivated by the desire for enhanced features; for example, companies using Sitecore might be drawn to the economical and versatile nature of WordPress, an open-source platform renowned for its affordability and scalability.

Next, it’s essential to collate and prioritize your requirements. What features are non-negotiable in your new CMS? Do you require better support for mobile responsiveness, enhanced security features, or a more intuitive content editing interface? 

These requirements will guide you in evaluating and selecting a CMS that aligns with your business goals and operational needs.

Remember, the goal of this assessment is not just to find a new CMS, but to find one that propels your enterprise towards greater efficiency and success.

2. Compatibility with Existing Workflows

The role of a CMS extends beyond mere content management; it is integral to the orchestration of daily workflows and processes within an enterprise. Therefore, when considering a migration to a new CMS, it’s paramount to ensure that the new system seamlessly integrates with and supports your existing workflows.

One of the primary considerations should be the compatibility of the new CMS with your current operational processes. The transition should not require a complete overhaul of established procedures unless it’s a strategic decision to improve them. 

For instance, if your team is accustomed to a particular content approval process, the new CMS should be able to support, or even enhance, this workflow.

The adaptability of the CMS is also a key factor. Platforms like WordPress are celebrated for their flexibility, offering extensive customization options through plugins, HTML coding, and third-party integrations. 

This flexibility ensures that the CMS can grow and adapt to your business needs, accommodating changes in workflows or expanding functionalities without requiring frequent system replacements.

However, it’s important to be cognizant of the temporary disruptions that might occur during the migration process. These disruptions, although inevitable, can be minimized with careful planning and clear communication. 

It’s advisable to create a detailed migration plan that outlines how workflows will be managed and supported during the transition phase, ensuring minimal impact on daily operations.

3. Data Migration Complexity

Migrating data is one of the most critical and challenging aspects of switching to a new Enterprise CMS. This process involves transferring a vast array of content types — from text and images to user data and metadata — each with its own set of complexities.

Missteps can lead to data loss, corruption, compatibility issues, or even security breaches all of which can have a detrimental impact on your enterprise’s operations and credibility. It is crucial to understand these risks and relevant concepts for IT security like cyber asset attack surface management to prepare accordingly to mitigate them.

You can make this process easier by choosing a CMS that is easier to migrate to. WordPress, for instance, offers migration plugins that help enterprises move their content from their existing platform to it. This, apart from saving your time through automation, will also minimize the chance of errors.

Despite the inherent challenges, most enterprise CMS platforms are equipped to handle migrations effectively. However, the ease of migration can vary significantly between platforms. It is advisable to conduct thorough research or consult with migration experts to understand the nuances of migrating to your chosen CMS, ensuring a well-informed decision that aligns with your enterprise’s data management needs.

4. UX and Training Requirements

The ease with which your team adapts to and embraces the new system plays a pivotal role in the migration’s success. Therefore, it’s essential to choose a CMS that not only meets your technical requirements but also aligns with your team’s usability needs and preferences.

A CMS that offers a complex and non-intuitive interface can become a roadblock, hampering productivity and morale. On the other hand, opting for a CMS known for its simplicity and user-centric design can make a world of difference. 

A platform that offers a straightforward, engaging user experience reduces the learning curve and accelerates user adoption.

While the intrinsic user-friendliness of the CMS is important, complementing it with a robust training strategy is equally vital. Here are some tailored approaches to ensure efficient training and adaptation:

1. Role-Specific Training Modules: Develop training sessions that are customized to various user roles within your organization. This approach ensures that each team member receives relevant, practical knowledge tailored to their specific interactions with the CMS.
2. Ongoing Learning Resources: Establish a repository of learning materials, such as video tutorials, FAQs, and step-by-step guides. These resources should be easily accessible, allowing team members to self-serve answers and guidance as they acclimate to the new system.
3. Feedback Integration: Create channels for users to voice their experiences, concerns, and suggestions regarding the CMS. This feedback mechanism is crucial for iterative improvements, ensuring the CMS evolves in a way that continuously meets user needs.

Wrapping Up

To summarize, when considering a migration to a new CMS, it is essential to:

• Understand and articulate your current needs: Clearly define what you are looking for in a new CMS, considering both the limitations of your current system and the aspirations for your future platform.
• Ensure compatibility with existing processes: Choose a CMS that integrates well with your current workflows and can adapt to future changes without causing significant disruptions.
• Prioritize ease of data migration: Opt for a CMS that offers streamlined and reliable data migration tools, minimizing the risk of data loss or corruption.
• Focus on user experience and effective training: Select a CMS that is intuitive and user-friendly, and invest in comprehensive training to facilitate a smooth transition for all users.

The post Migrating to a Different Enterprise CMS: 4 Things to Consider appeared first on Divi Engine.

1. Introducing the new Built-with Feature

Curious about the Divi Engine plugins behind our site’s features? Our new interactive build feature provides the answers. Simply hover over the ‘i’ icon on any feature to see which plugin powers it, offering inspiration for your own Divi projects.

2. Customize Your Plugin Arsenal

Unique needs deserve unique solutions. With our customizable plugin bundles, you can select the plugins that best suit your project’s requirements. Plus, enjoy attractive discounts on these custom bundles!

3. Global Shopping Made Easier

We’ve made global shopping seamless with our new currency switcher and language selection options. Now, you can easily view the prices of our plugins in 3 different currencies, and browse the site in 8 languages for an enhanced shopping experience.

4. A Fresh, Modern Look

After four years, it’s time for a change. Our new branding includes a refreshed Divi Engine logo and plugin logos, encapsulating our commitment to innovation and staying current.

5. Revamped Content Organization

Discover easier navigation and new categories like Code Snippets and Divi Blueprints on our reorganized website. These additions are designed to enrich your experience and elevate your Divi projects.

6. Divi Engine Membership Change

Don’t panic, your Divi Engine Membership is staying exactly the same with a small change to the name due to something huge that is happening real soon…

The Divi Engine Membership will be called the Divi Engine All-access Pass going forward. You will see this reflected throughout our sit and no change is needed on your end.

Membership ➡️ All-Access Pass

What’s a Divi Blueprint?

A Divi Blueprint is your guide in the world of website building. Combining WordPress, the Divi Theme, our plugins, and select free WordPress plugins, it simplifies the process of building specific types of websites.

Conclusion:

Our new website is a testament to our dedication to the Divi community. Whether you’re a seasoned user or new to Divi Engine, explore our new site, engage with our features, and dive into the enhanced content. And don’t forget to sign up on our Black Friday page to get notified as soon as the sale begins. Welcome to the new era of Divi Engine – where innovation, customization, and community converge!

Visit our Black Friday page now to sign up for sale notifications. Dive into our new site and prepare for an amazing shopping experience! Happy building!

The post Welcome to the New Era of Divi Engine – A Redefined Experience Awaits You! appeared first on Divi Engine.

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:

• Loop Layout Coding Tutorial
• Divi Machine Tutorial
• Dribbble for Design Inspiration

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

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 3: Enhancing User Experience with Pre-made or Custom Loop Templates appeared first on Divi Engine.

Cover images play a pivotal role in conveying your brand’s identity, values, and the essence of what you offer. They are the billboards of the digital highway where your audience travels. A well-designed cover image not only enhances your brand’s visual appeal but also conveys your brand personality and message at a glance.

Crafting the perfect cover image with the right dimensions for each platform can feel like navigating through a maze, especially with the various image size requirements of different social media platforms. Fear not! Divi Engine offers a solution—a free Adobe Illustrator template to help you design stellar cover images with ease for YouTube, Facebook, and Twitter.

• YouTube: The ideal dimensions for a YouTube cover photo are 2560 x 1440 pixels. However, due to various device displays, only a portion of the cover photo is visible across different devices.
  
  
• Facebook: For a sharp look, your Facebook cover photo should be 820 x 312 pixels on desktops and 640 x 360 pixels on smartphones.
  
  
• Twitter: Twitter prefers a square aesthetic for its cover photos, with recommended dimensions of 1500 x 421 pixels or 1500 x 500 pixels. It’s wise to leave ample space at the top and bottom to accommodate different screen sizes.
  
  

With these dimensions and our Adobe Illustrator template, creating engaging, well-fitted cover images is now a breeze! This template was initially crafted for our in-house use, but we decided to share it with the community.

Utilizing this template allows for a streamlined design process, ensuring that your cover images are not only visually appealing but also formatted correctly for different platforms and screen sizes. It’s a small yet significant step towards building a stronger brand presence online.

So go ahead, download the template, and give your social media profiles the aesthetic boost they deserve!

The post Frame Your Digital Identity with Our Free Social Media Cover Template (Illustrator) appeared first on Divi Engine.

1. Vertical Motion: Create engaging vertical animations that respond to scrolling.
2. Horizontal Motion: Add dynamic horizontal motion to your content.
3. Fade: Control the fading in and out of elements for a subtle, elegant effect.
4. Scale: Enlarge or shrink elements to draw attention where it’s needed.
5. Rotation: Apply smooth rotations to create visually compelling dynamics.
6. 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:

1. Begin by opening the module settings.
2. Navigate to the Advanced tab.
3. 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.
4. Hover over the tabs to reveal their names. Click on the third tab, labeled Fading In and Out.
5. 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.

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:

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.

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.

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

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 2: Product Listing and Customization with BodyCommerce appeared first on Divi Engine.

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:

1. 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.
2. Click Edit Preset Style.
   
   
3. Navigate through the Content, Design, and Advanced tabs to make your desired changes.
   
   
4. 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):

1. While editing a Divi element, click on the Preset dropdown.
2. In the ensuing menu, click on ADD NEW PRESET.
3. 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:

1. Click on the three vertical dots at the top right corner of the settings window and select Apply Styles To Active Preset.
2. 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.

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?

1. Overview and Pre-requisites: Our first video lays the groundwork for your Divi BodyCommerce journey.
2. Local Dev Environment Setup: The second video touches on setting up a local development environment using Local by Flywheel.
3. Basic WooCommerce Setup: The third video in the series guides you through the installation of essential themes and plugins, mainly WooCommerce.
4. Basic WordPress Setup: Video four delves into basic WordPress settings, such as general settings, setting a static landing page, and menu configuration.
5. 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

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 1: Introduction and Setting up the Base appeared first on Divi Engine.

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

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.

Other Installments

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

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:

1. Open the Contact Form module settings
2. Click on + Filter
3. 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:

1. There are no modifications under border and text styles. In situations like this, it’s very handy to see only the modified styles:
2. Open the Text settings
3. Click on + Filter
4. 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:

1. Open the Module, Row or Section settings.
2. Click on + Filter
3. 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.

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.

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:

1. 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.
2. 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.

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.

AI in marketing refers to applying artificial intelligence (AI) technologies and techniques to various aspects of the marketing process. AI involves the development of systems that can perform tasks that typically require human intelligence, such as making decisions and learning from experience. When applied to marketing, AI can revolutionize how businesses understand, and engage with their target audiences. 

AI systems process large volumes of data at remarkable speeds, enabling marketers to make more informed decisions and create highly personalized campaigns. This understanding allows businesses to tailor their marketing efforts to match individual customer needs, leading to improved engagement and higher conversion rates. 

Role of AI in marketing 

The role of Artificial Intelligence (AI) in marketing is to redefine how businesses engage with customers, analyze data, and execute strategies. Here is an in-depth look at the various aspects of AI’s role in marketing:

• Customer Journey Enhancement: AI helps map and optimize the customer journey by identifying touchpoints and moments where interactions can be improved. This leads to smoother customer experiences and increased customer satisfaction.
• Content Creation and Optimization: AI tools like ChatGPT can generate content based on user preferences and trending topics, saving time for marketers. Additionally, AI can optimize content by analyzing performance metrics and suggesting improvements.
• Visual Recognition and Augmented Reality: AI can analyze images and videos to offer personalized product recommendations and enable interactive experiences. This enhances engagement and helps customers make informed purchase decisions.
• A/B Testing and Optimization: AI can conduct A/B testing at a scale and speed that would be impossible manually. Marketers can test various elements of campaigns and optimize them for better performance.
• Sentiment Analysis and Social Listening: AI can analyze social media and online conversations to determine customer sentiment and monitor brand perception. This information helps businesses respond effectively to customer feedback and manage their online reputation.
• Augmented Reality (AR) and Virtual Reality (VR): AI-driven AR and VR technologies create interactive experiences for customers, enhancing brand engagement and driving conversions.

How is AI used in marketing 

AI is used in marketing across various stages and aspects of the customer journey to enhance efficiency, effectiveness, and personalization. Here’s how AI is applied in marketing:

1. AI-powered Form Plugin

One of the remarkable ways Artificial Intelligence (AI) is making its mark in marketing is through the integration of AI into form-building processes. An effective example of this is our innovative “Divi Form Builder Plugin” which offers Artificial Intelligence by way of Divi Form AI. 

This plugin combines the power of AI, particularly OpenAI’s GPT API, to enhance the creation of forms on websites using the Divi Builder, all without the need for coding skills.

Unlike ordinary form plugins, Divi Form AI takes the concept of AI integration to the next level by incorporating ChatGPT, delivering an interactive and futuristic website interaction experience. This integration transforms forms into interactive experiences that go beyond traditional static formats, providing users with engaging interactions. Here’s how Divi Form AI stands out:

• OpenAI API Integration: By leveraging OpenAI’s capabilities, the plugin provides an opportunity to integrate AI-powered responses seamlessly into forms.
• Personalized AI Personas: Divi Form AI allows customization of AI personas, infusing them with distinct personalities and expertise. 
• User-Driven AI Prompts: Divi Form AI enables the creation of AI prompts that can incorporate form input from users. This unique feature enhances personalization by tailoring AI responses based on user-provided information.
• Seamless Form Building: Beyond AI capabilities, the Divi Form Builder itself enhances form creation within the Divi ecosystem. It simplifies complex layouts, eliminates the need for extensive CSS, and streamlines the form-building process for a smoother workflow.

2. Customer Segmentation and Targeting: 

Customer segmentation and targeting are essential components of any successful marketing strategy. These practices involve dividing a more extensive customer base into distinct groups based on shared characteristics and behaviors. AI plays a crucial role in making this process more efficient, accurate, and effective.

• Personalized Marketing Campaigns: 

AI enables marketers to create highly personalized campaigns that resonate with individual customers. By analyzing vast amounts of customer data, AI algorithms can identify patterns and preferences unique to each customer. This information is then used to craft messages, offers, and content that align with the customer’s interests and purchasing behavior. 

For example, an e-commerce platform can use AI to analyze a customer’s browsing history, purchase history, and online interactions to recommend products that are most likely to appeal to that customer’s specific tastes.

• Predictive Customer Behavior Analysis: 

Predictive analytics powered by AI enables marketers to forecast customer behavior and preferences based on historical data and current trends. By using machine learning algorithms, marketers can identify which customers are more likely to make a purchase or engage with a particular campaign. This information helps marketers proactively tailor their strategies to maximize positive outcomes.

3. Content Creation and Curation:

Creating and curating relevant and engaging content is a cornerstone of modern marketing strategies. AI-powered tools like an AI video maker, AI article writer, and AI text-to-video converter can effortlessly produce various forms of content, such as videos, articles, blog posts, and even converting blogs to videos and more, with minimal human involvement.

These tools leverage natural language processing and machine learning algorithms to analyze existing content and produce new, well-structured pieces. While they may not replace human writers entirely, they can assist in producing large volumes of content quickly and consistently.

Moreover, AI-driven content recommendation systems analyze user behavior, preferences, and interactions to suggest relevant content. Social media platforms like Facebook and YouTube use AI to recommend posts, videos, and other content based on a user’s previous likes, shares, and comments. 

4. Chatbots and Customer Service:

AI-powered chatbots have emerged as powerful tools that enhance communication, streamline support processes, and provide users with timely assistance. They offer a 24/7 customer support solution that can handle a wide range of queries and issues. These bots can quickly understand and respond to user inquiries, providing instant solutions and assistance. They can be integrated into websites, messaging apps, and social media platforms, ensuring that customers receive immediate support regardless of the time of day.

Additionally, an AI-driven chatbot can simulate human-like conversations, allowing users to engage with brands in a more natural and intuitive way. This leads to an improved user experience, as customers can have meaningful interactions without feeling like they’re interacting with a machine.

5. Data Analysis and Insights:

Data analysis is a crucial aspect of marketing, as it provides valuable insights that inform strategic decisions. AI excels at identifying patterns and trends within vast datasets that would be challenging for humans to detect.

it enables marketers to make data-driven decisions with greater confidence. By processing and analyzing data at speed, AI provides marketers with actionable insights in real-time. These insights help in optimizing campaigns, refining target audiences, and adjusting strategies based on performance metrics.

6. Email Marketing Optimization:

Crafting an attention-grabbing subject line and relevant email content is essential for email marketing success. AI-powered tools can analyze past email performance and user behavior to suggest subject lines and content that are likely to resonate with the target audience. This leads to higher open rates and click-through rates. 

For example, an AI tool might analyze a company’s previous email campaigns and recommend subject lines that have historically generated high open rates.

Additionally, AI can determine the optimal time to send emails to different segments of the audience, taking into account factors such as time zones and historical engagement patterns. Dynamic email timing ensures that emails reach recipients when they are most likely to be receptive, leading to increased engagement and conversions.

Examples of AI in marketing 

1. Amazon’s Personalized Recommendations:

Amazon is a prime example of how AI-driven personalized recommendations can significantly impact customer experiences and drive sales. Amazon’s recommendation engine uses advanced algorithms to analyze customer browsing history, purchase behavior, and interactions to suggest products that are most likely to interest each individual. This approach has led to increased customer engagement and higher conversion rates.

Through this AI-powered recommendation system, Amazon has not only improved the shopping experience but has also maximized cross-selling and upselling opportunities. Customers are more likely to discover and purchase products they might not have found otherwise, resulting in increased revenue for the company.

2. Netflix’s Content Recommendations:

Netflix relies heavily on AI to recommend movies and TV shows to its users. 

The platform analyzes viewing history, user ratings, and other behaviors to predict what content a user might enjoy. By doing so, Netflix keeps users engaged and helps them discover new content.

3. Nike’s AI-Enhanced Sneaker Customization:

Nike’s “Nike By You” platform allows customers to customize their sneakers using AI-powered design tools. 

Customers can choose colors, materials, and design elements to create unique sneakers that reflect their style. This level of customization enhances customer engagement and loyalty, as users can create one-of-a-kind products that resonate with their preferences.

Nike’s AI-driven sneaker customization demonstrates how AI can empower customers to participate in the design process and create products that align with their individual tastes.

What are the benefits of AI in marketing 

1. Improved Efficiency and Productivity: 

AI streamlines various marketing tasks that would otherwise be time-consuming and resource-intensive. Automated processes, such as data analysis, content generation, and customer segmentation, free up marketers to focus on higher-level strategic activities. This improved efficiency allows marketing teams to accomplish more in less time, leading to increased productivity and resource optimization.

2. Enhanced Customer Experience: 

AI enables marketers to deliver personalized and relevant experiences to customers. By analyzing customer data and behavior, AI helps tailor marketing messages and recommendations to individual preferences. This level of personalization improves customer satisfaction, engagement, and loyalty. AI-powered chatbots also offer instant support, enhancing the overall customer experience by providing timely assistance.

3. Enhanced Marketing ROI (Return on Investment): 

AI-driven strategies help maximize marketing ROI by targeting the right audience with personalized content and optimizing campaigns based on real-time data. By allocating resources more effectively, businesses can achieve higher conversion rates and revenue growth.

4. Multilingual and Global Reach: 

AI-powered language translation and localization tools enable brands to effectively communicate with diverse global audiences. This expands the market reach and opens up opportunities for international growth without facing external communication barriers. 

Challenges of AI in marketing 

1. Data Privacy and Security: 

As AI relies heavily on data, ensuring the privacy and security of user information is crucial. Collecting, storing, and analyzing data in AI-driven marketing strategies can raise concerns about data breaches, unauthorized access, and misuse of personal information.

2. Human Touch vs. Automation Balance: 

Achieving the right balance between automation and the human touch is a challenge. While AI can streamline processes and deliver personalized experiences, human interactions are essential for empathy, complex problem-solving, and emotional connections.

3. Initial Investment and ROI Uncertainty: 

Implementing AI solutions requires an initial investment in technology, tools, and talent. Businesses might face uncertainty regarding the ROI of AI initiatives, especially in the early stages. Careful planning and measuring key performance indicators (KPIs) are essential to determine the effectiveness of AI-driven strategies.

4. Transparency and Explainability: 

AI algorithms can be complex, making it challenging to explain their decision-making processes. Ensuring transparency is crucial, especially when AI influences critical marketing decisions.

Understanding AI marketing strategies 

AI marketing strategies are approaches that leverage Artificial Intelligence (AI) technologies to enhance various aspects of marketing campaigns, customer interactions, and decision-making processes. Below are the key strategies that incorporate AI to achieve more efficient and data-driven marketing outcomes:

1. Marketing Automation and Workflow Streamlining: AI automates routine marketing tasks, such as scheduling social media posts, segmenting audiences, and sending targeted emails. This allows marketers to focus on strategic planning, creative thinking, and analyzing results rather than repetitive tasks.
2. Conversion Rate Optimization (CRO): AI helps optimize websites and landing pages by analyzing user behavior and suggesting improvements. By A/B testing variations and identifying elements that lead to higher conversions, AI-driven CRO strategies enhance the effectiveness of marketing campaigns.
3. Sentiment Analysis and Social Listening: AI tools monitor social media and online platforms to determine consumer sentiment and track brand mentions. This allows start-ups to respond promptly to both positive and negative feedback, fostering positive brand perception.
4. Hyper-targeted Advertising: AI-powered algorithms analyze user behavior, demographic data, and firmographic data to identify the most relevant audiences for specific advertisements. This ensures that ad campaigns reach the right people at the right time, increasing the chances of conversion and reducing ad spend wastage.

How to Implement AI in your marketing strategies 

Integrating AI into your marketing strategy can be a transformative process that enhances your efficiency and effectiveness. Here are the steps to begin incorporating AI into your marketing efforts:

1. Identify Your Objectives: Determine the specific goals you want to achieve with AI integration. Whether it’s improving customer segmentation, optimizing content delivery, or enhancing customer service, having clear objectives will guide your implementation.
2. Assess Your Data: AI relies on data to make informed decisions. Evaluate the quality, quantity, and relevance of your data. If necessary, clean and organize your data to ensure accurate results from AI algorithms.
3. Choose Appropriate AI Tools: Research and select the AI tools or platforms that align with your objectives. These could include content generation tools, chatbot platforms, or customer behavior analysis tools.
4. Train Your Team: Educate your marketing team about AI concepts, benefits, and how to use the selected tools effectively. This might involve workshops and training sessions.
5. Monitor and Evaluate: Regularly monitor the performance of your AI-driven initiatives. Measure key metrics, gather feedback, and analyze the outcomes to ensure that your objectives are being met.

Conclusion 

AI in marketing is a powerful tool that brings a range of benefits to businesses of all sizes. From automating repetitive tasks to gaining valuable insights into customer behavior, AI helps marketers work smarter and more efficiently. By leveraging AI-driven tools and strategies, companies can better understand their target audiences, tailor their campaigns, and ultimately achieve higher levels of success in modern marketing. As technology continues to evolve, implementing AI in marketing will likely become even more essential for staying competitive and fostering lasting customer relationships.

The post What is AI in Marketing: Benefits, Use Cases, and Examples appeared first on Divi Engine.

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

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

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

.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;
}

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

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

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

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

Download our City layout pack.

We improved this Elegant Themes Layout Pack by integrating Advanced Custom Fields and Divi Machine, making our template fully dynamic. This saves you time and effort while enhancing the design quality with our premium features.

 



ACF Maps

We have added a map to show locations on your single page being dynamically populated by ACF. 

 



Custom Post Types

We have created custom posts for events and services.

 



Linked Posts

We added post linking functionality to show their relationships.

 



Gallery / Slider

We have added a Gallery to highlight the images in our post.



ACF Integrated

We made this template ACF compatible and fully dynamic.

 

 



Custom Loops

We have created new attractive designs for our posts.

 

Elegant Themes Demo Version

Divi Engine Demo Version

Download Layout Pack

Installation Instructions

To get it all up and running for this layout, you will need to:



Create a new Post Type "Services"

Create a new Post Type using Divi Machine – make sure the setting “Post Type Slug” is “services”



Create a new Post Type "Events"

Create a new Post Type using Divi Machine – make sure the setting “Post Type Slug” is “events”

Then you just have to follow these numbered steps from the Installation Instructions manual: 

 

For this Layout you Will Need These Plugins:

If you don’t have them, you can click on the buttons to get them 

Divi Machine

Download our Divi Engine Layouts Manual :

We have created this manual so you can easily understand how to install this layout. Just remember to follow the step previously mentioned.

Download Manual

Video Tutorial

If you prefer to watch the steps by video, here is the videotutorial

The post FREE City Layout pack for Divi Machine appeared first on Divi Engine.

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

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

The post *FREE* Divi Engine Plugin Tutorial Series: Divi Machine Classifieds appeared first on Divi Engine.

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:

<?php


if ( ! defined( 'ABSPATH' ) ) exit;


// get the post ID
$post_id = get_the_ID();


?>
<article id="<?php echo $post_id; ?>" <?php post_class( 'et_pb_post clearfix grid-item'); ?>>
<div class="grid-item-cont">
<p>
    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.
    <br><br>
    Create the folder /divi-ajax-filter/loop-templates/custom-template.php
    <br><br>
    Add the content you want for each post there.
</p>
</div>
</article>
<?php

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 <article> tags so it looks like this:

<?php


if ( ! defined( 'ABSPATH' ) ) exit;


// get the post ID
$post_id = get_the_ID();


?>
<article id="<?php echo $post_id; ?>" <?php post_class( 'et_pb_post clearfix grid-item'); ?>>

Our code will go here...

</article>
<?php

The Card Container

Inside <article>, add a <div> with class card to contain the loop:

<?php


if ( ! defined( 'ABSPATH' ) ) exit;


// get the post ID
$post_id = get_the_ID();


?>
<article id="<?php echo $post_id; ?>" <?php post_class( 'et_pb_post clearfix grid-item'); ?>>
<div class="card">

Our code will go here...

</div>
</article>
<?php

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 <div> with the class card-image inside of main card <div>. We also need to sprinkle some PHP in there to call our image, so add the code below:

<div class="card-image">
  <?php echo get_the_post_thumbnail( $post_id, 'large', array( 'class' => 'img-responsive' ) ); ?>
</div>

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.

<div class="event-schedule">
  <div class="event-date">
    Our code will go here...
  </div>
  
  <div class="event-time">
    Our code will go here...     
  </div>
</div>

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’).

<div class="event-schedule">
  <div class="event-date">
    <?php the_field( 'event_date' ); ?>
  </div>
  
  <div class="event-time">
    Our code will go here...     
  </div>
</div>

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’).

<div class="event-schedule">
  <div class="event-date">
    <?php the_field( 'event_date' ); ?>
  </div>
  
  <div class="event-time">
    <?php the_field( 'event_start_time' ); ?> - <?php the_field( 'event_end_time' );?>
  </div>
</div>

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.

<div class="event-schedule">
  <div class="event-date">
    <?php the_field( 'event_date' ); ?>
  </div>
  
  <div class="event-time">
    <?php the_field( 'event_start_time' ); ?><?php if(get_field('event_end_time')) { echo ' - '; the_field( 'event_end_time' ); } ?>
  </div>
</div>

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.

<div class="event-details">
  <h2><?php the_title(); ?></h2>
</div>

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.

<div class="event-details">
  <h2><?php the_title(); ?></h2>
  <div class="event-address">
    <?php the_field( 'event_address' ); ?>
  </div>
</div>

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.

<div class="event-cta-row">
   Our code will go here...
</div>

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.

<div class="event-cta-row">
  <a href="<?php the_permalink(); ?>" class="event-details-cta">Details</a>
</div>

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.

<div class="event-cta-row">
  <a href="<?php the_permalink(); ?>" class="event-details-cta">Details</a>

  <?php if(get_field( 'ticket_link' )) : ?>
    <a href="<?php the_field( 'ticket_link' ); ?>" class="event-tickets-cta">Buy Tickets</a>
  <?php endif; ?>
</div>

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.

<?php if ( have_rows( 'icon_list_tooltip' ) ) : ?>

  Our code will go here...

<?php endif; ?>

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.

<?php if ( have_rows( 'icon_list_tooltip' ) ) : ?>

  <div class="event-icons-title">
    <?php the_field( 'icon_list_title' );?>
  </div>

<?php endif; ?>

Now that our title is in place, let’s add a div to contain our icons with the class event-icons.

<?php if ( have_rows( 'icon_list_tooltip' ) ) : ?>

  <div class="event-icons-title">
    <?php the_field( 'icon_list_title' ); ?>
  </div>
  
  <div class="event-icons"> 
    Our code will go here...
  </div>

<?php endif; ?>

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.

<?php if ( have_rows( 'icon_list_tooltip' ) ) : ?>

  <div class="event-icons-title">
    <?php the_field( 'icon_list_title' ); ?>
  </div>
  
  <div class="event-icons">    
    <?php while ( have_rows( 'icon_list_tooltip' ) ) : the_row(); ?>
      Our code will go here...
    <?php endwhile; ?> 
  </div>

<?php endif; ?>

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.

<?php if ( have_rows( 'icon_list_tooltip' ) ) : ?>

  <div class="event-icons-title">
    <?php the_field( 'icon_list_title' ); ?>
  </div>
  
  <div class="event-icons">    
    <?php while ( have_rows( 'icon_list_tooltip' ) ) : the_row(); ?>
      <div class="event-icon" data-tooltip="<?php the_sub_field( 'tooltip' ); ?>">
      </div>
    <?php endwhile; ?> 
  </div>

<?php endif; ?>

Lastly, we add the icon itself with a simple image tag with the src set to the ACF Icon value.

<?php if ( have_rows( 'icon_list_tooltip' ) ) : ?>

  <div class="event-icons-title">
    <?php the_field( 'icon_list_title' ); ?>
  </div>
  
  <div class="event-icons">    
    <?php while ( have_rows( 'icon_list_tooltip' ) ) : the_row(); ?>
      <div class="event-icon" data-tooltip="<?php the_sub_field( 'tooltip' ); ?>">
        <img src="<?php the_sub_field( 'icon' ); ?>" />
      </div>
    <?php endwhile; ?> 
  </div>

<?php endif; ?>

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.

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.

Download our Toy Store layout pack.

We improved this Elegant Themes Layout Pack by integrating our Divi BodyCommerce plugin, making this template more comprehensive when creating an online store. This saves you time and effort while improving the design quality with our premium features.

 



Product Carousel

We added a carousel for products to enhance the design’s professionalism.



Custom Loops

We have created new attractive designs for our posts.

 



Product Gallery / Slider

We have added a slider to highlight the images in our product page.

l

My Account Page

We have created a custom my account page.

 

l

Mini Cart

We have added a mini cart to increase the conversion rate.

.

 



Custom Checkout

We have modified the checkout page to make it more elegant with a Shopify-style design.

 



Sharing Icons

We have added social media sharing icons to the product page.

 

 



Login / Register Page

We have created a registration and login page.

 

 



Improve Custom Badges

We have modified the product badges to make them more attractive.

.

 

Elegant Themes Demo Version

Divi Engine Demo Version

Download Layout Pack

Installation Instructions

Then you just have to follow these numbered steps from the Installation Instructions manual: 

 

For this Layout you Will Need These Plugins:

If you don’t have them, you can click on the buttons to get them 

Divi BodyCommerce

Download our Divi Engine Layouts Manual :

We have created this manual so you can easily understand how to install this layout. Just remember to follow the step previously mentioned.

Download Manual

Video Tutorial

If you prefer to watch the steps by video, here is the videotutorial

The post FREE Toy Store Layout Pack for Divi BodyCommerce appeared first on Divi Engine.

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

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

1. Create a new page in the Divi visual builder and add a single column row.
2. Add a Divi Form Builder module to the row and name it “Smoothie Doctor” or any desired name.

Input Field for ingredients

1. Add a new field for our ingredients.
2. Select Input as the field type.
3. Enter a field ID easy to remember (e.g., f_ingredients). 
4. 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

1. Add a new field for our smoothie type.
2. Select Radio as the field type.
3. Enter a field ID easy to remember (e.g., f_type). 
4. Customize the smoothie type field by adding options for veggie smoothie and fruit smoothie.
5. Under Layout Options, set Radio/Checkbox Field Style to Default or Button style.
6. Set the following one line options to “YES”.
7. If you use the button style, be sure to set the active radio/checkbox styles on the Design Tab.

Checkbox Field for dietary restrictions

1. Add a new field for our dietary restrictions.
2. Select Checkbox as the field type.
3. Enter a field ID easy to remember (e.g., f_restrictions). 
4. Customize the dietary restrictions field by adding options for Low-calorie, Dairy-free, and None.
5. Under Layout Options, set Radio/Checkbox Field Style to Default or Button style.
6. Set the following one line options to “YES”.
7. 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

1. Add an AI field to the form and name it “AI Recipe” or any desired name.
2. Select AI field as the field type.
3. Enter a field ID easy to remember (e.g., f_recipe).
4. 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).

1. Set an estimated spend limit for this specific form which can be reset in admin settings.
2. Decide what you want the form to do when the limit has been reached.
3. Show, hide, or disable the submit button for the form until AI content is generated.
4. Save AI responses to the database to gauge prompt and response quality.
5. Rate limit API calls to avoid abuse.
6. 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

1. In the Pre-defined Prompt Persona section, select “Custom” from the predefined prompt persona options.
2. 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.”
3. 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:

1. Make sure you have the correct field ID.
2. 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

1. 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.
2. 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.
3. 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.
4. Clearly state that you want the AI to provide a detailed step-by-step smoothie recipe that considers the ingredients and dietary restrictions.
5. 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

1. 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
2. Consider using HTML tags to format the table output by going further and adding Use <table> <thead> <tr> 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

1. Head over to the Field settings for your AI Recipe field.
2. Scroll down to Form AI and select Text from the AI Response Loading Style settings.
3. In AI Response Text, enter the lines of text you want to display during the preloading process, such as “Analyzing ingredients…” and “Considering restrictions…”
4. You can customize the text color for each line using HTML color codes between curly braces (eg. {#000000} for black text).
5. 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.

Anton and the inspirational group of humans at the Sozo Foundation with Peter (and his son), David, and Robey from Divi Engine.

At Divi Engine, our mission extends beyond providing exceptional products to our valued customers. We are driven by a deep desire to create a positive impact in the world. Four years ago, we embarked on a remarkable journey with the Sozo Foundation, a non-profit organization based in Cape Town, South Africa. This ongoing partnership holds a special place in our hearts.

Recently, our co-founder, Peter, accompanied by our dedicated team members David and Robey, had the privilege of visiting the Sozo Foundation’s campus. This visit provided a unique opportunity for our team to witness firsthand the transformative work being carried out by the Sozo Foundation within the Vrygrond community. The experience left an indelible mark on each of us.

For those unfamiliar with the Sozo Foundation, it serves as a beacon of hope in the face of immense challenges within the Vrygrond community. Overcrowding, limited resources, and high levels of unemployment are just a few of the obstacles they confront. However, the Sozo Foundation remains steadfast in their vision to see this community thrive with dignity, purpose, and hope. Their efforts are focused on three key areas: education, skills development, and enterprise.

During our visit, we were profoundly inspired by the unwavering dedication, passion, and warmth exhibited by the Sozo staff. Witnessing the positive impact they are making in the lives of the local youth was truly uplifting. We were treated to delightful coffee and a delectable lunch, skillfully prepared by students from their barista and chef school. This tangible display of practical skills being imparted and the potential for creating sustainable livelihoods was truly remarkable.

One of the most memorable moments of our visit was when Peter had the honor of hosting a panel on entrepreneurship at the Sozo Foundation’s Genesis Incubation Hub. He shared the incredible journey of Divi Engine, recounting the challenges we have overcome, the successes we have celebrated, and the key elements crucial to building a thriving business. Engaging with the participants, answering their questions, and perhaps igniting a spark of inspiration for their own entrepreneurial paths was an experience we will forever cherish.

However, our partnership with the Sozo Foundation extends far beyond financial contributions. As a digital company, we recognize the profound importance of digital literacy and skills in today’s world. In an effort to bridge the digital divide, we have provided the Sozo Foundation with our comprehensive suite of plugins and a lifetime membership to the Divi Theme. This contribution equips the participants of the incubator program with the necessary tools to build their own websites, showcase their ventures, and develop invaluable web development skills that are highly sought after in today’s job market.

As we reflect on our four-year partnership with the Sozo Foundation, we want to express our heartfelt gratitude to our esteemed customers at Divi Engine. Every purchase you make contributes to this incredible cause. Your support extends beyond acquiring powerful plugins or a versatile theme for your projects – it plays a vital role in transforming lives within the Vrygrond community.

If you would like to contribute directly, please click the button below.

Donate directly to the Sozo Foundation

Your impact over the last 6 months alone:

HOURS

dedicated to tutoring school kids

SKILL COURSES

taken by school kids which last 10 weeks

MEALS

served to school kids

CONNECTED

to the internet to help with research projects

EDUCENTRE SESSIONS

that provide tutoring and mentorship to highschool students

TRAINING SESSIONS

teaching students skills to become a baker.

More Information on the Sozo Foundation

So, when you utilize a Divi Engine product, remember that you are part of something much greater. You are an integral member of a global community that is effecting real change. Your support enables us to continue our contributions to the Sozo Foundation’s mission and empowers the youth of Vrygrond.

We take immense pride in our ongoing partnership with the Sozo Foundation and eagerly anticipate witnessing how our contributions will continue to inspire and bring about positive change in the Vrygrond community. Stay tuned for further updates on our partnership, and once again, we extend our heartfelt appreciation for joining us on this meaningful journey.

Peter tells the group about how to start and run a successful business.

The group was not missing a word while Peter spoke and answered questions.

Of course Robey had to butt in.

We got some amazing questions from these bright minds.

Peter emphasizing the importance of taking risks and hard work.

Robey butts in again sharing his insight.

Peter and David discussing the awesome facilities.

The real stars at the Sozo Foundation are the staff like Anton, Stephanie, and Nigel.

The post Divi Engine’s Visit to the Sozo Foundation: Where Every Purchase Makes a Difference appeared first on Divi Engine.

The post Feature Update: ChatGPT for Divi Form Builder is available now! appeared first on Divi Engine.

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.

<h1>Smoothie Making Guide</h1>
<p>Follow these steps to make a delicious fruit smoothie:</p>
<ol>
  <li>First, gather your ingredients. You'll need fresh fruits of your choice, yogurt, and ice.</li>
  <li>Add the ingredients to your blender. Start with the fruits, then add the yogurt, and finally the ice.</li>
  <li>Blend until smooth. The exact time will depend on your blender's power and the amount you're making.</li>
  <li>Enjoy your fresh, homemade smoothie! Experiment with different fruits and proportions to find your perfect blend.</li>
</ol>

{
  "Name": "John Doe",
  "Age": 35,
  "Email": "jo******@ex*****.com",
  "Location": "San Francisco, CA"
}

<h1>Guide to Brewing the Perfect Cup of Tea</h1>
<p>Follow these steps for a refreshing brew:</p>
<ol>
  <li>Boil **fresh** water in a kettle.</li>
  <li>Place a teabag in your cup. The type of tea is up to your preference.</li>
  <li>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.</li>
  <li>Remove the teabag, and enjoy your tea as is, or add milk, sugar, or lemon to taste.</li>
</ol>

The post Mastering the Art of Formatting ChatGPT’s Responses appeared first on Divi Engine.

In our constant pursuit to streamline and simplify the website development process for our users, we’re thrilled to announce the introduction of our premade Loop Layout Templates for our Archive Loop modules in Divi BodyCommerce, Divi Machine, and Divi Ajax Filter.. This new feature is designed to make your development process not just faster, but also more efficient and intuitive.

Our Loop Layout Templates come in a range of styles to suit your needs, including Divi Shop Style, Divi Blog Style, and Background Image. The best part? We’re not stopping here – we have plans to expand this list with even more templates in the near future.

For those of you who are seasoned developers with PHP coding skills, we’ve got you covered too. You’re more than welcome to add your own custom loops to these templates if you’re seeking more control over your website’s look and feel. More on that in the documentation.

One of the key advantages of leveraging these Loop Layout Templates is the potential to significantly speed up your page loading time. By using these templates, you can reduce the loading of extra CSS generated by Divi, resulting in a smoother and faster user experience.

We’re incredibly excited to launch this substantial feature and can’t wait to see how it helps our users jumpstart their site-building process with our plugins.

The good news doesn’t end here – these updates are available right now! All you need to do is simply update your plugin or download it from the ‘My Account’ area on the Divi Engine website. We’re looking forward to seeing the incredible websites you’ll create with this new feature!

Play

Divi Loop Layout Templates Demo

Divi Loop Layout Templates in Action



Attention

Before you do anything, these are BIG updates and could cause issues if you are updating from older versions. Please backup any production sites first, or test the updates on a staging server first to make sure nothing breaks.

BodyCommerce Changelog

Machine Changelog

Ajax Filter Changelog

What? You don't own a license yet?

Enhance your Divi tools with List/Grid Switcher in Divi BodyCommerce, Divi Machine, and Divi Ajax Filter today!

Or even better…

Get a Divi Engine Membership

The post Feature Update: Loop Layout Templates for Divi has been added to multiple plugins appeared first on Divi Engine.

The post Crafting an AI Persona for ChatGPT to get better responses appeared first on Divi Engine.

Hey there, guess what? We’ve got some thrilling news for you! We’ve just introduced a game-changing feature called the List/Grid Switcher to Divi BodyCommerce, Divi Machine, and Divi Ajax Filter. We had you, our beloved users, in mind when we crafted this nifty addition that’s about to revolutionize your website-building journey.

So, what’s the deal with this List/Grid Switcher? Well, it hands you the power to smoothly switch between list and grid views for your posts, products, and custom post types – how cool is that? But wait, there’s more! This feature also spices up your grid view with a handy ‘Read More’ button, and it jazzes up your list view with a snippet of text followed by a ‘Read More’ link. Thanks to some CSS wizardry, there’s no need to worry about double-loading elements on your screen anymore.

The real magic of this feature lies in its dedication to customization. It comes loaded with a bunch of CSS classes designed to give you extra control over your modules. These classes help you tweak the display of specific elements based on whether you’re in list or grid view.

Want a little sneak peek of what this feature can do? Check it out below.

Divi List/Grid Demo

We’re super pumped to bring this innovation to Divi BodyCommerce, Divi Machine, and Divi Ajax Filter. We’re confident that it’ll not only make your site-building process a breeze but also offer your website visitors a more captivating browsing experience.

This is probably the most ambitious update in Divi Engine history, so, why not give the new Divi List/Grid Switcher a whirl and see the difference it adds to your Divi toolkit? Your thoughts matter to us, and we’re all ears for the inventive ways you put this feature to use! Just update to the latest versions or download it from your My Account area TODAY!

Divi List/Grid Switcher in Action



Attention

Before you do anything, these are BIG updates and could cause issues if you are updating from older versions. Please backup any production sites first, or test the updates on a staging server first to make sure nothing breaks.

BodyCommerce Changelog

Machine Changelog

Ajax Filter Changelog

What? You don't own a license yet?

Enhance your Divi tools with List/Grid Switcher in Divi BodyCommerce, Divi Machine, and Divi Ajax Filter today!

Or even better…

Get a Divi Engine Membership

The post Feature Update: List/Grid Switcher for Divi has been added to multiple plugins appeared first on Divi Engine.

The post Enhancing Your ChatGPT Experience: A Comprehensive Guide to Introducing Your Products or Services appeared first on Divi Engine.