Create beautiful, branded sites, fully customized down to the last detail.
Brandlive's design tools help you build the perfect site to showcase your brand at every touchpoint. Save your designs to use over and over with themes, color palettes, fonts, and more.
Use the navigation menu to the right to skip to each section.
Selecting a Theme
When creating an project, you'll first be prompted to select a theme. Themes provide a template to begin crafting your site. All themes are fully customizable and contain the same functionality.
Admins & Sitebuilders can switch to a new theme at any time.
To select a new theme for an existing site, open your project in the Sitebuilder tool and navigate to the 'Theme' tab in the lefthand site menu.
Then, select the 'Theme' tab dropdown arrow and select the pencil icon that appears:
A new modal will appear to select a new theme. Once you've made a selection, click 'Save'.
To learn more about custom themes, check out our how-to article here.
Selecting, Creating, & Editing Color Palettes
To select, create, or edit a custom color palette, open your project in Sitebuilder and navigate to the 'Theme' tab in the lefthand site menu.
Then, scroll down to color palettes (below Theme) and select the dropdown arrow.
A menu of pre-populated color palettes will appear. Simply select the dot next to the palette you would like to use:
To create a new color palette, select the 'Edit' button next to any pre-populated palette.
A new modal will appear where you can:
- Name your color palette
- Enter hex codes for each field OR
- Select a color by clicking on the circle next to each field
Click 'Add' to save your new palette.
Anytime you 'edit' a pre-populated palette, a new palette will be created.
If you wish to edit a custom palette, simply click 'edit' and make your changes. The changes will save to your custom palette.
Adding Custom Colors to the Editor
Some elements of your site can be customized separately from the palette such as header text color, background colors, and more. There are two ways to add color options to these menus.
The first is by navigating to the 'Theme' tab on the lefthand menu of the Sitebuilder.
Then, scroll down to 'Custom Editor Colors' and select the pencil icon that appears:
A new modal will open to add your colors. Select the rectangular box that appears to add your color:
You can select a color from the color picker menu, enter the RGB, or use the dropdown arrow to enter colors via hex codes or HLS.
When complete, click 'Save'. The new color will appear in the color selection menu.
The second way to add custom colors is by navigating to a page of your site and selecting an item such as header text color bubble or the background color paintbrush.
A new modal will appear to select a color or add a new one by clicking the '+' button that appears.
Select a color from the color picker or enter a hex code.
Then, be sure to click the '+' button to add the color to the menu.
When complete, click 'Done'.
Selecting & Uploading Fonts
To select a font combination or upload your own, open your project in Sitebuilder and navigate to the 'Theme' tab in the lefthand menu.
Then, scroll down to the font selection and click the dropdown arrow.
You can select an existing font combination or upload your own by clicking on the '+Custom Fonts' button.
A new modal will appear to upload your header and body fonts in .ttf, .otf, or .woff formats.
Once you've uploaded your new fonts, click 'Add'. The new font combination will be available for selection in the font menu.
Changing Border Radius Shapes
To change the style of elements on your site from round to square or anywhere in between, navigate to the 'Theme' tab in the lefthand menu.
Then, scroll down to 'Border Radius Shapes' and click the dropdown arrow.
Then, use the dropdown arrows next to each item to select 'Custom':
Use the slider to adjust the shape and style of each element. The image above features an image that has been customized to round corners.
Entering Custom CSS
CSS can be entered at the project or session level for complete customization down to the last detail. Learn more in our CSS article here.
Related Articles