Widgets are the building blocks of your site. Customize widgets to adjust the appearance and layout of your site.
Whether you are looking to capture leads, lead visitors from page to page, show off images, or put an important message in a paragraph, widgets can help. This article explains everything you need to know about widgets for Cloudbeds Websites.
Add widgets
- In the left panel, click Widgets to open the widgets panel. Search for widgets by browsing through the list or using the widget search bar.
- Click and drag the widget to the location you want in the site. A blue placement indicator appears. The widget will appear 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.
- Right-click any widget and select Add widget below in the context menu to add widgets immediately below the current widget. If you are right-clicking on a column, click + Add, and select Add widget below.
- 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.
To arrange widgets side by side, drag a widget onto your site, add a column to the row where that widget has been placed, and then drag another widget into that column. Alternatively, drag the two-column widget onto your site and then drag and drop the widgets into each column.
Edit widgets
- To edit a widget, hover over the widget, and right-click the widget to see the context menu. Every widget has different options, continue reading below to learn more about the most common ones to almost every widget.
- To delete a widget, removing it from all devices, right-click the widget, and click Delete.
- Edit Design: You can change the style of the widget, including color, text, images and more, as well as change the blank space surrounding the widget. Click a widget, and click the Design tab.
- Entrance Animation: Allows you to customize how the element appears on the screen; for example, fading in, bouncing in, or zooming in. Right-click the widget, click Entrance Animation, and select an animation.
- Select Container: Selects the column or row this widget is contained in, allowing you to easily find and edit it. Right-click the widget, click Select Container, and select Column or Row.
- Copy and Paste: Copying a widget saves it so that you can paste it later in 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.
- 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; you can see all of the hidden elements on a page by clicking Unhide Elements at the bottom of the left panel. Right-click the widget, click Hide On Device, and select a device.
- Set 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. Right-click the widget, and click Set As Anchor.
- Alignment: Set whether the widget is aligned to the left, right, or center of its area. To set the alignment, right-click the widget, and click an Align Left, Align Center, or Align
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.
Comments
Please sign in to leave a comment.