Home / Designing UI Elements

Follow Us

Unknown Author

Last updated on Sep 10, 2024

The Follow Us UI element is a set of icons or buttons representing various social media platforms or websites, allowing the users to connect with the social media accounts of the owner or brand.

To configure Follow Us:

  1. Go to Styles to modify the element styling features:
  • Select the current condition of the element from the State dropdown:
    • Normal: The default state of the element when it is not being interacted with.
    • Hover: The state of the element when the user hovers over it with the mouse cursor.
  • Expand General:
    • Select how Follow Us is displayed: Horizontal or Vertical.
    • Select how Follow Us is displayed from the Type dropdown: only the label, label with left or right icon, or only the icon.
    • Indicate the gap between the social media platform options.
    • Activate/deactivate Brand Colors to have the buttons displayed with your brand colors (i.e., blue for Facebook, red for YouTube, etc.)
  • Make the necessary configuration of principal styling features (see Global Styles).

2. Go to Settings to make the necessary configuration of content:

  • Click + Add Social Platform to add the social platform, for example, Facebook, YouTube, Instagram, etc.
  • Click the corresponding social platform name and drag the tab to the desired position.

Tip: To remove the social media platform click the Remove icon on the right-side of the tab.

3. Click the element Label to modify the styling features and text inside the UI element (see Global Styles).

The label provides a brief description or name of the checkbox option.

Tip: To configure each social media element within Follow Us independently, go to the Property Panel of each element where you can customize its Styles and Content according to your preferences.

To modify a social media element:

  1. Go to Styles to modify the element styling features:
  • Select the current condition of the element from the State dropdown.
  • Select how it behaves based on certain conditions or user interactions from the Mode dropdown.
  • Expand General to set how it is displayed (only label, only icon, label with left or right icon).

2. Go to Content to make the necessary configuration of the element content.

  • Expand Link and click + Add Link to add items to be displayed on your website and make them clickable for easy access. The items can be external links, products, phone numbers, email addresses, main pages (e.g. FAQ, Home, About), system pages, etc. This enables your customers to easily find the information they are looking for.
  • Click Change Icon, select the icon style you prefer, and tick the icon in the icon list that opens.
  • Indicate the name of the social media element in Label Text.

 

💡 If you have questions or concerns, contact us directly via the Live Chat box in the lower right corner. Our Support Team will provide you with top-notch quality support 24/7.