When you’re creating your personal website, it helps to have a social follow bio page that you can easily link to. It makes a great online visit card with a summary of what you do and where people can see your work. The information that is shared within mobile social follow bios is usually limited to your image, name, job title, a small description and portfolio links. You can also add an additional CTA to help visitors get in touch with you.

In this post, we’ll show you how to create two beautiful mobile social follow bios using Divi. At the end of the tutorial, we’ll also share the JSON files of both examples so you can get started right away.

Let’s get to it!

Preview

Before we dive into the tutorial, let’s take a quick look at the two examples we’ll recreate from scratch.

Example 1

social follow bios

Example 2

social follow bios

Start Recreating Example #1

Add New Section

Background Color

Let’s get started with the first example! Create a new page or open an existing one and add a regular section to it. Open the section settings and add a white background color.

  • Background Color: #ffffff

social follow bios

Spacing

Then, go to the spacing settings of the section and make some changes. You’ll notice that the values differ according to the screen size. We’re keeping the same kind of slim design across different screen sizes by modifying the left and right padding as we go.

  • Top Padding: 50px (Desktop & Tablet), 0px (Phone)
  • Bottom Padding: 50px (Desktop & Tablet), 0px (Phone)
  • Left Padding: 36vw (Desktop), 23vw (Tablet), 0vw (Phone)
  • Right Padding: 36vw (Desktop), 23vw (Tablet), 0vw (Phone)

social follow bios

Add Row #1

Column Structure

Continue by adding a new row to the section using the following column structure:

social follow bios

Background Color

Without adding any modules yet, open the row settings and add a background color.

  • Background Color: #333333

social follow bios

Sizing

Then, go to the sizing settings in the design tab and remove all the custom space between the column and the row.

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

social follow bios

Box Shadow

We’re also adding a box shadow to create some depth on larger screen sizes.

  • Box Shadow Blur Strength: 80px
  • Shadow Color: rgba(0,0,0,0.3)

social follow bios

Add Image Module

Upload Image

Time to start adding modules! Start with an Image Module that has a 1:1 ratio. The image we’re using, for instance, has a width and height of ‘500px’.

social follow bios

Alignment

Once you’ve uploaded the image, go to the design tab and change the image alignment.

  • Image Alignment: Center

social follow bios

Sizing

We’re shrinking the size of the image by modifying the width in the sizing settings next.

  • Width: 33%
  • Module Alignment: Center

social follow bios

Border

We’re also turning the image into a circle by adding ’50vw’ to each one of the corners in the border settings. On top of that, we’ll add a white border using the following settings:

  • Border Width: 8px
  • Border Color: #ffffff

social follow bios

Box Shadow

Last but not least, add a box shadow to create a dimensional design.

  • Box Shadow Vertical Position: 40px
  • Box Shadow Blur Strength: 100px
  • Shadow Color: #000000

social follow bios

Add Text Module #1

Add H3 Content

On to the next module! Add a Text Module right below the Image Module with some H3 content.

social follow bios

H3 Text Settings

Continue by going to the design tab and changing the H3 text settings.

  • Heading 3 Font: Open Sans
  • Heading 3 Font Weight: Semi Bold
  • Heading 3 Text Alignment: Center
  • Heading 3 Text Color: #ffffff
  • Heading 3 Line Height: 0.1em

social follow bios

Spacing

We’re also adding some top margin to create space between the Image Module and this Text Module.

  • Top Margin: 30px

social follow bios

Add Text Module #2

Add Content

The next module we need is another Text Module. Add your job title to the content box.

social follow bios

Text Settings

Then, go to the design tab and change the text settings.

  • Text Font: Open Sans
  • Text Font Weight: Regular
  • Text Color: #919191
  • Text Orientation: Center

social follow bios

Add Text Module #3

Add Content

Continue by adding another Text Module with a short description of yourself.

social follow bios

Text Settings

Go to the text settings and make some changes.

  • Text Font: Open Sans
  • Text Color: #b7b7b7
  • Text Line Height: 1.6em
  • Text Orientation: Center

social follow bios

Sizing

Modify the width of the module as well.

  • Width: 68%
  • Module Alignment: Center

