In the world of CSS, the size (or length) of an element is expressed by length units. Length units are small letters/symbols that follow a number value (10px, 2em, 100%, etc.) to establish the length of an element.

We use length units all the time. And even though Divi has made the process a lot easier, length units are still very much a part of the everyday business of designing a website. That’s why today I’m going to attempt to give you a guide that will help you understand and apply the right length units with Divi.

In this post, I will be addressing the following elements that use a length unit value:

• Width
• Margin
• Padding
• Border
• Text (font size, letter spacing, line height)

Quick Overview of Length Units

Length units are often separated into two main categories: absolute and relative.

Absolute Length Units

Absolute length units are considered absolute because they are not relative to any other element. These units will not scale to browser size and will always remain the same size. These include the following:

pt – points
px – pixels
in – inches
cm – centimeters
mm – millimeters
pc – picas

Pixels are really the only absolute CSS length unit we should consider using for the web. The others are mostly used for physical (not digital) measurement (like print). A pixel unit refers to the size of one “dot” of your device display (which will vary slightly with each device). Because of this, pixels are commonly used for things that don’t necessarily need to scale with browser sizes.

Relative Length Units

Relative Length units are considered relative because they change/scale depending on the length of other elements. One common example is percentage, which is dependant on the length of the parent element.

em – relative to the element’s font-size
rem – relative to the root element’s font-size
vw – relative to 1% of your browser’s viewport width
vh – relative to 1% of your browser’s viewport height
vmin – relative to 1% of the smaller of the two browser viewport dimensions (height or width).
vmax – relative to 1% of the larger of the two browser viewport dimensions (height or width).
% – relative to 1/100 of the parent element’s width.

All of these units are used for the web. For this post, I won’t be concentrating on rem, vmin, or vmax because they are less common and do not work as well with Divi. Although I would love to hear suggested use cases.

Divi’s Box Sizing

Divi determines box sizing with the border-box CSS property. This basically means the width and height of a section, row or module is determined by the sum of its content, padding and border. If you have built websites with Divi, you already know how this works. Think of a row as a box.

Let’s say you create a row that has a width of 1000px. Adding content to the row (like other boxes/modules) will not change the width of the row. Adding padding to the row will not change the width of the row either but will be applied inside the box. If you add a border to the row, the border will also be applied inside the box and will not affect the set width. In other words, adding 50px of right and left padding will not result in a 1100px row just as adding a 10px border around your row will not make your row 1020px wide. The only thing that will change is the height as you add more content padding or border. Margin is what adds space outside of the box and is what is used to separate boxes (sections, rows, and modules) on the page.

I mention this because it is helpful to understand the building block (or boxes) of how Divi works so you can know what adding length unit values (30px, 5em, 50% etc.) to elements on your page actually does.

Width

Suggested Length Units: %, vw, and px (as max width)

The width property uses length units to set the width of an element.

Divi allows you to easily adjust the width of any section, row, or module.

Using px for Width

Rarely should you ever set an element to a pixel width, unless you plan on adjusting that width at the necessary breakpoints for mobile. This is simply not good practice in the world of responsive, adaptive, and fluid design. It is useful, however, to set a max width using a pixel value, as long as the width is set to a percentage. More on this later.

Using % and px to Adjust Max Width for Responsive Design

As you know, Divi allows you to adjust the width of any module, row, or section. This width will be adjustable by a percentage unit by default, but you can enter a pixel unit value as well. But the width value set is technically the max width. The actual true css width is 100%. All sections, rows, columns, and modules are inherently 100% in width because they are all built using the div block element. And block elements always span the full width of the container (100% width).

What do you know… Divi is built with Divs.

Here is a little test. Let’s update the module width to 1000px for this text module in the left column. I’ve given the module a gray background for easy recognition.

Notice that it doesn’t actually go the full 1000px because this is technically a max width. However, if I wanted to override the default 100% width and declare an actual width of 1000px, I could go over to the advanced tab and set the main element to have a width of 1000px.

Now look at the module.

The problem is that you are using an absolute value surrounded by elements with relative values. So even if you shrink your browser, the module will remain 1000px.

This is why Divi adjusts the max width of your elements instead of the actual width.

It is common to use pixels in combination with relative length units (like percentage) in order to build responsive sites. Divi uses this method to set the content width for all of your pages. If you go to Theme Customizer > General Setting > Layout Settings you will see the main content width is set to 1080px.

The 1080px is actually the max width for your content. The actual css width is 80%. That is why when you increase the width of your browser, the content width will stop expanding at 1080px. And if you shrink the browser width below 1080px, the content will continue to scale according to 80% of the parent element.

Adding Custom Width Values in the Divi Builder

When using the Divi builder, your rows are considered the website content and will inherit a default setting of 80% width and 1080px max width. If you change the width of a row using the Divi Builder by setting a custom width, the new width value will be a max width regardless if it is set as a percentage or a pixel value.

If you change a row to be fullwidth, both the width and the max width is set to 89%. This means that the row will always have a with of 89% of the parent element (the section) which is 100% of the browser window.

In short, the Divi builder is smart enough to automatically use max width when adjusting the width of your sections, rows, or modules.

Using vw to Adjust Width

Viewport Width (vw) is very similar to the percentage value. The difference is that the vw value is always relative to the browser viewport/window width. The percentage value is always relative the the parent element. Be careful of setting your sections to 100vw (in custom css) because this can cause some problems with extending past the scrollbar that shows up when scrolling down the page.

Since Divi is built on percentage widths, unless you are creating a special design that requires vw, I would stick with percentage values.

Margin

Suggested Length Units: px, %, and vw

The margin property uses length units to add spacing outside of the element. It is also useful for positioning an element using positive and negative values.

Divi allows you to adjust the margin of any section, row, or module.

Using px for Margins

Using pixels for margins and/or padding is fine as long as you understand that those length values will not adjust with your different screen sizes unless you assign specific length values for different screen sizes.

Avoid using pixels for left or right margin

In general, you will want to avoid using pixels for adjusting margins, especially for left and right margins. Having an absolute length for margins will not scale properly with your content and will ultimately leave you with more or less margin than you want on certain browser widths. There are exceptions to this where you will want to have absolute margins for design purposes. Just make sure that you adjust the margin length for mobile devices when needed.

Using pixels for top and bottom margin

There are times when using pixels for margin is quite useful. For example, if you are wanting to move an element up or down on a page, giving the element a positive or negative pixel value will allow you to move that element in a precise location vertically. If you were to use a percentage for this, the element will move up or down as you change the browser width.

Using Percentage for Margins

Using percentage for margins is a great way to build sites that are responsive. As mentioned earlier, percentage values are relative to the length of parent elements. Divi uses percentages for right margin to create space between columns. This margin percentage is easily adjusted by changing the gutter width within the row settings. Gutter width is basically the percentage of margin you want between your columns.

With gutter width set to 3, the margin between columns is 5.5%. Notice how the space scales when adjusting browser width.

So if you ever need to adjust a right or left margin of a module, keep in mind that it will be best to use percentages in order to keep things scaling appropriately.

Use Percentage Margin for Positioning Objects Horizontally

Sometimes certain creative designs call for moving objects from left to right to overlap objects or to create asymmetrical designs. In this case you can use a negative percentage value for a right or left margin. This will move the object over but still adjust to browser widths.

Here is an example of using percentage values to overlay an image with another image. Notice the use of percentage values for horizontal positioning and the use of pixels for top and bottom positioning. This is because the percentage value is relative to the width of the parent element (the column). So if you were to put a 30% top margin, the image would move up and down as the column width changes. That is why in most case you will want to position vertical elements with an absolute length value like pixels.

Using vw and vh for custom Margin

Like percentages, the vw and vh length units can be helpful to add margins between sections, rows, or modules in a way that scales with your browser viewport. The difference is that vw and vh are always relative to the viewport size, not the parent element (like percentages).

Padding

Suggested Length Units: px, %, em, vw and vh

Divi allows you to customize the padding for sections, rows, columns, and modules.

Using pixels for Padding

There was a time when I used pixels for padding for pretty much everything. But, I have come to my senses. Like margin, you can use pixels for padding if you want to have an absolute length of padding no matter what the browser size may be. But generally, padding should scale to the size of the browser. So instead, I would suggest using percentages for padding.

It is common in responsive web design to use pixels for top and bottom padding in order to keep a consistent vertical spacing between elements while the width of the browser changes. Divi does this for Sections and Rows. Depending on the section or row height you select (1-10) under the Theme Customizer, your section and/or rows will have a greater or lesser top and bottom padding.

