Release Notes
Sitelink Training
StorageForum
Sitelink Status
Storable

Add or Edit a Background Color, Image, or Video on Your Storable Website

Storable Websites

Follow the instructions below to add or edit a background color, image, or video to a web page section on your Storable Website.

Background section edit functionality is available for the following sections:

  • Header with text box

  • Header: Logo and Nav

  • Facility Info: Buttons

  • Facility Info: Hours

  • Content Layout : 1 Column: with Border

  • Content Layout : 2 Column: Text Header (right)

  • Content Layout : 2 Column: Text Header (left)

  • Content Layout : 2 Columns

  • Content Layout : 3 Columns

  • Content Layout : 3 Columns: Alt Mobile Stack

  • Call to Action : Banner (Background color only)

  • Call to Action : Custom Editor

1. Hover over the web page section you want to update and click the gear icon.

2. Click Edit.

Edit background color

1. On the Background tab of the Edit Section screen, select Color.

2. Select from your site’s Light Grey, Primary, Secondary, or Tertiary colors, or select Custom to pick a new color.

Select Custom if you want to select a color manually or enter a HEX code.

3. If you want to create a color gradient, click the Gradient tab.

  • You can choose between a linear or circular gradient.

  • You can adjust the angle of a linear gradient or the radius of a circular gradient.

  • You can adjust the amount of each color that will be used in the gradient using the sliders.

  • You can select the second color for the gradient from the second color bar to give a multi-colored gradient effect.

  • You can adjust the opacity for your color sections.

4. In the Overlay tab, you can select an overlay style for the section.

  • Behind the content area will create an overlay only behind the content area.

  • Full overlay covers the whole section.

5. You can select the color of the overlay from the Overlay Color, Gradient, and Opacity in the same way as shown for the background color in the previous steps.

6. Once you’ve selected and configured your background color, click Save.


Edit background video

Videos can be embedded in the background of a web page section from either YouTube or Vimeo.

1. On the Background tab of the Edit Section screen, select Video

2. Paste in the embed code from YouTube or Vimeo, or enter the URL in the Video URL field.

3. Enter Alt Text and Title Text for the video (these fields are required).

4. Click Save when you are done.

Note: The height of the content area will impact the amount of the video that is seen. We suggest adjusting the height of the video accordingly and making sure the aspect ratio of the video matches the section structure.


Fluid (content-layout) sections support a full-section background video from YouTube or Vimeo. To add one in the Website Builder:

  1. Open your site in the Website Builder and go to the page with the fluid (content-layout) section you want to edit.

  1. Click the Content Layout gear icon in the top right corner of the section.

  1. Add your video using either method:

    • Paste the Embed Code from a YouTube or Vimeo video — the Video URL and video fields populate automatically, or

    • Enter the video's link directly in the Video URL field.

Only YouTube and Vimeo are supported. If the link isn't a valid YouTube or Vimeo URL, you'll see an inline error and won't be able to save until it's corrected.


  1. Enter Alt Text (required) to describe the video for accessibility. You won't be able to save without it.

  2. (Optional) Enter Title Text.

  3. If you would like the video to loop, click the toggle to Loop Video.

  4. Click Save.


The video will now render as the section's background: filling the section behind your content and playing automatically on a muted loop with no player controls. It looks the same in the builder and on your published site.

Tips

  • The same video is used across desktop, tablet, and mobile — there's no separate mobile video.

  • Adding a video won't remove an existing background color or image; the video layers over them, behind your content.

  • The height of the section's content area affects how much of the video is visible. Adjust the section height and pick a video whose aspect ratio suits the section for the best result.


Edit background image

Individual images or an image slideshow can be added to the background of a section.

1. On the Background tab of the Edit Section screen, select Image.

2. Click Upload Image to upload a new image or click Select from Gallery to select an image from your image gallery. You can add up to 5 images if you want to create a slideshow.

3. Enter Alt Text and Title Text for the image(s) (these fields are mandatory).

4. If you select multiple images and want to create a slideshow, click the Enable Slideshow Controls toggle.

Make selections for the follow settings:

  • Transition Type - Select the transition type to use between images.

    • Slide (left to right or right to left)

    • Fade

    • Zoom in

    • Zoom out

  • Slide Duration - Select how long each image will be shown in seconds. (0-10 Seconds in increments of .5 seconds)

  • Transition Speed - Select how long the transitions will be in milliseconds. (0 - 1000 milliseconds in increments of 100 ms.)

5. Click Save when you’re done.

When you're done editing, click the green Publish button at the top right of your screen. Hovering your cursor over this button will also let you know whether or not you have unpublished changes.



Feedback received!

Error submitting feedback, please try again later