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

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

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

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

What is Divi AI, and what can it do?

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

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

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

Image Creation

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

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

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

Crafting Top-Notch Copy and Content

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

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

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

Creating Contextual Content

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

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

Enhancing Existing Content

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

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

Maintaining Brand Consistency

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

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

Time Efficiency

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

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

Seamless Integration

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

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

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

The Road Forward

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

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

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

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

Divi AI vs ChatGPT vs Midjourney

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

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

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

Divi AI (free then from $14.40 pm)

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

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

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

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

ChatGPT (free or $20 pm)

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

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

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

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

Midjourney (from $10 pm)

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

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

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

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

Key Takeaways

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

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

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

The Controversy

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

Compaint #1

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

Complaint #2

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

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

The bottom line is this.

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

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

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

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

Our Verdict

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

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

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

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

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

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

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

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

Keeping your small business relevant and successful is anything but easy. Between managing employees, keeping the books in order, and maintaining quality customer service, it’s hard to find time to stay up-to-date with the latest technology.

You might think the newest tech is just too expensive and out of reach for your small business. But the truth is that investing in the right kind of tech can pay off big in the long run. Below, Divi Engine explains why investing in small business technologies is worth the upfront costs, and we touch on a few technologies that could benefit your company team the most.

Enhances Cybersecurity

Investing in cybersecurity is fundamental for any modern small business. Smaller companies must take measures to protect sensitive data, files, and digital accounts. With cloud-based security solutions and advanced technologies (e.g., encryption software, firewalls, virus protection, etc.), your team can take proactive steps to mitigate risks and eliminate vulnerabilities, ultimately protecting against data breaches and other cybercrimes.

You can also boost security by using password-protected PDFs, which can prevent unauthorized access to sensitive information and maintain your data’s integrity. That said, sometimes you need to edit PDF files; this takes up valuable time (and energy) when you don’t have the right tech.

With a PDF-to-Word conversion tool, your small business can quickly and easily edit PDFs in Microsoft Word and then save the files as password-protected PDFs before sharing them. Doing so will ensure your documents remain secure while still allowing for the necessary modifications. Converting your PDF to a Word file for free is simple:

1. Choose the right conversion tool.
2. Upload your PDF into the tool.
3. Convert a PDF to a Word document.
4. Make your edits.
5. Save the document as a PDF.

Moreover, you can enhance your website’s security by incorporating Divi Engine’s fantastic plugins and extensions into the site-building process. Along with making the entire experience easier and faster, our plugins will help ensure your site remains secure and trustworthy for your customers!

Saves Time and Increases Efficiency

Time is a precious commodity in the business world. Any technology that streamlines daily tasks can save you hours each week. Simple things like automated email responses or using inventory management software can free up time for you to focus on meeting milestones and growing your business.

In turn, the increased efficiency can help your employees work more productively. Video conferencing, project management platforms, and other technologies can boost collaboration and communication between team members — no matter where they’re located.

Increases Customer Satisfaction

Technology can also help to improve your customer service. Investing in a website with a responsive design and easy-to-navigate layout can make a significant difference in how customers interact with your business. Also, look into online appointment scheduling, live chat, and social media customer service to create a better customer experience that distinguishes your business from the competition.

Provides Detailed Analytics

Tracking and analyzing data can work wonders for any business, especially when you gather valuable information to make more informed decisions and overcome obstacles. Analyzing data from social media campaigns, website traffic, and sales reports can reveal what your customers are looking for and the impact your current marketing strategies are having. Thus, you can adjust your business approach and improve overall performance.

Fosters Innovation

Technology enables small businesses in all industries to stay ahead of the game and remain competitive. Investing in new software, hardware, or services will let your team test new markets and products, experiment with different business models, and take other steps while optimizing processes. Seek this kind of innovation so that your team can respond to changing customer preferences and trends while gaining a competitive edge and breaking through a crowded industry!

Conclusion

You may be intimidated by the prospect of investing in technology, but it’s crucial for small business growth and success. You can modernize customer service with chatbots, upgrade your productivity software, analyze more data, and take many other steps to make a significant difference in your operations.

In the long run, these investments will boost efficiency, customer satisfaction, and revenue. In other words, your business will be in a better position to scale and capture the competitive edge that everyone else is seeking!

Would you like to read more helpful content or learn about our superior WordPress plugins and extensions? Visit DiviEngine.com today!

Cody McBride

Cody McBride is the creator of TechDeck.info where he offers easy-to-understand tech-related advice and troubleshooting tips.

People who own a website must be able to identify what they want their site to do and how they want it to look. They should also keep in mind how it will be by users and what kind of content it will display.

Poor web design can lead to a bad user experience and decreased customer engagement.

It may lead to decreased customer engagement because it fails to provide an engaging user experience. It may also lead to low conversion rates and unsatisfied visitors that leave without buying anything. Therefore, you must ensure that your e-commerce website’s web design fulfills your goals while providing a positive experience to your visitors.

Since you’re more aware of how bad web design can affect your e-commerce website, it’s a good idea to inform yourself of the importance of excellent web design too. That way, it can solidify your reasons for investing in it in the first place.

With that in mind, this article shows how excellent web design can impact an e-commerce website, so read below to know more.

First Impressions Matter

First impressions aren’t just for human to human interactions as they are also crucial for your e-commerce website. With an excellent first impression, customers can connect with the brand and trust you.

The importance of first impressions is wider than physical stores. You can also apply it to online stores. A wrong first impression from an online store could lead to customers losing trust and going elsewhere for their purchase.

First impressions are created through various methods such as color, design, layout, etc. They result from the aesthetics of your website’s design and content and its usability. If you want to improve your first impressions, you should consider these factors when designing and developing your site.

Your web visitors have instant reactions and impressions when they click on your website. If it loads too slowly, they click away from your website fast. If the website seems duplicitous or doesn’t have a great web design, they can click away instantly as well.

If you fix your web design well, it can help avoid these instances. The last thing you want is to have a potential customer interested in your website, but they click away as soon as possible after seeing it.

Brand Identity

When you start your own e-commerce website, it’s a good idea to invest in your brand identity because it’s a long-term investment into your business that will pay off when it comes to enticing potential customers.

Brand identity is a way to express your company’s personality and values through visuals and other actions.

You should invest in your brand identity when you start a business for many reasons. One reason is that it gives you an edge over your competition. It also helps you establish a strong presence online and offline, so when someone has to choose between your products and a competitor, it becomes easier for them to choose you over your competitors.

With a distinct brand identity, your brand and your products become more precise and recognizable. When you’re more recognizable, potential customers will want to choose your products more over others, regardless of whether they’ve used your products or bought them before.

User Experience

User experience is the satisfaction and enjoyment of a user when interacting with a website. When you design your website, it should be mindful of the overall user experience.

Web design is not just about aesthetics. It should also help users to find what they are looking for on your site. A good web design can guide users through your content and inform them about your product or service.

The most significant benefit of excellent web design is improving conversion rates for e-commerce websites. In general, it makes your website a more pleasurable experience for people interacting with it in any way, which is always a good thing.

Trust and Credibility

Websites that are appealing to the eye and easy to navigate are generally more trusted. Research shows that customers tend to trust an attractive website with a clean design and easy to navigate.

When your web design for your e-commerce store is attractive and intuitive, customers are more likely to stay longer on it. Please don’t make it too cluttered. Don’t overload a page with too much information, especially at first glance. Together, these can help you create a great web design for your e-commerce website.

Competitive Advantage

Your website is the face of your business. Therefore, you must ensure that your web design will make your business stand out in your industry. One way to do that is by sticking to your consistent brand identity.

The design can considerably impact your customer’s experience and the success of your business. The web design has to be appealing, informative, and engaging so that people want to visit your site over others.

A great web design will help you stand out from the competition and give you an advantage over other businesses in your industry. It can already elevate your business’ reputation outside of beginner businesses.

Boost Sales

When you have excellent web design, your web visitors are more likely to stay on your website longer. Since they’re on your website for a longer time, they are likely shopping from your e-commerce website.

Also, as mentioned earlier, excellent web design can improve your branding strength, which will help you boost sales overall.

Since you’re a business, after all, a boost in sales is always something that you should strive for. Thus, it’s a no-brainer that you should take the time to invest in excellent web design.

Conclusion

Excellent web design isn’t just about making a pretty website, even though that’s also why you can reap these benefits. Given these benefits, you shouldn’t wait or be careless about your website design. Take the chance to reap the benefits of excellent web design to further improve your e-commerce website’s success.

Social media is a powerful tool for businesses looking to build brand awareness, engage with customers, and drive sales. However, creating engaging social media content can be a challenge, especially when you’re competing with millions of other businesses vying for attention. That’s where GPT chat prompts come in.

By leveraging the power of GPT chat prompts, agencies can create compelling social media content that resonates with their audience and helps them stand out from the competition. In this blog post, we’re going to provide you with a free cheat sheet that will show you how to:

• Boost your social media presence
• Save time and effort
• Gain a competitive edge

GPT Chat Prompts are AI-powered prompts that can help designers generate ideas, brainstorm solutions, and even write copy for their websites. By leveraging the power of artificial intelligence, designers can speed up their workflow, improve their creativity, and ultimately deliver better results for their clients.

In this cheat sheet, we’ll explore the benefits of using GPT Chat Prompts for web design.

• Firstly, GPT Chat Prompts can help designers save time by automating repetitive tasks and generating ideas on the fly.
• Secondly, they can improve the quality of design work by suggesting new and innovative solutions that designers may not have thought of otherwise.
• Finally, GPT Chat Prompts can help designers overcome creative blocks and generate fresh ideas, leading to more successful design projects.

In this cheatsheet, we’ll show you how to use GPT chat prompts to boost your web design agency’s marketing results, without spending a lot of time or resources. We’ll provide you with a free cheatsheet that includes a selection of GPT chat prompts you can use to:

• Write ad copy that resonates with your target audience and drives more clicks and conversions
• Find relevant keywords for your website and ad copy using GPT chat prompts and other AI tools
• Create email campaigns and sequences that are more personalized and engaging, using GPT chat prompts to generate copy and conversation starter

By following these tips and using our free cheatsheet, you can start using GPT chat prompts to boost your web design agency’s marketing results in a variety of channels and formats.

Ready to get your FREE Cheatsheet and start using GPT chat prompts to engage your website visitors and generate more leads? Just sign up and download it now!

Google introduced featured snippets as a way of improving users’ satisfaction by providing an immediate answer to their search queries.

The research shows that featured snippets account for a 35.1% share of all clicks. So, it’s not a surprise that websites that appear in this part of the SERP get better click-through rates and increased revenue from organic traffic by an astonishing 677%.

That being said, it is important to know that Google will consider your content for featured snippets only if you already rank in the top 10 results on their first page.

How do you secure this sweet spot on Google’s SERP and enjoy the benefits that come with it? This is where we come to the rescue with our top five strategies that will help you optimize your content for Google featured snippets:

What is Google’s featured snippet?

A Google featured snippet is a brief informational passage that provides a direct answer to the user’s search query. What is unique about featured snippets is that they always appear above position #1 in Google’s SERP, thus practically taking “position zero.”

For example, if you type ”What are Google featured snippets?” you’ll get this result:

What is Google’s featured snippet?

There are four types of featured snippets:

1. Paragraph
2. List
3. Table
4. Video

1. Paragraph

Paragraph snippets usually provide the answers to “how”, “how-to”, “who”, “why”, and “what” questions from your search queries. This type of featured snippet is the most common and encompasses 50% of all snippet results.

These questions can be anything from “How to find IP address” to “Why do cats purr?”

2. List

Lists can appear in numbered or bulleted form, and they usually pop up when you search for some kind of step-by-step guide.

For example:

Lists are the second most common type of featured snippets, encompassing 37% of all snippet results.

3. Table

Tables normally appear when your search query involves data or other information that is best presented in a table format.

4. Videos

Google usually displays videos (mostly from Youtube) as an answer to the “how-to” search query.

You will also notice that Google offers a ready-to-play time stamp so that you can skip the intro and play it from the specific part that directly answers your “how-to” question.

Now that you know what feature snippets are and what types exist, let’s get back to optimizing your content for that prized “zero position”.

Keywords that are made up of 10 words trigger 55.5% of featured snippets, while a single keyword triggers only 4,3% of featured snippets.

Let’s say you run an optical shop. Going after a keyword like “Glasses” probably won’t secure you the position on featured snippets. You need to expand your keyword to match the search intent as specifically as possible.

For example, if you offer an authoritative answer to the “How to read an eye prescription” question, you will have a better chance of appearing in featured snippets. This will help you get more quality traffic as it responds to a specific intention behind the search query from users who are closer to the converting point.

You should also pay attention to keyword difficulty (KD). KD is an SEO metric that shows how difficult it is to rank for a specific search term. The lower the keyword rank, the higher your chances are of appearing in featured snippets.

For this purpose, you can use some of the available online tools for calculating KD, such as Semrush or KWFinder.

If you are running a pay-per-click (PPC) campaign, you can always use your best-ranked pay-per-click keywords to optimize your content for featured snippets.

It’s not all about keywords, you will also need to adjust the format of your content to fit featured snippets, and here is how:

• Opt for descriptive headers – make sure your headers contain long-tail and question-based keywords and don’t forget to provide the answers directly underneath them.
• Use simple and short sentences – don’t overcomplicate your content with long, technical terms. Use everyday language that every average user understands.
• Include numbered or bulleted lists along with tables and graphs – these are the formats that trigger featured snippets, so use them whenever it’s possible.
• Use between 40 and 60 words for paragraph-style snippets
• Make sure to date and update your content – 70% of featured snippets are posted within the past 2 to 3 years.

