{"id":224,"date":"2016-10-06T01:43:12","date_gmt":"2016-10-06T01:43:12","guid":{"rendered":"http:\/\/localhost:8888\/doc\/?page_id=224"},"modified":"2016-10-22T06:12:09","modified_gmt":"2016-10-22T06:12:09","slug":"page-metaboxes","status":"publish","type":"page","link":"https:\/\/themenectar.com\/docs\/salient\/page-metaboxes\/","title":{"rendered":"Page Metaboxes"},"content":{"rendered":"[vc_row type=&#8221;in_container&#8221; full_screen_row_position=&#8221;middle&#8221; scene_position=&#8221;center&#8221; text_color=&#8221;dark&#8221; text_align=&#8221;left&#8221; overlay_strength=&#8221;0.3&#8243;][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; width=&#8221;1\/1&#8243; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221;][page_submenu alignment=&#8221;left&#8221; sticky=&#8221;true&#8221; bg_color=&#8221;#075aff&#8221; link_color=&#8221;#ffffff&#8221;][page_link link_url=&#8221;#pageheader&#8221; title=&#8221;Page Header &#8221; id=&#8221;1475728793-2-10&#8243; tab_id=&#8221;1475728816505-8&#8243;] [\/page_link][page_link link_url=&#8221;#fullscreenrows&#8221; title=&#8221;Page Full Screen Rows&#8221; id=&#8221;1475728793-1-6&#8243; tab_id=&#8221;1475728816388-7&#8243;] [\/page_link][\/page_submenu][\/vc_column][\/vc_row][vc_row type=&#8221;in_container&#8221; full_screen_row_position=&#8221;middle&#8221; scene_position=&#8221;center&#8221; text_color=&#8221;dark&#8221; text_align=&#8221;left&#8221; top_padding=&#8221;30&#8243; id=&#8221;pageheader&#8221; overlay_strength=&#8221;0.3&#8243;][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; width=&#8221;1\/1&#8243; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221;][vc_column_text]\n<h2>Page Header<\/h2>\n<div class=\"page\" title=\"Page 11\">\n<div class=\"layoutArea\">\n<div class=\"column\">\n<p>The page header offers three different background types. Each different type will reveal certain options\u00a0which are related to that type.<\/p>\n<\/div>\n<\/div>\n<\/div>\n[\/vc_column_text][tabbed_section style=&#8221;minimal&#8221; alignment=&#8221;left&#8221; cta_button_style=&#8221;accent-color&#8221;][tab title=&#8221;Image&#8221; id=&#8221;1475796572-1-91&#8243; tab_id=&#8221;1475796843168-5&#8243;][vc_column_text]\n<ul>\n<li><strong>Background Image:<\/strong> Allows you to upload an image that will be shown in the Background of your page header. Since it will be displayed full width, make sure yo supply a decent size image in order to ensure a good viewing experience on desktops. e.g. 1<strong>600px wide<\/strong>\u00a0by <strong>350px tall\u00a0(<\/strong>or whatever you have for your defined header height)<\/li>\n<li><strong>Background Alignment:\u00a0<\/strong>Controls the positioning of how your background image will align within the page header<\/li>\n<\/ul>\n[\/vc_column_text][\/tab][tab title=&#8221;Video&#8221; id=&#8221;1475796572-2-49&#8243; tab_id=&#8221;1475796843455-10&#8243;][vc_column_text]Your supplied video will be automatically played on load so make sure to use this option responsibly for enhancing your design, rather than annoying your user. e.g. A video loop with no sound. In order to ensure cross browser compatibility you&#8217;ll need to supply both WebM and MP4 versions of your video. OGV is optional.<\/p>\n<ul>\n<li><strong>Video WebM Upload\u00a0<\/strong>The WEBM video filetype field<\/li>\n<li><strong>Video MP4\u00a0Upload <\/strong>The MP4 video filetype\u00a0field<\/li>\n<li><strong>Video\u00a0OGV\u00a0Upload\u00a0<\/strong>The OGV video filetype\u00a0field<\/li>\n<li><strong>Preview Image <\/strong>This will be used on mobile devices in place of the video background since mobile devices do not allow the autoplaying of videos.<\/li>\n<\/ul>\n[\/vc_column_text][\/tab][tab title=&#8221;HTML5 Canvas&#8221; id=&#8221;1475796883729-2-10&#8243; tab_id=&#8221;1475796883734-10&#8243;][vc_column_text]<strong>Particle Images<\/strong> This upload field will open a modal that allows you to add images to your particle display via the WordPress media gallery interface. Please see the tutorial below for more information on configuring your particle header<br \/>\n[\/vc_column_text][vc_row_inner text_align=&#8221;left&#8221;][vc_column_inner column_padding=&#8221;padding-8-percent&#8221; column_padding_position=&#8221;all&#8221; background_color_opacity=&#8221;1&#8243; width=&#8221;1\/1&#8243;][nectar_video_lightbox link_style=&#8221;play_button_2&#8243; nectar_play_button_color=&#8221;Default-Accent-Color&#8221; image_url=&#8221;8369&#8243; box_shadow=&#8221;x_large_depth&#8221; video_url=&#8221;https:\/\/www.youtube.com\/watch?v=SrIlw4-brCg&#8221;][\/vc_column_inner][\/vc_row_inner][\/tab][\/tabbed_section][\/vc_column][\/vc_row][vc_row type=&#8221;in_container&#8221; full_screen_row_position=&#8221;middle&#8221; scene_position=&#8221;center&#8221; text_color=&#8221;dark&#8221; text_align=&#8221;left&#8221; overlay_strength=&#8221;0.3&#8243;][vc_column boxed=&#8221;true&#8221; column_padding=&#8221;padding-3-percent&#8221; column_padding_position=&#8221;all&#8221; background_color=&#8221;#f7f7f7&#8243; background_color_opacity=&#8221;1&#8243; background_hover_color_opacity=&#8221;1&#8243; width=&#8221;1\/1&#8243; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221;][vc_column_text]<em>Note:<\/em> Having a background color\/image set tells the theme that you&#8217;re intending on using the\u00a0page header and it will display regardless if you&#8217;ve deleted the supplied title. Sometimes users wish to no longer use a page header but forget to delete the Background color they&#8217;ve set and can&#8217;t figure out what&#8217;s causing the page header area to remain.[\/vc_column_text][\/vc_column][\/vc_row][vc_row type=&#8221;full_width_background&#8221; full_screen_row_position=&#8221;middle&#8221; scene_position=&#8221;center&#8221; text_color=&#8221;dark&#8221; text_align=&#8221;left&#8221; overlay_strength=&#8221;0.3&#8243;][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; width=&#8221;1\/1&#8243; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221;][vc_column_text]\n<h3>General options<\/h3>\n<ul>\n<li><strong>Scroll Effect:\u00a0<\/strong>Here you can select an effect that will be used when scrolling down if desired. The Box Roll effect can be seen <a href=\"https:\/\/themenectar.com\/demo\/salient-agency\/\" target=\"_blank\">here<\/a> and the parallax header can be seen <a href=\"https:\/\/themenectar.com\/demo\/salient-frostwave\/about-me\/\" target=\"_blank\">here<\/a>.<\/li>\n<li><strong>Page Header Height:<\/strong>\u00a0This controls how tall your header will display on desktop displays. Enter the desired value in px but don&#8217;t include the &#8220;px&#8221;. e.g. &#8220;350&#8221;<\/li>\n<li><strong>Fullscreen Height: <\/strong>Checking the box for this will cause your page header to display fullscreen of the window the user is browsing on.<\/li>\n<li><strong>Page Header Title:\u00a0<\/strong>The title which will displayed within the header<\/li>\n<li><strong>Page Header Subtitle: <\/strong>An optional title which will be displayed smaller under the main title<\/li>\n<li><strong>Text Effect:\u00a0<\/strong>An optional animation effect that will be used on page load to animate your page header title\/subtitle into view<\/li>\n<li><strong>Header Content Alignment: <\/strong>Controls the horizontal and vertical alignment of your page header title\/subittle<\/li>\n<li><strong>Page Header Background Color: <\/strong>Allows you to set on optional background color for the page header<\/li>\n<li><strong>Page Header Font Color: <\/strong>Allows you to define your own color for the page header title\/subtitle &#8211; the default is white<\/li>\n<\/ul>\n<p>The following two options only appear when you have the <strong>Use Transparent Header When Applicable<\/strong> option turned on in the <strong>Salient options panel &gt; Header Navigation &gt; Transparency<\/strong> tab. To learn more about how the transparent navigation effect works please see this\u00a0<a href=\"https:\/\/themenectar.com\/docs\/salient\/index.php\/theme-options\/header-navigation\/\">section in the documentation<\/a> about it.<\/p>\n<ul>\n<li><strong>Disable Transparency From Navigation: <\/strong>Will deactivate the transparent effect from your header navigation when it would otherwise be enabled due to having a setup that would trigger it &#8211; i.e. Using a page header with a supplied BG color\/image or using a Nectar Slider at the top of your page in the Salient Visual Composer.<\/li>\n<li><strong>Force Transparency On Navigation: <\/strong>Will trigger the transparent effect regardless. This is useful for when you&#8217;re not using an applicable setup, but still want the header to be transparent when at the top of the page. e.g. You&#8217;re using a full width background Salient Visual Composer row at the top.<\/li>\n<\/ul>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row type=&#8221;full_width_content&#8221; full_screen_row_position=&#8221;middle&#8221; scene_position=&#8221;center&#8221; text_color=&#8221;dark&#8221; text_align=&#8221;left&#8221; overlay_strength=&#8221;0.3&#8243;][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; width=&#8221;1\/1&#8243; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221;][vc_column_text css=&#8221;.vc_custom_1475734482248{margin-top: 50px !important;border-top-width: 1px !important;padding-bottom: 50px !important;border-top-color: #d6d6d6 !important;border-top-style: solid !important;border-radius: 1px !important;}&#8221;][\/vc_column_text][\/vc_column][\/vc_row][vc_row type=&#8221;full_width_background&#8221; full_screen_row_position=&#8221;middle&#8221; scene_position=&#8221;center&#8221; text_color=&#8221;dark&#8221; text_align=&#8221;left&#8221; top_padding=&#8221;30&#8243; id=&#8221;fullscreenrows&#8221; overlay_strength=&#8221;0.3&#8243;][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; width=&#8221;1\/1&#8243; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221;][vc_column_text]\n<h2>Page Full Screen Rows<\/h2>\n<p>The page full screen row option will turn all of your rows in the Salient Visual Composer page builder into fullscreen sections which will be scrolled between remaining always 100% in view. There&#8217;s many configuration options pertaining to the\u00a0animations and general styling which will be listed below. Salient also provides multiple demos showing off this feature which can be seen here:<\/p>\n<ul>\n<li><a href=\"https:\/\/themenectar.com\/demo\/salient-product\" target=\"_blank\">Product Demo<\/a><\/li>\n<li><a href=\"https:\/\/themenectar.com\/demo\/salient-service\" target=\"_blank\">Service Demo<\/a><\/li>\n<li><a href=\"https:\/\/themenectar.com\/demo\/salient-app\" target=\"_blank\">Application Demo<\/a><\/li>\n<\/ul>\n<h3>Video Tutorial<\/h3>\n<p>If you&#8217;re the visual learning type or just want to see mr. Nectar configure some sections to get a better feel for the page full screen rows, please check the\u00a0video\u00a0tutorial below!<\/p>\n<h3><\/h3>\n[\/vc_column_text][vc_row_inner text_align=&#8221;left&#8221;][vc_column_inner column_padding=&#8221;padding-8-percent&#8221; column_padding_position=&#8221;all&#8221; background_color_opacity=&#8221;1&#8243; width=&#8221;1\/1&#8243;][nectar_video_lightbox link_style=&#8221;play_button_2&#8243; nectar_play_button_color=&#8221;Default-Accent-Color&#8221; image_url=&#8221;8372&#8243; box_shadow=&#8221;x_large_depth&#8221; video_url=&#8221;https:\/\/www.youtube.com\/watch?v=S3P1BsTitnE&#8221;][\/vc_column_inner][\/vc_row_inner][vc_row_inner top_padding=&#8221;7%&#8221; text_align=&#8221;left&#8221;][vc_column_inner column_padding=&#8221;no-extra-padding&#8221; column_padding_position=&#8221;all&#8221; background_color_opacity=&#8221;1&#8243; width=&#8221;1\/1&#8243;][vc_column_text css=&#8221;.vc_custom_1475925375969{margin-bottom: 40px !important;}&#8221;]\n<h3>Configuration options<\/h3>\n<ul>\n<li><strong>Animation Between Rows\u00a0<\/strong>This will configure the actual animation seen when scrolling\/transitioning between your rows.<\/li>\n<li><strong>Animation Speed\u00a0<\/strong>The dropdown here will control how fast the animation occurs<\/li>\n<li><strong>Add Row Anchors To URL\u00a0<\/strong>This option will add anchors to the end of your page URL when switching between sections. The anchors will be\u00a0populated\u00a0by the name you supply for each Row in the <strong>ID<\/strong> field (see below screenshot). I recommended using this option\u00a0since it will increase the ease of navigation for everyone &#8211; your users will be able to link to specific sections in your page as well as have the browser back\/forward button history. You will also be able to link to specific sections on your page from other areas of your site.<\/li>\n<\/ul>\n[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row][vc_row type=&#8221;in_container&#8221; full_screen_row_position=&#8221;middle&#8221; scene_position=&#8221;center&#8221; text_color=&#8221;dark&#8221; text_align=&#8221;left&#8221; overlay_strength=&#8221;0.3&#8243;][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; width=&#8221;1\/1&#8243; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221;][image_with_animation image_url=&#8221;8376&#8243; alignment=&#8221;&#8221; animation=&#8221;None&#8221; box_shadow=&#8221;none&#8221; max_width=&#8221;100%&#8221;][\/vc_column][\/vc_row][vc_row type=&#8221;full_width_background&#8221; full_screen_row_position=&#8221;middle&#8221; scene_position=&#8221;center&#8221; text_color=&#8221;dark&#8221; text_align=&#8221;left&#8221; top_padding=&#8221;30&#8243; bottom_padding=&#8221;60&#8243; id=&#8221;fullscreenrows&#8221; overlay_strength=&#8221;0.3&#8243;][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; width=&#8221;1\/1&#8243; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221;][vc_column_text]\n<ul>\n<li><strong>Row BG Image Animation\u00a0<\/strong>This option will effect all background images you have set in your page builder rows. The animation for be triggered upon reaching each section.<\/li>\n<li><strong>Dot Navigation\u00a0<\/strong>This will control the styling of the navigation used to change between your sections. There is also the option to hide the dot navigation if you don&#8217;t want it e.g. you&#8217;re only using one row<\/li>\n<li><strong>Row Overflow\u00a0<\/strong>Dictates what happens when content in your row takes up more space than available on the screen. You can choose either to hide the extra content or to give the user a scrollbar. Since mostly every section will end up overflowing on mobile devices, the <em>provide scrollbar <\/em>choice for this option is used on devices under 1000px screen width.<\/li>\n<li><strong>Page Footer <\/strong>lets you configure what to use as a footer for your page, if anything at all<\/li>\n<\/ul>\n<h3><\/h3>\n[\/vc_column_text][\/vc_column][\/vc_row]\n","protected":false},"excerpt":{"rendered":"<p>[vc_row type=&#8221;in_container&#8221; full_screen_row_position=&#8221;middle&#8221; scene_position=&#8221;center&#8221; text_color=&#8221;dark&#8221; text_align=&#8221;left&#8221; overlay_strength=&#8221;0.3&#8243;][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; width=&#8221;1\/1&#8243; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221;][page_submenu alignment=&#8221;left&#8221; sticky=&#8221;true&#8221; bg_color=&#8221;#075aff&#8221; link_color=&#8221;#ffffff&#8221;][page_link link_url=&#8221;#pageheader&#8221; title=&#8221;Page Header &#8221; id=&#8221;1475728793-2-10&#8243; tab_id=&#8221;1475728816505-8&#8243;] [\/page_link][page_link link_url=&#8221;#fullscreenrows&#8221; title=&#8221;Page Full Screen Rows&#8221;&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"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\/224"}],"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=224"}],"version-history":[{"count":0,"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/pages\/224\/revisions"}],"wp:attachment":[{"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/media?parent=224"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}