A floating call to action bar pinned to the bottom of the screen on mobile is a simple but effective conversion tool — especially for service businesses where visitors need to reach you quickly. Here’s how to build one using a GeneratePress element and GenerateBlocks.
Create a New Block Element
Go to Appearance > Elements, add a new element, and select Block. Name it something like “Mobile Call to Action.”
Inside the element, insert a container. Switch to the mobile viewport in the editor — since this bar only appears on mobile, there’s no reason to build it at desktop width.
Design the Bar
With the mobile viewport active, select the container and apply a background color. Add padding — around half a rem on the top and bottom and one rem on the left and right keeps it slim but visible.
Add a text block with your phone number and set the text color to white. To add a phone icon, switch back to desktop view and open the icon tab on the text block. Select the phone icon from the GenerateBlocks icon library and set the icon color to contrast with the background.
Adding an icon automatically sets the text block to inline flex. To center everything, go to the container, set display to flex, choose a column flex layout, and center align the content. Zero out the bottom margin on the text block to remove the default spacing.
Under Effects, add a subtle box shadow to give the bar the appearance of floating above the page. Use zero on the X offset, a negative Y offset, about 12px of blur, and zero spread. Set the shadow color to dark and bring the opacity down to around 30%.
Bold the call to action text before moving on.
Hide It on Desktop and Tablet
Select the container, open the media rules panel, and choose the desktop and tablet option. Set display to none. This ensures the bar only appears on mobile. Switch back to the mobile viewport to confirm it is still visible there.
Fix It to the Bottom of the Screen
With the container selected, go to Position and change it to Fixed. Set the bottom inset to zero so it sticks to the bottom of the viewport. Go to the Sizing panel and set the width to 100% so it spans the full width of the screen.
Set the Z-index to 100 under the Position panel. Without this, page content will scroll over the top of the bar.
Configure the Element Settings
Set the element type to Hook and choose After Header as the hook name. Set the location to Entire Site.
Consider excluding pages where the phone number is already prominent — like a contact page — to avoid duplicating the call to action. Publish the element when ready.
Use Cases
A mobile action bar works for more than just click-to-call. Use it to promote a special offer, highlight a new service, or link visitors to a contact page. The format is flexible and the bar stays out of the way on desktop where more space and options are available.
