Find out how to Create Gorgeous Cellular Social Apply Bios with Divi (Unfastened Obtain!)

Whilst you’re growing your individual site, it is helping to have a social apply bio web page that you’ll be able to simply hyperlink to. It makes a really perfect on-line discuss with card with a abstract of what you do and the place other people can see your paintings. The guidelines this is shared inside of cell social apply bios is typically restricted for your symbol, identify, process identify, a small description and portfolio hyperlinks. You’ll additionally upload an extra CTA to lend a hand guests get in contact with you.

On this publish, we’ll display you easy methods to create two stunning cell social apply bios the use of Divi. On the finish of the academic, we’ll additionally percentage the JSON information of each examples so you’ll be able to get began in an instant.

Let’s get to it!

Preview

Prior to we dive into the academic, let’s take a handy guide a rough take a look at the 2 examples we’ll recreate from scratch.

Instance 1

Instance 2

Get started Recreating Instance #1

Upload New Phase

Background Colour

Let’s get began with the primary instance! Create a brand new web page or open an current one and upload a standard segment to it. Open the segment settings and upload a white background colour.

Background Colour: #ffffff

Spacing

Then, move to the spacing settings of the segment and make some adjustments. You’ll realize that the values range in step with the display screen measurement. We’re retaining the similar roughly slender design throughout other display screen sizes through editing the left and proper padding as we move.

Most sensible Padding: 50px (Desktop & Pill), 0px (Telephone)
Backside Padding: 50px (Desktop & Pill), 0px (Telephone)
Left Padding: 36vw (Desktop), 23vw (Pill), 0vw (Telephone)
Proper Padding: 36vw (Desktop), 23vw (Pill), 0vw (Telephone)

Upload Row #1

Column Construction

Proceed through including a brand new row to the segment the use of the next column construction:

Background Colour

With out including any modules but, open the row settings and upload a background colour.

Background Colour: #333333

Sizing

Then, move to the sizing settings within the design tab and take away all of the customized house between the column and the row.

Make This Row Fullwidth: Sure
Use Customized Gutter Width: Sure
Gutter Width: 1

Field Shadow

We’re additionally including a field shadow to create some intensity on greater display screen sizes.

Field Shadow Blur Energy: 80px
Shadow Colour: rgba(0,0,0,0.3)

Upload Symbol Module

Add Symbol

Time to begin including modules! Get started with an Symbol Module that has a 1:1 ratio. The picture we’re the use of, for example, has a width and top of ‘500px’.

Alignment

Whenever you’ve uploaded the picture, move to the design tab and alter the picture alignment.

Symbol Alignment: Middle

Sizing

We’re shrinking the scale of the picture through editing the width within the sizing settings subsequent.

Width: 33%
Module Alignment: Middle

Border

We’re additionally turning the picture right into a circle through including ’50vw’ to every one of the crucial corners within the border settings. On peak of that, we’ll upload a white border the use of the next settings:

Border Width: 8px
Border Colour: #ffffff

Field Shadow

Final however now not least, upload a field shadow to create a dimensional design.

Field Shadow Vertical Place: 40px
Field Shadow Blur Energy: 100px
Shadow Colour: #000000

Upload Textual content Module #1

Upload H3 Content material

Directly to the following module! Upload a Textual content Module proper under the Symbol Module with some H3 content material.

H3 Textual content Settings

Proceed through going to the design tab and converting the H3 textual content settings.

Heading 3 Font: Open Sans
Heading 3 Font Weight: Semi Daring
Heading 3 Textual content Alignment: Middle
Heading 3 Textual content Colour: #ffffff
Heading 3 Line Top: 0.1em

Spacing

We’re additionally including some peak margin to make space between the Symbol Module and this Textual content Module.

Most sensible Margin: 30px

Upload Textual content Module #2

Upload Content material

The following module we’d like is every other Textual content Module. Upload your process identify to the content material field.

Textual content Settings

Then, move to the design tab and alter the textual content settings.

Textual content Font: Open Sans
Textual content Font Weight: Common
Textual content Colour: #919191
Textual content Orientation: Middle

Upload Textual content Module #3

Upload Content material

Proceed through including every other Textual content Module with a brief description of your self.

Textual content Settings

Move to the textual content settings and make some adjustments.

Textual content Font: Open Sans
Textual content Colour: #b7b7b7
Textual content Line Top: 1.6em
Textual content Orientation: Middle

Sizing

Adjust the width of the module as neatly.

Width: 68%
Module Alignment: Middle

Spacing

And upload some peak and backside margin to create further house.

Most sensible Margin: 30px
Backside Margin: 30px

Upload Button Module

Upload Replica

The following and closing module we’d like on this row is a Button Module. Upload some replica.

Alignment

Then, move to the design tab and alter the button alignment to make it fit with the former modules.

Button Alignment: Middle

Button Settings

Proceed through converting the semblance of the button within the button settings.

Use Customized Types for Button: Sure
Button Textual content Measurement: 13px
Button Textual content Colour: #ffffff
Colour 1: #ad32ff
Colour 2: #32baff
Gradient Path: 96deg
Button Border Width: 0px
Button Border Radius: 30px
Button Font: Open Sans
Font Weight: Extremely Daring
Font Taste: Uppercase

Spacing

Upload some customized margin and padding subsequent.

Backside Margin: 50px
Most sensible Padding: 15px
Backside Padding: 15px
Left Padding: 50px
Proper Padding: 50px

Field Shadow

And whole the button design through including a field shadow.

Field Shadow Vertical Place: 20px
Field Shadow Blur Energy: 80px
Shadow Colour: rgba(0,0,0,0.69)

Upload Row #2

Column Construction

Directly to the following row! Use the next column construction:

Gradient Background

With out including any modules but, open the row settings and upload a gradient background:

Colour 1: #1e1e1e
Colour 2: #3f3f3f
Gradient Sort: Radial
Radial Path: Most sensible Left
Get started Place: 26%
Position Gradient Above Background Symbol: Sure

Background Symbol

Save the next symbol for your pc and use it as a background symbol for the row:

Together with the next background settings:

Background Symbol Measurement: Exact Measurement
Background Symbol Place: Middle
Background Symbol Repeat: No Repeat
Background Symbol Mix: Arduous Mild

Sizing

Then, move to the design tab and take away all of the house between columns and the row. This may occasionally lend a hand us take complete good thing about the row house we get.

Make This Row Fullwidth: Sure
Use Customized Gutter Width: Sure
Gutter Width: 1

Spacing

Upload some customized padding subsequent.

Most sensible Padding: 84px
Backside Padding: 84px
Left Padding: 4vw (Desktop), 7vw (Pill), 14vw (Telephone)
Proper Padding: 4vw (Desktop), 7vw (Pill), 14vw (Telephone)

Field Shadow

Together with a field shadow.

Field Shadow Blur Energy: 80px
Shadow Colour: rgba(0,0,0,0.3)

Show

To verify all social apply icons seem subsequent to one another, we’re going so as to add one unmarried line of CSS code to the primary component of the row.

show: flex;

Upload Social Media Apply Module to Column 1

Alignment

The primary module we’d like in column 1 is a Social Media Apply Module. Whenever you’ve added the module, alternate the thing alignment within the design tab.

Merchandise Alignment: Middle

Upload New Social Community

Proceed through including a brand new social community. For this situation, we’re the use of Dribbble.

Hyperlink

Upload a hyperlink for your Dribbble profile.

Gradient Background

Then, alternate the gradient background the use of the next settings:

Colour 1: #ea0061
Colour 2: #ea4c8d
Gradient Path: 136deg

Spacing

And build up the scale of the module through including some customized padding.

Most sensible Padding: 20px
Backside Padding: 20px
Left Padding: 20px
Proper Padding: 20px

Border

We’re additionally turning the module right into a circle through including ’20vw’ to every one of the crucial corners within the border settings.

Field Shadow

Final however now not least, upload a field shadow.

Field Shadow Vertical Place: 20px
Field Shadow Blur Energy: 80px
Shadow Colour: #000000

Upload Textual content Module #1 to Column 1

Upload Content material

Upload a Textual content Module to the primary column subsequent.

Textual content Settings

Exchange the textual content settings.

Textual content Font: Open Sans
Textual content Font Weight: Extremely Daring
Textual content Colour: #ffffff
Textual content Orientation: Middle

Upload Textual content Module #2 to Column 1

Upload Content material

Upload every other one under the former one.

Textual content Settings

Exchange the textual content settings of this module too.

Textual content Font: Open Sans
Textual content Colour: #898989
Textual content Measurement: 11px
Textual content Orientation: Middle

Clone Modules in Column 1 Two times & Position Duplicates in Closing Columns

Whenever you’re performed customizing all of the modules in column 1, you’ll be able to move forward and clone them two times. Position the duplicates within the two last columns of the row.

Exchange Social Networks

After all, you’ll want to alternate the social networks.

Exchange Social Community Hyperlinks

Together with the hyperlinks.

Exchange Social Community Gradient Backgrounds

And the community gradient backgrounds.

Colour 1: #0043ff
Colour 2: #00aced

Colour 1: #ea2c59
Colour 2: #fed270

Get started Recreating Instance #2

Upload New Phase

Background Colour

Directly to the following instance! Upload a brand new segment with a white background colour.

Background Colour: #ffffff

Spacing

Upload some customized padding subsequent.

Most sensible Padding: 50px (Desktop & Pill), 0px (Telephone)
Backside Padding: 50px (Desktop & Pill), 0px (Telephone)
Left Padding: 36vw (Desktop), 23vw (Pill), 4vw (Telephone)
Proper Padding: 36vw (desktop), 23vw (Pill), 4vw (Telephone)

Upload Row #1

Column Construction

Proceed through including a brand new row the use of the next column construction:

Sizing

With out including any modules but, move to the design tab of the row settings and alter the sizing settings.

Make This Row Fullwidth: Sure
Use Customized Gutter Width: Sure
Gutter Width: 1

Upload Symbol Module

Add Symbol

Time to begin including modules! The primary module we’d like is an Symbol Module with a 1:1 ratio.

Alignment

Exchange the picture alignment.

Symbol Alignment: Middle

Sizing

Adjust the width too.

Width: 33%
Module Alignment: Middle

Border

And upload ’20px’ to every one of the crucial corners within the border settings.

Field Shadow

Entire the picture design through including a refined field shadow.

Field Shadow Blur Energy: 51px
Shadow Colour: rgba(0,0,0,0.37)

Upload Textual content Module #1

Upload H3 Content material

The following module we’d like is a Textual content Module. Upload some H3 content material of selection.

H3 Textual content Settings

Exchange the H3 textual content settings within the design tab.

Heading 3 Font: Open Sans
Heading 3 Font Weight: Extremely Daring
Heading 3 Font Taste: Uppercase
Heading 3 Textual content Alignment: Middle
Heading 3 Textual content Colour: #000000
Heading 3 Letter Spacing: -1px
Heading 3 Line Top: 0.9em

Spacing

Upload some peak margin subsequent.

Most sensible Margin: 30px

Upload Textual content Module #2

Upload Content material

Upload every other Textual content Module.

Textual content Settings

Adjust the textual content settings.

Textual content Font: Open Sans
Textual content Colour: #919191
Textual content Orientation: Middle

Upload Row #2

Column Construction

Proceed through including a brand new row the use of the next column construction:

Background Colour

With out including any modules but, open the row settings and alter the row background colour.

Background Colour: #ffffff

Column 2 Background Colour

Upload a background colour to the second one column as neatly.

Column 2 Background Colour: #efefef

Alignment

You’ll want to’re the use of left row alignment.

Row Alignment: Left

Sizing

Move to the sizing settings subsequent and make some adjustments.

Use Customized Width: Sure
Unit: %
Customized Width: 67%
Use Customized Gutter Width: Sure
Gutter Width: 1
Equalize Column Heights: Sure

Spacing

We’re additionally including some customized padding to the row and its columns.

Most sensible Padding: 0px
Backside Padding: 0px
Column 1 Most sensible Padding: 20px
Column 1 Backside Padding: 20px
Column 2 Most sensible Padding: 20px
Column 2 Backside Padding: 20px

Border

Upload ’14px’ to the highest left, peak proper and backside left corners.

Field Shadow

And whole the row design through including a refined field shadow.

Field Shadow Blur Energy: 80px
Shadow Colour: rgba(0,0,0,0.17)

Upload Social Media Apply Module to Column 1

Alignment

Within the first column, we’ll desire a Social Media Apply module. Exchange the thing alignment.

Merchandise Alignment: Middle

Upload New Social Community

Then, upload a brand new social community. We’re the use of Dribbble.

Hyperlink

Upload the hyperlink for your Dribbble portfolio.

Gradient Background

And alter the gradient background of the social community.

Colour 1: #ea0061
Colour 2: #ea4c8d
Gradient Path: 136deg

Spacing

Upload some customized padding values subsequent.

Most sensible Padding: 20px
Backside Padding: 20px
Left Padding: 20px
Proper Padding: 20px

Border

