The Cloudbeds Website Builder provides plenty of customization options to optimize your website, making it the ideal space to showcase your business and an excellent channel to draw in potential guests.
This article presents all the available customization options to allow you to create a site that truly reflects your brand.
Learn more about the Cloudbeds Website Builder.
Looking for options to customize your website background? See the Website background customization article.
Themes
- Text: Control text for your site, both for text and headings of all sizes (H1 to H6). Changing the font size, style, color, and other edits will affect future paragraph, and other text types as well as current widgets connected to Site Text that have not been manually changed.
- Colors: Define a color palette and link the individual colors to any or all widget with color settings. The color of any element linked to the theme colors will automatically be updated when the linked color is changed in the theme colors settings.
- Buttons: This section lets you define the style of primary and secondary button widgets on your site. Select one of our button layouts and set the text, background color, border, hover state, corners, and shadow styles.
- Images: Control the style of the image widgets on your site. Change the image layout, add or edit the border style, rounded corners, or shadow effects.
- Rows and Columns: Define the theme for row and column design in terms of background color and default spacing.
Edits that will be made on individual rows or columns will override the theme row and column settings.
- Backgrounds: This section lets you control Background style for your site. Choose between using a color or image as your background.
- Site Layout: Control the site layout navigation on desktop, tablet and mobile. For the desktop version, you can choose from two widths: 960px or 1200px.
Changing your navigation's layout often affects the behavior of your header and sometimes the rest of your site. If your header suddenly looks incorrect after changing the layout, try a different layout.
The Site Theme panel lets you make changes that affect your entire site. Customize your site's text, buttons, images, background, and navigation widgets from the design panel.
Changes that you make to specific widgets or pages will override themes set in the Site Theme panel. We recommend you first decide on a site theme, and then make corresponding customization.
To access your website theme, click on the Theme option in the side panel, and apply the necessary changes:
- In the left panel, click Theme
- Click the arrow next to Text. Find below the available options:
- DFLT - This will set the theme for all text in widgets that are not assigned to a heading or to the paragraph style such as the navigation widget. Link text color and underline can also be set here.
- PAR - This will set the theme for the text widget.
- Heading and subheadings H1-H6.
- Click the desired text type
- Making changes in the theme text area changes all text in the site that is not overridden.
- When manual edits are made to individual elements it overrides the site theme and any changes made to the site theme will not be reflected in these elements.
For headings and subheadings: We recommend following SEO best practices by following heading hierarchy. For example, use heading 1 as the main title and heading 6 as the smallest and do not skip between heading levels, such as going straight from a heading 1 to a heading 4.
Rows
- Hover over the top left of a row until a row button appears, and click Row. The Row editor will appear
- Click the move row up and move row down arrows to move the current row up or down.
- To open the Row design editor, click Edit Design
- Click +Add and select one of the available options
- Click Clear padding to clear the inner spacing inside the row,
- Click Revert to global spacing to revert the spacing to what you defined in global spacing, c
- Click Entrance Animation to add an entrance animation to the row (for example, fade from right, bounce in, zoom in)
- To save the row as a section, click Save as Section and select to save only the current row, multiple rows, or the full page.
- To hide the current row on a specific device (desktop, tablet, mobile), click Hide On Device, and select the device.
- To copy/delete the row, click copy or delete.
- To anchor the row to the page or delete an existing anchor, click Set As Anchor or Edit Anchor.
Use the Row editor to change the row's background color and image, add a border, or adjust the inner and outer spacing of the row. To edit the background style or spacing of the row:
- Hover over the top left of a row until a row button appears, click Row, and then click Edit Design
- On the Settings tab, you have the following option:
- Full bleed row - To change the row into a full bleed row, which allows content to span the entire width of the screen, click the Full bleed row toggle. If you choose not to have full bleed rows, the content width is limited to 960px.
- On the Style tab, select a use a background color, image, or video
- On the Animation tab, apply special effects to the row
- On the Spacing tab, define the inner spacing on desktop and tablet
- Parallax scrolling is not an option for the Background Image Slider.
- Configure the position, background overlay, border, and shadow for the image.
- Video: Paste the URL of the chosen video in the field provided. For more information about video backgrounds click here.
Other Customization Options
Sections are pre-built rows of elements which users can add to their responsive sites. Sections enable users to build great looking sites quickly by saving time during the design process.
Add sections
- Hover between rows, and click the Add Section button. Sections display in the left panel.
- In Section Mode, a gallery of pre-made sections is available in the left panel, grouped into categories (Intro, blank, coming soon, features, about, etc).
- In the left panel, click a section to display it as a new row. You can then browse sections within the same group by using the arrows keys or by selecting a section from a different group.
- To embed the section into the site, click Save Section. Alternatively, click Save & Add Another to continue adding sections to your site. The section converts into a row and all elements in the section are editable.
- Sections do not use the text color or text font settings from the site theme settings. However, you can always clear the format and apply your design.
- Sections may contain more than one row.
- Sections cannot be used in the header. To switch the full header section, open the header editor. For more information, see Headers.
- Sections are not available for sidebar templates (for example, Portfolio, Milk and Cookies, and so on).
- Click an image on your site to open the Content Editor, and click Edit Design
- In the Image tab, click to Edit your image
- Use the menu at the bottom of the image to frame, add text, adjust, crop, and focus the image
- Click Save & Close and the image is saved in your library as well as on the page
Creating a site takes time and dedication. You can make this process easier and more efficient by using the Copy and Paste feature. Copy elements and rows in your site, creating exact duplicates to create identical rows or elements for your site.
You cannot copy and paste widgets or pages between sites. However, you can duplicate a page and use it in the same site. To learn more, see Pages and Popups.
How to copy and paste content
- Right-click a widget, and click Copy.
- Right-click the area you want to paste and click Paste to insert the widget into the row. The duplicate widget appears above the currently selected widget.
- To copy and paste a column: Open the Row menu to paste the column into a row. You can paste the column into any row on your site, including the header or footer. Note that it is possible to paste up to four columns into any one row.
- The section converts into a row, and all elements in the section are editable.
- Sections do not use the text color or text font settings from the site theme settings. However, you can always clear the format and apply your design.
- Sections may contain more than one row.
- Sections cannot be used in the header. To switch the full header section, open the header editor. For more information, see Headers.
- Sections are not available for sidebar templates (for example, Portfolio, Milk and Cookies, and so on).
Anchor links let you send visitors to a specific sections 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 would like to reference.
Anchors cannot be added to content in the Footer or blog posts.
To add an anchor on your page:
- Right-click a widget or row to open the context menu.
- Click on Set As Anchor.
- Type an Anchor Name. To add the anchor to the site's navigation, select Add to Site Navigation.
- Click Add.
To add a link to an existing anchor:
- When creating a text or button link, select the link button.
- Click on the Anchor option.
- Select the page the anchor is on, and select the anchor from the drop-down list.
- Right-click widget or row with the anchor to open the context menu.
- Click on Edit Anchor
- Apply the changes and click Update
- To delete, click Delete, if necessary.
Comments
Please sign in to leave a comment.