A Divi Gem

by | Nov,2018

Divi is known is ease of use, custom made layouts, child themes, everything you need to build a beautiful responsive site with minimal coding.  However, if you are like me, then you are more likely to use Divi as your base and want to add in your own custom touches.  The Divi code module is made for this!  This is, without a doubt my favorite part of Divi.

So today I am going to share with you a nice little social share bar that you can do with the code module in Divi.

If you like the Monarch social bar you are not alone.  If you don’t want to pay for premium plug ins, you are also not alone!  While there are times when I don’t mind spending money on a premium plugin, if I know that it’s something I can do on my own, I take advange of the code module and start coding.

 

Let’s take a moment first to appreciate Font Awesome! If you don’t know about this tool, you should.  Here is a link to discover the possibilites yourself. Font Awesome  We will be using this in our code module to create our social icons.  This basically allows you to insert a vast variety of icons, not just social icons, but nearly anything you can think of.   I personally use this all the time when building sites. You can also use these to customize the social follow module in Divi, but I will save that for another post.

 

Now let’s get down to it…..

 

Step 1:

Insert the code module anywhere on the page you want to show your social icon bar. You will need to assign a CSS class to the module, this will prevent other links in the page from being affected by the css you are using to style the module.  In this example you will use the css class “social-icons-1”

 

Step 2:

Paste the below code and save.  That’s it!

From here you can play around with the styles as you would like to, or add and remove more social icons.  With the code module and font awesome the options are limitless…almost anyway!

Copy/Paste Code

<style type=”text/css”>

 

/******* SOCIAL ICONS BAR CSS *******/

 

/******* LIST FORMAT *******/
.social-icons-1 .wrapper-1 {
position: fixed !important;
width: 0% !important;
left: 0!important;
top: 50%!important;
padding: 0px !important;
z-index: 999 !important;
transform: translate(-50%, -50%);
}

.mylist-1 {
list-style: none !important;
padding: 0px !important;
}

.social-icons-1 ul li {
width:35px;
height: 35px;
position: relative;
margin: 0px 0;
cursor: pointer;
border-radius: 0px;

}

ul li .fab{
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
position: absolute;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%);
font-size: 20px !important;
color: #fff;
}

ul li .fas{
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
position: absolute;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%);
font-size: 20px !important;
color: #fff;
}

/******* ICON STYLES *******/
ul li.facebook-1{
background: #3B5998 !Important;
}

ul li.linkedin-1{
background: #0077B5 !Important;
}

ul li.twitter-1{
background: #0084FF !Important;
}

ul li.instagram-1{
background: #cd486b !Important;
}

ul li.google-1{
background: #db4a39 !Important;
}

ul li.whatsapp-1{
background: #25D366!Important;
}

ul li.eyeem-1{
background: #000!Important;
}

ul li.reddit-1{
background: #db4a39!Important;
}

ul li.rss-1{
background: #f0a100 !Important;
}

ul li.github-1{
background: #666666 !Important;
}

ul li.discord-1{
background: #7289da !Important;

}

ul li.telegram-1{
background: #0088cc !Important;
}

ul li.snapchat-1{
background: #fffa37 !Important;
}

ul li.pinterest-1{
background: #c92619 !Important;
}

ul li.qq-1{
background: #4297d3 !Important;
}

ul li.codepen-1{
background: #000!Important;
}

ul li.bitcoin-1{
background: #ff9900 !Important;
}

/******* SLIDER STYLES *******/
.slider-1 {
content: “”;
position: absolute;
top: 0;
left:31px !important;
width: 0px;
height: 35px;
background: #eebb5c;
border-radius: 0px;
transition: all 0.5s 0.3s ease;
}

.slider-1 p {
font-family: arial;
text-transform: uppercase;
font-size: 16px;
font-weight: 700;
letter-spacing: .1em;
text-shadow: 2px 2px 2px rgba(18,17,17,0.79);
color: #fff;
text-align: center;
line-height: 35px;
opacity: 0;
transition: all 0.6s ease;
}

