[vc_row][vc_column][vc_column_text]
Wondering how to create attractive tables and columns in WordPress? It can be difficult to build pages using the basic WordPress post editor, but the WP Bakery wordpress plugin (available here) makes adding columns, text and images a breeze!
Feel free to view my video here or scroll down for step by step instructions:
To start, make sure that you have the WP Bakery plugin installed and active on your site or blog.
Step 1:
[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”18977″ img_size=”full”][vc_column_text]On the page you want to edit, just click on the Edit with WP Baker Page Builder link in the upper right hand corner of your page or post. You should not be in the dashboard, but on the actual live site to use this link.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]
Step 2:
WP Bakery Page Builder uses Rows to build content. So, to add a row, click on the Plus sign in the upper left corner of the page editor. Then, select Row.
You will also see all of the elements that can easily be added to your pages, including text, images, buttons and many different and fun options. Feel free to play around with what can be added, this tutorial will focus on setting up a simple table.
Step 3:
First, choose the number of columns that you want your row to have. Simply hover your mouse over the row that you have just created, and click on the 3 line icon in the popup toolbar. This will allow you to choose the number of columns for your row. Just click on the column configuration that you prefer, and click the blue Update button.
Step 4:
Now, you can click on the pencil icon in the popup toolbar and choose the settings for your row. Under Row Stretch, you can choose either Default or Stretch Row. If you choose Stretch Row, you will have the option to add a photo or color background to your row and it will stretch across the width of your page. You should also check the Equal Height option. This will ensure that your columns will remain equal height even if you have different-sized photos in your rows. Then click the Save Changes button.
Step 5 (optional):
If you want to set a colored background or photo background for your row, click over to the Design Options tab in the popup toolbar.
Under Background, where it says Select Color, you can enter a hex color or alternately choose a color from the color picker. If you prefer to add a photo background, just click on the blank box with the plus sign to upload your background image. Once your image is uploaded, you’ll have the option to set the layout of your background image by clicking on Theme Defaults. To have your image cover the entire background of the row, as in the screenshot above, choose Cover. Then click Save Changes.
Step 6:
Now, it’s time to add images and text to your columns. Once you’ve set up your row and the number of columns you want, you’ll have a page that looks like this:
To add images or text to your columns, just click on the Plus button in each column. This will bring up the entire WP Bakery menu and you can choose what element you want to add to your column. We’ll start with a Single Image.
Click on the Single Image option in the menu. This will bring you to your Single Image settings:
Click on the plus sign under Image to upload your image, just like you would for a regular WordPress blog post. I find it best to set the Image Size to full, as the image will adjust to fit the width of your columns. I also like to set the Image Alignment to Center.
You might want to add a link to your image, if you want readers to be able to click on the image and be directed to another site. So scroll down further in the popup, and choose “Open Custom Link” under On Click Action. Under Image Link, just type in the URL that you want the image to link to. And if you want your image to open in a new window, choose New Window under Link Target. Be sure to save your changes by clicking on the blue Save Changes button.
Now you’ll have your image set in a column. You can add images to the rest of your columns in the row as well now if you choose.
Step 7:
If you want to add text (a description, etc.) below your image, simply hover your mouse over the image you have just added. A little orange plus sign will pop up that will allow you to add more content to your column.
This will bring up the WP Bakery menu again. This time, you can choose to add a Text Block.
This will bring you to the Text Block settings. All you have to do is to replace out the existing dummy text in the text block with your own. Then click the blue Save Changes button.
And that’s it! I have showed you how to add a row, set the number of columns, and add images and text to your rows. If you want to continue to add images and text, simple repeat Step 7 above; using the little orange plus sign, you can add text and images over and over again to each row to create a table. WP Bakery is an easy way to set up rows and columns in WordPress and have complete control over your text and images!
[/vc_column_text][/vc_column][/vc_row]