Don’t forget to include appropriate HTML markups to help Google better understand your content structure.

• Use <p> tags for paragraph snippets
• Use <table> tags for table snippets
• Use <ol> and <ul> tags for listicles

The research performed by The STAT Team shows that some words trigger featured snippets more than others. Another research conducted by Semrush reveals what question-type keywords trigger snippets the most.

According to this research, these five questions appear in featured snippets most frequently:

–  “why” – 77.63%

–  “do” – 67.54%

–  “are” – 67.51%

–  “how” – 65.27%

Other words like “does”, “will”, “when”, “is”, and “what” also appear in more than 50% of featured snippets triggered by question search queries.

These words reveal the user intent behind a search query, so make sure you use them when you create your question-based keywords for content.

Generally speaking, making your content SEO-friendly will help Google understand what your page is all about. Some SEO tactics can increase your chances of appearing in featured snippets, such as:

• Proper URL structure – ideally, your URL should contain 2 to 3 words.
• Captivating title tag – create a catchy title and make sure it fits the pixel requirements (160x200px). For this purpose, you can use tools such as Coschedule Headline Analyzer, which can help you find the perfect title.
• User-centric meta description tag – user-oriented and keyword-specific meta description tags typically drive more clicks.
• Optimize image Alt attributes – make sure you use descriptive alt text for all your graphics and images. This will help Google understand your content better.
• Include internal links – this will help Google identify your most important pages and you can use them to support the rankings of your most valuable pages as well.
• Engage in link building – this is important for setting yourself as an authority in your field.

Try typing the main keywords that you have optimized for featured snippets and see who is currently claiming position zero. Observe their content structure and what markups they are using.

Then go back to your content and make a comparison. Is your content structured the same way? Does it answer the user’s question clearly?

Finally, try to focus on how you can deliver the desired information better than your competitors so that Google reconsiders your content for a featured snippet opportunity. You might not succeed on the first try, but be persistent and keep on improving your content until you make it.

Is optimizing for featured snippets worth all this trouble?

The short answer is–yes! Ranking zero on Google’s SERP comes with many benefits, including:

• Increased organic traffic
• Better click-through rates
• More authority
• Boosted brand image and visibility

All these benefits come from the fact that Google’s featured snippets are easier to see and are placed at the very top, even above the organic results. This instantly triggers more trust from

people, plus some of us are too lazy to scroll down to other results, so we always click on the first page that pops up, providing it offers exactly what we are looking for.

Key takeaways

More than 50% of the mobile screen gets covered with a featured snippet, and when we know that more than 64% of all search queries are done from mobile devices, it gives a whole new dimension to the importance of appearing in snippets.

If you want to have a chance of popping up in the featured snippets, make sure you have the right keywords sprinkled with the popular “trigger” words.

Adjust your format to fit featured snippets and ensure you use all SEO tactics that can help you with this endeavor.

Lastly, take a peek at what your competition is doing and try to find ways to outrank them with more useful content.

We hope our article provided you with everything you needed to know about Google featured snippets. More importantly, we hope that our tips will help you take that biggest “piece of the pie” in Google’s SERPs.

With smartphones in everyone’s hands, it is quite impossible now to avoid making a website mobile-friendly. Over 50% of people use mobile devices to search for information and data. Having a responsive website design is a best practice that everyone who designs a website should consider in today’s world.

Using responsive design, a site or application adapts to the device or environment it is being viewed on. When it comes to building websites, it’s a combination of several CSS and HTML features and strategies.

In this blog, let us take a look at how you can make a mobile-friendly website responsive design in Cascading Style Sheets or CSS.

How to make a mobile-friendly website in CSS?

When it comes to web design, CSS stands for “Cascading Style Sheets.” Written in a markup language or a coding language such as HTML, it is a language called a style sheet that is used to describe the display of a document or a page. An HTML element’s appearance on a screen, paper, or other media can be determined using CSS.

Let us understand how to make a mobile-friendly website in CSS by dividing the website design into layout, media query, image responsiveness, and typography.

Before you begin, create a new project and also download a few images so that you can start from scratch. Let us get started with the layout.

Layout

If you have a domain name, you will want to assign it to your store. This can be done by going to the “Domains” tab and clicking on the “Add Domain” button. 

You will then enter your domain name and click on the green checkmark. Your shop’s URL will now be: example.com

If you don’t have a domain name, don’t worry! You can use a free subdomain from WooCommerce.com. 

To do this, go to the “Domains” tab and click on the “Add Domain” button. Then, type in your desired subdomain (for example, myshop.woocommerce.com) and click on the green checkmark. 

Your shop’s URL will now be: myshop.woocommerce.com

The fr unit is what enables the distribution of available space across grid tracks in the CSS Grid Layout specification. To generate a grid container that has three tracks that are each 1 fr in size, follow the code in the image below.

Media Query

What are media queries? In order to create a website that is responsive, media queries are an essential component.

Media queries give you the ability to build various layouts based on the size of the viewport that you are working with. They can also be used to determine other aspects of the environment in which your website is operating.

Once the layout is set, you can proceed to the step of adding media queries. The media queries will highly depend on the layout that you make. So the code will also be unique to your layout.

Adjust the layout by setting points according to the size proportions and orientation. It is also a good idea to make your page suitable for different screen sizes by adding multiple queries within a stylesheet. When a media query is inserted, and the layout is altered, it is called a breakpoint.

Here, as we are discussing making the website mobile-responsive, you can use the mobile-first approach. Try out single-column layouts that can be a good fit for mobile screens.

Images

You will be using a lot of images for your website. You must make sure that the media you use, be it images, videos, etc., are responsive as well.

One way to make sure that your image is not bigger than the parent container is by using the code given below:

In addition to providing several sizes, you may also supply “hints” or metadata that defines the screen size and resolution the image that is most appropriate for. The browser will then select the image that is most suitable for each device, guaranteeing that the user will download an image of a size that is suitable for the device that they are using.

Typography

Typography is an important part of website design. The font sizes were defined earlier using pixels, but a responsive website needs a responsive font. For this, ‘rems’ are used.

Rems are relative to the HTML element and are also user-friendly. You can start off with making responsive fonts by resetting the HTML font size.

Wrapping Up

The rise in popularity of online channels has necessitated a shift for businesses to utilize digital platforms in recent years. In today’s world, websites serve as a one-stop-shop for consumers to learn about and purchase their products, voice their opinions, and get support if needed.

In such a scenario, it is important that you make a responsive web design that can help your audience view your website on all kinds of screens. This blog was all about making a mobile-friendly website responsive design in CSS. I hope this helped you in getting started with making responsive websites.

Author: Danish Wadhwa

Danish Wadhwa is an Entrepreneur and Growth Hacker with more than ten years of expertise in Data Driven Marketing. He is a high energy individual fueled by his passion for helping businesses grow Digitally. Danish is a Fountainhead and CEO HubSpot Marketing Agency webdew and He took everything he learned in his career to help Businesses learn from his Growth Marketing Blog at webdew.com/Blog.

Working Remotely Today

Us elder-millennials were just accustomed to that not-so-gangster cubicle lifestyle where you get up for work and then go somewhere. We saw our parents do it, we saw our grandparent’s parents do it, and we just did not know any different. Remember the days when your career goals were all steps towards the illustrious corner office? Yeah, so do I.

This is not entirely your fault though. Managers who crafted their entire style of coaching and communication around that personal touch of face-to-face meetings, also started to struggle with learning to manage their remote team. Gone are the high-fives, handshakes, and other pleasantries, quickly replaced with “You’re on mute, Karen!”. So now, are you a bad manager if you struggle with remote team engagement or motivation?

Of course not!

The underlying truth here is that managing a remote team for the first time can be is incredibly hard. But help is out there! There is an abundance of remote team communication and management tools out there with the primary goal to make working remotely easier, and managing your remote teams more effective and engaging.

In this article, we want to share our experience, and introduce you to a tool we love which has solved many of the common issues experienced by remote teams.

Say hello to Cosmos Video.

Does Divi Engine Work Remotely?

Working remotely is certainly not a new concept or practice, it has been enjoyed by designers and coders since the dawn of the internet. That kind of makes me sound like a dinosaur…cue the dialup modem sounds.

Ahhhh the nostalgia…

Back to the point. This is no different at Divi Engine, our team is 100% remote which is spread out over different time zones and continents. Now, there are definitely different types of remote teams and this has become more and more opaque as managers navigate this giant “traditional work” ship steered by that covid rudder to explore the new world of working remotely. I kinda feel like there is an animated Disney movie title in there somewhere…

Types of Remote Teams:

• The battle-hardened freelancers and teams that have been doing this since freelancer.com launched in 2009 which are usually coders or designers (100% Online).
• The tech startups inventing your next dopamine-riddled app that require in-office meetings once a week which are product managers in-house designers or coders (80% Online).
• The “traditional” flex-work office arrangement which is usually your accountants, analysts, etc (50% Online).

Divi Engine falls into that first category of remote teams. While we have only been around for 5 years, we have been 100% remote from day 1 and have tried and failed (to a degree) at remote team management. So if there was a mousetrap to step on, we did it already.

Currently, we are a team of 7 full-time employees from South Africa, Vietnam, Mexico, India, and Canada. With ½ of our team going to sleep when the other ½ started work, it made things complicated getting departments together as a team for meetings, or just hanging out for a bit. And with the company growing at the rate it is, we needed to find a solution to streamline not only our meetings, but we also had to solve keeping our remote team engaged as well as managing the team efficiently at scale.

Our Struggles with Working Remotely

We can talk about the common snags with remote teams, but there are 100 better-written articles on the topic, so we will focus on our personal experience working as a remote team here at Divi Engine. I mentioned mousetraps earlier and our skilled approach to stepping our foot in them. This is not a lie. We tried many solutions in solving the challenges of managing a remote team.

This involved the unique approach of Zoom calls in tow with the hive mind, but this involved emailing meeting links, some people not being available, seeing links late, and just a clunky-feeling experience to managing meetings. It was too laborious and probably very disengaging for the team. Do less of this, and do something else…

Next up was an app for remote teams called jitsi. Jitsi is much like Zoom, but this provided us with a single URL where we could check-in for a quick meeting if need be, or run our scheduled meetings with a little less friction because friction sucks. And this worked for a while, but it always felt lacking in some ways, like the personality of that Tinder date that ghosted you. When I joined the Divi Engine team a year into covid I found myself 6 months late still feeling like I barely knew any of the other team members, except for Peter, who I connected with pretty often.

We were now starting to diagnose these symptoms and coming to the reason why all of this felt so disconnected. Yes, ironic, as working on a remote team with people you’ve never shook hands with is by nature rather disconnected.

This had us adjust the search parameters from “remote team communication tools” and about 5 variants thereof, to a simpler more obvious one, “virtual office space”.

Eureka! We found Cosmos Video…

What is Cosmos Video?

So let’s back up a bit and tell you exactly what Cosmos Video is in our own words.

In the simplest sense, Cosmos Video is a virtual office building where your remote team can stroll in at the start of their workday and pick a comfy spot to work…on the internet. I know, it sounds crazy, but it will sound weirder in a second.

The virtual office space is a top-down pixel RPG experience that is reminiscent of the original Zelda games…with cyborg cats and dinosaurs as pets and as well as epic snowball fights.

Told you.

This is no Slack! (we love Slack too btw) What sets it apart from other services like that, Zoom, and the tools that we have tried, is that piece of pixelated real estate that is our virtual office. You can walk around and visit different working areas and use the proximity chat to communicate with your coworkers. Then, when need be, you can do a quick screen share to ask for opinions on a feature or design, or you can challenge somebody (or the entire team) to a game of battleship. Which can be pretty hilarious.

The Cosmos team is not far off when they market themselves as “The happy meetings tool designed for remote teams”. It shows.

It features integration with Slack, Google Calendar, and even Spotify so that my teammates can also bob their heads to some of my excellent taste in music. On top of that you can leave video messages for team members that are busy at the moment, collaborate on whiteboards, and so much more.

So, let’s talk about pricing.

Cosmos is free, ya, free, for teams of up to 5. Pricing goes to a per-user model after that which introduces extra features, capacity, and customization options. Even then, all subscriptions come with a 30-day free trial, so the risk factor is nada.

Check out the pricing options (as of April 15th, 2022):

How a Virtual Office Transformed our Remote Working Culture

Upon finding Cosmos we immediately fell in love with how amazingly simple and intuitive it is. These characteristics made it easy to introduce to the team and quickly became part of our daily routine. What really solidified Cosmos as part of our daily work life is the ability to just casually socialize with your fellow grafters, and actually get to know the person behind the support ticket processing beast or the code ninja. When working remotely it is so easy to forget the simplicity of walking up to someone you work with and getting to know who they are outside of work.

Then there are the games. It is already tradition here at Divi Engine that after we had a suuuuuuper serious meeting or fun celebration, we then head over to the games table to play some of the 15+ (wow!) games. An office favorite is poker of course, but recently the Telephone game gained some traction as it yielded some interesting but mostly hilarious results. Tons of laughs, check the result below of our last game a couple of weeks ago.

When the fun and games are over and we remember to get some work done before the bossman uses the intercom feature to focus the group, we use the integrated tools during meetings to collaborate on a new level. It is not the exception to do a quick screen share in a conversation to quickly point out a bug in a plugin, or get a design approved. It all just feels really seamless. Like you really are in the same space. And if you are meeting with Fernando, you are bound to get a couple of snowballs to the dome when the meeting is adjourned.

Personally, when we started rolling Cosmos into our daily workflow, I was somewhat apprehensive. My concern was that this might feel like an employee monitoring tool, but that could not be further from the truth. I was surprised by the fuzzies I felt each time a coworker in a different timezone “walked” into the office to start their day. It makes the space feel alive, it makes working remotely feel less solitary. Speaking of making the space feel alive, we even have a couple of pets running around.

Meet Frank and Drip.

Is it concerning that I really dig them being around, these digital pets that live on the internet, on those odd moments when I’m alone in the office? Nahhhh…right?…Guys?

No, Impossible, I know I’m not alone because perusing the feedback forums you quickly see feature requests for being able to summon the pets or feed and pet them, if I am crazy, I have found my people. But, you’ll notice another thing, you’ll see how involved and responsive the Cosmos Team is. They are actively commenting and considering all the feedback and requests. In our 5 or 6 months on the platform, we have watched it evolve and get better with each update. That is what you want in a platform you are using, especially in a professional capacity with something as critical as the people that make it all happen, your team.

From a management perspective, it has been incredible to see our team become closer, share more, and engage more. We can really feel it here. Not only that, due to this easy access to coworkers, you see the teams take initiative beyond an ignored slack message or decomposing email. Multiple incredible initiatives such as our recent Q&A session for our Easter Sale have been conceived and delivered due to the innovative thinking and creativity the platform inspires.

Now I could go on for a while on this, but you get what I am throwing down. Cosmos has introduced a cultural shift in our remote working team that has made our remote team more efficient, engaged, and just made those (rare) workdays that suck, less sucky.

Gold star for Cosmos from the Divi Engine Team over here.

5 Ways Cosmos Video makes Remote Working Better

This list can absolutely be turned into a CVS receipt, but if we had to summarize, these would be the key points of how Cosmos Video improved how Divi Engine runs.

Working remotely can…get…WEIRD

Conclusion

So, if it has not been extremely clear, Cosmos Video is a great tool to use for engaging remote teams. But not only that, Cosmos Video will make the workplace feel like a truly shared experience again. No matter the type of remote team you manage, or what remote communication tools you are currently using, you will add value with Cosmos Video.

And I should mention again, that the Cosmos Video Team did not solicit this article, we are just really frozen in that honeymoon phase with the “The happy meetings tool designed for remote teams”.

If you manage a remote team, you should totally take it for a spin, it’s free.

If you were struggling to figure out how to customize your LearnDash templates using your child theme, well, good luck!

Just Kidding!

It can be a pain to figure out how to customize your LearnDash templates with your existing Child Theme, we know this because we recently ran into this. Unfortunately, there are no real guides or documentation on how to customize your LearnDash templates, so we had to figure this one out, and thought we’d share.

Just follow along below and we’ll show you.

Steps to Customize a LearnDash Template

It is important to note that the steps might change depending on the LearnDash Theme you are using – but in most cases, all you’d need to do to customize your LearnDash theme is to change the name from ld30 to the name of whatever LearnDash Theme you are using.

Example 1

If you are overwriting: wp-content/plugins/sfwd-lms/themes/ld30/templates/lesson.php
The path in your child theme will be: wp-content/themes/child-theme/learndash/ld30/lesson.php

Example 2

If you are overwriting: wp-content/plugins/sfwd-lms/themes/ld30/templates/module/tabs.php
The path in your child theme will be: wp-content/themes/child-theme/learndash/ld30/module/tabs.php

Tired of working for someone else? Want to be your own boss? There’s never been a better time than right now. With the rise in popularity of online stores, it is easier than ever before to get started and make money doing what you love.

WooCommerce is a free and open-source eCommerce plugin for WordPress, which allows you to sell anything from digital downloads to physical products.

This article will show you how to prepare your WooCommerce store before it goes live so that you can start generating revenue as soon as possible!

1. Create a WooCommerce account

Create a free account at WooCommerce.com 

Once you’re logged in, click the big green “Build A Store” button on your left

Now that we have created our store and installed WooCommerce let’s get started setting up! First things first: Let’s set some basic settings for our shop, such as currency & location.

Under the “General” tab, you will be able to set your shop’s currency and location. 

2. Assign your domain to the store

If you have a domain name, you will want to assign it to your store. This can be done by going to the “Domains” tab and clicking on the “Add Domain” button. 

You will then enter your domain name and click on the green checkmark. Your shop’s URL will now be: example.com

If you don’t have a domain name, don’t worry! You can use a free subdomain from WooCommerce.com. 

To do this, go to the “Domains” tab and click on the “Add Domain” button. Then, type in your desired subdomain (for example, myshop.woocommerce.com) and click on the green checkmark. 

Your shop’s URL will now be: myshop.woocommerce.com

3. Make a plan

Before you make the changes to your store, sit down and do some planning. Come up with an outline for how much time each task will take and set deadlines in advance so that you know what needs to be done when. 

If tasks are completed early or late, it is better to have this information from day one rather than waiting until the end of a project before knowing where things stand. The longer a job takes, the more likely something can go wrong!

4. Check your hosting

One of the most important aspects of a successful online store is having good hosting. Make sure you have plenty of bandwidth and storage space, as well as a good uptime rating. 

If your site goes down often or is slow to load, it will not only frustrate customers but could also lead to lost sales.

There are many great hosts out there, so take some time to research and find one that fits your needs. Be sure to ask any questions you have before signing up, as hosting can be a confusing topic for first-timers!

5. Theme Options

This one may seem like a no-brainer, but it’s important to make sure your theme has the right options available for you. You should be able to select colors and font sizes to match your store’s branding. 

Also, take some time to look at all of the different layout settings available within each theme. 

Some themes will allow your products pages or blog posts to show up multiple times on the same page while others might not, so knowing this information ahead of time can save you valuable development time!

If you’re looking for a great theme then it is worth considering Dive Theme. Divi theme is very easy to use and beginner-friendly. 

It comes with over 50 different options for customization which can all be accessed by clicking on the “Theme Customizer” button in the top-right corner of your dashboard. 

Additionally, it has a huge selection of free & premium layouts available to help you get started quickly without having to design everything from scratch.

Not only does it have an incredible number of options, but the support from the Divi community is unbeatable. If you’re looking for a theme that will let you customize every little detail, Divi is definitely worth taking a look at!

You can also customize and style WooCommerce pages in Divi by Divi Body Commerce

Once you’ve chosen a theme, take some time to configure all of the settings so that everything is just how you want it. This will save time down the road when it comes time to actually start building your store!

6. Add Products

One of the most important aspects of any online store is having a good selection of products. Take some time to add as many products as possible and make sure they are well-categorized. You can also use Divi BodyCommerce Free Layout Packs to get your settings sorted.  

If you want a better look at WooCommerce pagination for your customers, then you can try Custom Pagination by Divi BodyCommerce. 

If you’re not sure where to start, try looking for products or services that are in high demand or that have a low competition level on Amazon.

When adding products, be sure to include all of the necessary information, such as product descriptions, images, and prices. 

It is important to create a different product page layout for each category, or even for each product which you can easily do by Divi BodyCommerce Single Product Page Builder

7. Add Reviews

We recommend adding at least a few reviews for each of your products. It can be somewhat intimidating to leave your first review on an online store if you have never done so! 

However, once you get started, the process will become much easier and more enjoyable over time. 

We also suggest letting new customers know that they can write their own reviews after receiving their order by including specific text in the product description area. 

This way, customers who may not feel comfortable leaving an official review will still provide feedback about how they felt about what they received from your store!

The best part about having user-submitted reviews is that potential customers who come across them while researching which store to buy from could end up buying elsewhere so it’s important to have as many reviews as possible.

8. Add Social Media Links

Adding social media links to your store is a great way to increase traffic and brand awareness. Make sure to add links for all of the major social networks, including Facebook, Twitter, Instagram, and Pinterest. 

You can even go a step further and use plugins like WooCommerce Social Login, which allow customers to log in and checkout.

Before officially launching your store, take some time to do a quick copy test. This means testing all of the different elements on your website, such as the buttons, text, images, and checkout process. 

It’s essential to ensure everything is working properly so that you don’t run into any problems once your store goes live!

Conclusion

There are countless other things that need to be done when setting up an online store, but these are a few of the most important ones. By taking care of these items in advance, you’ll be well on your way to having a successful online store!

Amy Williams

Amy is a writer living in New York. She is a fan of entrepreneurship, design, and writing.

Does your growing business need a website upgrade? Learn how premium plugins from Divi Engine can boost the power of your Divi website. 

As a freelancer, you work hard trading your hours for clients’ dollars. This can be a profitable venture with the right skills, but eventually, every freelancer runs into the same problem: You want to earn more, but you’re all out of time.

At this point, freelancers have two options:

1. Use your skills to land a high-paying full-time job, or;
2. Scale your freelance work into a business.

What’s the difference between freelancing and running a business, you ask?

Both freelancers and entrepreneurs enjoy flexibility, autonomy, and other self-employment benefits.

However, while freelancers work in their business, entrepreneurs work on their business. A business owner’s income isn’t limited by hours in the day because businesses have processes and systems to keep cash flowing around the clock.

If this all sounds out of your wheelhouse, take a detour before starting your business to go back to school.

You can take online classes in vital business skills while continuing to freelance. You’ll learn how to make data-driven decisions in operations, marketing, and financial management. If you’re ambitious, you can even earn an MBA in as little as 12 months.

Once confident in your skills, take these steps to scale your freelance work into a full-time business:

1. Standardize with systems and processes

Running a business involves a lot of tiny, time-consuming tasks.

Business systems take these tasks and turn them into repeatable processes. It’s this standardization that lets businesses hire and train employees while maintaining consistent results.

It also frees up your time to focus on working on your business, not in it.

Business processes to systematize include:

• Employee onboarding.
• Lead generation.
• Invoicing.
• Bookkeeping.
• Order fulfillment.

To establish systems, document every step in a process and identify strategies to streamline them.

Software saves time while reducing human error in repetitive processes. For example, an employee app like Connecteam keeps training modules, employee handbooks, and scheduling all in one centralized knowledge hub.

For project- and client-based businesses, project management software like Monday breaks down projects into discrete steps and tracks progress towards completion.

2. Delegate and Automate

If you’re responsible for every task in your business, you’re inevitably limited by your own time. Delegating lets you accomplish more overall and focus your energy on what you do best.

Hiring employees is one of the biggest things separating business owners from freelancers. However, you don’t need a full team right away.

Hiring an admin or virtual assistant frees up time at an affordable cost. As you grow, look for employees with skills complementary to your own.

You can also delegate tasks to technology using automation. Instead of hiring an assistant, use integration to automatically sync data across apps.

You can integrate Quickbooks Online with online banking and payment apps, connect your Square POS with inventory software for real-time stock visibility, and even integrate your CRM with marketing automation software to nurture customers through the sales cycle.

3. Run your business like a business

By that, we mean organizing yourself as a bonafide company, buying business insurance, upgrading your business website with Divi Engine, and taking other steps to protect yourself and your clients.

These steps give first-time business owners a lot of anxiety, but covering yourself legally is less complicated than you might imagine. You’ll need to:

• Register your business as an LLC or corporation.
• Apply for a federal tax ID (EIN) and state tax ID if required.
• Obtain business permits and licenses.
• Open a business bank account.
• Purchase general liability insurance.

Writing business contracts is another key skill you’ll need.

Proposal apps like PandaDoc and Proposify streamline proposal creation and contract signing with templates, document tracking, and digital signatures so you stay covered with less effort.

More than anything else, transitioning from freelancer to entrepreneur requires a shift in mindset. Instead of providing labor in exchange for pay, business owners build organizations that succeed with or without their active participation.

Don’t expect this transformation to happen overnight, but with vision, strategy, and persistence you can create a business that sustains you and itself.

Cody McBride

Cody McBride is the creator of TechDeck.info where he offers easy-to-understand tech-related advice and troubleshooting tips.

Even though the vast majority of your business is run online, there are real-world implications for everything you do on the internet. Fortunately, as a small business owner, running your business online is easy when you use the right tools, products, services, and software. Keep reading for a few quick tips on things you can do to ensure the success of your business both on and off of the web.

1. Make the e-shopping experience a seamless one

If you have an online shop, don’t underestimate the power of plug-ins that can help you customize and style the e-commerce experience for your customers. The Divi Engine WooCommerce plug-in is for you if you want a custom site that is rivaled by none. Not only do you get the option to create a visual that your customers can’t help but notice, you can also create a unique cart icon and make virtually any other modification you can imagine. This can lead to greater conversion rates and happier customers.

2. Establish your legal entity

As your business grows, you need to protect yourself, your employees, and your customers from issues that will, inevitably, arise. One way to do this is by establishing your LLC. According to GrowthLab, an LLC protects you by allowing you to maintain separate bank accounts and property owned by your business. You also won’t be personally liable for recklessness by your employees. If you have yet to register your company with the state, you can look into using a formation service, such as Zen Business. Your Zen Business contact will offer professional support as you go through the motions of establishing your business entity.

3. Institute workflow processes

Using workflow software helps you automate many processes. Many allow you to get through human resources, IT, and management functions seamlessly. This can save time and, more importantly, help you keep up with where everything is in your company’s pipeline. There are many different workflow management software programs available. Do your research to find one that has the capabilities your company needs.

4. Keep your site safe

While your website is unquestionably something you want available publicly, not all of the information on it should be. So, how do you keep the “backend” of your site safe from prying eyes? You password protect it! The Protect Plug-In can help you protect as many or as few spots of your website that you don’t want compromised.

5. Stay active on social media

Your website is crucial to your business’s existence, but so too is your social media presence. In as little as 30 minutes each week, you can plan postings on all of your social media sites for the next seven days. Later is a popular option that can even help you come up with new hashtags (which are important in how your customers find posts about your topics) and find out when your customers are most engaged.

