Wix Editor: Customizing a Quick Action Bar

4 min read
Change the look of your quick action bar to complement your mobile site. You can select whether to display text, choose a layout, and change the design to create a sleek, interactive experience for your visitors.
A quick action bar on a preview of a Wix mobile site, displaying actions for Email, Phone, and Instagram.
In this article, learn more about:

Changing the settings of your quick action bar

Choose whether you want to display text on the bar's actions ('Email', 'Facebook', etc.). Enabling text ensures each action is clear for your users, and can improve your mobile site's accessibility.

To change the settings:

  1. Select the quick action bar in your mobile Editor.
  2. Click the Settings icon .
  3. Choose a display option:
    • No: The actions display icons only.
    • Yes: The actions display icons with text labels.
The QAB settings panel. The cursor is hovering over the option to display text.

Choosing a new quick action bar design

Choose a horizontal or vertical bar design to suit your site's layout and structure. If you select a vertical design, you can also set its alignment on the page.

To choose a design for the bar:

  1. Select the quick action bar in your mobile Editor.
  2. Click the Design icon .
  3. Select a a horizontal or vertical design from the panel.
    1. (Vertical designs only) Exit the panel.
    2. Select the Layout icon .
    3. Choose whether to display the bar on the left or right of the screen.
The QAB Design panel. The cursor is hovering over a vertical preset.

Customizing the design of a quick action bar

Customize your quick action bar to personalize it to your liking. You can set the color scheme, customize the border, and add a shadow to make the bar look how you want.
Good to know:
If you've chosen a vertical design, you can customize both the closed and open view of the bar. 

To design your quick action bar:

  1. Select the quick action bar in your mobile Editor.
  2. Click the Design icon .
  3. Click Customize Design.
  4. Choose what you want to do depending on the bar's layout (horizontal or vertical):
The Customize Design panel of the QAB. The cursor is hovering over the option to invert the color scheme.

Did this help?

|