In this guide, we’ll show you how to add the “Shape Social Icons widget” to your Elementor website. The Shape Social Icons widget allows you to display your social media icons in eye-catching geometric shapes using a CSS mask for a modern, stylish effect. Perfect for creating visually engaging social buttons, this widget lets you customize icon shapes, sizes, and colors to match your website’s design and maintain a clean, contemporary look.
Let’s explore the customization options available in the “Shape Social Icons widget” for Elementor below.
Add a Shape Social Icons to Elementor
This widget requires Unlimited Elements Pro version installed and activated on your WordPress website.
Go to Unlimited Elements and click "Widgets".
Search for "Shape Social Icons" in the widget library.
Hover over the widget and click Install.
Add a Shape Social Icons Widget to an Elementor Page
Click "Add Element" in Elementor
Search for "Shape Social Icons" in the widget panel.
Drag and drop the “Shape Social Icons” into the container.
Elementor Shape Social Icons Widget General Settings
Shape
Choose the geometric shape of the social icons:
Triangle
Trapezoid
Parallelogram
Rhombus
Pentagon
Hexagon
Heptagon
Octagon
Nonagon
Decagon
Bevel
Rabbet
Left Arrow
Right Arrow
Left Point
Right Point
Left Chevron
Right Chevron
Triangle Upside Down
Align
Control the horizontal alignment of the social icons within their container.
Center
Left
Right
Title
Set the display name for this social icon.
Link
Enter the URL for the Facebook page. Includes link settings and dynamic data options.
Icon
Select the visual icon to represent.
Override Background Color
Toggle to enable a custom background color for this icon, overriding the global settings.
Add Item
Add additional social media icons to the widget.
Elementor Shape Social Icons Widget Style Settings
Icon Padding
Adjust the space inside the icon container, between the icon and its border or shape.
Icon Margin
Set the space outside the icon container to separate it from other elements.
Icon Outer Size
Control the overall size of the icon’s background shape.
Inner Icon Size
Adjust the size of the social media symbol within its shape.
Icon Background Color
Set the default background color of the icon’s shape.
Icon Background Color Hover
Define the background color of the icon’s shape when hovered.
Inner Icon Color
Set the default color of the social media symbol.
Inner Icon Color Hover
Set the color of the social media symbol when hovered.
Shape Social Icons Design Examples For Elementor
Here are some live use cases for the Shape Social Icons widget.
Icon Bullets with Shape Social Icons widget.
Post Magazine Grid with Shape Social Icons widget.
Thank you for using the Shape Social Icons widget for Elementor! This Pro widget lets you display your social media icons in eye-catching geometric shapes using CSS masks, perfect for adding a modern, stylish touch to your site. With customizable shapes, sizes, and colors, it’s a great way to create clean, visually engaging social buttons that match your design. Need help? Contact us or check out our demo for inspiration.
