Creating custom social media buttons on a WordPress site can greatly enhance user experience. Large and clear icons are essential, ensuring visitors know exactly where to click. I’ll guide you through crafting these buttons using both the WordPress block editor and the Divi Builder.
Each tool offers its own style, giving you options for how your buttons can appear.
In the block editor, it’s straightforward to start by adding social media icons and links. Customising the style involves some minor changes in settings and adding a bit of CSS.
For the Divi Builder, adding modules with custom styles is also easy. By tweaking settings, you can match your design preferences. I’m here to help you navigate these processes confidently.
Key Takeaways
- Learn to create custom social media buttons.
- Customise buttons in WordPress block editor and Divi Builder.
- Enhance button styles with simple adjustments.
How to Create Custom Social Media Buttons
My excitement is high today because I’m showing you how to build custom social media buttons. These are designed to be large and easily noticed by your visitors. They can be created both in the block editor and the Divi Builder. Let’s dive into the process.
In the block editor, start by searching for social icons to add. Click the plus sign to add icons such as Facebook and Instagram, linking them accordingly.
After adding your desired icons, change their style by clicking the icon itself. You’ll see options for different looks, including logos-only and pill shapes.
For a squared-off look, apply a small CSS tweak. Head to your dashboard, navigate to Appearance, then to Customize, and finally to Additional CSS. You might find some code there already, or it could be empty. Add border-radius: 0 !important;. This simple line changes the icons’ shape from rounded to rectangular.
Publish your changes, refresh your site, and admire the newly styled icons.
In the Divi Builder, you’ll be adding a button module. After setting up your layout, add a button labelled with, say, Facebook. Enter your link, then switch to design mode to customise the button.
Keep the text colour white and change the background to a suitable Facebook blue. You can show icons as well, opting not to display them only on hover.
Set the icon position to the left for a balanced look. For consistent styling, duplicate the button for additional social platforms like Instagram. Adjust colours and icons as needed.
For a sleek edge-to-edge appearance, ensure text is in all caps. Use min-width: 100%; in the advanced CSS settings to extend the buttons fully across the column.
Add background colour and adjust spacing for visual appeal. Apply these styles across your other buttons for a cohesive look. Remove borders if desired, and tweak spacing for perfection.
Making Social Media Buttons in the Block Editor
Adding Icons for Social Platforms
To start, search for ‘social icons’ within the block editor. Select the social media icon block to begin adding your icons.
Click the plus sign and add platforms like Facebook or Instagram, making sure to insert the correct links. Continue this process until all desired icons are present.
Modifying Original Design
Once your icons are in place, it’s time to adjust their appearance. Click on an icon to open the right panel. Here, you can choose between displaying only the logos or just the icons.
Experiment with styles like circular backgrounds or pill shapes. For a label to appear alongside the icons, select the ‘show labels’ option. This provides a more customised look.
Using CSS for Design Changes
If you want the icons to have squared corners rather than rounded edges, this involves a minor CSS tweak. First, navigate to the ‘Appearance’ section in your dashboard, then select ‘Customise’, and go to ‘Additional CSS’.
You can add a line of CSS code: border-radius: 0 !important;. This ensures the icons appear rectangular. After entering the code, click ‘Publish’ to make the changes live on your site.
Creating Buttons in Divi Builder
Adding the Button Element
To start, you need to introduce the button feature into your layout. In the Divi Builder, select the button option and enter “Facebook” or any other platform you are targeting. Don’t forget to add the necessary link to your button, allowing users to navigate to the intended page.
Designing the Button
Next, access the design settings to introduce a customised look to your button. Opt for a unique appearance by enabling the custom style setting.
Stick with white text and choose a background colour that resonates with your brand, like Facebook blue, for example. Use a colour picker tool to find the exact shade if needed.
Tailoring Icon Display and Position
After that, opt to display a button icon and perform a quick search for the suitable icon, such as the Facebook symbol. By default, the icon might only appear when hovered over, so change the setting to make it constantly visible.
Additionally, adjust the icon’s placement from the right to the left side to align with your design preferences.
Modifying Button Width Using CSS
If you’d like your button to stretch across the entire column, navigate to the advanced settings, and input some custom CSS. Set the min-width to 100% to ensure the button fits the required space.
Transforming Button Text to Uppercase
For a more cohesive look, convert the button text to uppercase. This can be easily done by revisiting the button settings and selecting the text style option to all caps.
Introducing Edge and Top Margin Spacing
Finally, introduce some spacing for a clean presentation. Within the design section, navigate to the spacing settings and apply a consistent margin around the button.
Consider a margin size like 20 pixels on all sides for a balanced appearance. Also, add a bit of top margin if required to ensure the button doesn’t stick too closely to other elements.
Invitation to Subscribe and Participate
I’m thrilled to share content that helps you improve your online marketing with WordPress. If you enjoy these tutorials, don’t forget to like and subscribe.
Joining me every Wednesday means you’ll have access to fresh content weekly. Here’s what you can do:
- Subscribe to stay updated with new videos.
- Engage by commenting your thoughts or questions.
- Share with friends who might find these tutorials helpful.
Your support helps me create even more valuable resources.