Ready to make some larger social media buttons in #WordPress? Show off your social networks with these larger rectangle-shaped social media buttons. Kori will show you how to make them using the Block Editor in WordPress as well as how to build them in the Divi Theme.
Full video transcript:
– 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 the 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. 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.