But if you look at the CSS, you will notice that the top and bottom padding is set to a percentage value at a certain breakpoint and a pixel value for others. For example, if you leave the default section height to the value of 4, on larger screen widths (greater than 1350px), the top and bottom padding will be 54px. On screen widths between 980px-1350px, the top and bottom padding will be set to 4% (which is 4% of the section width). On screen sizes less than 980px, the top and bottom padding is set to 50px. This technique is great for setting a minimum padding value for smartphone and a max padding for large monitors while have the padding scale with the percentage value for devices in between the two extremes.

Using % for Padding

Sometimes it is just a lot easier to use a percentage value (not pixels) for padding in order to keep things scaling nicely without needing to add any additional values at certain breakpoints. And, for those of you interested in keeping important content “above the fold”, using percentages instead of pixels for top and bottom padding will help simplify this process.

Here is an example of a section with a top padding set to 50px. Notice how the same 50px padding doesn’t look as good on smartphones as it does on desktop because there is too much space between the sections.

Here is an example of a section with a top padding set to 4%. Notice how nicely it scales from Desktop to smartphone. In a browser window that is 1920px wide, the top padding is 76px (0.04 times 1920). But when you scale the browser window down to 375px wide, the 4% padding equates to 15px (0.04 times 375).

NOTE: It is important to remember that top and bottom percentage values will always be relative to the width of the element, not the height.

Using em for Padding

Using the em length value for padding is suprisingly useful. Let’s say you have a text module with a body text size of 22px for desktop, 18px for tablet, and 14px for smartphone. 1em would be equal to 22px on desktop, 18px on tablet, and 14px on smartphone. Stay with me. Adding a padding of 2em for the text module will adjust according to the text size. On desktop, the padding will be 44px because 2em would be 2 times 22px. On tablet, the padding will be 36px. And on smartphone, the padding will be 28px. This helps to scale the padding according to the font size which works really well for responsive design.

Using vh and vw for Padding

You can use vh and vw for padding in much the same way as you would percentage. The difference is that vh and vw are
always relative to the viewport size. Percentage is always relative to the parent element.

In this example, I took out all the padding from the section and row and gave each text module the following padding:

2vh Top, 5vw Right, 2vh Bottom, 5vw Left

Notice how adjusting the browser height will decrease or increase the top and bottom padding of each module.

Borders

Suggested Length Units: px, em, and vw

Using pixels for borders

Using pixels for borders is fairly common and is recommended unless you want the border to scale according to the size of the parent font size (em), or the browser viewport(vh,vw).

Borders do not support the % unit

You may have noticed in the header above that I didn’t include percentage as an option. This is because the percentage value is not a supported unit for borders. But you can have your borders scale by using the other relative length units (em,vh,vw).

Using em for borders

Using em for borders is similar to the idea of using padding around text modules. The em value will be relative to the parent font size and will adjust as the font size changes.

Here is an example of a text module with a border of 1em. I also give the module a padding of 1em. Notice what happens when you adjust the font size. The border (and padding) will change as the font size increases and decreases.

This also works with button borders. Here is an example of a button with a border width of 0.5em. Notice how it scales with the size of the button text.

Using vw and vh for Borders

If you are wanting to scale your border width according the size of your browser viewport, you can use the vw or vh length unit. I haven’t seen this done much, but it is interesting to think about.

Text

Suggested Length Units: px, em, and maybe vw

The Divi Builder Allows you to add custom length values to customize your text. These options include text size, letter spacing, and line-height.

You can use any of the CSS length values for these text options, but for this post I’m going to cover the most common – px, em, and vw.

Using px for Text Size

It is common to set your font sizes to a pixel value because you want those sizes to remain consistent. You can still change the font size according to browser width using media queries. Divi makes this really easy to do by allowing you to enter three different device font sizes within all Divi modules.

Using px for Letter Spacing

It is common to use px for letter spacing. Just note that if you plan on changing the size of your font considerably between devices, you will probably have to adjust the letter spacing as well. To make letter spacing scalable with your text size, you could use the em length value instead.

Using px for Line Height

The px unit is not the best option for line height because it becomes a hassle to change the line height everytime you change the font size. That is why em is normally used (more on this later).

Using em for font sizes

You can use em for custom font sizes. The value of 1em will equal the font size of the most immediate parent tag. When adding an em value to a text element in a module, the most immediate parent tag font size is whatever you have set in the theme customizer. So, in Divi, if you have your body font set to 16px, 1em is equal to 16px, 2em is equal to 32px, and so on.

Using em for Line-Height

Let’s say you are using a text module and change the body font to 18px. Since em is always relative to the most immediate parent tag, the value of em changes for that module and now 1em equals 18px. This is helpful to understand why Divi sets the line-height to an em length value. Setting your text font of 18px to have a 1.5em value will set the line-height to 27px (1.7 times 18px). So if you decide to change the font size later on, the em line height will adjust accordingly.

Using em for letter spacing

Using em for letter spacing can be useful and I would definitely recommend it. The main reason to use em for letter spacing is so that the space will increase and decrease depending on the size of your text.

Look at the letter spacing in the following image. Notice how the 5px letter spacing doesn’t change as you change the size of the header text.

Now look at the same example text using 0.1em for the letter spacing. If the font size is 50px, 0.1em is going to equal 5px. But if you decrease the font size down to 25px, 0.1em is going to equal 2.5px.

Using rem for Text Elements

Using rem is generally more predictable than using em because it is always relative to the root font size. The root element in your html tag. This is the tag that wraps your entire website. In Divi the html is actually set to have a font-size of 100%. This may seem a little strange. I mean, 100% of what exactly? Actually, this is pretty common practice. You may not know this but setting your root/html font size to 100% is a way to declare the same font size as your browser. Most browsers have a default font size of 16px, so, in Divi, the value of 1rem is actually 16px (or the font size set in your browser settings). It isn’t what you have set as the default body text in the theme customizer.

For example, Notice what happens when I add 1rem to the body text size of a text module. The text actually increases in size from 14px (what I have set as theme body font in the theme customizer) to 16px (my default browser font size).

Now if I change my browser font size to something larger, the text in that text module will also increase.

So if you are interested in having text that adjusts to the users browser settings, the rem value may be helpful. But, for the most part, using rem in Divi will just be more trouble than it is worth unless you want to start changing the basic framework of the Divi Theme (ie. change the root font-size to something else).

Using vw for Text Elements

This is perhaps the most interesting length value to use for text. I’m not going to go into great detail on the possibilities here, but I will introduce you to the idea.

Using vw for font size allows you to completely scale your text with your browser window. This can be useful if want the line length to remain constant.

Look what happens to this title text when I adjust the size of my browser viewport/window. The title has a text size of 15vw (which is 15% of the broswer viewport).

If you wanted to take this a step further, you can set a custom em padding for the title that will automatically scale with the title text. This will only work if you apply the em padding to the title tag so you would need to add it to the custom CSS title box under the advanced tab.

Notice how the padding above and below the title scales with the title.

Special Use Cases

Using vh to Create Full Height Headers

The Fullwidth Header Module has an option to change the layout of your header to fullscreen. This makes sure your header takes up the entire screen when the page loads, no matter the screen size.

You can accomplish this same effect with any section using the divi builder. All you have to do is go to the Section Settings advanced tab and enter the following custom CSS in the Main Element input box:

height: 100vh;

If you haven’t guessed already, this makes sure your section spans the full height of the browser viewport.

Using vw and em to Create Large Scalable Buttons

If you don’t already know, the default padding for Divi’s buttons is as follows:

0.3em Top, 1em Right, 0.3em Bottom, 1em Left

But you can change this by adjusting the padding of the button module to something like this:

0.5em Top, 2.5em Right, 0.5em Bottom, 2.5em Left

Your custom padding will scale with the size of your button font.

Then you can change your font size to a value of 4vw.

This will display a really large button on large monitors and scale nicely as you adjust your browser window. In order to keep the button from scaling too small on phones, you can set a pixel value to your button for smartphones.

Other Helpful Resources

• CSS Length Units
• The Lengths of CSS
• Custom CTA Sections Using vw
• Better Mobile Design
• Responsive and Fluid Typography with vh and vw units

Let’s Review. Shall We?

Width – Use percentages for custom widths. Also, pixels are acceptable in the Divi builder because this is a max width value and will maintain responsiveness on mobile.

