In essence, Google Tag Manager is a user-friendly way to manage snippets of JavaScript that send information to third-parties; Google Analytics for example. It also offers a way to for you to run 3rd party services, such as our chat bubble below and our social sharing buttons on the left. Both these services have been installed on Beaver Brains via Google Tag Manager instead of the more traditional plugin route.

Why use Tag Manager?

When you add WordPress plugins to your site, small amounts of code related to that plugin may fire every time a page is loaded, regardless of whether or not the functionality provided by the plugin is required. That’s often not great for speed and certainly not an efficient way to run complex websites. Beaver Builder also allows you to add Javascript to your pages, either globally or layout based but doesn’t allow you to conditionally run Javascript beyond these two options.

Adding code to your site through Google Tag Manager and setting trigger variables, gives you  greater flexibility for rendering code only under particular conditions.

If like me, you’re not a seasoned Javascript coder, then Tag Manager will make the whole process of managing, segmenting and updating scripts a breeze. You keep all of your code, variables and triggers in one place and you can even re-use code and variables across multiple sites.

Give me some examples…

Google Analytics

Most of us are familiar with Google Analytics, installing it on our sites and client sites by adding tracking code through WordPress plugins. Adding tracking code through a plugin usually means that every page and post on your site will send tracking information to Google Analytics. But what if you don’t want a particular page to be tracked? Tag Manager makes it possible for you to add triggers and variables so that you can specify the conditions under which the code is executed. And because it’s all happening in one place, you can re-use the variables and triggers in multiple places.

Beaver Builder Javascript

Beaver Builder makes it possible to add Javascript to pages either globally or on a page by page basis. But you can’t specify more fine-grained execution conditions; for instance ‘don’t fire this javascript if the button on this page is green’. With Tag Manager you do have that control because you can specify page as well as CSS conditions that need to be present for the code to execute. For example, the Beaver Builder Theme contains CSS classes that determine the layout of the overall page – full width or sidebar etc, so you can target pages based on their layouts and execute Javascript only when certain conditions are met.

Our single module pages include Javascript for displaying an extended list of Beaver Builder modules when you press the ‘See more button’. We could have added that Javascript globally or tried to remember to add it on a page by page basis, but Tag Manager makes it easy to only include that Javascript when it knows that the ‘See more’ button is present on the page.

Chat Bubbles

I love Chat Bubbles. They make it really easy for me to make announcements and get talking to our website visitors. But I don’t want the chat bubble showing up every hour of every day. With Tag Manager, I can set time limits on the chat bubble code executing – in my case limiting the bubble to weekdays only.

Social Sharing Plugins

Social share plugins often come in for criticism because they slow page load speed down. With Tag manager, we load our social shares after the page has fully loaded – you can specify that condition in tag manager. We don’t have any social sharing plugins on Beaver Brains – it’s all done with the magic of Tag Manager.

Wrapping up

Because WordPress is so extensible, it’s always tempting to just add another plugin that will ‘cover every base’. However if you need more control over the code executed on your site, then Tag Manager may be the easiest way yet. Plus it’s free!

There are some great Tag Manager blogs out there, read the excellent blog by Simo Ahava’s for starters.

If you need some help getting Tag Manager set up or you have a particular use case in mind, let us know.

There is no easy way to turn the display of the hooks on and off – you need to uncomment the lines in the functions file to do so. Perhaps a plugin developer could create a handy tool from this to make it easy to switch on and off from the toolbar?

I like to give as many visual clues as possible to help users understand the context and depth of my site. Highlighting menu items is an important way of indicating where they are on the structure of the site. It also reinforces the main sections of your site – the sections that should be the basis of your header menu.

So keeping main menu items highlighted when viewing subpages is really important to me. There are two ways to achieve this:

Nested Menu Items

The first way expects that you have nested sub-menu items in your header menu.

Add nested menu items to your header menu as per the screenshot below.

