Introduction
Click on the hotspots below to explore the Grid Container’s style options.
The Style tab - Background
Learn more about backgrounds.
What the overlay will look like by default.
What the overlay will look like when visitors mouse over it.
Use the toggle to change the screen when visitors scroll up and down your page. For more information on scrolling effects see:
You can also list the device sizes this effects will occur on (e.g. desktop, tablet, mobile)
Have the container's items move relative to a visitor’s mouse movement. Learn more about mouse tracking.
The Style tab - Background Overlay
A partially transparent layer that covers the background to give it extra depth and texture.
What the overlay will look like by default.
What the overlay will look like when visitors mouse over it.
Choose between a solid color or image (Classic) or a mix of two colors Gradient. Learn more about classic and gradient backgrounds.
To choose a color, either use the color picker or a global color.
Learn how to add images.
Set how transparent the overlay will be.
Another option to add special effects to your overlay. Learn more about applying CSS filters.
Learn more about Blend Mode.
The Style tab - Border
What the border will look like by default.
What the border will look like when visitors mouse over it.
Learn more about border types.
The border radius tool allows you to adjust the shape of elements by rounding their corners.
There are two types of border radius controls – slider and counter.
- To adjust the radius with a slider control, slide the control back and forth until you have the desired effect.
- To adjust the radius with the counter control, use the four counters to adjust each individual corner.
Depending on the element, these measurements can be based on percentage, pixels, or other measurements. Learn more about these measurement methods.
The border radius tool allows you to adjust the shape of elements by rounding their corners.
There are two types of border radius controls – slider and counter.
- To adjust the radius with a slider control, slide the control back and forth until you have the desired effect.
- To adjust the radius with the counter control, use the four counters to adjust each individual corner.
Depending on the element, these measurements can be based on percentage, pixels, or other measurements. Learn more about these measurement methods.
Learn more about shadows.
The Style tab - Shape Divider
Learn more about how to create custom borders for your container.
Next steps
Check out the layout options for Grid Containers.