Margin – Since Divi uses percentages already to add margins between columns in your themes grid, it would make sense to keep using percentages unless you have a specific reason not to. You can also use vw and vh for margins as long as you understand what you are doing.

Padding – You have a lot of options that work well for padding. In general, I would use percentages for padding rows and sections for consistency. But I would use em for module padding in order to scale with font sizes. Pixels are always good for padding but in my opinion should be avoided unless you have a specific design reason to do so.

Font Size – Use pixels for custom font size. Em is also acceptable if you are wanting the font size to be relative to the parent font size, making it easier to change all font sizes by changing the parent. Using vw for font size is a nice option for headers or for those designs that need text to scale with the browser viewport.

Letter Spacing – Use em for letter spacing in order to make it scale when changing the font size later on.

Line Height – Use em for line height so that it adjusts to the font size.

Borders – You can’t go wrong using pixels for borders, but don’t ignore the other options. Using em will adjust your border to the native font size (useful for buttons). And using vw for borders is an interesting thought.

Final Thoughts

Thankfully, the Divi builder has a ton of built-in features that allow you to build beautiful responsive websites without having to be an expert in CSS length units. But, it is helpful to understand what length units to use whenever you do decide to make customizations to your page. Having your site look great on all screen sizes is an absolute must and using the right length values will make your job a lot easier down the road.

I hope this guide was helpful. And as always, I look forward to hearing from you in the comments.

Cheers!

The post A Guide to Understanding and Applying CSS Length Units in Divi appeared first on Elegant Themes Blog.

WordPress uses something called ‘salt’ keys to protect your passwords. With these keys, your password is kept safe, so attackers can’t use them even if they gain access to your data. In this article, we’re going to talk about what salt keys are and how WordPress uses them. We’ll then teach you two ways to change yours, including using the Salt Shaker plugin.

Let’s get to work!

What Salt Keys Are (And How They Work in WordPress)

WordPress salt keys help protect your password from attackers.

Salt keys are cryptographic elements used to ‘hash‘ data in order to secure it. In fact, most serious platforms and systems use similar mechanisms to protect sensitive data. The process works by using the salt keys to encrypt your password when you save it in WordPress. This way, attackers can’t see your passwords in plaintext even if they somehow gain access to your database.

Salt keys are also used to sign your website’s cookies. This stops malicious actors from being able to gain access even if they can take over your cookies. All of this happens in the background, and there are zero reasons why you’d ever need to share your WordPress salt keys with a third party. If someone were to get their hands on them, they’d might be able to use them in order to access your passwords and crack your website.

For this reason, we recommend you change your WordPress salt keys from time to time to mitigate risk. However, WordPress doesn’t include any features that enable you to do this out of the box, which means you need to know how do it on your own. Let’s take a look at how you can do this now.

How to Change Your WordPress Salt Keys (And Why You Should)

How often you change your WordPress salt keys depends on you. Once or twice every year should be more than enough to keep things safe. However, if you want to be extra careful, you might want to change your keys every couple of months. It’s important to note that every time your salt keys are changed, all user accounts will be logged out, including your own. This can be a minor hassle, but it helps protect you in case an account has been compromised due to cookies.

We’re now going to show you two methods you could use to update your salt keys. You can either do it manually by editing a WordPress core file, or use a plugin to automate the process. Either way, we recommend that  you create a backup of your site beforehand, just in case.

Change Your Salt Keys Manually

WordPress stores your salt keys as strings of numbers, letters, and symbols within the wp-config.php file. To change them manually, you’ll need to update them in this file. To do this, you’ll need to log into your website via FTP, using a client such as FileZilla. Once you’re in, navigate to your WordPress root folder, which is usually named public_html, www, or the same as your website:

Inside this folder, you’ll find the wp-config.php file. Right-click on it and choose the option that says View/Edit. This will download a copy of the file to your computer and open it using your default text editor. Use your text editor’s search feature to locate the line that reads ‘Authentication Unique Keys and Salts’, as seen below:

There are some instructions in the form of comments on how to update your keys at the top. Right below, you’ll find eight lines including all your security keys and salts. To replace them, you’ll need to generate a new set of keys, which you can do through the WordPress API. Just visit this link and the platform will generate a new set of unique keys you can use, like this:

All you have to do now is take your new keys and replace your existing ones within the wp-config.php file. You can either copy and paste the keys one by one, or replace the entire section. If you do this correctly, your website’s functionality won’t be affected by this change. The only change you’ll notice is you’ll need to log into your account again once you update your salts, as will all your users.

Once you’ve replaced your keys, save the changes to the wp-config.php file and close it. FileZilla will now ask you if you want to replace your existing wp-config.php file with the version you just edited. Choose the Yes option, after which you can go right ahead and log back into your website.

Use the Salt Shaker Plugin

The Salt Shaker plugin can help you simplify the process even further. With this plugin, you can automate the entire process of changing your salt keys. Furthermore, the plugin even enables you to schedule automatic changes to your salt keys on a regular basis.

To use the plugin, you’ll need to install and activate it first. Once that’s done, a new Salt Shaker option will show up in your dashboard under the Settings tab. Inside, you’ll find two options. The first of these enables you to schedule changes to your WordPress salt keys. You can choose to switch them daily, weekly, or monthly:

In most cases, daily changes are overkill since you’d be forcing all your users to log out. As such, we only recommend daily changes if your website isn’t open for registration and you want it to be as secure as possible. For regular scenarios, we think monthly changes are the best option.

Once you set your schedule, the plugin will automatically update your salt keys at the set interval. If you don’t want to automate the process, or if you want to change them right away, you can instead click on the Change Now button.

This will immediately change your salt keys, after which WordPress will prompt you to log back in. As with the manual method, you won’t notice any difference after doing this and you’ll be able to use your dashboard as normal.

Conclusion

Storing passwords in plaintext is always a bad idea, and that’s where salt keys come in. WordPress uses unique salt keys to secure your passwords, which stop attackers from accessing your passwords even if they were to gain access to your database. You can ensure that these are even more secure by changing them regularly.

There are two ways you can go about changing your WordPress salt keys:

1. Change your keys manually by modifying your wp-config.php file.
2. Use the Salt Shaker plugin.

Do you have any questions about how to update your WordPress salt keys? Let’s talk about them in the comments section below!

Article image thumbnail by Sin314 / shutterstock.com

The post What Are WordPress Salt Keys (And How Can You Change Them)? appeared first on Elegant Themes Blog.

This week, as part of our ongoing Divi design initiative, we’re going to show you how to add book previews to your website using Divi’s Author Layout Pack and the free 3D Flipbook plugin. Adding previews to your website helps visitors in their decision making. They can get a taste of your product and be convinced of the content that you’re sharing. To share a book preview, you will need a PDF file containing the number of pages of your (e)book you are willing to share for free.

Sneak Peek

Part 1: Download & Install the Free Interactive 3D FlipBook Plugin

Step 1: Download the Plugin

To create the book preview, we’ll need to download the free Interactive 3D FlipBook plugin by going to the following page and clicking on the download button.

Step 2: Upload & Install the Plugin

Once you’ve downloaded the plugin, and located it on your computer, go ahead and upload it to your plugins by going to Plugins > Add New. After uploading, make sure you activate the plugin as well.

Part 2: Upload Your Book Preview PDF File

Step 1: Add New 3D Flipbook

The first thing you’ll need to do, after uploading and installing the 3D Flipbook plugin, is adding your book preview PDF files. You can add up to as many book previews as you desire. Go to 3D Flipbook> All Books > Add New.

Step 2: Upload Your Book Preview PDF File

Upload every PDF file as a separate book. This includes giving it a title as well.

Part 3: Generate Shortcode #1: Lightbox Activation Link

Step 1: Go to Generate Shortcode

We’re going to show you two ways on how to include these book previews. The first one is on click and the second one will appear on the page itself. We’ll start off with the book preview on click. Go to 3D Flipbook > Shortcode Generator.

Step 2: Choose PDF File

Within the 3D Flip Book tab, select the PDF file you want to use.

Step 3: Change View Mode

Then, switch over to the View mode tab and select ‘Lightbox activation link’.

Step 4: Copy Shortcode

The shortcode will automatically update according to the changes you make. Go ahead and copy this shortcode. We’ll need it in the next part of this tutorial.

Part 4: Add Lightbox Activation Link to Hero Section of Home Page

Step 1: Go to Homepage & Enable Visual Builder

It’s time to add the book preview on click to your homepage! Go ahead and open the page with the Visual Builder.

