The Social Element is designed to seamlessly integrate social media links into your designs. It enables users to connect with their favorite platforms directly. This element is versatile, visually appealing, and fully customizable to fit your style.
How to Use Social Elements
Follow these steps to add and customize your Social Element:
- Drag and drop the Social Element into the canvas.
- Click on the element to configure the social platforms.
- Adjust the design and layout using the customization options provided.
Customization Options
The Social Element offers a variety of features to personalize the appearance and functionality:
Social Platforms
- Add New Platform: Select from a list of popular platforms like Facebook, Instagram, Twitter, LinkedIn, and Discord.
- Enter URL: Provide the URL for each platform to direct users to the desired social profile or page.
- Inline View: Enable or disable inline arrangement for social icons.
General Settings
- Icon Size: Adjust the size of the social icons to fit your design.
- Space Between: Control the spacing between each icon for better alignment.
- Enable Label: Add text labels (e.g., “Facebook,” “Instagram”) beside the icons for clarity.
- Alignment: Choose the alignment of labels relative to the icons (e.g., Bottom, Right).
- Space Between Icon & Text: Fine-tune the distance between the icon and its label.
Style Customization
Enable Background: Toggle a background for each icon to make it stand out.
- Adjust Width and Height of the background.
- Add a Border with customizable thickness and style (e.g., Solid, Dotted, Dashed).
- Set a Border Radius for rounded or sharp edges.
Box Shadow Settings:
- Adjust Horizontal and Vertical shadow offsets.
- Customize Blur and Spread for shadow intensity.
- Choose a shadow Fill Color and control its Opacity.
Color Customization
- Normal State: Set default colors for:
- Icon
- Label
- Background
- Border
Troubleshooting
- Icons Not Displaying Correctly: Ensure the selected social platform and URL are properly configured.
- Spacing or Alignment Issues: Adjust spacing and alignment settings in the Style section.
- Hover Effects Not Working: Verify that hover colors and states are correctly defined.
