Help

Parallax in Gutenberg

What is Parallax?

Parallax scrolling is a web site trend where the background content (i.e. an image) is moved at a different speed than the foreground content while scrolling. Click on the links below to see the difference between a website with and without parallax scrolling.

Setting up Parallax in Gutenberg editor

  1. open the Page you want to add the Parallax to.
  2. Click the check icon to add a new block.
  3. in the search bar search for ‘Cover’
  4. select the ‘Cover’ block.
  5. Upload or select the image you want to use for the Parallax.
  6. Click on ‘Block’ on the menu on the right side of the screen.
  7. Check the ‘Fixed Background’ button under ‘Cover Settings’
  8. Change the ‘Background Opacity to what ever setting you would like (the higher you change this, the darker the image will be.)
  9. Click on the image and write the text that you want.
  10. If you want the Parallax to take up the whole screen of the page, you can select the ‘Full width’ option above the block.