With ‘Themes’ and ‘Modules’ nested below ‘Products’ in this example and using the CSS code above, ‘Products’ will always remain highlighted when navigating to either of these sub-pages. The screenshot below shows that I am on the module page and the ‘Products’ menu item is still highlighted.

Nested Pages

This next option expects that the pages and subpages of your site are nested. See the screenshots below for an example. In the CSS code, you’ll notice that the only thing that has changed, is instead of – ‘.current-menu-ancestor’ – we now write ‘.current-page-ancestor’. This ensures that any pages nested below your main menu item will remain highlighted.

In the screenshot above you can see that Modules is a subpage of Products so using the CSS will ensure that when you are on the Modules page, the Products menu item will remain highlighted.

Add either CSS snippet to your style.css file in your child theme, or add it to the Beaver Builder Global settings CSS tab, or in the theme Customiser –> Code –> CSS Code tab.

This solution is in part thanks to the Beaver Builder support article I found here.

If you’re running a network of client websites or a multisite install and need a way to add customised dashboard widgets that upsell, inform or allow you to stay in touch with clients, then this may be a solution for you. Using the power of Beaver Builder page templates, 1daywebs explains how to use custom code and Beaver Builder shortcodes in your functions file to display your widgets on the WordPress admin dashboard.

Using the modal module in Beaver Addons, Powerpack plugin, you can even add button triggered, pop up boxes that display externally hosted pages – useful for showing forms, videos or any number of other useful messages for your clients.

Catch more on 1 day webs’ YouTube Channel.

Dragging WordPress and ACF fields in Beaver Builder to create a custom single post template.

Displaying Fields

The plugin will make it a simple task of displaying Wordpress and Advanced Custom Fields on your layouts using ‘Field WP’ and ‘Field ACF’ modules added to the page builder. Simply drag and drop Field WP modules onto your layout and select available fields from the dropdown and for a completely customised solution, drag the ‘Field ACF’ module and select your custom field by partial type to select.

Selecting Templates

Once your single template is set up, it’s just a matter of selecting it in the new ‘Template’ tab in the Beaver Builder admin settings. Not to be confused with Beaver Builder’s own ‘Templates’ tab, the new tab allows you to select custom templates for your post types. An extremely elegant and simple solution.

One of the challenges I always face with using custom fields is the need to hard code child theme templates for use in custom post types. Having these fields available within the Beaver Builder page builder is an exciting option and opens up a wide range of possibilities for designing complex databases and layouts quickly. How ACF repeater and relationship fields would work is not yet known but I am sure that it will be just as elegant a solution as the standard fields demonstrated.

An archive template is in the works too so you’ll be able to display custom post archives with just as much elegance.

Watch the full video on YouTube.

So if you don’t add the page builder to your post type you miss out on being able to use the many modules available that make using Beaver Builder so great. Maybe you’d like to add a button in the middle of your post, or a subscribe form? Not having access to the builder in your post type means you don’t have access to the modules either and given the amount new add-ons being published by 3rd party developers, you could be missing out on a tonne of useful elements.

The Beaver Builder page builder is only activated for pages here. Posts do not have the builder switched on by default.

There are ways to solve that problem. In this tutorial, we’ll show you how to add modules to your unsupported post types suing standard Beaver Builder shortcodes.

Enable Beaver Builder Templates

This method relies on making use of page templates so head over to your WordPress Admin, Settings > Page Builder > Templates tab and enable all templates and activate the option ‘Enable Templates Admin’. In effect, this setting adds a new section in your admin area called ‘Templates’ which, themselves are custom post types.

Turn on Templates Admin in the Beaver Builder settings

Create a new template

Now that we have our templates switched on, head over to Templates and click on ‘Add New’. In this new template, we’re going to add a ‘subscribe form’ that we would like to display halfway through our next blog post text. Call you new template ‘Subscribe Form’ or something equally as descriptive and then click on the blue ‘Launch Page Builder’ button to open up the front end page builder.

Drag the Subscribe module to your page and edit the module settings accordingly

