Advanced Website: Widgets - library and overview

Widgets are the key building blocks of a site, allowing you to add and manage content effectively. They serve as essential elements that enhance both the functionality and design of your website. By incorporating various types of widgets, you can create a dynamic and engaging user experience.

Widget library

The widget library is where all the widgets can be found. They are broken down into categories. There is also a search function at the top.

To access the widget library, in the side panel, click Widgets.

Add widget

To enter the editor:

1. Sign in to your Guesty account.
2. In the top navigation bar, click the mode selector and select Growth mode.
3. Click Distribution.
4. Click the Guesty Websites thumbnail.
5. To the right of the relevant website, click Edit.

Add widgets from the Widget library

To add widgets from the widget library:

1. In the side panel, click Widgets to open the widget library.
   • Widgets can be searched for using the search bar at the top or by scrolling through the different sections in the library.
2. Click and drag the widget to the location you want in the site. A blue placement indicator appears.
3. The widget appears in the location shown by the blue placement indicator.

When dragging-and-dropping a widget to your site, note the text in the blue placement indicator :

• Insert here. The widget will be added to an existing row or column.
• Insert in new row. A new row will be added and the widget will be placed inside of it.
• Insert in new column. A new column will be added and the widget will be placed inside of it.

Add widgets from the canvas

To add widgets from the canvas:

1. Right-click any widget and select Add widget below in the context menu to add widgets immediately below the current widget.
   • In Flex mode, click the plus (+) icon in the floating menu.
   • If you are right-clicking on a column, click Add, and select Add widget below
2. Select from the four most popular widgets or click More widgets to open the full menu. After adding the widget, you can edit it as usual.

Edit Widget: Content and design

You can customize widgets to adjust the content, appearance, and layout of your site. Editing widgets allows you greater control over what features your site has and how these features behave.

Most widgets have an area for its content as well as its design.

Content area

The content area is where a widget's content is typically configured. The available sections and options in the content area vary depending on the widget. For example, some widgets allow you to add a link, while others do not.

To access the content editor, right click the widget and select Edit Content. Or, if you are in flex mode, the option to access the content editor is available in the floating menu.

Edit design

Most widgets in the editor have design options that enable you to customize the widget's appearance for your site. Not all widgets have the same options. For example, some widgets do not allow you to edit inner spacing, others do not let you change outer spacing.

To access the design editor, right-click the element, and click Edit Design. Or if you are in flex mode, select Edit Design from the floating menu to open the design panel.

The following are common design settings.

Text styles

For widgets with text, you can edit the text styles. Any changes you make for a specific widget will override the Theme Text style.

If you need to override the text size per device, you can adjust the text size in the Theme Text and the text will not be reduced per screen size.

Following are examples of how the text size will adjust in different scenarios:

• If you set the text size to 40 px on desktop, the text will automatically be reduced to 34 px on tablet, and 32 px on mobile.
• If you set the text size to 16 px on desktop, it will not reduce by 85% to 13px on tablet, or 80% to 12 px on mobile since that is too small to read and below the 16 px minimum. Instead, the text size will stay the same at 16 px on all screen sizes.
• If you set the text size to 100 px on desktop, it will adjust to 60 px on tablet since that is the maximum, instead of 85 px which would be 85% of the desktop text size. The mobile text size will also adjust to 40 px since that is the maximum, instead of 80px which would be 80% of the desktop text size.

Layout

Layout options are usually specific to certain widgets. To select from the set of layout options available for that widget, click the layout that appears in the Design Editor (or click the small arrow beside it) to open the Select Layout menu. To change the selected layout, click the layout you want to use instead and it will be updated in the widget.

Style

• Color. Click the round color icon to the right of the setting name to open the color picker and change the color.
• Border. Change the width of the border using the slider or text box. Click the gear icon (design-gear.png) for more options.
• Background. Use a background image or color for this widget using the Choose and Place Images dialog or a video URL.
• Width and Height. Use the slider or text box to change the number of pixels.
• Rounded Corners. Increase or decrease the rounded the corners on a widget. Click the gear icon (design-gear.png) for more options.
• Shadows. Toggle on or off a shadow for this widget.
• Text. Set various aspects of the text, such as font family, font weight, etc.

Buttons

Widgets that incorporate a button will offer the ability to select whether the button inherits the primary or secondary button style defined in the theme panel. In addition, you can choose between the different button layouts, make edits to the button style (width, height) and button text (font, text size), and adjust the inner and outer spacing.

