Think that WordPress is only made for simply blog and personal websites? Think again. Using page builder plugins, you can easily create more complex websites than that.
In this tutorial we go through 3 different kinds of complex websites you can create quite easily using page builder plugins for WordPress.
01. Portfolio Website
The first kind of website we’re going to cover, is the portfolio. When people think of a portfolio site, they often think that they need to invest in a specific portfolio theme to get the job done.
That’s no longer the case. With page builders, it’s easy to make your own Portfolio page or complete website.
Most page builders even have premade skins specifically for portfolio sites.
For example, in Beaver Builder, you can select the Photo Portfolio page template (under ‘Content Pages’), and instantly get a portfolio site that looks like this.
Simply change out the pictures and text, and you’re done! The images when clicked, will automatically show up in a full-screen, lightbox slider.
Let’s say that you don’t like that layout, and would rather start from scratch. In Beaver Builder, one thing you can do if you want to make a visual portfolio page, is simply toss the pictures into a gallery.
The gallery does it’s job quite a bit better than the standard WP gallery, and showcases your work in a collage/masonry style that works even if your pictures don’t all have the same dimensions.
You can even set captions to show up when you hover over a picture with your mouse.
And the default option on click is to show this beautiful lightbox.
Where the gallery falls short, is that there is no way to set a custom link for each image. So for example, if you’re a photographer, you cannot link to a separate ‘shoot’ page from each of the images.
So if you want to be able to link to a page from each individual photo, you’ll want to add a new row, and add as many columns to that row as you want.
This will create a layout where the height of the images do not impact the white space of the next image, because they are in vertical columns instead of horizontal rows.
Again I have chosen to show captions when hovered over, but now they each have a unique link that I can send to a specific shoot page for that picture.
Create A Page For Individual Portfolio Items
To create a page for each portfolio item, simply create a new page, and open it in beaver builder. Then add whatever you might want to have on that page.
If you are a photographer, you probably want to showcase the other pictures from that particular shoot on this page. If you are a graphic designer, you probably want to showcase similar designs on a page like that.
The only problem with this approach is that it can be a bit of work. If you want to arrange the content based on when it was added from top left corner to bottom right, if you add new content you would need to move virtually every other piece of content left.
So if you want to have custom links on each image, and have a constantly updating portfolio, rather than once or twice a month, you might want to look into how to make a portfolio site with Advanced custom fields, or get a specific portfolio theme.
Use A Slider
You might also want to use a full-width slider to show off your work, instead of a gallery/mosaic layout. Again this is easy to pull off.
Simply add a new slider element to your page, and start adding slides. You can link to a single item portfolio page with the call to action in the slide settings.
You can set it to simple text link, which looks like this:
Or you can set it button, and choose one of the styles. If you choose the transparent style, it ends up looking like this:
02. One-Page Website With Parallax
Parallax basically means an effect that takes place when scrolling your browser. The most common parallax effect, is showing only part of a picture, and then having the picture automatically scroll as your scroll down the page. This creates an immersive effect as the image itself is ‘moving in place’, almost like video.
An easy way to use this effect, is to simply select the template Scroller.
Then you can simply replace the images and text throughout the page.
This is great for many different kinds of websites. Are you a photographer that enjoys pairing a few well-chosen words with your pictures, making full-blown photo essays? Perfect. Do you want to make a site for a non-profit that relies heavily on visual story storytelling? Awesome. You can also create a great business or product website using this template.
If you want to add more pictures, or more blocks of text, you can simply duplicated the blocks in question, and move them around appropriately.
If you don’t want to use the template, but you want to create an image block and add the parallax effect from scratch, add a new row.
Go to the row settings, and set Width to Full Width.
Then scroll down to the background settings, and select parallax.
Now we need to set an appropriate height for the picture. There only options for height are default, and full height, and if we set it to full height the parallax effect will not work. So we have to work around that, either by filling it with content, for example text, or we can set the top and bottom padding high enough for the picture to look okay.
After that, your box with the parallax effect on the background image is in place. If you want to add more images, simply duplicate it, move it, change the image and the padding settings.
Now all that’s left, is to add some text content to your site, maybe other non-parallax visuals, and you have a beautiful, visually compelling website. All in minutes.
Note: Your theme needs to have a blank page template available for the parallax theme to show up exactly as it does in the builder itself. One easy way to ensure this, is to use the beaver builder theme that you can get along with beaver builder.
03. Business Website
The last type of website that we’re going to be looking at creating today, is a business site. Of course there are more than one type of business website these days, with a parallax one-page website like we made above being one of them, but there are also other types that we can easily make with page builders.
Beaver builder comes with plenty of templates that are appropriate for business websites. Associates, Biz and maybe the best of them all, Agency.
They’re all clean templates that will become pretty good websites just by switching out the images and text. But let’s cover a few ways to maybe take them to the next level.
Let’s start with the agency template. By default it looks very sleek. The only small problem is that the recent projects part looks a little underwhelming.
So what we can do is add a slider for recent projects instead.
If we add a slide, with some text and a call to action (as shown above in the first section about portfolios) you can easily spice up the recent projects section.
The final result will end up looking something like this:
If you want to build a business website from scratch, that is certainly possible as well.
Simply choose the amount of columns that you want in a row, and get to work, row by row, column by column.
It’s a bit slower this way, but at least you’re sure that you get exactly the business website that you want.
Note: Your theme needs to have a blank page template available for business website to show up exactly as it does in the builder itself. One easy way to ensure this, is to use the beaver builder theme that you can get along with beaver builder.
With a good page builder, like Beaver Builder, or other alternatives, it’s easy to make more complex sites, not just limited to the ones showcased in this tutorial. With all the simple and advanced modules, you can simply drag and drop your way to success, while editing a few settings here and there, of course.
You pretty much create any website that you can imagine, as long as you have use a bit of patience and ingenuity. And the best part is, no coding knowledge or WordPress development is required at all. You may also want to see our comparison of best drag and drop Page builder WordPress plugins.
Have you made something awesome using a page builder? Please let us know in the comments.