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-buttonsSticky 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
Log in to the Back Office.
Navigate to Panels.
Click Edit Panel Positions.
Select Add Panel Position.
Enter a name for the panel position (for example, Sticky Buttons).
In Position Type, scroll down and select Sticky.
Click Save.
You will now be returned to the main Panels page.
Step 2: Add a New Sticky Panel
On the Panels page, scroll to find your newly created Sticky panel position.
Click Add Panel.
Name the panel (for example, Sticky Buttons).
Set the Location to the Sticky panel position you created earlier.
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:
Go to Panel Options.
Select Restrictions.
Choose This panel will only appear on selected pages.
Select the pages you want the sticky panel to appear on (for example, Home).
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.
Comments
0 comments
Please sign in to leave a comment.