{"id":6296,"date":"2020-09-04T00:32:32","date_gmt":"2020-09-04T00:32:32","guid":{"rendered":"https:\/\/the7kennisbank.nl\/uncategorized\/content-visibility-wp-brain\/"},"modified":"2020-09-04T00:55:32","modified_gmt":"2020-09-04T00:55:32","slug":"content-visibility-wp-brain","status":"publish","type":"post","link":"https:\/\/the7kennisbank.nl\/en\/wp-brain\/content-visibility-wp-brain\/","title":{"rendered":"Content Visibility \u2013 WP Brain"},"content":{"rendered":"<p>&nbsp;<\/p>\n<p>To achieve this, you can either use the recommended method, which is Visual Composer and the advanced WP Brain elements, or the shortcodes generator for normal WordPress text editor.<\/p>\n<h3>Using Visual Composer<\/h3>\n<p>To control the visibility of elements within Visual Composer, you have just to place them within the If\/Else containers and set your conditions, let\u2019s take the example of showing content only on mobile devices, and do it together:<\/p>\n<ol class=\"no-padding\">\n<li>Create a new page and enable the Visual Composer Editor<\/li>\n<li>Click the button \u201cAdd Element\u201d and from the list choose \u201cWP Brain If\u201d<\/li>\n<li>The element settings dialog will open automatically and you can build your condition<\/li>\n<li>from the drop select the device filter, and make sure the rule match the following:\n<div class=\"img-wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/08\/wp-brain-example-vc-1.jpg\" alt=\"wp-brain-example-vc-1\" width=\"700\" height=\"320\" \/><\/div>\n<\/li>\n<li>Now you can place the mobile content inside the green container like this:\n<div class=\"img-wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/08\/wp-brain-example-vc-2.png\" alt=\"wp-brain-example-vc-2\" width=\"778\" height=\"255\" \/><\/div>\n<\/li>\n<li>To show different content for other devices, please add the \u201cWP Brain Else\u201d element right after the green container, and place the content inside the new orange container:\n<div class=\"img-wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/08\/wp-brain-example-vc-3.png\" alt=\"wp-brain-example-vc-3\" width=\"778\" height=\"357\" \/><\/div>\n<\/li>\n<li>Now save the page and test it with your devices!<\/li>\n<\/ol>\n<h3>Using Text Editor<\/h3>\n<p>If you doesn\u2019t have Visual Composer, you can still fully use WP Brain features easily. let\u2019s take the same example as above but achieve it with the text editor instead:<\/p>\n<ol class=\"no-padding\">\n<li>Create a new preset, to do that, just go to <strong class=\"label label-default\">WP Brain &gt; Settings<\/strong>, under the presets box, click the green \u201cAdd New\u201d button<\/li>\n<li>Fill the inputs as shown in the following image and save the changes:\n<div class=\"img-wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/08\/wp-brain-example-preset-1.png\" alt=\"wp-brain-example-preset-1\" width=\"752\" height=\"213\" \/><\/div>\n<\/li>\n<li>Now you have that preset saved, go create a new page for test.<\/li>\n<li>Write two line in the text editor, one for mobile and one for the other devices:\n<div class=\"img-wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/08\/wp-brain-example-mce-1.jpg\" alt=\"wp-brain-example-mce-1\" width=\"778\" height=\"241\" \/><\/div>\n<\/li>\n<li>Select the first line, then click the WP Brain icon and select \u201cIf\u201d from the menu:\n<div class=\"img-wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/08\/wp-brain-example-mce-2.jpg\" alt=\"wp-brain-example-mce-2\" width=\"778\" height=\"319\" \/><\/div>\n<\/li>\n<li>A dialog will open asking for the condition preset, select a preset and click \u201cOk\u201d:\n<div class=\"img-wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/08\/wp-brain-example-mce-3.jpg\" alt=\"wp-brain-example-mce-3\" width=\"778\" height=\"319\" \/><\/div>\n<\/li>\n<li>Now select the second line, then click the black brain icon and select \u201cElse\u201d from the menu.<\/li>\n<li>At the end, you should have something like this in your text editor:\n<div class=\"img-wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/08\/wp-brain-example-mce-4.png\" alt=\"wp-brain-example-mce-4\" width=\"778\" height=\"233\" \/><\/div>\n<\/li>\n<li>Finally, save the page and test it with your devices!<\/li>\n<\/ol>\n<p>In the next section, we will avoid repetition and focus only on Visual Composer elements usage as the process is nearly the same for the classic WordPress editor.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; To achieve this, you can either use the recommended method, which is Visual Composer and the advanced WP Brain elements, or the shortcodes generator for normal WordPress text editor. Using Visual Composer To control the visibility of elements within Visual Composer, you have just to place them within the If\/Else containers and set your&hellip;<\/p>\n","protected":false},"author":2,"featured_media":6325,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[58],"tags":[],"class_list":["post-6296","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wp-brain","category-58","description-off"],"acf":[],"_links":{"self":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/6296","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/comments?post=6296"}],"version-history":[{"count":3,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/6296\/revisions"}],"predecessor-version":[{"id":6361,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/6296\/revisions\/6361"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/media\/6325"}],"wp:attachment":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/media?parent=6296"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/categories?post=6296"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/tags?post=6296"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}