Adding Solid Background Color

The Background Color property determines the color that appears behind the content on a page. It allows users to customize the visual appearance of their websites by choosing from a wide range of colors.

Summary

1. To add a Solid background color, click the Settings on Slot 1, then click Add layer and select Solid Color

2. The color picker offers various ways to choose a color. One is navigating through colors on a color spectrum. When selecting or adjusting colors, the color picker displays a preview of the selected color, aiding in visualizing its appearance before application. Drag the mouse on the color spectrum.

3. Another option is to drag the circle on the rainbow bar or color continuum to pull up different color ranges in the color spectrum. Then use the spectrum's circle to select your specific color.

4. Or specifying a color in either Red-Green-Blue (RGB) code or Hexadecimal text inputs.

5. Breakpoints are utilized to tailor the styling of a page to fit the screen width of the device it's viewed on. XS and SM correspond to mobile devices and tablets, while MD to XL encompass laptops and larger screens.

Choose MD to change the color for laptops and other larger screens.

Select the color for the background intended for laptops and larger screens and then click Save.

6. The preview on the right displays the content with the colored background.

When Dark theme is selected, the text color automatically changed to White.

Select the XS to observe how the component and background colors are presented on smaller screens.