Overview
After activating a theme, you can customize its appearance: colors, typography, layout, header, footer, dark mode, and even inject custom CSS and JavaScript; all from the admin panel without editing any code.
Accessing theme settings
- Go to Appearance → Themes.
- Find your active theme (marked with a badge).
- Click the "Settings" button on the theme card.
Alternatively, some themes add a direct "Theme Settings" link in the Appearance section of the sidebar.
Color settings
Change the global color palette for your website:
| Setting | Description | Used for |
|---|---|---|
| Primary Color | The main brand color. | Buttons, links, active states, accents. |
| Secondary Color | A complementary color. | Secondary buttons, badges, hover states. |
| Accent Color | A highlight color for attention-grabbing elements. | Badges, highlights, call-to-action elements. |
| Text Color | The main body text color. | Paragraphs, labels, general content. |
Colors are applied using CSS custom properties, so changes affect the entire site consistently.
Typography settings
| Setting | Description |
|---|---|
| Heading Font | Google Font used for headings (H1–H6). Choose from: Inter, Poppins, Montserrat, Playfair Display, Roboto, Open Sans, Lato, Source Sans Pro. |
| Body Font | Google Font used for body text, paragraphs, and labels. Choose from: Inter, Poppins, Roboto, Open Sans, Lato, Source Sans Pro, Nunito, Work Sans. |
| Base Font Size | The root font size (14px, 16px, or 18px). Affects all relative sizing throughout the site. |
Tip: For a professional look, use contrasting font families for headings and body, for example, a serif heading font (Playfair Display) with a clean sans-serif body font (Inter).
Layout settings
| Setting | Description |
|---|---|
| Layout Style | Wide: Content stretches to a defined maximum width (default). Boxed: Content is contained in a centered box with a visible background. |
| Container Width | Maximum content width in pixels. Adjustable from 960px to 1920px. Separate settings for wide and boxed modes. |
Header settings
Customize the website header/navigation area:
| Setting | Description |
|---|---|
| Full-Width Header | When enabled, the header stretches edge-to-edge. When disabled, it follows the container width. |
| Header Style | Default: Standard fixed header. Transparent: Overlays the hero section with transparent background. Sticky: Stays visible as you scroll. |
| Header Height | Height in pixels (e.g., 70px). Leave empty for the theme's default. |
| Background Color | Header background color (hidden when style is "Transparent"). |
| Background Image | Upload an image for the header background. |
| Text Color | Color for navigation links and text. |
| Button Label / Background Color | Colors for the header CTA button (e.g., "Contact Us" button). |
| Logo Height | Height of the logo in the header (e.g., 40px). Leave empty for the default. |
| Text Shadow | Add a subtle shadow to header text for better readability over images. |
| Border Bottom | Width and color of a border line at the bottom of the header. |
Footer settings
| Setting | Description |
|---|---|
| Footer Style | Default, Dark, or Minimal. |
| Background Color | Footer background color. |
| Background Image | Upload a background image for the footer. |
| Title / Text / Link Colors | Individual color pickers for footer headings, body text, and hyperlinks. |
| Border Top | Width and color of a border line at the top of the footer. |
| Back to Top Button | Show or hide the "scroll back to top" button that appears when visitors scroll down. |
Appearance mode (dark mode)
| Setting | Description |
|---|---|
| Default Mode | Light: Standard bright appearance. Dark: Dark background with light text, easier on the eyes in low light. |
| Allow Mode Toggle | When enabled, visitors see a sun/moon toggle icon to switch between light and dark mode. Their preference is saved in the browser. |
Tip: If your brand is dark-themed (e.g., a tech company), set the default mode to "Dark" and enable the toggle so visitors can switch to light if they prefer.
Custom CSS & JavaScript
For advanced customization without editing theme files:
Custom CSS
Enter raw CSS that is injected into every page. Useful for:
- Fine-tuning specific element styles
- Adding small visual adjustments
- Overriding default theme styles
Example:
/* Make the hero section taller */
.hero-section {
min-height: 600px;
}
/* Change link hover color */
a:hover {
color: #e74c3c;
}Custom JavaScript
Enter raw JavaScript that runs on every page. Useful for:
- Third-party integrations (chat widgets, analytics)
- Custom interactive behavior
- A/B testing scripts
Caution: Custom JavaScript runs on every page for all visitors. Test thoroughly before saving; a JavaScript error can break the entire front-end. Use the browser's developer console to debug issues.
Resetting to defaults
If you want to start fresh or undo all your customizations:
- Go to Appearance → Themes → Settings.
- Click the "Reset to Defaults" button at the bottom.
- Confirm the action.
This restores all theme settings to the original values defined by the theme developer and deletes any uploaded header/footer images.
Previewing themes
You can preview a theme before activating it by adding ?theme=theme-name to any front-end URL. For example:
https://yoursite.com/?theme=creative
https://yoursite.com/about?theme=elegantThis loads the page with the specified theme without changing the active theme for other visitors.
Switching themes
- Go to Appearance → Themes.
- Click "Activate" on the theme you want.
- The change is instant; your website immediately uses the new theme.
Note: Each theme has its own independent settings. When you switch themes, the new theme uses its own saved settings (or defaults if it's never been configured). Your previous theme's settings are preserved and will be restored if you switch back.