Home / Widgets

Follow Us Widget

Unknown Author

Last updated on Nov 22, 2024

The Follow Us widget is commonly used on websites to encourage visitors to follow the website owner or brand on various social media platforms. It typically consists of a series of clickable icons or buttons that link to the respective social media profiles, making it easy for visitors to connect with the social media accounts of the owner or brand.

Adding a Follow Us Widget

To add a Follow Us widget:

  1. Go to Visual Editor by selecting Advanced mode from the mode switcher on the Dashboard top panel, or navigate to Dashboard > Channels > Advanced.
  2. Navigate to the required page.
  3. Open the Widgets list on the left panel.

  4. Type the widget name in the search bar, or expand the Advanced group to access the Follow Us widget.

  5. Drag and drop the widget onto the Layout Canvas.

After adding the Follow Us widget to your website, it automatically appears with a default design and pre-set buttons for various social platforms. You have the flexibility to style and customize the widget by removing or adding specific social media buttons. You can also style the buttons independently according to your preferences.

Configuring the Follow Us Widget

To design the appearance and behavior of the Follow US widget, activate the Property Panel of the widget by clicking it to access the widget Styles and Settings.

  1. Go to the widget Styles to configure its general styling features (see Global Styles) to achieve the desired visual and functional outcomes.

    • Modify the widget-specific Orientation styling option within the General grouping:
      • Arrange the social media buttons either in a horizontal or vertical order.
      • Choose the widget display (Label Only, Left Icon, Right Icon, Icon Only).
      • Set the gap between the buttons.
      • Activate the toggle to have the buttons displayed with your brand colors.

  2. Go to the widget Settings:
    • Add or remove the social platforms to be displayed on your website, for example, Facebook, YouTube, Twitter, and Instagram.

    • Expand Visibility to modify the widget visibility on your website. Select who can view the widget according to the customer’s location, session status, type of used device, browser, language preference, etc. (see Visibility Settings).

To configure each social media button within the Follow Us widget independently, access the Property Panel of each button comprised of Styles and Content.

  1. Go to the button Styles to configure the general styling features (see Global Styles) to achieve the desired visual and functional outcomes.
    • Customize the button-specific stylistic feature General to set its display (Label Only, Left Icon, Right Icon, and Icon Only).
  2. Go to its Content:
    • Add links to navigate your customers to the required page, for example, external links, or links to Ecommerce products, collections, phone numbers, email addresses, main (e.g. FAQ, Home, About), and system pages, headings, etc., to enable your users to easily find the information they are looking for.
    • Select the icon to be displayed on the website per your design: either from General Icons or My Icons, the latter inheriting the Vectors uploaded in the Media app.
    • Write the label text to be displayed on the website per your design.

Tip:

  • You can access the UI Elements in the Design System. To do so, click the bookmark icon in the upper-right corner of the Property Panel. Select one as a base for the widget, or click the plus icon to create a new UI Element and style it according to your preferences.
  • Once you have customized each mode, you can use the Dotted Menu to reset or override the widget styles. To do so:
  1. Click the Dotted Menu in the right corner of the Property Panel.
  2. Select Reset Styles to discard the changes made to the widget and restore its default style.
  3. Select Override Styles to update the default style of the base element (font, size, alignment, etc.) and the elements derived from the base one.

 

💡 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.