Overview #
The background settings for sections are essential for defining the overall look and feel of your online store. These settings are applied across the entire site but can be overridden at the section or block level. They allow for customization of colors, gradients, images, and videos, providing flexibility in design and ensuring a cohesive aesthetic throughout the store.
Key components and functionality #
Background color
This setting allows you to choose a solid color for the background of sections. It is a fundamental setting that can significantly impact the visual appeal of your store by providing a consistent color theme.
Background gradient
The background gradient setting enables you to apply a gradient effect to the section backgrounds. This can add depth and visual interest to your store's design. You can customize the gradient colors to match your brand's aesthetic.
Overlay color
The overlay color setting lets you apply a color overlay on top of the background. This can be useful for enhancing text readability or creating a specific mood or tone for your sections.
Overlay gradient
Similar to the overlay color, the overlay gradient allows for a gradient effect over the background. This setting can be used to create a more dynamic and layered visual effect.
Overlay opacity
This setting controls the transparency of the overlay, allowing you to adjust how much of the background is visible through the overlay. The opacity can be set from 0% (completely transparent) to 100% (completely opaque), with a default value of 48%.
Background image
You can select an image to use as the background for sections. This setting is ideal for adding visual interest and branding elements to your store.
Background image (mobile)
This setting allows you to choose a different background image specifically for mobile devices. This flexibility ensures that your store looks great on all screen sizes, as you might consider using a different image aspect ratio for mobile.
Background video
The background video setting lets you use a video as the background for sections, adding a dynamic and engaging element to your store's design.
Background video (mobile)
Similar to the background image (mobile), this setting allows you to select a different video for mobile devices. This optimization is crucial for providing a seamless viewing experience on smaller screens, where different video aspect ratios might be more suitable.
Usage examples #
-
Creating a cohesive brand aesthetic: You might consider using the background color and gradient settings to establish a consistent color theme across your store. This can help reinforce your brand identity and create a professional appearance.
-
Enhancing text readability: Consider applying an overlay color or gradient with adjusted opacity to ensure that text is easily readable against complex background images or videos.
-
Optimizing for mobile devices: Use the mobile-specific background image and video settings to tailor the visual experience for mobile users, ensuring that your store looks great on any device.
These settings provide a robust framework for customizing the visual elements of your online store, allowing you to create a unique and engaging shopping experience for your customers.
Align v1.7 is out now! Learn more about our best release yet →