social follow bios

Spacing

And add some top and bottom margin to create additional space.

  • Top Margin: 30px
  • Bottom Margin: 30px

social follow bios

Add Button Module

Add Copy

The next and last module we need in this row is a Button Module. Add some copy.

social follow bios

Alignment

Then, go to the design tab and change the button alignment to make it match with the previous modules.

  • Button Alignment: Center

social follow bios

Button Settings

Continue by changing the appearance of the button in the button settings.

  • Use Custom Styles for Button: Yes
  • Button Text Size: 13px
  • Button Text Color: #ffffff
  • Color 1: #ad32ff
  • Color 2: #32baff
  • Gradient Direction: 96deg
  • Button Border Width: 0px
  • Button Border Radius: 30px
  • Button Font: Open Sans
  • Font Weight: Ultra Bold
  • Font Style: Uppercase

social follow bios

social follow bios

Spacing

Add some custom margin and padding next.

  • Bottom Margin: 50px
  • Top Padding: 15px
  • Bottom Padding: 15px
  • Left Padding: 50px
  • Right Padding: 50px

social follow bios

Box Shadow

And complete the button design by adding a box shadow.

  • Box Shadow Vertical Position: 20px
  • Box Shadow Blur Strength: 80px
  • Shadow Color: rgba(0,0,0,0.69)

social follow bios

Add Row #2

Column Structure

On to the next row! Use the following column structure:

social follow bios

Gradient Background

Without adding any modules yet, open the row settings and add a gradient background:

  • Color 1: #1e1e1e
  • Color 2: #3f3f3f
  • Gradient Type: Radial
  • Radial Direction: Top Left
  • Start Position: 26%
  • Place Gradient Above Background Image: Yes

social follow bios

Background Image

Save the following image to your computer and use it as a background image for the row:

Along with the following background settings:

  • Background Image Size: Actual Size
  • Background Image Position: Center
  • Background Image Repeat: No Repeat
  • Background Image Blend: Hard Light

social follow bios

Sizing

Then, go to the design tab and remove all the space between columns and the row. This will help us take full advantage of the row space we get.

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

social follow bios

Spacing

Add some custom padding next.

  • Top Padding: 84px
  • Bottom Padding: 84px
  • Left Padding: 4vw (Desktop), 7vw (Tablet), 14vw (Phone)
  • Right Padding: 4vw (Desktop), 7vw (Tablet), 14vw (Phone)

social follow bios

Box Shadow

Along with a box shadow.

  • Box Shadow Blur Strength: 80px
  • Shadow Color: rgba(0,0,0,0.3)

social follow bios

Display

To make sure all social follow icons appear next to each other, we’re going to add one single line of CSS code to the main element of the row.

display: flex;

social follow bios

Add Social Media Follow Module to Column 1

Alignment

The first module we need in column 1 is a Social Media Follow Module. Once you’ve added the module, change the item alignment in the design tab.

  • Item Alignment: Center

social follow bios

Add New Social Network

Continue by adding a new social network. For this example, we’re using Dribbble.

social follow bios

social follow bios

Link

Add a link to your Dribbble profile.

social follow bios

Gradient Background

Then, change the gradient background using the following settings:

  • Color 1: #ea0061
  • Color 2: #ea4c8d
  • Gradient Direction: 136deg

social follow bios

Spacing

And increase the size of the module by adding some custom padding.

  • Top Padding: 20px
  • Bottom Padding: 20px
  • Left Padding: 20px
  • Right Padding: 20px

social follow bios

Border

We’re also turning the module into a circle by adding ’20vw’ to each one of the corners in the border settings.

social follow bios

Box Shadow

Last but not least, add a box shadow.

  • Box Shadow Vertical Position: 20px
  • Box Shadow Blur Strength: 80px
  • Shadow Color: #000000

social follow bios

Add Text Module #1 to Column 1

Add Content

Add a Text Module to the first column next.

social follow bios

Text Settings

Change the text settings.

  • Text Font: Open Sans
  • Text Font Weight: Ultra Bold
  • Text Color: #ffffff
  • Text Orientation: Center

social follow bios

