How to create a social network section with Divi flip box module?

by | Oct 11, 2020 | Tutorials

Hey Divi user, Thanks for landing over on this tutorial. This is a series of tutorials where we will break down our premade design template.
Today we will have a look at one of our Divi flip box module design sections.

So without future ado, let’s drive-in and see how we can create this from scratch. Well, if you don’t want to, you can download it and use it on your site.

The purpose of showing the recipe is to familiarize yourself with the module to expand your design possibilities.
Let’s get started-

Requirements

Overview of the design

We want to create a social media button wherein the front side will have a social network site name with an icon, and on the other side, there will be an action button. We will also want to have the content floating option and a shadow in our backside.

Recipe

Take a new page or insert a regular section on your page.

Let’s start by giving background into the section settings. You will find the setting in the Content tab> Background> #f7f7f7.

Now insert row, we took four rows. Now let’s go to the design tab of row setting and turn on custom gutter width from the Sizing option and select gutter width to 2.

Now on the very first row, insert the Flip Box Module.

Now it’s time to insert content on our module. Let’s drive in the content section and give a title on the front side.

Text and icon will have white color so let’s choose the background first. This will eventually help.
Scroll down to Background front side setting in the content tab. Turn on the gradient and select these settings-

  • Color 1: #09a5f9
  • Color 2: #2352af
  • Gradient Direction: 140deg

The rest of the setting will be the default.

Now scroll up to the image and icon settings and turn ON “Use icon” option. Select the Facebook icon from the icon list. The setting will be –

  • Icon color: #ffffff
  • Icon Alignment: center

Before we go to the design tab, let’s change the builder view and add content for the backside. This is the very first setting in our content tab.

Let’s scroll down to the Button for the backside and add button text and URL for the button. We don’t want anything else here. Let’s select the background color only from Background BackSide settings to color white (#ffffff).

Before we drive into the animation settings, let go to the design tab and finish that part first. We changed our builder view to the front.

First thing in the design tab, we have Content vertical Alignment. Let set the center for both sides.

Now scroll down to Title design. And the setting for this will be-

  • Title font- Abel
  • Title Text Alignment- Center
  • Title Text Color- #ffffff

Then let’s go to the button and select the following setting for it (You can change the builder view to back).

  • Alignment- Center
  • Button background- #ffffff
  • Button font- Roboto
  • Button Font Weight- Light
  • Button Text Color- #2352af
  • Button Text Size- 31px
  • Border Color – rgba(0,0,0,0)

Now let’s have some custom spacing-

  • In Wrapper,
    Front Wrapper Padding – 60px top, 60px bottom
  • In Front,
    Icon Margin- 28px bottom

Let’s add the box-shadow on Backside. Here are the settings for shadow-

  • Box shadow- the first one
  • Shadow Color- rgba(0,0,0,0.1)

Now Let’s Get back to the Content tab settings for the flip animation. We don’t want to change much here. All we want is the Content floating effect turned ON.

We are done with the first one. Now Let’s copy this item 3times and add those to the empty columns.

Now change the content for those 3 according to social media you would like to have.
We set things like-

For Twitter,

  • Icon and text changed accordingly.
  • Animation> Rotate Direction- Rotate Right
  • Background Front side-
    • Color 1: #19e5fc
    • Color 2: #008ef4
    • Gradient Direction: 140deg
  •  In Design Tab> Button,
  • Button Text Color – #008ef4

For Youtube,

  • Icon and text changed accordingly.
  • Animation> Rotate Direction- Rotate Up
  • Background Front side-
    • Color 1: #f77a3b
    • Color 2: #db181b
    • Gradient Direction: 140deg
  • In Design Tab> Button,
  • Button Text Color – #db181b

For Instagram,

  • Icon and text changed accordingly.
  • Animation> Rotate Direction- Rotate Down
  • Background Front side-
    • Color 1: #fe9b2d
    • Color 2: #b54bc5
    • Gradient Direction: 140deg
  • In Design Tab> Button,
  • Button Text Color – #b54bc5
Done Now save and preview the design.
Let us know your thoughts in the comments section.

Related Posts

No Results Found

The page you requested could not be found. Try refining your search, or use the navigation above to locate the post.

Saddam Sifat

Saddam Sifat

Saddam is a marketer & writer with an enthusiasm to learn new things. Currently working in Echoasoft limited. You can find him on Twitter @saddamsifat. Love to write on Online Marketing, WordPress, DIVI and Big fan of OneRepublic.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

DiviFlash offers unique and awesome Divi modules or Divi plugins.

Download Now and Start building great designs!

We offer a 14 Day Money Back Guarantee, so joining is Risk-Free!