Use basic widgets to build your site's foundation. These tools allow you to add essential elements like text, buttons, and navigation aids to help visitors find information and take action.

Text / Title

Use the Text or Title widget to create headlines, share information and tell visitors about your site. There are three text widgets available: Text, Large title (H1), and Small title (H3).

Click the widget to open the inline bar to style text as follows:

  • Use the AI Assistant to generate or edit content.
  • Apply a font family and font styles, such as bold, italics, or underline to your text.
  • Add or change hyperlinks.
  • Create numbered or bulleted lists.
  • Connect data.

Alternatively, assign special styles in the site theme to manage your design globally.

Back to the top

Button

Drive visitor action by adding buttons. Links can lead to pages, store items, popups, anchors, or downloadable files.

Content editor Design editor

Click the widget and select the Content tab to make the following actions:

  • Under "Text on button", enter the relevant text for the button.
  • Select the link destination.
  • Use the "Links audit tool" to ensure your button links to the expected location.

Back to the top

Spacer

Use the Spacer widget to create a professional, organized layout and improve readability by adding vertical blank space between widgets. 

Click the widget to change the height of the widget.

Back to the top

File

Provide flyers, ebooks, or documents for download. Site visitors can share your download links through other sources, such as email and social media.

Before you begin

  • You can't upload files to your root folder.
  • Uploaded files are public. Only upload files you own or have permission to use. Don't share confidential data.
  • Supported formats include .pdf, .xls, .xlsx, .doc, .docx, .zip, .ppt, .pptx, .psd, .txt, .xml, .mp3, .ttf, .otf, .woff, .eot, .svg, .odt, .ott, .js, .css, .png, .jpg, .gif, .jpeg, .rar
  • You can add up to 15k of files per site. File size limit is 200MB.
  • Spaces within file names aren't supported.

Content editor Design editor

  1. Click the widget, and select the Content tab.
  2. Under "Text on button", enter the button text in the field provided.
  3. Click + File to add a file.
  4. To add new files, click + Upload Files

    Drag your files or click Choose files to add files or folders. Files can also be downloaded from Dropbox, Google Drive, a link, or Gmail. You can add multiple files to upload simultaneously.

  5. Select the relevant files and click Upload. You'll be notified when the upload is complete.
  6. Select the relevant file.
  7. Optional: Check the Set file to no index box to prevent search engines from displaying the file in search results.
  8. Click Done.

Back to the top

List

Organize information using pre-formatted list layouts. 

For more complex lists consider using the Restaurant menu widget.

Content editor Design editor

  1. Click the widget and select the Content tab.
  2. Choose to include an Image element and Link element associated with each item on your list.
  3. Click Build your list to add content.
  4. Click a list item to open the "List settings". You have the following options:
    1. Click + Image.  to add an image.
    2. Under "Item label", enter the required label text. To hide the label, click .
    3. Under "Description", enter the required description text. To hide the description, click .
    4. Click Add link to select the type of link you want to add to the item.
    5. Under "Text on link", enter the required link text. To hide the description, click
  5. Click + Add Item to add additional items to the list.
  6. Under "Main list title" enter the list title in the field provided.
  7. Clickand drag an item to reorder it.

Back to the top

Column

Use the Column widget to organize and arrange content within a row.

Important:

Create a backup of your site before editing columns to ensure you can restore a previous version if needed.

Content editor Design editor

  1. Right-click the widget to open the column editor menu. 
    1. If the column has no padding, right-click the widget inside the column
    2. Click Select container.
    3. Select Column.
    4. Verify the menu header displays "Column".
  2. Edit each column individually as follows:
    • Position

      To change the column's position, click the arrows to the right or left.

      The arrows are disabled if the row contains only one column.

    • Add

      Click + Add and select one of the following:

      • Column. Add a new column to the current row. A max of 4 columns can be added per row.
      • Inner row. Add a row within the current column.
      • Widget below. Add a new widget directly under the current one. You can choose from the following: Text, Image, Button, Icon, or select More widgets to open the full widget library. 
    • Padding 

      To remove inner spacing, click Clear Padding 

    • Revert

      To revert to theme settings, click Reset to default spacing.

    • Animation

      Click Animation and select an animation style, such as a fade or zoom, to apply to the column.

    •  Hide

      To hide the column on desktop, tablet, or mobile views, click Hide from and select the relevant option.

    • Copy

      To copy the column, click Copy.

    • Anchor
      1. To anchor the column to the page, click Set as anchor and enter a name. Check the box to add the anchor to your site's navigation 
      2. To edit the name of an existing anchor, click Edit anchor. Enter the name and click Update.
      3.  To delete an existing anchor, click Edit anchor. Click Delete anchor.
    • Connect data
      1. To connect data, click Connect Data. Under the "Connect" tab, select the relevant option and click Connect.
      2. To change the connected data, click Connect Data. Select Change connection. Make the required changes and click Connect.
      3. To edit connected data, click Connect Data. Select Edit content. Make the required changes and click Save.
  3. To delete the column, select the column and click Delete.
Table

Display data in rows and columns. You can type data directly, paste an existing table, or upload a CSV.

Before you begin

  • Upload a CSV exported and copied from Google Sheets or Excel (non-RTL languages only).
  • Tables can only include text and links. Use rows and columns or the List widgets to create a table with images, buttons or other widgets.
  • The Table editor isn't supported on Edge version 17.
  • The table can include up to 30 rows and columns.
  • When connected to data, the row limit is the collection type's limit:

Content editor Design editor

In the Content tab, type directly in the editor or click Upload a CSV to add data to the table.

Use Clear All to clear all data from your table.

Add connected data

The Table widget syncs data from internal or external sources like Google Sheets and Airtable, allowing you to manage content outside the editor. It automatically links rows to any existing dynamic pages in the same collection for easy navigation.

Connected tables support the following field types:

  • Rich text
  • Plain text
  • Image
  • Link
  • Number
  • Date and time
  • Email
  • Multi-select
  • Phone

Connect table widget to a collection

  1. Right-click the Table widget and click Connect to data.
  2. In the "Connect" tab, select a collection from the dropdown menu.
  3. Select the required fields from the Fields to display options. The columns will be ordered in the same order they are selected.
  4. Click Connect.
  5. A successful data connection is marked with  when you hover over the Table widge.
Examples

Ingredients list

Price list

Locations list

Flavors list

.

Back to the top

Breadcrumbs

Help visitors navigate your site hierarchy. Breadcrumbs show the path to the current page, which improves both user experience and SEO.

Content editor Design editor

  1. Click the widget and select the Content tab.
  2. Toggle on or off the items you want visible on the breadcrumbs. You have the following options:
    • Homepage. Always show the home page in the breadcrumbs.
    • Current page. Show the current page in the breadcrumbs.
    • Hide the breadcrumbs when there isn't a parent page. Enables breadcrumbs for all pages except the homepage or pages on the first level of navigation.

Back to the top

Accordion

Organize content into expandable sections like FAQs or product highlights. This reduces scrolling and helps visitors find information quickly.

The Accordion widget can display dynamic pages as well as specific collection or product information using inline binding

Content editor Design editor

  1. Click the widget and select the Content tab.
  2. Add or modify the fields:
    • Items: 
      • Click an item to edit its content
      • To duplicate an item, click Copy text icon to duplicate an item
      • To add a new item, click + Add Item.
    • Display Rules: 
      • Toggle on Show one expanded item at a time to allow multiple items to be opened at once.
      • Toggle on Show first item expanded to expand the first item in the list.
    • SEO: Toggle on Enable FAQ schema to help search engines preview your content.

Back to the top

Tabs

Display related content like services or plans in compact sections. Visitors click between tabs to see different information without leaving the area.

Note:

You can have an unlimited number of tabs, however, tab labels shrink as more are added to provide room for the new tabs.

Content editor Design editor

  1. Click the widget and select the Content tab.
  2. Click a tab to edit it. You can edit the image, image alt text, tab label, label heading type, title, description, button and button link
  3. To add a new tab, click + Add tab.
  4. To show the image, toggle on Show image.

Back to the top

Booking Engine

Embed a search widget that allows guests to select stay dates. Once a guest choose their desired dates, the vistor is redirected to your Guesty Booking Engine to pick a property.

The destination filter automatically pulls data from your listings' "City address" fields. You can customize these values to display neighborhoods or regions instead of cities, however this may affect channel connections with platforms like Airbnb, Booking.com and Vrbo due to their address requirements.

By default, the Booking Engine widget is embedded into your homepage when you start creating your Guesty Website.

Content editor Design editor

  1. Click the widget and select the Content editor.
  2. Optional: Select the location for properties you want to display from the dropdown menu.
  3. Optional: Select your check-in and check-out dates

Back to the top

Properties

Highlight top-performing or luxury listings using the Properties widget. This is ideal for landing pages where you want specific properties to stand out. You can drag and drop the widget anywhere on your website or on a dedicated landing page.

Content editor Design editor

  1. Click the widget and select the Content tab.
  2. Search for and select the properties you want to showcase. 
    • You can choose up to 30 properties per widget. 
    • The listings status must be "Listed".
  3. Click + Add filter to refine results by amenities, property type and/or location.
  4. In the "Selected" tab, you can drag the properties to change the display order.
  5. Click Save.

    Tip:

    You can add multiple properties widgets and set up different groups of featured properties to present on each.

Back to the top

Text & image

Add images with wrapped text. The text automatically flows around the image according to the image placement.

Note:

Right-click and select Connect to Data to use dynamic content.

Content editor Design editor

  1. Click the widget and select the Content tab.
  2. Select the image position: left or right.
  3. Click the image thumbnail to select an image.
  4. To add a link , click Link image and select the relevant link location.
  5. Under "Alt text", enter the required text if the filed provided.
  6.  Under "Paragraph", enter your desired text.

Back to the top

Countdown

Add a real-time countdown to your site to boost engagement and create urgency by highlighting limited time remaining for sales, events, and promotions.

Content editor Design editor

  1. Click the widget and select the Content tab.
  2. Set the date the countdown ends in the field provided. 
  3.  Set the time the countdown ends in the field provided. Enter a specific time, for example, 11:45 pm if required.
  4. Select a timezone from the dropdown menu.
  5. Under "Time's up message", enter the message that appears when the countdown ends in the text field.
  6. Select Show counter at 0000 and message beneath it or Remove counter and display message only.
  7. Under "Title" enter the required text for the countdown in the field provided. To hide the title, click .

Back to the top

Was this article helpful?
0 out of 0 found this helpful