{"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,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"class_list":["post-5045","page","type-page","status-publish","hentry"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.0.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"Conditional RenderingWith 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, DOM nodes and TTFB will be reduced. 100% Responsive Across All\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.portotheme.com\/wordpress\/porto\/shortcodes\/shortcodes\/conditional-rendering\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Porto Shortcodes - Porto Wordpress Demo site\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Conditional Rendering - Porto Shortcodes\" \/>\n\t\t<meta property=\"og:description\" content=\"Conditional RenderingWith 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, DOM nodes and TTFB will be reduced. 100% Responsive Across All\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.portotheme.com\/wordpress\/porto\/shortcodes\/shortcodes\/conditional-rendering\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2022-08-11T13:20:46+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2022-08-17T12:56:08+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Conditional Rendering - Porto Shortcodes\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Conditional RenderingWith 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, DOM nodes and TTFB will be reduced. 100% Responsive Across All\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.portotheme.com\\\/wordpress\\\/porto\\\/shortcodes\\\/shortcodes\\\/conditional-rendering\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.portotheme.com\\\/wordpress\\\/porto\\\/shortcodes#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.portotheme.com\\\/wordpress\\\/porto\\\/shortcodes\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.portotheme.com\\\/wordpress\\\/porto\\\/shortcodes\\\/shortcodes\\\/conditional-rendering\\\/#listItem\",\"name\":\"Conditional Rendering\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.portotheme.com\\\/wordpress\\\/porto\\\/shortcodes\\\/shortcodes\\\/conditional-rendering\\\/#listItem\",\"position\":2,\"name\":\"Conditional Rendering\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.portotheme.com\\\/wordpress\\\/porto\\\/shortcodes#listItem\",\"name\":\"Home\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.portotheme.com\\\/wordpress\\\/porto\\\/shortcodes\\\/#organization\",\"name\":\"Porto Shortcodes\",\"description\":\"Porto Wordpress Demo site\",\"url\":\"https:\\\/\\\/www.portotheme.com\\\/wordpress\\\/porto\\\/shortcodes\\\/\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.portotheme.com\\\/wordpress\\\/porto\\\/shortcodes\\\/shortcodes\\\/conditional-rendering\\\/#webpage\",\"url\":\"https:\\\/\\\/www.portotheme.com\\\/wordpress\\\/porto\\\/shortcodes\\\/shortcodes\\\/conditional-rendering\\\/\",\"name\":\"Conditional Rendering - Porto Shortcodes\",\"description\":\"Conditional RenderingWith 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, DOM nodes and TTFB will be reduced. 100% Responsive Across All\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.portotheme.com\\\/wordpress\\\/porto\\\/shortcodes\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.portotheme.com\\\/wordpress\\\/porto\\\/shortcodes\\\/shortcodes\\\/conditional-rendering\\\/#breadcrumblist\"},\"datePublished\":\"2022-08-11T13:20:46+00:00\",\"dateModified\":\"2022-08-17T12:56:08+00:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.portotheme.com\\\/wordpress\\\/porto\\\/shortcodes\\\/#website\",\"url\":\"https:\\\/\\\/www.portotheme.com\\\/wordpress\\\/porto\\\/shortcodes\\\/\",\"name\":\"Porto Shortcodes\",\"description\":\"Porto Wordpress Demo site\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.portotheme.com\\\/wordpress\\\/porto\\\/shortcodes\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Conditional Rendering - Porto Shortcodes","description":"Conditional RenderingWith 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, DOM nodes and TTFB will be reduced. 100% Responsive Across All","canonical_url":"https:\/\/www.portotheme.com\/wordpress\/porto\/shortcodes\/shortcodes\/conditional-rendering\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BreadcrumbList","@id":"https:\/\/www.portotheme.com\/wordpress\/porto\/shortcodes\/shortcodes\/conditional-rendering\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.portotheme.com\/wordpress\/porto\/shortcodes#listItem","position":1,"name":"Home","item":"https:\/\/www.portotheme.com\/wordpress\/porto\/shortcodes","nextItem":{"@type":"ListItem","@id":"https:\/\/www.portotheme.com\/wordpress\/porto\/shortcodes\/shortcodes\/conditional-rendering\/#listItem","name":"Conditional Rendering"}},{"@type":"ListItem","@id":"https:\/\/www.portotheme.com\/wordpress\/porto\/shortcodes\/shortcodes\/conditional-rendering\/#listItem","position":2,"name":"Conditional Rendering","previousItem":{"@type":"ListItem","@id":"https:\/\/www.portotheme.com\/wordpress\/porto\/shortcodes#listItem","name":"Home"}}]},{"@type":"Organization","@id":"https:\/\/www.portotheme.com\/wordpress\/porto\/shortcodes\/#organization","name":"Porto Shortcodes","description":"Porto Wordpress Demo site","url":"https:\/\/www.portotheme.com\/wordpress\/porto\/shortcodes\/"},{"@type":"WebPage","@id":"https:\/\/www.portotheme.com\/wordpress\/porto\/shortcodes\/shortcodes\/conditional-rendering\/#webpage","url":"https:\/\/www.portotheme.com\/wordpress\/porto\/shortcodes\/shortcodes\/conditional-rendering\/","name":"Conditional Rendering - Porto Shortcodes","description":"Conditional RenderingWith 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, DOM nodes and TTFB will be reduced. 100% Responsive Across All","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.portotheme.com\/wordpress\/porto\/shortcodes\/#website"},"breadcrumb":{"@id":"https:\/\/www.portotheme.com\/wordpress\/porto\/shortcodes\/shortcodes\/conditional-rendering\/#breadcrumblist"},"datePublished":"2022-08-11T13:20:46+00:00","dateModified":"2022-08-17T12:56:08+00:00"},{"@type":"WebSite","@id":"https:\/\/www.portotheme.com\/wordpress\/porto\/shortcodes\/#website","url":"https:\/\/www.portotheme.com\/wordpress\/porto\/shortcodes\/","name":"Porto Shortcodes","description":"Porto Wordpress Demo site","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.portotheme.com\/wordpress\/porto\/shortcodes\/#organization"}}]},"og:locale":"en_US","og:site_name":"Porto Shortcodes - Porto Wordpress Demo site","og:type":"article","og:title":"Conditional Rendering - Porto Shortcodes","og:description":"Conditional RenderingWith 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, DOM nodes and TTFB will be reduced. 100% Responsive Across All","og:url":"https:\/\/www.portotheme.com\/wordpress\/porto\/shortcodes\/shortcodes\/conditional-rendering\/","article:published_time":"2022-08-11T13:20:46+00:00","article:modified_time":"2022-08-17T12:56:08+00:00","twitter:card":"summary_large_image","twitter:title":"Conditional Rendering - Porto Shortcodes","twitter:description":"Conditional RenderingWith 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, DOM nodes and TTFB will be reduced. 100% Responsive Across All"},"aioseo_meta_data":{"post_id":"5045","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":null,"created":"2023-09-04 01:43:07","updated":"2026-05-27 03:54:41","seo_analyzer_scan_date":null,"focus_keyword":null,"additional_keywords":null,"truseo_locale":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.portotheme.com\/wordpress\/porto\/shortcodes\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tConditional Rendering\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.portotheme.com\/wordpress\/porto\/shortcodes"},{"label":"Conditional Rendering","link":"https:\/\/www.portotheme.com\/wordpress\/porto\/shortcodes\/shortcodes\/conditional-rendering\/"}],"_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}]}}