Creative Interactive Blurb Modules Using Divi’s Transform & Hover Options
We’ve all been loving the new transform options. They help us create amazing designs and have a real-time view of the changes we make. And when combined with hover options, you can definitely manage to create some stunning effects. In this tutorial, we’re going to show you how to create interactive blurb modules by combining Divi’s transform and hover options. We’ll handle four different examples that take little to no time to create, and which you can use for any web project you want.
Let’s get to it!
Preview
Before we dive into the tutorial, let’s take a quick look at the outcome.

General Steps
Add New Section
In the first part of this post, we’re going to go over some general steps which will help us focus on the transform blurb examples later on the post. Start by creating a new page or opening an existing one and add a regular section to it.

Add Row #1
Column Structure
Continue by adding a new row to the section using the following column structure:

Sizing
Open the row settings and change the sizing settings in the design tab to allow the row to take up the entire width of the screen.

Make This Row Fullwidth: Yes
Use Custom Gutter Width: Yes
Gutter Width: 1


Spacing
Add some custom top and bottom padding as well.

Top Padding: 150px
Bottom Padding: 150px


Add Blurb Module to Column 1
Add Content
The only module we’ll...
How to Comment Your Code Like a Pro: Best Practices and Good Habits
Writing code is a lot like writing prose. Every person does it a little differently, and because of that, we all have a distinct voice when our code is read. We have different naming conventions and different problem-solving logic. We all think our code makes sense — especially if it works — but someone else might not. To combat this, we all need to get better at source code commenting. That way, whoever comes next to the project will have a clear path to understanding and improving/fixing our code.
How to Comment Code – The Basics
To begin with, let’s make sure that we’re all on the same page regarding what comments are. In this article, we’ll be discussing in-line comments within the scripts themselves. Stuff like this in a CSS file, for instance, where the readable code is broken up by comments that are ignored by the processors.


/** Body Element Styling **/

body {color:red;}

h1 {size:17px;}


/** Sidebar Widget Styling**/

#email-signup-1 {text-transform:uppercase;}

Each programming language has a different way of commenting in the source code. PHP and HTML and JavaScript and C# all have slightly different symbols that begin and end code. While there are some language-specific practices, too, there are more shared than not.
We’ll discuss some of the different kinds of comments that you will run across, their uses,...
How to Add a Scroll Down Hover Effect to Preview Web Page Designs in Divi
Whether it’s in a portfolio page or an image gallery, web designers need to showcase their designs for clients as a crucial part of driving business. And, many times, these examples of their work include images of entire web page designs which can take up a lot of space. That’s why adding a scroll down hover effect to these images can set your portfolio apart. This allows the user to see a compact portion of the design initially. But when the user hovers over the image, the image scrolls to slowly reveal the rest of the design as if they are scrolling down a web page. You can see this type of effect being used on our very own Divi Layout Packs page.
In this tutorial, I’m going to show you how to use Divi to add a scroll down hover effect to images that will allow users to preview web page designs. This is an elegant interactive element that I think you are going to love.
Sneak Peek
Here is a preview of the scroll down hover effect we will build together in this tutorial.

Download the Scroll Down Hover Effect Layout for FREE
To lay your hands on these example scroll down hover effect designs, 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...
How Having a Cool Bio for Twitter Can Help You Land More Clients
Being cool on Twitter is a lot of work, but it’s a great alternative if you’re not conventionally handsome enough to make in on Instagram. On top of growing your list of followers, having a noticeable presence on Twitter can help put your name out there and catch the eye of people who might want to hire you.
In this article, we’re going to talk about what makes a Twitter bio ‘cool’, and how it can help you get more business. Then we’ll share five tips to spruce up your Twitter bio.
Let’s get to it!
How Having a Cool Twitter Bio Can Help You Land More Clients
If you’re a freelancer, you probably spend a lot of time looking through job boards, networking with potential clients, and on remote work websites. Using social media to land more clients may not have even occurred to you, especially when it comes to Twitter.
However, all social media boils down to getting noticed. That attention can come from your friends, people you don’t know, and even potential clients. Building up your presence on Twitter can actually be a boon for your business. Let’s break down why:

These days, most employers will likely look you up on social media before hiring you.
You can show who you are in a more laid-back environment.
Having a fleshed-out Twitter profile helps potential clients put a face to your name and build familiarity with your brand.

When it comes to Twitter, there are three ways you...
WordPress.com’s Parent Company Announces Happy Tools, a New Suite of Products for the Future of Work
Distributed teams, different geographies, and complex dynamics are redefining the modern workday. Soon, “job perks” like flexible hours and work-from-anywhere will become table-stakes benefits that every company needs to offer to stay competitive.



WordPress.com’s parent company Automattic has long been ahead of this curve, growing a global software company of more than 850 people across 68 countries with no central office. Along the way, we’ve found that many business products are still locked into old assumptions about how a company runs, so we had to build our own internal tools to work the way we want. Now, we’re making these tools available to like-minded companies who need a better way to work.







Today Automattic is announcing Happy Tools, a suite of products for the future of work. Each product in Happy Tools has been used internally at Automattic to grow our company.









The suite is launching with Happy Schedule, a new take on workforce management. Designed to handle the complexities that come up when business goals are planned around real-world schedules, it helps you treat your employees like humans instead of resources. Using Happy Schedule, Automattic is able to plan 24/7 customer support while offering flexible working hours to our 300+ Happiness Engineers spanning many timezones.



Happy Schedule helps you meet coverage goals across a...
Get a FREE Paralegal Layout Pack for Divi
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.
This time around, Kenny and his team have created a stunning Paralegal Layout Pack with a clean and minimal design style that you will absolutely love.


Check Out The Divi Paralegal
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
Services Page Design

View The Live Layout Demo
Service Page Design

View The Live Layout Demo
Key Features
The Paralegal Layout Pack is a perfect match for any kind of clean and minimal website you set up. The layout pack consists of a neutral color palette and some amazing layout structures. Once you notice the attention to detail that has been paid to this layout pack, you’ll definitely want to use it for an upcoming project.
Live Demos
Click the links below to see a live demo for each of the layouts included in the pack.

Paralegal Landing Page (live demo)
Paralegal Homepage (live demo)
Paralegal About Page (live demo)
Paralegal Blog Page (live demo)
Paralegal Contact Page (live demo)
Paralegal Services Page (live demo)
Paralegal...
What Is Headless WordPress (And Do You Need It)?
You may have heard whispers already about the new ‘headless CMS’ trend. However, unless you’re a developer yourself, it can be confusing to untangle exactly what this term means, and decide whether or not it’s right for your website.
In this post, we’re going to introduce the concept of a headless CMS, and discuss how it’s relevant to WordPress users. We’ll also offer some guidance for how to decide whether it’s right for you.
Let’s get started!
What Is a Headless CMS?
Before we dive into headless WordPress, let’s explore what a headless CMS is in general. First, it’s important to clarify the term ‘CMS’ itself. A Content Management System (CMS) is a complete solution for creating and managing online content (such as WordPress). It can be contrasted with simpler platforms such as website builders, which are easier to use but offer far less flexibility.
So, what about the ‘headless’ part of the term? All websites consist of a front end, which is how the site appears to users, and a back end. The latter controls how the website’s data is managed and stored, and is where you’ll make customizations, add content, tweak elements via coding, and so on.
However, headless architecture cuts off the front end, or ‘head’, of the platform. By separating the front end from the back end, you can manage both separately. This enables you to smoothly move content from one platform to another....
How to Create an Animated Mobile Split-Content Hero Section with Divi
Creating a hero section that stands out is really important. And not only should it stand out, but it should also be split up into multiple elements that empower the call to action that is there. The easy-to-understand structure split-content hero sections have makes them really popular and frequently used among different kinds of websites.
And while making split-content hero sections for desktop is straightforward, making them for smaller screen sizes may not be. That’s where this tutorial will come in handy. We’re going to recreate a highly-interactive mobile-split hero section that will not only look good on mobile but across all different screen sizes. We’re also combining some great animations to make the design style match 2019 perfectly. We hope this tutorial inspires you to create your own mobile split-content hero sections.
Let’s get to it!
Preview
Before we dive into the tutorial, let’s take a look at the outcome across different screen sizes.
Mobile

Desktop

Let’s Start Recreating!
Add New Section
Spacing
Start by creating a new page or opening an existing one. Add a new regular section to it, go to the spacing settings and remove all the default top and bottom padding.

Top Padding: 0px
Bottom Padding: 0px


Add New Row
Column Structure
Continue by adding a new row using the following column structure:

Background Color
Without...
Embracing the Motto “You Do You” to Grow Your Business
A lot of people fall into the trap of trying to ‘blend’ into the world of business. On the other hand, “You do you” is a powerful motto that encourages you to focus on the unique skills you bring to the table. This helps you carve out a niche for yourself, and is a way to make your work much more enjoyable.
In this article, we’re going to talk more about the “you do you” approach, and how it can benefit you in business. Then we’ll talk about how to apply this motto in the workplace.
Let’s get to it!
Why “You Do You” Is a Powerful Business Approach
When we talk about the motto “You do you” in business, we mean focusing on your unique strengths. For some, trying to fit into a role that doesn’t suit your skills or interests may seem like the only way to get ahead. Others may feel that they have to have a hand in every aspect of their companies.
In reality, it’s much easier to be successful if you can acknowledge and play to your strengths, then let others take on the tasks you’re less skilled at. Whatever your own unique selling point is, embracing it can bring you amazing benefits in the business world.
To start with, “doing you” can help you stand out from the crowd. This is key when marketing your services to potential clients or employers. Whether you have a unique approach to a traditional service or you bring a likable personality to the office, the thing that makes you...
Divi Design Showcase: New Submissions from March 2019
It’s time again for our monthly Divi Showcase where we take a look at 10 awesome Divi websites made by our community members. Each month we showcase the best Divi websites that were submitted from our community and today we want to share with you the top ten websites for the month of March. Throughout the post, I’ll point out some of my favorite design features that draw me to each of the websites.
I hope you like them!
Divi Design Showcase: New Submissions from March 2019
1. Walk on Kunanyi

This site was submitted by Sarah Crawford. It shows styled text and graphics with a tagline in an overlay over a full-screen background of the location. The styled text and graphics appear throughout the site, including in a link that appears in the bottom left corner on scroll. Photos of the location are shown in two columns with titles, descriptions, and buttons to see more information. The buttons are styled to match the CTA in the menu. It also includes an embedded calendar to show upcoming events. More information about the location is shown in two-column alternating sections with images, text, and buttons.
Visit Website
2. Lemonade

This site was submitted by Teck Seng Chan. This site uses material design graphics for the hero section and CTA’s in branded colors of blue, green, and orange. The text, buttons, and CTA’s match the branded colors throughout the site. I...
How Sitting in Discomfort Can Push You to Do Your Best Work
Sitting in discomfort is the greatest motivator to push forward. Feeling uneasy helps you grow professionally and it’s the catalyst to take your business further.

Losing sleep over money can force you to raise your rates or nix clients who waste your time.
Having to face the music every time you miss a deadline can push you to wake up earlier to get ahead, no matter how much you hate your alarm clock.
Constantly being worried about what a client, co-worker or manager thinks or how they treat you can drive you to assert yourself and make your boundaries clear.

What upsets us and drains our energy – anger, anxiety, worry – also spurs action. “I don’t want to live like this anymore” is a powerful declaration.
The Fear of Discomfort
Think about the problems in your life. Are you anxious or stressed on a regular basis because you’re miserable at work? Do you feel sick from unhealthy foods or hate what you see in the mirror? At the end of the week, is your energy depleted because you’ve spent too much time making other people happy?
In all of these situations, you’re avoiding discomfort. Having a discussion with your boss, changing careers or raising your rates means upheaval will follow. Adapting your shopping list to only include healthy foods, then learning to prepare those foods and training yourself to like them feels like a job. Saying “no” to people you love makes you feel...
How to Style and Position Images in Abstract Places in Divi
Images are a key aspect of web design. And modern web design seems to call for new and abstract ways to display images on your website. Divi’s transform options make it easy to style and position images on your page just about anywhere you want. This opens the door for creating unique layouts that will take your website to the next level.
In this tutorial, I’ll be showing you a couple of ways you can style and position images in abstract places on your website. This will allow you to create countless design variations for images that you may have thought only possible in a photo editor like Photoshop or Sketch.
Let’s get started!
Sneak Peek
Here is a sneak peek of the designs we will build in this tutorial.


Download the Design Examples from This Tutorial for FREE
To lay your hands on these example designs, 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.


Download the Files



.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !...

Total Twitter Followers
Tweets Impressions Monthly
Facebook Followers
Pinterest Followers

32,6K
143,6K
1,392
2,073

YouTube Subscribers
Total YouTube Views
Instagram Followers
LinkedIn Followers

193
383,3K
22
84

Alexa Global Rank
Alexa Rank in US
Keywords Analyzed
Updated

554,8K
174,9K
21,345
20 Apr 2019