Wix Editor: Customizing a Quick Action Bar
3 min read
Change the look of your QAB 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.
In this article, learn more about:
Changing the settings of your Quick action bar
Use the settings to choose whether you want to show text on your bar's actions.
To change the settings:
- Select the QAB in your mobile Editor.
- Click the Settings icon .
- Choose a display option:
- No: The actions display icons only.
- Yes: The actions display icons with text labels.
Did you know?
Displaying text labels improves your mobile site's accessibility.
Choosing a new QAB 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:
- Select the bar in your mobile Editor.
- Click the Design icon
. - Select an option from the panel.
- (For vertical designs only) Select the Layout icon
.
- Choose whether to display the bar on the left or right of the screen.
Customizing the design of a Quick action bar
Customize your QAB 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 preset design, you can customize both the closed and open view of the bar.
To design your QAB:
- Select the bar in your mobile Editor.
- Click the Design icon .
- Click Customize Design.
- Choose what you want to do depending on your bar layout (horizontal or vertical)
- Horizontal:
- Color scheme: Select a color scheme for your bar.
- Invert color scheme: Click the toggle to reverse the colors.
- Border: Choose the color and opacity of the border, and use the slider to increase or decrease the border width.
- Shadow: Enable a shadow and adjust the angle, size and more for a 3D effect.
- Vertical: Click the tabs in the panel to choose which view you want to customize:
- Closed:
- Background: Click the color box to select a background color, and drag the slider to increase or decrease the opacity.
- Color: Click the color box to select the icon color.
- Open:
- Color scheme: Select a color scheme for your bar.
- Invert color scheme: Click the toggle to reverse the colors.
- Both views:
- Border: Choose the color and opacity of the border, and use the slider to increase or decrease the border width.
- Shadow: Enable a shadow and adjust the angle, size and more for a 3D effect.
- Closed:
- Horizontal:
