{"id":8899,"date":"2019-08-11T15:23:52","date_gmt":"2019-08-11T13:23:52","guid":{"rendered":"https:\/\/themes.whiteboxstud.io\/rendr\/?page_id=8899"},"modified":"2022-08-03T22:22:57","modified_gmt":"2022-08-03T20:22:57","slug":"transitions","status":"publish","type":"page","link":"https:\/\/themes.whiteboxstud.io\/rendr\/transitions\/","title":{"rendered":"Transitions"},"content":{"rendered":"<p>[vc_row gap=&#8221;30&#8243; content_placement=&#8221;middle&#8221; bg_blur=&#8221;0&#8243; custom_bg_type=&#8221;image&#8221; custom_bg_cover=&#8221;cover&#8221; custom_bg_repeat=&#8221;no-repeat&#8221; custom_bg_position=&#8221;Center center&#8221; 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;:&#8220;200&#8220;,&#8220;padding-bottom&#8220;:&#8220;60&#8220;}}&#8221; custom_bg_color=&#8221;{&#8220;solid&#8220;:{&#8220;id&#8220;:&#8220;Dark color&#8220;,&#8220;color&#8220;:&#8220;#151221&#8220;}}&#8221; overlay_color=&#8221;{&#8220;dir&#8220;:&#8220;to top&#8220;,&#8220;from&#8220;:{&#8220;id&#8220;:&#8220;Dark color&#8220;,&#8220;color&#8220;:&#8220;#151221&#8220;},&#8220;to&#8220;:{&#8220;id&#8220;:&#8220;custom_color&#8220;,&#8220;color&#8220;:&#8220;rgba(21,18,33,0.4)&#8220;}}&#8221; custom_bg_image=&#8221;8496&#8243;][vc_column bg_blur=&#8221;0&#8243; width=&#8221;1\/3&#8243; css_animation=&#8221;&#8221;][vc_content_box style=&#8221;style_2&#8243; hover_anim=&#8221;hover_disable&#8221; overflow=&#8221;&#8221; bg_blur=&#8221;0&#8243; el_design=&#8221;{&#8220;desktop&#8220;:{&#8220;padding-top&#8220;:&#8220;45&#8220;,&#8220;padding-right&#8220;:&#8220;45&#8220;,&#8220;padding-bottom&#8220;:&#8220;45&#8220;,&#8220;padding-left&#8220;:&#8220;45&#8220;}}&#8221; equal_height=&#8221;&#8221; alignment=&#8221;&#8221; vertical_align=&#8221;&#8221; horizontal_align=&#8221;&#8221; css_animation=&#8221;&#8221; bg_color=&#8221;{&#8220;solid&#8220;:{&#8220;id&#8220;:&#8220;custom_color&#8220;,&#8220;color&#8220;:&#8220;rgba(0,0,0,0.3)&#8220;}}&#8221;][vc_heading heading_wrapper=&#8221;h3&#8243; heading_color=&#8221;{&#8220;solid&#8220;:{&#8220;id&#8220;:&#8220;custom_1334459184315555&#8220;,&#8220;color&#8220;:&#8220;rgba(255,255,255,1)&#8220;}}&#8221; heading_typography=&#8221;{&#8220;variants&#8220;:&#8220;800&#8220;,&#8220;font_size&#8220;:&#8220;18px&#8220;}&#8221; css_animation=&#8221;&#8221;]1. Page Transitions[\/vc_heading][vc_empty_space][vc_text_element disable_margin=&#8221;yes&#8221; css_animation=&#8221;&#8221; color=&#8221;{&#8220;id&#8220;:&#8220;custom_1334459184315555&#8220;,&#8220;color&#8220;:&#8220;rgba(255,255,255,1)&#8220;}&#8221;]Add one of multiple awesome page transition effects to make page loading more seamless and interactive.[\/vc_text_element][\/vc_content_box][\/vc_column][vc_column bg_blur=&#8221;0&#8243; width=&#8221;1\/3&#8243; css_animation=&#8221;&#8221;][vc_content_box style=&#8221;style_2&#8243; hover_anim=&#8221;hover_disable&#8221; overflow=&#8221;&#8221; bg_blur=&#8221;0&#8243; el_design=&#8221;{&#8220;desktop&#8220;:{&#8220;padding-top&#8220;:&#8220;45&#8220;,&#8220;padding-right&#8220;:&#8220;45&#8220;,&#8220;padding-bottom&#8220;:&#8220;45&#8220;,&#8220;padding-left&#8220;:&#8220;45&#8220;}}&#8221; equal_height=&#8221;&#8221; alignment=&#8221;&#8221; vertical_align=&#8221;&#8221; horizontal_align=&#8221;&#8221; css_animation=&#8221;&#8221; bg_color=&#8221;{&#8220;solid&#8220;:{&#8220;id&#8220;:&#8220;custom_color&#8220;,&#8220;color&#8220;:&#8220;rgba(0,0,0,0.3)&#8220;}}&#8221;][vc_heading heading_wrapper=&#8221;h3&#8243; heading_color=&#8221;{&#8220;solid&#8220;:{&#8220;id&#8220;:&#8220;custom_1334459184315555&#8220;,&#8220;color&#8220;:&#8220;rgba(255,255,255,1)&#8220;}}&#8221; heading_typography=&#8221;{&#8220;variants&#8220;:&#8220;800&#8220;,&#8220;font_size&#8220;:&#8220;18px&#8220;}&#8221; css_animation=&#8221;&#8221;]2. Page Preloader[\/vc_heading][vc_empty_space][vc_text_element disable_margin=&#8221;yes&#8221; css_animation=&#8221;&#8221; color=&#8221;{&#8220;id&#8220;:&#8220;custom_1334459184315555&#8220;,&#8220;color&#8220;:&#8220;rgba(255,255,255,1)&#8220;}&#8221;]Display one of\u00a0<strong>16<\/strong> cool modern preloaders while the page content is loaded so that your visitors don&#8217;t drop off.[\/vc_text_element][\/vc_content_box][\/vc_column][vc_column bg_blur=&#8221;0&#8243; width=&#8221;1\/3&#8243; css_animation=&#8221;&#8221;][vc_content_box style=&#8221;style_2&#8243; hover_anim=&#8221;hover_disable&#8221; overflow=&#8221;&#8221; bg_blur=&#8221;0&#8243; el_design=&#8221;{&#8220;desktop&#8220;:{&#8220;padding-top&#8220;:&#8220;45&#8220;,&#8220;padding-right&#8220;:&#8220;45&#8220;,&#8220;padding-bottom&#8220;:&#8220;45&#8220;,&#8220;padding-left&#8220;:&#8220;45&#8220;}}&#8221; equal_height=&#8221;&#8221; alignment=&#8221;&#8221; vertical_align=&#8221;&#8221; horizontal_align=&#8221;&#8221; css_animation=&#8221;&#8221; bg_color=&#8221;{&#8220;solid&#8220;:{&#8220;id&#8220;:&#8220;custom_color&#8220;,&#8220;color&#8220;:&#8220;rgba(0,0,0,0.3)&#8220;}}&#8221;][vc_heading heading_wrapper=&#8221;h3&#8243; heading_color=&#8221;{&#8220;solid&#8220;:{&#8220;id&#8220;:&#8220;custom_1334459184315555&#8220;,&#8220;color&#8220;:&#8220;rgba(255,255,255,1)&#8220;}}&#8221; heading_typography=&#8221;{&#8220;variants&#8220;:&#8220;800&#8220;,&#8220;font_size&#8220;:&#8220;18px&#8220;}&#8221; css_animation=&#8221;&#8221;]3. Page Reveal Effect[\/vc_heading][vc_empty_space][vc_text_element disable_margin=&#8221;yes&#8221; css_animation=&#8221;&#8221; color=&#8221;{&#8220;id&#8220;:&#8220;custom_1334459184315555&#8220;,&#8220;color&#8220;:&#8220;rgba(255,255,255,1)&#8220;}&#8221;]Choose how a new page is revealed after the content is loaded. Fancy eye-catching styles to make the first impression.[\/vc_text_element][\/vc_content_box][\/vc_column][\/vc_row][vc_row max_width=&#8221;500&#8243; bg_blur=&#8221;0&#8243; textalign=&#8221;align_center&#8221; nav_skin=&#8221;light&#8221; consent_include=&#8221;include&#8221; custom_bg_color=&#8221;{&#8220;solid&#8220;:{&#8220;id&#8220;:&#8220;Dark color&#8220;,&#8220;color&#8220;:&#8220;#151221&#8220;}}&#8221; el_design=&#8221;{&#8220;desktop&#8220;:{&#8220;padding-bottom&#8220;:&#8220;60&#8220;}}&#8221;][vc_column bg_blur=&#8221;0&#8243; css_animation=&#8221;&#8221;][vc_text_element css_animation=&#8221;&#8221; color=&#8221;{&#8220;id&#8220;:&#8220;custom_1334459184315555&#8220;,&#8220;color&#8220;:&#8220;rgba(255,255,255,1)&#8220;}&#8221;]<\/p>\n<p style=\"text-align: center;\">Press the button below to reload the page with a random combination of page transition, page preloader and page reveal effect. On your website you can use them in any combination.<\/p>\n<p>[\/vc_text_element][vc_empty_space][vc_button_arrow title=&#8221;Check out page transitions!&#8221; style=&#8221;square&#8221; display=&#8221;display_block&#8221; skin=&#8221;dark&#8221; css_animation=&#8221;&#8221; accent_color=&#8221;{&#8220;id&#8220;:&#8220;custom_color&#8220;,&#8220;color&#8220;:&#8220;rgba(36,201,138,1)&#8220;}&#8221; link=&#8221;url:https%3A%2F%2Fthemes.whiteboxstud.io%2Frendr%2Ftransitions%2F%3Ftransition%3Drandom|||&#8221;][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[vc_row gap=&#8221;30&#8243; content_placement=&#8221;middle&#8221; bg_blur=&#8221;0&#8243; custom_bg_type=&#8221;image&#8221; custom_bg_cover=&#8221;cover&#8221; custom_bg_repeat=&#8221;no-repeat&#8221; custom_bg_position=&#8221;Center center&#8221; 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;:&#8220;200&#8220;,&#8220;padding-bottom&#8220;:&#8220;60&#8220;}}&#8221; custom_bg_color=&#8221;{&#8220;solid&#8220;:{&#8220;id&#8220;:&#8220;Dark color&#8220;,&#8220;color&#8220;:&#8220;#151221&#8220;}}&#8221; overlay_color=&#8221;{&#8220;dir&#8220;:&#8220;to top&#8220;,&#8220;from&#8220;:{&#8220;id&#8220;:&#8220;Dark color&#8220;,&#8220;color&#8220;:&#8220;#151221&#8220;},&#8220;to&#8220;:{&#8220;id&#8220;:&#8220;custom_color&#8220;,&#8220;color&#8220;:&#8220;rgba(21,18,33,0.4)&#8220;}}&#8221; custom_bg_image=&#8221;8496&#8243;][vc_column bg_blur=&#8221;0&#8243; width=&#8221;1\/3&#8243; css_animation=&#8221;&#8221;][vc_content_box style=&#8221;style_2&#8243; hover_anim=&#8221;hover_disable&#8221; overflow=&#8221;&#8221; bg_blur=&#8221;0&#8243; el_design=&#8221;{&#8220;desktop&#8220;:{&#8220;padding-top&#8220;:&#8220;45&#8220;,&#8220;padding-right&#8220;:&#8220;45&#8220;,&#8220;padding-bottom&#8220;:&#8220;45&#8220;,&#8220;padding-left&#8220;:&#8220;45&#8220;}}&#8221; equal_height=&#8221;&#8221; alignment=&#8221;&#8221; vertical_align=&#8221;&#8221; horizontal_align=&#8221;&#8221; css_animation=&#8221;&#8221; bg_color=&#8221;{&#8220;solid&#8220;:{&#8220;id&#8220;:&#8220;custom_color&#8220;,&#8220;color&#8220;:&#8220;rgba(0,0,0,0.3)&#8220;}}&#8221;][vc_heading heading_wrapper=&#8221;h3&#8243; heading_color=&#8221;{&#8220;solid&#8220;:{&#8220;id&#8220;:&#8220;custom_1334459184315555&#8220;,&#8220;color&#8220;:&#8220;rgba(255,255,255,1)&#8220;}}&#8221; heading_typography=&#8221;{&#8220;variants&#8220;:&#8220;800&#8220;,&#8220;font_size&#8220;:&#8220;18px&#8220;}&#8221; css_animation=&#8221;&#8221;]1. Page Transitions[\/vc_heading][vc_empty_space][vc_text_element disable_margin=&#8221;yes&#8221; css_animation=&#8221;&#8221; color=&#8221;{&#8220;id&#8220;:&#8220;custom_1334459184315555&#8220;,&#8220;color&#8220;:&#8220;rgba(255,255,255,1)&#8220;}&#8221;]Add one of multiple awesome page transition effects to make page loading more seamless and interactive.[\/vc_text_element][\/vc_content_box][\/vc_column][vc_column bg_blur=&#8221;0&#8243; width=&#8221;1\/3&#8243; css_animation=&#8221;&#8221;][vc_content_box style=&#8221;style_2&#8243; hover_anim=&#8221;hover_disable&#8221; overflow=&#8221;&#8221; bg_blur=&#8221;0&#8243; el_design=&#8221;{&#8220;desktop&#8220;:{&#8220;padding-top&#8220;:&#8220;45&#8220;,&#8220;padding-right&#8220;:&#8220;45&#8220;,&#8220;padding-bottom&#8220;:&#8220;45&#8220;,&#8220;padding-left&#8220;:&#8220;45&#8220;}}&#8221; equal_height=&#8221;&#8221; alignment=&#8221;&#8221; vertical_align=&#8221;&#8221; horizontal_align=&#8221;&#8221; css_animation=&#8221;&#8221; bg_color=&#8221;{&#8220;solid&#8220;:{&#8220;id&#8220;:&#8220;custom_color&#8220;,&#8220;color&#8220;:&#8220;rgba(0,0,0,0.3)&#8220;}}&#8221;][vc_heading heading_wrapper=&#8221;h3&#8243; heading_color=&#8221;{&#8220;solid&#8220;:{&#8220;id&#8220;:&#8220;custom_1334459184315555&#8220;,&#8220;color&#8220;:&#8220;rgba(255,255,255,1)&#8220;}}&#8221; heading_typography=&#8221;{&#8220;variants&#8220;:&#8220;800&#8220;,&#8220;font_size&#8220;:&#8220;18px&#8220;}&#8221; css_animation=&#8221;&#8221;]2. [&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-8899","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/themes.whiteboxstud.io\/rendr\/wp-json\/wp\/v2\/pages\/8899","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=8899"}],"version-history":[{"count":12,"href":"https:\/\/themes.whiteboxstud.io\/rendr\/wp-json\/wp\/v2\/pages\/8899\/revisions"}],"predecessor-version":[{"id":11753,"href":"https:\/\/themes.whiteboxstud.io\/rendr\/wp-json\/wp\/v2\/pages\/8899\/revisions\/11753"}],"wp:attachment":[{"href":"https:\/\/themes.whiteboxstud.io\/rendr\/wp-json\/wp\/v2\/media?parent=8899"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}