{"id":395,"date":"2016-08-05T19:09:14","date_gmt":"2016-08-05T17:09:14","guid":{"rendered":"https:\/\/www.nieuwsmarkt.nl\/?p=395"},"modified":"2017-10-01T09:09:57","modified_gmt":"2017-10-01T07:09:57","slug":"how-did-we-make-papiernieuws-nl","status":"publish","type":"post","link":"https:\/\/www.nieuwsmarkt.nl\/nl\/blog\/2016\/08\/05\/how-did-we-make-papiernieuws-nl\/","title":{"rendered":"How did we make papiernieuws.nl"},"content":{"rendered":"<p><strong>One of our first own projects using Beaver Builder for an on-line publishing platform around paper, inks and toner within the printing industry, was a smooth roadmap. How did we do it?<\/strong><!--more--><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-319 size-full\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/07\/beaver-builder-logo-150x150.jpg\" alt=\"beaver-builder-logo-150x150\" width=\"150\" height=\"150\" \/>For a start we &#8216;just&#8217;\u00a0installed BB theme and plugin and started to build form scratch. Our other\u00a0website <a href=\"http:\/\/www.printmedianieuws.nl\/\" target=\"_blank\">printmedianieuws.nl<\/a> (made with Genesis\/Dynamik) would be some kind of &#8216;base&#8217; in both functionallity and design, although in <a href=\"http:\/\/www.papiernieuws.nl\/\" target=\"_blank\">papiernieuws.nl<\/a> we won&#8217;t use any\u00a0paid subscribtion model.<\/p>\n<p><strong><em>\u2022 Disclaimer: we just use modules we think fit the best in our application. We don&#8217;t use\u00a0any prefered module developer to promote them above any other! We already experienced the use of various BB add-ons in various applications.<\/em><\/strong><\/p>\n<div id=\"attachment_425\" style=\"width: 850px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-425\" class=\"wp-image-425 size-large\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/pmn-1024x582.jpg\" alt=\"pmn\" width=\"840\" height=\"477\" srcset=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/pmn-1024x582.jpg 1024w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/pmn-300x171.jpg 300w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/pmn-768x437.jpg 768w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/pmn-1200x683.jpg 1200w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/pmn.jpg 1440w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><p id=\"caption-attachment-425\" class=\"wp-caption-text\">printmedianieuws.nl as the base concept for papiernieuws.nl<\/p><\/div>\n<h3>The first steps<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft wp-image-344 size-full\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/07\/beaveraddons-logo-150x150.jpg\" alt=\"beaveraddons-logo-150x150\" width=\"150\" height=\"150\" \/>The first steps were very straight forward. Making the pre-defined pages, making the base-menu and some primary color decissions. The homepage would be the base of the blogposts. We decided to use the new <a href=\"https:\/\/wpbeaveraddons.com\/beaver-builder-content-grid-module\/\" target=\"_blank\">PowerPack &#8216;content grid&#8217;<\/a> module.<\/p>\n<div id=\"attachment_405\" style=\"width: 659px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-405\" class=\"wp-image-405 size-full\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/pp-content-grid.jpg\" alt=\"pp-content-grid\" width=\"649\" height=\"551\" srcset=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/pp-content-grid.jpg 649w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/pp-content-grid-300x255.jpg 300w\" sizes=\"auto, (max-width: 649px) 100vw, 649px\" \/><p id=\"caption-attachment-405\" class=\"wp-caption-text\">PowerPack &#8216;content grid&#8217;<\/p><\/div>\n<p>&nbsp;<\/p>\n<p><em><a href=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/equal-heights.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-398 alignright\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/equal-heights.jpg\" alt=\"equal-heights\" width=\"342\" height=\"38\" srcset=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/equal-heights.jpg 423w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/equal-heights-300x33.jpg 300w\" sizes=\"auto, (max-width: 342px) 100vw, 342px\" \/><\/a>We also checked the <a href=\"http:\/\/www.ultimatebeaver.com\/modules\/blog-post\/example-1\/\" target=\"_blank\">UABB &#8216;blog post&#8217; module<\/a>. Although very similar, one little thing thing is missing: &#8216;equal heights&#8217; in displaying row by row in a 2 column grid.<\/em><\/p>\n<div id=\"attachment_406\" style=\"width: 670px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-406\" class=\"wp-image-406 size-full\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/blog-post-uabb.jpg\" alt=\"blog-post-uabb\" width=\"660\" height=\"559\" srcset=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/blog-post-uabb.jpg 660w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/blog-post-uabb-300x254.jpg 300w\" sizes=\"auto, (max-width: 660px) 100vw, 660px\" \/><p id=\"caption-attachment-406\" class=\"wp-caption-text\">UABB &#8216;Blog Post&#8217; module<\/p><\/div>\n<p>On the top of the page we &#8216;just&#8217; used the standard &#8216;content slider&#8217; module from the Beaver Builder Pro plugin, showing a &#8216;top&#8217; image in slider mode for the first three posts with their own headlinetext at the bottom of\u00a0the featured image.<\/p>\n<div id=\"attachment_403\" style=\"width: 638px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-403\" class=\"wp-image-403 size-full\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/content-grid.jpg\" alt=\"content-grid\" width=\"628\" height=\"347\" srcset=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/content-grid.jpg 628w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/content-grid-300x166.jpg 300w\" sizes=\"auto, (max-width: 628px) 100vw, 628px\" \/><p id=\"caption-attachment-403\" class=\"wp-caption-text\">PowerPack &#8211; Content Grid<\/p><\/div>\n<p><em><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-312 size-full\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/07\/beaver-builder-ultimate-add-ons-150x150.jpg\" alt=\"beaver-builder-ultimate-add-ons-150x150\" width=\"150\" height=\"150\" \/>Also here we tried to use the UABB &#8216;blog post&#8217; module, but was unable to show the headlinetext\u00a0within the featured image on a colored background.<\/em><\/p>\n<div id=\"attachment_404\" style=\"width: 624px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-404\" class=\"wp-image-404 size-full\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/blog-post.jpg\" alt=\"blog-post\" width=\"614\" height=\"400\" srcset=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/blog-post.jpg 614w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/blog-post-300x195.jpg 300w\" sizes=\"auto, (max-width: 614px) 100vw, 614px\" \/><p id=\"caption-attachment-404\" class=\"wp-caption-text\">UABB blog post module<\/p><\/div>\n<h3>Single Post page and static page settings<\/h3>\n<p>The single post page in <a href=\"https:\/\/www.wpbeaverbuilder.com\/kb\/beaver-builder-theme\/\" target=\"_blank\">Beaver Builder theme<\/a> has the following layout options:<\/p>\n<ul>\n<li>sidebar left<\/li>\n<li>sidebar right<\/li>\n<li>no sidebar<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft wp-image-408 size-full\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/bb-template.jpg\" alt=\"bb-template\" width=\"278\" height=\"326\" srcset=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/bb-template.jpg 278w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/bb-template-256x300.jpg 256w\" sizes=\"auto, (max-width: 278px) 100vw, 278px\" \/>We made the choice to use the right sidebar, we also did that for all static pages. Pages just have three option in the template settings:<\/p>\n<ul>\n<li>sidebar (only a right siebar!)<\/li>\n<li>standard (full width page)<\/li>\n<li>no header \/ no footer (for landing pages)<\/li>\n<\/ul>\n<h3>Sidebar use<\/h3>\n<p>The main use for the sidbar is for displaying logos from our partners. That can be done in a simple textwidget with some HTML. But we wanted a more flexible approach, so that we could easily move and\/or edit the various images. We made the choice for\u00a0the PowerPack &#8216;Logo &amp; Grid Carousel&#8217;. Although not using it as a slider\/carousel, it fits our needs for a flexible edit tools for displaying logo images.<\/p>\n<h3>Beaver Tunnels<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft wp-image-347 size-full\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/07\/beaver-tunnels-logo-150x150.jpg\" alt=\"beaver-tunnels-logo-150x150\" width=\"150\" height=\"150\" \/>However to position a module in a sidebar cannot be done via the standard WordPress sidebar user-interface. Widgets can be placed as modules, but modules cannot be placed as widgets.<\/p>\n<p><em>Besides using the method below, there is some kind of <a href=\"http:\/\/probeaver.com\/different-content-sidebar-widgets-beaver-templates\/\" target=\"_blank\">workaround<\/a> to use shortcodes in widgets based on created templates. With the <a href=\"https:\/\/wordpress.org\/plugins\/widget-context\/\" target=\"_blank\">Widget Context<\/a> plugin you can place shortcodes conditionally.<\/em><\/p>\n<p>The solution we use is\u00a0<a href=\"https:\/\/beavertunnels.com\/\" target=\"_blank\">Beaver Tunnels<\/a>. Beaver Tunnels is &#8216;two things in one&#8217;:<\/p>\n<ul>\n<li>placing\u00a0templates (rows or modules) conditionally<\/li>\n<li>placing templates (rows or modules) in Beaver Builder hooks<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-402 size-large\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/tunnels-1024x597.jpg\" alt=\"tunnels\" width=\"840\" height=\"490\" srcset=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/tunnels-1024x597.jpg 1024w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/tunnels-300x175.jpg 300w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/tunnels-768x447.jpg 768w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/tunnels-1200x699.jpg 1200w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/tunnels.jpg 1440w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/p>\n<p>The image above show the hooks where templates can be places. We us the fl_sidebar_open hook to place template content in the sidebar area of the page\/post.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-413 size-large\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/templates-1024x275.jpg\" alt=\"templates\" width=\"840\" height=\"226\" srcset=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/templates-1024x275.jpg 1024w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/templates-300x81.jpg 300w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/templates-768x206.jpg 768w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/templates-1200x323.jpg 1200w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/templates.jpg 1440w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/p>\n<p>We defined two row templates for use in the sidebars and placed on all pages, homepage and single post pages. Look at the location and conditionals below.<\/p>\n<div id=\"attachment_414\" style=\"width: 850px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-414\" class=\"wp-image-414 size-large\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/beaver-tunnels-example-1024x594.jpg\" alt=\"beaver-tunnels-example\" width=\"840\" height=\"487\" srcset=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/beaver-tunnels-example-1024x594.jpg 1024w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/beaver-tunnels-example-300x174.jpg 300w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/beaver-tunnels-example-768x446.jpg 768w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/beaver-tunnels-example-1200x697.jpg 1200w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/beaver-tunnels-example.jpg 1440w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><p id=\"caption-attachment-414\" class=\"wp-caption-text\">Setting conditionals in Beaver Tunnels<\/p><\/div>\n<p>In this example we did not use any &#8216;standard&#8217; widget in the sidebar area. With Beaver Tunnels we were able to use modules. We still have to fine-tune many things. The base development just took about 6 hours.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-428\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/papiernieuws-1024x594.jpg\" alt=\"papiernieuws\" width=\"840\" height=\"487\" srcset=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/papiernieuws-1024x594.jpg 1024w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/papiernieuws-300x174.jpg 300w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/papiernieuws-768x445.jpg 768w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/papiernieuws-1200x696.jpg 1200w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/papiernieuws.jpg 1440w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/p>\n<p>&nbsp;<\/p>","protected":false},"excerpt":{"rendered":"<p>One of our first own projects using Beaver Builder for an on-line publishing platform around paper, inks and toner within the printing industry, was a smooth roadmap. How did we do it?<\/p>","protected":false},"author":2,"featured_media":347,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[21],"class_list":["post-395","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-review","tag-beaver-tunnels"],"_links":{"self":[{"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/posts\/395","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/comments?post=395"}],"version-history":[{"count":4,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/posts\/395\/revisions"}],"predecessor-version":[{"id":429,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/posts\/395\/revisions\/429"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/media\/347"}],"wp:attachment":[{"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/media?parent=395"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/categories?post=395"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/tags?post=395"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}