Adding Fixed (Sticky) Buttons or Social Icons (Composer 2)

This article explains how to add fixed (sticky) buttons or social icons to the side of your website using Composer 2. These elements remain visible as users scroll and are commonly used for calls to action such as ticket links, contact buttons, or social media icons.

🔍 Live Examples

You can see working examples of sticky panels here:

• Sticky Buttons example:
  https://composer.showoff.asp.events/panels/sticky/sticky-buttons

• Sticky Social Icons example:
  https://composer.showoff.asp.events/panels/sticky/sticky-social

These demonstrate how sticky panels appear on the page and behave as users scroll.

Step 1: Create a Sticky Panel Position

1. Log in to the Back Office.

2. Navigate to Panels.

3. Click Edit Panel Positions.

4. Select Add Panel Position.

5. Enter a name for the panel position (for example, Sticky Buttons).

6. In Position Type, scroll down and select Sticky.

7. Click Save.

You will now be returned to the main Panels page.

Step 2: Add a New Sticky Panel

1. On the Panels page, scroll to find your newly created Sticky panel position.

2. Click Add Panel.

3. Name the panel (for example, Sticky Buttons).

4. Set the Location to the Sticky panel position you created earlier.

5. Open the newly created panel.

Step 3: Choose the Panel Type

Inside the panel editor, select one of the following panel types:

• Buttons

• Social Icons

Select the available style (one default style is provided).

Step 4: Add Content

In the Content tab:

• Enter the Button Text (or icon label if applicable).

• Add the URL the button or icon should link to.

• Configure the button action as required.

You can add multiple buttons or icons within the same sticky panel.

Step 5: Style the Buttons or Icons

Settings Tab

• Set the button position (for example, aligned to the right-hand side)

Content Tab

• Change the font family

• Adjust font size

• Enable bold or uppercase text

• Set the text colour

• Choose a background colour

• Adjust the corner radius of the button

These settings allow you to match the sticky elements to your site’s branding.

Step 6: Save the Panel

Once all content and styling changes are complete, click Save.

Step 7: Restrict the Panel to Specific Pages (Optional)

If you only want the sticky buttons or icons to appear on certain pages:

1. Go to Panel Options.

2. Select Restrictions.

3. Choose This panel will only appear on selected pages.

4. Select the pages you want the sticky panel to appear on (for example, Home).

5. Click Save, then Submit.

Result

Your fixed (sticky) buttons or social icons will now:

• Appear on the side of your site

• Remain visible as users scroll

• Display only on the pages you’ve selected

• Follow the styling and behaviour you configured

Sticky panels are an effective way to surface high-priority actions without disrupting the main page layout.