WordPress Themes with Visual Drag & Drop Technology. Home of Divi, the most popular Premium WordPress Theme in the world.Elegant Themes builds amazingly beautiful Premium WordPress Themes coupled with advanced functionality and awesome support. Follow this blog to know more about Elegant themes.
Designing broken grid layouts is a modern trend in web design. More traditional grid layouts tend to play it safe by keeping all the content of your site neatly organized in their proper place. And to be fair, all websites rely on the structure this type of harmonious grid provides. Broken grid design, on the other hand, is about breaking free of the constraints of the grid in an effort to create more engaging layouts by layering and overlapping elements on the page.
Many of our Divi Layouts have used broken grid design elements. And, using Divi’s premade layouts to bring this modern design to your own site can be a huge timesaver, not only for design inspiration but also for development. But, if you haven’t learned the methods behind the creativity, you may miss out on some cutting-edge techniques that can boost your design skills.
So if you are interested in learning the secret behind broken grid design using Divi, this is the post for you. I’ll be walking you through 6 design techniques used on our Divi layouts to offset your content in elegant and creative ways.
Let’s get started.
#1 Overlapping Elements
Inside the row, a text module is added with the text you want to use. In this case, the word “Hired” is added as the content. The text is then given a custom text size using the vw length unit. This is important to scale the letters with your width of your browser window so that the large text doesn’t break to another line on smaller browsers.
In this example, the text is given a text size of 27vw. Since 1vw is relative to 1/100 of the width of the browser, setting the text size to 27vw means that each letter will be 27/100 (or 27%) of the width of the browser window. This isn’t an exact science since the width of each letter in web fonts can vary so you may need to adjust the width to get it right.
Next, the row is also given a custom width of 80%. Because percentage length units are relative to the parent (containing) element. The row will be 80% of the width of the section (which is 80% of the page container).
To offset the row, you simply add a -12% right margin to pull the row to the right of the section. Notice how the text is aligned in the center of the purple section and the image is overlapping halfway into the exposed white content area. This is a great way to offset your content in a way that creates a unique layout and looks pleasing to the eye.
If you want to change the content area background color only for the current page you are editing, you can go to page settings from the visual builder and change the content area background color option.
#3 Using Borders to offset sections and rows
Notice that the border with is 8vw (8/100 of the viewport width). This will make sure the border scales nicely with your browser. You could also set a percentage unit (8% would be 8% of the width of the section) for very similar scaling.
#4 Using Box Shadow to Create Offset Backgrounds
The key here is to take advantage of the inner shadow position with a negative vertical position (so the shadow comes up from the bottom of the section). The vertical position value (-220px) is what determines how much overlap you have for the design.
You can also position your box shadow in different ways to create offset background blocks. This is one of my favorite design tricks. A good example of this can be found on the Interior Design Company Landing Page Layout
WordPress is an amazing piece of software. Having overtaken nearly one-third of the entire internet means that it pretty much has to be. However, things can still go wrong. Servers can get issues, and files can get misconfigured. And then there’s plain-old user error. Site health has a lot of factors to consider. Thankfully, the fantastic Core Contributors have put together a kind of WordPress health check that will keep your sites in tip-top shape.
It’s Like a Physical for Your Website
What the team has done is develop a plugin called Health Check that is pretty much like when you go into the doctor for a physical examination or regular check-up. All of the basic functionality is evaluated, and you get a report of what’s in good condition and what you can do to have a little better quality of life.
Once you do that and hit Activate, the plugin immediately runs its check. By the time you’re able to navigate to the Dashboard – Health Check link that was added to your admin panel, your report is ready and waiting for you. No waiting on the processes to run, no maintenance mode, nothing.
But — there’s always a but, right? — you do have to deal with a single issue at the same time that happens in the background.
Health Check gives you a warning that anytime you’re dealing with troubleshooting and server stuff, conflicts between plugins, Core code, and themes may occur. They want you to be very aware of how the site check works, so it’s a good idea to make a backup of your site. Admittedly, you should be making regular backups anyway, but if you’re a little lax on those, this is a good reminder. If you’re not sure where to begin, you can read our piece on how to get it done quick and easy with UpdraftPlus.
Once that’s out of the way, and you’re all backed up, click into Dashboard – Health Check. (It’s at the very top and should be the very first submenu in your admin panel.)
Immediately, you have your site’s health check results. There are other tabs that display far more detailed information, but for the at-a-glance report card, you can scan it easily. Plus it has nice green, yellow, and red bullets to let you know what’s going on.
Making Sense of the WordPress Health Check
If you’re a normal user of WordPress, you may not get a lot out of this screen. However, there is still a lot of info here that affects you on a daily basis. Part of the reason to run a WordPress health check in the first place is to get this kind of broad overview of what’s under the hood.
For instance, the very first entry called PHP Version. While this one is totally behind the scenes, having an up-to-date PHP version is imperative to a healthy site. Recently, WordPress has made a recommendation for PHP 7.2 or higher, and many servers (mine included, apparently) are running on 7.0 or below. In this example, you see that it’s a yellow dash, which mean’s it is okay, but not great. If you see a 5.x version, contact your host for an upgrade. If you don’t deal with the host, contact your systems administrator.
You should be concerned about HTTPS Status. Just like it says, this is whether or not your site is secured by HTTPS with an SSL certificate. These days, Google is prioritizing sites secured with SSL over sites that aren’t, so if you’re seeing this one with a yellow or red, get to SSL-ing. It’s really simple to get set up. There’s even a plugin called Really Simple SSL to help.
Also, as a user, you may need to know about Background Updates. As you can see in the example above, there is a mix of red and green. So the plugin thinks that some of what we have going on is good, and it thinks some of it is bad. These are only suggestions, remember, and don’t dictate what is best for your site. You can see that I’ve disabled WP_AUTO_UPDATE_CORE, which means that new versions won’t be installed — this may be a good thing because you don’t run the risk of crashing your site with untested plugin, theme, and Core version combinations.
Additionally, you can see under that line, a plugin has prevented updates. I have the Easy Updates Manager plugin installed so that I can manage who, what, and when specific updates happen with granular control. These are showing red because WordPress always wants you to have the newest version (which does tend to be a great idea), but I’ve taken control of that process. So they aren’t bad red marks, but they are noteworthy.
The Debug Information tab is a text rundown of everything you have active on your site. From active theme files to plugins and their versions. You will see the exact size your installation takes up, as well as what themes are disabled, server information, file permissions, and a lot more.
This is an incredible tool for fixing problems, especially when your tech person asks for specifics you may not know. Hit that Show copy and paste field, and just email them the contents in plain text. Most likely, this will be far more information than a typical WordPress user needs, but it’s the kind of info you must have to fix real problems.
The PHP Information, tab is very similar. You get a ton of information about every option your server can have with PHP. Most people won’t use this tab. However, when you need extremely specific info to troubleshoot, I have never seen an easier way to pull the stuff than this.
Finally, you come to the Troubleshooting tab. Click into this, and you can press a single button: Enable troubleshooting mode. When you do that, nothing will change for your site visitors, only for you. This is not maintenance mode. Health Check disables everything and reverts the site back to the default theme (likely Twenty Seventeen) with no plugins active.
While troubleshooting mode is active, you can enable/disable each and every plugin and theme on an individual basis. The admin bar up at the top of your screen gives you easy access to do this. If you were having any kind of trouble before, now you have an option to pinpoint the cause. This is effectively the official way of handling the age-old advice disable all your plugins and activate them one by one. Keep in mind, however, that only active plugins will be included to troubleshoot. Any inactive ones will remain so.
When you’re finished, you click on the Disable Troubleshooting Mode link, and everything is back to normal.
How Does Your Site Feel?
It takes very little time to perform a WordPress health check. The amount of information you have access to is unreal, and this plugin makes it really accessible. You might not even have any trouble with your site, and that’s the perfect time to install this plugin. Preventive care is the best care, remember. So download the official check-up plugin for WordPress and make sure that your site stays ship-shape.
How do you handle routine check-ups and audits of your sites and servers?
Article featured image by Tetiana Yurchenko/ shutterstock.com
Today we are proud to announce that yet another one of our most requested features of all time is currently under development: more column structures!
Divi Feature Sneak Peek: More Column Structures - YouTube
The ability to create a wider variety of page layouts with more columns and more column structures has been something that our community has been asking for for a long time. Well we’ve been listening and we’re excited to share our vision for the first of a few planned feature releases around Divi columns.
4 New Column Widths & 16 New Column Structures
In the first of our planned column features releases we’ll be introducing four new column width, which will create sixteen new column structures you’ll be able to choose from.
When you add a new row in Divi now, the column options are displayed in a three column by four row grid. As seen below.
When our new expanded set of column widths and combinations are released, you’ll see a new grid that contains four columns and four rows of various options to choose from. When adding a regular row, you’ll have nine new row structures to choose from.
When adding a specialty section, you’ll have seven new options to choose.
These new column structures will bring with them four new column widths previously unavailable in Divi: 1/5th column, 2/5th column, 3/5 column, and 1/6th column. Making even more interesting and intricate designs possible with Divi than ever before.
Even More Column Magic to Come
As we mentioned earlier, this is just the first of a few planned feature releases around Divi columns to come. The next couple releases to follow will focus on adding more design options, flexibility, and even custom column widths!
As always, we can’t wait to see what you will create with these new column structures. And seeing as how this has been on so many people’s feature wish lists for so long, we’re sure you know exactly what you’d like to do with Divi’s new column widths and structures.
If you own a website that allows people to create accounts, you’re most certainly aware that your website sends out WordPress notifications. These email notifications help you communicate with admins, editors, subscribers and more. On top of the default WordPress notifications (such as a lost password email notification), you can also send out additional notifications to specific user roles. These notifications can empower the communication between your users and you. Plus, they can also drive more traffic to your website.
To help you get things going, we’re going to show you how to create and customize WordPress notifications. To accomplish this, we’re going to use the highly-rated and free ‘Better Notifications for WordPress’ plugin. First of all, we’ll go through the different types of notifications that are available and afterwards, we’ll also show you how to create one from scratch.
Let’s get to it!
Download & Install The Free ‘Better Notifications for WordPress’ Plugin
The first thing you will need to do is download the free ‘Better Notifications for WordPress’ plugin by going to the following page and clicking on the blue download button. After downloading the plugin, upload it to your WordPress website and make sure you activate it once it’s uploaded as well. The Better Notifications for WordPress is an easy-to-use plugin that allows you to send out notifications using shortcodes in your email templates. It includes a ton of notifications types and you can choose which individuals or user roles receive a certain notification. After creating a notification, you can enable or disable it at any time.
Types of Notifications: Overview
Now, you might be wondering what types of notifications you will be able to send out using the Better Notifications for WordPress plugin. To help you find exactly what you need, we’ve listed the types of notifications below.
New User Registration
User Lost Password
User Role Changed
WordPress Core Automatic Background Updates
New User Registration
User Lost Password
User Email Changed
User Role Changed
New Post Published
Post Pending Review
New Private Post
New Comment/Awaiting Moderation, Category, Tag, New Trackback, Pingback
New Page Published
Page Pending Review
New Private Page
New Project Published
Project Pending Review
New Private Project
Tryout: New Post Published Notification
To show you how easy it is to set up and customize new WordPress notifications, we’re going to walk you through the setup. For this scenario, we want users to be notified once a new post is published on our website. After setting up the notification on your WordPress website, an email will automatically be sent to the user roles of your choice. Before making a notification go live, you can also send a test email. Plus, at any time, you’ll be able to disable or modify this notification and any other notification you add.
Add a New Notification
The first thing you’ll need to do, assuming you’ve uploaded and installed the plugin at the beginning of this post, is going to Notifications > Add New.
Choose Notification Type
In the previous part of this post, we’ve gone through all the notifications you’re able to send out to specific users on your website. For this tryout, search for the ‘New Post Published’ notification.
Choose Email Formatting
The Better Notifications for WordPress plugin allows you to choose your email formatting. You can choose between HTML formatting and plain text. With HTML, you can create stunning email templates that match the branding of your website perfectly.
After you’ve chosen the notification type, you can choose which user roles you want to notify about the recently published post. Do you want to notify the author of the post, for instance? Choose the ‘Author’ user role. Doing so can remind your author to interact in the comment section of his/her post. You can also choose to send out the email to your subscriber list to increase the traffic on your website.
Modify Email Content Using Shortcodes
There’s no purpose in customizing each one of the email notifications manually, right? It takes a lot of time and energy. Automate what you can automate and this plugin allows you to do just that. In the print screen below, you can see a button that says ‘Find Shortcodes’. By clicking on this button, a new tab with all shortcodes will open. These shortcodes allow you to add relevant information. You can, for instance, add your post title in the subject line without having to type it down manually. You can also approach your reader personally by mentioning their name. There are a ton of shortcodes available and you can play around with these to see what fits best.
Send a Test Email
Done modifying your email content? What better way to see if everything looks good than by sending out a test email to yourself? In the top right corner of your new notification, you can send out a test email. This email will be sent to the email address linked to your WordPress account.
Disable Notification When Not Needed
Not all notifications are meant to be repeated. That’s why you can easily enable and disable notifications at any time on your website in the same box at the top right corner of your notification. You can also modify your notification after setting it up.
WordPress notifications are an important part of membership websites. WordPress sends out default notifications to its user, depending on their user role. You can, however, also send out additional notifications. In this post, we’ve shown you how to do that using the free ‘Better Notifications for WordPress’ plugin. If you have any questions or suggestions, make sure you leave a comment in the comment section below!
Featured Image by Golden Sikorka / shutterstock.com
Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away brand new, free Divi Layout Packs from our design team to you.
For the second layout pack of this week, Kenny and his team have created a professional Life Coach Layout Pack with 6 unique layouts. This layout pack is perfect for life coaches who want to create a website that allows them to connect with their potential clients.
The Life Coach Layout Pack contains 6 different layouts and everything you need to set up a website that empowers your business. The design elements in this layout pack are both professional and gorgeous. Within each one of the layouts, you can find a stunning diagonal structure that’ll amaze your visitors and prospects.
Click the links below to see a live demo for each of the layouts included in the pack.
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 Life Coach 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.
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.
We hope you enjoy this layout pack. We look forward to hearing your opinions in the comment section below. Make sure you check out next week’s layout packs as well. We publish one on Monday and the other on Friday!
One of the most common mistakes web designers make is including too many animated elements. The thinking goes: “Animations are cool, so the more, the better”. However, too much of a good thing such as this can affect your website’s usability negatively.
Animations, much like every other web element, need to fulfill a practical purpose. In this article, we’re going to talk about some of the most common types of animations you can expect to see online. Then we’ll break down four situations where using animations in your designs is warranted.
Let’s take a look!
An Introduction to Animations in Web Design
Animations are everywhere on the web, even though sometimes you might not realize it. In the past, animations were much more pronounced. For example, it wasn’t strange to find entire websites running on Flash, where every element was animated.
Thankfully, those dark days are behind us. Nowadays, it’s much more common to make animations a part of an overall design, but not a centerpiece. One of the most common examples of animations on the web are transitions within sliding galleries. Other animations are even subtler. For example, buttons that change colors when you hover over them:
Another example of simple animations serving a purpose are fields that highlight when you click on them. This way, you always know what field you’re typing into:
However, not all web animations are so benign. There are still plenty of examples offering more flash than substance (such as websites that hijack your scrolling, for instance).
In our opinion, it’s entirely possible to construct an entire website without using animations, so if you choose to add them, they need to fulfill a purpose. Namely, they should make your website easier to use, as do practically all of the examples mentioned earlier. However, a lot of people fall into the trap of wanting to animate every aspect of their website just to add some visual flair.
There’s nothing wrong with wanting a stylish website. However, too many animations can cause a visual overload. In some cases, they might even slow down your site, depending on how you implement them, which is something you want to avoid at all costs. With this in mind, let’s talk about some situations where using animations in web design does make sense.
4 Situations Where It Makes Sense to Use Animations in Web Design
Keep in mind – this isn’t a definitive guide to the situations where you can use animations in web design. It’s just a collection of suggestions born from our experience. If there’s another situation you think animations can enhance your user’s experience, feel free to try them out!
1. Highlight Actions Using ‘Microinteractions’
Animations don’t need to be flashy to be effective, hence the term microinteractions.
When we talk about microinteractions, we’re referring to simple animations with single-use cases. Take the example above, where the button you choose highlights itself when you click on it. This type of animation fulfills two purposes, it gives you visual feedback when you interact with an element, and provides you with information on how to use it.
Ideally, you want microinteractions to be subtle. They shouldn’t steal the spotlight from the elements they highlight, but simply make them easier for you to use. However, it can be hard to determine when to implement microinteractions on your site. After all, even the most straightforward page usually has dozens of elements you can potentially animate. Here are a few quick tips for when it makes sense to implement them:
To highlight when you turn a feature on or off.
As a way to let users know a particular action was a success, such as submitting a message through a contact form.
When highlighting specific pieces of information, such as prices within a table.
Hidden menus are somewhat controversial design elements. A lot of people think that menus should always be visible, since they’re the primary way users navigate through your website. We would tend to agree, but in some cases, hidden menus make sense if they’re easy to access.
You can also use animated drop-down menus if you’re working with a large number of pages. In either case, using animations makes sense since it helps soften the reveal of the hidden menu. Without them, menus would just appear instantly on the screen, which can be too abrupt.
As for how to add animations to your menus, Divi includes several options you can use. For example, you can choose between fade, expand, slide, and flip animations for your drop-down menus:
You also have several options when it comes to hidden menus. For example, you can set up a ‘hamburger’ menu with a sliding reveal, which can make for very clean designs:
Regardless of what type of animation you choose to implement, remember you need to test it on both desktops and mobile devices. Menus are an essential part of your website, so you need to make sure animations don’t interfere with their functionality.
3. Display Hidden Information Using Hover Animations
Simple hover animations are a great way to include more information into smaller spaces.
Hover animations are a great way to maximize the information you provide in the space available. For example, you can add mouseover effects to gallery items that show you each picture’s name or the date when they were taken.
The key with hover animations is to add information your visitors will be interested in reading about. For example, with Divi you can create a section to introduce your team members and add biographies that display when people mouse over their pictures:
If you want to keep things simple, you can also use hover animations as microinteractions. This way, when visitors mouse over an element, they’ll know it ‘works’, or get a clue as to how to use it.
Both these types of hover animations require you to use a bit of CSS. However, they’re easy to implement, and they can add some depth to otherwise simple websites.
4. Create Sliding Galleries Using Transitions
Sliding galleries are elegant and they enable you to tell a story.
Out of all the ways to add animations to your website, sliding galleries are probably one of the most common. In fact, most people probably don’t realize they’re looking at simple animations when they slide from one image to another.
Without animations, the transitions between images would be instant, which can be jarring. In this situation, animations are mostly about style, but they can still make your galleries more user-friendly.
There are a ton of plugins you can use to add animated galleries to WordPress, each with their own set of effects. However, if you’re using Divi, you don’t need to add any extra plugins in the first place. The Divi Slider module enables you to add sliding galleries to any of your pages, as well as customize their transitions:
Most websites use ‘sliders’ on the top of their pages. However, you can break the mold and use sliding galleries in plenty other situations, such as to display testimonials for your products and services.
Too much of a good thing often ends badly, and animations are no exception. When it comes to web design, you want every element you add to your pages to fulfill a purpose beyond looking pretty. Plus, you have to keep in mind that animations can slow down your website, which is something you want to avoid.
If you want to put your web animations to good use, here are four scenarios where it makes sense to implement them:
Highlight actions using microinteractions.
Reveal hidden menus using animations.
Display hidden information with hover animations.
Create sliding galleries using transitions.
Do you have any questions about when to use animations in web design? Ask away in the comments section below!
Article image thumbnail by Olha Chernova / shutterstock.com.
We want to make it easier and faster to build new pages, and to bring attention to some of Divi’s most powerful tools.
Divi Feature Update! The New Builder Page Creation Workflow - YouTube
Today we are introducing a new page creation workflow to the Visual Builder that makes it even easier to get new websites up and running quickly. Now, when you create a new page in Divi, you will be greeted by three page creation options. You can start from scratch, or you can jump straight into the Divi Library to load a premade layout. We are also introducing a brand new way to create pages in Divi: Page Duplication. You can instantly clone any existing Divi Builder page on your website and import it directly into the Visual Builder to jumpstart your new page. This really saves a lot of time!
Quick Access To Premade Layouts And Divi Library Items
Depending on the type of page your are building, you can jump straight into to different page creation methods.
Choose Your Path
We are big believers in the power of our free Divi Layout Packs and in the many custom Divi Layouts that you save to your Divi Library. We are bringing these ideas to the forefront of the builder, allowing you to quickly access your library items right off the bat when you create a new page. Depending on the type of page your are building, and depending on the current state of your website’s development, you can choose the path that best suits your needs.
Customize Your Default Pathway
This new page creation workflow is completely optional, and you can even customize your desired default pathway within the Visual Builder interface settings. If you want to bypass the choice altogether, you choose to jump straight into either of the three options whenever the Visual Builder is loaded. If you want the builder to work just like it does now, simply choose Start From Scratch as your default page creation option. If you find yourself often loading layouts when you create new pages, you can choose “Load Premade Layout” as your default pathway. Every time you launch the Visual Builder, you will jump straight to the library and you can work from there.
Duplicate Any Page And Import It Into The Visual Builder
Now you have access to all of your Divi Builder pages from within the Visual Builder. Instantly import any existing page content directly into the builder to jumpstart your new page.
Even if you don’t use our premade layouts, and even if you aren’t using the Divi Library to build custom layout collections, you can still greatly benefit from our new page duplication pathway. Instead of creating all of your shared design elements twice, and instead of having to refer to different pages while you continue to build your website, you can simply duplicate an existing page and skip the tedious process of replicating your custom design and page structure. All of your existing pages work much like layouts in the Divi Library and can be accessed at any time from within the builder. Important any existing page into the builder instantly to jumpstart your new design!
The new page creation workflow is available today, so download Divi and take it for a spin. Let us know what you think in the comments, and don’t forget to check back next week for even more great Divi features coming your way.
Join the most enthusiastic and loving WordPress theme community on the web and download Divi 3.0 today. Using the new Visual Builder, you can build websites faster than ever before with its incredibly fast and intuitive visual interface. You have to see it to believe it!
If you’re offering membership deals on your website, it’s important to make sure people will notice them on your website. To give you a headstart, we’re going to provide you with a stunning membership showcase that you can recreate step by step using Divi’s built-in options only. We’re combining a beautiful section background with Blurb Modules that showcase membership deals and a separate button that takes your visitors to the right page.
How to Creatively Highlight Your Membership Deals with Divi - YouTube
Before we dive into the tutorial, let’s take a quick look at the design we’ll recreate on different screen sizes.
Download This Tutorial’s Files
To lay your hands on the free images files, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.
Join the Divi Newlsetter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Add a New Section
Start by creating a new page or opening an existing one and switching over to the Visual Builder. Once you do, add a new section, open the section settings and apply the following gradient background to it:
Color 1: rgba(255,255,255,0)
Color 2: #150a56
Gradient Type: Linear
Gradient Direction: 165deg
End Position: 36%
Open the background image tab next, upload the ‘home_office-39.jpg‘ image you can find in the downloaded folder and apply ‘Multiply’ as your Background Image Blend.
The next thing we’ll do is add our section dividers. We’ll use both a top and bottom divider to create the nice background effect. Start by opening the Top tab and apply the following settings to it:
Divider Color: rgba(30,35,96,0.75)
Divider Height: 700px
Divider Arrangement: Underneath Section Content
Then, switch over to the Bottom tab and make the following changes:
Divider Style: Find in List
Divider Color: rgba(2,0,35,0.93)
Divider Height: 430px
Divider Arrangement: Underneath Section Content
We’ll create some extra space at the top and bottom of the section by adding the following custom padding:
Top Padding: 130px
Bottom Padding: 65px
Add First Row
Now that we’ve made all the desired changes to our section, we can start adding the first row. The column structure we need is the following:
Before adding any modules, we’re going to make a small modification to the row’s default settings. Open the Sizing subcategory within the Design tab and enable the ‘Make This Row Fullwidth’ option.
Add Title Text Module to Column 2
Now we can start adding our modules! We’ll only use the second column of this row. Add a title Text Module that contains the following text settings:
Text Font: ABeeZee
Text Size: 56px
Text Color: #f9f9f9
Text Line Height: 1em
Text Orientation: Center
We’ll need some space at the top as well. That’s why we’re adding ’50px’ to the top margin.
Add Description Text Module to Column 2
Right below the previous Text Module, go ahead and add a new one for your description. Once you add your content, apply the following text settings to it:
Text Size: 16px
Text Line Height: 1.4em
Text Orientation: Center
We’ll also change the Width of this Text Module into ‘70%’ and enable center Module Alignment.
Add CTA Text Module to Column 2
Once you’re done with the description Text Module, go ahead and add a CTA Text Module right below it and apply the following text settings to it:
Text Font Style: Uppercase
Text Color: #ffffff
Text Letter Spacing: 5px
Text Orientation: Center
Add Arrow Image Module to Column 2
The last module we’ll need to add to this row is an Image Module. Upload the ‘arrow.png‘ image which you can find in the downloaded folder.
Change the width of this image to ‘13%’ next.
We want this arrow to appear at the same height as our CTA Text Module. That’s why we’ll add ‘-100px’ to the top margin as well.
Lastly, we’ll disable this Image Module on tablet and phone since it won’t match those screen sizes.
Add Second Row
For the membership deals, we’ll need to add another row using the following column structure:
Before adding any modules, we’re going to apply a left Row Alignment.
And we’ll also make some modifications to the Sizing subcategory:
Use Custom Width: Yes
Custom Width: 1030px
Use Custom Gutter Width: Yes
Gutter Width: 1
Add Blurb Module to Column 2
To showcase a membership deal, we’ll use a Blurb Module in combination with a Button Module. Start by adding a Blurb Module to the second column of your row and add the content of choice.
Next, upload the ‘conference_illustration_05.png‘ image which you can find in your downloaded folder.
Then, use ‘#ffffff’ as the background color of your Blurb Module.
Title Text Settings
We’ll need to make some modifications to the title of our Blurb Module next:
Title Font Weight: Ultra Bold
Title Font Style: Uppercase
Title Text Alignment: Center
Title Text Color: #485B90
Body Text Settings
We’ll also change the body text settings:
Body Text Alignment: Center
Body Text Size: 11px
Body Text Color: #485B90
Continue by opening the Sizing subcategory and make the following changes:
Image Width: 50%
Content Width: 250px
Width: 72% (Desktop), 50% (Tablet), 99% (Phone)
We’re not using ‘100%’ for phone that would make it inherit tablet’s ‘50%’ otherwise.
The spacing of the Blurb Module is a very important part of this tutorial. We’re going to negative top and left margin on desktop to push the Blurb Module to the left and make it overlap with the previous row. We’ll also add some custom padding to create a better-looking result:
Top Margin: -380px (Desktop), 0px (Tablet & Phone)
Left Margin: -180px (Desktop), 35% (Tablet), 20% (Phone)
Top Padding: 30px
Right Padding: 10px
Bottom Padding: 30px
Left Padding: 10px
Next, we’re going to add ’20px’ to each one of the corners within the Border subcategory.
If you want your theme to show up in the WordPress.org Theme Directory, it needs to go through a stringent review process. This way, people only get to see themes meeting certain standards. However, the review process can take a long time depending on how many other submissions are waiting for approval.
That’s where the Trusted Authors program comes in. Its goal is to help streamline the review process for certain authors, and in this article, we’ll explain how it works and why it’s a good initiative. However, let’s firstly take a minute to break down how the theme review process works in general!
Some people may think those guidelines are extreme. However, it’s important to consider that WordPress users with little experience probably choose all of their themes from the directory. This means they rely on the WordPress Review Team to weed out any submissions that may break their website or cause other problems.
In addition, since WordPress has such a massive user base, having your theme approved for inclusion all but guarantees it’ll get some attention. Let’s talk a bit about how the approval process works, step-by-step:
You upload your theme to WordPress.org, where it enters a queue.
A reviewer gets assigned to your theme, who checks whether it follows the basic guidelines, and leaves you a ticket containing recommendations for changes if needed.
You take care of all the requested changes and submit it again for review.
If there are no more issues with your theme, it’s approved and moves to a new queue.
A senior reviewer takes another look at your theme and may request additional changes before approving your ticket.
It sounds simple on paper, but your experience submitting themes for review might vary. What’s more, the WordPress Theme Review team adheres to a hierarchical structure of team leaders, moderators, reviewers, and trainees. Depending on who you get, the process might take longer for you if they’re still in training or if workloads are high.
That is not to say the process doesn’t work, but there’s always room for improvement, which brings us to the next section.
Why The WordPress Theme Review Process Needs an Update
The WordPress Theme Review team does a fantastic job. They take hundreds of submissions and comb through them to find any errors that might affect WordPress users. However, the theme review process is certainly due for an update.
If you’ve ever submitted a theme for review, you know the process can be a bit frustrating. First off, it can take a while until a reviewer checks out your theme. In some instances, your reviewer won’t get around to adding tickets until the last possible minute, or they’ll disappear, leaving you waiting until you get a new one. In addition, you can only submit one theme at a time, which means the wait adds up if you’re working on several of them.
The main problem, of course, is the sheer number of themes in the queue. As WordPress keeps growing, the number of themes that get submitted increases, meaning an increased workload for everyone. Naturally, that leads to the process slowing down, which is far better than the team deciding to lower requirements. Even so, people have been complaining about how long the process takes for years now. There are also complaints about how the WordPress theme development documentation could stand to be more thorough.
In short, the theme review process works, but it’s more frustrating than it should be. This frustration can scare some talented developers away from submitting future themes, which is a net loss for the entire community.
An Introduction to the WordPress Trusted Authors Program
The WordPress Trusted Authors program is a solid first step when it comes to streamlining the whole review process. The goal is to make it easy for developers with a proven track record to submit and receive approval. With this change, the Theme Review team hopes to see a significant reduction to the waiting queue, which means they can get to new themes sooner. If you make it into the program, your theme submissions will go directly to a new queue, which team leaders will handle directly.
As you might imagine, there are requirements to meet, but they’re not as strict as you’d expect. To apply, you need to have at least one theme live in the WordPress repository. Then, when you submit a new theme, you can add a comment to this post, following the format you see below:
At this point, a team leader will review your application. If they approve you for the Trusted Authors program, your theme will move to a new queue reserved for others developers who’ve also made it in.
You can also apply to the program using your latest approved theme once it’s live. However, keep in mind your theme should be somewhat recent (no more than two years old) to increase your chances of approval. After all, WordPress theme requirements change constantly, and older themes potentially won’t meet new guidelines.
As you might expect, your theme needs to be nearly spotless for approval, and shouldn’t present more than three sanitization or licensing issues in total. In addition, all of your associated products need to be 100% GPL compliant, you need to use demo content correctly, and there should be no malicious code within your theme.
Of course, the WordPress Trusted Authors program is still in its early stages. This means there might be changes down the line and requirements may vary. However, it’s a move in the right direction and it can benefit you greatly if you’re a prolific WordPress developer.
Having a theme in the WordPress.org Theme Directory is an excellent way to obtain more users and attention to it. However, not every theme makes it past the review stage since they have to meet a strict set of standards. Even if yours does, there’s usually a long wait for approval.
Fortunately, if you’re a WordPress theme developer with a few projects under your belt, you might qualify for the Trusted Authors program. This means your theme submissions will be handled by team leaders directly so they can get approved faster. At this point, it appears to be a win-win for everyone – developers can turnover new themes quicker, and the Review Team can clear the lengthy waiting queues that cause so much frustration in the community.
Do you have any questions about how the WordPress theme review process works? Let’s talk about them in the comments section below!
Article image thumbnail by Abscent / shutterstock.com.
Adding favorite button functionality to your Divi site can be a great boost to user experience. The basic functionality works as a bookmarking system for posts. Users can browse through posts and select the ones they want to favorite. Then users can view those favorited posts later at their convenience.
For this use case tutorial, I’m going to show you how to add favorite button functionality to Divi’s Animal Shelter Layout Pack. This will allow the user to select certain pets as their favorite and then view those pets on a separate “my favorites” page.
Let’s get started.
How to Add Favorite Button Functionality to Your Divi Site - YouTube
Here is a peek at the favorite button we’ll be adding to our project posts.
Here is an peek at the favorites page we’ll be building to show user favorites.
What You Need
For this use case tutorial, you will need the following:
Once the plugin is installed, you can access the settings from the WordPress dashboard by navigating to Settings > Favorites.
Enable Favorites for Projects
Click on the Display & Post Types tab on the Favorites Settings page. Then select to enable Projects as the designated post type you want to grant favorite button functionality.
Note: You don’t have to set them as projects. You can enable posts or pages if you like. I thought it would be nice to use projects just in case I wanted to use the portfolio module to display my listings down the road.
Once checked, click the Settings button that appears to the right and update the following:
Include before content: uncheck
Include after content: uncheck
Add meta box: check
Add admin column: check
We are not checking the option to include the button before or after content because we are using the Divi Builder. We will use a shortcode to display the button within a text module.
Customize the Favorite Button Content & Appearance
Next set the Button HTML Element to “a (link)”. This will allow us to design the link from within the text module later on.
Set the Button Type you want to use. I would suggest using the predefined buttons instead of a custom markup, unless you know what you are doing. I’m going to use the Favorite Button Type.
Specify the custom colors you want to use for the button. Update the following for the default button state:
You can even preview what the button will look like in the Button Type section above (it’s clickable as well).
Customize the Favorites Listing Display
Under Listings Display, select to customize the favorites list HTML and click the settings button to the right. The primary reason I decided to do this was that I found it difficult to get thumbnails to display with the favorites listing shortcode, so I decided to create a customized output for my listings.
By default the favorites list will be displayed in an unordered list with “ul” as the list wrapper type and “li” as the list element type. However, I find it more difficult to style the default setup with Divi, so instead, set the List wrapper type to “Div” and the List Element Type to “Div”.
Next, select to Customize the single Listing Content Markup. You will see a wysiwyg editor to customize what listing content you want to show when using the favorites listing shortcode. You can add dynamic fields by choosing them from the dropdown list and they will be added to the content editor box. Make sure you have the visual tab selected when added the dynamic fields (it may not work with the text tab selected).
Under post fields, add the field “Thumbnail:thumbnail”. This generate the following code in the editor:
The will show the thumbnail (featured image) you have selected for the project post.
Next, add the field “Post Title” from the dropdown. This generates the following in the editor:
This will show the post title of project post.
If you plan on giving your posts a custom excerpt, you can add the “Post Excerpt” field as well. This is a great way to provide some info about the favorited listing/pet that users can see in their favorited list.
The post excerpt field will be the following:
Now that we have our fields in place, we can wrap our thumbnail and post title in an “a” tag in order to turn it into a link that will redirect to the post permalink. Since we want the permalink to be pulled from the post, we need to add the custom field “Post Permalink” for the href value for each of our links. Here is what the final html should look like in the editor:
Note: I wrapped the post excerpt field with a paragraph tag and added some bottom margin to create a little space between the listed items.
Once done, save your settings.
Here is a sneak peak of what this output will look like whenever we use the shortcode to show user favorites.
General and Users Settings
I’m keeping the default functionality of the favorites plugin under the General and Users tab. By default the plugin enables anonymous users (users not logged in) to have favoriting functionality by saving favorites as cookies. If you want to force users to login before favoriting, you can do this under the Users tab.
Adding Your Pet Listings as Projects
Now we are ready to start creating our project posts to serve as our individual pet listings. To add a new project, go to the WordPress dashboard and navigate to Projects > Add New.
Enter a title for your post (ie. the name of the pet), add a featured image, enter the content you want to display in the listing page in the excerpt box.
Import the Listing Page Layout
Next we need to add our premade listing page layout from the Animal Shelter Layout Pack. To do this, first deploy the visual builder.
Open the settings menu and add the Animal Shelter Listing Page Layout to the post.
Insert Favorite Button Shortcode
You can add the favorite button anywhere on the page by using a shortcode. For this use case, let’s add it right under the photos in the left column in the first section.
Add a text module and enter the following shortcode in the content box:
You can change the style of the button (it is technically a link) using the design settings if you want. Just be careful not to override the color you set in the plugin settings. For example, you can go to the design tab and click the link tab under the text category and update the following:
Link Font: Lora
Link Font Weight: Bold
Link Text Size: 16px
This is the most basic usage of the shortcode. There are a few additional parameters you can add to the shortcode to customize the functionality. You can check those out on the plugin page or their main website for more examples and shortcodes.
All that is left to do is update the content of the post as needed and you are done. Save settings.
Tip: You may want to save your text module with the favorite button shortcode as a global item in order to make it easier to add and edit the button on all listings.
Here is what the layout looks like with the favorite button:
Create a Page to List Favorites
Once a user clicks on a button to favorite a post, the post is saved (using cookies) and is able to be listed anywhere on your site using a shortcode. For this use case, I’m going to create a new page to list those posts that have been favorited.
Create a new page (Pages > Add New). Give the page a title (ie. “Favorites”). And deploy the visual builder.
Import the About page Layout
Next, add the Animal Shelter About Page layout to the page.
Update the Fullwidth Header Module settings at the top of the page to include a new title and subheading text. Then delete the button text for both buttons.
Add User Favorites Shortcode
At this point, all you have to do is decide where you want to add the shortcode and which elements of the layout you want to keep (or rearrange) to design your page.
In the second section, the first row has two columns. Delete the text module in the second column and update the content of the text module in the first column with the following title and shortcode:
This user favorites shortcode will display all of the user’s favorites they have selected.
Then go to the design settings to customize the text deployed by the shortcode however you want. For this example, I’m simply going to change the link text design in order to target the post title link deployed in the shortcode as follows:
Link Font: Lora
Link Font Weight: Bold
Link text Color: #d29f68
Link Text Size: 20px
Now you can add additional elements to the right column if you want and delete the rest of the layout elements you don’t need.
Favorites will only show on this page if the user has favorited posts. Here is what the page looks like with three posts favorited by the user.
The good thing about the favorites plugin is that it is designed for developers, but this can also be challenging for those not comfortable with a little html/css. But for Divi, it seems to be a nice option to get the favorite button functionality up and running without too much customization. There are more options and shortcodes available if you want to add more functionality so feel free to check those out.
It goes without saying that this plugin will work for many different use cases, not just for favoriting animals for an animal shelter. This would also work well for traditional blog posts or products.
I look forward to hearing from you in the comments.