6. Use a CRM

If you want to improve your customer service and customer satisfaction rates, boost customer retention, generate new business, and make your products and services more accessible all while boosting your marketing intelligence, you need a customer relationship management software. SuperOffice explains a CRM can do all of this and more while reducing your cost and increasing your sales. A CRM is essentially a central spot to store information pertinent to your customers so that you can be more responsive and reactive to their needs.

Conclusion

Many small business owners think that publishing a website on the internet is all they need to create success. The truth is that there is much more to it than that. However, everything you do online affects your brick-and-mortar, so don’t just launch your site and leave it to chance.

Gloria Martinez

Gloria Martinez loves sharing her business expertise and hopes to inspire other women to start their own businesses and seek promotions in the workplace. She created WomenLed.org to spotlight and celebrate women’s achievements.

How do you ensure that your WooCommerce and its product pages are seen by your potential customers?

Well, first, you need to create those pages. 

Luckily, creating a web page today doesn’t require being a developer or a designer, as you can use Divi or other WordPress page builders, of which many support WooCommerce out-of-the-box, or you can add a WooCommerce plugin to it.

But what about getting traffic? How do you attract visitors to your product pages?

One way to get traffic to your e-commerce store or online business and eventually sell products on it is to embrace SEO fully.

This isn’t easy as search engine optimization is a long-term strategy, so here are a few tips to improve SEO on your WooCommerce product pages:

1. Select the Right Keywords

SEO always starts with keywords, be it a product page or a blog post.

Keywords are what your potential buyers will use to find what they need online. 

And they are usually very specific about it, so this is where long-tail keywords come in.

For example, if someone is looking for “Nike sneakers”, they’re almost certainly not ready to buy since this is a too wide search term (there are thousands of Nike sneakers out there).

However, if they’re looking for something like “Nike Blazer Vintage, size 10, male”, they are practically at the checkout, waving their credit card.

2. Ensure That the Page has Unique Content

The more you can insert your own voice to the product pages through unique content, the better.

Unfortunately, today most product pages are lazily written and simply copy-paste the description from the manufacturer’s site, but that can be an opportunity for your WooCommerce product pages to shine.

Make sure that your product pages are keyword-optimized and descriptive and this will greatly enhance the user experience and your chances of selling that item.

3. Start with a Descriptive Title

A good keyword might be necessary for your site and pages to get discovered in the first place, but it’s the title that makes visitors click to read.

You don’t need to get fancy with titles for product pages, but ensure that they’re descriptive, clear and that they include the keyword you want to rank the page for.

For example, a title like “Nike Blazer shoe” might not be descriptive enough and something like “Nike Blazer Retro Male Shoe” is a lot better and more likely to be clicked on.

4. Use Meta Descriptions

Today many SEO “experts” believe that meta descriptions are no longer important.

That’s far from true and you should never forget to invest your time in creating a good meta description.

While users might not pay much attention to the meta descriptions you write, the search engine definitely will as these 150-160 characters help explain to it what your page is about, so be sure to include your keyword there as well.

5. Include High Quality Images and Alt Tags

Finally, how do you think to sell anyone your products if you don’t even show it to them?

Always include several high quality images of your product taken from different angles.

For example, take a look at how Nike showcases one of its shoes, “Nike Blazer Low Platform” from the left, bottom, right and top:

Then, you can click on each image individually to enlarge it and get a better (still high-res) view of it.

In addition to having high-quality images in good resolution, also be sure to include the Alt tag. 

Alt tags are incredibly important for search engines as they still can’t tell (at least not very accurately) what the image is about. Instead, the Alt tag gives context to the image and boosts your SEO for it.

6. Add Product Categories

Product categories help visitors on your WooCommerce site more easily find what they are looking for.

If you have hundreds of products it can be difficult for users to navigate your site and find what they need. For this reason and to ensure a better user experience, you should use product categories.

Optimize each product category further by adding a title and a description. 

For example, if you’re selling sports clothes and equipment, you might have 3-4 “main product categories (“Men”, ”Women”, ”Kids” and perhaps one more like “New Releases” or “On Sale”).

From here, you can further diversify each to a new product category like “Clothing”, “Shoes”, “Accessories” and so on and then each of those categories can have several of its own subcategories like “Basketball Shoes”, “Lifestyle”, “Running Shoes” and more.

For instance, take a look at how Nike divides its products into categories for easy navigation:

You might not have as many products to sell as Nike, but you should still make sure that your visitors and search robots can easily navigate your website and find what is relevant to them.

You might not have as many products to sell as Nike, but you should still make sure that your visitors and search robots can easily navigate your website and find what is relevant to them.

7. Add Product Reviews

Product reviews will help your WooCommerce SEO in two ways.

First, as each user has their own opinion, this will add some of that uniqueness that we were talking about in your content.

Second, and perhaps even more important, is that people who are visiting your product pages will often stop to check what others have said about that product and, as a result, will stay longer on your pages.

The more time visitors spend on your pages indicates to the search engine that those pages are worth recommending to other users and can boost your rankings.

On the other hand, if visitors spend very little time on your pages (aka they “bounce”), this is a bad sign for your SEO.

On top of that, having good reviews will help you sell the item much easier, while bad “1-star” reviews will do the opposite.

Conclusion

Creating a WooCommerce store doesn’t mean just adding a bunch of products, images, and a price tag and hoping that customers will flock to your online store.

First, they need to find your products and that’s why it’s important to use SEO.

Hopefully, after reading this article, you now know how to improve SEO on WooCommerce product pages.

Nick Huss

Nick Huss is a digital entrepreneur and business enthusiast who is constantly seeking and testing new ways of doing business better. When not doing business Nick plays soccer, travels the World and writes books.

So you may have noticed that we’re midway through our SUMMER SALE (you should totally check it out) which implements some fun features like tiered discounts as well as a raffle where we are giving away some awesome prizes. Running a Sale with Divi and WooCommerce did not come without its hiccups, however, even after careful planning, so we thought we’d share our journey so you can get insight into how something like this comes together.

The good, the bad, and the ugly, unfiltered.

Why Running a Sale with Divi and WooCommerce makes sense.

Running a Sale or Promotion on your Divi WooCommerce site is a great way to engage prospective buyers during slower months. Many successful companies do this because it not only boosts the bottom line, it also increases customer satisfaction and brand awareness. Not only this, it gives you the opportunity to stand out among your competitors and even possibly grow non-sales metrics like subscribers or word-of-mouth marketing.

If Running Sales or Promotions are not yet part of your marketing strategy for your Divi WooCommerce store, no stress, you are in the right spot. We are going to give you a quick overview of our experience running our SUMMER SALE, as well as arm you with a checklist to follow which will help you plan effectively, and execute flawlessly.

First, let’s break down the phases of a Sale or Promotion.

Our Experience Running a Sale with Divi and WooCommerce.

Ok, so here it is, an unfiltered look into what we experienced during each of the phases outlined above. Some things went great, others threw some nasty curve balls. 

Let’s take a look!

Planning

The whole planning stage started for us at the beginning of June where we decided to do something creative to kick off the summer which will benefit of course us, but also our awesome current and prospective clients. We knew we wanted to include our existing client base in the party, so we started discussing how to do that. We also wanted to reward those new customers who purchased multiple plugins with steeper discounts. Let the research begin.

We split the tasks among 3 employees, one for top-level decision making, one for social media activities, and one for researching the tools we’d use for this sale.

We got together and decided what our goals for this sale will be, which were:

• Grow the Subscriber base for our Annual Membership
• Grow our Socials
• Reach New Customers

With our goals outlined, we started researching which tools to use for this. We knew we wanted a tiered solution for the discounts, and after checking out a few we decided on a plugin.

We also decided to reward anybody that wants to participate, that we would create a raffle, and again after checking out a few options, we landed on Rafflepress to run the raffle.

After deciding the other details like discount amounts, timing, raffle prizes etc, we were ready to move into the building phase.

Building

Now for the fun! We cloned our production site into a staging area and started installing and configuring the plugins we purchased.

First up was the tiered discount plugin (which shall not be named, you’ll see why a little later), so we built out our tiers and conditional logic for the various discount levels. It worked great!

Next up, we configured Rafflepress with various actions like visiting our Youtube channel (where you will find some helpful content) or referring friends to enter the raffle. We set up 9 different ways to get more entries in total. This plugin is pretty awesome and very easy to set up.

On to creating some assets like a promo landing page (diviengine.com/summer21 😉) that is easy to remember and share some sales banners, and a video introducing the wholesale. The landing page was quick as we just used a branded layout and added in things like the video and our Rafflepress shortcode. For the video, we used a template from Envato Elements and edited it in Adobe Premiere. Assets locked in!

We also linked up to our Active Campaign account along with our Google Analytics so we can track progress and build some lists! And what is a sale without some Ad Spend? Our marketing Guru jumped in and set up some sweet Facebook ads targeting WordPress and Divi communities where we felt our target customer lives.

Ok, our big brains think it is all working according to plan, time to test it until it breaks (or hopefully NOT).

Testing

Welcome to maybe the single most important step.

TEST! TEST! TEST!

And when you are done testing, TEST AGAIN!

It is too easy to lose the confidence of your customer if something goes wrong when you’ve got them to the cart. We set up a testing routine which we had various team members follow from all corners of the earth to make sure that things worked.

Some important things we tested were different combinations of products and memberships, making sure they all display correctly. Making sure the discounts are applied correctly. We tested things on multiple devices and browsers. All to make sure that no matter how curious visitors work things, that they worked correctly as we intended.

Part of this testing and Quality Assurance phase is also to double and triple-check your spelling and grammar. For this, we love Grammarly because as much as I have the gift of gab, grammar and spelling were not included in the package.

Everything looked good, we are ready to roll!

Go Live

Ok, time to launch this bad boy. 48 hours before the sale was supposed to kick off, we implemented all the plugins and changes on our production site ready for the show. The night before, about 1 hour before kick-off, we manually started the sale with all the discounts so that we can test our add-to-cart process one more time just to be extra sure our customers will only have a great experience.

Everything looked exactly as it did in testing, so some key team members went to bed after a long day.

Then Boom 💥

How could this be? We tested and tested some more, this should not have happened. Two of our employees were still diligently at work trying to figure out what is happening, but due to not having direct access to the server could not effectively troubleshoot the scenario. Our engineers with access were not able to be reached because it was super late for them already, and all we could do was wait as we started experiencing intermitted outages of our site where our promo was now in full swing.

As a precaution, we are able to hold off on our kickoff emails and social media posts announcing the sale was now life, in an attempt to suppress the traffic, and really just the eyeballs that will see our downed soldier. Nobody slept well that night.

The next morning everybody sprung into actions, and the rogue slacks were seen, it was all hands on deck. Peter, our founder, and certified coding genius sprung into action to investigate the issue. He quickly determined that the plugin we used for the tiered pricing of our SUMMER SALE went rogue and maxed out our server resources (which are generous). He flew in and disabled that plugin, but then we were left with a sale for which we had tons of marketing created, ads ready to roll…it was too late to change it.

Answer? Code a custom solution of course. It was too late in the game to troubleshoot or deal with the plugin support team, so Peter within a matter of 45 minutes coded a custom solution that handled our different discount tiers as well as the separate discounts on our memberships.

Once our jaws were picked up off the ground, we let roll with our marketing and excitedly started watching the traffic pick up.

Disaster averted.

Now that things were live, the marketing team meets weekly to review the results of our efforts and so far so good. Currently, we have around 800 raffle entries and we are seeing good ROI for our ad spend. Now that we are in the middle of the sale, we are focussing our drip campaign and getting our content ready for the close of the sale at the end of the month.

Post Sale

Now we are not here yet, but we have a debriefing plan set out so that we can assess how we did, and what we will do differently next time. I can already tell you that we will very likely ensure the entire team is on high alert for the first hour or so before we communicate the sale is live.

Of course, we will take a look at our analytics data and ad performance to see what we can do to improve those. For this sale, we only went with Facebook ads, but we are actively working on getting Google Ads into that loop.
A fun thing we noticed with this new iOS policy where users can opt out of ads, is that we don’t get very accurate analytics for our Facebook ads and that our Google Analytics paints a more accurate picture of what our results actually look like.

So, we will continue our weekly meetings and celebrate our success, and always look for ways we can improve the experience for both our team and our customers. When we have success doing this, we have more resources available to keep improving our products and services so that you, our customers, can get the best value for your money.

Conclusion

So there it is our unfiltered experience with pulling this SUMMER SALE together by Running a Sale with Divi and WooCommerce. There were highs, there were lows, but we pulled through and we are not even done yet! I know I said the most important part in this process is testing, but honestly, it really just is having a great team and awesome customers.

We put a checklist together below for you guys so that you can do the things we did right, but also avoid some of the things we did wrong with Running a Sale with Divi and WooCommerce. Check it out, and maybe try using it for your next Divi WooCommerce sale.

Divi WooCommerce Sale Checklist

If you are reading this, you’ve probably either seen or used some of our plugins in the past. We built these plugins because we had a real need for them, but did not find anything on the market that was hand-crafted for Divi and was easy to use. We know that investing some of your very real money can be a scary endeavor, so we wanted to take a quick look at a few different use cases for the Divi Engine suite of plugins to help give you ideas on how they might benefit your or your clients on your next Divi project.

Taking a Closer Look

Strap in, we are going to get into each of our plugins one-by-one to look at what their purpose is first, and then a use case for that plugin. With 7 plugins, we will start with the more complex ones while your mind is fresh, and work our way to the ones with a flatter learning curve.

Divi Machine