Step 2: Remove Book Image Module in First Column of Hero Section

Then, remove the Image Module in the first column of the hero section. Because of the way the shortcode functions, we’re going to use a Code Module instead.

Step 3: Add Code Module Instead

Go ahead and add a new Code Module to the first column.

Step 4: Add Your Shortcode

Next, add the shortcode you’ve created to the content box of this Code Module.

Step 5: Add Image HTML Between Shortcode

And right in the middle of the shortcode, you have the space to add some additional HTML code. We’ll use this HTML code to add an image. Copy the following HTML code and replace the URL with your own Image URL:

<img src="place your image url here"/>

Step 6: Change Sizing of Code Module

Of course, we want this image to be responsive. That’s why we’ll change the Width for tablet and phone to ‘52%’ in the Sizing subcategory. Go ahead and click on the image after saving and exiting the Visual Builder to see the result!

Part 5: Generate Shortcode #2: Fullscreen

Step 1: Go to Generate Shortcode

Want to include the book preview on the page itself without having to click somewhere? No problem! You can easily do that as well. Go back to 3D Flipbook > Shortcode Generator.

Step 2: Choose PDF File

Select the PDF file of your choice again.

Step 3: Change View Mode

Then, move on to the View mode tab and instead of choosing the ‘Lightbox activation link’ option, choose ‘Fullscreen’ instead.

Step 4: Copy Shortcode

Copy the shortcode that automatically adjusts itself to the changes you make.

Part 6: Create Book Preview Section using Fullscreen Book Preview

Step 1: Go to Homepage & Enable Visual Builder

We’re going to add this book preview to our page next. Go to your homepage and enable the Visual Builder.

Step 2: Add New Section Below Hero Section

Right below the hero section, add a new regular section.

Step 3: Add Section Gradient Background

To match it with the hero section, we’re going to use the following gradient background for this section:

• Color 1: #f4f4f4
• Color 2: rgba(148,166,191,0.34)
• Gradient Direction: 90deg
• Start Position: 60%
• End Position: 60%

Step 4: Add Two-Column Row to Section

Once you’re done with the section settings, add a two-column row to it.

Step 5: Change Row Sizing

Before adding any modules, open the row settings and enable the ‘Make This Row Fullwidth’ option within the Sizing subcategory of the Design tab.

Step 6: Clone Text Modules, Change Content & Place in Column 1

We’re going to save ourselves some time by cloning modules that are already on the page instead of creating ones from scratch. Locate the following two Text Modules on your page and drag them to the first column of the row you’ve just created:

Step 7: Add Text Module to Column 2

We’ll add the book preview to the second column of this row by adding a new Text Module to it.

Step 8: Add Shortcode to Text Module

Place the shortcode you’ve copied within the Content box of this Text Module and there you have your result!

Final Thoughts

In this use case blog post, we’ve shown you how to add book previews to your website with Divi’s Author Layout Pack and the 3D Flipbook plugin. This use case is part of our ongoing Divi initiative where our design team shares a new layout pack with you each and every week. If you have any questions; make sure you leave a comment in the comment section below!

The post How to Add Book Previews to Divi’s Author Layout Pack appeared first on Elegant Themes Blog.

AMP for email is still in development and we don’t know what the finished product will look like yet. However, what we do know enables us to paint a decent picture of how the project could affect email marketing. In this article, we’ll discuss how the AMP Project has evolved since its creation and what it means for email. We’ll then talk about how you can prepare for the launch of AMP for email. We’ve got a lot of ground to cover, so let’s get to it!

An Update on the Google AMP Project

Google AMP launched in 2016 to some controversy, but the project is still moving along.

We talked about the AMP Project shortly after it launched in 2016, including some instructions on how to integrate it with WordPress. In case you need a refresher, the project is an initiative meant to improve the overall performance of the mobile web. To do that, it aimed to foster a lightweight framework that would result in faster-loading websites.

Since those early days, over 25 million domains have launched AMP content. Furthermore, Google wants to convince the group in charge of web standards to adopt technologies similar to AMP. In the meantime, they’ve also been busy with the launch of AMP stories and the development of AMP for email.

However, while AMP development forges ahead, there are a lot of people worried about what it means for the future of the web. Some are concerned that Google wants to favor AMP articles. Since this content is only accessible through Google’s applications, it mostly benefits the people that choose to adapt to the company’s guidelines.

Additionally, some people argue it stands in contrasts with the ideals of an open web. Others have gone on to suggest some changes AMP could adopt, so it doesn’t favor Google’s ecosystem. For now, the discussion continues, and Google’s AMP for email project only gives us more food for thought.

What AMP for Email Is

Just as its parent project, AMP for email has also stirred passions since its announcement.

AMP is nothing if not ambitious, and now the project wants to tackle another critical aspect of the web – email. The goal of AMP for email is to provide you with the tools to create more engaging and actionable messages. For example, when you open an AMP-enabled email, you’ll be able to complete specific tasks without opening a website. Those include RSVPs, scheduling appointments, or even running simple applications.

Another feature that AMP for email promises is the ability to include self-updating information within messages. For example, you could book a flight and your confirmation email would always include relevant up-to-date information, such as warnings about delays. This would also enable you to send promotional emails that update to reflect when the sale is over, to avoid confusion.

So far, AMP for email is still in its beta phase. You can gain access to it through the Gmail Developer Preview of AMP for Email program if you want to test it in advance. Some companies, such as Pinterest and Booking.com, are already working on how to use AMP for email to their advantage. However, as great as the project’s new features sound, not all people are as excited about it.

A recent Techcrunch article argues that email’s main selling point is its simplicity. If you take email and add new features to it, you’re going to run into interoperability issues. This is a valid point since AMP for email is set to launch later this year, only for Gmail users. It’ll be up to other clients and providers to decide if they want to support AMP emails, which is bound to complicate things somewhat.

Another potential downside of the AMP for email project is it extends Google’s control over the content you see even further. For example, without AMP emails, you’d be forced to open a new page if you wanted to RSVP to an event or schedule an appointment. Now, a lot of people won’t need to leave Google’s email ecosystem to do that, just like with AMP pages. Couple that with the fact that Gmail is one of the leading email platforms and these drastic changes become even more troublesome.

Finally, there’s also the glaring issue that performance isn’t such a big deal when it comes to email versus websites. In most cases, the emails we get don’t take that long to load by design, as most providers have a maximum size limit. That means AMP for email’s primary goal is not performance oriented but adding new features to a medium that already works. In fact, adding all that new functionality to emails may end up slowing their performance. However since the project is still in development, it may not be time to panic just yet. Instead, what you can do is consider how it’ll affect you.

How to Prepare Your Campaigns for AMP for Email

There are two ways you can go about testing AMP for email in its current version. If you’re a developer, you can apply to Gmail Developer Preview of AMP for Email program. You will need to sign a Non-Disclosure Agreement (NDA) if you get in, so keep that in mind:

However, since AMP is an open source, you can also review its specs by checking out the project’s repository. The difference, in this case, is you won’t be able to test the code using a beta version of Gmail, as you would signing up for Google’s developer preview. So far, you can check out AMP for email’s proposed design:

<!doctype html>
<html amp4email> <!-- `amp4email` also accepted. -->
<head>
 <meta charset="utf-8">
 <style amp4email-boilerplate>body{visibility:hidden}</style>
 <script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
Hello, world.
</body>
</html>

Technically, this template will support AMP for email elements that only compatible clients will display. Other clients will still be able to render emails using regular HTML. In other words, you’d be creating two versions of each email you send out to your users. One email displaying AMP and the other using standard HTML. That is, of course, if you want to jump on the AMP bandwagon.

So far, Google has only confirmed support for a few AMP elements. Those include forms, selectors, lists, accordions, carousels, sidebars, light-boxes, images, and animations. Regular AMP supports more elements. However, these are some of the ones that Google has deemed secure for email environments. If you want to check out how your campaigns would translate to AMP, you can try out the AMP Playground using the project’s email template:

There, you’ll be able to test all the elements you want. This will give you a practical idea of what your campaigns could look like using AMP.

Conclusion

The AMP Project caused a stir when it launched in 2017. It’s still a controversial project, but it’s made some decent headway since its inception. More than 25 million domains have already started publishing AMP content, and Google are still increasing the project’s scope.

