In order to edit layout or element properties on your Storable Website, you must have website builder access. If you do not have access to the full website builder, you can contact Support for assistance making changes at edgesupport@storable.com.
You can customize the properties of each Layout and Element on your webpages by editing your website content. To do so, click the button at the top right corner of the page to open the Properties panel of a layout or element.
When editing properties, consider how the page will look on all devices, including tablets and mobile devices.
The following properties can be edited:
Size
X axis - How far from the left side of the container does this element sit? Enter a percentage of the container.
Y axis - How far from the top of the container does this element sit? Enter a percentage of the container.
Width - The width of the element in relation to its container. Enter a percentage of the container. You can also manually adjust the element's width by clicking and dragging the side of the component.
Height - The height of the element in relation to its container. Enter a percentage of the container. You can manually adjust the element's height by clicking and dragging the top or bottom of the component.
Design
The design section of the properties panel allows you to change how the element/container looks. Please note: Not all design properties can be edited for all Elements.
Background Color - The background color of the Layout or Element. You can use theme colors, solid colors, or gradients.
Background Image - The background image of the Layout or Element. You can upload a new one or use one from the media gallery.
Border Color - The color of the border for the Layout or Element. You can use theme colors, solid colors, or gradients.
Border Width - The width of the border in pixels.
Corners - The radius in pixels for rounding the corners for the Layout or Element. You can modify each corner’s radius individually by clicking the corners icon.
Shadow - If the Apply Shadow toggle is enabled, the Layout or Element will include a shadow. You can control the distance (in pixels), size (in pixels), blur (in pixels), color (solid, theme, or gradient), and opacity (percentage).
Animations - In the Animation options dropdown box, you can select an animation to apply to the element. Please note: Animations can only be applied to fluid elements. Only one animation can be applied to an element at a time.
Fade in: The content will fade into view.
Zoom in: The content will start small and zoom into its full size, based on the size set for the element.
Slide In Top: The content will slide down from the top of the parent section.
Slide In Bottom: The content will slide up from the bottom of the parent section. This is recommended for containers or below the pages, so it slides upward from the outside.
Slide In Left: The content will slide to the right from the left side of the element’s placement within the parent section.
Slide In Right: The content will slide to the left from the right side of the element’s placement within the parent section.
Flip In: The content flips into view.
Blur In: Content starts blurred, and becomes clearly visible.
Rise Up: The content moves a short distance upward. This is recommended for card-size widgets or text widgets.
Bounce In: The content will start small, ‘bounce’ into being larger, then smaller, then full size.
Rotate In: The content will start slightly skewed and rotate clockwise until it reaches its final position on the page.
Layout
The Layout section allows you to align and arrange content. For containers, you can determine how overflowed content will be handled. The align and arrange options are defined below:
1 - Align to the left side of the container
2 - Align vertically within the container
3 - Align to the right side of the container
4 - Align on the top of the container
5 - Center in the container without impacting height
6 - Align to the bottom of the container
7 - Center exactly in the container, by both height and width
8 - Move this layer one layer forward in the layer stack
9 - Move this layer all the way to the front of the layer stack
10 - Move this layer one layer back in the layer stack
11 - Move this layer all the way to the back of the layer stack
For containers, the content overflow options are:
Hide - Any content overflow will be hidden.
Show - Any content overflow will be shown and extend past the bottom of the container.
Scroll - The container will include a scrollbar if the content overflows.
Position
Position properties allow you to change padding and margins for all four sides of a container.
Container padding can be edited by entering the number of pixels that should be included as padding on the top, bottom, left, and right sides of the container.
Element margins can be edited by entering the number of pixels that should be included as margins on the element's top, bottom, left, and right sides.
Adjust
You can control the following from the Adjust section:
Rotate - Enter positive values to rotate the element clockwise up to 360 degrees (back to center). Enter negative values to rotate the element counterclockwise.
Scale - Enter the element's size as a percentage of the container. Please note: Entering values over 100% will cause the element to overflow the container.
Skew - Enter a percentage along the X and Y axis to skew the element.
Translate - Enter a number of pixels along the X or Y axis to move the element within the container.