The Theme Style settings in 10Web Website Builder are your global styling control center, allowing you to set default appearances for various elements like Headings, Buttons, Images, and Form Fields. These settings supersede your theme's styles, enabling you to dictate styles for elements outside of those built by 10Web.
Note:
Users of 10Web platform can also set Global Custom CSS to apply custom styles across the entire site.
Applying theme styles
To have Theme Style settings affect elements and widgets you will need to disable the default colors and fonts from your WordPress dashboard.
To do so:
- Log in to the WordPress dashboard of your website
- Navigate to Elementor > Settings
- In the general tab, find and tick the box for:
Disable Default Colors
Disable Default Fonts
Ticking the box in front of these options will turn off the default colors and acquire the colors and fonts of your theme.
Configuring theme styles
Navigate to the website you want to configure and:
- Click on AI Builder
- Click Edit Website to edit it with the 10Web Builder
- Click on the Site Setting icon located on the left of the top bar
Under Theme Style, you'll find tabs for Typography, Buttons, Images, and Form Fields.
Typography
- Body Text Color: Set the default text color.
- Body Typography: Adjust the default typography settings.
- Body Paragraph Spacing: Define the default spacing after paragraphs.
- Link Color: Choose default colors for links in both normal and hover states.
- Link Typography: Choose default typography settings for links in both normal and hover states.
- Headings (H1-H6): Set default colors and typography for all heading levels.
Buttons
- Typography and Shadows: Define default text styling and shadow for buttons.
- Color and Border: Choose text and background colors, border styles, radius, and padding for buttons.
Images
Note:
Settings are configurable for both normal and hover states.
- Borders and Radius: Specify border styles and corner roundness for images.
- Opacity and Shadows: Adjust opacity levels and shadow effects.
- CSS filters: Set default filters for image effects.
- Transitions: Configure the duration of hover transitions.
Form fields
- Labels: Set colors and typography for field labels.
- Fields: Define text colors, background, borders, shadows, and padding for input fields.
HTML elements affected
The Theme Style settings will affect the following HTML elements :
Background Color: <body>
Buttons: button, input[type="button"], input[type="submit"], .elementor-button
Paragraph Spacing: <p>
Links: <a>
Headings: <h1>...<h6>
Forms: label, input:not([type=”button”]):not([type=”submit”]), textarea, .elementor-field-textual
Images: <img>
Note:
Certain elements remain unaffected as 10Web Builder restricts editing capabilities for them, such as fieldset, input[type="reset"], and others.