How to make your site look exactly like you want.
CX Studio provides a number of tools — both code and no-code — to customize your site's appearance. These include:
- The Style Guide - make branding and style changes without code
- Headers & footers - modify links, menus, and style, or go completely custom
- Custom integrations - add custom code to every page
- Custom code blocks - add one-off code customizations to a single page
- Custom components - customize your building blocks with code
You must have the Admin role to view and edit the style guide.
The CX Studio style guide provides a quick way to customize the branding and styles of your site without using code. It's designed to be so simple that anyone can use it:
Many aspects of your theme can be customized in the Style Guide, including:
- Button styles
- Forms styles
- And more...
If you're not sure if CX Studio has a no-code way of customizing your theme, the Style Guide is a great place to start. Component developers will especially want to be familiar with what's exposed here.
Headers & Footers
Within the app, CX Studio provides a way of customizing your header and footer without code:
This allows you to customize your menus, styles, and the basic layout of your header. The built-in header and footer do have some limitations, but they are excellent for customizing your header or footer without code.
If the built-in header and footer don't meet your needs, you can also build your own header and footer components with code. See Header and Footer.
If you need a way to add custom code to every page, custom integrations are the way to go.
Custom integrations can be used to:
- Tweak global CSS for things not customizable in the Style guide
- Add additional scripts for analytics or functionality
- Add a global banner at the top or bottom of the page
- And more...
A custom integration can be inserted before or after the content of the page, or in the
<head> of the HTML. See Custom Integrations.
Custom Code Blocks
If you only need to add custom code to a single page, CX Studio includes a Custom Code component that can be easily inserted into a page with the Add Section button within the page editor.
To add a custom code block:
- Click the Add section button
- Navigate to the Custom Code category
- Select the Custom Code component
See Custom Integrations.
Building your own components will give you the ultimate flexibility. CX Studio provides a simple component editor where you can develop components in a live preview environment:
Anyone with a small amount of HTML knowledge will feel at home in the component editor.
The component editor can be used to build a few different types of components: