Theme Style

Establishing global settings that will apply throughout your entire website is another time-saving energy drill that will ease your workflow like magic. Let us introduce to you Theme Style. These are global settings that will be applied all over your website and its suburb areas. This will affect your background, buttons, typography, images, and form fields. 

Note: For the Theme Style settings to take place you must disable the Custom Fonts and Custom Colors settings. To do that go to the WP Dashboard > Elementor > Settings, check the boxes next to each to disable.

Set the Theme Style settings 

To open the Theme Style settings click on the [hamburger menu icon] and scroll to Theme Style and click on it. 

Background

Choose a background type either

Classic

  1. Color - Choose a color from the Advanced Color Picker to set as your background
  2. Image - Pick an image to be set as your background

Gradient

  1. Color - Choose the primary color for your background
  2. Location - Set the location for the primary color, this will affect its spread 
  3. Second Color - Pick a second color to match the gradient 
  4. Location - Set the location of the second color
  5. Type - Choose a gradient type to either be Linear or Radial 
  6. Angle - Set the gradient angle 

Typography

Body

  1. Text Color - Decide on a color for your text 
  2. Typography - Set the typography options, like the fonts size, font family, weight, style, and more
  3. Paragraph Spacing - Set the default spacing between paragraphs

Link 

Normal or Hover

  1. Color - Choose the color for your links
  2. Typography - Set the typography options 

H1 to H6

  1. Color - Set the colors to each of the headings separately from H1 to H6 
  2. Typography - Set the typography settings to each of the headings separately from H1 to H6 

Buttons

  1. Typography - Set the typography options for the buttons
  2. Text Shadow - Choose to have a text-shadow and arrange the Color, Blur, Horizontal positioning and Vertical positioning of the shadow

Normal or Hover  

  1. Text Color - Set the color of the text for the buttons
  2. Background Color - Pick a color to be set as the background of the buttons
  3. Box Shadow - Decide whether or not to put a shadow on the buttons and adjust the Color, Horizontal, Vertical, Blur, Spread, and Position to Outline or Inset 
  4. Border Type - Pick a border for your buttons from the drop-down menu. It can be Solid, Double, Dotted, Dashed, Groove 
  5. Border Radius - Set the values to soften the edges of the buttons. You can unlink the values and type them independently. 
  6. Padding - Set the default padding values

Form Fields

Label

  1. Color - Choose the color for your form fields
  2. Typography - Set the typography options to the form fields

Field

  1. Typography - Set the typography options for the text inside the form field

Normal or Focus

  1. Text Color - Choose a color for your form fields text 
  2. Background Color - Choose the default background color for your Input Field 
  3. Box Shadow - Set the box-shadow options for the form fields 
  4. Border Type - Choose to have a border and pick from the Solid, Double, Dotted, Dashed, Groove type 
  5. Border Radius - Set the values to soften the border edges for your forms. You can unlink the values and type them independently. 
  6. Padding - Set the default padding values

Images

Normal or Hover

  1. Border Type - Decide to put borders on your images and you can choose from the Solid, Double, Dotted, Dashed, Groove options
  2. Border Radius - Type the values to set a radius around the borders of your images. You can unlink the values and type them independently. 
  3. Opacity - Set the level of opacity on your images by dragging the wheel in the Normal and Hover modes.
  4. Box Shadow - Decide to put a shadow around your images. Adjust the settings of Color, Horizontal, Vertical, Blur, and Spread 
  5. CSS Filters - Play around with CSS Filters to make the most out of your images. Adjust the Blur, Brightness, Contrast, Saturation, and Hue to accentuate your images.

Custom CSS

  1. Apply Custom CSS rules to your entire website and set global settings as you wish. 

General Setting, History, and Publish 

Like other settings, Theme Style lets you manage your general settings where you can Save the General Settings, name them something memorable, you can create multiple general settings and have them applied in various scenes on your website. Theme Settings also work with History and Revisions, where you can go back to previous changes and actions you have made. You can also Publish or Preview the settings or save them as Draft to test these settings on your live site. The changes will only take place after you click on Publish. 

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.