{"id":9569,"date":"2021-08-13T23:08:52","date_gmt":"2021-08-13T23:08:52","guid":{"rendered":"https:\/\/d-themes.com\/wordpress\/udesign\/elements\/?page_id=9569"},"modified":"2024-08-10T12:25:15","modified_gmt":"2024-08-10T12:25:15","slug":"image-comparison","status":"publish","type":"page","link":"https:\/\/d-themes.com\/wordpress\/udesign\/elements\/elements\/image-comparison\/","title":{"rendered":"Image comparison element"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Image comparison<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

You might not have noticed the differences between two similar images before. But you will be able to detect even the slightest differences relying on our elements.\n<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t
\"Comparison\"Comparison<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Label settings<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Element gives you powerful options to change style of lables as well as position. You can also enable labels to show or hide. See examples below.<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t\t\t\t

\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Label centered<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\"Comparison\"Comparison<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Label top & bottom<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\"Comparison\"Comparison<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Handle type to choose<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

There are 6 types of handle from Simple to Diamond. You can choose anything among of 6 types and each one decorate your website beautifully.<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t\t\t\t

\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Simple<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\"\"\"Comparison<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Line<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\"\"\"Comparison<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Circle<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\"\"\"Comparison<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Rectangle<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\"\"\"Comparison<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Arrow<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\"\"\"Comparison<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Diamond<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\"\"\"Comparison<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Control motion & handle offset<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

There are 3 ways to control the motion of handle by default, Drag, Drag & Click and Hover. Choose anyone you want.<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t\t\t\t

\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Drag<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\"Comparison\"Comparison<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Drag & Click<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\"Comparison\"Comparison<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Hover<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\"Comparison\"Comparison<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"Comparison\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

You can make<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

awesome image compare<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Extensive styling options for Image Comparison are ready. Everything is perfect to assure your customization.<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t
    \r\n\t\t\t
  • \r\n\t\t\t\t\t\t\t\r\n\t\t\t\t<\/i>\t\t\t\t<\/span>\r\n\t\t\t\t\t\tGive radius effects.<\/span>\r\n\t\t\t\t\t\t\t\t<\/li>\r\n\t\t\t\t
  • \r\n\t\t\t\t\t\t\t\r\n\t\t\t\t<\/i>\t\t\t\t<\/span>\r\n\t\t\t\t\t\tControl size and color of handle.<\/span>\r\n\t\t\t\t\t\t\t\t<\/li>\r\n\t\t\t\t
  • \r\n\t\t\t\t\t\t\t\r\n\t\t\t\t<\/i>\t\t\t\t<\/span>\r\n\t\t\t\t\t\tControl styles of label.<\/span>\r\n\t\t\t\t\t\t\t\t<\/li>\r\n\t\t\t\t
  • \r\n\t\t\t\t\t\t\t\r\n\t\t\t\t<\/i>\t\t\t\t<\/span>\r\n\t\t\t\t\t\tGive shadow effect.<\/span>\r\n\t\t\t\t\t\t\t\t<\/li>\r\n\t\t<\/ul>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t\t\t\t
    \r\n\t\t\t\t\t
    \r\n\t\t\t\r\n\r\n<\/svg>\r\n\t\t<\/div>\r\n\t\t\t\t\t\t\t
    \r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t
    \r\n\r\n\t\t\t\t\r\n\t\t\t\t
    \r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t

    Glossary<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t

    Image comparison element options<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t

    Customize Elements Globally or Individually<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \r\n\t\t\t\t\t\t\t\t
    \r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t
    \r\n\r\n\t\t\t\t\r\n\t\t\t\t
    \r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t
    • Before Image Label:<\/strong> Input label for first image.<\/li>
    • Before Image:<\/strong> Input first image.<\/li>
    • After Image Label:<\/strong> Input label for second image.<\/li>
    • After Image:<\/strong> Input second image.<\/li>
    • Image Size:<\/strong> Choose the size of images.<\/li>
    • Show Labels:<\/strong> Toggle to decide whether label is shown or not.<\/li>
    • Label Position:<\/strong> Choose position of label.<\/li>
    • Direction:<\/strong> Decide direction of handle.<\/li>
    • Handle Type:<\/strong> Choose your handle.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t
      \r\n\r\n\t\t\t\t\r\n\t\t\t\t
      \r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t\t\t\t\t
        \n
      • Handle Control:<\/strong> Decide how to control handle.<\/li>\n
      • Handle Offset:<\/strong> Control first position of handle.<\/li>\n
      • Border Radius:<\/strong> Control curve size of image in its corner.<\/li>\n
      • Handle Size:<\/strong> Control width of handle.<\/li>\n
      • Handle Color:<\/strong> Control color of handle.<\/li>\n
      • Handle Background Color:<\/strong> Control background color of handle.<\/li>\n
      • Box Shadow:<\/strong> Control shadow effect of handle.<\/li>\n
      • Text Color:<\/strong> Control color of labels.<\/li>\n
      • Typography:<\/strong> Styling options for labels.<\/li>\n<\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

        Image comparison You might not have noticed the differences between two similar images before. But you will be able to detect even the slightest differences relying on our elements. Label […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":2,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-9569","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/d-themes.com\/wordpress\/udesign\/elements\/wp-json\/wp\/v2\/pages\/9569","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/d-themes.com\/wordpress\/udesign\/elements\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/d-themes.com\/wordpress\/udesign\/elements\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/elements\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/elements\/wp-json\/wp\/v2\/comments?post=9569"}],"version-history":[{"count":2,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/elements\/wp-json\/wp\/v2\/pages\/9569\/revisions"}],"predecessor-version":[{"id":31397,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/elements\/wp-json\/wp\/v2\/pages\/9569\/revisions\/31397"}],"up":[{"embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/elements\/wp-json\/wp\/v2\/pages\/2"}],"wp:attachment":[{"href":"https:\/\/d-themes.com\/wordpress\/udesign\/elements\/wp-json\/wp\/v2\/media?parent=9569"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}