Beginner
How to customize colors fonts and themes on Wix
Quick Answer
Customize your Wix site by accessing the Design tab in the Editor to modify colors, fonts, and themes. You can change global site colors through the Site Colors panel, update fonts via the Text settings, and switch themes using the Site Design options.
Prerequisites
- A Wix account
- An existing Wix website or template
- Basic understanding of website design concepts
- Access to Wix Editor
1
Access the Wix Editor Design Panel
Log into your Wix account and click Edit Site on your dashboard. Once in the Editor, click the Design tab in the left sidebar. This opens the main design customization panel where you can modify your site's appearance.
Tip
The Design panel is your central hub for all visual customizations on Wix
2
Customize Site Colors
In the Design panel, click Site Colors to open the color palette editor. Click on any color swatch to modify it using the color picker or enter a specific hex code in the
#000000 format. Your changes will automatically apply to all elements using that color throughout your site.Tip
Create a cohesive look by limiting yourself to 3-5 main colors
3
Change Site Fonts
Click Site Fonts in the Design panel to access font options. Select different font combinations from the preset pairs, or click Customize Fonts to choose individual fonts for headings and body text. You can preview changes in real-time as you browse through font options.
Tip
Pair a decorative font for headings with a simple, readable font for body text
4
Switch Site Themes
Navigate to Site Design in the Design panel to browse available themes. Click on any theme thumbnail to preview it on your site, then click Apply Design to implement it. Note that switching themes may override some of your custom color and font settings.
Tip
Save your current design settings before switching themes in case you want to revert
5
Customize Individual Text Elements
Double-click any text element on your page to select it, then use the text formatting toolbar that appears. You can override global font settings by clicking the font dropdown and selecting More Fonts to access additional Google Fonts and premium typography options.
Tip
Use the eyedropper tool in the color picker to match colors from images on your site
6
Modify Background Colors and Images
Click on your page background or any section background, then select Change Background from the toolbar. Choose from solid colors, gradients, images, or videos. Use the Settings icon to adjust opacity, overlay colors, and positioning options.
Tip
Keep background contrast in mind to ensure your text remains readable
7
Save and Preview Your Changes
Click Preview at the top of the Editor to see how your site looks to visitors across different devices. Use the device icons to test mobile and tablet views. When satisfied with your customizations, click Publish to make your changes live.
Tip
Always preview your site on mobile devices as font sizes and colors may appear differently
Troubleshooting
Colors not changing across all site elements
Some elements may have custom colors applied. Click Reset to Site Colors in the element's color picker, or manually update each element to use your new site color palette.
Fonts appearing differently on mobile devices
Access Mobile Editor by clicking the mobile icon in the top toolbar. Adjust font sizes and spacing specifically for mobile view as these settings are independent of desktop.
Theme changes overriding custom settings
After applying a new theme, revisit the Site Colors and Site Fonts panels to reapply your preferred customizations. Consider saving your color palette before switching themes.
Unable to find specific Google Fonts
In the text editor, click More Fonts and use the search bar to find specific fonts. If a font isn't available, try browsing the
Google Fonts category or consider upgrading to a premium plan for additional options.Ready to get started with Wix?
Put this tutorial into practice. Visit Wix and follow the steps above.
Visit Wix →