Now that we have our subscribe module set up, click on Done in the top right of the page builder, Publish your changes and click on edit template. Make a note of the Permalink of your template – it’s the last bit of the permalink that we need in the next step – in this case, it’s ‘subscribe-form’. You can also use the post ID in the shortcode – in this case, it’s ‘4’ – you can see the ID in the browser URL.

Beaver Builder uses the post slug or post ID to display the template in your post

Add the shortcode to your post

In the next step, we’ll add the Beaver Builder shortcode to our post so that the subscribe form shows up in our blog post. If you have a post set up already, head over to your post editor and locate the position within your body text where you’d like to add your new subscribe form.

The Beaver Builder shortcodes for adding templates is shown below – use either the post slug or post ID method:

Post Slug

Post ID

Once you’ve added your shortcode, save your post and head to the front end to review your results. Tweak your template layout to modify margins and padding or add headings or background colours to your module to make it really pop.

The completed post with the subscribe form displayed.

In the next post we’ll show you how to use Beaver Builder hooks to add modules to specifc parts of your posts.

Landing page templates are cool, and beaver Builder releases some really great templates with their theme. You’ll notice that all of the templates feature great full-screen images, video or background colours, but they omit the header site logo and menu. What if you want to keep the header but retain the full-screen images or background videos? In this technique, we’re going to show you how to achieve this without additional plugins or code.

An example of the page we’re about to build

You can see how this would look in the screenshot above and by example on this page, built using this technique.

Set up a header menu

If you don’t already have a header menu set up, head over to Appearance > Menus and create your menu. Set this menu as your Header Menu. We’ll be using this menu as we progress through this tutorial.

Create a new landing page

Create a new page and open up the page builder to start editing. Add a new row to the top of the page, and set it to be full width, full height and set Content Alignment to ‘TOP’. We’ve set our row to display a slideshow of images from our media folder, but you can set this as a single image, a video or a coloured background as you prefer. Here’s a screenshot of our row settings:

Set your Beaver Builder row settings to start building your full-height, full-width image or video background landing page.

On the advanced tab of the row settings, make sure your row margins are set to 0px. You can leave the padding settings as default so that when you scale down your viewport, the content area retains the padding on each side.

Add logo and menu

Next, we’re going to add a 2 column row and add our logo and menu to each adjacent section. Drag the 2 column row from the modules list and set the column widths so that the logo and menu have enough space in each of their columns. We’ve set ours at 30 / 70.

For the logo, add either a text or a photo module and set the module preferences as you need. We’ve added a text module as our logo which matches the choice we made in the Customiser > Header > Header Logo settings.

For the menu on the right, add a Menu module and set the preferences to suit your layout. To match the layout we created, set the menu module preferences as follows:

Change your Beaver Builder module settings to match these

For both the logo and menu, we have set the display options in the advanced tab so that each of these elements only displays on large devices. For mobiles and smaller screens, these elements will clash with the Beaver Builder mobile header settings so it’s best only to show our new logo and menu on larger screens. After all, that’s where we want the full-screen screen design to really shine.

Set your menu to display only on large devices

For the last step, we’re going to head over to the customer and set the preferences for our header. Head to Customiser > Header > Header Layout and set the ‘Fixed Header’ to Disabled and set ‘Hide Header Until Scroll’ to Enabled. For scroll distance, play around with the setting until you find a good balance between our new elements and the header menu alternating between each other on scroll.

Beaver Builder Header layout settings

That’s it. You can add other elements as you like to the page and save it as a template if you plan to use the layout on multiple pages.

J7Digital have a neat plugin to handle complete replacements for both your header and footer. Check it out here. Also, as Peter Luit mentions in the comments below, he’s experimenting with these concepts in more detail here – > Go check it out.

If you’d like Beaver Builder to have this feature built in, why not vote for it here?

You’ll notice on the page, two post sliders stacked one on top of each other, one with an image left and post content right and the slider below that in reverse. The Beaver Builder theme is responsive so when you scale down the viewport, the slider automatically stacks to fit smaller screens and in this case, it stacks the image on the top and the post content below for both sliders.