With AMP for email, Google managed to stir up even more feelings. Adding complex elements to email using a new framework may lead to compatibility issues, and AMP emails may even end up being less lightweight than their standard counterparts. Even so, you should take the time to prepare for what AMP for email may bring, as it’s sure to have an effect on your campaigns in the future.

What do you think about the Google AMP project and its expansion into email? Share your thoughts with us in the comments section below!

Article thumbnail image by Sammby / shutterstock.com

The post What We Know About Google AMP for Email (And How It May Affect Your Campaigns) appeared first on Elegant Themes Blog.

This week Kenny and his team have created an eye-catching Author  Layout Pack. This layout pack includes 7 different layouts and focuses mainly on showcasing your books in the most elegant and professional way. You can also directly sell books on your website using the shop page layout that’s included.

Check Out The Divi Author
Layout Pack Below

Get it for free today!

Landing Page Design

View The Live Layout Demo

Home Page Design

View The Live Layout Demo

About Page Design

View The Live Layout Demo

Blog Page Design

View The Live Layout Demo

Contact Page Design

View The Live Layout Demo

Events Page Design

View The Live Layout Demo

Shop Page Design

View The Live Layout Demo

Key Features

The author layout pack has everything you need to showcase your work in a professional and stunning way. Besides that, there’s also a shop page included that allows you to directly generate sales on your website. There’s a nice balance between showcasing the different books and putting the author in the spotlight as well.

Live Demos

Click the links below to see a live demo for each of the layouts included in the pack.

1. Author Landing Page (live demo)
2. Author Homepage (live demo)
3. Author About Page (live demo)
4. Author Contact Page (live demo)
5. Author Blog Page (live demo)
6. Author Events Page (live demo)
7. Author Shop Page (live demo)

Access This Layout Right Now
Directly from Your Divi Builder

Subscribe To Our Youtube Channel

Since Version 3.0.99 of Divi, you can find and import any of the layouts included in this pack (along with ALL of Divi’s Premade Layout packs) directly from the Divi Builder. They are already waiting for you.

To access your new layout, simply activate the Visual Builder when editing a page and look for the “Load From Library” icon in the page settings bar (it looks like a plus symbol). Click this icon to launch the Load From Library popup. Under the Premade Layouts tab, you can easily find the new layout by scrolling through the list of layout packs. Once you find the Author Layout Pack, click on it. You will see all the individual layouts included in the pack. Select the layout you want for to use and then click the “Use This Layout” button.

Authentication Required

Before you can download Premade Layouts from the Divi Library you must authenticate your Elegant Themes Subscription. If you have already activated updates for Divi under Divi > Theme Options > Updates, you have already authenticated your subscription and will have access to the layouts without a problem. If not, when you click to import a layout to your page, you will be prompted to enter your Elegant Themes Membership Username and API Key.

After you enter the Username and API Key, you will gain immediate access to the layouts. You can find your API Key under your members area on the Elegant Themes site.

No Licensing Restrictions

The photos included with these layouts have no licensing restrictions. This means you can use them in all of your commercial projects without having to worry about paying licensing fees or attributing the photographer. Use them in your commercial websites, sell them within your Divi child themes, include them in your own Divi layout packs or just use them on your blog. We know how challenging it can be to find good photos and how confusing and scary the licensing that governs those photos can be. We want to fix that problem for our users.

Download the Full Res Image Assets

But Wait…There’s More!

We hope you enjoy this layout pack. And to help ensure that you do, we’ll be doing a live stream on our Facebook page this Tuesday at 3pm EST to walk through how to add book previews to your website.
See you there!

The post Get an Eye-Catching FREE Author Layout Pack for Divi appeared first on Elegant Themes Blog.

However, some tools enable you to pawn off a bit of the legwork. For example, some SEO plugins purport to use machine learning to help you format your content more efficiently. In this article, we’ll talk about how machine learning is impacting SEO, and then show you how you can use the WordLift plugin to take advantage of these developments in WordPress.

Let’s get to it!

How Machine Learning is Affecting SEO

First off, let’s discuss the difference between artificial intelligence and machine learning. Artificial intelligence refers to the broad concept of systems that are capable of mimicking cognitive functions, such as learning and problem solving. Most of us are familiar with the concept due to its portrayal in popular media, but for the most part true artificial intelligence is still relegated to realm of science fiction.

In most cases, when people talk about artificial intelligence, they’re actually referring to machine learning. This is a subset of the field of artificial intelligence research that deals with self-improving algorithms that improve as they’re given more information to process.

It sounds like artificial intelligence, but machine learning algorithms only work in very narrow fields. For example, online retailers such as Amazon use machine learning to figure out what products they should recommend you:

As good as those algorithms can get, they can’t replicate true intelligence. They’re far better at processing massive amounts of data than a single person could ever be, which is exactly what makes computers so awesome. Other interesting uses of machine learning include personal assistants, such as Siri, and the algorithms Facebook uses to recognize faces.

Let’s now move on to the topic of SEO. A lot of the work we do to optimize content for search engines comes down to technical details. For example, we make an effort to include keywords in headings and near the start of articles. You also have to keep keyword density in mind and pay attention to the way you use external and internal links. Even if you nail all those tasks, your content might still flounder if you don’t pick the right keywords to begin with.

Theoretically, machine learning could help you tackle all these tasks more efficiently. This would help you produce content that is more search-engine friendly without requiring a background in SEO. However, the brunt of the work, which is creating interesting content will still fall upon you.

Machine learning isn’t yet at the stage where it can take care of all the grunt work for you. However, there are some tools that claim to be able to help you structure your content more efficiently, which is important from an SEO standpoint. We’re now going to look at one of them and see what it can do for you.

An Introduction to the WordLift SEO Plugin

The WordLift Artificial Intelligence plugin is an ambitious project that aims to help you enrich your WordPress content with contextual information. For example, the plugin can analyze your content to find related information, such as persons, locations, and that are mentioned. It can then use that information to pull contextual data from external sites, such as Wikipedia, and display it to your visitors.

Moreover, the plugin can help you add Schema markup to your content, making it easier for search engines to understand what it’s about. Those two features alone are interesting enough, but the plugin goes a step further. It can also help you enrich content with relevant open-source images, links to other related pieces, and visualization widgets.

In most cases, these are all tasks you’d need to perform on your own, without the aid of any tools. WordLift doesn’t do the work for you automatically, but it can provide you with the data and tools you need to do it more efficiently.

Key Features:

• Analyze your content and add contextual information so users can better understand it.
• Add more internal links to your content, to increase time on site.
• Find and add images you can use to enrich your content.
• Generate timelines for your articles.
• Add maps to display locations mentioned in your pieces.
• Recommend relevant articles to your readers.
• Improve your internal search feature using the data generated by WordLift.
• Add schema markup to your articles.

Price: $19 per month | More Information

Testing the WordLift SEO Plugin

As you may imagine, all the features we mentioned don’t come for free. To use the plugin, you’ll need to subscribe to the WordLift service. The plugin does offer a 14 day free trial, giving you the chance to test it out first. This is exactly what we decided to do. Once you install it, the plugin will walk you through a brief introduction of what it offers:

Right away, you’ll need to enter your license key, which is needed for the plugin to work:

Next, the plugin will ask you under which directory it should add contextual data to your website. The default is set to wiki, and you’ll also need to choose a language for the plugin to work. While the plugin supports multiple languages, each key can only be associated to one language. Overall, the onboarding process is very smooth, so let’s check out how the plugin does in action by loading a post.

To the right, you’ll notice a new WordLift widget. The plugin will automatically highlight content in your articles that it can enrich. Each of those terms will show up under the widget, enabling you to create new ‘entities’. Those are internal pages explaining what each specific term means, which enables users to learn more without leaving your website:

When you create a new entity, WordLift will try to find any information it can on the subject. You can modify this using a simple editor:

Once you add contextual information, you can also check out how the plugin adds schema markup to your content. Look for the button that says Test Google Rich Snippets at the top of the screen and click on it:

During our tests, the plugin did fantastically when it came to adding structured metadata to our posts. Sometimes the schema markup returned a couple of errors. However, overall, the plugin can save you a lot of time in this aspect:

When WordLift adds new entities to your website they won’t appear under your Pages tab. Instead, the plugin will store them as custom post types under the Vocabulary tab:

The plugin also includes widgets that you can use to lead visitors towards related content you add to your website. Here’s what one such widget looks like in action:

Moving on, one of WordLift’s most promising features is it can help you find images to use alongside your content. The plugin analyzes the entities it can identify in your posts and finds free images for you to use:

All you have to do is drag-and-drop images into the editor, and you’re good to go. It’s a timesaver, to be sure, but it only works well for broad terms. For example, the plugin wasn’t much help with articles that deal with very specific tech terms.

Overall, we walked away pleasantly surprised by what this plugin can achieve with machine learning. It’s a good option if you want to add more contextual information to your posts and improve their metadata structure. Moreover, it’s compatible with other SEO plugins, such as Yoast. However, the one thing it can’t do is help you write better content.

Moreover, right now the plugin is still in its earlier stages, and it doesn’t play nice with plugins such as the Divi Builder or Gutenberg. That means it’s only a valid option if you use the default WordPress editor and you don’t mind paying a relatively hefty subscription fee.

Conclusion

Machine learning might change the way we tackle SEO as more and more services begin to provide such approaches to their users. However, we’re still nowhere close to the point where SEO tools can take care of all the work for you.

Plugins such as WordLift can help you by improving your content’s metadata and pointing your readers towards other posts they might be interested in. It can also enrich your posts’ metadata, but even that can’t ensure better search engine rankings if your content isn’t interesting to begin with.

How do you think machine learning is going to impact SEO moving forward? Share your thoughts with us in the comments section below!

Article image thumbnail by Bloomicon / shutterstock.com

The post Testing the WordLift Artificial Intelligence SEO Plugin appeared first on Elegant Themes Blog.

Mhmm is short for Mighty Header and Menu Maker. It replaces the Divi header with its own header. It provides a new library where you build the headers and mega menus using the Divi Builder with all of the Divi modules. You can purchase Mhmm at the developer’s website.

I’m testing Mhmm version 1.1.3 with WordPress 4.9.5 and Divi 3.0.106. It’s not compatible with Extra or the Divi Builder plugin.

Installing Mhmm

Before you can upload the plugin you must unzip the downloaded file. There are two plugins inside the folder: mhmm and divi-stop-stacking. Once you’ve unzipped the folder, upload and activate as normal. The folder also includes a JSON file.

Activate the API key in the settings menu in order to receive updates.

Mhmm Modules

Mhmm adds three modules to the Divi Builder:

Mhmm Hamburger

The Hamburger module’s Content tab lets you choose the menu to display, select from three menu styles (full screen, slide in left, and slide in right), and adjust the background. The background is what displays when the hamburger menu is opened.

The Design tab includes color, style, alignment, centering, and text adjustments for the menu button. It also includes settings for the menu item color, menu item spacing, menu item text, and submenu item text.

The Advanced tab includes visibility, and several custom CSS fields. If there isn’t an adjustment for something in the other tabs you can adjust it with CSS here.

Mhmm Inline

The Inline module’s Content tab includes the menu selection, alignment, enable a down arrow for parent menus, and submenu transitions (choose from fade, grow, and instant). The Design tab includes the same features as the Hamburger module and adds box shadow. The Advanced tab adds fields that are specific to this menu.

Mhmm Mega Menu

The Mega Menu module’s Content tab lets you choose the menu from a dropdown box and the background settings. The Design tab only includes the menu button settings. The Advanced tab has fields for the menu button.

Creating and Activating Inline and Hamburger Headers

In the dashboard menu, go to Divi > Mhmm Headers. Here you create a new header and see the list of headers that you’ve created.

Clicking Add New opens a modal just like building in the Divi Library. Here you name the header, select the layout type, and choose the category. You have to choose Layout for Inline and Hamburger menus.

This opens a builder where you can create the layout for the header. Add sections, rows, columns, any modules you want, and style them as normal.

I’m using a ¼, ½, ¼ layout and added an image for the logo, an Inline menu set to default, and a button for a call to action just to see how it works.

This new header will not display until you assign it. In the Theme Customizer go to Header & Navigation > Header Format.

Here you’ll choose your layout and the header style. It gives you five styles to choose from. It’s now displaying the header that I created, using the graphic of stars as a logo, the main menu, and a button.

Styles include:

• Basic
• Stick to top
• Stick to top, hide on scroll
• Stick to top, show on scroll
• Stick to bottom
• Stick to bottom, show on scroll

Creating and Activating Mega Menus

Mega menus have two components – the header and the open menu. This requires you to build in two different libraries. The header is built the same as the Inline and Hamburger menus. The open menu is built in the Mhmm Mega Menus library. In the dashboard menu, go to Divi > Mhmm Mega Menus. This is the only thing I found confusing (I like to dive in without reading the instructions) but once I watched the videos it was no problem to create them.

Mhmm Header Hamburger Examples

This one uses the Hamburger module. I’m using elements from the Coffee House layout pack.

I’ve placed a background from the layout in the section. The row uses a 1/3, 1/3, 1/3 layout with an image for the logo, the Hamburger module, and a text module above a button module. All of the colors are from the layout.

I’ve set the Mhmm module to use my new menu, selected centered, and changed the button and button hover colors. It’s set to center vertically and to open the menu full screen.

The text module displays a message using H3 tags while the button opens to a new page to show maps for locations. The button module is from the layout itself.

This is the menu on open. I’ve added a background to the Mhmm module with a white overlay and opacity set to 76. I’ve centered the text and changed the colors to match the layout. I also set the menu item size to 50 and the menu item line height to 1.6. The close button also uses colors from the layout. I’m hovering over News.

The submenu items use the same colors but I’ve set the menu item size to 36 and the menu item line height to 1.

This is the same menu using Slide in Left.

Mhmm Header Inline Examples

Here’s a simple header using the Inline module. I used elements from the Pottery layout pack.

I’m using a ¼, ¼, ½ row with an image module for the logo, button module for the CTA, and the Inline module. I placed a background image from the Pottery layout pack within the section and added a black overlay with 50% opacity.

I added a shadow effect to the section and added 7 pixels for the padding for both the section and the row, and made the row full-width. The button is one of the buttons from the Pottery layout pack.

I changed the Mhmm text color to white and added 20 pixels of padding to the top. I changed the submenu item colors, using colors from the layout itself, for both the regular and hover items. The menu is set to right alignment.

It just took a few seconds to change the header layout. I changed the row configuration to ½, ¼, ¼, swapped the image and Mhmm modules, and changed their alignment to match.

Here’s a look at the header on bottom. I’ve set it to stick to the top on scroll.

Mhmm Mega Menu Examples

For the mega menu I’m using a section from the Food Recipes layout pack. Here’s the header. It adds a Hamburger menu icon.

This is the header that’s created in the Mhmm – Header library. It uses the Mega Menu module. I’ve added a background image and a box shadow to the section. I’ve added a logo to the image module, and the Mega Menu module displays a square hamburger menu with text. I’ve made it vertically centered and changed the text and icon white.

This is the mega menu layout that’s created in the Mhmm – Mega Menu library. This is the portion that opens. You can build any type of layout you want. I’m using a section from the layout pack and added four buttons.

Tip – I loaded a layout in a regular page, right clicked on the section I wanted to use within the mega menu and selected Copy, went to the mega menu layout, right clicked on a blank section and clicked Paste.

Here’s the mega menu opened. I’ve added a white background to the section, reduced the opacity to white, and removed the padding.

Mhmm Layouts

Mhmm includes 8 layouts to help you get started. Import them in the Mhmm – Headers library. You can see them at the developer’s demo page.

Divi Stop Stacking Plugin

This removes the default stacking to the header that Divi normally does when a screen shrinks to 980 pixels wide. Install it the same way as Mhmm. It adds a module to the Divi Builder. All you need to do is place the module somewhere within the row. It turns off the stacking for the row the module is in. It has no options to adjust and it doesn’t display anything.

Without Divi Stop Stacking, the header stacks when you reach 980 pixels.

With Divi Stop Stacking the header elements remain on the same line.

Mhmm License and Documentation

You can purchase Mhmm at the developer’s website. It has two licenses:

• 1 live and 1 dev site – $35
• Unlimited site – $65

For documentation there are lots of video tutorials at the developer’s website. I highly recommend watching them as they includes lots of Divi tricks.

Ending Thoughts

Mhmm offers a lot of features to create custom headers and mega menus for Divi. It can do far more than I’ve shows here, but it does require some patience to learn and you might have to dig into CSS to style some of the elements. If you’re interested in creating custom headers for Divi, Mhmm is worth a look.

We want to hear from you. Have you tried Mhmm? Let us know what you think about it in the comments.

Featured Image via aliaksei kruhlenia / shutterstock.com

The post Divi Plugin Highlight: Mhmm appeared first on Elegant Themes Blog.

