{"id":180,"date":"2016-10-06T00:18:08","date_gmt":"2016-10-06T00:18:08","guid":{"rendered":"http:\/\/localhost:8888\/doc\/?page_id=180"},"modified":"2019-05-25T22:12:54","modified_gmt":"2019-05-25T22:12:54","slug":"page-transitions","status":"publish","type":"page","link":"https:\/\/themenectar.com\/docs\/salient\/theme-options\/page-transitions\/","title":{"rendered":"Page Transitions"},"content":{"rendered":"[vc_row type=&#8221;full_width_background&#8221; full_screen_row_position=&#8221;middle&#8221; bg_color=&#8221;#f4f4f4&#8243; scene_position=&#8221;center&#8221; text_color=&#8221;dark&#8221; text_align=&#8221;left&#8221; top_padding=&#8221;60&#8243; overlay_strength=&#8221;0.3&#8243; shape_divider_position=&#8221;bottom&#8221; bg_image_animation=&#8221;none&#8221;][vc_column column_padding=&#8221;no-extra-padding&#8221; column_padding_position=&#8221;all&#8221; background_color_opacity=&#8221;1&#8243; background_hover_color_opacity=&#8221;1&#8243; column_link_target=&#8221;_self&#8221; column_shadow=&#8221;none&#8221; column_border_radius=&#8221;none&#8221; width=&#8221;1\/1&#8243; tablet_width_inherit=&#8221;default&#8221; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221; column_border_width=&#8221;none&#8221; column_border_style=&#8221;solid&#8221; bg_image_animation=&#8221;none&#8221;][vc_column_text]\n<ul>\n<li><strong>Animated Page Transitions\u00a0<\/strong>This will enable an animation between loading your pages. Allows for a smooth user experience and ensures that all javascript elements will have initialized prior to the user seeing the page<\/li>\n<li><strong>Disable Fade Out On Click\u00a0<\/strong>This will disable the default functionality of your page fading out when clicking a link with the Standard transition method. Is useful if your page transitions are conflicting with third party plugins that take over certain anchors such as lightboxes.<\/li>\n<li><strong>Disable Page Transitions On Mobile\u00a0<\/strong>This will remove page transitions when viewed on a mobile device (produces faster loading)<\/li>\n<li><strong>Transition Effect <\/strong>the two available options are<strong> Fade with loading icon <\/strong>and<strong> Center mask reveal. <\/strong>When using the Center mask reveal (as seen in the <a href=\"https:\/\/themenectar.com\/demo\/salient-corporate\">corporate demo<\/a>) the options below for the loading icon won&#8217;t be available as there is no loading icon with that transition effect.<\/li>\n<li><strong>Loading Icon Style\u00a0<\/strong>Currently there are two styles available to choose from.\u00a0Please see the images below to get a better feel for how they look:<\/li>\n<\/ul>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row type=&#8221;full_width_background&#8221; full_screen_row_position=&#8221;middle&#8221; equal_height=&#8221;yes&#8221; content_placement=&#8221;bottom&#8221; bg_color=&#8221;#f4f4f4&#8243; scene_position=&#8221;center&#8221; text_color=&#8221;dark&#8221; text_align=&#8221;left&#8221; top_padding=&#8221;60&#8243; bottom_padding=&#8221;60&#8243; overlay_strength=&#8221;0.3&#8243; shape_divider_position=&#8221;bottom&#8221; bg_image_animation=&#8221;none&#8221;][vc_column centered_text=&#8221;true&#8221; column_padding=&#8221;padding-3-percent&#8221; column_padding_position=&#8221;all&#8221; background_color_opacity=&#8221;1&#8243; background_hover_color_opacity=&#8221;1&#8243; column_link_target=&#8221;_self&#8221; column_shadow=&#8221;none&#8221; column_border_radius=&#8221;none&#8221; boxed=&#8221;true&#8221; width=&#8221;1\/2&#8243; tablet_width_inherit=&#8221;default&#8221; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221; column_border_width=&#8221;none&#8221; column_border_style=&#8221;solid&#8221; bg_image_animation=&#8221;none&#8221;][image_with_animation image_url=&#8221;8351&#8243; alignment=&#8221;&#8221; animation=&#8221;Fade In&#8221; border_radius=&#8221;none&#8221; box_shadow=&#8221;none&#8221; max_width=&#8221;100%&#8221;][vc_column_text css=&#8221;.vc_custom_1476452204427{margin-top: 10px !important;}&#8221;]Default Style[\/vc_column_text][\/vc_column][vc_column centered_text=&#8221;true&#8221; column_padding=&#8221;padding-5-percent&#8221; column_padding_position=&#8221;all&#8221; background_color_opacity=&#8221;1&#8243; background_hover_color_opacity=&#8221;1&#8243; column_link_target=&#8221;_self&#8221; column_shadow=&#8221;none&#8221; column_border_radius=&#8221;none&#8221; boxed=&#8221;true&#8221; width=&#8221;1\/2&#8243; tablet_width_inherit=&#8221;default&#8221; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221; column_border_width=&#8221;none&#8221; column_border_style=&#8221;solid&#8221; bg_image_animation=&#8221;none&#8221;][image_with_animation image_url=&#8221;8353&#8243; alignment=&#8221;&#8221; animation=&#8221;Fade In&#8221; border_radius=&#8221;none&#8221; box_shadow=&#8221;none&#8221; max_width=&#8221;100%&#8221;][vc_column_text css=&#8221;.vc_custom_1476452209552{margin-top: 10px !important;}&#8221;]Material Design Style[\/vc_column_text][\/vc_column][\/vc_row][vc_row type=&#8221;full_width_background&#8221; full_screen_row_position=&#8221;middle&#8221; bg_color=&#8221;#f4f4f4&#8243; scene_position=&#8221;center&#8221; text_color=&#8221;dark&#8221; text_align=&#8221;left&#8221; bottom_padding=&#8221;70&#8243; overlay_strength=&#8221;0.3&#8243; shape_divider_position=&#8221;bottom&#8221; bg_image_animation=&#8221;none&#8221;][vc_column column_padding=&#8221;no-extra-padding&#8221; column_padding_position=&#8221;all&#8221; background_color_opacity=&#8221;1&#8243; background_hover_color_opacity=&#8221;1&#8243; column_link_target=&#8221;_self&#8221; column_shadow=&#8221;none&#8221; column_border_radius=&#8221;none&#8221; width=&#8221;1\/1&#8243; tablet_width_inherit=&#8221;default&#8221; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221; column_border_width=&#8221;none&#8221; column_border_style=&#8221;solid&#8221; bg_image_animation=&#8221;none&#8221;][vc_column_text]\n<ul>\n<li><strong>Loading Icon Coloring\u00a0<\/strong>The icon will animate between the two colors &#8211; or just use the first if a second is not supplied.<\/li>\n<li><strong>Custom Loading Image\u00a0<\/strong>Upload a .png or .gif image that will be used in all applicable areas on your site as the loading image.<\/li>\n<li><strong>Loading Image CSS Animation\u00a0<\/strong>This will add a css based animation onto your defined image.<\/li>\n<li><strong>Page Transition BG Color\u00a0<\/strong>Use this to define the color of your page transition background. Used in both the <strong>Fade with loading icon<\/strong> and <strong>Center mask reveal<\/strong> transition effects.<\/li>\n<\/ul>\n[\/vc_column_text][\/vc_column][\/vc_row]\n","protected":false},"excerpt":{"rendered":"<p>[vc_row type=&#8221;full_width_background&#8221; full_screen_row_position=&#8221;middle&#8221; bg_color=&#8221;#f4f4f4&#8243; scene_position=&#8221;center&#8221; text_color=&#8221;dark&#8221; text_align=&#8221;left&#8221; top_padding=&#8221;60&#8243; overlay_strength=&#8221;0.3&#8243; shape_divider_position=&#8221;bottom&#8221; bg_image_animation=&#8221;none&#8221;][vc_column column_padding=&#8221;no-extra-padding&#8221; column_padding_position=&#8221;all&#8221; background_color_opacity=&#8221;1&#8243; background_hover_color_opacity=&#8221;1&#8243; column_link_target=&#8221;_self&#8221; column_shadow=&#8221;none&#8221; column_border_radius=&#8221;none&#8221; width=&#8221;1\/1&#8243; tablet_width_inherit=&#8221;default&#8221; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221; column_border_width=&#8221;none&#8221; column_border_style=&#8221;solid&#8221; bg_image_animation=&#8221;none&#8221;][vc_column_text] Animated Page Transitions\u00a0This will enable&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":166,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/pages\/180"}],"collection":[{"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/comments?post=180"}],"version-history":[{"count":0,"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/pages\/180\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/pages\/166"}],"wp:attachment":[{"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/media?parent=180"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}