Docs

[Brock B]

I am looking to add 2 social buttons at the very bottom of my page under the FOLLOW US text. As you can see, I have a facebook button there, but I want to also add Vimeo. The catch is that I want it to look like the way the website below has it (it’s in the exact same location as ours).

https://guybauerproductions.com

Theirs doesn’t have the lines around it and it doesn’t say “Share this post” above it. Any suggestions on how to do that?

[Joao]

Hi There,

Please remove the social sharing shortcode.

Please add a text widget and paste the following code and adjust the urls:

<p style="color: white;"> Follow us on:</p>
<a href="http://www.facebook.com"><i class="x-icon x-icon-facebook-square fb-bottom" data-x-icon="" aria-hidden="true"></i></a><a href="http://www.facebook.com"><i class="x-icon x-icon-vimeo-square vimeo-bottom" data-x-icon="" aria-hidden="true"></i></a>

And add the following code to Appereance Customizer Custom CSS

i.fb-bottom {
color: #495678;
margin-right: 5px;
}

i.fb-vimeo {
color: #00dbff;
}

Hope it helps

[Brock B]

Great! Thanks!

Only thing I’d like to change now is for the font for “FOLLOW US” to be the same size as “ABOUT” and “CONTACT” which are to the left and right of it. It just needs changed slightly, but I can’t see how to change that in the code.

Also, I’d like to make the social buttons a bit larger as well.

Any suggestions on that?

[Friech]

Hi There,

The FOLLOW US has the same size as the ABOUT and CONTACT, the only difference is the later was type as all capital.

We can apply a CSS to Follow us to make it all capital, or you can re-type it as all capital just like the ABOUT and CONTACT.

To make the icons larger, please add this on your custom CSS.

.home #x-section-5 .x-icon {
	font-size: 1.75em;
}

Feel free to adjust the 1.75em value.

Thanks.

[Brock B]

Excellent! Thanks!

[Rad]

You’re welcome!

[Author]

Posts