Creating Hovering Social Icon Buttons with GeneratePress and GenerateBlocks Tutorial

In modern website design, eye-catching social icons boost interaction rates and brand exposure. This article introduces the use of GeneratePress With the GenerateBlocks plugin (free version) create a clean, beautiful, social icon bar that hovers on the left side of the desktop and hides on mobile.

I. Preparatory work

This tutorial is for websites using the GeneratePress theme and the tools required are listed below:

• GenerateBlocks plugin (free version)
• GeneratePress Theme (Block Element recommended for use with GP Premium)

Second, the new element (Block Element)

• log in WordPress In the background, go to "Appearance" → "Elements" → Add New Element.

• Named Sticky Social Icons
• Element type selection Hook

• The hook position is set to after_header
• Display Rule Selection Entire Site

Third, add the container and set the style

• Add a Container block
• Set the width to "Contained Width", the width value is 48px.

• Remove all default inner margins
• Set the z-index to 99 to make it appear at the top of the page

• Add two CSS Class:
  • sticky-social-icons(for subsequent CSS positioning)
  • hide-on-mobile(system built-in class, hidden on mobile)

If you have GenerateBlocks Pro you can click the Enable Hide on moblie button.

IV. Add social icon buttons

• Add a Buttons block to the container
• Insert the button and select the social icon (e.g. Facebook)
• Remove button text and keep only the icon

• Set the inner margins of the four sides to 15px
• Add a 1px bottom border to be used as a separator between icons

• Copy the button and replace it with another icon (e.g. Twitter, LinkedIn)
• Last button removes the bottom border

• Set button containers to be vertically stacked and fill the horizontal space

V. Add custom CSS to achieve positioning

Go to "Appearance → Customize → Add-ons CSS", paste the following style:

.sticky-social-icons {
  position: fixed;
  left: 20px;
  top: 200px;
}

The numeric section can be fine-tuned to the actual page position.

VI. Add shadow effect (optional, requires Pro version)

When using GenerateBlocks Pro, you can add button shadows to enhance three-dimensionality:

• Select the container block and enter the "Effects" settings.

• To enable Box Shadow, adjust the following parameters:
  • Horizontal and vertical offsets
  • ambiguity
  • color depth

• Click Update and refresh the page to preview the effect

VII. Final effect

Implemented a social button bar fixed on the left side of the page, still displayed when the page scrolls, not displayed on mobile, adapting to multiple devices and visual needs.

concluding remarks

utilization GeneratePress With GenerateBlocks, it's possible to create professional-grade hover social buttons even without using complex plugins. To add advanced styles such as hover animations, transparency gradients, and more, you can also extend the CSS Code Implementation.

Recent Updates

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: [email protected]
④ Working hours: Monday to Friday, 9:30-18:30, holidays off