Any changes you make within the design editor will override styles set at the theme button level. If you need to revert back to the theme button style, click Reset to theme style.

Primary and Secondary theme Buttons

• If changes are made to the button (which will override styles set at the theme button level), an indicator box will still be present on the Primary or Secondary button style.
• If the button style that does not have the indicator box is clicked, it will reset the button to the style set at the theme button level.

Spacing

Change the inner spacing (spacing inside the widget edges) and outer spacing (spacing outside the widget edges). Each number in the outer box sets the outer spacing for its own side (top, bottom, left, or right), and each number in the inner box sets the inner spacing for its own side (top, bottom, left, or right).

For detailed information, see Outer and inner spacing

Animation

Entrance animations let you animate widgets and page widgets when they are first loaded on your site. Motion and interactivity make your site more memorable and can emphasize the sections you want visitors to focus on, like a phone number or a contact button.

Additionally, you can control where the animation starts and ends on the screen by using the Scroll settings.

To add an animation:

1. To access the design editor, right-click the element, and click Edit Design. Or if you are in flex mode, select Edit Design from the floating menu to open the design panel.
2. Navigate to the Animation section.
3. Select a Trigger ( Entrance or Scroll) and an Animation.
4. (Optional) Customize the animation (for example, the direction it will enter from).

To reset the animation, click Reset to default.

If you use a scroll animation, you can click Pause Animation () in the side panel to pause all animations while you are in editing mode. The animations will still be active in preview mode and on the live site.

Note:
Animations set for Desktop and Tablet are linked and will be the same. However, Mobile is separate, and animations configured for Desktop/Tablet will not apply to them.

Animation considerations

When adding animations, keep in mind the following:

• Too many animations can disorient or distract users, so use them sparingly.
• When removing an animation, remember that animations can be applied to rows as well as widgets, so the animation you are seeing might have been added somewhere unexpected.

Remove animations

To remove animations:

1. To access the design editor, right-click the element, and click Edit Design. Or if you are in flex mode, select Edit Design from the floating menu to open the design panel.
2. Navigate to the Animation section.
3. Click into the Animation drop down menu and select None.

Note:
If an element doesn't have an animation, it could be applied to one of the containers the element is in. It's recommended to check all containers for any possible animations

Alignment

Set whether the widget is aligned to the left, right, or center of its area.

Some widgets behave very differently in different views. Check the way your widget displays in each view after adding it to make sure it displays correctly.

To set the alignment, right-click the widget, and click an Align Left, Align Center, or Align Right icon.

Select container

Selects the container the widget is in, allowing you to easily find and edit it.

Right-click the widget, click Select Container, and select Column or Row.

Copy and paste

A widget can be copied and pasted to another location. The paste option only appears if you have a widget that has been copied.

Right-click the widget, and click Copy or Paste.

We do not recommend copying and pasting contact forms, as this typically results in issues in the duplicated contact form.

Hide on device

Use the hide on device feature to change your content depending on the device your visitor uses to access your website. For example, show a click-to-call widget for mobile users or a contact form for desktop users.

Widgets hidden by the Hide On Device feature are not deleted.

Right-click the widget, click Hide On Device, in classic editor, select a device.

If an Eye icon () is present in the side panel, this indicates there are hidden elements on the device you are currently editing. To view the hidden elements, click on the Eye icon.

Note:
Hidden content may still show in the code of the live site (after publishing/republishing). This is expected and due to the technology used.

Edit widget HTML/CSS

Allows you to make changes to the widget's HTML or CSS. We only recommend this option if you are comfortable with these languages.

Right-click the widget, and then click Edit HTML/CSS.

Set widget as anchor

Anchor links let you send visitors to a specific section of the page, making it easier for them to get from place to place on a longer page or to a specific section that you want to reference. For more information about anchors, see Anchor tags and links.

Right-click the widget, and click Set As Anchor.

Delete widget

To delete a widget, removing it from all devices, right-click the widget, and click Delete.

Widget FAQs and troubleshooting

What is the difference between apps and custom widgets?

While there can be differences based on what an app or custom widget is trying to accomplish, widgets built with our widget builder are not necessarily better than widgets built by our App Partners.

Apps also must meet strict standards and undergo a rigorous QA process by the Guesty team.

For a more detailed answer, see the FAQ section in the App store overview article.