Getting your slider to look and work this way is not as easy as dragging the module to your page and setting 0px on margins and padding. Here’s how we achieved the effect:

Setting up the row and module

Drag a post module to you page and set your row to full width, content to full width. You’ll need to set your left and right margins and padding to 0px to ensure that the post slider fills the entire viewport, edge to edge.

Next, open up the Post Module settings and make the following edits. We’ve chosen to set our slider height at 500px, with a looped, auto play, fade transitions and arrows displayed. Turn off ‘Show Dots’.

For layout settings, choose to show the featured image and make sure you choose Thumbnail as the Image size choice and set it at large size. Crop the image square. Make a choice on whether or not to show post info; this will display in the right hand column under the title.

In the style settings, choose your heading text style and then in the text options, choose your post content position – right in our case. Make the text width 50% and then, crucially, make sure you set your text padding to 1px. If you choose 0px here or anything else, it messes up the effect. So 1px is important. When you set it like this, you will notice the 1px line down the left hand side of the image – but I’m guessing you didn’t notice that until I told you.

Next, choose which post type to display and filter your posts if necessary.

Finally, set your margins in the advanced tab to 0px.

Save your module. You’ll notice that the post content text is stuck to image – so to fix that we need to add this CSS. Either via Global settings or layout settings if your slider is only on one page. If you only want to target a specific slider then add a CSS name to the slider’s advanced settings field and add the CSS declaration to this code:

.fl-post-slider-content {
padding: 25px;
}

That’s it. Save everything the and see if it works for you. Have a better way? Let us know in the comments below.

WordPress jpg compression

When you upload a JPG image to your media folder, WordPress automatically applies an 82% compression to the file. WP does not apply any compression to your original file, it only applies the compression to the images it creates for the thumbnail, medium and large image sizes that it creates on upload. The original stays just that, original. WP won’t try and apply compression on any other img type either.

So if your original JPEG image was exported from your desktop software at 75% compression, be aware that WP will apply it’s own 82% by default on top of that when it creates your thumbnails, medium and large sizes. Again, the original file will not be touched.

If you don’t want WordPress to apply compression to the images it creates, then you can add this code to your child theme’s functions.php file and set the compression argument to 100. Similarly, you can set it lower if you’d like it to add more compression.

If you add this code, WP won’t change the compression settings for existing files, you’ll need to run Regenerate Thumbnails to get WP to apply the new settings.

Setting pixel sizes for thumbnails, medium and large images

To set the pixel sizes for the thumbnail, medium and large images, head on over to the WordPress dashboard and click on Settings > Media. There you’ll be able to change the dimensions for each of these default media sizes.

When changing settings for the thumbnails, WP can either ‘soft’ or ‘hard’ crop them depending on whether or not you check the box, ‘Crop thumbnail to exact dimensions (normally thumbnails are proportional)’

If you check the crop box, WP will scale the image from its centre point until the shortest edge matches the pixel dimensions set for the thumbnail. It then crops the remaining image outside of the thumbnail area. A soft crop scales the entire image down to fit within the box so that no part of the image is hidden. Check out this article for a great explanation.

The medium and large sizes are scaled to a maximum pixel dimension so your portrait images will be a maximum of 300px tall for medium and 1024px tall for large if you have set a pixel height of 300 and 1024px respectively. Similarly, a landscape image will be resized to a maximum of 300px wide for medium and 1024px wide for large. You should set these max image dimensions to suit your particular theme.

Creating additional image sizes

If medium and large images just don’t cut it and you need additional images to be created on upload, then adding this code to your functions file will tell WordPress to create an additional image based on the criteria specified.

The code above tells WordPress to create two additional images, one hard cropped, the soft cropped and you can then choose these images from Beaver Builder’s photo module when adding an image to your page.

Beaver Builder breakpoints

