What is the parallax image with text section?
The Parallax image with text section is designed to capture customer attention through subtle motion and layered design. It blends an image with text, animated patterns and a rotating Roundel. As the customer scrolls, the content moves. This dynamic layering of content draws attention and adds a polished, modern feel to your storefront. By engaging visitors visually, the parallax image with text section encourages customers to linger longer - boosting time on site and increasing the chance of conversions.
Use the multitude of settings to control the layout with features such as blending text color with the image, a rotating badge, and a choice of animated patterns.
Video guide available
How to set up the parallax image with text section
Steps
- Open the Theme Editor and add the Parallax image with text section to the page.
- In the main Parallax image with text add Heading line 1 and Heading line 2 and set the sizes for desktop and mobile.
- Add an Image. Set the Image width and Space above image for desktop and mobile. Note that the image width will be also be constrained by the height of the screen.
- Add an image link.
- Choose whether to Enable image shadow.
- Enable round corners can be used when a Content radius is set in the Design theme settings.
- The Overlap mode settings control whether the text passes in front of or behind the image and whether the text color blends.
- Add additional Text or Buttons as required.
- In the Style settings, select a Color scheme.
- Choose one of the four Section background options available for the Parallax image with text section:
Default: Uses a color scheme
Color: Choose a custom Background color
Simple gradient: Define the start and end colors, plus select the gradient style
Advanced gradient: Fully customize the gradient using the Color stop settings - In the block settings, configure the Roundel and Pattern block settings.
Tip
How to set up the roundel block?
The Roundel is a customizable block that adds a circular badge to the section, positioned overlapping the edge of the image. This badge contains an outer text and an inner icon or text with optional outlines. The roundel can spin on scroll or independently.
Steps
- Add or edit the Roundel block.
- Set the Color.
- In the Roundel: Outer settings, add Outer text (if used) and set the Line height and Letter spacing.
- In the Roundel: Inner settings, select the Content type to be Text or one of the two icon styles: Icon: Basic or Icon: Cosmetics.
- In the Roundel: Layout settings, set the Position of the roundel to be on the left or right of the image, set the size, and the outlines. Set the Spin to be On scroll, Slow, Medium, Fast or None.
How to set up the pattern block?
The Parallax image with text section has a Pattern block. Unique to this section, colored curved lines are drawn as the user scrolls, adding subtle movement.
Steps
- Add or edit the Pattern block.
- Select one of the Style options available.
- Set the Color and Opacity.
How to video guide
FAQs
How do I blend the Parallax image with text section background into another section?
Beautify has a range of style and layout settings to support various section blending techniques. For example, a gradient can be used to blend the Parallax image with text section into another section.
Refer to our Seamless sections guide for more information about the options for creating seamless sections. The Parallax image with text section supports four different Section background options: default (i.e. the color scheme), color, simple gradient and advanced gradient.
Alternatively, a Collage hero section can share a background image with up to five sections that are above or below it. Refer to our Collage hero guide for more details about this technique.
Can't find what you're looking for?
Our support staff are here to answer your queries, so don't hesitate to write to us!
Contact us