Up and Running

You folks know the drill. Head over to the WordPress Plugin Repository and download The Events Calendar. It’s a free plugin, so you can either do it manually or straight from your dashboard’s Plugin page.

Once it’s activated, you get a new Events option in your admin dashboard. Depending on your specific plugin setup, it may be a little different, but it should be up top near Posts. The Settings tab should always be your first stop with a new plugin.  Especially one like this that can be tweaked to do exactly what you want it to.

Settings – General

As you can see below, there are a lot of options here, even in just the General tab. Many people won’t have to adjust many (if any) of these to begin with. I wanted to call your attention to 2 in particular:

• Include events in the main blog loop
• Enable Google Maps

Personally, I’d want to enable include events in the main blog loop. Now, any Events created through the plugin will show up in the normal blog feed in addition to the calendar itself. That makes it part of RSS and email subscriptions, too. This is a personal preference after all, depending on what your site needs. But I thought it may have needed explanation if you’re not familiar with “The Loop” in WordPress.

Enable Google Maps is pretty self-explanatory. It will put a map on the event page correlating with the address you supply. However, there’s one more step you’ll need to take even if this is enabled. Otherwise, you’ll get this:

Uh oh. Let’s take a quick detour and fix this before it even pops up.

A Quick API Detour

In the browser’s search console, you’re told there’s no API key for Google Maps. But it’s easy to get one. Head over to Google’s “Get API Key” page (yes, that’s what it’s called), and click on Get a Key. Give it a name in the modal that pops up and BAM! Instant API key.

Copy it and navigate to the APIs tab under settings and paste it in the field.

Now, you’ll have a map attached to all events with an address. (You can adjust the zoom in the settings tab, too — this is is the default.)

Settings – Display

Again, a lot of these will be personal preference based on your site’s needs (such as date display mode, format, default views). The important ones, though, are Default Stylesheet, Events Template, and Advanced Template Settings.

The Event Template is, by default, a right-side bar post. The Default Page Template takes whatever your site has set as the default page template and assigns it (for instance, if you have a no-sidebar page as your default).

Advanced Template Settings lets you put any HTML you want preceding or succeeding your event. This will be entirely wrapped around the entire post, being literally the first and last things displayed on the page other than the header and footer.

And for the Default Stylesheets, you get three options: Skeleton, Full, and Tribe Events. Skeleton is a bare-bones, no frills template that make for super-quick loading. Full styles takes your own styles from the Theme Customizer and applies it to the calendar and events. And Tribe Events is the official, fully styled theme from the devs.

Here’s what each looked like on my demo site:

Settings – Licenses, APIs, Imports

The other three tabs don’t have a lot in them. If you upgrade from the free version of The Events Calendar, you’ll put your license key in under the Licenses tab. We’ve already been through the APIs tab because as of this writing, the only API key you need with the plugin is Google Maps.

Imports is slightly more complex, but not by much. You can import from a CSV export of another service or calendar, and you can set the default post status (each Event will be posted new as  draft, pending, published, etc.) and the category you want it posted under (“Events” by default).

The Imports tab is also where you will use the Events Aggregator plugin that Modern Tribe offers. If you buy it, you can pull from Meetup, Facebook, and a bunch of others using the WP REST API.

Adding and Editing Events

The real meat of the plugin, however, is the host of Events you can, well, host using The Events Calendar. What makes the plugin work well for so many people is that adding and managing the Events is honestly no harder than posting a blog post about the event. In essence, that’s what you’re doing anyway. So in your dashboard, go to Events -> Add New. (You can also access the Add New button from the list of all Events as well.)

