SCSS Elementor Design Setup

December 19, 2024 · AI Conversations

User

The colors need to be both present as color variables in scss and global colors in Elementor.

The font sizes should be present in scss as h1-h6.

Button styles should be present in CSS and based on elementor button state (normal, success, etc.).

If you need the icon font, please let me know.

Important: Please develop mobile first here, so every media query should be upscaling (min-width).

Header Animation is also active: When scrolling down the header changes its background color and font/logo color.

Assistant

To address your requirements, I will outline how to structure the SCSS and integrate it with Elementor for a consistent design system. This includes setting up color variables, font sizes, button styles, media queries, and header animation. Let’s break it down:

—

### 1. **Color Variables and Global Colors in Elementor**

In `variables.scss`:

// Color Variables
$primary-color: #ff5722;  // Replace with your color
$secondary-color: #03a9f4;
$text-color: #212121;
$background-color: #ffffff;

// Elementor Global Colors
:root {
  --e-global-color-primary: #{$primary-color};
  --e-global-color-secondary: #{$secondary-color};
  --e-global-color-text: #{$text-color};
  --e-global-color-background: #{$background-color};
}

In Elementor:
– Go to **Site Settings > Global Colors**.
– Assign the SCSS variables as global colors for consistency.

—

### 2. **Font Sizes for h1-h6**

In `typography.scss`:

// Font Sizes (Mobile First)
$h1-font-size: 2rem;
$h2-font-size: 1.75rem;
$h3-font-size: 1.5rem;
$h4-font-size: 1.25rem;
$h5-font-size: 1rem;
$h6-font-size: 0.875rem;

h1 { font-size: $h1-font-size; }
h2 { font-size: $h2-font-size; }
h3 { font-size: $h3-font-size; }
h4 { font-size: $h4-font-size; }
h5 { font-size: $h5-font-size; }
h6 { font-size: $h6-font-size; }

// Media Queries (Upscaling)
@media (min-width: 768px) {
  $h1-font-size: 2.5rem;
  $h2-font-size: 2rem;
  $h3-font-size: 1.75rem;
  $h4-font-size: 1.5rem;
  $h5-font-size: 1.25rem;
  $h6-font-size: 1rem;
}

—

### 3. **Button Styles Based on Elementor States**

In `buttons.scss`:

// Base Button Style
.e-btn {
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

// Button States
.e-btn-normal {
  background-color: $primary-color;
  color: $background-color;
}

.e-btn-success {
  background-color: $secondary-color;
  color: $background-color;
}

.e-btn:hover {
  background-color: darken($primary-color, 10%);
}

.e-btn-success:hover {
  background-color: darken($secondary-color, 10%);
}

—

### 4. **Mobile-First Media Queries**

Use the following pattern for SCSS:

// Base styles for mobile
body {
  font-size: 16px;
}

// Tablet and larger
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

// Desktop and larger
@media (min-width: 1024px) {
  body {
    font-size: 20px;
  }
}

—

### 5. **Header Animation**

In `header.scss`:

// Default Header Style
.header {
  background-color: $background-color;
  color: $text-color;
  position: fixed;
  width: 100%;
  transition: background-color 0.3s, color 0.3s;
}

// Scrolled Header Style
.header.scrolled {
  background-color: $primary-color;
  color: $background-color;
}

In JavaScript (for scroll detection):

document.addEventListener("scroll", function () {
  const header = document.querySelector(".header");
  if (window.scrollY > 50) {
    header.classList.add("scrolled");
  } else {
    header.classList.remove("scrolled");
  }
});

—

### 6. **Icon Fonts**

If you need to include icon fonts (e.g., FontAwesome or custom icons):
1. Provide the font file or CDN link.
2. Add it to the SCSS or HTML head:

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');

—

### Next Steps

– **Implement the SCSS** in your project structure.
– **Link Elementor Global Settings** to SCSS variables.
– Add **JavaScript for header animation** in the main script file.
– Test across devices to ensure mobile-first responsiveness.

Let me know if you need further assistance, such as setting up the icon font or refining specific styles!

SCSS Elementor Design Setup

Leave a Comment Cancel