Introducing The New Draggable Sizing And Spacing Controls For Divi

The Incredibly Easy New WayTo Adjusting Sizing & Spacing In Divi
The new draggable sizing controls take full advantage of Divi’s visual builder technology to give you a new and super intuitive way to design your pages.


Today we are introducing Draggable Sizing for Divi. This new UI innovation allows you to quickly adjust the width, height, margin and padding of any module, row or section with ease. Instead of having to open a settings panel and type in sizing values manually, you can instead drag to adjust the elements right on the page and see the results instantly. It’s quick, it’s easy and it really leverages Divi’s Visual Builder technology to provide to best building experience possible.


Visual Control Over Every Element’sWidth, Height And Spacing
Now it’s easier than ever to control the size and position of every module, row and section on your page thanks to the brand new draggable width, height, margin and padding interface.

Draggable Widths & Heights

Adjusting sizing in Divi is now simple with the addition of just a few subtle UI improvements that add small draggable anchors to all elements that are easy to use while at the same time don’t get in your way while you build. To adjust the width or height of any module, row or section, simply hover over the edge of any of the four sides of the element, and drag in either direction...
How to Create Overlapping Animations on Delay with Divi
A big part of your website’s success depends on whether or not you’re able to impress your visitors. Not only with your products or services, but also with the way you communicate and how well-designed your website is. Because let’s face it, websites are often first impressions. And similar to any other kind of first impression, you want it to leave a good aftertaste.
Now, if you’re looking for a unique way to put some of your content in the spotlight, creating subtle overlapping animations might be just what you are looking for. These subtle overlapping animations are kind of like a slideshow for your visitors. They don’t have to scroll or click on anything, the content just shows up in an elegant way.
Let’s get to it!
Preview
Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.
Desktop

Mobile

Approach

We’ll start off by adding all the design elements we need in a vertical order, without the overlap
As we’re adding all the design elements, we’ll also add custom animations with a certain animation delay
These animation delays will only make sense once you’ve gone through the last part of the tutorial which focuses on overlaps
An important part of this tutorial is using shaped Divider Modules with the same background color as the section to make row content...
How to Write the Best About Me Page Possible
“If we’re gonna be friends, you should know that I re-heat my coffee as many times as it takes to burn my tongue, I only watch horror movies through my fingers and I seriously dislike elephants, although I wish them all the best.”
That’s the most-commented-on line from my About Me page. It’s the very last sentence and the sixth paragraph of 275 words, which means that people read all the way down to it, including one scroll. They then feel compelled to email me to ask about it. (“You reheat your coffee? Like, in the microwave? And what’s with the elephant thing??? Who doesn’t love elephants!”) In a world where it’s hard to keep anyone’s attention for more than a second, I say that’s a success.
As far as About Me examples go, though, I make a lot of mistakes on my page. I focus too little on the business of my business, I haven’t added any testimonials and I don’t have a CTA at the end. While it’s engaging enough for strangers to contact me, it’s unfinished. I know how many people I’ve caught with it, but I’ll never know how many people I lost because it’s missing some must-have points.
Don’t be me. Be you, the person with the high-performing, perfectly-executed About page. Here’s how.
Do I need an About page?
Yes. Next question?
The About page is essential to any and every website, whether you’re an individual...
Boost Visitor Engagement and Grow Your Mailing List with the Mailchimp Block
Keeping your visitors interested is the key to a successful website—and one great way to do that is with email. A smart email outreach plan piques peoples’ interest, keeps them engaged, and brings them back to your website.



To send emails, you need a mailing list, and Mailchimp is the list-building tool of choice for lots of folks. With WordPress.com’s new Mailchimp block, you can add a signup form to any post or page. Give visitors the opportunity to join your list wherever they are on your website.







Using the Mailchimp block



If your website is on WordPress.com or uses Jetpack (version 7.1 or higher), the Mailchimp block is already waiting for you in the block editor. Open a post or page, add a new block, and either search for “Mailchimp” or select it from the list of available blocks.















Once you’ve inserted the block into your content, you can customize the following aspects of your form:



Placeholder text in the field for email address. Once your visitor starts filling out the form, this placeholder text will disappear.Text on the submit button.Terms of service disclaimer at the bottom. These terms and conditions are the contract between you and the subscriber. Success message text that will appear after visitors submit their email.Error message text if there was a problem in submitting the form.