Building complex sites with dynamic content have never been easier. With Divi Machine and Advanced Custom Fields, you can create any site you can imagine. Any type of post with custom fields is just a few clicks away. Divi Machine can be super intimidating because of its intense power and range of possibilities, but starting small and thinking big is the key to building truly dynamic and custom sites for your clients.

Use Case

You want to build a Real Estate Listing site with many properties that will need custom post types that are linked to agents.

Example

https://machine-estate-agent.diviengine.com

Key Features

Custom Post Type • Custom Taxonomies • Custom Fields • Linked Post Types • Custom Loops

This is an excellent example of the perfect type of business where one would want to use Divi Machine to create linked custom post types. Looking at the example, you’ll see that we have created two custom post types, one for the properties and one for the agents associated with each of the properties.

Each of the properties has fields specific to the information you would want on a property. These fields include images of the property, description, price, a number of rooms, when it was built, size, special features like a pool or balcony, the list could go on forever and is only limited by your needs.

In addition to the property custom post type, we have a post type for the agents. Each agent post type has a photo of the agent, position, and contact details. Now where the power of Divi Machine really lies is in the ability to link this agent post type, to all of the properties they represent.

Think about that! You can build a full-on real estate listing website with individual agents representing the various properties. Your homepage can list all the properties using custom loops which gives you control over what the listing cards look like. And let’s not forget that with Ajax Filters which is a part of Divi Machine, that you can filter these listing by the fields you want without having to reload the page.

Now while we have you thinking, think about how you could apply just these simple tools in this example to build all sorts of other types of sites that could benefit from features such as custom fields, loops, and relational post types. Pure awesome sauce! And this is only scratching the surface of what is possible.

Divi BodyCommerce

WooCommerce is a great tool to use if you’re building an eCommerce site with Divi and WordPress, but getting a WooCommerce install to feel 100% custom is quite the feat if you don’t know how to code. That is is why we created BodyCommerce, an A-to-Z solution to create beautiful eCommerce sites with Divi. Power features like Custom Product Loops, 5 different Checkout Page Styles, Custom Product Pages, Ajax Filters, and over 60 New Divi Modules, you can easily create hype-custom Divi WooCommerce sites that look unique to match YOUR brand, not that fun “WooCommerce Purple” 😉!

Use Case

You are starting an Online Pet Store, but you don’t want it to look like a normal Divi or WooCommerce install. It is important for you to have the Shopify style.

Example

https://bodycommerce-petshop.diviengine.com/

Key Features

Custom Product Pages • Order Bumps • Custom Checkout Pages • Custom Login Page • Social Sharing • Custom Product Loops • Social Sharing Icons

This example is fantastic because it showcases some of the major features you’ll find in BodyCommerce to enhance your Divi WooCommerce projects. Utilizing the power of Custom Product Loops we are able to create stunning product cards to cycle through to show off the details you want, the way you want. Talk about custom development! And building these custom product loops doesn’t require you to be a code ninja, all you need to do is to be able to build layouts using the Divi Builder while utilizing our custom modules, easy as pie. BodyCommerce then employs some Divi Engine magic to give this custom experience.

One of my personal favorite BodyCommerce features used in this example is the Shopify Checkout Preset Style, one of five preset styles at your disposal (Multi-step, Payment right, One-page, and Accordion are the other 4 options). This is so powerful and easy because it only takes a few clicks to apply any of these styles to your site. Best of all, they can be used in conjunction with other BodyCommerce features such as Order Bumps, Custom Checkout Fields, and more!

We have further customized our Divi WooCommerce Pet Store with BodyCommerce by creating Custom Product Pages that look great and encourages conversion. In this example, we added our custom social sharing feature that allows your visitors to share your products directly to popular social media channels which tend to draw in those extra eyeballs. You’ll also notice the product gallery looking a bit more interesting with the thumbnails on the side. Our Product Page Gallery module actually gives you various options of how to display the images which again hits that sweet sweet buzzword, C-U-S-T-O-M 🎉

Some other WooCommerce enhancements powered by BodyCommerce you’ll love are things like Custom Variation Swatches that let you have images or colors as your variation options, Custom Login, and Account Pages, Email Templates that control in more detail what your customers see when they have placed an order, as well as the Ajax Add-to-Cart with a handy Mini-Cart.

I could go on and on, but you are better served to check out the BodyCommerce page, and I have some more use cases to get through here.

Divi Mobile

Not many things scream, “Just another Divi site” as much as the hamburger menu on a stock Divi install. It is notoriously difficult to customize and style to fit your branding, Divi Engine is here again with a solution that works without needing a single line of code. Packed with features, Divi Mobile not only allows you to customize things like your hamburger menu on mobile, but it will also actually let you make a ton of customizations on your mobile, tablet, and desktop menus. It comes with 6 pre-set styles for those of you looking for a quick and easy solution, but under the hood, you can create a ton of different styles to say bye-bye to that “Just another Divi site” feel.

Use Case

You have been battling with CSS to style your Divi Hamburger menu to look better.

Key Features

Custom Hamburger Menus • 6 Preset Styles • Inject Divi Layouts • Sub-menus

This one is a little harder to give only one example for, so let us rather spend some time looking at some of our favorite features in Divi Mobile. The biggest and easiest one to implement is your ability to apply any of our preset styles with just a few clicks in the Theme Customizer. You might recognize Style 1 from the Divi Engine website, customers kept asking how we did this awesome effect, so we did them one better and built it right into Divi Mobile as a preset style that you can customize to be in line with your branding.

A very close second favorite feature is the ability to inject any Divi Layouts saved to the Library either before or after your main content. This gives you tons of options for things like Call-to-Actions or contact information, you’re the creatives out there, just imagine what you could do with that! And what would all these features be if you couldn’t style the actual Divi Hamburger Menu Icon without writing a bunch of code? Still pretty cool, but we still added 3 different pre-set styles along with 17 animation styles. Wow!

Divi Ajax Filter

Let’s talk about page reloads. Sure, sometimes they are necessary, but wouldn’t the world just be a better place if we sprinkled some Ajax on our filters and got that data without pesky reloads? I vote YES! We built Divi Ajax Filters so that you can create a more seamless experience for your visitors by allowing them to filter WooCommerce Products, Blog Posts, or any Custom Posts without that reload time. Divi Ajax Filters is fully integrated with the Divi Builder, so you even set those filters up with a tool you already know and love!

Use Case

You are losing conversions because visitors are not loving excessive reloads when they try to filter through your content.

Example

https://ajax-filters.diviengine.com

Key Features

Compatible with WooCommerce • Compatible with ACF • Ajax Results

In our example, we showcase our Divi Ajax Filter on a WooCommerce store that has a bunch of products in different categories. You can search through the products by a bunch of defined filters such as price, category, and variants like color or material. The best part is that as you adjust these filters, you will see the products that show dynamically update without needing to refresh the page. This keeps your visitors engaged and more prone to converting into customers.

This Ajax magic is not limited to WooCommerce products, you can set it up to work with any post type in your Divi install, even Custom Post Types as Divi Ajax Filter fully integrates with Advanced Custom Fields. The good news does not end there, if you purchase Divi Machine or Divi BodyCommerce, you get Divi Ajax Filter for free as it is already built into those plugins. How awesome is that? And no, there is no catch, we just know how important it is for you to be able to provide your customers with the best possible experience.

Divi Nitro

Speed is incredibly important for any site, but especially a Divi site because Divi is pretty well-known to be a slowpoke when it comes to loading times. This is a problem as we only get our visitor’s full attention for mere seconds before they see something else shiny and they bounce off in that direction. Don’t worry Divi Engine has you! Divi Nitro was crafted for this very gripe to lighten the load for any Divi site with some very specific Divi-focused features. Divi Nitro lets you do things like select what scripts run on what pages as this is often a huge cause for heavy loading times, and if you run into any issues, we’ve built a debugger right into Divi Nitro to help you track the problematic script.

Now we don’t skimp on anything, we still include things like HTML, CSS, and Javascript minification and combination. The features also include a bunch of image and video deferral options which could be a huge plus for sites that lean on the heavy site with visual content.

We also know that setting up any speed plugin can be intimidating and confusing, that is why we also offer an installation service to set your site up to run as fast as possible on your hosting provider of choice. We really believe any Divi install should be running with Divi Nitro for both your customers and SEO rankings.

Divi Mega Menu

Mega Menus are a huge trend in Web Design that definitely makes sense for sites that have a large amount of content like products or articles which are organized into various categories or maybe even brands. Visitors can suffer from a bit of overchoice when presented with all those options at once, enter Divi Mega Menu. Our goal here is to convert visitors into customers, so we should not be confusing or overwhelming them, instead, let’s lead them to exactly what they are looking for by using Divi Mega Menu. The plugin is super easy to use and much of the heavy lifting is done right in the Divi Builder.

Use Case

Your eCommerce Sites has many Products sorted into many categories and you don’t want to overwhelm visitors when they navigate your site.

Example

https://demo-mega-menu.diviengine.com

Key Features

Default Menu • Tooltip Menu • Divi Builder Integration

This is a big example with many demos to give you an idea of how you could implement Divi Mega Menu on your Divi site. Due to the versatility of Divi Builder layouts, you can really achieve some very custom-tailored results. Here we have mostly used the Default Menu style for our Mega Menus, which means that they will live in our default Divi menu in the header.

Going through the options on our example you can see how we are using pretty much any Divi module that makes sense in our Mega Menu. We have multiple columns, WooCommerce Products, Blog Posts, Contact Forms, and all sorts of Media modules. I wasn’t lying when I said Mega Menu was a versatile piece of plugin goodness.

In addition to these standard Divi Mega menus, we’ve added two modules for additional options which are the Drop Down module and the Mega Tabs module which you’ll only find in Divi Mega Menu. These just offer additional layouts for your mega menus to create that unique and functional look you are going for.

Lastly, and unfortunately, we do not have a demo for this one yet, is the Tooltip Mega Menu style which allows you to place a mega menu anywhere on the page. You can set triggers to hover or click and they work fantastic for keeping the loaded pages simple and leaving it up to the user what content they want to reveal. Think of something like a contact form that so many Divi Designers throw on a landing page, with the Divi Mega Menu Tooltip style you can have a contact button that will only reveal the form when you click on it. I don’t know what one calls this, but it certainly is the opposite of overchoice.

Divi Protect

The concept is very simple, you have some content that you want to be under lock and key unless you want them to. WordPress already gives you this ability with pages or posts, but with Divi Protect, you can password protect any module or section on your pages and posts. Reasons why you might want to do this is for users to be emailed the password once they have signed up for a newsletter, or maybe purchased a product, it is really up to you.

Conclusion

There you have it, folks, we scratched the surface on just a few use cases of how you could utilize each of our awesome plugins to build websites that don’t resemble anything close to a Divi site, let alone WordPress. With powerful tools like Divi Machine and BodyCommerce you can recreate some of the biggest websites out there all without having to write a single line of code. Not only that, you can efficiently improve almost any site that you already maintain using other tools like Divi Nitro or Divi Mobile.

We hope this overview was helpful to those of you that don’t yet know all of our products and we hope your interest is peaked enough to have a chat with us about how we can help you do some awesome things with our plugins!

1) Even Solopreneurs Need Help

Most entrepreneurs are also solopreneurs. All this means is that you are the only one who is currently working to get your new business off the ground. The thing is, you don’t have to go it alone if you’re not sure how to tackle each and every project needed to build your business. Even if you are working with a small budget, you can always hire freelancers to help.

Freelance professionals from online job sites can make short work of complicated projects, like video editing. Video editing can be crucial for ensuring your website is filled with engaging content, and you can look through reviews, completion times, and rates to find the best freelance editor available. Freelancers can also help with accounting and marketing. A few of the most trusted sites for finding reliable freelance workers include Upwork, Freelancer, Toptal, and Fiverr.

You can also work with an employment agency to make sure you have the right type of help to support your new business. The perks of using a staffing agency to help scale your business include saving time and making sure that hiring processes are free of potential legal issues.

2) Planning Can Be Everything

Ask the internet if you need a business plan and you’ll get so many different answers. Take a look at any reliable startup guide, however, and you’ll also see that there are several detailed and complex steps on the list. Staying organized and making sure you don’t miss any of these essential details is challenging if you don’t have them written into some sort of plan.

If you plan on applying for funding from loans, grants, or investors, a business plan is also a must-have. Writing a business plan shows these funders that you are serious about helping your small business succeed and gives them the confidence they need to support your efforts.

Your business plan needs to be fairly detailed if you do plan on using it to keep yourself organized or secure startup funding. Instead of starting from scratch, consider using a fillable template. There are quite a few available online and many are completely free to use.

3) Every Business Needs a Marketing Plan

Along with a business plan, you also need a strategic marketing plan. Marketing is another must-have for entrepreneurs because this is how you will likely get those first few customers. Successful marketing will introduce consumers to your business and brand, and then it will help build a lasting connection so that those consumers become loyal customers.

If you’re not sure what a brand is at this point, you should also take some time to learn about this essential marketing element. Your brand is like the foundation for your new company. Branding is what helps customers recognize your business and form those personal connections. So, don’t neglect this aspect of getting your new startup up and running.

By the way, you can also get help with branding and marketing. One of the most effective tactics for growing your new business is to partner with other small businesses and entrepreneurs. If you cross-promote your respective businesses, you’ll reach an even wider audience. You should also spend some time getting to know your target audience and how to best reach them.

Conclusion

Becoming a successful entrepreneur rarely happens overnight, but helping your new business boom doesn’t require magic. Invest in employees who can take care of essential tasks you don’t have time for using a freelance job board or staffing agency. Take the time to create a detailed business plan, which will help you stay organized and qualify for funding should you need it. Then, develop a marketing plan that will put you on your potential customers’ radar to build a brand and following. These strategies, along with your hard work, passion, and dedication, will help your entrepreneurial dreams become a reality.

Chelsea Lamb

Chelsea Lamb has spent the last eight years honing her tech skills and is the resident tech specialist at Business Pop. Her goal is to demystify some of the technical aspects of business ownership.

If you’re looking for a simple and effective way to increase your conversion rate, it may be simpler than you think. Instead of spending hours on your website trying to figure it out all by yourself, or trying to use a type of marketing to change things, there’s a much smarter way.

For the easiest, best, and most effective way to learn how to improve your conversion rate, start learning from the biggest and the best online stores out there. By using what’s already been tried and tested by the biggest and the best in the business, you’ll be saving both time and money, and you’ll be learning from the highest converting websites out there.

Assuming that you are already attracting the right sort of traffic, learning to focus on how your customers are experiencing your site will be the key to your online stores’ success.

Here are our top 5 key points to help improve your e-commerce conversion rate.

Did these 5 points help you? We have a gift for you! 🎁 

We want to give you a Free PDF with 10 extra points and also we will be releasing a course later on which will show you how to implement these 15 key points
and maximize your e-commerce conversion rate. Are you interested? Fill out the following form and we will send you the PDF and a notification when course is ready.

Search engines are such complex “creatures”, their algorithms are constantly changing. The main reason why they change is to reflect what the users actually care about. I think the main points they ask are: Did the user find what they were looking for? Did they leave quickly? Didi they share or interact with the site in any way?

While meta descriptions, H1 tags, image attributes, etc. do have an impact, your rankings are largely influenced by the value your users get from visiting your site. It is how they interact with your site that matters. With all this in mind, you can see how it can take a while to move up Google rankings, it is not a quick fix.

Follow these steps to have a better Divi SEO Optimization

Site speed

Page speed is not only a user experience factor, but a search ranking factor too. We have many posts on how to improve your speed but in a nutshell I think these are the main points. Keep your plugins to a minimum or use quality developers, defer images, minify & compress scripts, get a great host and put it though a CDN. All of this helps ensure optimal loading and rendering times, and reducing the ‘time to first byte’.

Friendly URLs

As in, /contact/ instead of /index.php?id=4. Even including branded words and special terminology, still aim to keep page URLs meaningful for users and as simple as possible for search engines to interpret. You change the URL in Settings > Permalinks and choose “post name”

301 redirects

“301 redirects” tell search engine site crawlers where to find your pages in their new locations (following a redesign or restructure), so your site won’t get penalised due to your old links no longer pointing to valid content. You can use your htaccess fill to do this, but we find the easiest and simplest way is to use a plugin like 301 Simple Redirect, is is simple and easy to set up and won’t impact your load time.

XML sitemaps

Think of sitemaps as a cheat sheet for search engines. When a site crawler hits the sitemap, it has access to the entire structure of a website, ensuring every page of your site gets indexed (except for any pages you explicitly say you don’t want crawled). Use a plugin like Yoast SEO to generate this for you. Make sure you exclude any pages you do not want to be there.

It is worth to note that you should also create a visual sitemap for your visitors too if you want.

Submit to Google

Once you have developed the site, set it all up and created the sitemaps – the next step is to submit it to Google. Log into webmaster tools and add your site there. You can see a video on how to do this here:

Quality Content

Unlike the good old days, search engines have become more clever. You can no longer spam your page with keywords to trick Google in thinking your page is the one the visitors want. The better user experience Google can give, the more they will use it, therefore, Google cares about who they put up on the first page. Instead of spamming your site with keywords, look to create unique, quality content. Below are some points you can think about

Unique and short page titles – make sure your pages are unique and explain the content in as short of a title as possible

Great page descriptions – As with titles, your page description should be to-the-point. Resist the temptation to hard-sell or instruct the user to ‘click here’. It’s not necessary. Informative is usually enough to let people know if your link is worth clicking.

Writing for your audience – The goal is to get the visitors to stay on the page for as long as possible. Make sure you are using keywords to get them there, but once they are – make sure your content keeps them reading.

Descriptive alt tags and file names – yes, it is not only the alt tag that counts. Name your images that are meaningful and are not spammy or too long. It is best to separate with a “-” so something like “town-name-garden-services.jpg” would make sense and help.

Summary

There is way more to it than just this, but following the above rules will get you off to a great start. The way I like to think of SEO is like a neighbourhood. When you move into a new house, you are not known. Put yourself out there, be genuine and over time – you will get more known. Be normal, not spammy 😀

Many aspiring entrepreneurs choose to take the route of getting their websites live as soon as possible. This does have some benefits, admittedly: it allows the domains to start building up trust with search crawlers, and starts building up brand recognition. And since websites are innately flexible (being digital entities), they can simply build them up as they go.

The problem with this route, though, is that first impressions are massively important in the online world. If you roll out a website that visitors dislike (or even hate), they might not ever return, no matter how much you overhaul what’s there or add new content or features.

Consequently, you need to find the right balance between promptness and polish. Starting with a rock-solid foundation like WordPress is certainly useful, but what comes next? In this piece, we’re going to look at 5 steps you can take to get your WP site ready to launch. Let’s begin:

Choose high-quality plugins

WordPress is world-renowned for its vast and powerful array of plugins and themes. They save huge amounts of time, add invaluable features, and help shape websites that can be favorably compared to expensive sites (built using custom platforms) while costing significantly less. And while it’s possible to create a WP site without using plugins — why would you?

If you make a priority at the beginning of identifying the plugins you intend to use, you’ll have more time to figure out how you can use them optimally and how they’re going to fit together. You might need to compare numerous options, too, which can take a while. Once you know exactly what you’re going to use, you can focus on everything else.

Put time and effort into your content

There’s no shortcut to creating great content, and make no mistake: your website needs great content. The internet is littered with websites that look good but offer thin and/or dull copy, and almost as many that offer useful copy but look like they were made decades ago. You need both: visuals that draw attention, and text that keeps it.

Don’t make the mistake of launching with placeholder content, imagining that maybe people won’t really notice. They will. If you’re not a writer or designer, then don’t be overly reluctant to bring in assistance in the form of freelancers or even agencies. Your content is worth some major investment — it’ll pay off in the long run.

Complete a comprehensive checklist

Before you consider your website feature-complete and ready for user testing, you should do more than just informally assess it. You should use a checklist to ensure that all the elements — from major to minor — are accounted for. Consider this list of website checks for WordPress sites, for instance: it encompasses aspects such as security and browser testing. If there are elements missing, you can add them in before you proceed.

There may be other things you need to check, of course, largely depending on your intentions for the website. If your WordPress site is being extended through a plugin like WooCommerce to serve as an ecommerce store, you’ll want to confirm various retail-specific things. I suggest cross-referencing several lists to increase coverage: for example, use a list specific to WooCommerce alongside another list built for Shopify. That’ll give you peace of mind.

Run representative user testing

Once you’re confident that everything’s working well from a technical standpoint, it’s time to subject the website to real-world scrutiny. The problem with in-house testing is that you clearly understand how the website was designed and what all the content means, so there’s no need for you to pay close attention. It isn’t representative of what your users will experience.

Representative testing involves using the site on mobile devices and weak connections (limited in speed and even reliability). Someone in an area with low signal should still be able to use your website. Even with today’s design standards, there’s no good excuse for not having a website that loads quickly and efficiently. If your testing finds any issues, work on optimization and/or upgrade your hosting.

Use rival websites as points of comparison

By this point, you should feel ready to launch. The design is done, the plugins are in place, the content is polished, the features are present, and the performance is adequate. Good to go? Technically, but at this point I think it’s a good idea to use rival websites as points of comparison. How does your website stack up against them? If you were a user, which would you pick?

You could do this at the start of your project as part of the process of getting inspiration, but even if you do, it’s still worth going for direct comparisons here. Now that you’re comparing one finished website to another, you can truly gauge which provides the better experience — and if yours falls short in some major ways, you should delay the launch and make improvements.

The launch of your WordPress website shouldn’t mark its peak. Throughout the weeks, months and years following that step, your site should only get better: growing and changing to not only catch up with the industry but also get ahead of it.

Even so, you shouldn’t treat it as inconsequential, because first impressions of your website will heavily affect how people view it. Take the time to prepare as thoroughly as you can and get your website into a great position by the time you make it live. The right combination of investment and post-launch commitment will get the results you want.

Introduction

Today we will be doing a tutorial on how to create a to do checklist on your website using HTML, CSS and jQuery. We were asked via email and on Facebook to create a tutorial of how we created our checklist here. So here we go, below is what we are going to achieve.

The first thing we need to do is to set up the HTML structure. Below is the code we use for the list.

Some of the key things here are that you must have a div element around all your list items – you could add this class to the code or text module if you are using Divi. The second thing to make sure you have is to make sure each list item has a different name/id.

So once you have the HTML structure in place, let’s add some CSS to make it look great – below is the CSS with some explainations

Finally we add some jQuery which add classes to the list items when clicked or bind (focus)

That is it! You can now add as many list items as you want and also change the CSS to match your website. We hope this helps and any questions please get in touch!

VR and UX: are these topics on similar footing? In the eyes of many professionals (even those in digital fields), they’re quite comparable, which is to say exotic initialisms that have some relevance in business but don’t warrant major investment. This is far from the truth, of course — anyone paying attention to changing standards knows that UX is of paramount importance.

Even when a business acknowledges the vitality of UX design, though, it might not know how to approach it. It’s a tricky topic, after all, and it gets even tougher when you start working on mobile-centric designs. Creating exceptional mobile experiences is a top priority but also a challenge that shouldn’t be underestimated.

In this article, we’re going to cover some of the main things that businesses get wrong when trying to perfect their mobile designs. What are the most common mistakes that you should be seeking to avoid for your UX work? Let’s get to them:

They prioritize visuals over speed

Making a website or mobile app look great is extremely important, so aesthetics can’t (mustn’t) be overlooked, but too often companies think that flashy animations are crucial. This is far from the case. Subtle animation is often effective, particularly when it’s used to better communicate important subtleties of the UI, but gimmicky animations just tend to get in the way.

When someone wants spectacle, they watch action movies. They go to websites and use mobile apps because they want to get things done, and that doesn’t demand visual flair: it demands speed. When they click or tap on a link, they expect the loading process to be swift, even when they’re on a low-speed connection. And since ornate visuals consume a lot of data, they slow things down. Keep visuals simple and focus on performance.

They don’t offer personalization

Mobile ecosystems have profoundly changed the concept of personalized UX. Because each smartphone user is logged into a wide variety of accounts and steadily generates locational data, designers have access to a huge amount of data that can be used to create rich unique experiences — and mobile users have become accustomed to such experiences.

This isn’t just about custom layouts and other trivial factors. It’s about meaningful preferences: everything from payment portals to product types. It’s also about needs: one person using a mobile app might be completely familiar with what it does, while another might be using it for the first time, and the content needs to dynamically cater to those requirements. Particularly in retail, you should know what your customers are looking for, so failing to adapt is unforgivable.

They include needless complexity

Mobile navigations should be simple: extremely simple. Restrictions aren’t as tough as they were when the smartphone was first introduced and screens were relatively small with horrible pixel density (the first iPhone had a 3.5” screen with a resolution of 320×480), so you can include a reasonable number of on-screen elements, but simplicity is always preferable.

This is a big reason why there’s so much appeal to plugins such as Divi Mobile: not only do you get excellent speed, but you also get functionality-centric design that doesn’t include any unnecessary elements. By cutting back on distractions, you make your important elements seem even more important, and ensure that users feel in control at all times.

They go overboard with pop-ups

Whether they’re pop-up notifications or pop-ups in the form of windows that appear uninvited and obscure the content of the page, pop-ups have their uses, but they must be doled out sparingly and only when needed. Too many notifications will cause mobile users to rescind notification permissions, and too many regular pop-ups will lead them to uninstallation.

You might wonder why companies would go overboard with pop-ups: well, the answer is the drive to always be promoting additional products and services. A business that gets someone’s attention might be eager to make the most of it by giving them ample opportunities to spend money, but this is a huge error. Make your interface and experience as good as possible and the user will seek out other products and services from your brand.

They don’t run real-world tests

Lastly, and perhaps most significantly, businesses often fail to run meaningful real-world tests of their UX designs. They keep their designs under wraps while work is ongoing, then review them internally under the assumption that they know how to recognize good experiences. At a push, they might attempt to imagine what it’s like for their users, but that only goes so far.

There are two issues to contend with here. Firstly, there’s the bias inherent to companies reviewing their own experiences: even if the testers didn’t work on the designs, they know that their colleagues did, and might be reluctant to be harsh with their criticism. And if they did work on them, they’ll already think they’re good, and want to keep the parts they worked on.

Secondly, there’s the fundamental problem with tech-savvy people working for development companies trying to imagine what it’s like for people without those tech skills to use their interfaces. There’s also the matter of trying to replicate everyday mobile internet conditions for those who live in areas with limited coverage — a mobile-first design should be able to work capably on even a slow connection. Test under real-world conditions: it’s worth the expense.

Mobile UX design isn’t a luxury to be pursued by companies with extravagant budgets and nowhere else to spend it. It’s a vital element of creating a website or mobile app that mobile users love instead of merely tolerating, an achievement with wide-reaching implications: customer loyalty, sales, recommendations, and general plaudits.

By keeping the mistakes we’ve identified in mind while working on your mobile designs, you should be able to avoid them, resulting in a vastly-superior result. Good luck!

