Apply a Gradient Color to Your Content Containers

Apply a Gradient Color to Your Content Containers

Changing the background color of your content blocks just got a lot more interesting. Now, with a simple click of your button, create a gradient color on your text boxs, behind images, or even behind your simple lists.

ezgif.com-video-to-gif.gif

To apply a gradient to your container:

1. Click on the Design tool in the gray navigation bar, and locate the content block that you'd like to change the background for. (Our example above showcases an Image Block, and the photos below show a text block.)

2. Click on the content to open the design menu options on the right-hand side of the preview. Open the drop-down menu titled Container.

Screen_Shot_2019-02-26_at_12.30.55_PM.png

3. Select the Gradient option under Fill Type, and use the options below to set the angle of the gradient and the colors you'd like to show in the gradient.

Screen_Shot_2019-02-26_at_12.32.42_PM.png

4. Change the opacity of the colors within the color picker.

Screen_Shot_2019-02-26_at_12.38.57_PM.png

5. Click on the Save button to make sure your changes save, and then Publish to take your changes live!

 

    • Related Articles

    • Change the Background of a Content Block

      Give your background a splash of color by following these steps to modify the transparency and shades of your background: 1. Select Design in the navigation bar, and locate the page you’d like to change the background color for. On the right-hand ...

    • Fully Stretch Background Image 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. ...

    • Add a Background/Custom Background to Your Website Page

      You can customize the background for specific pages on your website by following these steps: 1. Select the Design tool in the gray navigation bar, or the blue Design this page button on your Content page to enter the Design tool. Navigate to the ...

    • 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. To change the color of your links: 1. Select the Design tool in the gray navigation bar, and select the Sitewide tab in the right-hand ...

    • Change the Color of Your Buttons

      The color of your button is set in the Sitewide settings, meaning that all of the buttons on your website will be applied to the same rules unless specified through custom coding. To set your Button color: 1. Select the Design tool in the gray ...