Growing floating nook designs is an easy and simple approach so as to add a bit ingenious taste to Divi Modules which you could now not have idea was once imaginable with out customized code. Just right information! With Divi, you’ll be able to use dividers and blurbs to taste the 4 corners of your module the use of Divi’s integrated choices. And, it may be lovely amusing to check out out the other chances.

On this educational, I’m going to turn you how you can create floating nook designs on your content material in Divi. Upon getting the weather in position, you’ll be able to taste the ones corners with numerous shapes, icons, and hues!

Let’s get began!

Sneak Peek

Here’s a sneak peek of the floating nook designs imaginable from this educational.

floating corner designs

Obtain the Floating Border Design Examples Structure for FREE

To put your arms at the floating border designs format, you are going to first want to obtain it the use of the button beneath. To realize get right of entry to to the obtain it is important to subscribe to our Divi Day by day electronic mail record via the use of the shape beneath. As a brand new subscriber, you are going to obtain much more Divi goodness and a unfastened Divi Structure pack each Monday! In the event you’re already at the record, merely input your electronic mail cope with beneath and click on obtain. You are going to now not be “resubscribed” or obtain additional emails.

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !vital; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:earlier than { border-top-color: #ffffff !vital; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:earlier than, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:earlier than { border-top-color: clear !vital; border-left-color: #ffffff !vital; }
@media best display screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:earlier than, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:earlier than { border-top-color: #ffffff !vital; border-left-color: clear !vital; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { coloration: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:earlier than { background: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !vital } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 sturdy { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p sturdy, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape enter, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !vital;}

Download For Free

Obtain For Loose

Sign up for the Divi Newlsetter and we will be able to electronic mail you a duplicate of without equal Divi Touchdown Web page Structure Pack, plus heaps of different wonderful and unfastened Divi sources, guidelines and tips. Observe alongside and you are going to be a Divi grasp very quickly. In case you are already subscribed merely sort to your electronic mail cope with beneath and click on obtain to get right of entry to the format pack.

You will have effectively subscribed. Please test your electronic mail cope with to substantiate your subscription and get get right of entry to to unfastened weekly Divi format packs!

To import the format on your web page, merely extract the zip report and drag the json report into the Divi Builder.

Now let’s get to the educational we could?

Getting Began

The one factor you want for this educational is Divi. We can be development those examples from scratch at the entrance finish of the Divi Builder.

To get began, create a brand new web page and provides your web page a identify. Click on to make use of the Divi Builder at the front-end and select the choice “Construct from Scratch”.

Now you’re ready to head!

Growing the Floating Nook Design Structure Template

Since there are going to be numerous design chances with this design, it is sensible to create the fundamental format (or template) to paintings from.

For this template, we’re going to upload 4 dividers to each and every nook of a textual content module. Then as soon as the format is in position, it is possible for you to to discover new tactics to customise the ones dividers for distinctive designs.

First, create a brand new common phase with a one column row.

floating corner designs

Sooner than we upload the textual content module, replace the row settings as follows:

Customized Width: 640px
Customized Padding: 0px height, 0px backside

floating corner designs

Then upload a textual content module to the row and replace the next:

Textual content Textual content Measurement: 20px
Textual content Line Peak: 1.8em
Customized Margin: -25px height, -25px backside, 25px left, 25px proper
Customized Padding (desktop): 10% height, 10% backside, 10% left, 10% proper
Customized Padding (telephone): 20% height, 20% backside
Border Width: 4px
Border Colour: #eeeeee

floating corner designs

The customized margin and padding goes to lend a hand align our divider modules we will be able to be including in a while. Because the dividers can have a peak and width of 50px, the -25px height and backside margin will pull the ones dividers midway into the textual content module for a pleasing symmetrical design (you’ll see).

Including the highest two Floating Nook Dividers

With the textual content module in position, we will get started including the highest two floating nook designs the use of divider modules.

Create a brand new divider module and drag it to the highest of the textual content module.

floating corner designs

Then and replace the divider settings as follows:

Display Divider: NO

floating corner designs

Background Colour: #7cda24 (or no matter coloration you need)
Peak: 50px
Width: 50px

floating corner designs

The 50px peak and width offers us the easiest sq. we will use for our floating border.

Now, upload a field shadow to the divider to create the floating impact as follows:

Field Shadow: see screenshot
Field Shadow Vertical Place: 0px
Field Shadow Blur Power: 0px
Field Shadow Unfold Power: 20px
Shadow Colour: #ffffff

floating corner designs

To ensure the divider module remains above the textual content module (and doesn’t get hidden in the back of it), we want to upload a snippet of CSS to the principle component as follows:

Major Component CSS:

place: relative

Then replace the Z Index to one.

floating corner designs

Subsequent reproduction the divider module and replace the duplicated divider settings as follows:

Module Alignment: proper
Customized Margin: -50px height

floating corner designs

This aligns the divider to the suitable and pulls it up the precise peak of the divider module sitting above it. This creates the precise nook placement we’re searching for.

Including the ground Nook Dividers

So as to add the 2 backside nook dividers, deploy the wireframe view mode and replica the left and proper dividers you simply created and paste them beneath the textual content module (ensuring the left divider remains remains stacked on height of the suitable divider as proven within the symbol beneath).

floating corner designs

That’s it! Let’s take a look at the overall design of our elementary format.

floating corner designs

Exploring New Floating Nook Designs

With this template in position, we will discover some other designs which might be imaginable. You’ll be able to save this complete phase to the Divi library so to stay it as a template going ahead. However for now, let’s simply reproduction the phase and discover a brand new design.

Diamond Shapes with gradient backgrounds

With a replica of our template in position, use the multiselect characteristic to make a choice all 4 of the divider modules. Then click on the settings equipment icon on probably the most decided on dividers to deploy the component settings modal. It will lend a hand to make use of click on mode for this step.

floating corner designs

Within the component settings, replace the next:

Gradient Background Left Colour: #7cda24
Gradient Background Proper Colour: #edf000
Gradient Path: 45deg

floating corner designs

Then use the become choices to rotate the divider right into a diamond form.

Turn out to be Rotate Z-axis: 45deg

floating corner designs

Here’s the overall design.

floating corner designs

Skewed Dividers

You’ll be able to additionally use the become skew solution to skew the dividers for an much more distinctive design. You’ll be able to both upload a separate skew design for each and every divider, or use multiselect to replace the become skew for all 4 on the similar time via -37deg at the X and Y axis.

floating corner designs

Here’s what that might appear to be.

floating corner designs

Darkish Background Designs

You’ll be able to even experiment with including a depressing background coloration to the textual content module for a novel floating nook design. Here’s an instance of the textual content module with a background coloration of #002130 the use of the with out an become rotate or skew.

floating corner designs

Rounded Edge Corners

To position some rounded corners at the design, you’ll be able to merely upload rounded corners to the row as follows:

Rounded Corners: 20px

floating corner designs

Circle Floating Corners

To show the ones sq. corners into circles, you’ll be able to upload the next snippet of customized CSS to each and every divider’s primary component:

border-radius: 50%;

floating corner designs

Because the dividers are 50px via 50px, this may occasionally create an ideal circle design.

floating corner designs

As you’ll be able to see there are a ton of various tactics you’ll be able to tweak those components for numerous new nook designs.

Now, let’s discover the use of blurb icons for floating corners as a substitute of divider modules.

Growing Floating Corners with Blurb Icons

Including Blurb icons to each and every nook of the textual content module can provide you with much more distinctive designs. You’ll be able to use the similar format template we constructed firstly of the educational. The one distinction can be the use of blurb modules as a substitute of divider modules for the 4 corners.

Move forward and get a replica of phase format template deployed.

floating corner designs

Then delete the divider modules above and beneath the textual content module.

Including the highest two blurb icon corners

Since we’re best going to need to use the blurb module to show a unmarried icon, we want to be sure that and get the dimensions and spacing right kind.

Upload a blurb module above the textual content module and take out the identify and frame textual content. Then click on to make use of an icon as a substitute of a picture and make a choice the circle fb icon.

floating corner designs

Then replace the next blurb settings (those settings are similar to the settings we added to the divider module within the first instance):

Background Colour: #ffffff
Icon Font Measurement: 50px
Width: 50px
Customized Margin: 0px backside
Rounded Corners: 50%
Field Shadow: see screenshot
Field Shadow Vertical Place: 0px
Field Shadow Blur Power: 0px
Field Shadow Unfold Power: 20px
Shadow Colour: #ffffff

Major Component CSS:

place: relative;

Blurb Symbol CSS:

margin-bottom: 0px

Z Index: 1

floating corner designs

Subsequent, reproduction the blurb module to create any other one slightly below the present blurb and replace the next:

Module alignment: proper
Customized Margin: -50px height

floating corner designs

Then replica the highest two blurb modules and paste them underneath the textual content module (ensuring the left blurb remains stacked above the suitable blurb).

Then you’ll be able to replace the icons for each and every blurb to no matter you need.

Here’s the overall design.

floating corner designs

Discover Extra Designs with Blurb Icon Floating Corners

With this setup you’ll be able to discover many distinctive designs. You’ll be able to trade up the icons, use other coloration mixtures, or even scale or rotate them with become choices.

Here’s an instance of the design the use of a depressing background coloration for the textual content module and other icon colours.

floating corner designs

Works in More than one Column Layouts

So long as you stay the weather in combination, you’ll be able to upload those floating nook layouts in a couple of columns.

floating corner designs

Wrapping Up

Growing floating nook designs on your content material in Divi truly does show off the facility of Divi builder. With all the integrated choices to be had, you’ll be able to create numerous design permutations from one elementary format template. I’m hoping this may occasionally encourage you to have some amusing exploring new designs of your individual.

I sit up for listening to from you within the feedback.


The publish How to Create Floating Corner Designs for Content in Divi gave the impression first on Elegant Themes Blog.

WordPress Web Design

[ continue ]