How to Use Widgets to Customize Your Website in SmartHOTEL editor

Widgets are tools that help you add and customize different features on your website. Learn how to use them to enhance your site’s functionality and design. Log in at https://editor.smarthotel.nl to start making changes.

What are Widgets?

Widgets are the building blocks of your website. They allow you to add various features to your site, such as text, images, buttons, contact forms, and more. With widgets, you can easily customize your site’s layout and functionality to match your hotel’s needs. Whether you want to capture leads, display images, or create a navigation menu, widgets make it simple.

You can access and manage widgets by logging into the SmartHOTEL Editor at https://editor.smarthotel.nl.


Adding Widgets to Your Website

There are two main ways to add widgets to your site: by using the Widgets Panel or the Context Menu.

Add Widgets from the Widgets Panel

  1. In the left panel, click Widgets to open the widget panel.
  2. Browse through the list or use the search bar to find the widget you need.
  3. Click and drag the widget to the desired location on your site. A blue placement indicator will show where the widget will be placed.

Add Widgets with the Context Menu

  1. Right-click on any existing widget and select Add Widget Below from the context menu to place a new widget below the current one.
  2. If you're working within a column, click + Add and select Add Widget Below.
  3. Choose from the four most popular widgets or click More Widgets to open the full menu. Once the widget is added, you can customize it as needed.

Customizing Widgets

After adding a widget, you can adjust its design, layout, and functionality to suit your website’s needs.

Common Widget Customization Options:

  • Edit Design: Modify the widget’s appearance, including color, text, and images. You can also adjust the spacing around the widget.
  • Entrance Animation: Customize how the widget appears on the screen (e.g., fade in, zoom in, or bounce).
  • Select Container: Choose the column or row that contains the widget, allowing for easier editing.
  • Copy and Paste: Copy a widget and paste it in another location on your site.
  • Hide on Device: Control which devices (desktop or mobile) display the widget. For example, you can hide a contact form on mobile but show it on desktop.
  • Set as Anchor: Create anchor links to send visitors to specific sections of your page.
  • Delete: If you no longer need a widget, right-click it and select Delete.

Widget Placement Indicators

When adding a widget, the placement indicator will show where the widget will be placed:

  • Insert Here: The widget will be added to an existing row or column.
  • Insert in New Row: A new row will be created, and the widget will be placed inside it.
  • Insert in New Column: A new column will be added, and the widget will be placed inside it.

Managing Widget Behavior Across Devices

Widgets can display differently on various devices (desktop, mobile, tablet). After adding a widget, make sure to check how it looks in each view to ensure it displays correctly.