Do you want to manage the background styling for different Thrive Architect elements? These styling options are available for all Thrive Architect elements.
You can access the background styling options for different Thrive Architect elements when you click them in the editor.
In this article, we’ll show you how you can access the background styling options and everything that’s included in it.
- Accessing the Background Styling Options in Thrive Architect
- Solid Background Styling
- Image Background Styling
- Gradient Background Styling
- Pattern Background Styling
- Background Effects in Thrive Architect
- Choosing a Background Color
- Setting a Video Background
Accessing the Background Styling Options in Thrive Architect
To access the background styling of an element, you need to ensure the element is present on the page.
To begin, open the page in the Thrive Architect editor and click the plus (+) icon in the right column.
In this example, we’ll fetch the Background Section element on the page.
To insert this element on the page, start typing background section in the search bar, drag and drop the Background Section element on page.
When you add the Background Section element on page, click on it to open the options associated with it in the left column.
To manage the background styling of the element, click the Background Styling tab in the left panel.
Under Background Style, you can select a style among the following:
- Solid Color
- Image
- Gradient
- Pattern
- Background Effect
Solid Background Styling
If you want to add a solid background color, select the Solid color option beside the background layer option.
When you select to add a solid color, you’ll see a color picker where you can select the color you want to add here.
After you select the color, click APPLY to apply the color as a background layer.
Image Background Styling
If you want to add an image as a background layer, click the Image box under Background styling.
When you select Image, you’ll see a popup with 2 tabs, Static and Dynamic. This allows you to decide whether you want to display a static or a dynamic image as the background.
Under the Static Image tab, you get the following options:
- Choose Image: You can pick an image that you want to add as a background.
- Static Background Image: If you choose to make the image a static background then, the image itself will not move when visitors will scroll down on your page.
- Image Display: Select how you want to display the image within the element. You can select it to be displayed as:
- Default: Choosing “Default” from the drop-down menu will keep the default size of your picture after inserting it inside the Background Section.
- Cover: This option scales the image as large as possible, without stretching the image. If the proportions of the image differ from the element, the image will be cropped either horizontally or vertically so that there will be no space. The image will have the maximum width, so you will not be able to move it from side to side. A message will show on top of the image, allowing you to move the image up or down to reposition it.
- Contain: This will place the image and make it fit the Background Section heightwise. You will be able to move it around from side to side, just by hovering over the image and dragging it to the left or the right.
- Percentage: This option allows you to choose the exact percentage of the height and the width of the image. To select it, click on “Percentage” in the drop-down menu.
If you select Default or Percentage in the Image display, you’ll get more options to work on. They are as follows:
– Repeat: Selecting Repeat Vertically will cause your image to repeat in the empty vertical space of the Background Section. You can also select it to repeat horizontally within the section. If you want the image to repeat all over the section, select Repeat Both.
– Width and Height: You can also adjust the “Width” and “Height” from these two sliders or manually enter a percentage value inside the boxes next to the sliders.
– Positioning Square: You can use the positioning square to set the position of your image. The square contains 9 dots. You can click on any of them to position the image.
Just like adding a static background image, you can select the Dynamic tab to insert a dynamic background image.
Under the Dynamic tab, you can select a dynamic source for the image. The source could be:
- A featured image
- An author image
- A user image
- A custom field
Just like for a static background image, you can select the image display and decide whether you want a dynamically fetched image to remain static on the scroll.
Gradient Background Styling
The gradient background style will allow you to add a dual color to the background. To add a gradient background, select Gradient as the background style.
When you select Gradient style, you’ll see an extension where you can select the orientation and the angle.
Available orientations under a Gradient background are as follows.
- Linear: This lets you add a linear gradient and select an angle for it.
- Radial: This lets you add a radial gradient background to the selected section.
Pattern Background Styling
You can select the Pattern Background styling if you want to display a pattern in the background section.
To enable a pattern background, click the Pattern box beside styling.
When you click on the pattern background styling, select the pattern from the available options and pick a color you want to apply.
After selecting the pattern and color, click the Apply button.
Background Effects in Thrive Architect
The background effects let you adjust the opacity, grayscale, brightness, contrast, blurr, sepia, invert, saturate, hue rotation.
After you set the background effect, click Apply.
Choosing a Background Color
You can select a background color using the color picker you’ll see when you click the None field.
When you click on the field beside None, you’ll see a color picker where you can select the colors you want to add as a background.
Setting a Video Background
Thrive Architect also lets you add a video background to the section. This can be done by enabling a video background by clicking the toggle button under Background style.
When you click the toggle to enable video background, you can then select the video source in the dropdown below.
You can select among the following sources:
- YouTube
- Vimeo
- Wistia
- Uploaded Video
- Externally hosted video
- VooPlayer/SpotLightr
- Bunny.net Stream
We’ve just seen how you can add different types of background styles in Thrive Architect.
Next, if you want to use Global Gradients in Thrive Architect, please refer to this article.