First-time setup



The first time...
How to Create Floating Corner Designs for Content in Divi
Creating floating corner designs is a simple and easy way to add a little creative style to Divi Modules that you may not have thought was possible without custom code. Good news! With Divi, you can use dividers and blurbs to style the four corners of your module using Divi’s built-in options. And, it can be pretty fun to try out the different possibilities.
In this tutorial, I’m going to show you how to create floating corner designs for your content in Divi. Once you have the elements in place, you can style those corners with countless shapes, icons, and colors!
Let’s get started!
Sneak Peek
Here is a sneak peek of the floating corner designs possible from this tutorial.

Download the Floating Border Design Examples Layout for FREE
To lay your hands on the floating border designs layout, 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 File



.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !important; } .et_bloom ....
GitHub vs Bitbucket: Which is Right for Your Development Team?
Choosing the right source control platform for your team is one of the most important decisions you’re going to make. There’s a good chance that you’ll choose Git for the version control software (VCS) itself, but the platform where the code lives is equally important. Many times, it comes down to Bitbucket vs GitHub. Over the years the two have grown strong communities and userbases. In this post we want to take a look at both platforms to see which would better serve your development team’s needs.
GitHub vs Bitbucket: The Basics
If you are a newcomer to Git, GitHub, and Bitbucket entirely, you may want to have a look at our beginner’s guide to Git. It will walk you through the fundamentals and get you prepped for understanding just what is going on in this article.
If you boil it down to the most basic and fundamental difference between GitHub and Bitbucket, it is this: GitHub is focused around public code, and Bitbucket is for private. Basically, GitHub has a huge open-source community, and Bitbucket tends to have mostly enterprise and business users.
That’s not to say that you can’t have a private repository on GitHub (you can). Or that you can’t post your code publically on Bitbucket (again, you can). However, the majority of the users aren’t doing so. Plus, the defaults are set that way, too: public and private...
Using Divider Modules to Create Background Shapes with Divi’s Transform Options
Every week, we provide you with new and free Divi layout packs which you can use for your next project. For one of the layout packs, we also share a use case that’ll help you take your website to the next level.
This week, as part of our ongoing Divi design initiative, we’re going to show you how to use Divider Modules to create background shapes with Divi’s transform options and the Paralegal Layout Pack. Divider Modules are very versatile and can really uplift the overall design of your pages. Although we’ll be recreating some examples that match the Paralegal Layout Pack specifically, you can use this technique for any kind of website you build with Divi.
Let’s get to it!
Preview
Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.
Desktop

Mobile

Create New Page Using Paralegal Layout Pack’s Landing Page
Create a new page and upload the Paralegal Layout Pack‘s landing page to it.

Recreate Example #1
Section Overflow
Let’s start creating the first example! Go ahead and open the hero section settings and go to the design tab. Here, we want to make sure that nothing surpasses the section container. To do that, we’ll add one single line of CSS code to the main element.
overflow: hidden;

Add Divider Module to Column 2
Visibility
Then, go ahead and add a Divider Module to the...
How to Write a Testimonial
If you’re anything like us, you probably buy a lot of stuff online and subscribe to multiple services. Sometimes, you’re so pleased with your product or service that you want to leave a gushing review or testimonial on the company’s website. The problem is, a poorly put-together testimonial can do more harm than good.
In this article, we’ll talk about what makes for a great testimonial. Then we’ll show you some examples you can use as inspiration, and point out what makes them work.
Let’s get to it!
What Makes for a Great Testimonial?
You’ve probably never stopped to think about what makes for an effective testimonial. Considering how many products and services we buy online nowadays, it’s useful to be aware of when and how to write testimonials.
You may want to write a testimonial for a few reasons. For starters, they’re an easy way to support and drive sales for products you like. They’re also an opportunity to lend your experienced and trustworthy opinion to help others decide whether or not to use a service.
Leaving testimonials and reviews is a quick way to make a positive change online and contribute a bit of social proof. Plus, if you run your own website, it’s important to know which testimonials you should showcase and which ones might not make for great advertising.
The decision isn’t about...
Get a FREE eSports 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 a brand new, free Divi Layout Pack from our design team to you.
For this week, Kenny and his team have created a stunning eSports Layout Pack. This layout pack is a design masterpiece crafted with all the essentials needed for an eSports site. It has everything you need to promote eSports leagues and tournaments in style. And the pages include featured sections to display teams, schedules, and CTA’s for online registration. It even has a special login page for members and much more. Check it out!


