{"id":2689,"date":"2024-04-10T04:48:50","date_gmt":"2024-04-10T04:48:50","guid":{"rendered":"https:\/\/docs.wpblockart.com\/blockart-blocks\/?post_type=docs&p=2689"},"modified":"2024-04-10T08:03:21","modified_gmt":"2024-04-10T08:03:21","slug":"image-comparison","status":"publish","type":"docs","link":"https:\/\/docs.wpblockart.com\/blockart-blocks\/image-comparison\/","title":{"rendered":"Image Comparison"},"content":{"rendered":"\n

The Image Comparison Block compares two images with a slider. It places two images side by side and uses a slider to compare the differences between them.<\/p>\n\n\n\n

\"Add
Add Image Comparison Block<\/figcaption><\/figure>\n\n\n\n

After you have chosen the Image Comparison block, you\u2019ll get a block editing panel on the right-hand side. It has three options, i.e., General<\/strong>, Style<\/strong>, and Advanced<\/strong>. These options customize the design and other elements of the block. Let\u2019s explore one by one below:<\/p>\n\n\n\n

General<\/h2>\n\n\n\n

Layout<\/h3>\n\n\n\n
    \n
  • Orientation<\/strong> – It allows the image to be displayed either horizontally or vertically.<\/li>\n<\/ul>\n\n\n\n
    \"Set
    Set Image Orientation<\/figcaption><\/figure>\n\n\n\n
      \n
    • Swap Images<\/strong> – It changes the position of the image with one another.<\/li>\n<\/ul>\n\n\n\n
      \"Swap
      Swap Image Position<\/figcaption><\/figure>\n\n\n\n

      Options<\/h3>\n\n\n\n
        \n
      • Comparison Slider<\/strong> – By default, the slider is displayed with the button over the image. You can either display the button only or remove the slider appearing.<\/li>\n<\/ul>\n\n\n\n
        \"Comparison
        Comparison Slider Type<\/figcaption><\/figure>\n\n\n\n
          \n
        • Enable Label –<\/strong> It enables the Label to appear over the image and comes up with the following options:\n
            \n
          • Before Image Text<\/strong> – It changes the default Before text appearing.<\/li>\n\n\n\n
          • After Image Text<\/strong> – It changes the default After text appearing.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
            \"Enable
            Enable Label<\/figcaption><\/figure>\n\n\n\n

            Style<\/h2>\n\n\n\n

            It provides the following styling options for the Image Comparison Block. These are listed below:<\/p>\n\n\n\n

            Label<\/h3>\n\n\n\n
              \n
            • Text Color<\/strong> – It changes the text color of the label text.<\/li>\n\n\n\n
            • Background<\/strong> – It sets the block’s background color of the label text.<\/li>\n\n\n\n
            • Typography<\/strong>\u00a0– It allows you to control the label text\u2019s typography, such as font family, weight, font size, line height, and other related styling properties. The options are listed below:\n
                \n
              • Font Family<\/strong>\u00a0\u2013 The option allows you to choose the appropriate font family for the text.<\/li>\n\n\n\n
              • Weight<\/strong> \u2013 It refers to the thickness or boldness of the text.<\/li>\n\n\n\n
              • Size<\/strong> \u2013 It controls the font size of the text.<\/li>\n\n\n\n
              • Line Height<\/strong> \u2013 It manages the space above and below the text.<\/li>\n\n\n\n
              • Letter Spacing<\/strong> \u2013 It controls the amount of space between characters in the text.<\/li>\n\n\n\n
              • Style<\/strong> \u2013 Using the property, you can set the text to be Italic or Oblique.<\/li>\n\n\n\n
              • Transformation<\/strong>\u00a0\u2013 It changes the case of the text, such as lowercase, uppercase, and capitalized.<\/li>\n\n\n\n
              • Decoration <\/strong>\u2013 The styling is applied to the text to make it more visually appealing. The options include underline, overline, and line through.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
                \"Change
                Change Label Color and Typography<\/figcaption><\/figure>\n\n\n\n

                Advanced<\/h2>\n\n\n\n

                The Advanced section consists of four options for the Image Comparison block.<\/p>\n\n\n\n

                Spacing<\/h3>\n\n\n\n

                Under the spacing section, you can find the following options available:<\/p>\n\n\n\n

                  \n
                • Block Margin<\/strong> \u2013 According to the site requirement, you can assign a specific margin value to the block along with units like px, em, %, and rem. Moreover, you can set the value of the different margins for various devices (Desktop, Tablet, and Mobile).<\/li>\n\n\n\n
                • Block Padding <\/strong>\u2013 According to the site requirement, you can assign a specific padding value to the block along with units like px, em, %, and rem. Moreover, you can set the different padding values for various devices (Desktop, Tablet, and Mobile).<\/li>\n<\/ul>\n\n\n\n
                  \"Manage
                  Manage Padding and Margin Space<\/figcaption><\/figure>\n\n\n\n

                  Z-Index<\/h3>\n\n\n\n

                  It allows you to set the priority of the Image Comparison block according to the site requirement.<\/p>\n\n\n\n

                  Responsive Condition<\/h3>\n\n\n\n

                  Using the option, you can enable\/disable displaying the block on various screen sizes:<\/p>\n\n\n\n

                    \n
                  • Hide on Desktop<\/strong> \u2013 It hides the Image Comparison block on the Desktop.<\/li>\n\n\n\n
                  • Hide on Tablet<\/strong> \u2013 It hides the Image Comparison block on the Tablet.<\/li>\n\n\n\n
                  • Hide on Mobile<\/strong> \u2013 It hides the Image Comparison block on the Mobile.<\/li>\n<\/ul>\n\n\n\n
                    \"Enable\/Disable
                    Enable\/Disable Block Responsive Condition<\/figcaption><\/figure>\n\n\n\n

                    Advanced<\/h3>\n\n\n\n

                    Under the option, you can set the CSS ID and Classes for this particular Image Comparison block. The available options are listed below:<\/p>\n\n\n\n

                      \n
                    • CSS ID<\/strong> \u2013 It allows you to set specific IDs to style this particular block. Once you have set the ID, you can write the CSS Code to style the block using that particular ID.<\/li>\n\n\n\n
                    • Additional CSS Class(es)<\/strong> \u2013 It allows you to add a CSS class to your block and write custom CSS to style this particular block.<\/li>\n<\/ul>\n\n\n\n

                      After creating the separate ID and Classes, visit your CSS editor and write a style for the ID and class.<\/p>\n\n\n\n

                      \"Add
                      Add CSS ID and Additional CSS Class<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"

                      The Image Comparison Block compares two images with a slider. It places two images side by side and uses a slider to compare the differences between them. After you have chosen the Image Comparison block, you\u2019ll get a block editing panel on the right-hand side. It has three options, i.e., General, Style, and Advanced. These options customize the[…]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":[],"doc_category":[7],"doc_tag":[],"_links":{"self":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/2689"}],"collection":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/comments?post=2689"}],"version-history":[{"count":9,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/2689\/revisions"}],"predecessor-version":[{"id":2748,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/2689\/revisions\/2748"}],"wp:attachment":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/media?parent=2689"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/doc_category?post=2689"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/doc_tag?post=2689"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}