Beaver Builder has two responsive breakpoints by default, 992px for medium devices and 768px for small devices. You can alter these values by going to Tools > Global Settings > Responsive Layout but you only have two break points to work with. These breakpoints are important as you’ll see later as they determine when your browser starts looking for your large or medium images instead of displaying the original. Beaver Builder 1.8 introduced stacking order on columns allowing you to reverse the columns order on mobile – David Waumsley has a great video here outlining the technique.

Beaver Builder photo module

When using the Beaver Builder photo module, you tell BB which image size to use from the module size dropdown. In my tests, BB also gave me a few suggested smaller sizes based on the column or row I was inserting the image into. If you’ve defined custom sizes in your functions file, these will also be listed here for you to choose from.

BB then inserts your image and scales it to suit the containing column size. So if you insert, say a 1024px wide ‘large’ image into a column size of 900px, BB will scale it down to fit the column width. If you then resize your viewport, your browser will continue to scale the image until you reach your defined breakpoints.

The srcset img tag

BB adds code to enable your browser to know what image to use for each of your breakpoints. It will then swap out the large for a medium image according to rules set by the code below. It does this because BB supports the srcset img tag. Basically, what’s happening here is that BB is saying to the browser, here’s the image I’d like you to display by default; use this one if the viewport is bigger, use this one if the viewport is made smaller. Using an example of an image displayed on this site, BB is displaying versions of an original image of 1136px wide in the following manner:

<img class=“size-large" src="https://builderbrains.com/my-image-1024x789.jpg" width="1024" height="789" srcset="https://builderbrains.com/my-image-1024x789.jpg 1024w, https://builderbrains.com/my-image-300x231.jpg 300w, https://builderbrains.com/my-image-768x592.jpg 768w, https://builderbrains.com/my-image.jpg 1136w" sizes="(max-width: 1024px) 100vw, 1024px" />

Let’s see what’s going on:

img class=“size-large" src="https://builderbrains.com/my-image-1024x789.jpg" width="1024" height="789"

This is setting a class on the img and telling the browser to use the large image by default. It’s telling the browser that the image width and height are 1024 x 789px. If your browser doesn’t support the srcset img tag, it will fallback to using this image by default.

srcset="https://builderbrains.com/my-image-1024x789.jpg 1024w
Here we’re telling the browser that for a viewport wider than 1024px then use the image called my-image-1024×789.jpg which also happens to be the size-large img.

https://builderbrains.com/my-image-300x231.jpg 300w
For viewports between 300 and 768px wide, use the my-image-300×231.jpg

https://builderbrains.com/my-image-768x592.jpg 768w
For viewports between 768 and 1024px wide, use the my-image-768×592.jpg

https://builderbrains.com/my-image.jpg 1136w
For viewports over 1136px wide, use the original image.

sizes="(max-width: 1024px) 100vw, 1024px"
This last section is telling the browser that if a viewport is bigger than 1024px wide then the image used must fill 100% of the container otherwise if it’s smaller then it should be displayed at 1024px wide, until of course, the smaller images come into play.

The browser and Beaver Builder are doing a pretty good job of automating this in the background and for the most part, this will suit most people. However, there may be times when you want to tweak the settings and in that case, you’ll need to use a Beaver Builder HTML module and write the corresponding code accordingly.

So in conclusion, for me it seems best to have a design strategy in place to determine the best default image sizes for your website’s layout. Then set the best thumbnail, medium and large sizes in WordPress media settings and define your own if needs be. Choose the right image sizes in the photo module and if you need to alter breakpoints or override the defaults then the HTML module and responsive global options are your friends!

Have a tip? Please let us know in the comments.

Digging around, I realised that it’s a simple visit to the WordPress Customiser to set the sidebars to always display. Head to Content–>Blog Layout and from the ‘Sidebar Display’ dropdown, choose always. Of course, if you don’t want sidebars to display on mobiles, then leave this option set to ‘Desktop Only’

Head to the WordPress Customiser to set your sidebar display preferences.