Adding or editing a background color, image, or video on your Storable Website

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.

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.

publish_hover.png

Still have questions?
Don't be afraid to ask us. We're here to help you.
Powered by Zendesk