Using SCSS in Elementor

Here's a guide on how to use SCSS variables in Elementor:

### Method 1: Using a Child Theme with SCSS

1. **Set up a child theme:**
– If you haven't already, create a WordPress child theme for your site. This will allow you to customize styles without losing changes when your theme updates.
– You can follow [WordPress child theme setup documentation](https://developer.wordpress.org/themes/advanced-topics/child-themes/) for guidance.

2. **Install SCSS preprocessor:**
– Install a tool like [Node.js](https://nodejs.org/) and [Sass](https://sass-lang.com/) to compile SCSS into CSS.
– You can use a task runner like Gulp or Webpack to automate the process.

3. **Create SCSS file in your child theme:**
– Create a `.scss` file (e.g., `style.scss`) inside your child theme directory.
– Define your SCSS variables and styles in this file. For example:

$primary-color: #3498db;
   $secondary-color: #2ecc71;

   body {
     background-color: $primary-color;
     color: $secondary-color;
   }

4. **Compile SCSS to CSS:**
– Use Sass or your preferred method to compile the SCSS file into CSS (usually into a `style.css` file). You can set this to happen automatically when you save changes to your SCSS file.

5. **Enqueue the compiled CSS in WordPress:**
– Enqueue the compiled CSS file in your child theme’s `functions.php` file:

function enqueue_child_theme_styles() {
       wp_enqueue_style( 'child-theme-style', get_stylesheet_directory_uri() . '/style.css' );
   }
   add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles' );

6. **Use the variables in Elementor:**
– The SCSS variables themselves won't be usable directly in Elementor, but once you compile the SCSS into CSS, the generated styles will be applied globally. When you edit in Elementor, your site will reflect those styles.

### Method 2: Using a CSS plugin or Customizer

1. **Install a plugin to process SCSS:**
– Some WordPress plugins like "[Simple Custom CSS and JS](https://wordpress.org/plugins/custom-css-js/)" support SCSS. You can write SCSS code directly into these plugins, and they will compile it for you.

2. **Add SCSS to your site:**
– In the plugin settings, create a new SCSS block and define your SCSS variables and styles.
– The plugin will compile the SCSS into CSS and apply it to your website.

### Method 3: Use Elementor’s Custom CSS

1. **Compile SCSS into CSS externally:**
– Similar to Method 1, compile your SCSS file into CSS using any preprocessor (e.g., Sass).

2. **Copy compiled CSS into Elementor:**
– Go to **Elementor > Page Settings** or **Section Settings**.
– Paste the compiled CSS into the Custom CSS area.

This way, you can benefit from SCSS features like variables but still use the native Elementor interface for direct styling.

### 1. **Set Global Colors (Elementor Pro or Free Version)**

Elementor allows you to set global colors so you can easily reuse your custom colors across different sections of your website. Here's how:

#### Step-by-Step:

1. **Open Elementor Editor:**
– Open any page or post with Elementor by clicking on **Edit with Elementor**.

2. **Go to Site Settings:**
– In the Elementor editor, click on the top-left hamburger menu (three lines).
– Select **Site Settings**.

3. **Select Global Colors:**
– In the Site Settings panel, click on **Global Colors**.

4. **Add Your Custom Colors:**
– You'll see pre-existing global colors (Primary, Secondary, Text, Accent, etc.). You can either:
– **Edit** these pre-defined colors by clicking on them.
– **Add New Colors** by clicking on the “+ ADD COLOR” button.
– Choose your desired custom color using the color picker or by entering the hex code (e.g., `#3498db` for a specific blue).

5. **Save the Changes:**
– Once you've added your custom colors, click **Save Settings**.

Now, whenever you're editing a widget or section, you can use the global colors by clicking the **Global** option in the color picker.

### 2. **Use Custom Colors in Individual Elements**

If you don’t want to use global colors and only want to add custom colors manually to specific elements, follow these steps:

#### Step-by-Step:

1. **Open the Elementor Editor:**
– Open any page or post with Elementor by clicking on **Edit with Elementor**.

2. **Edit a Widget:**
– Select any widget (text, heading, button, etc.) that you want to customize.

3. **Select the Color Option:**
– In the widget’s settings, go to the **Style** tab.
– Find the color option (e.g., for text color, background color, etc.).

4. **Enter a Custom Color:**
– Open the color picker and enter the hex code (e.g., `#ff5733` for orange).
– You can also use the RGB or HSL sliders if you prefer to customize the color this way.

5. **Save the Changes:**
– After adding your custom color, click **Save** or **Publish**.

### 3. **Save Custom Colors in Color Picker (Personalized Palette)**

To make your custom colors available in Elementor's color picker for easier reuse without the global settings:

1. **Open the Elementor Editor:**
– Open any page or post with Elementor.

2. **Select a Widget and Open Color Picker:**
– Click on any widget (e.g., text, button, background).
– Go to the **Style** tab and open the color picker.

3. **Add Your Custom Color:**
– Pick a custom color using the color picker or by entering the hex code.
– Once you select a color, you will notice a “+” button under the color squares. Click the “+” button to save the color in your color palette.
– This will add the color to the palette, and you can use it later across other sections and widgets in Elementor.

4. **Save Your Changes:**
– After customizing, click **Save** or **Publish**.

This method allows you to quickly access the custom colors you have saved in the color picker without having to input the hex code every time.

Using these methods, you can efficiently manage and reuse your custom color palette throughout your Elementor website design.