{"id":5045,"date":"2022-08-11T13:20:46","date_gmt":"2022-08-11T13:20:46","guid":{"rendered":"https:\/\/www.portotheme.com\/wordpress\/porto\/shortcodes\/?page_id=5045"},"modified":"2022-08-17T12:56:08","modified_gmt":"2022-08-17T12:56:08","slug":"conditional-rendering","status":"publish","type":"page","link":"https:\/\/www.portotheme.com\/wordpress\/porto\/shortcodes\/shortcodes\/conditional-rendering\/","title":{"rendered":"Conditional Rendering"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column width=&#8221;5\/6&#8243; offset=&#8221;vc_col-sm-offset-1&#8243; conditional_render=&#8221;%5B%7B%22value_role%22%3A%22customer%22%7D%5D&#8221; css=&#8221;.vc_custom_1660601711509{margin-top: 60px !important;margin-bottom: 12px !important;}&#8221; el_class=&#8221;pb-md-5 pb-0&#8243;][vc_custom_heading text=&#8221;Conditional Rendering&#8221; font_container=&#8221;tag:h2|font_size:30px|text_align:center&#8221; use_theme_fonts=&#8221;yes&#8221; el_class=&#8221;m-b-md&#8221;][vc_separator color=&#8221;custom&#8221; border_width=&#8221;3&#8243; el_width=&#8221;10&#8243; type=&#8221;small&#8221; accent_color=&#8221;#0088cc&#8221;][vc_custom_heading text=&#8221;With this feature, you can show or hide section(column) when it meets specific conditions. By Device Type, Login Status, User Role and combination of these three status you can determine whether the section(column) should be rendered on page or not. As a result, <b>DOM<\/b> nodes and <b>TTFB<\/b> will be reduced.&#8221; font_container=&#8221;tag:p|font_size:16.8px|text_align:center|color:%23777777|line_height:26px&#8221; use_theme_fonts=&#8221;yes&#8221;][\/vc_column][vc_column conditional_render=&#8221;%5B%7B%22condition_a%22%3A%22device%22%2C%22comparative_operator%22%3A%22not_equal%22%2C%22value_device%22%3A%22tablet_mobile%22%2C%22value_role%22%3A%22customer%22%7D%5D&#8221; el_class=&#8221;mb-md-5 mb-0&#8243;]<div class=\"porto-ultimate-content-box-container \"><style>.porto_ucb_e0a6ec40303dbb6cb2e862d1c3aa02ac{will-change: box-shadow;box-shadow:0px 10px 30px 0px rgba(0,0,0,0.1);}.porto_ucb_e0a6ec40303dbb6cb2e862d1c3aa02ac:hover{box-shadow:0px 10px 30px 0px rgba(0,0,0,0.1)}<\/style><div class=\"porto-ultimate-content-box vc_custom_1660598642189 porto_ucb_e0a6ec40303dbb6cb2e862d1c3aa02ac\" style=\"\">[vc_single_image image=&#8221;5057&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221; el_class=&#8221;mb-0&#8243; css=&#8221;.vc_custom_1660598633092{border-radius: 10px !important;}&#8221;]<\/div><\/div>[\/vc_column][vc_column el_class=&#8221;mb-md-5 mb-0&#8243; conditional_render=&#8221;%5B%7B%22condition_a%22%3A%22device%22%2C%22comparative_operator%22%3A%22equal%22%2C%22value_device%22%3A%22tablet_mobile%22%2C%22value_role%22%3A%22customer%22%7D%5D&#8221;]<div class=\"porto-ultimate-content-box-container \"><style>.porto_ucb_e0a6ec40303dbb6cb2e862d1c3aa02ac{will-change: box-shadow;box-shadow:0px 10px 30px 0px rgba(0,0,0,0.1);}.porto_ucb_e0a6ec40303dbb6cb2e862d1c3aa02ac:hover{box-shadow:0px 10px 30px 0px rgba(0,0,0,0.1)}<\/style><div class=\"porto-ultimate-content-box vc_custom_1660601663705 porto_ucb_e0a6ec40303dbb6cb2e862d1c3aa02ac\" style=\"\">[vc_single_image image=&#8221;5083&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221; label=&#8221;&#8221; el_class=&#8221;mb-0&#8243; css=&#8221;.vc_custom_1660601520987{border-radius: 10px !important;}&#8221;]<\/div><\/div>[\/vc_column][vc_column width=&#8221;5\/6&#8243; offset=&#8221;vc_col-sm-offset-1&#8243; conditional_render=&#8221;%5B%7B%22value_role%22%3A%22customer%22%7D%5D&#8221; css=&#8221;.vc_custom_1660599010649{margin-top: 60px !important;margin-bottom: 60px !important;}&#8221;][vc_custom_heading text=&#8221;100% Responsive Across All Devices&#8221; font_container=&#8221;tag:h2|font_size:30px|text_align:center&#8221; use_theme_fonts=&#8221;yes&#8221; el_class=&#8221;m-b-md&#8221;][vc_separator color=&#8221;custom&#8221; border_width=&#8221;3&#8243; el_width=&#8221;10&#8243; type=&#8221;small&#8221; accent_color=&#8221;#0088cc&#8221;][vc_custom_heading text=&#8221;We take great care and attention on ensuring that layouts will display correctly on all mobile devices. By combining display conditions you can create concise, and light weight site on mobile divices.&#8221; font_container=&#8221;tag:p|font_size:16.8px|text_align:center|color:%23777777|line_height:26px&#8221; use_theme_fonts=&#8221;yes&#8221;][\/vc_column][vc_column width=&#8221;1\/2&#8243; el_class=&#8221;mb-md-5 pb-md-5&#8243; conditional_render=&#8221;%5B%7B%22value_role%22%3A%22customer%22%7D%5D&#8221;]<div class=\"porto-ultimate-content-box-container \"><style>.porto_ucb_e0a6ec40303dbb6cb2e862d1c3aa02ac{will-change: box-shadow;box-shadow:0px 10px 30px 0px rgba(0,0,0,0.1);}.porto_ucb_e0a6ec40303dbb6cb2e862d1c3aa02ac:hover{box-shadow:0px 10px 30px 0px rgba(0,0,0,0.1)}<\/style><div class=\"porto-ultimate-content-box vc_custom_1660598642189 porto_ucb_e0a6ec40303dbb6cb2e862d1c3aa02ac\" style=\"\">[vc_single_image image=&#8221;5070&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221; el_class=&#8221;mb-0&#8243; css=&#8221;.vc_custom_1660599664704{border-radius: 10px !important;}&#8221;]<\/div><\/div>[\/vc_column][vc_column width=&#8221;1\/2&#8243; conditional_render=&#8221;%5B%7B%22value_role%22%3A%22customer%22%7D%5D&#8221; el_class=&#8221;d-flex align-items-center mt-5 mt-md-0&#8243;][vc_custom_heading text=&#8221;<b>Device Type:<\/b> You can show or hide section(column) on mobile for better optimization on mobile devices.&#8221; font_container=&#8221;tag:p|font_size:16.8px|text_align:left|color:%23777777|line_height:26px&#8221; use_theme_fonts=&#8221;yes&#8221; el_class=&#8221;mb-md-5 mb-3&#8243;][vc_custom_heading text=&#8221;<b>Login Status:<\/b> Logged user and Guest can get different looks on same page.&#8221; font_container=&#8221;tag:p|font_size:16.8px|text_align:left|color:%23777777|line_height:26px&#8221; use_theme_fonts=&#8221;yes&#8221; el_class=&#8221;mb-md-5 mb-3&#8243;][vc_custom_heading text=&#8221;<b>User Role:<\/b> Some sections(columns) should be only displayed to authorized users.&#8221; font_container=&#8221;tag:p|font_size:16.8px|text_align:left|color:%23777777|line_height:26px&#8221; use_theme_fonts=&#8221;yes&#8221;][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>[vc_row][vc_column width=&#8221;5\/6&#8243; offset=&#8221;vc_col-sm-offset-1&#8243; conditional_render=&#8221;%5B%7B%22value_role%22%3A%22customer%22%7D%5D&#8221; css=&#8221;.vc_custom_1660601711509{margin-top: 60px !important;margin-bottom: 12px !important;}&#8221; el_class=&#8221;pb-md-5 pb-0&#8243;][vc_custom_heading text=&#8221;Conditional Rendering&#8221; font_container=&#8221;tag:h2|font_size:30px|text_align:center&#8221; use_theme_fonts=&#8221;yes&#8221; el_class=&#8221;m-b-md&#8221;][vc_separator color=&#8221;custom&#8221; border_width=&#8221;3&#8243; el_width=&#8221;10&#8243; type=&#8221;small&#8221; accent_color=&#8221;#0088cc&#8221;][vc_custom_heading text=&#8221;With this feature, you can show or hide section(column) when it meets specific conditions. By Device Type, Login Status, User Role and combination of these three status you can determine whether the section(column) should [&hellip;]<\/p>\n","protected":false},"author":445,"featured_media":0,"parent":640,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"class_list":["post-5045","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.portotheme.com\/wordpress\/porto\/shortcodes\/wp-json\/wp\/v2\/pages\/5045","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.portotheme.com\/wordpress\/porto\/shortcodes\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.portotheme.com\/wordpress\/porto\/shortcodes\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.portotheme.com\/wordpress\/porto\/shortcodes\/wp-json\/wp\/v2\/users\/445"}],"replies":[{"embeddable":true,"href":"https:\/\/www.portotheme.com\/wordpress\/porto\/shortcodes\/wp-json\/wp\/v2\/comments?post=5045"}],"version-history":[{"count":3,"href":"https:\/\/www.portotheme.com\/wordpress\/porto\/shortcodes\/wp-json\/wp\/v2\/pages\/5045\/revisions"}],"predecessor-version":[{"id":5135,"href":"https:\/\/www.portotheme.com\/wordpress\/porto\/shortcodes\/wp-json\/wp\/v2\/pages\/5045\/revisions\/5135"}],"up":[{"embeddable":true,"href":"https:\/\/www.portotheme.com\/wordpress\/porto\/shortcodes\/wp-json\/wp\/v2\/pages\/640"}],"wp:attachment":[{"href":"https:\/\/www.portotheme.com\/wordpress\/porto\/shortcodes\/wp-json\/wp\/v2\/media?parent=5045"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}