PACS WordPress SIG

A Special Interest Group of the Philadelphia Area Computer Society

You are here: Home / WordPress SIG / Building Responsive Pages with Beaver Builder

Building Responsive Pages with Beaver Builder

by Leave a Comment

Beaver Builder Plugin

Let’s build an “Our Team” style with Beaver Builder with an eye on the responsiveness.

We did get started rather late this time. There was a problem with the link to the Teams meeting that I sent out with the notice and several participants were not able to connect. The feedback was that the link opened in a blank white screen in the browser.

The Teams link, when opened, will attempt to display a pop-up modal asking you to confirm whether the link should open the Teams app on your computer, or use a web interface to access the Teams meeting.

If your browser is set to not display pop-ups, you will not see this modal. In place, the screen will clear to white and display a small icon in the address bar indicating that a pop-up was blocked. You can either disable the pop-up blocker temporarily so that you can reply to the prompt, or log into your Teams account via the web interface to access the meeting.

I recommend that instead of clicking the link to open Teams, that you copy and paste it into your browser. Depending on what browser you are using, how you have it configured, if you are using the Teams application on your device or running Teams from the web there will be different steps you need to take to get it running. I urge you to download the Teams app to your device ahead of time to get it set up and configured.

This month we run through a quick how-to on building a responsive page using the free Beaver Builder plugin.

Specifically, we want to create a page that has a grid style layout with the rows having 2 or 3 entries being either photos, text, or a combination. Some rows will only have a small bit of text with no images at all. The challenge here is to create something that is easily maintained when new content is added and make it look great on mobile devices.

Our “Topics from the Trenches” segment looked at a question from the audience. I really enjoy this segment to address questions that come up in real-time. It seems that topics can tangent off into all kinds of WordPress-related areas.

But First, A Few Quick Announcements

  • WordPress 5.9.3 was released on April 5. It is a maintenance release. Check out the Release Notes.
  • WordPress 6.0 is scheduled for release May 24.
  • WordCamp Montclair, NJ is still on for June 25, 2022. It will be the first in-person WordCamp since February 2020. It is being held at Montclair State University.
  • The WP Community Team announced new guidelines for in-person events. In a nutshell they recommend following local regulations, provide masks and hand sanitizer, and make mask-wearing a “recommendation”.
  • Not specifically WP, but noteworthy anyway: DuckDuckGo and Brave Move to Bypass Google AMP Pages by Default
  • Our May meeting returns to the 3rd Saturday of the month, on May 21. PACS will stay virtual through the remained of this program year. The 2022-2023 year is still up in the air.
  • I am still actively soliciting ideas for future meetings.

Topics from the Trenches

Anyone, anyone? Yes, in the back!

Ron is an excellent source of thought-provoking questions. This month, besides being the source of our primary topic, Ron asked for a quick refresher on how to change the name of pages after they have been published. For example, the published page is https://example.com/our-scholars/. He had made a copy of the page to do a redesign and the new page was https://example.com/our-scholars-copy/. The copy was published during the redesign process.

The offered solution we discussed involved using the WordPress Quick Editor UI to change the name of the page and its slug as needed.

We also discussed using the Admin Columns plugin to insert an extra column on the Pages screen. The extra column is the SLUG which is the actual URL that is displayed in the browser address bar. Seeing the value of the SLUG right away can help as you go about your renaming process.

Topic of the Month (TOTM) – Building a Responsive Page with Beaver Builder

  • We installed free Beaver Builder plugin from the WordPress repository onto a staging site.
  • We create a new page named “Our Team”.
    • Review layout.
    • Editing Assistance.
      • Left menu – “R” responsive editing.
      • Left menu – “P” preview.
        • Both of these offer Responsive viewing from upper left -> Small – Medium – Full.
        • “Continue Editing” to exit this mode.
    • Build rows with columns. Insert photo and text modules as needed.
    • Set column stacking as desired – especially helpful on photo with text.
    • Review column stacking details here highlighting left to right, top to bottom flow as the screen size gets smaller.
Sample row with 3 columns displaying combination of images and text copy.

Use Beaver Builder Responsive Editing Controls

When editing any module in BB, a small icon of a computer display is shown on any control that offers responsive specificity. Clicking on the icon (shown highlighted in yellow on the screen capture below) cycles from large to medium and small view port widths. This enables you to specifically select how you want that module to be displayed on various screen sizes. It even permits you to completely remove the module display from a specific size device. This affords the page editor the freedom to make the content display any way you desire.

Beaver Builder editor with responsive controls highlighted

Responsive Controls Provide Complete Design Freedom

When you highlight or select a module within a row on your BB page, the editing pop-up offers a variety of tools to enable adjustment of all aspects of the modules. For responsive control you want to focus on the monitor icon. Clicking this icon switches the display from the standard desktop view to a mobile view. The mobile view adds a selector at the top of the screen enabling you to toggle between a small, medium and large view of the content you are currently working on. This level of control permits you, as the page designer, to set up the desktop, tablet and mobile phone views of the page.

That was about it. Our session was a bit limited. Hopefully next time we will have more attendees to review all this good stuff.

See you next month.

Resources & Links Referenced

Notes & Questions

Here is the YouTube video recording of the session.

Reader Interactions

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.