👨‍🎨Homepage Sections Background Color

You can add a unique touch to your home page by assigning custom background colors to each section. This feature utilizes CSS variables, making it simple to apply your desired colors across different sections.

List of variables by sections:

• 1 + 2 light background

  --section-one-plus-two-light-bg

• 1 + 2 dark background

  --section-one-plus-two-dark-bg

• 1 (Featured) + 2 light background

  --section-one-featured-plus-two-light-bg

• 1 (Featured) + 2 dark background

  --section-one-featured-plus-two-dark-bg

• 1 + 3 light background

  --section-one-plus-three-light-bg

• 1 + 3 dark background

  --section-one-plus-three-dark-bg

• 1 (Featured) + 3 light background

  --section-one-featured-plus-three-light-bg

• 1 (Featured) + 3 dark background

  --section-one-featured-plus-three-dark-bg

• List with sidebar featured posts light background

  --section-list-sidebar-with-featured-posts-light-bg

• List with sidebar featured posts dark background

  --section-list-sidebar-with-featured-posts-dark-bg

• List with sidebar latest posts light background

  --section-list-sidebar-with-latest-posts-light-bg

• List with sidebar latest posts dark background

  --section-list-sidebar-with-latest-posts-dark-bg

• List with sidebar (with image) featured posts light background

  --section-list-with-img-sidebar-with-featured-posts-light-bg

• List with sidebar (with image) featured posts dark background

  --section-list-with-img-sidebar-with-featured-posts-dark-bg

• List with sidebar (with image) latest posts light background

  --section-list-with-img-sidebar-with-latest-posts-light-bg

• List with sidebar (with image) latest posts dark background

  --section-list-with-img-sidebar-with-latest-posts-dark-bg

• Posts with date + sidebar featured posts light background

  --section-posts-with-date-sidebar-with-featured-posts-light-bg

• Posts with date + sidebar featured posts dark background

  --section-posts-with-date-sidebar-with-featured-posts-dark-bg

• Posts with date + sidebar latest posts light background

  --section-posts-with-date-sidebar-with-latest-posts-light-bg

• Posts with date + sidebar latest posts dark background

  --section-posts-with-date-sidebar-with-latest-posts-dark-bg

• Categories (tags) tabs light background

  --section-categories-tabs-light-bg

• Categories (tags) tabs dark background

  --section-categories-tabs-dark-bg

• Grid 2 column light background

  --section-grid-two-column-light-bg

• Grid 2 column dark background

  --section-grid-two-column-dark-bg

• Grid 2 column + sidebar with featured posts light background

  --section-grid-two-column-sidebar-with-featured-posts-light-bg

• Grid 2 column + sidebar with featured posts dark background

  --section-grid-two-column-sidebar-with-featured-posts-dark-bg

• Grid 2 column + sidebar with latest posts light background

  --section-grid-two-column-sidebar-with-latest-posts-light-bg

• Grid 2 column + sidebar with latest posts dark background

  --section-grid-two-column-sidebar-with-latest-posts-dark-bg

• Grid 3 column light background

  --section-grid-three-column-light-bg

• Grid 3 column dark background

  --section-grid-three-column-dark-bg

• Grid 4 column light background

  --section-grid-four-column-light-bg

• Grid 4 column dark background

  --section-grid-four-column-dark-bg

• Big slider light background

  --section-big-slider-light-bg

• Big slider dark background

  --section-big-slider-dark-bg

• Medium slider light background

  --section-medium-slider-light-bg

• Medium slider dark background

  --section-medium-slider-dark-bg

• Slider 2 posts light background

  --section-slider-two-posts-light-bg

• Slider 2 posts dark background

  --section-slider-two-posts-dark-bg

• Small slider light background

  --section-small-slider-light-bg

• Small slider dark background

  --section-small-slider-dark-bg

• Medium posts + small posts light background

  --section-medium-small-posts-light-bg

• Medium posts + small posts dark background

  --section-medium-small-posts-dark-bg

• Membership light background

  --section-membership-light-bg

• Membership dark background

  --section-membership-dark-bg

• Subscribe banner light background

  --section-subscribe-banner-light-bg

• Subscribe banner dark background

  --section-subscribe-banner-dark-bg

• Author name with image and bio light background

  --section-with-author-light-bg

• Author name with image and bio dark background

  --section-with-author-dark-bg

• Subscribe banner with benefits light background

  --section-subscribe-banner-with-benefits-light-bg

• Subscribe banner with benefits dark background

  --section-subscribe-banner-with-benefits-dark-bg

2. Access your website's CSS file or an area where you can input custom CSS, often found within the site settings or theme customization panel.

3. Define the desired background color for the section by using the CSS variable. For example, to change the 1 + 2 light background color to a soft pink, you would write:

4. :root {
     --section-one-plus-two-light-bg: #ffc0cb;
   }

   4. Save your changes. This will apply the new background color to the specified section across your website. Repeat these steps for any other sections you wish to customize.

To customize a section's background color, follow these steps:

1. Identify the CSS variable associated with the section you wish to customize. Each section has a designated variable, such as --section-one-plus-two-light-bg for the 1 + 2 light background section.

2. Go to Settings > Code injection from the admin panel

3. Open Site header tab

4. Specify your preferred variables along with their corresponding colors in the following manner:

<style>
  :root {
    --section-membership-light-bg: #EFF8FC;
    --section-subscribe-banner-dark-bg: #212121;
   }
</style>

5. Click Save

This method provides you with the flexibility to experiment with and update the aesthetics of your home page.

To customize the sidebar's banner widget input's background color, follow these steps:

1. Go to Settings > Code injection from the admin panel

2. Open Site header tab

3. Add the following code and specify your preferred color

<style>
  :root {
    --input-background-color: YOUR_PREFFERED_COLOR;
  }
</style>

4. Click Save