When you just run a blog, and only update it on occasion, then you don’t need to think too much about security. After all, the potential repercussions of an attack are going to be mild (you might lose access, or have an account disabled), and then there’s the unlikelihood of anyone attacking it in the first place. Hackers pursue valuable targets, so unless there’s someone with a vendetta against you, your blog site is probably fine.

But the e-Commerce world is different. Even if you only run a modest e-Commerce site with fairly low revenue, it’s still an appealing target to criminals — they can take control and redirect the revenue, or (more likely) just take the customer details and sell them to sketchy marketers. And if ecommerce is your primary source of income, then it’s mission-critical that you take steps to secure your store against attack.

So how do you do it? Well, if you’re running a WooCommerce store, then you can’t rely on your host to do everything for you — but it’s a great platform, so it shouldn’t be too complicated to secure it yourself. Run through these 5 steps, and you should end up in a fairly solid position:

1. Limit admin access

E-Commerce can be a solo operation, but as it scales, it must morph into a more conventional business arrangement with employees and management. At various points (and for various reasons) it will be necessary to share admin access — allowing selected employees to go directly into the admin panel — and this requires trust.

Now, if you’ve studied the many guides and walkthroughs that litter the online world, you may have noticed that basic organizational elements like this aren’t covered in the typical e-Commerce blueprint. This is because they’re mostly generic — every business owner must be careful with trusting people, after all. But there perhaps should be some mention of the risks involved with admin access: while it’s noisy and risky to smash up a physical office, it’s easy to access the back-end of a CMS and leave it seriously damaged.

Because of this, you should be even more selective when sharing admin access than you would with sharing an office key. You might be somewhat sure that someone is trustworthy, but you never know when they might get disgruntled for whatever reason and decide to cause some damage before quitting. So vet people thoroughly, ensure there’s absolute trust, and remember that you can revoke admin access if it’s no longer justified.

2. Install a security plugin

What does a security plugin do for an e-Commerce site? Well, it secures transactions and bolsters shopper confidence. Sharing card details online is still dangerous, even today, and you don’t want to risk your site payments being redirected or altered in any way. It’s absolutely essential in e-Commerce to earn trust ASAP, and installing a security-boosting plugin shows customers that their security is your priority at the same time as demonstrating trustworthiness 

Perhaps the defining feature of WordPress is its immense flexibility, so there’s no shortage of security plugins available for WooCommerce users: here’s just one selection. If you’re running on a different CMS, then check whichever app, plugin or extension store is available to you and you’ll surely find some good options.

You should also be careful about the payment gateways you use. There are plenty that offer favourables rates but likely can’t offer the same kind of security that their more established rivals can. Even if costs more, stick with gateways you can trust, and be sure to review them every few months to keep track of changes — just as the design of your website warrants ongoing investment, so too does your security.

3. Avoid plugin conflicts

Plugins are astoundingly useful for your website (here’s just a sample of WordPress plugins for the Divi theme), and there’s nothing inherently wrong with having a large selection installed — but you do need to be aware of two risks that come with using so many simultaneously.

Firstly, plugins are updated and patched at different rates. Some will be updated every few days, while others will get updated only when their developers feel like it. Since many plugins have extensive admin access, you can end up with a secure system being made vulnerable through running an insecure plugin.

Secondly, the more plugins you have interacting, the less stable your website will get. If you have enough plugins not designed to run together, you might find that features stop working — and this can even affect your security.

Thirdly, remove any outdated plugins or at least make sure the code is safe. An outdated plugin doesn’t always need it is unsafe but if you do not know the code, it is best to remove and find a replacement

Consequently, you should do two things: get rid of any plugins that don’t trust justify their use, and aim to use plugins from trusted developers (if you use multiple plugins from the same developer, you can be confident they won’t cause conflicts).

4. Switch to secure passwords

It’s likely that the importance of using secure passwords is stressed so forcefully and so frequently that it proves counterintuitive — we read advice about passwords all the time, so we either start to think that we’ve already taken action, or we keep putting it off on the basis that we’ll surely get to it soon enough.

But it truly is immensely important. Brute-force attacks can crack your website wide-open if you settle for “password123” or the name of your first pet. You might as well leave your front door unlocked. It doesn’t help that there’s conflicting advice to be found about what constitutes a secure password, with some thinking that more characters are always better (not necessarily).

If you use a password manager like LastPass, then you can simply auto-generate some suitable passwords and keep track of them, but even then you’ll need a solid password for that system. Try the hyphen method: come up with three words you’ll remember, and hyphenate them. For instance, cabbage-underpass-sandstone is an excellent password (don’t use that specifically!).

5. Ensure your host is trustworthy

Having a great website host won’t prevent you from making basic security mistakes, but it will help you in two other major ways: firstly, it will minimize the likelihood of your store being made vulnerable through a hosting hack, and secondly, it will help you recover in the event of a site hack. The better your relationship with your host, the easier it will be to reach out to them and have them help you get back up and running.

Since you’re running on WooCommerce, you have a fantastic choice of hosts (many specializing in WordPress sites), so don’t just settle for the one you’re currently using out of convenience. Take a look at what’s out there. Compare rates and performance guarantees. Read reviews from credible sources.

We recommend CloudWays, check out our post on moving to them here.

Should you move to a different host? That really depends on how highly you rate your current host. If you get regular updates and speedy communication, then stick with it. If you’re not that confident, and you’re not irrevocably attached to your host, then round up the most viable alternatives and pick something better.

Over the years we have built many websites and have made many mistakes pre or post-launch, for example forgetting to change a URL or testing the contact form. We have built a list to check and thought you would benefit too. Why make the same mistakes as we made, with this checklist, you will make sure you check all areas for a successful website launch.

Feel free to copy the list for yourself or use this page to check them through.

Have we missed any? Please comment below and we can add this so benefit everyone else who reads this.

Introduction

We have had a few requests on how to create a mega menu like the ones on the new Elegant Themes website. It is quite simple really when you are using Divi Mega Menu, so here is a tutorial on how to do it.

You can see a live example here

This is what we will make (you can style further such as fonts, adding the button at the bottom etc)

Step 1: Create your mega menu

The first thing you need to do is to go to Divi Engine > Divi Mega Menu and add a new menu and name it something like “All Products” like we have done.

Add a blurb module and in there add a title, some body text and upload an image (see image below). Then head over to the designs tab and set the image placement to be left and for it to have no animation.

Change the font settings so that it looks like the Divi site or how you want it, for this example we did the following

• Heading set to h3
• Font set to Lato
• Heading font bold
• Heading font uppercase
• Heading font color #8f42ec
• Heading font size 18px
• Heading letter spacing 1px
• Paragraph font size 13px

The final thing to do in the blurb settings is to make the whole modulue link to where ever you want it to.

On the row, go to the design tab and set the width to be 100% and the padding to be 0px for top, bottom, left and right.

On the section, go to the design tab and set the padding to be 0px for top, bottom, left and right. Set the border radius to be 8px (see image below).

Step 4: Duplicate blurbs

Now it is all ready, go and duplicate the blurbs and change the text, image and heading colour to be what you want it to be. You may want to add a button or whatever other module you want here too.

Step 5: Finishing Touches

The final thing to do now is to add some custom css to make the blurbs shift slightly to the right when you hover over them.

Add this css to your custom theme css (change #all-products to be # and what ever custom css selector you have given to the mega menu)

#all-products .et_pb_blurb{
    -webkit-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
	margin-bottom: 20px;
}

#all-products .et_pb_blurb:hover{
	    -webkit-transform: translateX(5px);
    transform: translateX(5px);
}

And there you have it, simple yet effective – we hope this has helped you and got your creative juices flowing!

You can download the json layout of this mega menu layout if you want here

We have had a few customers wanting to show the Mega Menus on desktop only. By default, Divi Mega Menu shows it on desktop and mobile. This tutorial will show you how to hide it on mobile.

Step 1:

Create your Divi Mega Menu in the Divi Engine settings as usual. Here is a link to our documentation on how to set this up.

Step 2:

Create two menu items and assign the mega menu custom identifier (CSS class) to the one you want to show for desktop. Assign another custom class to the other that you want to show for mobile. I have added the class “mobile-only” – but it can be anything. See image below. I have labeled the menu items “Mega Menu Desktop” and “Menu Mobile” to be clear on what is happening.

Step 3:

We are doing to add some custom CSS to hide the mobile menu on desktop and hide the desktop on mobile. Below is the CSS and my comments on what each line does.
[css]
.mobile-only {display:none !important;} /*this hides the mobile menu on desktop */

@media all and (max-width: 980px) { /* You can change the breakpoint from 980px to when your mobile menu comes in */
.mobile-only {display:block !important;} /*shows mobile menu on mobile */
.test {display:none !important;} /* hides desktop menu on mobile, make sure you change the word test to be the custom css class you gave for your mega menu */
}
[/css]
Below is how it looks on the frontend now.

I am writing this post because I had some frustrations getting my head all around this, followed so many tutorials online that didn’t work but after much trial and error I have a way that works for me and hope it will help you, learn how to setup event tracking for google analytics.

What are we trying to do?

We want to track in Google analytics whenever someone submits a contact form or clicks on telephone href link. We want to see how many submissions/clicks we have had and on what pages.

What have we set up already?

I assume that you already have analytics set up on your website and it is tracking your visitors.

Process

Step 1: Setup the events in analytics

So I am going to show you two ways to do this – the first is a plugin that makes this all so simple and the second how to add the code yourself in case you can’t add a plugin because it is not a WordPress website or you have some javascript issues.

Method 1 – plugin

Go over and install the plugin Gravitate Event Tracking – https://wordpress.org/plugins/gravitate-event-tracking/ –  which is a lightweight plugin that adds all the code for you.

Next, go to Settings > Gravitate Event Tracking to set up the tracking.

Above you can see the settings page. You can disable or enable the tracking you require.  Let’s just look at one to give you an idea of how it works and then you can replicate this on all or even create your own unique ones.

“All Form Submissions” will track all form submits on your website. You can see that the selector/element is set to “form”. You can change this to a specific form by adding the form class or id for example “form#diviform” and it will only track the form with the id “diviform” – if you want to track ALL form submissions, just leave it as it is. As we have a login form and other forms like our support tickets we ONLY want to track the contact form submission so we need to refine the selector. I have added the id “contact” to our module that has the contact form – you can see the way it is setup below in the screenshot of the code inspect – the form is housed in the div id called contact.

Therefore, to select only this form we want to change “form” to be “#contact form”.

Go ahead and save this now.

Next, we have the Category and Action which can be anything – it makes sense to keep it as best describes what the event is – this needs to be the same in analytics to properly track (see below). The Label section is not a requirement so just leave this as it is or blank if you don’t need to use this. We can get onto this in another post if we want to.

Ok, so I have an event fire that tracks the form submissions on the contact form “#contact form”, with the Category called “Form Submits” and the action called “Form Submitted”. This is great and it will now speak to analytics.

If you are using the plugin you can skip to the section where we setup analytics or read how to do it manually below.

Method 2 – Manually

I am going to put the jQuery code below for the form submission, then I will show you how to do the same for a telephone number click (which you can use to replicate for any other links like email click etc) – at the end I will put the whole code

NOTE:
– Change “UA-xxxxxxxxx-x” to be whatever your tracking number is in analytics
– We have added the code “event.preventDefault();” which stops the default functionality (like form submit for link click) – this allows us to send the tracking code, after 300 milliseconds we then let it carry on as normal.

So as you can see it can be coded but I find the plugin way easier and it is lightweight so don’t worry about it slowing down your site. I thought it would be useful to include the code for anyone wanting to do it manually. This is for advanced users really, a level of jQuery knowledge should be known to change the code to work with the setup that you want.

Step 2: Setup the events in analytics

Ok, so now we have the events firing and sending the data to analytics, we now need to set it up there to receive this information.

Go to your analytics account and click on admin > goals. In there you will see all the goals you have setup – you will most likely have none set up. Click on “New Goal”.

Select custom and press continue.

Next, add the name that describes the goal, select event and press continue.

On the next step you need to add the same category and action that you specified on your website – this way when your website speaks to analytics and says “I have had a trigger on the contact form, it has the category “xxx” and the action “xxx”, analytics knows it is referring to this one. Don’t worry about “verify this goal” as you have just added the tracking code on your website so it is unlikely that it has been sent to analytics yet.

Press save and that’s it – you now will have tracking on the contact form when it has been submitted.

Step 3: Test the event

It takes a while for analytics to start to show the information on your dashboard, so how do we test this? Navigate to Real-Time > Events. Here you can see the real-time tracking of your events. Because I am using the plugin for this example and have not disabled any of the trackings you can see some of the events being tracked (even though I have not added them as goals) – you can see Resized, Links and Scrolled (refer to gravitate admin settings).

So how do I test the form? Go to your contact form and make a form submission whilst on this real-time events page. Once you have made the submission, wait a few seconds whilst the event is being tracked and you will see it appear like the screenshot below. As you can see it has the name of the category and the action (these should match up with the goal you set in order to translate this to statistics).

If you see this then it is all working. If you dont see this appear within 10-20 seconds then there must be an issue.

Debugging

If you cannot see the test there may be a javascript error on your site, try disabling the plugins and child theme. You can try coding it yourself (using the example above), you can add “console.log(“submitted”);” just after the line “jqForm.submit(function(event) {“. Then in inspect console when you submit the form you should see the word “submitted. This means that the code should be firing correctly, if you dont see the word “submitted”, it is most likely a js error above this code.

Step 4: Statistics

Now you have it all setup and working, within a week or so you will start to get the data collaborated. By this time analytics will have enough data to show you information.

Go to Conversions > goals > overview to see an overview of all your goals. In the screenshot below you can see a very simple example of the form submit I have done above showing one submission for the week. I can see the goal name that was completed (form submits) and I can see where it was completed (contact page)

You can dive much more into using the data and there are a number of great resources out there, we would love to hear of any that you use or any that might of use for others. This is just setting it up – the rest is an adventure waiting for you to start!

Hope this helped 😀

Please let me know if I need to explain any of this in more detail

We love icon fonts and use both The Elegant Icon Font (by Elegant Themes) and Font Awesome on many of our projects – however felt there is lacking the more “detailed” icons. We have started a journey to bring you these. Our first pack is aimed towards Creative Agencies and include icons that can be used to outline different services or ideas in the web, design and print world.

Divi Engine Icon Font gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. The result is crisp, beautiful graphics on any display (including Retina displays).

First thing you need to do is to download the icon fonts, if you haven’t done so you can download it with the link at the top or bottom of this post. Once you have downloaded it, extract the folder. In this folder you will see a css file called “divi-engine-wb-font.min.css” and a folder called “fonts”. Follow the steps below!

Step 1

Upload the files (divi-engine-wb-font.min.css and the folder called fonts) to your child theme. If you dont have a child theme you can read our other resource on creating a dynamic child theme and you can download a template from there.

Step 2

Enqueue the css file so that it loads on your site. To enqueue the css file add the following code to your child theme’s function.php file.

[php]

add_action( 'wp_enqueue_scripts', 'divi_engine_creative_icon_font_enqueue', 20 );
function divi_engine_creative_icon_font_enqueue() {
wp_enqueue_style( 'divi-engine-wb-icon-font', get_stylesheet_directory_uri() .'/divi-engine-wb-font.min.css', array(), '1.0.0' ) ;
 }

[/php]

Step 3

Now you are ready to use the icon font. You can use it in two ways – add the code in the html or in the css. We have included all the code you need for each icon above. We will use the icon called “icon-browser” as an example.

HTML EXAMPLE
Copy the first box of code where it says “class”. Add the following html to display the font

[html]&amp;amp;amp;amp;lt;div class=&amp;amp;amp;amp;quot;icon-browser&amp;amp;amp;amp;quot;&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;/div&amp;amp;amp;amp;gt;[/html]

This will display the following:

So all you need to do is to copy the “class” box and paste it in a div to show the icon.

CSS EXAMPLE
Copy the second box of code where it says “content”. First create a div or a span or any html tag and then give it a class. It doesnt matter what the class is but it is helpful to have it named the same as what the icon is.
Below is my html

[html]&amp;amp;amp;amp;lt;div class=&amp;amp;amp;amp;quot;browser&amp;amp;amp;amp;quot;&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;/div&amp;amp;amp;amp;gt;[/html]

or

[html]&amp;amp;amp;amp;lt;h3 class=&amp;amp;amp;amp;quot;browser&amp;amp;amp;amp;quot;&amp;amp;amp;amp;gt;Wow, this is awesome!&amp;amp;amp;amp;lt;/h3&amp;amp;amp;amp;gt;[/html]

Now go and add your css – target the class you just created using ::before

[css]
.browser:before {
content: &amp;amp;amp;amp;quot;\e02f&amp;amp;amp;amp;quot;;
}
[/css]

You can go even further and change the size of the icon, color, drop shadow and even animations for the more advanced user.

[css]
.browser:before {
font-family: de-wb-font;
content: &amp;amp;amp;amp;quot;\e02f&amp;amp;amp;amp;quot;; /* Replace this line with your desired icon code */
font-size: 100px;
color: #83bf5e;
}
[/css]

This will display the following:

Wow, this is awesome!

The Results

As you can see above it didnt nessesarily change the gtmetrix score but did reduce the site load time from 4.5s down to 2.7s ! A MASSIVE improvement. So this sounds great, but isn’t it hard to move servers with issues along the way? Not really with Cloudways. See how to below!

Step 1 – Install Cloudways Migrator

So the first thing to do is to install the Cloudways Migrator – this does all the work for you. Go to your plugins > add new and search for “Cloudways WordPress Migrator”. Install and activate.

Step 2 – Filling in the fields

You will now be presented with various fields to fill out.

Destination Site URL:
This would be your application url. When you first create an application it will generate a url that starts ends with cloudwaysapps.com. This would be it. Example: wordpress-215435-5214783.cloudwaysapps.com. Once the site has been moved you can then change the primary domain. You can find this under the Domain Management tab under your application settings

Application Folder Name:
This is application name – you can find this as it is your db Name and username. So go to Access Details tab under your application settings and look under MYSQL ACESSS – there you will see a wierd name – something like hdnalugdjn – that would be the folder name.

SFTP Server Address:
Go to your server settings page. Under master credentials you will see your Public IP. This is your server address

SFTP Username:
As per the server address, but your Username would be what you need to enter here.

SFTP Password:
As per the server address, but your Password would be what you need to enter here.

So filled out it would look like:

Step 3 – Migrate and let them do all the work

Press migrate and you will see the progress of it all being moved. Go for a cup of coffee, stretch your legs, do whatever and when you come back it will be moved. It will show that is is complete.

Step 4 – Change Primary domain

So the next thing to do is to change the primary domain name from the long name ending in cloudwaysapps.com to your domain name that you want. So using the example above I would change wordpress-215435-5214783.cloudwaysapps.com to be diviengine.com.

NOTE: This will update the database too so no need to be changing it there, it will change all the url in the database to be your new primary domain.

Step 5 – Configure

After this we like to do a few things:

1 – Install an SSL Certificate – https://support.cloudways.com/how-can-i-get-an-ssl-certificate-for-my-application/
2 – Rename application folder name for better UX in ftp – https://support.cloudways.com/how-to-rename-your-web-application-folder/
3 – Remove default themes and plugins that get added when setting up a Cloudways WordPress application.

Tell us what you think as it saved us around 1.5 seconds in load time.

Once installed you will see the new menu appear – Divi Engine.

1. Hover over Divi Engine and click “Password Protect Sections”.

2. Click on “Add New” to add a new layout that will be password protected.

3. Add your desired content using the Divi Builder

4. Enter in your settings

• Enable/Disable login form to be shown to logged-in users.
• Add a password for the restricted content
• Choose a unique shortcode name – this can be anything, but it is advisable to create one that describes your content as when you look at the shortcode name, you can then know what it is showing. In the example below, I have just named it “password-protected-section”, you can name it anything really – for example “image”, “123” or “my_custom_shortcode”.

5. Customise the form design

Use our simple colour pickers and number sliders to change the design of the form inputs and button to either match your design or have something completely different.

Leave them blank to inherit the style of your site.

6. Add the Divi Protect module to your page

Now go to your page and add the new “Divi Protect” module. The only setting here you need to be concerned with is the dropdown. Select your section from the dropdown, give the module a name if you wish and save.

It will now show!

Alternatively, you can add a shortcode. Add this shortcode that you have named in the previous step to either a code or text module on your page.

For example: [password-protected-section] or [image] or [123] – what ever you called it, add [] around the name.

Finish!

Visit your page to see the new login form.

What is Open Graph?

Open Graph was introduced in 2010. It is the link between your website and Facebook – it speaks to Facebook and tells it what to show when you share a link. You have a degree of control over what travels across to Facebook from your website.

Why do I need to code it, surely there is an easier way?

Yes! Yoast SEO plugin does all this for you. It picks up the first image on the page and the meta description etc and feeds this back to Facebook. We use Yoast and it works perfectly.

So when would you need to know how to edit the code that gets sent to Facebook?

1. If you are using Divi Nitro and are deferring you images, you will need to change the “open graph image” as the images dont load until after the whole site is loaded.
2. If you only have svg’s on your site – an svg is code and Facebook can only read an image format.
3. If you want to show an image on Facebook that is not visible on your webpage.

Unfortunately by deferring images and using svg’s to speed up the site – this will impact what will be displayed on Facebook when you share your URL – but we have an answer for you!

Edit your header.php file

Open graph needs to be placed in your <head> tag of your site. So go to your child theme and edit your header.php file. If you don’t have this file in your child theme, just copy the Divi header.php and paste it in your child theme.

Once you have done this add the following code just after the <head> tag.

We recommend you use an image that is 475 x 249 pixels so it fits perfectly on the share screen.

Here is a screenshot our our header.php file with the code implemented above.

“if (is_page()) {?>” => this means that if the page you are viewing is a page and not a blog post. This allows you to have the featured image show on the blog posts.
og:image:type => this is the image type that you are using.
og:image:width => the width of your image
og:image:width => the height of your image
og:image => the url of your image

There are many more than you can add – see a list of all of them here

We have only added the above with the assumption that you are using Yoast SEO to do the rest.

I’ve added the code, now what?

So you’ve added the code and shared your URL on Facebook, but nothing shows up? Well you have to tell Facebook to empty its cache files of your site. You can do this by going to Facebook’s debug tool.

Enter in your URL and press debug. You will see a page showing all the information with warnings with what you don’t have set up. If it is still showing your old image or no image – click on the “Scrape Again” button next to the title “Time Scraped”. This will gather the information again and cache the files. You will see a preview of how your link will look.

So you have changed the image, what else can we do?

1. You can add multiple images so that a “slideshow” appears – the user can scroll various images.

Just add another “og:image” property below the first one like so

and so on.

2. You can specify an image for a particular page you want. This requires a bit more coding but don’t be scared.

Here is an example of code that shows per page ID

“if ( is_page( ‘356’ )) {” => this is saying that if the page that is being viewed or linked to is 356, then do something. So what we are saying is that if the page ID is 356, then show the image that we want for that page. “IMAGE_FOR_PAGEID_356” needs to be changed to the URL of the image we want to show.

“elseif ( is_page( ‘390’ )) {” => this means that if it isn’t page 365 and is page 390 then show the image we want for page 390. You can add many more – just use the “elseif” – copy the code from elseif down to the line above “else” and keep pasting for how many you want.

“else {” => This means that if the page is none of the above, then add the image. This is useful if you have a number of pages and dont want a specific image but rather a generic one.

Final thoughts

We are still learning about this and are constantly learning on the best method. If you do know a better way, please let us know as it can help many!

We hope you found this useful, please ask any questions you may have.

The reason for this post

So during my adventures in web design I have come across a few hurdles – one being the CSS delivery.

It really frustrates me when I make a CSS change to my file, upload it to the server, clear Cloudflare and what ever caching plugin I am using and the CSS changes don’t show on the site. This is due to the fact that the browser (chrome, Firefox or whatever) is caching the CSS so is showing the old version, even though there is a newer version available.

So the old solution for myself was to clear my browser cache and hey presto, the changes appear! This was ok, but when a client calls to say that they cant see it, you say clear your browser cache – but what about their customers? Do we have to tell everyone to do the same? Surely there is a better way?

Well YES there is ! Using dynamic CSS basically does this. It forces the browser to re-download the CSS file when ever there is a new version. So it still gets cached until your server says: “Hey, I have a new version for you”. Brilliant hey?

How does the browser know if there is a newer version?

Well it is quite simple really. Have you ever seen a version number after a script such as:

[html]/wp-content/themes/Divi/style.css?ver=3.0.34[/html]

Well the “?ver=3.0.34” is the version of the CSS file. If you increase this number the browser will know that there is a newer version and download it automatically.

Just for your knowledge – ver=3.0.34 is the Divi version that the site is using, so if you update your Divi, the browser will know and download this version.

So the next question is how do you change the version number of your child theme css every time you make a change and upload it to your server?

How to add Dynamic CSS to your child theme

In a previous post (here) we spoke about how to properly call your CSS, to not use @import but instead use enqueue to call you CSS.

Dynamically calling your CSS takes this process one step further.

Just to refresh your memory, we add the following in your functions.php to normally call your CSS

[php]
add_action( 'wp_enqueue_scripts', 'divi_engine_child_theme' );
function divi_engine_child_theme() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
[/php]

Now to dynamically call your css we need to add a special parameter to the style.css that changes the version number. There are a number of ways to do this. Whilst experimenting we came up with a solution that worked well – but thanks to the a guy called Eugene Kopich on the Elegant Themes Community Group on Facebook we have a slightly better version. So we will go with his 😀

First we enqueue the Divi style.css the same way, then we dequeue (remove) the child theme css and then finally enqueue (add) another version of the style.css that changes the version number every time you upload a newer version. The code (“filemtime”) gets the time that the file was modified (overwritten on the server) so the version number now becomes the time you added it. When you add a newer version, the time changes and so does the version number. Therefore the browser knows that there is a newer version and downloads it automatically!

[php]
add_action( 'wp_enqueue_scripts', 'divi_engine_dynamic_child_theme', 20  );
function divi_engine_dynamic_child_theme() {
	wp_enqueue_style( 'parent-theme', get_template_directory_uri() . '/style.css', array(), et_get_theme_version() );
	wp_enqueue_style( 'child-theme', get_stylesheet_uri(), array(), filemtime( get_stylesheet_directory() . '/style.css' ) );
}

function custom_dequeue() {
	wp_dequeue_style( 'divi-style' );
}
add_action( 'wp_enqueue_scripts', 'custom_dequeue', 1  );
add_action( 'wp_head', 'custom_dequeue', 1 );
[/php]

Horaay

That’s it, how when you make a change, it will force the browser and you won’t have issues with clients and customers seeing an old version of your CSS.

Download a template

We have created two templates for you to download. One that is the normal and one that is the dynamic version.

Feel free to use these as your “starter” child theme files. You can change the theme name, URI etc.. Just leave the Version as Divi. Oh and change the screenshot.png to be your new website 😀

Hope this helps and let us know how you get on!