{"id":11945,"date":"2016-12-27T13:00:08","date_gmt":"2016-12-27T13:00:08","guid":{"rendered":"http:\/\/nativewptheme.net\/support\/?p=11945"},"modified":"2017-02-10T09:13:19","modified_gmt":"2017-02-10T09:13:19","slug":"image-layers","status":"publish","type":"post","link":"https:\/\/nativewptheme.net\/support\/wpbakery\/image-layers","title":{"rendered":"Image Layers"},"content":{"rendered":"

[vc_row][vc_column css=”.vc_custom_1485963458300{padding-right: 35px !important;padding-left: 35px !important;}” col_shadow=”box_shadow_enable:disable|shadow_horizontal:0|shadow_vertical:15|shadow_blur:50|shadow_spread:0|box_shadow_color:rgba(0%2C0%2C0%2C0.35)” col_shadow_hover=”box_shadow_enable:disable|shadow_horizontal:0|shadow_vertical:15|shadow_blur:50|shadow_spread:0|box_shadow_color:rgba(0%2C0%2C0%2C0.35)”][dfd_spacer screen_wide_spacer_size=”30″ screen_normal_resolution=”1024″ screen_tablet_resolution=”800″ screen_mobile_resolution=”480″][vc_column_text]Amaze your visitors with the unusual image representation using Layered Images module.<\/p>\n

Check the example of the module with this link<\/a>.<\/p>\n

Note, before adding this shortcode on the page, it is important to have the images with equal sizes for proper displaying, i.e. all the image layers need to have the same sizes as the first image uploaded. So the next images will be positioned correctly relatively to the first image.<\/strong><\/p>\n

Watch the video tutorial on Image Layers module creation<\/a> for more details.<\/h5>\n

[\/vc_column_text][dfd_spacer screen_wide_spacer_size=”30″ screen_normal_resolution=”1024″ screen_tablet_resolution=”800″ screen_mobile_resolution=”480″][dfd_tta_tabs border_radius=”4″ alignment=”left” active_section=”1″ active_tab_background=”#3b55e6″ tab_hover_text_color=”#3b55e6″ tab_active_color_text=”#ffffff” border_color_active=”#3b55e6″][vc_tta_section title=”General settings” tab_id=”1486545572585-2437c7e1-5371″][vc_column_text]<\/p>\n

General settings<\/h3>\n

<\/p>\n

    \n
  • Alignment<\/strong> – allows you to align the module horizontally. Left<\/strong>, right<\/strong> and center<\/strong> positions are available.<\/li>\n
  • Interval<\/strong> – set the periodicity for image appearing in seconds.<\/li>\n
  • Custom CSS class<\/strong> \u2013\u00a0enter our\u00a0own unique class name for the item \u2013 this is a useful option for those who want to create a specific style. E.g.: you can type custom-style<\/strong> class and then go to Theme options<\/del>\u00a0General options<\/del>\u00a0Custom CSS\/JS<\/del> Custom CSS<\/del> field and write your own CSS code with this class to get your own style.<\/li>\n<\/ul>\n

    [\/vc_column_text][\/vc_tta_section][vc_tta_section title=”Layers settings” tab_id=”1486545572829-e1c1304c-ee12″][vc_column_text]<\/p>\n

    Layers settings<\/h3>\n

    <\/p>\n

    List of layers<\/h5>\n
    In this section, you can customize the image layers of the module.<\/h6>\n
    By clicking on the\u00a0arrow down icon you can reveal the whole section to adjust it to your needs. Here you are also able to duplicate the layers, change\u00a0their order (simply drag-n-drop the blocks) and delete the unnecessary layer as well.<\/h6>\n
      \n
    • Upload image<\/strong> – select image from media library for the Info banner module.<\/li>\n
    • Horizontal offset<\/strong>\u2013\u00a0add the horizontal layer offset in %, for example -100% or 100%. With the offset, you can control the position of the image in horizontal perspective.<\/li>\n
    • Vertical offset<\/strong> \u2013 add the vertical layer offset in %, for example -100% or 100%. With the offset, you can control the position of the image in vertical perspective.<\/li>\n
    • Animation<\/strong> \u2013 choose between 14 preset animation effects.<\/li>\n<\/ul>\n

      [\/vc_column_text][\/vc_tta_section][\/dfd_tta_tabs][\/vc_column][\/vc_row]<\/p>\n<\/section>","protected":false},"excerpt":{"rendered":"

      Amaze your visitors with the unusual image representation using Layered Images module.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[17,24,22,33],"_links":{"self":[{"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/posts\/11945"}],"collection":[{"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/comments?post=11945"}],"version-history":[{"count":2,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/posts\/11945\/revisions"}],"predecessor-version":[{"id":11948,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/posts\/11945\/revisions\/11948"}],"wp:attachment":[{"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/media?parent=11945"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/categories?post=11945"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/tags?post=11945"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}