{"id":7167,"date":"2017-06-06T08:37:43","date_gmt":"2017-06-06T12:37:43","guid":{"rendered":"https:\/\/www.boldgrid.com\/support\/?p=7167"},"modified":"2023-09-07T13:42:51","modified_gmt":"2023-09-07T17:42:51","slug":"create-parallax-effect","status":"publish","type":"post","link":"https:\/\/www.boldgrid.com\/support\/page-builder\/create-parallax-effect\/","title":{"rendered":"Create the Parallax Effect using the Page and Post Builder"},"content":{"rendered":"\n

\"\"<\/p>\n

\n
\n
\n
\n

The parallax effect is an effect used within websites to create the illusion of depth. It is created when a foreground image moves a little faster than a background image. It can involve a few images or several. The following tutorial will show you how to create the parallax effect<\/strong> using the section editor of the BoldGrid WordPress Page Builder<\/a>.<\/p>\n

How to Create the Parallax Effect<\/h2>\n

Here you will be creating a page with a blank background in order to start the process.<\/p>\n

<\/p>\n

    \n
  1. \"Log<\/a>Log into BoldGrid.<\/a>\n
    <\/div>\n<\/li>\n
  2. \"Add<\/a>Under Pages<\/em> click Add Blank<\/b>\n
    <\/div>\n<\/li>\n
  3. \"\"<\/a>Click Blank Page<\/b>\n
    <\/div>\n<\/li>\n
  4. \"\"<\/a>Provide the page with a title\n
    <\/div>\n<\/li>\n
  5. \"\"<\/a>Hover over the body of the page until you find the section menu.\n
    <\/div>\n<\/li>\n
  6. \"\"<\/a>Click the three horizontal bars\n
    <\/div>\n<\/li>\n
  7. \"\"<\/a>Click Change Background<\/b>\n
    <\/div>\n<\/li>\n
  8. \"Post<\/a>Select Image <\/b>on the left side of the panel\n
    <\/div>\n<\/li>\n
  9. Click the blue Add Image<\/strong> button to choose your image\n
    <\/div>\n<\/li>\n
  10. Under Scroll Effect <\/em>choose Parallax\n
    <\/div>\n<\/li>\n
  11. Click the X<\/b> to close the window\n
    <\/div>\n<\/li>\n
  12. \"Drag<\/a>Hover over the newly added image and use the arrows to adjust the size as needed\n
    <\/div>\n<\/li>\n<\/ol>\n

    <\/p>\n

    You can add as many images as you want. When ready, you can add content beneath or above these images. Scrolling through the page now in Preview or after publishing will perfectly demonstrate the parallax effect in action.<\/p>\n

    Be sure to update or Publish your page when ready in order to save the changes you made.\n<\/p><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"

    The parallax effect is an effect used within websites to create the illusion of depth. It is created when a foreground image moves a little faster than a background image. It can involve a few images or several. The following tutorial will show you how to create the parallax effect using the section editor of […]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"bgseo_title":"How to Create the Parallax Effect | BoldGrid","bgseo_description":"The parallax effect is used to create the illusion of depth for your website pages. This effect helps to keep attention on your website pages. ","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[148],"tags":[],"class_list":["post-7167","post","type-post","status-publish","format-standard","hentry","category-page-builder"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/7167","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/comments?post=7167"}],"version-history":[{"count":24,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/7167\/revisions"}],"predecessor-version":[{"id":104703,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/7167\/revisions\/104703"}],"wp:attachment":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/media?parent=7167"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/categories?post=7167"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/tags?post=7167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}