- Very excited to show y'all today how to build out
these custom social media buttons,
so that it's more than just a simple icon.
You want something that's gonna be nice and large
that folks know where to go, what to click on.
I'll show you how to build it out,
not only inside of the Block Editor,
where they can look like this,
but also inside of the Divi builder
that look more like this.
Hey y'all, my name is Kori Ashton
and welcome to another WordPress Wednesday.
If you like tutorials just like this,
please be sure to click like and subscribe.
Come back here every single Wednesday
where I'm creating more content to help you improve
your online marketing inside the world of WordPress.
All right, let's get to the tutorial.
Okay, we're gonna start with the Block Editor version.
So, we'll go in here,
and you'll just wanna add the social media.
You can do a search for social icons,
those social media icon block.
That's what we're adding.
And this is the default settings inside of WordPress.
So, you'll go ahead and click the plus sign
and we'll wanna add Facebook, and put the link in there.
And then we'll wanna add maybe Instagram,
and we'll put the link in there.
And keep adding just a few more.
All right, now that you've got your icons in there
and these are the ones you want,
you've added in the link to them,
we want to change the style of them.
So, you'll wanna click on the actual icon for the block
and that'll open up this right panel over here.
This is the default style.
You could say logos only.
You notice there, they've got kind of a circular background,
or you can just do the icons only.
WordPress says logos only.
You can do pill-shape style.
And then, you'll go right down here
and you can say, show labels.
Opening that up gives us that look that we're going for.
These are starting to look like what we want,
but the example I showed you has these kind
of squared-off corners instead of the rounder radius.
So, we wanna make one little change to the style on these
and that requires a little bit of CSS.
Don't worry though, you can copy
and paste what I'm about to show you.
Let's go into our dashboard area.
We're gonna go to appearance and go into customize.
We'll go into additional CSS.
Now, you might have other code here already
or maybe it's completely empty,
but this is the code you're looking to add.
Basically, what you're removing is
that pill-shape style to bring them back out
into that rectangle shape.
So we want to say border radius zero.
And in order to be certain
that it overwrites what's on your theme,
we wanna add in that !important.
I'll put this exact code in the tutorial
so you can just copy and paste it in.
Once you drop that in here,
you'll want to click publish so that the change is live.
And then when you go back to the front side of your website
and you click refresh, you should see them change
from pill shape to this rectangular shape.
That's how to do it inside of the Block Editor.
Let's go take a look at how to do it inside of Divi.
Inside of Divi,
we're just gonna go ahead and add
in the layout that we want with the row,
and to be comparable to the style that I'm doing here,
I'm going to keep it on this right column.
We'll wanna go ahead and add the button.
This is the default-button module that you can add in there.
And just go ahead and say Facebook.
You can add in your link if you'd like.
I'm gonna move this just a little bit so you can see it
while it's happening.
We wanna change the style of it,
so let's go into design mode.
Let's go to button and we're going to say, yes,
let's use some custom style for this button.
We'll go ahead and keep the text color white,
but we wanna change that background color.
So, let's add that background color and go ahead
and go into something more along the lines
of our Facebook Blue.
Of course, you can go get the exact color
if you wanted to and drop that in there.
That'll work for now.
And then, we wanna go further down here
and we want to say yes to show the button icon.
And we're gonna do a search for Facebook.
They've got a couple of different options here.
For my style, I'll go ahead and just use this one.
It's not even showing up yet though, until you hover.
Well, we wanna change that setting,
and we're gonna scroll down here and we're going
to check that off, right?
'Cause it says only show it when you hover.
We're gonna say no, so it shows it all the time.
And instead of placing that right icon,
we're gonna place it on the left side.
So change that setting to left side.
And now, we've got the style
that you're looking for right there.
You can duplicate that a couple
of times and go in and change the text,
Instagram,
right?
And then, you can go into the design mode,
and we're going to change the color of the button.
And then, you can go down and change the icon, Instagram.
There you go.
And you're seeing them come to life there.
Isn't that cool?
And if you wanted to do the exact style I did here
where it's kind of this edge-to-edge look,
a couple of things you'll wanna change.
First of all, you'll go back into the button
and on that button, I have the text in all caps.
So, we're gonna change that to just be all caps right there.
And then, in order to get that full width where
it's going all the way across that whole column,
you'll wanna go into advanced,
and we're gonna write again,
just a little bit of CSS.
Let's go to this main element block
and we're gonna say minimum,
so M I N, width,
colon,
100%,
semicolon.
There you go.
And it'll extend it out beautifully
right there in that space.
Just to show you what that looks like, let's go
into our row setting here and into that right column,
let's put a little background color on it
so you can start to see it.
Now, if you wanna have a little bit
of padding around it,
'cause you see that these extend but not the full edge,
you can go right here into that button,
go back into design and go into spacing this time.
And on this margin area,
we'll wanna put a little bit of margin in that space there.
There you go.
20 pixel by 20 pixel.
Give it that nice little space, right?
There you go.
If you needed a little bit of space at the top,
you can of course add that in there as well.
That'll give you that little bit
of space all the way around that button,
but still have it extend that full width.
Of course, you'd wanna do that down the row here
so you might even want to just go back,
replicate those styles right there,
and then just change these back out to how you want them.
Instagram,
spelled correctly, of course.
Design.
Into that button.
Let's change that background color of it
and let's change that icon.
(soft music)
Nice.
See how easy that is.
If you don't want the border on it,
of course, you can remove the border.
Style those any which way you want.
Looks pretty cool, though.
On this one, I'm gonna put a little bit
of spacing on that bottom as well.
Nice.
There you go.
I hope that was helpful for you.
I have over 500 videos
on this YouTube channel where you can find anything
about social media marketing, search engine optimization,
tips on being a WordPress freelancer,
and of course,
how to improve your WordPress website.
Please be sure to click like and subscribe.
Come back here with me every single week.
I'll see you next time.
Bye, y'all.
(soft music fades)
(upbeat music)
(bell chimes)