When it comes to areas where there is lot of room for better security in WordPress plugins, two that come to mind are the security of plugins that handle business related task and the security of personal information stored in plugins. Those came together in a vulnerability we happened to run run across in the plugin UpiCRM while looking into the
We recently have been trying to get an idea of how effective it would be to try to proactively catch some vulnerabilities when changes are made to WordPress plugins that include those vulnerabilities. Seeing as arbitrary file upload vulnerabilities are at the top in terms of exploits that seems like one area where it might make sense to focus on,
In today’s Divi tutorial, we’re going to show you how to add social icons to the primary menu of your Divi website. By following this tutorial step by step, you’ll be able to add social icons to any website you create–whether it is for yourself or a client.
We already have the ability to add social icons directly into the header and footer of a website with the Divi theme customizer. But if that’s not what you’re looking for, this tutorial might help you out because in many cases; people prefer having the social icons in their primary menu instead of the header or footer of their website.
We’ll show you exactly how you can add them, how you can customize them and how to open them into a new tab. These are all the things you really need to know so that the social icons in your primary menu can bring added value to your whole website.
Why Add Social Icons to The Primary Menu?
Websites and social media channels are in a lot of cases complementary. Not all the content that’s being shared on a website appears on the social media channels and vice versa. That’s why promoting your website on your social media channels and your social media channels on your website are not uncommon and frankly; highly encouraged.
You want people to interact with your company or brand in the way they’re most familiar with. Your website is usually ‘unknown territory‘ for them. The barrier of contacting you directly through your website might therefore be bigger than for social media channels. Most people who visit your Facebook page or Twitter page are already integrated into the platforms and the comfortable feeling can influence their behavior positively.
That’s why, in overall, putting socials icons on your website is very recommendable. But why share them explicitly in your primary menu? We’ve listed two of the main reasons.
Easy To Find/Menu Follows Visitor During Their Visit
When you’re adding social icons to your website, you want them to be as visible as possible. People should not have to put in effort to find the social icons on your website. That’s where putting the social icons in the primary menu can make the difference. The primary menu follows a person throughout their whole stay on your website. There’s no need to go looking the icons, the icons come to you. The only thing the person has to do is click and they’ll get there.
The primary menu follows a person throughout their whole stay on your website. There’s no need to go looking for the icons, the icons come to you. The only thing a visitor has to do is click on them and they’ll get there.
As mentioned before; social media channels and the websites are complementary. They work together and usually have the same goals such as informing potential leads and attracting them to the services or products that are being offered. The more they’re confronted with them, the more likely their curiosity will get triggered
To support the connection between the website and social media channels, it’s a good thing to confront the visitors with the social icons as often as possible. The more they’re faced with them, the more likely their curiosity will get triggered and the more likely they’ll eventually click on them.
Install Font Awesome
First of all, we need to install Font Awesome into our WordPress website. We’re going to do this by adding some CSS code into the Theme Options of Divi.
Open your WordPress website, go to Divi > Theme Options > Navigation and paste the following code in the section:
Font awesome should now be added to the fonts that are being used on your website. You can now add these icons to your primary menu by following the next part of our post step by step.
Start Creating Primary Menu
Most probably, you’ve already created your own customized primary menu where you have listed all the pages you want to appear in the primary menu of your website. If you haven’t done that yet, go to the ‘Menus’ page within Appearance and create a new menu.
Next, name the menu, add the pages you’d like to appear in your primary menu and select the ‘Primary Menu’ option below.
Add Social Icons
Moving on, we want to add the social icons. When creating the primary menu, you can choose where you want your social icons to show up. In most cases, they’ll come right after the pages, but you can put them first as well. There are social media icons available for all the important and most popular websites out there; from Facebook to Twitter, Instagram, LinkedIn and more.
Start by opening the following link on the Font Awesome website. We’ll need this website for the next part of this post where we’ll be adding the icons manually.
Add Icons Manually
The same way of working applies for each social icon that you add to your primary menu. As an example, we’ll show you how to add the Instagram icon. For all the other icons you’d like to add as well; know that it’s the same way of working (only the icon, HTML code and URL differ accordingly).
Open the ‘Custom Links’ option and you’ll see two fields appear: URL and Navigation Label. Obviously, the URL field is where you type down the URL that leads a visitor to one of the social media channels. In this example, we want to the icon to lead to Instagram, so just type down your Instagram URL.
Next, go to the Font Awesome website in your browser and look for the Instagram icon through the search bar. Likewise, you can search for the Facebook, LinkedIn and any other icon.
Once you’ve clicked on the Instagram icon, you’ll see that the website provides the following HTML code:
This is the exact code we need to use in the Navigation Label field, so go ahead and complete the custom link by copying and pasting the code into the field.
Repeat the same process for each one of the social icons you want to appear in your primary menu and take a look at how it looks like on the front end of your website.
Change Appearance of The Social Icons
Collective Changes to the Primary Menu (Including Social Icons)
The Theme Customizer allows you to make all the appearance changes you’d like to make to your primary menu in one place.
The changes that you can make to the primary menu with the Divi options apply to the social icons as well. When you’re giving a certain color to your primary menu, for instance, the social icons will have the same color. That’s because we’re using a font instead of an image to make this work.
You can make all these changes you want to make to the appearance in the Theme Customizer by going to Header & Navigation > Primary Menu Bar. The changes that you make apply in real-time and give you a good perspective on how you want your primary menu to look like.
Open Social Icons in New Tab
This part of the post is something extra you can do with the social icons. You probably don’t want to send your visitors away from the website, even though they’re going to your social media channels. You want to keep both interactions alive for as long as possible by opening the social media links into a new tab everytime someone clicks on them.
We can easily make the ‘Open in New Tab’ option work on all the social media icons by going back to the menu we’ve created before. We need to make all the adjustments manually to each one of the icons. In this example, we’re going to make the changes to the Instagram icon.
Go ahead and delete the URL you’ve provided in the URL field and paste the following code into the navigation URL instead:
Do the same thing for each one of the icons if you want them to open in a new tab. Each time a visitor clicks on them, they will open in a new tab which allows you to keep your visitors around as long as possible.
This tutorial will surely help you integrate social icons into your own Divi website in the way you want. You can customize them and make them fit with the rest of your primary menu. If you have any questions or suggestions; make sure you leave a comment in the comment section below. We’ll stay in touch and try to answer all the questions or suggestions you have.
There are plenty of marketing tools that enable you to create responsive email designs with ease. The thing is, you might prefer to have more control over how your emails look, and the best way to do so is to design them from scratch. Using a framework such as Foundation for Emails provides you with a superb compromise. You won’t need to design every single component from scratch, but you do get full control over how, when, and where to use them.
In this article, we’ll firstly explain what email frameworks are and how they can help you. Then, we’ll move on to discussing Foundation for Emails, and how you can use it to create your own custom, responsive email campaigns. Let’s get to work!
What Email Frameworks Are (And How They Can Help You Create Better Emails)
Frameworks still require you to do some coding, but the process is very simple for emails.
In general, a framework is a compilation of practices, files, and code designed to aid in the development of specific types of products. Think of them as building blocks of code that can help you create complex projects faster, by enabling you to not reinvent the wheel each time.
There are frameworks for email too, and that’s what we’re going to be talking about in this article. Let’s explore some of the benefits:
Pre-built elements help you design emails faster. Nowadays, most emails include elements beyond images and text, such as buttons and menus. Including these elements can be time-consuming, but a framework enables you to insert and customize them instantly.
Responsive out of the box. As more and more people turn to mobile devices, you need to ensure your emails display well on their screens. Most modern frameworks are responsive by default, which means you have one less thing to worry about.
Templates can help you kickstart your designs. A lot of modern email frameworks include a variety of templates to help you create campaigns quickly.
As you can see, the common theme here is that frameworks enable you to save time. There are a lot of cases where you’ll want to code your projects from scratch, but a framework that can enable you to get things done faster at a higher quality is worth using.
Before going any further, it’s important to note there are two Foundation frameworks available online – Foundation for Sites and Foundation for Emails – and we’re going to focus on the latter throughout this article. The main selling point is its responsive grid. This type of system isn’t revolutionary, but Foundation’s popularity is based on its ease of use.
Picking up the framework is fairly straightforward (even if you don’t have any coding experience), and you can choose between two versions – one based on Cascading Stylesheets (CSS) and the other on Sass. Naturally, the Sass version enables you to save even more time by eliminating the need to repeat CSS stylings, but it does require some familiarity with Node.js.
Finally, Foundation for Email also provides you with plenty of ‘patterns’ such as buttons and menus to make your job even simpler. To save more time, you can even use a template instead of designing a layout from scratch.
Uses a responsive grid to create modern email campaigns.
Offers either a CSS or Sass version of the framework.
Lets you take advantage of patterns to add common elements to your emails quickly.
Uses layouts to streamline the email creation process even further.
How to Use Foundation for Emails to Create Modern Designs (In 4 Steps)
As we mentioned, there are two versions of Foundation for Emails. For this section, we’re going to use the CSS variation since it requires less work to set up. Plus, the end results should look the same – all that changes is how you get there.
If you want to see the Sass version in action or learn more about how to use it, you can start with this great tutorial.
Step #1: Download the Foundation for Email Files
First of all, head to the Foundation for Email Getting Started page, and click on the Download Starter Kit button under the CSS Version subheading:
Once you’ve got the file, unzip it and extract its contents into a new folder. At this stage, your folder should contain an index.html file and two subfolders – one for your CSS and another for your templates.
For now, run your favorite text editor and open the index.html file with it. It should be pretty bare, but we’ll fix that in a moment.
Step #2: Familiarize Yourself With the Grid System
Foundation for Email’s responsiveness is based on its flexible grid system. If you’re putting together an email from scratch, you’ll want to create your own grid to segment your email’s sections. To do that, we’re going to use three different components: containers, rows, and columns.
Open your Foundation’s index.html file within your text editor, and scroll down to the body section:
As you can see, the body of your email contains a preset table that we’re not going to touch. Instead, we’re just going to add our own grid elements to the section where it reads . Let’s start with the code you need to use for your containers:
Now, let’s add a row in there:
Finally, we can divide that row into columns:
Keep in mind that each row consists of up to 12 columns. The code above tells your email client that it should display your content using the full 12 columns on small screens such as mobile devices (small-12), but only take up six on desktops (large-6).
The problem is, if your email is showing on a large screen there are six empty columns, so we need to add a second table to fix it:
As you can see, both columns are basically the same. However, they have two different classes, first columns and last columns. These tell your email client which are the first and last columns on your row, and any columns in between don’t need to use them.
If you were to now open your index.html file in a browser, here’s what you’d see:
It’s pretty bare, yes, but the mechanics should be evident at this stage. Each email can have as many rows as you want, and you can have up to 12 columns for each row. For now, keep playing around with the grid system until you find a layout you like, and use text placeholders to help you identify them until you begin to add elements.
Step #3: Add Components to Your Emails
Foundation for Email packs in plenty of components, and the most commonly used are buttons, background images, and subheadings. They’re pretty simple, so let’s go through them in order. To add buttons, you’ll need to use the following code within one or more of your columns:
This code adds a simple small button with a green background to your email. The key elements here are the tiny and success classes. The first governs the size of your button, and the second its color. Instead of adding all of the available classes here, we’re going to link you to Foundation’s official resource on buttons where you can peruse them at your leisure.
Now let’s move on to background images. These are a bit trickier, because you need to use the wrapper class to make them take up the entire width of your row and assign a specific background to them using CSS:
Last but not least, let’s talk about subheadings. These are the simplest of the bunch – all you need to do is wrap your text within the requisite tags:
h1. This is a very large header.
h2. This is a large header.
h3. This is a medium header.
It’s as easy as that! Using these three elements is enough to create some good-looking emails. The secret, of course, is to style them with CSS to your heart’s content, which brings us to our final step.
Step #4: Style Your Email Using CSS
Some email clients (such as Microsoft Outlook) strip some of the style tags from your HTML files. This is done so that emails render without any issues, as well as to remove potential security threats. However, the result is that your emails will look pretty boring unless you add your CSS directly to your HTML (or inline it).
That way, both your content and its style will be loaded as a single file, and they should work perfectly on most modern email clients. Here’s how an HTML element with inlined CSS looks:
This can get a bit messy, so we recommend working on your HTML and CSS files separately, then using a tool such as the Foundation Inliner to combine them for you. Simply paste in your code, click on a button, and it’ll take care of the rest for you.
Once you have your inlined HTML file, you can go ahead and test it using an email marketing tool, which is always a good idea, before sending it to your subscribers.
There are plenty of ways to create functional and responsive emails. However, using a framework such as Foundation for Emails is a great option if you’re looking for flexibility. It enables you to either design emails from scratch using pre-built components, or speed up the process by using templates. Regardless of what you choose, it should cut your time spent creating emails drastically.
To recap, here are the four steps you need to create modern emails with Foundation for Emails:
Download the framework’s files.
Familiarize yourself with the grid system.
Use components for your emails.
Style your email using CSS.
Do you have any questions about how to use the Foundation for Emails framework? Ask away in the comments section below!
Article thumbnail image by Faberr Ink / shutterstock.com.
When I’m navigating a website, one of the navigation tools I look for is breadcrumbs. They’re great for showing you where you are within the navigation hierarchy and make it easy to find other articles within the structure. Breadcrumbs can be added to Divi with a plugin called Divi Breadcrumbs Module.
Divi Breadcrumbs Module is a third-party plugin from CodeCrater that creates location-based breadcrumbs. In other words, it shows you the hierarchy of the categories of the page you’re currently reading. The also provides links for each element in the hierarchy so you can easily see the latest posts for each of the categories. The breadcrumbs are highly customizable.
Using the Breadcrumbs Module you can place breadcrumbs on individual pages and posts that use the Divi Builder. It also works with Extra and the Divi Builder plugin. In this plugin highlight we’ll take a look at plugin in both Divi and Extra and see some of the ways it can be customized.
Why Use Breadcrumbs?
Breadcrumbs leave a trail that shows the category hierarchy and is a great way to improve navigation. They don’t take up a lot of space and they can reduce and simplify the number of actions a user has to take to navigate your content. This is especially important if you have a lot of embedded categories.
Divi Breadcrumbs Module improves SEO by providing Google with hierarchy information about your website. This means you should choose keywords for your categories that you want to rank for. This also forces designers to use category names that are easier to understand.
Breadcrumbs improve both UX and UI. They shouldn’t take the place of your standard menu navigation but they can build interest and keep visitors on your site longer.
Divi Breadcrumbs Module
Upload and activate the plugin as normal. The module will appear in a bright red called Hollywood Cerise. Many breadcrumbs plugins require Yoast because they’re pulling their breadcrumbs from the Yoast plugin, but Divi Breadcrumbs Module doesn’t require Yoast. Instead, it creates its own breadcrumbs. So there are no other plugins required.
Content settings include hiding the home breadcrumb, adding your own home breadcrumb text, choosing the separator icon (from 12 choices), hiding the current page, background settings, and the admin label. Design settings include style for the icons, text, and links, and the standard spacing options.
Divi Breadcrumb Module Examples
This is a basic article layout with the post title module with image, breadcrumbs module, and the articles’ text module. I left the breadcrumbs settings at their defaults.
This is how the module looks with the default settings. The links for Home and Fencing are in blue to show they’re clickable. The breadcrumbs can be placed on the left, centered, or on the right.
In this example I’ve placed the breadcrumbs in the center and added a gradient background and increased the font sizes for both the article’s title (14 point) and the links (12 point). The text is white. Since they’re printed over a gradient I made them the same color. I also changed the line separator. In a regular post I wouldn’t draw attention to breadcrumbs with a gradient background, but this shows what you can do with it.
Adding Breadcrumbs Under a Fullwidth Menu
The best place to add breadcrumbs is at the top of the page. In this example I created a post using a fullwidth menu and set the padding and margins to 0 for both the fullwidth section and the standard section. I embedded the categories to show the hierarchy.
I changed the breadcrumb’s font colors to match the fullwidth menu, but then softened them so they don’t stand out. I changed the separator to an arrow and removed Home and the current page from the breadcrumb’s navigation.
Notice the breadcrumb’s follow the same embedded structure as the categories in the image above it. The article itself also includes those categories, but there’s no hierarchal structure. They can be removed from the title if you don’t want to show the same categories multiple times.
In this example I placed the background color in the row, made it full width, changed the color of the font so it doesn’t overpower to menu, and added 1 pixel to the letter spacing. Small changes can make a big difference.
This is the same settings using the background within the breadcrumbs module instead of the row. I added padding to reduce the width. I like that it creates a small element that looks separate but attached to the menu above it.
Styling the Separator
The separator also has styling features. Change the font style, size, color, spacing, and height. Between the separator options and the styling features you can easily make separators to match your website’s branding.
This example uses the default font in purple and a font size of 20 for the separators.
Here’s the same separator with a Georgia font for the separator. Simply changing the separator’s font is enough to give it a new look.
Here’s the same separator using the Black Ops One font. It’s bolder and stands out more.
This is Droid Serif at 20 point font with a line spacing of 4 pixels. I’ve made the font a dark red.
Even the dots change shape with the font choices. This one is Passion One at 24 point. It’s worth spending some time to experiment with fonts, colors, and sizes to create something unique. It’s easy to do with the standard styling controls.
Using Divi Breadcrumbs Module with Extra
Divi Breadcrumbs Module works with Extra and the Divi Builder plugin. Here’s a look at Extra with breadcrumbs below the image on the right. I included the post’s name since the breadcrumbs are so far away from the title at the top of the screen. It uses a bar separator.
Ideally the breadcrumbs would be at the top of the page. In my page layout the breadcrumbs module is at the top. The reason it shows below the image is I’m allowing Extra to display the featured image.
In this example I’ve placed the image within the layout and set the section to have 0 top padding. I removed the current post and made the separator red.
License, Updates, Support
The plugin can be installed on unlimited websites for you and your clients. Updates are for life. It includes six months of support.
Breadcrumb’s are one of those little things that you notice when it’s missing. If designed correctly they’ll be there when the user needs them and stay out of the way when they do not. Divi Breadcrumbs Module is a great way to add them to your Divi pages and posts and they can easily be styled to fit within your site’s branding. It’s simple and intuitive.
If you’re interested in adding breadcrumbs to your Divi layouts, Divi Breadcrumbs Module might be the plugin you need.
We’d like to hear from you! Have you tried Divi Breadcrumbs Module? Let us know about your experience in the comments below.
A vibrant comments section is a great way to build a sense of community on your WordPress site. But if you want people to actually comment and engage with your site, you need to create a space where people actually want to comment. And one WordPress plugin that might be able to help you do that is Disqus.
Disqus is an alternative comment system that you can use on your WordPress site. It has both positives and negatives, both of which I’ll discuss in this post. Then, I’ll give you a step-by-step guide to adding Disqus comments to your WordPress site if you think the pros outweigh the cons.
What is Disqus?
Disqus is a platform-independent comment system that you can use to completely replace the native WordPress comments on your site.
You’ve probably encountered Disqus comments at one point or another, whether or not you knew it. If you’re not familiar, the standard Disqus interface looks like this:
In order to leave comments, your visitors need to be signed into their Disqus account. But the neat thing is that this account isn’t specific to your site. So if they’ve previously created a Disqus account to comment on another site, they can comment on any other site using Disqus with that same account.
Whether or not using Disqus is a good thing or a bad thing has become a bit of a hot topic in the WordPress community, so let’s dig into the pros and cons of using Disqus to replace the native WordPress comments.
Pros of Using Disqus for WordPress Comments
Because Disqus accounts are global, users will get notifications of comment replies even if they’re browsing other sites.
Disqus has a huge community, so there’s a decent chance users will already have a Disqus account.
Because users need a Disqus account (and Disqus has anti-spam features), using Disqus will eliminate most comment spam.
Anecdotally, some webmasters report higher comment counts and engagement after switching to Disqus.
You can moderate comments via email, instead of needing to log in to your WordPress dashboard.
Comment threading is superior to native WordPress comments, which makes for easier discussions within the overall comment section.
If you use the free Disqus Conditional Load plugin, your site might actually be faster with Disqus.
Disqus removes comment handling from your database, which lessens the work your database has to do (and again, can improve performance). You can also import your comments back into your database if you stop using Disqus.
Cons of Using Disqus for WordPress Comments
Recently, there was talk of Disqus requiring payment to disable ads. Currently, it appears small publishers still can remove ads for free after all – but it’s something to keep an eye on.
While Disqus does reduce your database’s workload, it does so at the expense of adding a heap of external requests (though the requests are asynchronous).
If a user doesn’t already have a Disqus account, it makes it more difficult for them to leave a comment than the native WordPress comments.
While some webmasters report more engagement, WP Beginner actually tripled their engagement when they stopped using Disqus.
There are legitimate privacy issues given that part of Disqus’ monetization model is selling your commenters’ aggregate data. Chris Lema has written about this specific issue in the past.
While the pros list might appear to outweigh the cons at first site, the privacy of your commenters’ data is something you should definitely consider before making the switch away from native WordPress comments.
How to Add Disqus Comments to WordPress
Assuming you want to go ahead with Disqus comments, I’m going to show you two different ways to get them set up on your WordPress site.
First, I’ll show you how to do it using the official Disqus WordPress plugin. Then, I’ll show you a secondary method using a popular plugin called Disqus Conditional Load.
Disqus Conditional Load handles both adding Disqus comments AND lazy loading those comments. That is, if you use it, you don’t need the official Disqus plugin.
I recommend the Disqus Conditional Load method because it will reduce your page load times. But I also understand if you prefer to stick with the official plugin.
Note – the process is identical no matter if you’re using Divi or another theme.
Add Disqus Comments to WordPress With the Official Plugin
Once you activate it, set up only takes a couple of minutes. Get started by going to Comments → Disqus. Then, click the button to Upgrade your database to support Disqus:
Next, you’ll see a screen asking for your username details. If you already have a Disqus account, you can enter them here. Otherwise, click the Don’t have a Disqus Profile yet? button and sign up for an account first:
If you’re signing up for a new account, Disqus will put you in a signup flow that gives you the option to choose I want to install Disqus on my site. If you already have a Disqus account that you just use for commenting (like I did), you can access this flow directly by going to this link:
Then, give your site a name and a category and click Create Site:
On the next screen, select the Basic plan unless you want to pay:
Now, you’re ready to hop back to your WordPress dashboard and log in to your Disqus account.
On the next screen, you can select the website that you created in Disqus’ interface:
And that’s literally all there is to it! Disqus comments are now active on your site:
You’ll be able to moderate comments via the Disqus interface. You can also configure additional details about how your comments function from the Disqus website.
Add Disqus Comments to WordPress With Disqus Conditional Load
While Disqus Conditional Load is not an official plugin, it’s a standalone plugin that includes everything in the official Disqus plugin PLUS performance-enhancing lazy loading.
It’s also still quite popular, with over 10,000 active installs and a 5-star rating.
Gives you the exact same interface as the official plugin.
Tacks on a new DCL Settings tab.
The first thing you need to do is go to Comments → Disqus and configure Disqus. Again, this is 100% identical to the official Disqus plugin, so you can just follow the steps I outlined above.
Once you configure the basic Disqus comments, head to the DCL Settings tab to configure lazy loading. In the free version, you have two options:
On Scroll: loads the comments when a user scrolls far enough down the page.
On Click: only loads comments if a user clicks a button to load them.
You can also configure other settings on this page pertaining to custom CSS, caching compatibility, and more. Usually, you can leave these as the defaults, though.
And that’s it – all the same Disqus functionality, but with better performance!
Which Plugin Should You Use to Add Disqus Comments?
To give you some data to further guide your plugin choice, I thought I’d run a quick test on my test site to see the difference in page load time between the official Disqus plugin and Disqus Conditional Load.
With the official Disqus plugin, my test site loaded in 763 ms.
With Disqus Conditional Load, my test site loaded in a slightly faster 676 ms. But what’s even more interesting is the massive drop in page size and requests. The page using Disqus Conditional Load had 100+ fewer requests, as well as a smaller file size.
Everything else about the pages was identical. As you can see, there is a very real performance benefit to using Disqus Conditional Load over the official plugin.
Wrapping Things Up
Disqus comments are one of those things you might just need to test for yourself. Plenty of webmasters have said that Disqus boosted their engagement…while others, like WP Beginner, say it did just the opposite.
The result for you may just depend on your specific audience and how much your audience has adopted Disqus.
Additionally, while you do get much-improved spam-fighting features, you should definitely consider the potential privacy implications for your commenters’ data before making your final decision.
Now over to you – what are your feelings on Disqus comments? As a commenter, do you prefer them to native WordPress comments or vice versa?
Article thumbnail image by Tanyastock / shutterstock.com