Parallax
How to add and style parallax parts.
What is a Parallax?
Parallax images are commonly used in web design and computer graphics to create a sense of depth and immersion.
A parallax image moves at a different speed from the rest of the page as the user scrolls down a page. This creates a three-dimensional effect and can enhance the overall user experience by adding a sense of depth and dynamism.
Location in the Parts Library: Base Parts > Data Display > Parallax
Adding a Parallax Image
Parallax parts are located in the Parts Library on the left menu. Click on Base Parts > Parallax.
There are several variations available. You can select a basic parallax image or some variations with text and call-to-action overlays.
Select your preferred parallax variation and add it to your page.
Replacing an Image in the Parallax Part with a New Image
You can replace the image within the parallax part just like you would any other image - either by replacing it with a different image in the Media Gallery, or by uploading a new image from your device.
Select the parallax part you want to replace. This will open the editing panel on the right.
Click on Image > Value Set to select your image from the Media Gallery or upload an image from your device.
Any other parts within the parallax, such as cards, buttons, and text, like the example shown below, can be edited how you would normally edit those parts. When selected, the relevant editor is activated in the right panel.
Styling the Parallax Image
Like any image, a parallax image can be modified by selecting the parallax, then in the editing panel choosing Image > Value Set. To modify the image, select 'Modify'. This will open the toolbar:
From left to right you can:
Zoom in on the image
Zoom out
Flip the image horizontally
Flip the image vertically
Rotate the image to the right
Rotate the image to the left
Lock and unlock the aspect ratio
Revert the image to its original form
Save your changes as a new image. When you save the changes, both the original image the new image will be available in the Media Gallery.
Adjusting the Opacity of the Parallax Image
Adjusting the opacity of a parallax image is the same as adjusting the opacity of a regular image. Go to the Decoration Editor in the right property menu, and go to the ‘Image Opacity’ tab.
Remember that if your parallax has a content overlay, such as text or buttons, and you want to change the opacity of the overlay content, then you’ll need to use the ‘Opacity’ tab in the Decoration Editor.
Applying a Color or a Color Gradient Over a Parallax Image
Applying a color or a color gradient over a parallax image can create an eye-catching effect for your design.
To apply a color, select the parallax, then go to the Decoration Editor. You'll need to adjust the opacity from 1 to something lower than that, such as 0.8 or 0.9, depending on the level of color you want to see over the image. This is because the image has to be slightly transparent for any color to be seen.
Once you've selected the level of opacity, go to the Colors Editor. Go to the Background tab, as we want to set the background color for the image. Then select your color. You can choose a theme color, mix a color, or apply a color gradient.
Adding Alt Text
Don't forget to add Alt Text to the image!
Alt text, short for alternative text, is a brief description of an image used in HTML code to provide information about the content or function of the image. It is primarily used for accessibility purposes, as it allows screen readers to describe images to users who are visually impaired or who have difficulty seeing the images on a webpage.
When an image cannot be displayed for any reason, the alt text appears in place of the image, providing context about what the image contains or represents. Additionally, search engines use alt text to understand and index images, which can improve the SEO (search engine optimization) of a webpage.
Alt text should be concise and descriptive, accurately conveying the content or purpose of the image. It's important to avoid using generic phrases like "image" or "image of" and instead provide meaningful descriptions that enhance the understanding of the content for all users.
It's easy (and important!) to add alt text to your parallax image. Select the parallax, and you'll see the parallax property editors on the right. The first one is Alt Text.
Then, key in a brief description of your image. Here's an example:
Related Information
Last updated
Was this helpful?