Don't be scared - It's just a Placeholder!
If you're like me, you love building pages with Beaver Builder because it's always quick, easy and a lot of fun. But, sometimes you don't have the image assets you need to put together a quick page outline, until today that is.
Before I discovered Beaver Builder, I used to use the handy tool that can be found at https://placeholder.com
In fact, the 640 x 480 image above was generated using only this code:
<img src="https://placeholder.com/640x480" alt="placeholder" />
If you needed a different sized placeholder, all you have to do is change the number values to the dimensions of the image you want. Pretty neat eh?
Photo Module in Beaver Builder
Things work a little differently in Beaver Builder though. Instead of entering code to display an image, you just drag a Photo Module into a row or column and select an image from your Media library.
This got me thinking about a quick and easy way to add Placeholder images using the Photo Module in Beaver Builder. I wanted a way to quickly place a perfectly sized image no matter if it was a single column, 3 column or 6 column layout I was placing the image into.
Now I know Beaver Builder automatically re-sizes images to fit the column width that you're putting the image into, but I wanted the images to be the exact width for each of the column layouts. So here's what I came up with...
These image sizes are based on using the default page width of 1100px and the default padding / margins that Beaver Builder uses in Rows and the Photo Module.
The default values are 20px padding in Rows and 20px margin in the Photo Module so we end up with 40px on each side to subtract from the total width on a single image, but as you add more columns, the margins between the images need to be subtracted too.
You might have to play around with the smaller images, because the 20px margin will create 40px spaces between the images, which will likely be too much.
You might want to take 10px off each side for the 4, 5 and 6 column layouts. If you do, just add 20px to the width of each image to compensate. i.e. 172px will now be 192px wide, 136px will now be 156px wide etc..
Download the Images & a PDF Cheat Sheet
I ended up creating 3 Sets of Placeholder Images that are yours to download.
Once you've downloaded and unzipped the files, just drag them into your Media library to start using them.
Thanks for stopping by. Please tell a friend if you found this useful:)