Download a Unique Social Follow Design with 5 Color Palettes for Divi

October 25, 2018

Websites and social media often go hand in hand. Social networks are used to drive traffic to websites but the opposite is true as well, especially if you want to increase engagement on your social networks. That’s why most websites include links to their social networks on various pages. You can go with the classic way and add icons, or you can try a more unique approach.

We’ve created a stunning and creative social follow design that you can download and can use on any website you build using Divi. On top of that, we’ve also provided you with 5 different color palettes that look great for this design.

Let’s get to it!


Let’s start off by taking a look at the different variations of this design and the view on different screen sizes.

download-a-unique-social-follow-design-with-5-color-palettes-for-divi Theme Builder Layout

Download The Social Follow Design for FREE

To lay your hands on the social follow design with 5 different color palettes, you will first need to download them 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.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Color Palettes

We’re going to guide you step by step through the process. But before we do that, go ahead and choose a color palette of choice and keep the color codes close by. We’ll refer to the color number throughout the tutorial.

Palette #1

download-a-unique-social-follow-design-with-5-color-palettes-for-divi Theme Builder Layout

  • Color #1: #D09CF1
  • Color #2: #00e2df

Palette #2

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-1 Theme Builder Layout

  • Color #1: #ffa0a0
  • Color #2: #10007f

Palette #3

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-2 Theme Builder Layout

  • Color #1: #ff3273
  • Color #2: #050042

Palette #4

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-3 Theme Builder Layout

  • Color #1: #f954ee
  • Color #2: #00aeff

Palette #5

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-4 Theme Builder Layout

  • Color #1: #ffca3a
  • Color #2: #ff6005

Recreate Social Follow Design from Scratch

Add Section #1

Gradient Background

Start by adding a regular section to a new or existing page. Open the section settings and apply a gradient background:

  • Color 1: Color #1 (Find in Color Palette)
  • Color 2: Color #2 (Find in Color Palette)
  • Gradient Type: Radial
  • Radial Direction: Center
  • Start Position: 6%

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-1 Theme Builder Layout

Background Image

Then, upload the background pattern which you can find by going to the downloaded folder > Background Pattern. Combine the background pattern with the following background settings:

  • Background Image Size: Actual Size
  • Background Image Position: Bottom Center
  • Background Image Repeat: Space

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-2 Theme Builder Layout

Top Divider

Open the divider settings next and add a top divider.

  • Divider Style: Find in List
  • Divider Color: rgba(72,0,79,0.08)
  • Divider Height: 500px
  • Divider Flip: Vertical

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-3 Theme Builder Layout

Bottom Divider

Add a bottom divider as well.

  • Divider Style: Find in List
  • Divider Color: #FFFFFF
  • Divider Height: 500px

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-4 Theme Builder Layout


Then, go to the spacing settings and add some custom padding.

  • Top Padding: 220px
  • Bottom Padding: 329px

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-5 Theme Builder Layout


Lastly, add a subtle animation to the section.

  • Animation Style: Slide
  • Animation Direction: Down
  • Animation Intensity: 2%
  • Animation Starting Opacity: 100%

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-6 Theme Builder Layout

Add Row

Column Structure

We can now add a new row using the following column structure:

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-7 Theme Builder Layout

Add Text Module

Add Content

The only module we’ll need in this row is a Text Module. Add a heading and a paragraph to the content box.

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-8 Theme Builder Layout

Text Settings

Then, go to the text settings and make some modifications.

  • Text Size: 16px
  • Text Line Height: 2em
  • Text Orientation: Center
  • Text Color: Light

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-9 Theme Builder Layout

H1/H2 Text Settings

Change the settings of the heading you’ve chosen as well.

  • Heading Font: Rubik
  • Heading Font Style: Uppercase
  • Heading Text Size: 100px (Desktop), 42px (Tablet), 32px (Phone)
  • Heading Line Height: 1.2em

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-10 Theme Builder Layout


Decrease the width of the module next.

  • Width: 71%
  • Module Alignment: Center

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-11 Theme Builder Layout

Add Section #2

Right below the previous section, go ahead and add a new regular section. No need to make any changes to the section settings.

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-12 Theme Builder Layout

Add Row

Column Structure

Add a row using the following column structure:

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-13 Theme Builder Layout


Then, make the row fullwidth in the sizing settings.

  • Make This Row Fullwidth: Yes

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-14 Theme Builder Layout

Add Image Module to Column 2

Upload Mockup

Time to start adding modules! Start off by adding an Image Module to the second column. Upload the mockup that matches the color palette you’ve chosen. You can find all varieties of mockups by going to the downloaded folder > Mockups.

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-15 Theme Builder Layout


Change the sizing of the Image Module too.

  • Width: 82% (Desktop), 100% (Tablet & Phone)
  • Module Alignment: Center

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-16 Theme Builder Layout


To overlap the Image Module and the previous section, add some negative margin to the Image Module.

  • Top Margin: -300px

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-17 Theme Builder Layout

Add Blurb Module to Column 3

Add Content

We can now add all the social networks! To create them, we’re using Blurb Modules. Go ahead and add the first Blurb Module to the third column and change the content.

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-18 Theme Builder Layout

Add Link

Add a link to the social page next.

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-19 Theme Builder Layout

Choose Icon

Choose your icon as well.

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-20 Theme Builder Layout

Background Color

Continue by going to the background settings and using a slightly transparent background color.

  • Background Color: rgba(255,255,255,0.79)

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-21 Theme Builder Layout

Icon Settings

Then, change the icon settings. Here, we’re using one of Instagram’s official colors.

  • Icon Color: #fb3958
  • Icon Placement: Left

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-22 Theme Builder Layout

