{"id":1526,"date":"2023-05-21T21:06:58","date_gmt":"2023-05-21T20:06:58","guid":{"rendered":"https:\/\/greatsite.dev\/makegreatsite\/docs\/images\/adding-a-before-after-gallery\/"},"modified":"2023-05-21T21:09:42","modified_gmt":"2023-05-21T20:09:42","slug":"adding-a-before-after-gallery","status":"publish","type":"docs","link":"https:\/\/greatsite.dev\/makegreatsite\/docs\/images\/adding-a-before-after-gallery\/","title":{"rendered":"Adding a Before\/ After gallery"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">If you want to showcase the changes by comparing 2 images, the Before\/ After gallery will be a perfect solution.&nbsp;This functionality suits best for dentistry, beauty industry, construction and interior design companies, etc. The site visitors can pull the handler to the left or right to compare the images.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here&#8217;s an example of how you can use the Before\/ After gallery:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"480\" height=\"314\" src=\"https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/giphy-2.gif\" alt=\"\" class=\"wp-image-1527\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">To add and set up the Before\/ After gallery, follow the instructions below.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Adding a Before\/ After gallery<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">1. Open the blocks gallery in the editor, access the\u00a0<strong>Gallery<\/strong>\u00a0tab and choose\u00a0<strong>wireframe-series-10-gallery<\/strong>\u00a0block:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"399\" src=\"https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1056_1iwtuzk-1024x399.png\" alt=\"\" class=\"wp-image-1528\" srcset=\"https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1056_1iwtuzk-1024x399.png 1024w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1056_1iwtuzk-300x117.png 300w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1056_1iwtuzk-768x299.png 768w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1056_1iwtuzk-1536x598.png 1536w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1056_1iwtuzk.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">2. You can also add the\u00a0<strong>Before\/ After gallery<\/strong>\u00a0as a separate element to existing blocks. For that, hover over the place in the block where you&#8217;d like to set a gallery and click on the &#8220;plus&#8221;:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"400\" src=\"https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1057_y8moqv-1024x400.png\" alt=\"\" class=\"wp-image-1530\" srcset=\"https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1057_y8moqv-1024x400.png 1024w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1057_y8moqv-300x117.png 300w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1057_y8moqv-768x300.png 768w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1057_y8moqv-1536x600.png 1536w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1057_y8moqv.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">3. Choose the\u00a0<strong>Before\/ After gallery<\/strong>\u00a0element in the pop-up menu:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"753\" src=\"https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1058_wlxg8g-1024x753.png\" alt=\"\" class=\"wp-image-1531\" srcset=\"https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1058_wlxg8g-1024x753.png 1024w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1058_wlxg8g-300x221.png 300w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1058_wlxg8g-768x565.png 768w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1058_wlxg8g-1536x1130.png 1536w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1058_wlxg8g.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Adding images to the Before\/ After gallery<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">1. For that, click on the image component and press the\u00a0<strong>Upload<\/strong>\u00a0button in the opened menu:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"594\" src=\"https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1064_3h9kj4-1024x594.png\" alt=\"\" class=\"wp-image-1532\" srcset=\"https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1064_3h9kj4-1024x594.png 1024w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1064_3h9kj4-300x174.png 300w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1064_3h9kj4-768x445.png 768w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1064_3h9kj4-1536x891.png 1536w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1064_3h9kj4.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">2. In the new window you will see the\u00a0<strong>Media gallery<\/strong>\u00a0of your site. In the\u00a0<strong>Free photos<\/strong>\u00a0tab you can browse through the stock images by using the keywords. If you want to upload your own images to the gallery, access the\u00a0<strong>My images<\/strong>\u00a0tab:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"500\" src=\"https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1067_1fm9wkt-1024x500.png\" alt=\"\" class=\"wp-image-1533\" srcset=\"https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1067_1fm9wkt-1024x500.png 1024w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1067_1fm9wkt-300x146.png 300w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1067_1fm9wkt-768x375.png 768w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1067_1fm9wkt-1536x750.png 1536w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1067_1fm9wkt.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Before\/ After gallery settings<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">1. To access the settings of the gallery, hover over its placeholder and click on the &#8220;gear&#8221; at the top left corner:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1059_kr9hls-1024x538.png\" alt=\"\" class=\"wp-image-1534\" srcset=\"https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1059_kr9hls-1024x538.png 1024w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1059_kr9hls-300x158.png 300w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1059_kr9hls-768x403.png 768w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1059_kr9hls-1536x806.png 1536w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1059_kr9hls.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">2. In the pop-up menu customize the position of the slider and the handles color:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1060_19e2y9k-1024x538.png\" alt=\"\" class=\"wp-image-1535\" srcset=\"https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1060_19e2y9k-1024x538.png 1024w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1060_19e2y9k-300x158.png 300w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1060_19e2y9k-768x403.png 768w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1060_19e2y9k-1536x806.png 1536w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1060_19e2y9k.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">3. Don&#8217;t forget to publish your site for changes to take an effect.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Done! The site visitors can pull the handler to the left or right to compare the images.<\/p>\n","protected":false},"featured_media":0,"parent":466,"menu_order":6,"comment_status":"open","ping_status":"closed","template":"","doc_tag":[],"class_list":["post-1526","docs","type-docs","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/docs\/1526","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/types\/docs"}],"replies":[{"embeddable":true,"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/comments?post=1526"}],"version-history":[{"count":1,"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/docs\/1526\/revisions"}],"predecessor-version":[{"id":1536,"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/docs\/1526\/revisions\/1536"}],"up":[{"embeddable":true,"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/docs\/466"}],"next":[{"title":"Parallax effect settings","link":"https:\/\/greatsite.dev\/makegreatsite\/docs\/images\/parallax-effect-settings\/","href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/docs\/1537"}],"prev":[{"title":"Setting slides to autoscroll","link":"https:\/\/greatsite.dev\/makegreatsite\/docs\/images\/setting-slides-to-autoscroll\/","href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/docs\/1517"}],"wp:attachment":[{"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/media?parent=1526"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/doc_tag?post=1526"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}