Wix Editor: Customizing a Quick Action Bar

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.

---

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.

---

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 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.

---

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):

Horizontal design options

• 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 design options

• 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.

This article is credited to the Wix team - https://support.wix.com/ and we thank them for that!