And upload ’10px’ to every one of the crucial corners of the social community.

Field Shadow

Entire the module design through including a refined field shadow.

Field Shadow Blur Energy: 80px
Shadow Colour: rgba(0,0,0,0.3)

Upload Textual content Module #1 to Column 2

Upload Content material

Upload a Textual content Module to the second one column.

Textual content Settings

Exchange the textual content settings accordingly:

Textual content Font: Open Sans
Textual content Font Weight: Extremely Daring
Textual content Colour: #000000
Textual content Orientation: Middle

Spacing

Create house through including some peak margin subsequent.

Most sensible Margin: 10px

Upload Textual content Module #2 to Column 2

Upload Content material

The second one module we’d like in column 2 is every other Textual content Module.

Textual content Settings

Exchange the textual content settings.

Textual content Font: Open Sans
Textual content Colour: #898989
Textual content Measurement: 11px
Textual content Orientation: Middle

Clone Row #2

Whenever you’re performed editing the row, you’ll be able to move forward and clone it as soon as.

Change Modules

Change the modules subsequent.

Upload Column 1 Background Colour

Then, upload a column 1 background colour to the replica row.

Column 1 Background Colour: #dbdbdb

Take away Column 2 Background Colour

Take away the column 2 background colour subsequent.

Exchange Row Alignment

Exchange the row alignment as neatly.

Row Alignment: Proper

Exchange Row Sizing

Together with the customized width within the sizing settings.

Customized Width: 66.99%

Exchange Row Border

We’re additionally ensuring ’14px’ will get assigned to the highest proper and backside proper corners simplest.

Exchange Social Apply Community

Proceed through converting the social community.

Exchange Social Apply Community Gradient Background

Together with the gradient background.

Colour 1: #0043ff
Colour 2: #00aced

Clone Each Social Apply Rows

Whenever you’re performed having each social apply rows, you’ll be able to clone every certainly one of them.

Exchange Border of Replica #1

Exchange the rounded corners of the primary replica.

Exchange Social Apply Community of Replica #1

Together with the social community.

Exchange Gradient Background of Replica #1

And the gradient background.

Colour 1: #ea2c59
Colour 2: #fed270

Exchange Border of Replica #2

Proceed through converting the rounded corners of the second one replica as neatly.

Exchange Social Apply Community of Replica #2

Together with the social community.

Exchange Gradient Background of Replica #2

And, as soon as once more, the gradient background this is assigned to the social community.

Colour 1: #00306b
Colour 2: #007bb6

Obtain The Cellular Social Apply Bios for FREE

To put your fingers at the unfastened cell social apply sections, you’re going to first want to obtain it the use of the button under. To realize get right of entry to to the obtain it is important to subscribe to our Divi Day by day e-mail listing through the use of the shape under. As a brand new subscriber, you’re going to obtain much more Divi goodness and a unfastened Divi Format pack each Monday! In case you’re already at the listing, merely input your e-mail cope with under and click on obtain. You’ll now not be “resubscribed” or obtain additional emails.

Download the Files

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !essential; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:ahead of { border-top-color: #ffffff !essential; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:ahead of, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:ahead of { border-top-color: clear !essential; border-left-color: #ffffff !essential; }
@media simplest display screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:ahead of, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:ahead of { border-top-color: #ffffff !essential; border-left-color: clear !essential; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { colour: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:ahead of { background: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !essential } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .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 robust { 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 robust, .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 !essential;}

Obtain For Unfastened

Sign up for the Divi Newlsetter and we will be able to e-mail you a replica of without equal Divi Touchdown Web page Format Pack, plus heaps of alternative wonderful and unfastened Divi sources, guidelines and methods. Apply alongside and you’re going to be a Divi grasp very quickly. If you’re already subscribed merely kind for your e-mail cope with under and click on obtain to get right of entry to the format pack.

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

Preview

Now that we’ve long past thru all of the steps, let’s take a last take a look at the end result of each examples we’ve recreated.

Instance 1

Instance 2

Ultimate Ideas

On this publish, we’ve proven you easy methods to create surprising social apply bios for cell units. You’ll use those designs as your on-line discuss with card and redirect other people to this web page so they are able to get in contact or view your portfolio hyperlinks. When you have any questions or tips, make sure to depart a remark within the remark segment under!

The publish How to Create Beautiful Mobile Social Follow Bios with Divi (Free Download!) seemed first on Elegant Themes Blog.

WordPress Web Design

[ continue ]