Title Text Settings

Make some changes to the title text settings next.

  • Title Font Weight: Semi Bold
  • Title Text Color: #fb3958
  • Title Line Height: 1.7em

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-23 Theme Builder Layout


To create an overlap with the mockup, we’re going to add some spacing values.

  • Top Marign: -170px (Desktop), -800 (Tablet), -700 (Phone)
  • Left Margin: -60% (Desktop), 0% (Tablet & Phone)
  • Right Margin: 60% (Desktop), 0% (Tablet & Phone)
  • Top Padding: 20px
  • Bottom Padding: 20px
  • Left Padding: 50px
  • Right Padding: 50px

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-24 Theme Builder Layout


We’ll play around with the border settings as well.

  • Top Left Border: 20px
  • Bottom Left Border: 20px
  • Right Border Width: 5px
  • Right Border Color: #fb3958

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-25 Theme Builder Layout

Box Shadow

Adding a box shadow will give the design element some depth.

  • Box Shadow Blur Strength: 80px
  • Box Shadow Spread Strength: -11px

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-26 Theme Builder Layout


Lastly, we’re using a slide-in animation style to imitate the mobile notification effect people are familiar with.

  • Animation Style: Slide
  • Animation Direction: Left

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-27 Theme Builder Layout

Clone Blurb Module Three Times

To save time, we’re going to clone the Blurb Module three times. Then, we’ll modify each one of the duplicates to create our desired outcome.

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-28 Theme Builder Layout

Remove Negative Top Margin of Duplicates

To maintain a good overview, we’ll start by removing the negative custom margin of each one of the duplicates.

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-29 Theme Builder Layout

Unique Blurb Module Settings

Blurb Module #2

Change Copy

Open the second Blurb Module in the third column and change the content.

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-30 Theme Builder Layout

Choose Icon

Select another icon as well.

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-31 Theme Builder Layout

Icon Settings

Change the icon color to match the social network it is representing.

  • Icon Color: #3b5998

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-32 Theme Builder Layout

Title Text Settings

Use that same color for the title text color as well.

  • Title Text Color: #3b5998

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-33 Theme Builder Layout


To create another overlap on the other side of the phone, change the spacing values.

  • Left Margin: -170% (Desktop), 0% (Tablet & Phone)
  • Right Margin: 170% (Desktop), 0% (Tablet & Phone)

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-34 Theme Builder Layout


Modify the border settings next.

  • Top Right Corner: 20px
  • Bottom Right Corner: 20px
  • Left Border Width: 5px
  • Left Border Color: #3b5998

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-35 Theme Builder Layout


Make this Blurb Module slide-in from the other side with a small delay as well.

  • Animation Direction: Right
  • Animation Delay: 100ms

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-36 Theme Builder Layout

Blurb Module #3

Change Copy

The third Blurb Module needs some different copy as well.

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-37 Theme Builder Layout

Choose Icon

Choose another icon next.

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-38 Theme Builder Layout

Icon Settings

Change the icon color into one that matches the social network it is representing.

  • Icon Color: #1da1f2

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-39 Theme Builder Layout

Title Text Settings

Use the same color for the title text color.

  • Title Text Color: #1da1f2

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-40 Theme Builder Layout


Change the spacing settings as well.

  • Left Margin: -80% (Desktop), 0% (Tablet & Phone)
  • Right Margin: 80% (Desktop), 0% (Tablet & Phone)

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-41 Theme Builder Layout


Change the border color in the border settings too.

  • Right Border Color: #1da1f2

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-42 Theme Builder Layout


Lastly, add a small delay to the animation that is already there.

  • Animation Delay: 200ms

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-43 Theme Builder Layout

Blurb Module #4

Change Copy

For the last Blurb Module, we’re starting off by changing the content.

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-44 Theme Builder Layout

Choose Icon

Select another social icon in the Image & Icon settings next.

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-45 Theme Builder Layout

Icon Settings

Make the icon color match the social network that is displayed.

  • Icon Color: #0077B5

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-46 Theme Builder Layout

Title Text Settings

Use the same color for the title text.

  • Title Text Color: #0077B5

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-47 Theme Builder Layout


Push the Blurb Module to the left side using different spacing settings as well.

  • Left Margin: -180% (Desktop), 0% (Tablet & Phone)
  • Right Margin: 180% (Desktop), 0% (Tablet & Phone)

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-48 Theme Builder Layout


Then, modify the border settings.

  • Top Right Corner: 20px
  • Bottom Right Corner: 20px
  • Left Border Width: 5px
  • Left Border Color: #0077B5

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-49 Theme Builder Layout


Last but not least, add a different animation direction and some animation delay to this Blurb Module.

  • Animation Direction: Right
  • Animation Delay: 300ms

download-a-unique-social-follow-design-with-5-color-palettes-for-divi-50 Theme Builder Layout


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

download-a-unique-social-follow-design-with-5-color-palettes-for-divi Theme Builder Layout

Final Thoughts

In this post, we’ve shared a unique social follow design which you can download for free. We’ve also provided you with 5 different colors palettes that you can apply to it. Feel free to use the JSON files on any Divi website you create to increase social engagement through your website. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

Share this article:

eHost-square-ad Theme Builder Layout

We’re listening.

Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn:


Related Posts

Get ALL Your SEO, WordPress & Divi News

Join Our Daily Roundup

SEO News and More

SEO News and More

Subscribe ToThe Weekly SEO Trade News Updates

Get the latest SEO, SEM and SMM marketing intel, tips and tricks from one of the best SEO Gurus online. 

Every Tuesday morning we send out an aggregated email listing all new posts on SEO Trade News.

Excellent! Now check your email to confirm your subscription.