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 FIBONATIX as a Payment Provider

Connecting izipay as a Payment Provider

Connecting FasterPay as a Payment Provider

Connecting Kashier Payment Solutions as a Payment Provider

Disabling 2Checkout's Unfinished Payments Feature to Avoid Failed Transactions

Requiring a Customer Phone Number When Checking Out with PayPal

Disabling PayPal Encryption Messages

Connecting Smartphone Payment as a Payment Method (through KOMOJU)

Connecting Bankful as a Payment Provider for Cryptocurrency, Wallet and Credit Card Payments

Connecting Paymentwall as a Payment Provider

Connecting ACH by Choice as a Payment Provider

Connecting Vipps as a Payment Provider

Connecting Mollie as a Payment Provider

Connecting MONEI as a Payment Provider

Connecting payabl. as a Payment Provider

Connecting PayPlus as a Payment Provider

Connecting Tilopay as a Payment Provider

Connecting SumUp as a Payment Provider

Connecting YooKassa (YooMoney) as a Payment Provider

Connecting Square as a Payment Provider

Connecting Stripe as a Payment Provider

Connecting Online Bank Transfer by Klarna as a Payment Method (Through Stripe)

Connecting PayPal as a Payment Provider

Connecting Pay-Easy or Convenience Stores as a Payment Method (Through GMO)

Connecting PagueloFacil as a Payment Provider

Connecting PagSeguro as a Payment Provider

Connecting Mercado Pago as a Payment Provider

Connecting Max as a Payment Provider

Connecting bit (Provided by Isracard powered by PayMe) as a Payment Method

Connecting Evergreen Payments Northwest as a Payment Provider

wix experts
Graphic2Traffic web design
©
bottom of page