Adding Gradient Backgrounds in Composer 2

You can enhance your website’s look by adding gradient backgrounds to sections or articles. Gradients can combine multiple colours from your branding and help create visually appealing pages.

Gradients can be applied to:

• Sections – the full background of a page section

• Articles – just the background of a single content block

🖥️ Adding a Gradient to a Section

Follow these steps to apply a gradient background:

Step 1 – Open the Page
Navigate to the page where you want to add a gradient.

Step 2 – Create or Select a Section

• Create a new section or click Section Options on an existing section.

Step 3 – Open Section Settings

• Go to Settings > General.

Step 4 – Enable Background

• Locate the Background section and toggle it on.

Step 5 – Choose Gradient Type

• From the Type dropdown, select Gradient.

Step 6 – Select Gradient Style

• Linear Gradient: Smooth transition between two colours along a straight line.

• Custom Gradient: Add CSS code for more complex gradient effects. Tools like CSS Gradient are helpful.

Step 7 – Set Direction (Linear Only)

• Choose the gradient direction (e.g., top-to-bottom, left-to-right, diagonal).

Step 8 – Select Colours

• Choose colours from your Design & Appearance settings or add custom colours outside your brand palette.

Step 9 – Set Start & End Colours

• Linear: Only 2 colours allowed

• Custom: Can include multiple colours depending on your CSS

Step 10 – Save Your Page

• Click Save to apply the gradient.

🔗 Example Section

View a sample gradient section here:
Sample Gradient Section

📝 Adding a Gradient to an Article

To apply a gradient to an article instead of a full section:

1. Open the Article Settings for the desired article.

2. Follow the same steps as for sections.

3. Choose Linear or Custom gradient.

4. Colours and styling options are identical to section backgrounds.

✅ Tip: Gradients are a great way to make pages visually engaging without requiring additional images. Use them strategically to highlight important sections or articles.