First, you see the post/page editor (#1 above). If you’re a Divi user, you can use any of the builder options you like. Or you can choose to use the Default editor to write it out. You can use images, HTML, whatever. It’s exactly like a blog post, and will appear above the Event-specific information you include below. It will also appear when a user hovers over the event, but any images or media will be hidden until they click through.

When that’s done, you can then move on to the Event information (#2 above), with the primary info being Time and Date, Location, Website, Cost, and Organizers. Sometimes, you might not have all of this, and that’s fine. What isn’t included will simply not appear on the Event page.

And in regard to the Event Options meta-box to the right (#3 above), you may or may not use this, but it’s great to have them regardless. If you check Hide From Event Listings, it will…hide the event from the listings. It will be live for you to share with people; however, it won’t be on the calendar or list view (or in The Loop, if you’ve chosen that option).

For Sticky in Month View, it means this entry will always be listed at the top, and Featured Event differs in that it will be listed and displayed prominently in widgets, archives, and various views.

Location, Venues, and Organizers

The final part of creating an Event is telling folks where it is, and who is throwing the party (or sponsoring the festival or whatever). While there is an Add New button under both the Venues and Organizers items in the dashboard menu, the far easier way to create them is on an event-by-event basis as you fill out the information.

Please keep in mind that as you create new Venues or Organizers this way, the text area/dropdown labeled that says Create or Find a Venue is for Names only. The address information will pop up when it’s filled out. So you don’t need to type it all in, unless you want your venue to be named “1337 Yoga Circle” or whatever the street address is for organization purposes.

Best of all, any Venues or Organizers you create this way will stay in the database for later use, so you can simply pick them from a dropdown in any future event you create. You can also see/edit every single Venue and Organizer from the corresponding admin menu.

The Events List Widgets

Finally, we have the built-in widget that you can place in any widgetized area of your site. You can select a title, how many upcoming events you want to show (and even hide the widget entirely, if no events are upcoming). This is additionally where the Featured Event tag comes into play, as you can have a widget specifically for those.

You will also notice the Generate JSON-LD Data, which is checked by default. I say keep it checked, as it’s a default schema for Google and other search engines to grab event data specifically and list them in search results separate from your page (such as in cards).

Lo and Behold: Your Event!

Now, any event you create like this will show up on the calendar, in any lists or widgets or archives. And if you’ve taken the time to style the description, when you click inside from any of these areas, you and your visitors will get all the information they need to enjoy all your hard work when the time comes.

That’s Just the Free Version!

If you need more functionality than that, there is a The Events Calendar Pro that Modern Tribe sells. Additionally, there are 8 total premium add-ons you can use to extend The Events Calendar and customize it into whatever you need. If you use Eventbrite for ticketing, you can integrate it with the plugin, or you can handle tickets and RSVPs through WooCommerce with another called Event Tickets Plus.

A full list of their add-ons can be found in the dashboard menu item under Events called, appropriately, Event Add-Ons.

What Do You Think?

While the free version does a lot, its major downside is there isn’t a built-in RSVP system except for users to export to iCal or Google Calendar. The real issue there is that organizers and venues don’t get information or analytics about expected attendance. For some people, that might be a dealbreaker, but with the premium add-ons, there’s a solution.

That said, with everything the free version does offer, there’s a really good chance that you will find a use for it. It sure seems like there’s a reason it’s become one of the top event plugins for WordPress. And since The Events Calendar is free, you don’t have much of a reason not to give it a shot.

What is your event plugin of choice? Let us know in the comments!

Article thumbnail image by PureSolution / shutterstock.com

The post The Events Calendar: A Detailed Overview of the Free Version appeared first on Elegant Themes Blog.

I hope you like them!

Divi Design Showcase: New Submissions from April 2018

1. Heidi Rose

This site was submitted by Heidi Rose. It uses a minimal design with a few sections with background images, a couple of warm tan sections (including one with an overlay), and several sections with white backgrounds with text. Several titles have a hand written font while taglines use all-caps with extra spacing which look amazing over the white backgrounds. I love the use of true parallax in a couple of the sections.

View Website

2. Petratec

This site was submitted by Arthur. You can tell at a glance, just from the colors and images alone, that this site focuses on engineering. The large blue image fades to a solid blue background as you scroll, transitioning from an introduction to services to a contact form. The other pages follow this same design. I love the services section. It has overlapping blurbs which change from blue to yellow on hover, and cut-out images that overlap the blurbs and remain in place on hover.

View Website

3. Noje

This site was submitted by Chris Peak. The hero section displays a background video in time-lapse behind the overlapping product graphic. I love the use of images in this site. An About section displays two columns with images as links to pages. A non-clickable image gallery displays 9 images in three columns. Images do not use padding, so they’re touching on all sides. I also like the dots that appear above the links in the menu on hover.

View Website

4. Shovel

This site was submitted by Kelsey Frizzell. This site makes excellent use of purple highlights and line-art. The art-work is used either in backgrounds or as the graphic to draw attention to a section. Several of the full-width sections with graphics have purple highlights. Alternating numbered lists step you through the process of using the app. I also like the outline for navigation on the How to Study page.

View Website

5. Grib

This site was submitted by Camiel Bos. It uses lots of angle section separators to separate the blue and white backgrounds. A three-column section to show the product and benefits shows a 360 degree rotation of the product using a slider control. Blue and green are used together to create highlights and often alternate from one to the other on hover. The site makes great use of color, box shadow, and illustrations in its calls to action.

View Website

6. Das Gute Ruft

This site was submitted by Philipp Stakenborg. This one alternates tan and blue with two-color section section separators throughout. The tan sections use green highlights as shadows behind the buttons and title text. Several other pages use red highlights in the blue backgrounds. I love the section right in the middle with a background image and a text overlay with its angled section separators that creates an angled section. I also like the footer with its use of dark blue and large icons and the loading animation.

View Website

7. Tip Me

This site was submitted by Philipp Stakenborg. This one uses some interesting section separators. In the hero section you can see a circled cut-out in the right corner. This same curvy design is also used to separate the hero section from the following section, which uses an elegant two-sided button to choose which set of blurbs display. I love the way the blurbs use cartoonish illustrations that stand out and match the site’s branding.

View Website

8. Paper Jacket Marketing

This site was submitted by John Hicks. It uses lots of yellow highlights throughout, including the menu which displays a yellow block with text instead of a hamburger menu and shows a yellow background on open. I love the angled section separator for the hero section with Engage! and a down arrow that invites you to see the rest of the site. I like the way the portfolio images zoom on hover. The site makes excellent use of color, images, and icons.

View Website

9. LearnSafe

This site was submitted by Shawn Wright. This site uses various shades of blue and green for title text, buttons, and graphics against shades of off-white for backgrounds to create a clean and elegant design. A services section displays four services in two columns with alternating background colors, large icons, blue titles, and dark blue links. I love the use of graphics for numbering within blurbs and alternating sections.

View Website

10. Little Green Thumbs

This site was submitted by Molly Seaton-Fast. I love the bold colors and fonts in this site. They work perfectly for the target audience. It uses lots of styled section separators, dividers, true parallax, and overlapping elements. An Instagram slider creates a gallery. The information sections display alternating CTA’s with and without background patterns. The menu displays icons in the submenu and changes color on scroll. Even the blog’s sidebar is styled with a matching background color. I also like the alternating blog layout.

View Website

In Closing

That’s our 10 best community Divi website submissions for the month of April. These sites look amazing and as always we want to thank everyone for your submissions!

If you’d like your own design considered please feel free to email our editor at nathan at elegant themes dot com. Be sure to make the subject of the email “DIVI SITE SUBMISSION”.

We’d also like to hear from you in the comments! Tell us what you like about these websites and if there is anything they’ve done you want us to teach on the blog.

Featured Image via StudioADFX / shutterstock.com

The post Divi Design Showcase: New Submissions from April 2018 appeared first on Elegant Themes Blog.

That’s where a plugin like Query Monitor comes in. With this tool, you can monitor all of the queries made to your database, which helps you keep an eye on what resources you’re using. In this article, we’ll talk about what queries are and how it can benefit you to track them. We’ll also teach you how to use the Query Monitor plugin and interpret its results.

Let’s get to work!

What WordPress Queries Are (And Why You Should Monitor Them)

In the simplest terms, a ‘query’ is a request made to a database to return information. When WordPress (or any of your plugins or themes) requests information from your database, they do so in the form of a query.

When someone loads your website, several queries fire off in the background. Monitoring what these queries are can enable you to:

• See which plugins or themes have a larger impact on your performance. Each query takes time and the more requests a specific tool makes, the more impact it will have on your site’s performance.
• Monitor what resources you’re using. Some query monitoring tools enable you to see how much memory you’re using and how much of your content is cached successfully.
• Improve your troubleshooting. If you know how to monitor your queries, you can troubleshoot a lot of issues more efficiently. For example, if a plugin isn’t working correctly, it can often be due to a query not firing off properly.

In most cases, you’ll use query monitoring to improve your website’s performance. By figuring out which plugins or themes are using the most resources, you can take steps to optimize these bottlenecks. For example, you could replace the resource-heavy tools with better-optimized alternatives, or upgrade your hosting plan.

An Introduction to the Query Monitor Plugin

The Query Monitor plugin is a sophisticated tool that can do a lot more than help you monitor queries. It also enables you to keep an eye on AJAX calls, REST API requests, and even redirects.

The plugin enables you to identify exactly what components are making each request, how long it takes to process, and more. It will also notify you right away about any outright slow queries, duplicate requests, or any errors it runs into. This can be helpful for both troubleshooting and development purposes.

This all makes Query Monitor an incredibly useful plugin. The problem is, it can be hard to make head or tail of its output unless you have a background in WordPress development. We’ll talk more about how to interpret your Query Monitor logs in the next section – particularly as it pertains to performance – so keep reading.

Key Features:

• Monitor your database queries, AJAX calls, REST API requests, and redirects.
• Identify which WordPress components make each request.
• Check out how long each request takes to process and what information it pulls.
• Receive notifications concerning slow requests, duplicate queries, and other types of errors.

Price: FREE | More Information

How to Monitor Your WordPress Queries

The first step of the process is to install the Query Monitor plugin. Once the plugin is active, you’ll notice a new addition to your admin bar:

In order, this new section enables you to monitor the page generation time, peak memory use, the database query time, and the total number of queries. If you click on the section, a new menu will appear, including a multitude of options. Selecting any of these will take you to your query report:

Your query report is broken into individual sections, which you can jump to using the menu in your admin bar. In this example, you can see the plugin doesn’t detect any issues except a few duplicate items:

If we dig deeper into the Duplicated Queries section, we can take a look at the offending queries. Some duplicates, like the examples above, are harmless and won’t affect your website in any way. However, checking out this section can be smart if one of your plugins isn’t working as intended since it can enable you to pinpoint compatibility issues.

You’ll probably spend most of your time within your query report checking out the Queries by Component section. Here you can check out how many queries each of your plugins and themes makes:

You’ll notice the active theme here is Divi, and that it sometimes makes a lot of requests. The number of queries you see can vary from one report to another, so there’s no reason to panic. Here’s another report also showing Divi, a couple of minutes later:

Aside from the number of queries each component makes, the most important metric here is Time. The higher the value under the Time column, the more a plugin or a theme can impact your website’s performance. For example, look at Yoast SEO, which appears as wordpress-seo. We previously tested some plugins to measure their impact on your website’s performance, and we found that Yoast SEO required a lot of resources. When you take a look at the number of requests the plugin makes here, those results make sense.

In any case, if your website runs into performance issues, this table provides you with a quick way to gauge if any of your WordPress components are behind the problem. Keep in mind, though – there can be a lot of causes for lackluster website performance so plugins may not necessarily be the culprits.

If you scroll back up, you can see a full breakdown of each query. For each row, you’ll find information on what performed the query, which values it pulled, and how long it took:

In most cases, you won’t need to read through individual queries to find the information you need. In fact, we’ve already covered the most important part of your query reports, which are duplicate items and the components table.

All that’s left for you to look out for are individual notifications. As we mentioned earlier, sometimes the Query Monitor will notify you when it runs into slow queries, such as in this example:

If you click on the notification, you’ll see a new report, with the offending query right at the top. In this case, the culprit was Yoast SEO, and it happened when we loaded the WordPress editor:

Just to be clear – our test environment didn’t slow down much during this process. However, Query Monitor enabled us to figure out when things weren’t working out as well as they should, which is always valuable information. By keeping track of how different areas of your site performs, you can quickly address issues and optimize aspects that are hogging your resources.

Conclusion

Every WordPress website has its own database, which means it also has to process queries. The more complex your site is, the more queries it’ll need to handle. Keeping an eye on those queries is an excellent way to troubleshoot issues and figure out what your plugins and themes are doing in the background.

In most cases, you’ll want to keep an eye out for duplicate queries, to avoid compatibility issues. You can also break down the results of your reports by components. This enables you to monitor how many queries your plugins and themes make and when one of them takes longer than usual.

Do you have any questions about how to interpret WordPress queries? Let’s talk about them in the comments section below!

Article thumbnail image by magic pictures / shutterstock.com

The post What a WordPress Query Monitor Is (And Why You Might Need One) appeared first on Elegant Themes Blog.