Add Text Module #2 to Column 1

Add Content

Add another one below the previous one.

social follow bios

Text Settings

Change the text settings of this module too.

  • Text Font: Open Sans
  • Text Color: #898989
  • Text Size: 11px
  • Text Orientation: Center

social follow bios

Clone Modules in Column 1 Twice & Place Duplicates in Remaining Columns

Once you’re done customizing all the modules in column 1, you can go ahead and clone them twice. Place the duplicates in the two remaining columns of the row.

Change Social Networks

Of course, you’ll need to change the social networks.

Change Social Network Links

Along with the links.

Change Social Network Gradient Backgrounds

And the network gradient backgrounds.

  • Color 1: #0043ff
  • Color 2: #00aced

  • Color 1: #ea2c59
  • Color 2: #fed270

Start Recreating Example #2

social follow bios

Add New Section

Background Color

On to the next example! Add a new section with a white background color.

  • Background Color: #ffffff

social follow bios

Spacing

Add some custom padding next.

  • Top Padding: 50px (Desktop & Tablet), 0px (Phone)
  • Bottom Padding: 50px (Desktop & Tablet), 0px (Phone)
  • Left Padding: 36vw (Desktop), 23vw (Tablet), 4vw (Phone)
  • Right Padding: 36vw (desktop), 23vw (Tablet), 4vw (Phone)

social follow bios

Add Row #1

Column Structure

Continue by adding a new row using the following column structure:

social follow bios

Sizing

Without adding any modules yet, go to the design tab of the row settings and change the sizing settings.

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

social follow bios

Add Image Module

Upload Image

Time to start adding modules! The first module we need is an Image Module with a 1:1 ratio.

social follow bios

Alignment

Change the image alignment.

  • Image Alignment: Center

social follow bios

Sizing

Modify the width too.

  • Width: 33%
  • Module Alignment: Center

social follow bios

Border

And add ’20px’ to each one of the corners in the border settings.

social follow bios

Box Shadow

Complete the image design by adding a subtle box shadow.

  • Box Shadow Blur Strength: 51px
  • Shadow Color: rgba(0,0,0,0.37)

social follow bios

Add Text Module #1

Add H3 Content

The next module we need is a Text Module. Add some H3 content of choice.

social follow bios

H3 Text Settings

Change the H3 text settings in the design tab.

  • Heading 3 Font: Open Sans
  • Heading 3 Font Weight: Ultra Bold
  • Heading 3 Font Style: Uppercase
  • Heading 3 Text Alignment: Center
  • Heading 3 Text Color: #000000
  • Heading 3 Letter Spacing: -1px
  • Heading 3 Line Height: 0.9em

social follow bios

Spacing

Add some top margin next.

  • Top Margin: 30px

social follow bios

Add Text Module #2

Add Content

Add another Text Module.

social follow bios

Text Settings

Modify the text settings.

  • Text Font: Open Sans
  • Text Color: #919191
  • Text Orientation: Center

social follow bios

Add Row #2

Column Structure

Continue by adding a new row using the following column structure:

social follow bios

Background Color

Without adding any modules yet, open the row settings and change the row background color.

  • Background Color: #ffffff

social follow bios

Column 2 Background Color

Add a background color to the second column as well.

  • Column 2 Background Color: #efefef

social follow bios

Alignment

Make sure you’re using left row alignment.

  • Row Alignment: Left

social follow bios

Sizing

Go to the sizing settings next and make some changes.

  • Use Custom Width: Yes
  • Unit: %
  • Custom Width: 67%
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Equalize Column Heights: Yes

social follow bios

Spacing

We’re also adding some custom padding to the row and its columns.

  • Top Padding: 0px
  • Bottom Padding: 0px
  • Column 1 Top Padding: 20px
  • Column 1 Bottom Padding: 20px
  • Column 2 Top Padding: 20px
  • Column 2 Bottom Padding: 20px

social follow bios

Border

Add ’14px’ to the top left, top right and bottom left corners.

social follow bios

Box Shadow

And complete the row design by adding a subtle box shadow.

  • Box Shadow Blur Strength: 80px
  • Shadow Color: rgba(0,0,0,0.17)

