The Style Guide feature lets you experiment with different color palettes for your website. Included in selected templates and AI generations, it simplifies creating visually appealing websites and A/B testing different designs. Enhance your web design and testing process with versatile options from the Style Guide.
Accessing the Style Guide
The Style Guide feature can be accessed right from the builder footer when you are working from scratch, on a template or on your ai generated website.
If you generating a website with ai on CodeDesign, you will be provided a few style options or 'themes'. You can add your custom theme on your project.
However, only a selected templates comes with multiple themes on the Style Guide settings, but you can create your custom style and experiment.
To begin using the Style Guide, follow these steps:
Launch a new Project : Select the template from the library, or ai generate the project you want to work on.
Navigate to the Style Guide: Click on the Style Guide button located in the footer as seen in the following image.
This will open the Style Guide panel on the right sidebar, where you can select from various styles.
If your project is ai generated or is from our selected multi-theme templates, you will see multiple themes listed one below another. To switch to a theme, simply click the palette/theme you want and you're good.
Now if you want to create a custom theme, go through the following steps.
Creating a New Theme
Add a New Theme: Click on "Add New Theme" to create a new style. Then select the newly created theme.
Initially, everything will appear in gray as no colors are selected. This will be sorted once you select the colors for Primary, Secondary and other fields.
Select colors for the theme palette: Choose your primary, secondary, and other colors based on the existing style guide settings for the project.
For example: I've clicked the primary color, and then selected a cerulean shade of blue and the primary color of the webpage changes in realtime.
Select colors for the secondary and other fields the same way and you will have created a full fledge theme.
Managing Themes on the Style Guide Settings
Renaming Themes: Once you've created a new theme, you can rename it by clicking on the edit button. For example, were going with "Demo"
Deleting Themes: If you decide not to use a particular theme, simply click on the theme palette to select it and then click on the 'Delete this Theme' button
Video Guide | Introduction to Style Guide
We've made a video guide walking you through the basics of Style Guide in this youtube video. If you want to dive deeper and learn about creating your own style Style Guide for a build-from-scratch project, we've got it covered in this follow up article.
Start experimenting with the Style Guide today and make your website stand out! If you have any questions or need further assistance, our team is always ready to join you via support chats, forums and our social handles.