How to: Customize Your Site Design

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. 

design_tools_header_image.png

Selecting a Theme

When creating an event, 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.

themes.png

Admins & Sitebuilders can switch to a new theme at any time. 

To select a new theme for an existing site, open your event 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:

themes_1.png

A new modal will appear to select a new theme. Once you've made a selection, click 'Save'.

themes_2.png

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 event 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:

color_palette_1.png

To create a new color palette, select the 'Edit' button next to any pre-populated event 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

color_palette_2.png

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:

custom_color_one.png

A new modal will open to add your colors. Select the rectangular box that appears to add your color:

 

custom_color_2.png

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.

 

custom_color_3.png

A new modal will appear to select a color or add a new one by clicking the '+' button that appears. 

custom_color_4.png

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 event in Sitebuilder and navigate to the 'Theme' tab in the lefthand menu.

Then, scroll down to the font selection and click the dropdown arrow. 

custom_font_1.png

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.

custom_font_2.png

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. 

boarder_radius_1.png

Then, use the dropdown arrows next to each item to select 'Custom':

border_radius_2.png

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 event or session level for complete customization down to the last detail. Learn more in our CSS article here. 

Related Articles

 

 

Top