ul li.facebook-1 div.slider-1{
background: rgba(59,89,152,0.65) !Important;
margin-left:4.4px !important;
box-shadow: 0 0 20px rgba(59,89,152,0.65);
}
ul li.linkedin-1 div.slider-1{
background: rgba(0,120,181,0.65) !Important;
margin-left:4.4px !important;;
box-shadow: 0 0 20px rgba(0,120,181,0.65);
}
ul li.twitter-1 div.slider-1{
background: rgba(0,132,255,0.65) !Important;
margin-left:4.4px !important;
box-shadow: 0 0 20px rgba(0,132,255,0.65);
}
ul li.instagram-1 div.slider-1{
background: rgba(205,72,107,0.65) !Important;
margin-left:4.4px !important;
box-shadow: 0 0 20px rgba(205,72,107,0.65);
}
ul li.whatsapp-1 div.slider-1{
background: rgba(38,211,103,0.65)!Important;
margin-left:4.4px !important;
box-shadow: 0 0 20px rgba(38,211,103,0.65);
}
ul li.snapchat-1 div.slider-1{
background: rgba(255,250,55,0.65) !Important;
margin-left:4.4px !important;
box-shadow: 0 0 20px rgba(255,250,55,0.65);
}
ul li.pinterest-1 div.slider-1{
background: rgba(201,39,25,0.65) !Important;
margin-left:4.4px !important;
box-shadow: 0 0 20px rgba(201,39,25,0.65);
}
ul li.reddit-1 div.slider-1{
background: rgba(219,75,57,0.65)!Important;
margin-left:4.4px !important;
box-shadow: 0 0 20px rgba(219,75,57,0.65);
}
ul li.rss-1 div.slider-1{
background: rgba(240,161,0,0.65) !Important;
margin-left:4.4px !important;
box-shadow: 0 0 20px rgba(240,161,0,0.65);
}
ul li.google-1 div.slider-1{
background: rgba(219,75,57,0.65) !Important;
margin-left:4.4px !important;
box-shadow: 0 0 20px rgba(219,75,57,0.65);
}
ul li.eyeem-1 div.slider-1{
background: rgba(0,0,0,0.65);
margin-left:4.4px !important;
box-shadow: 0 0 20px rgba(0,0,0,0.65);
}
ul li.github-1 div.slider-1{
background: rgba(102,102,102,0.65) !Important;
margin-left:4.4px !important;
box-shadow: 0 0 20px rgba(102,102,102,0.65);
}
ul li.discord-1 div.slider-1{
background: rgba(114,137,218,0.65) !Important;
margin-left:4.4px !important;
box-shadow: 0 0 20px rgba(114,137,218,0.65);
}
ul li.telegram-1 div.slider-1{
background: rgba(0,137,204,0.65) !Important;
margin-left:4.4px !important;
box-shadow: 0 0 20px rgba(0,137,204,0.65);
}
ul li.qq-1 div.slider-1{
background: rgba(66,152,211,0.65) !Important;
margin-left:4.4px !important;
box-shadow: 0 0 20px rgba(66,152,211,0.65);
}
ul li.bitcoin-1 div.slider-1{
background: rgba(255,153,0,0.65) !Important;
margin-left:4.4px !important;
box-shadow: 0 0 20px rgba(255,153,0,0.65);
}
ul li.codepen-1 div.slider-1{
background: rgba(0,0,0,0.65);
margin-left:4.4px !important;
box-shadow: 0 0 20px rgba(0,0,0,0.65);
}

 

/******* HOVER STYLES *******/
ul li:hover .slider-1 {
width: 185px !important;
transition: all 0.5s ease;
}
ul li:hover .slider-1 p {
opacity: 1;
transition: all 1s 0.2s ease;
}
ul li.facebook-1:hover{
background: #3B5998 !Important;
}
ul li.linkedin-1:hover{
background: #0077B5 !Important;
}
ul li.twitter-1:hover{
background: #0084FF !Important;
}
ul li.instagram-1:hover{
background: #cd486b !Important;
}
ul li.whatsapp-1:hover{
background: #25D366!Important;
}
ul li.snapchat-1:hover{
background: #fffa37 !Important;
}
ul li.pinterest-1:hover{
background: #c92619 !Important;
}
ul li.reddit-1:hover{
background: #db4a39!Important;
}
ul li.rss-1:hover{
background: #f0a100 !Important;
}
ul li.google-1:hover{
background: #db4a39 !Important;
}
ul li.eyeem-1:hover{
background: #000 !Important;
}
ul li.github-1:hover{
background: #666666 !Important;
}
ul li.discord-1:hover{
background: #7289da !Important;
}
ul li.telegram-1:hover{
background: #0088cc !Important;
}
ul li.qq-1:hover{
background: #4297d3 !Important;
}
ul li.bitcoin-1:hover{
background: #ff9900 !Important;
}
ul li.codepen-1:hover{
background: #000 !Important;
}
</style>

 

<body>
<link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.5.0/css/all.css” integrity=”sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU” crossorigin=”anonymous”>

 

<div class=”wrapper-1″>
<ul class=”mylist-1″>
<li class=”facebook-1″>
<a href=”https://www.facebook.com/Sarah.Elizabeth.Bradford”i class=”fab fa-facebook” aria-hidden=”true”></i></a>
<div class=”slider-1″>
<p>facebook</p>
</div>
</li>

<li class=”linkedin-1″>
<a href=”https://www.linkedin.com/in/sarahebradford/”i class=”fab fa-linkedin” aria-hidden=”true”></i></a>
<div class=”slider-1″>
<p>LinkedIn</p>
</div>
</li>

<li class=”twitter-1″>
<a href=”https://twitter.com/wethinkbold”i class=”fab fa-twitter” aria-hidden=”true”></i></a>
<div class=”slider-1″>
<p>twitter</p>
</div>
</li>

<li class=”instagram-1″>
<a href=”https://www.instagram.com/shesadigitalartisan/”i class=”fab fa-instagram” aria-hidden=”true”></i></a>
<div class=”slider-1″>
<p>instagram</p>
</div>
</li>

<li class=”whatsapp-1″>
<a href=””i class=”fab fa-whatsapp” aria-hidden=”true”></i></a>
<div class=”slider-1″>
<p>whatsapp</p>
</div>
</li>

 

<li class=”pinterest-1″>
<a href=””i class=”fab fa-pinterest” aria-hidden=”true”></i></a>
<div class=”slider-1″>
<p>pinterest</p>
</div>
</li>

 

<li class=”rss-1″>
<a href=”https://divipie.com/blog/”i class=”fas fa-rss” aria-hidden=”true”></i></a>
<div class=”slider-1″>
<p>Visit DiviPie!</p>
</div>
</li>

 

<li class=”eyeem-1″>
<a href=”https://www.eyeem.com/u/ihygge”i class=”fas fa-camera” aria-hidden=”true”></i></a>
<div class=”slider-1″>
<p>eyeem</p>
</div>
</li>

</ul>
</div>
</body>

Subscribe

Visit Us at Digital Artisan

Show Some Love

Enjoying DiviPie.com?

Subscribe for our latest Divi Layouts, Modules & More

Thank you, baking a fresh pie just for you.

%d bloggers like this: