1. Cloudbeds
  2. Cloudbeds Digital Marketing
  3. Cloudbeds Websites
  4. Cloudbeds Websites Support
  5. Website Builder Guide

Website Customization Options

Juss Reyes
Updated

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

Theme customization options

  • Text: Control text for your site, including headings (H1–H6). Updates affect all future and currently unedited widgets.
  • Colors: Define a palette and link it to widget color settings. Changes update all linked elements.
  • Buttons: Style primary and secondary buttons, including text, background, hover, borders, and shadows.
  • Images: Modify image layout, borders, rounded corners, and shadows.
  • Rows and Columns: Customize layout spacing and background color.

  Edits made on individual rows or columns will override the theme row and column settings.

  • Backgrounds: Choose color or image as background.
  • Site Layout: Set desktop width (960px or 1200px) and configure layout on tablet/mobile.

  Changing your navigation's layout may affect your header or other parts of the site. If it looks wrong, try a different layout.

Site theme

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 made to specific widgets or pages will override the Site Theme panel. We recommend choosing your site theme first, then customizing individual components as needed.

To access your website theme, click on the Theme option in the side panel, and apply the necessary changes:

Update theme text

  1. In the left panel, click Theme
  2. Click the arrow next to Text. Find below the available options:
    • DFLT: Controls default text in widgets not assigned to heading/paragraph. Also controls link text color and underline.
    • PAR: Controls paragraph (text) widget style.
    • Headings and subheadings H1–H6
  3. Click the desired text type
  • Changes made in the theme text area affect all site text that is not overridden.
  • Manual edits to individual elements override the site theme and prevent further updates from applying.

  For headings and subheadings: Follow SEO best practices by using proper heading hierarchy (e.g., H1 for titles, H2 for subsections) and do not skip levels (avoid jumping from H1 to H4).

Rows

Configure Rows

  1. Hover over the top left of a row until a row button appears, and click Row. The Row editor will appear.
  2. Click the move row up and move row down arrows to reorder the row.
  3. To open the Row design editor, click Edit Design.

  • Click +Add and select one of the available options.

  • Click Clear padding to remove spacing inside the row.
  • Click Revert to global spacing to restore default spacing.
  • Click Entrance Animation to add animation (e.g., fade, bounce).
  • Click Save as Section to reuse one/multiple rows or the full page.
  • Use Hide On Device to hide the row on specific devices.
  • Use Copy or Delete to manage the row.
  • Use Set As Anchor or Edit Anchor for linking.

Row Design Editor

Use the Row editor to change a row's background color or image, add a border, or adjust its spacing. To edit the background style or spacing:

  1. Hover over the top left of a row until a row button appears. Click Row, then click Edit Design.
  2. On the Settings tab, you have the following option:
    • Full bleed row: Toggle this to make the row span the full width of the screen. Otherwise, content is limited to 960px.
  3. On the Style tab, choose a background color, image, or video.
  4. On the Animation tab, apply special effects to the row.
  5. On the Spacing tab, define inner spacing for desktop and tablet.





  • Parallax scrolling is not available for background image sliders.
  • Configure the position, overlay, border, and shadow for images.
  • Video: Paste the video URL in the provided field. For more information, click here.

Other Customization Options

Sections

Sections are pre-built rows of elements you can add to responsive sites. They help you build attractive pages faster by saving time during the design process.

Add sections

  1. Hover between rows and click the Add Section button. Sections appear in the left panel.
  2. In Section Mode, the left panel shows categorized galleries of pre-made sections (Intro, Blank, Features, About, etc.).
  3. Click a section to preview it as a new row. Navigate sections using arrow keys or by switching categories.
  4. Click Save Section to embed it. Or click Save & Add Another to continue adding. Once saved, the section becomes a row with editable elements.


  • Sections do not inherit text color or font from site theme settings. You can clear formatting and apply custom styling.
  • A section may include multiple rows.
  • Sections cannot be used in headers. To change the full header, use the header editor. For more info, see Headers.
  • Sections are not available for sidebar templates (e.g., Portfolio, Milk and Cookies).

Edit images in the Image Editor

  1. Click an image on your site to open the Content Editor, then click Edit Design.
  2. In the Image tab, click Edit.
  3. Use the menu at the bottom of the image to frame, add text, adjust, crop, or focus the image.
  4. Click Save & Close. The edited image will be saved to your library and applied to the page.


Copy and Paste Content

Creating a site takes time and dedication. Use the Copy and Paste feature to duplicate rows and widgets for efficiency. This helps maintain design consistency across your site.

You cannot copy or paste widgets or pages between sites. However, you can duplicate a page within the same site. Learn more at Pages and Popups.

How to copy and paste content

  1. Right-click a widget and select Copy.
  2. Right-click the target area and select Paste. The widget will appear above the selected widget.

  • To copy and paste a column: Open the Row menu to paste into any row, header, or footer. Up to four columns can be added to a row.
  • After pasting, the section becomes a row with editable elements.
  • Sections do not inherit text color or font settings from the site theme. Clear formatting to apply your custom style.
  • Sections may include multiple rows.
  • Sections cannot be placed in headers. To edit headers, use the header editor. See Headers.
  • Sections are not supported in sidebar templates (e.g., Portfolio, Milk and Cookies).

Anchor Tags and Links

Anchor links let you send visitors to specific sections of a page, making navigation easier on longer pages or for directing users to key content.

Anchors cannot be added to content in the Footer or blog posts.

Add Anchors

To add an anchor on your page:

  1. Right-click a widget or row to open the context menu.
  2. Click Set As Anchor.
  3. Type an Anchor Name. To include it in the site navigation, select Add to Site Navigation.
  4. Click Add.

Link to an Anchor

To create a link to an existing anchor:

  1. When adding a text or button link, select the Link icon.
  2. Click on the Anchor option.
  3. Select the page and the anchor from the dropdown list.

Edit or Delete an Anchor

  1. Right-click the widget or row with the anchor to open the context menu.
  2. Click on Edit Anchor.
  3. Apply the changes and click Update.
  4. To delete the anchor, click Delete.

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

Comments

0 comments

Please sign in to leave a comment.