Apply a Gradient Color to Your Content Containers

Apply a Gradient Color to Your Content Containers

Adding a gradient color to your content containers can instantly make your website more visually appealing and dynamic. You can apply gradients to text boxes, behind images, or even simple lists.

ezgif.com-video-to-gif.gif

Steps to Apply a Gradient to Your Container

Follow these steps to give your content containers a gradient background:

  1. Click on the Design tool in the gray navigation bar.

  2. Locate the content block you want to change the background for within the preview window. This could be an Image Block, a Text Block, or any other content container.

  3. Click directly on the content block to open the design menu options on the right-hand side of the preview.

  4. Open the dropdown menu titled Container.

    Screen_Shot_2019-02-26_at_12.30.55_PM.png

  5. Under Fill Type, select the Gradient option.

    Screen_Shot_2019-02-26_at_12.32.42_PM.png

  6. Use the options that appear to set the angle of the gradient and choose the colors you want to include in your gradient.

  7. If needed, you can also adjust the opacity of the colors directly within the color picker.

    Screen_Shot_2019-02-26_at_12.38.57_PM.png

  8. Once you're satisfied with your gradient, click the Save button to ensure your changes are stored, and then Publish to make them live on your website.

    • Related Articles

    • Adjust the Container's Background Color/Opacity

      1. Select Design in the gray navigation bar. 2. Navigate to your desired page using your site's navigation 3. On the righthand side, select the "Page" tab 4. Select the block title that you're changing 5. From here, find the Container dropdown near ...
    • Fully Stretch Background Image/Images for Content Blocks

      You can add a fully stretched background to your content blocks by following these steps: 1. Select the Design tool in the gray navigation bar. Under the Sitewide tab in the design options on the right-hand side of the preview, select Styles. 2. ...
    • Change the Color of Your Links

      You can change the color of your hyperlinks globally so that all links on your website apply to the same rules. How to change hyperlink colors 1. Select the Design tool in the gray navigation bar, and select the Sitewide tab in the right-hand sidebar ...
    • Change the Color of Your Buttons

      You can change the background color of all of the buttons on your website, to create a cohesive color and theme throughout your site. How to change button colors sitewide 1. Select Design at the top of the page. 2. Select the Sitewide tab on the ...
    • Change the Background of Your Mobile Navigation Menu

      The background of your expandable navigation menu on mobile devices can be changed to the color of your choice. How to Change the Mobile Navigation Background 1. Select the Design tool in the gray navigation bar. 2. Select Navigation under Sitewide ...