Setting Solid Background Colors instead of Gradients

Learn two simple methods to set a solid background color instead of a gradient in Design Packs sections.

Method 1: Using Color Stops

The simplest way to create a solid background:

1. Open the background color setting

2. Set both color stops to the same color:

   • Click the first color stop

   • Select your desired color

   • Click the second color stop

   • Select the same color

   • Make sure opacity is set to 100% for both stops (the field next to the Hex code)

This method works well when you want to:

• Use the color picker

• Select from your theme colors

• Save colors for later use

• Maintain consistency with your theme

Method 2: Using CSS Color Values

For direct color control:

1. Open the background color setting

2. Click the dropdown in the top-left corner

3. Switch from "Gradient" to "CSS"

4. Enter your color value:

   • Hex code (e.g., #FF5733)

   • RGB (e.g., rgb(255, 87, 51))

   • Color name (e.g., coral)

This method is ideal when you:

• Have specific hex codes to use

• Want to copy/paste colors

• Need to match exact brand colors

• Prefer working with CSS values

Examples

Using Color Stops

1. First stop: #FF5733
2. Second stop: #FF5733
Result: Solid coral background

Using CSS

1. Switch to CSS mode
2. Enter: #FF5733
Result: Solid coral background

Tips

• Both methods produce the same result

• Choose the method that fits your workflow

• Save commonly used colors in your theme settings

• Use the method that's most comfortable for you

Need help? Contact our support team at [e-mail] for assistance.

Pro Tip: The CSS method is faster when you have specific color codes, while the color stop method is better for exploring and saving theme colors.