top of page

Customizing Wix Bookings pages

Wix Bookings: Customizing Your Staff Members Widget

After adding a staff members widget to showcase your staff, customize it to suit your brand and business. You can personalize the design by changing the background of the list, its fonts, colors and more.

In this article, learn more about:

Tip:

The staff members widget has repeating elements that you edit once but the changes affect all similar elements. For example, if you change the color of the staff member's name, all staff names show in the same color.

Changing the background of your staff members widget

You can change the background of the staff members widget, as well as the background behind the cards that show your staff members. You can choose either a background color or background image for both elements.

To change the background on your staff members widget:

  1. Go to your editor.

  2. Go to the page where you have the staff members widget.

  3. Click the staff members widget.

  4. Click the Background icon .

  5. Choose a color or an image for the background of the staff members widget.

A screenshot showing how to change background of staff member widget

To change the background behind each staff member:

  1. Go to your editor.

  2. Go to the page where you have the staff members widget.

  3. Click the staff members widget.

  4. Click any container that show a staff member.

  5. Click Change Background.

  6. Choose a color or an image for the background behind each staff member.

A screenshot showing how to change background of a staff widget.

Customizing the design of your staff members widget

You can customize the design of your staff members widget so it fits with the overall style of your site. You can add a border, round the corners and add a shadow to make the widget stand out.

To customize the design of your staff members widget:

  1. Go to your editor.

  2. Go to the page where you have the staff members widget.

  3. Click the staff members widget.

  4. Click the Design icon.

  5. Choose what you want to customize:Border: Use the sliders to adjust the opacity and color or the width of the border.
    Corners: Set the radius for the corners of your staff members widget to make them rounded.
    Shadow: Enable the Apply Shadow toggle and add a shadow to your staff members widget.

A screenshot showing how to edit the corners of a staff widget.

Customizing text fonts and colors

You can change fonts and customize the design of any of the text that appears in the staff members widget. Make sure the text font and color is clear and easy to read over the background you choose.

To customize text:

  1. Go to your editor.

  2. Go to the page where you have the staff members widget.

  3. Click the staff members widget.

  4. Depending on the text you want to customize, follow the steps:
    Customize the button text:Click the button on staff members widget, for example: 'Book Now'.
    Click the Design icon .

    Choose one of the following options:Choose an existing design.
    Click Customize Design and customize the text using the available options.

    Customize other text:Click the text you want to edit.
    Click Design Text.
    Customize the text using the available formatting options.

A screenshot showing how to edit the text layout on a staff widget.

Customizing staff images on your staff members widget

Customize the staff images to suit your site design and brand. You can choose from different themed frames, or fully customize the frame design, including adding a border or shadow.

To customize the staff images:

  1. Go to your editor.

  2. Go to the page where you have the staff members widget.

  3. Click the staff members widget.

  4. Click any staff member image.

  5. Click the Design icon.

  6. Choose what you want to do:Select one of the designed images suggestions.

    Click Customize Design to design the image further:Image frame: Select a different frame for your staff member images.
    Border: Use the sliders to adjust the opacity and color or the width of the border.
    Shadow: Enable the Apply Shadow toggle to add a shadow to the Staff Card images.

A screenshot showing how to customize the staff image frame.

Need A Professional Website?
Contact Us 
Today!

Connecting Authorize.net Powered by Bankful as a Payment Provider

Connecting Klarna as a Payment Provider

Connecting SeerBit as a Payment Provider

Connecting Webpay Plus-Transbank as a Payment Provider

Connecting Atome as a Payment Provider

Connecting Affirm as a Payment Provider

Connecting Pay TR as a Payment Provider

Connecting Sezzle as a Payment Provider

Connecting CXPay as a Payment Provider

Connecting Afterpay as a Payment Provider

Connecting Rapyd Payments as a Payment Provider

Connecting Clearpay as a Payment Provider

Connecting Yoco as a Payment Provider

Connecting Titre Restaurants Conecs as a Payment Method (Through Lyra)

Connecting Multibanco as a Payment Method (Through Lyra Collect)

Connecting Fondy as a Payment Provider

Connecting Xendit as a Payment Provider

Connecting Razorpay as a Payment Provider

Connecting Laybuy as a Payment Provider

Connecting Lyra Collect as a Payment Provider

Connecting UAPay as a Payment Provider

Connecting Paysafecash as a Payment Method (through Skrill)

Connecting Rapid Transfer as a Payment Method (through Skrill)

Connecting Przelewy24 as a Payment Method (through Skrill)

Connecting Skrill Digital Wallet as a Payment Method

Connecting Skrill as a Payment Provider for Credit/Debit Card Transactions

Connecting Mobile Payment as a Payment Method (Through KOMOJU)

Connecting Pay-Easy as a Payment Method (Through KOMOJU)

Connecting WeChat Pay as a Payment Method (Through Oceanpayment)

Connecting AliPay as a Payment Method (Through Oceanpayment)

wix experts
Graphic2Traffic web design
©
bottom of page