{"id":1740,"date":"2018-01-05T19:01:02","date_gmt":"2018-01-05T17:01:02","guid":{"rendered":"https:\/\/themes.whiteboxstud.io\/rendr\/?page_id=1740"},"modified":"2022-08-03T21:50:24","modified_gmt":"2022-08-03T19:50:24","slug":"image-cascade","status":"publish","type":"page","link":"https:\/\/themes.whiteboxstud.io\/rendr\/image-cascade\/","title":{"rendered":"Image cascade"},"content":{"rendered":"<p>[vc_row max_width=&#8221;600&#8243; min_height=&#8221;500&#8243; content_placement=&#8221;middle&#8221; bg_blur=&#8221;0&#8243; textalign=&#8221;align_center&#8221; nav_skin=&#8221;light&#8221; consent_include=&#8221;include&#8221; equal_height=&#8221;true&#8221; el_design=&#8221;{&#8220;mobile_landscape&#8220;:{&#8220;padding-bottom&#8220;:&#8220;60&#8220;},&#8220;tablet_portrait&#8220;:{&#8220;padding-bottom&#8220;:&#8220;100&#8220;},&#8220;desktop&#8220;:{&#8220;padding-top&#8220;:&#8220;120&#8220;,&#8220;padding-bottom&#8220;:&#8220;140&#8220;}}&#8221; custom_bg_color=&#8221;{&#8220;solid&#8220;:{&#8220;id&#8220;:&#8220;Dark color&#8220;,&#8220;color&#8220;:&#8220;#1b192a&#8220;}}&#8221; overlay_color=&#8221;{&#8220;solid&#8220;:{&#8220;id&#8220;:&#8220;&#8220;,&#8220;color&#8220;:&#8220;&#8220;}}&#8221;][vc_column el_design=&#8221;{&#8220;desktop&#8220;:{&#8220;padding-top&#8220;:&#8220;15&#8220;,&#8220;padding-right&#8220;:&#8220;15&#8220;,&#8220;padding-bottom&#8220;:&#8220;15&#8220;,&#8220;padding-left&#8220;:&#8220;15&#8220;}}&#8221; bg_blur=&#8221;0&#8243; css_animation=&#8221;&#8221;][vc_heading heading_wrapper=&#8221;h1&#8243; heading_color=&#8221;{&#8220;solid&#8220;:{&#8220;id&#8220;:&#8220;custom_8548853511531338&#8220;,&#8220;color&#8220;:&#8220;#f3f4f5&#8220;}}&#8221; responsiveness=&#8221;yes&#8221; tablet_landscape=&#8221;100&#8243; tablet_portrait=&#8221;90&#8243; mobile_landscape=&#8221;85&#8243; mobile_portrait=&#8221;75&#8243; css_animation=&#8221;&#8221;]Image cascade[\/vc_heading][vc_empty_space height=&#8221;15px&#8221;][vc_text_element disable_margin=&#8221;yes&#8221; css_animation=&#8221;&#8221; color=&#8221;{&#8220;id&#8220;:&#8220;custom_3715609566673309&#8220;,&#8220;color&#8220;:&#8220;#ffffff&#8220;}&#8221;]Display multiple images in a cool and compact way[\/vc_text_element][vc_empty_space][vc_button_arrow title=&#8221;Back to homepage&#8221; style=&#8221;round&#8221; display=&#8221;display_block&#8221; skin=&#8221;light&#8221; css_animation=&#8221;&#8221; accent_color=&#8221;{&#8220;id&#8220;:&#8220;Main accent color&#8220;,&#8220;color&#8220;:&#8220;#fb9272&#8220;}&#8221; link=&#8221;url:https%3A%2F%2Fthemes.whiteboxstud.io%2Frendr%2Flanding%2F|title:Landing&#8221;][\/vc_column][\/vc_row][vc_row row_width=&#8221;wtbx_stretch_row_content&#8221; bg_blur=&#8221;0&#8243; nav_skin=&#8221;light&#8221; consent_include=&#8221;include&#8221;][vc_column el_design=&#8221;{&#8220;desktop&#8220;:{&#8220;padding-top&#8220;:&#8220;0&#8220;,&#8220;padding-right&#8220;:&#8220;0&#8220;,&#8220;padding-bottom&#8220;:&#8220;0&#8220;,&#8220;padding-left&#8220;:&#8220;0&#8220;}}&#8221; bg_blur=&#8221;0&#8243; css_animation=&#8221;&#8221;][vc_section_divider style=&#8221;curves-6&#8243; position=&#8221;bottom&#8221; height=&#8221;100&#8243; responsiveness=&#8221;yes&#8221; tablet_landscape=&#8221;100&#8243; tablet_portrait=&#8221;60&#8243; mobile_landscape=&#8221;0&#8243; mobile_portrait=&#8221;0&#8243; color=&#8221;{&#8220;id&#8220;:&#8220;custom_1334459184315555&#8220;,&#8220;color&#8220;:&#8220;rgba(255,255,255,1)&#8220;}&#8221;][\/vc_column][\/vc_row][vc_row content_placement=&#8221;middle&#8221; bg_blur=&#8221;0&#8243; nav_skin=&#8221;light&#8221; consent_include=&#8221;include&#8221; equal_height=&#8221;true&#8221; el_design=&#8221;{&#8220;desktop&#8220;:{&#8220;padding-top&#8220;:60,&#8220;padding-bottom&#8220;:60}}&#8221;][vc_column bg_blur=&#8221;0&#8243; width=&#8221;1\/2&#8243; css_animation=&#8221;&#8221;][vc_image_cascade layout=&#8221;3&#8243; images=&#8221;10957,10946&#8243; aspect_ratio=&#8221;4:3&#8243; border=&#8221;20&#8243; img_link=&#8221;gallery_popup&#8221; preloader=&#8221;&#8221; css_animation=&#8221;&#8221;][\/vc_column][vc_column bg_blur=&#8221;0&#8243; width=&#8221;1\/2&#8243; css_animation=&#8221;&#8221;][vc_heading heading_wrapper=&#8221;h5&#8243; alignment=&#8221;align_left&#8221; heading_typography=&#8221;{&#8220;variants&#8220;:&#8220;600&#8220;,&#8220;font_size&#8220;:&#8220;24px&#8220;}&#8221; css_animation=&#8221;&#8221;]Multiple layouts[\/vc_heading][vc_empty_space][vc_text_element typography=&#8221;{&#8220;font_size&#8220;:&#8220;18px&#8220;}&#8221; css_animation=&#8221;&#8221;]There are 12 image positioning layouts available for any taste. Each layout is designed and styled for a specific number of images, which make all the layouts more precise and visually attractive.[\/vc_text_element][\/vc_column][\/vc_row][vc_row content_placement=&#8221;middle&#8221; bg_blur=&#8221;0&#8243; nav_skin=&#8221;light&#8221; consent_include=&#8221;include&#8221; equal_height=&#8221;true&#8221; el_design=&#8221;{&#8220;desktop&#8220;:{&#8220;padding-top&#8220;:60,&#8220;padding-bottom&#8220;:60}}&#8221; custom_bg_color=&#8221;{&#8220;solid&#8220;:{&#8220;id&#8220;:&#8220;Light background&#8220;,&#8220;color&#8220;:&#8220;#f9fafb&#8220;}}&#8221;][vc_column bg_blur=&#8221;0&#8243; width=&#8221;1\/2&#8243; css_animation=&#8221;&#8221;][vc_heading heading_wrapper=&#8221;h5&#8243; alignment=&#8221;align_left&#8221; heading_typography=&#8221;{&#8220;variants&#8220;:&#8220;600&#8220;,&#8220;font_size&#8220;:&#8220;24px&#8220;}&#8221; css_animation=&#8221;&#8221;]Gallery lightbox[\/vc_heading][vc_empty_space][vc_text_element typography=&#8221;{&#8220;font_size&#8220;:&#8220;18px&#8220;}&#8221; css_animation=&#8221;&#8221;]Gallery lightbox can be enabled or disabled. When enabled, images will have cool hover animations, and a lightbox with the images can be opened by clicking on them.[\/vc_text_element][\/vc_column][vc_column bg_blur=&#8221;0&#8243; width=&#8221;1\/2&#8243; css_animation=&#8221;&#8221;][vc_image_cascade layout=&#8221;6&#8243; images=&#8221;10960,10959,10958&#8243; shadow=&#8221;shadow&#8221; border=&#8221;0&#8243; img_link=&#8221;gallery_popup&#8221; preloader=&#8221;&#8221; css_animation=&#8221;&#8221;][\/vc_column][\/vc_row][vc_row content_placement=&#8221;middle&#8221; bg_blur=&#8221;0&#8243; nav_skin=&#8221;light&#8221; consent_include=&#8221;include&#8221; equal_height=&#8221;true&#8221; el_design=&#8221;{&#8220;desktop&#8220;:{&#8220;padding-top&#8220;:60,&#8220;padding-bottom&#8220;:60}}&#8221;][vc_column bg_blur=&#8221;0&#8243; width=&#8221;1\/2&#8243; css_animation=&#8221;&#8221;][vc_image_cascade layout=&#8221;5&#8243; images=&#8221;10964,10961,10946&#8243; aspect_ratio=&#8221;1:1&#8243; border=&#8221;20&#8243; preloader=&#8221;&#8221; css_animation=&#8221;&#8221;][\/vc_column][vc_column bg_blur=&#8221;0&#8243; width=&#8221;1\/2&#8243; css_animation=&#8221;&#8221;][vc_heading heading_wrapper=&#8221;h5&#8243; alignment=&#8221;align_left&#8221; heading_typography=&#8221;{&#8220;variants&#8220;:&#8220;600&#8220;,&#8220;font_size&#8220;:&#8220;24px&#8220;}&#8221; css_animation=&#8221;&#8221;]Control image aspect ratio[\/vc_heading][vc_empty_space][vc_text_element typography=&#8221;{&#8220;font_size&#8220;:&#8220;18px&#8220;}&#8221; css_animation=&#8221;&#8221;]You can have all the images use their initial aspect ratio, or you can specify your own, and all the images in a group will have that ratio. It&#8217;s much faster and easier than editing your images manually![\/vc_text_element][\/vc_column][\/vc_row][vc_row content_placement=&#8221;middle&#8221; bg_blur=&#8221;0&#8243; nav_skin=&#8221;light&#8221; consent_include=&#8221;include&#8221; equal_height=&#8221;true&#8221; el_design=&#8221;{&#8220;desktop&#8220;:{&#8220;padding-top&#8220;:60,&#8220;padding-bottom&#8220;:60}}&#8221; custom_bg_color=&#8221;{&#8220;solid&#8220;:{&#8220;id&#8220;:&#8220;Light background&#8220;,&#8220;color&#8220;:&#8220;#f9fafb&#8220;}}&#8221;][vc_column bg_blur=&#8221;0&#8243; width=&#8221;1\/2&#8243; css_animation=&#8221;&#8221;][vc_heading heading_wrapper=&#8221;h5&#8243; alignment=&#8221;align_left&#8221; heading_typography=&#8221;{&#8220;variants&#8220;:&#8220;600&#8220;,&#8220;font_size&#8220;:&#8220;24px&#8220;}&#8221; css_animation=&#8221;&#8221;]Control border radius[\/vc_heading][vc_empty_space][vc_text_element typography=&#8221;{&#8220;font_size&#8220;:&#8220;18px&#8220;}&#8221; css_animation=&#8221;&#8221;]You can add any border radius to your images to make them fit into your design and look great with other elements on the page.[\/vc_text_element][\/vc_column][vc_column bg_blur=&#8221;0&#8243; width=&#8221;1\/2&#8243; css_animation=&#8221;&#8221;][vc_image_cascade layout=&#8221;10&#8243; images=&#8221;10957,10951,10953&#8243; shadow=&#8221;shadow&#8221; border=&#8221;20&#8243; img_link=&#8221;gallery_popup&#8221; preloader=&#8221;&#8221; css_animation=&#8221;&#8221;][\/vc_column][\/vc_row][vc_row content_placement=&#8221;middle&#8221; bg_blur=&#8221;0&#8243; nav_skin=&#8221;light&#8221; consent_include=&#8221;include&#8221; equal_height=&#8221;true&#8221; el_design=&#8221;{&#8220;desktop&#8220;:{&#8220;padding-top&#8220;:60,&#8220;padding-bottom&#8220;:60}}&#8221;][vc_column bg_blur=&#8221;0&#8243; width=&#8221;2\/3&#8243; css_animation=&#8221;&#8221;][vc_image_cascade layout=&#8221;11&#8243; images=&#8221;10945,10944,10946,10960&#8243; aspect_ratio=&#8221;4:3&#8243; shadow=&#8221;shadow&#8221; border=&#8221;8&#8243; img_link=&#8221;gallery_popup&#8221; preloader=&#8221;&#8221; css_animation=&#8221;&#8221;][\/vc_column][vc_column bg_blur=&#8221;0&#8243; width=&#8221;1\/3&#8243; css_animation=&#8221;&#8221;][vc_heading heading_wrapper=&#8221;h5&#8243; alignment=&#8221;align_left&#8221; heading_typography=&#8221;{&#8220;variants&#8220;:&#8220;600&#8220;,&#8220;font_size&#8220;:&#8220;24px&#8220;}&#8221; css_animation=&#8221;&#8221;]Notice the shadows[\/vc_heading][vc_empty_space][vc_text_element typography=&#8221;{&#8220;font_size&#8220;:&#8220;18px&#8220;}&#8221; css_animation=&#8221;&#8221;]Each image in a group has its own shadow, which adds 3D effect to the cascade as images appear hovering above each other.[\/vc_text_element][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[vc_row max_width=&#8221;600&#8243; min_height=&#8221;500&#8243; content_placement=&#8221;middle&#8221; bg_blur=&#8221;0&#8243; textalign=&#8221;align_center&#8221; nav_skin=&#8221;light&#8221; consent_include=&#8221;include&#8221; equal_height=&#8221;true&#8221; el_design=&#8221;{&#8220;mobile_landscape&#8220;:{&#8220;padding-bottom&#8220;:&#8220;60&#8220;},&#8220;tablet_portrait&#8220;:{&#8220;padding-bottom&#8220;:&#8220;100&#8220;},&#8220;desktop&#8220;:{&#8220;padding-top&#8220;:&#8220;120&#8220;,&#8220;padding-bottom&#8220;:&#8220;140&#8220;}}&#8221; custom_bg_color=&#8221;{&#8220;solid&#8220;:{&#8220;id&#8220;:&#8220;Dark color&#8220;,&#8220;color&#8220;:&#8220;#1b192a&#8220;}}&#8221; overlay_color=&#8221;{&#8220;solid&#8220;:{&#8220;id&#8220;:&#8220;&#8220;,&#8220;color&#8220;:&#8220;&#8220;}}&#8221;][vc_column el_design=&#8221;{&#8220;desktop&#8220;:{&#8220;padding-top&#8220;:&#8220;15&#8220;,&#8220;padding-right&#8220;:&#8220;15&#8220;,&#8220;padding-bottom&#8220;:&#8220;15&#8220;,&#8220;padding-left&#8220;:&#8220;15&#8220;}}&#8221; bg_blur=&#8221;0&#8243; css_animation=&#8221;&#8221;][vc_heading heading_wrapper=&#8221;h1&#8243; heading_color=&#8221;{&#8220;solid&#8220;:{&#8220;id&#8220;:&#8220;custom_8548853511531338&#8220;,&#8220;color&#8220;:&#8220;#f3f4f5&#8220;}}&#8221; responsiveness=&#8221;yes&#8221; tablet_landscape=&#8221;100&#8243; tablet_portrait=&#8221;90&#8243; mobile_landscape=&#8221;85&#8243; mobile_portrait=&#8221;75&#8243; css_animation=&#8221;&#8221;]Image cascade[\/vc_heading][vc_empty_space height=&#8221;15px&#8221;][vc_text_element disable_margin=&#8221;yes&#8221; css_animation=&#8221;&#8221; color=&#8221;{&#8220;id&#8220;:&#8220;custom_3715609566673309&#8220;,&#8220;color&#8220;:&#8220;#ffffff&#8220;}&#8221;]Display multiple images in a cool and compact way[\/vc_text_element][vc_empty_space][vc_button_arrow title=&#8221;Back to homepage&#8221; style=&#8221;round&#8221; display=&#8221;display_block&#8221; skin=&#8221;light&#8221; css_animation=&#8221;&#8221; accent_color=&#8221;{&#8220;id&#8220;:&#8220;Main accent color&#8220;,&#8220;color&#8220;:&#8220;#fb9272&#8220;}&#8221; link=&#8221;url:https%3A%2F%2Fthemes.whiteboxstud.io%2Frendr%2Flanding%2F|title:Landing&#8221;][\/vc_column][\/vc_row][vc_row row_width=&#8221;wtbx_stretch_row_content&#8221; bg_blur=&#8221;0&#8243; nav_skin=&#8221;light&#8221; consent_include=&#8221;include&#8221;][vc_column el_design=&#8221;{&#8220;desktop&#8220;:{&#8220;padding-top&#8220;:&#8220;0&#8220;,&#8220;padding-right&#8220;:&#8220;0&#8220;,&#8220;padding-bottom&#8220;:&#8220;0&#8220;,&#8220;padding-left&#8220;:&#8220;0&#8220;}}&#8221; bg_blur=&#8221;0&#8243; css_animation=&#8221;&#8221;][vc_section_divider style=&#8221;curves-6&#8243; position=&#8221;bottom&#8221; height=&#8221;100&#8243; responsiveness=&#8221;yes&#8221; tablet_landscape=&#8221;100&#8243; tablet_portrait=&#8221;60&#8243; mobile_landscape=&#8221;0&#8243; mobile_portrait=&#8221;0&#8243; color=&#8221;{&#8220;id&#8220;:&#8220;custom_1334459184315555&#8220;,&#8220;color&#8220;:&#8220;rgba(255,255,255,1)&#8220;}&#8221;][\/vc_column][\/vc_row][vc_row content_placement=&#8221;middle&#8221; bg_blur=&#8221;0&#8243; nav_skin=&#8221;light&#8221; consent_include=&#8221;include&#8221; equal_height=&#8221;true&#8221; el_design=&#8221;{&#8220;desktop&#8220;:{&#8220;padding-top&#8220;:60,&#8220;padding-bottom&#8220;:60}}&#8221;][vc_column bg_blur=&#8221;0&#8243; width=&#8221;1\/2&#8243; css_animation=&#8221;&#8221;][vc_image_cascade layout=&#8221;3&#8243; images=&#8221;10957,10946&#8243; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1740","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/themes.whiteboxstud.io\/rendr\/wp-json\/wp\/v2\/pages\/1740","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themes.whiteboxstud.io\/rendr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/themes.whiteboxstud.io\/rendr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/themes.whiteboxstud.io\/rendr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themes.whiteboxstud.io\/rendr\/wp-json\/wp\/v2\/comments?post=1740"}],"version-history":[{"count":3,"href":"https:\/\/themes.whiteboxstud.io\/rendr\/wp-json\/wp\/v2\/pages\/1740\/revisions"}],"predecessor-version":[{"id":11714,"href":"https:\/\/themes.whiteboxstud.io\/rendr\/wp-json\/wp\/v2\/pages\/1740\/revisions\/11714"}],"wp:attachment":[{"href":"https:\/\/themes.whiteboxstud.io\/rendr\/wp-json\/wp\/v2\/media?parent=1740"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}