Skip to content

This is a work in progress. Things might not work as expected yet!

WordPress Training - Toolset, WPML, Beaver Builder and more

How to add Text using Beaver Builder

Create a new Page or Post

Adding text is an important step to creating a website using Beaver Builder. Not only can you get your message across to your users, but also almost more importantly, you can get Google to read your content.

Start by creating a new Page or Post from your WordPress Dashboard, and Look at the top of the text editor for the Beaver Builder tab. Click there, and then launch Beaver Builder with the blue button.

Beaver Builder Text Editor Module

The Text Editor Module is available for the free version of Beaver Builder, and is perfect for editing your latest copy. The Text Editor module behaves just like the normal page editor in WordPress, and you can add various formatting and links to your text as you go along.

Create a Column of Text using Rows

Let’s imagine that you would like a paragraph of text, next to an image of yourself on a page titled About. This is easy with Beaver Builder, as any of the modules can be added to any size Row. Go back to the new page you have created and select the Plus sign top right. Navigate over to the second tab on this drop down, called Rows. Here you can see all of the preset Column configurations that you can use. Drag and drop the 2 column onto the page.

Adding Beaver Builder Modules to Columns

On this page I am going to go with the text on the right, and an image of me on the left. Add a Text Editor Module using the plus button, and drag it to the right hand column you just created. Write something in there if you like, so that you can find it at a glance. Press save. Next add a Photo Module to the column on the left.

Beaver Builder Photo Module settings

In the first tab of the Photo Module settings you have the General tab. Here you can select your photo from the WordPress Media Library, or choose URL from the drop down above. The URL option could be very useful if you want to have your images stored somewhere else, or if you are using an image from another site that you own. Always remember to check permissions before using images that are not yours. If you are a Google Drive user for example, you could use the URL function to get images from a folder stored there. This would leave less work for your server, and could help speed up your site.

Style Photo Module Settings

The second tab on the Photo Module settings page you will find the Style settings. These tabs are common throughout Beaver Builder, and you are going to see them a lot whilst your designing your new WordPress site. It is good to go through each step by step to get the right settings the first time.

On the style tab for the Photo Module you can adjust your crop, width, alignment, and add a border, radius and or shadow to your image. Depending on the style of your site, and the placement of the Rows on you Beaver Builder site, these can be adjusted.

Advanced Photo Module Settings

The advanced tab is another one that is common throughout the Beaver Builder Modules, and is used to fine tune the final outcome of the new element. An important step for every new Module that you add is to consider if it will look good on mobile, and devices or not. This is incredibly important since Google have switched to Mobile first indexing, and will not enjoy reading your site if it does not function well on Mobiles, and Devices.

Side note

Whilst on the subject of Mobiles and Devices, I just want to share with you a Browser that I’ve recently discovered. It has made my life as a Web designer a lot easier, and has aided me in updating existing sites that turned out did not look that great on smaller screens. If you have a second, do yourself a favour and click the link below and download Blisk Browser. (Not a promotion or affiliate link, just a good browser for web designers and developers!)

Add your Text into the Text Editor Module

I personally don’t use the text editor to draft my content for Pages and Posts. I am a Google Drive user, and just open up a Blank Document, and draft my ideas and rough text down. Then I open up my WordPress site and my new empty Text Editor Module, and Copy and Paste it in. 

Note, this can lead to some strange spacing in your new content, but you should read it through anyway before publishing, so it’s no big deal.

Formatting your Text

Just like any word processor, the Text Editor Module for Beaver Builder, can add some basic formatting to your text. Creating H2’s for titles and Search Engine Optimization reasons for example. Adding links to text is also a great function, and can lead your users around your site, or to other information.

Be sure to check out the site where I’m doing all this. It is live at kreativutsikt.se. Share this around if you found it useful, and be sure to follow 123wp on Pinterest for all the latest articles and videos.

Scroll To Top