Whether you're a fan of classic black-and-white aesthetics or you're ready to dive into bold and vibrant color palettes, Podia has you covered.
With our Site builder color options, you can easily adjust the colors of your website.
This guide offers a step-by-step overview of how to customize the colors for various elements on your site.
Video overview
Getting started
Podia's color options allow you to customize your website and easily set up colors for your site pages.
It all begins with 6 base colors. These form the primary color palette that will be used to create various section themes for your site.
With the base colors you've chosen, Podia will generate 6 section themes. These themes will help maintain color variety while ensuring consistency across different sections of your site.
Let's take a look at how to configure your site's base colors and section themes.
Setting up your site's base colors
Here's how to set up your site's base colors:
From your Podia dashboard, click on Website in the sidebar menu.
Select Edit site.
On the next page, click on Design at the top menu of the Site builder and then select Colors.
If you're accessing Podia from a smaller screen or mobile device, you can access the Design menu by clicking on the Page navigation menu first.
Click on the base colors palette to edit your site's base colors.
You'll then be able to select your base colors from one of our pre-made templates or set an individual color palette by adjusting your Accent and Shade colors. Those colors will be used on different elements of your site.
Accent and Shade colors adapt their use to your selected theme, without being tied to particular site components like buttons or text. For more precise control, you can edit the elements' colors for specific section themes.
Once you have set your base color palette, go back to adjust your site's section themes.
Customizing section themes
Once you've selected your base colors, Podia will automatically generate 6 section themes based on these colors.
These section themes will allow you to easily apply your chosen color combinations to various sections of your page while maintaining a consistent look.
These themes offer different styles for your page sections, such as Pale, Light, Soft, Dark, Vivid, and Bright.
While section themes are created automatically based on your chosen base colors, you also have the option to customize them individually.
This flexibility allows you to explore even more creative ways to use colors on your website.
Here's how to edit section themes on your site:
Click on the section theme you want to customize. Changing the colors of a particular section theme will have an impact on all existing page sections using that specific section theme.
On the next page, set up the colors of each one of the items you want to customize.
Plain - Modify the colors of plain elements of your site. Affected styles: Plain.
Card - Modify the colors of card elements of your site. Affected styles: Card, Split and Cover with no images.
Overlay - Modify the colors of overlay elements of your site. Affected styles: Cover with images.
Once you're done modifying a particular section theme, feel free to go back to customize any other section themes or move into editing your site.
Reset section theme preset defaults
If you make changes to a specific section theme and you would like to change it back to its default colors, you can reset it to preset defaults.
Simply click on "Reset preset defaults" while customizing your section theme to have its colors reverted back to the original base color combination.
When you reset changes to their default values, there's no way to revert to the custom color combination you had previously set.
Setting up a default theme
You have the flexibility to establish and modify your default theme.
This default theme will be applied to each new page section you add to your site, ensuring a consistent look and feel throughout your website.
Setting up or changing a default theme would just impact new sections. Existing page sections won't be affected.
To set your default theme, just click the dropdown menu and choose the section theme you want as your default.
Changing site colors
You can customize section themes to change the colors of multiple page sections at once, or fine-tune individual page sections by setting unique color options for each.
Let's take a closer look at both options!
Changing global color styles
You can change global color styles and modify the colors of multiple page sections by customizing your section themes.
Modifying the colors of your section themes will affect all page sections utilizing that specific section theme.
Here's how to customize global color styles by modifying section themes:
Click on Design at the top Site builder menu and then select Colors from the left-hand menu.
From there, click on the section theme you want to customize.
On the next page, set up the colors of each one of the items you want to customize.
Plain - Modify the colors of plain elements of your site. Affected styles: Plain.
Card - Modify the colors of card elements of your site. Affected styles: Card, Split and Cover with no images.
Overlay - Modify the colors of overlay elements of your site. Affected styles: Cover with images.
And that's it! Colors for all the page sections on your site that use this section theme you have just modified will now be updated.
Changing individual page section colors
Here's how to change the colors of specific page sections of your site.
Click directly on the page section you'd like to edit or use the "Pencil icon" to bring up the left-hand menu. From there, navigate to the Design tab.
Click on Theme to change the section theme of your page section. You can also set up Custom colors for each individual page section.
If you opt for a Custom color combination, click on Edit to modify the available colors.
From there, just change the colors for the specific items you want to modify in the list.
And that's it. Only colors from the specific page section you've changed will be changed.
Troubleshooting
I am modifying the colors of my section themes, but this is not reflecting on my page sections... HELP!
I am modifying the colors of my section themes, but this is not reflecting on my page sections... HELP!
If you're making changes to your section themes' colors but don't see these changes on your page sections, it's likely because your page sections have their custom color scheme.
In this case, you'll need to manually update the colors for those page sections, as they're using a unique color combination.
FAQs
What do "Accent" and "Shade" colors stand for?
What do "Accent" and "Shade" colors stand for?
Accent and Shade colors are part of your site's base colors, and their usage varies depending on the theme you choose.
These colors aren't specifically tied to certain areas of your site, like buttons or text. Instead, their application can differ based on the section theme you're using.
If you prefer more granular control over these elements, you can edit the colors individually for specific section themes.
Can I change the color of multiple page sections at once?
Can I change the color of multiple page sections at once?
You can change the colors of multiple page sections of your site by customizing your section themes.
Modifying the colors of your section themes will affect all page sections utilizing that specific section theme.
How can I change button colors in transactional emails and product text editors?
How can I change button colors in transactional emails and product text editors?
These colors are determined by your site's Accent 1 color.
If you want to update these button colors, simply modify the Accent 1 color in your site settings. This change will be reflected in the button colors of transactional emails and the product viewer.
How can I change the colors in my Podia messaging window?
How can I change the colors in my Podia messaging window?
The different colors in your Podia messaging window are affected by the values assigned to Accent 1 and Shade 3.
Changing this color setting will also affect other areas of your site, including link and button colors in your emails, buttons in your product viewer pages, etc.
Accent 1: The background color of your Podia messaging icon is determined by this value.
Shade 3: This determines the color of both text inside the Messaging window and the color of the messaging icon inside the Messaging bubble.
Can I change the color of video players on my site?
Can I change the color of video players on my site?
No, the colors of video players on your site are not customizable.
Still need help?
If you have any questions, send an email to hello@podia.com or click the purple help icon to send us a message 😄