Check Out The Divi eSports 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
Login Page Design

View The Live Layout Demo
Teams Page Design

View The Live Layout Demo
Team Page Design

View The Live Layout Demo
FAQ Page Design

View The Live Layout Demo
Schedule Page Design

View The Live Layout Demo
Key Features
The technical design of this layout fits perfectly into the video gaming niche. The mixture of dark and bright colors work well with the abstract shape backgrounds to give it a nice futuristic feel which makes featured content jump off the page. The unique design of...
Flywheel Managed WordPress Hosting: An Overview and Review
We’re spoiled for choice when it comes to WordPress hosting providers. The Content Management System (CMS) is so popular that there’s an entire sub-industry built around its hosting needs. Some of those hosts cater themselves to a more tech-savvy crowd, and Flywheel fits into that category.
Flywheel offers a lot of features geared towards WordPress developers and designers that make it a very unique web host. In this article, we’ll introduce you to the platform, discuss its key features and pricing, and help you determine if it’s a good fit for you.
Let’s get to it!
An Introduction to Flywheel Managed WordPress Hosting
When it comes to hosting providers, you usually have two flavors: those that market themselves to site owners and the ones for the people who make websites. Flywheel is a managed WordPress host that caters itself to that second crowd. If you take a look at their website, you’ll notice almost their entire pitch is built around how their services can make your work easier.

In short, we like the platform a lot, but it’s definitely not for everyone (nor is any web host, for that matter). With that in mind, we’re going to break down what separates Flywheel from other managed WordPress hosts, to help you decide if it’s for you.
Key Features of Flywheel Hosting:

Custom WordPress blueprints
An in-house local...
Creating a Diagonal Design Structure with Divi’s Transform Options (Free Download!)
We’re always looking for ways to expand the design possibilities you have with Divi. And since the transform options update came out, a lot of new techniques have become possible, without the need for custom coding knowledge.
In this post, we’re going to show you how to create a stunning diagonal design structure. The design we’ll recreate works great for hero section and matches any kind of website you want to set up. At the end of the tutorial, you’ll also be able to download the JSON file for free!
Let’s get to it!
Preview
Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.

Let’s Start Recreating!
Add New Section
Gradient Background
Start by creating a new page or opening an existing one and add a regular section to it. Open the section settings and add a gradient background to it using the following settings:

Color 1: #ffd633
Color 2: #efefef
Gradient Direction: 217deg
Start Position: 45%
End Position: 45%


Spacing
Then, go to the design tab and add some custom top and bottom padding.

Top Padding: 4vw
Bottom Padding: 12vw


Overflow
We need to make sure that the transform options don’t surpass the section container. To accomplish that, we’ll add a single line of CSS code to the main element of the section.
overflow: hidden;

Add Row #1
Column Structure
Continue by...
Three New WordPress.com Color Schemes
Your website’s dashboard should be as welcoming to you as your website’s home page is to your visitors. One way to do that? Customize your WordPress.com dashboard with color schemes.



Today, you’ve got three new options for adding a little behind-the-scenes zing: introducing Powder Snow, Nightfall, and Sakura, designed especially for you by our Art Director, Eriko Kawakami.



Whether you prefer the gentle monotone of Powder Snow, the darker and soothing colors of Nightfall, or the vibrant, cherry-blossom-inspired Sakura, we hope you’ll find a look you love.







As part of our commitment to inclusive design, the new palettes are optimized for contrast and increased legibility. Whichever color scheme you choose, your dashboard will be stylish and readable.



Here’s how to customize your color scheme:



On your desktop, sign in to the WordPress.com account that you’d like to customize.Click your account avatar in the upper right corner.Select Account SettingsSelect one of the options under Dashboard Color Scheme Click Save Account Settings to apply the change



My dashboard, using the Nightfall color scheme.



More color schemes are coming, and we want your feedback! What colors do you want to see in your WordPress.com dashboard?

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