social follow bios

Add Social Media Follow Module to Column 1

Alignment

In the first column, we’ll need a Social Media Follow module. Change the item alignment.

  • Item Alignment: Center

social follow bios

Add New Social Network

Then, add a new social network. We’re using Dribbble.

social follow bios

social follow bios

Link

Add the link to your Dribbble portfolio.

social follow bios

Gradient Background

And change the gradient background of the social network.

  • Color 1: #ea0061
  • Color 2: #ea4c8d
  • Gradient Direction: 136deg

social follow bios

Spacing

Add some custom padding values next.

  • Top Padding: 20px
  • Bottom Padding: 20px
  • Left Padding: 20px
  • Right Padding: 20px

social follow bios

Border

And add ’10px’ to each one of the corners of the social network.

social follow bios

Box Shadow

Complete the module design by adding a subtle box shadow.

  • Box Shadow Blur Strength: 80px
  • Shadow Color: rgba(0,0,0,0.3)

social follow bios

Add Text Module #1 to Column 2

Add Content

Add a Text Module to the second column.

social follow bios

Text Settings

Change the text settings accordingly:

  • Text Font: Open Sans
  • Text Font Weight: Ultra Bold
  • Text Color: #000000
  • Text Orientation: Center

social follow bios

Spacing

Create space by adding some top margin next.

  • Top Margin: 10px

social follow bios

Add Text Module #2 to Column 2

Add Content

The second module we need in column 2 is another Text Module.

social follow bios

Text Settings

Change the text settings.

  • Text Font: Open Sans
  • Text Color: #898989
  • Text Size: 11px
  • Text Orientation: Center

social follow bios

Clone Row #2

Once you’re done modifying the row, you can go ahead and clone it once.

social follow bios

Swap Modules

Swap the modules next.

social follow bios

Add Column 1 Background Color

Then, add a column 1 background color to the duplicate row.

  • Column 1 Background Color: #dbdbdb

social follow bios

Remove Column 2 Background Color

Remove the column 2 background color next.

social follow bios

Change Row Alignment

Change the row alignment as well.

  • Row Alignment: Right

social follow bios

Change Row Sizing

Along with the custom width in the sizing settings.

  • Custom Width: 66.99%

social follow bios

Change Row Border

We’re also making sure ’14px’ gets assigned to the top right and bottom right corners only.

social follow bios

Change Social Follow Network

Continue by changing the social network.

social follow bios

Change Social Follow Network Gradient Background

Along with the gradient background.

  • Color 1: #0043ff
  • Color 2: #00aced

social follow bios

Clone Both Social Follow Rows

Once you’re done having both social follow rows, you can clone each one of them.

social follow bios

Change Border of Duplicate #1

Change the rounded corners of the first duplicate.

social follow bios

Change Social Follow Network of Duplicate #1

Along with the social network.

social follow bios

Change Gradient Background of Duplicate #1

And the gradient background.

  • Color 1: #ea2c59
  • Color 2: #fed270

social follow bios

Change Border of Duplicate #2

Continue by changing the rounded corners of the second duplicate as well.

social follow bios

Change Social Follow Network of Duplicate #2

Along with the social network.

social follow bios

Change Gradient Background of Duplicate #2

And, once again, the gradient background that is assigned to the social network.

  • Color 1: #00306b
  • Color 2: #007bb6

social follow bios

Download The Mobile Social Follow Bios for FREE

To lay your hands on the free mobile social follow sections, 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.

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:before { border-top-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:before { border-top-color: transparent !important; border-left-color: #ffffff !important; }
@media only screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:before { border-top-color: #ffffff !important; border-left-color: transparent !important; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:before { background: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !important } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .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 strong { 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 strong, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form input, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !important;}

Download For Free

Download For Free

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!

Preview

Now that we’ve gone through all the steps, let’s take a final look at the outcome of both examples we’ve recreated.

Example 1

social follow bios

Example 2

social follow bios

Final Thoughts

In this post, we’ve shown you how to create stunning social follow bios for mobile devices. You can use these designs as your online visit card and redirect people to this page so they can get in touch or view your portfolio links. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

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