A simple web agency website made with the Beaver Builder + custom shortcodes

Showcase
1

Hi guys!

I just finished building a website entirely with the Beaver Builder! Well I added a few shortcodes from other plugins and some HTML but all into text editors from Beaver Builder hehe :slight_smile:

So here it is! http://dixfractions.com

As you will probably notice, it is a web agency website. I have been building websites for the last 5 years with plain HTML/CSS/JS with DreamWeaver and/or with Wordpress + shortcodes and I never thought I could achieve such results with a Drag and Drop builder! It is just crazy how much time I am saving! I can now offer some really competitive prices to my customers :slight_smile:

Like many other web developers, I was scared about the quality of the code but Beaver Builder generates some pretty good code! Everything is well organized and it’s easy to apply custom CSS thanks to the Custom CSS class feature.

However do note that if you want to achieve some advanced features you need to include more third-party plugins but that’s the beauty of Beaver Builder, it simply works with all of the plugins you run along! You will notice that on my ‘Services’ page, there is a little animation with the four circles at the middle-right of the page. I achieved this by simply installing a skill bar plugin and pasted the shortcode into a text editor module. It took a loooong 2 minutes… :slight_smile:

Anyway I hope you guys enjoy my site and I am just excited to build thousands more sites with this awesome tool! By the way sorry for my bad English hehe I am a french Canadian (I see the joke coming with the BEAVER builder).

Have a nice Black Friday folks!

2

Sorry the circle animation is on the About us page :slight_smile:

3

Excellent work Thierry!

I really like what you have done. It’s a good example of what can be achieved with Beaver Builder and a few shortcodes.

And yes, Beaver Builder is very clean code friendly with good code standards built in.

Like you, I cannot believe - after years of coding - how easy it now is to create complex websites quickly using Beaver Builder.

Congratulations on creating such an excellent example of your work and thanks for sharing.

Colin

4

Thierry, this looks fantastic! Awesome job. Question for you, did you create two versions of each page for each language? Also, are you using WPML or a similar translation plugin?

5

Thank you guys for your nice words!!

Robby to answer your question, I indeed created two versions of each pages using the WPML plugin (I had no compatibility issue at all by the way, WPML integrates flawlessly with the Beaver Builder.)

In order to have the current language hidden and have some special CSS applied to it, I added some custom PHP code into the functions.php file of the Beaver Builder’s child theme.

Also, as a side note, since it was not a really straight forward process to translate the footer, I simply disabled it from the Beaver Builder’s theme settings and I created a simple 1 column row on all of the pages. By the way, while I am here, in my opinion it would be a great option to be able to export rows to other pages! It’s really not a big deal but it would certainly be a nice feature :slight_smile:

6
By the way, while I am here, in my opinion it would be a great option to be able to export rows to other pages! It’s really not a big deal but it would certainly be a nice feature

This is definitely on our radar. You do have the ability to save a page as a template that you can then use on other pages. I know that’s not a perfect solution, but just in case you hadn’t noticed that feature yet…

7

LOOKS GOOD I NORMALCY DO NOT LIKE THE DARK BLACK LOOKING SITES BUT WITH THE COLORS I DO LIKE WHAT YOU DID CANT WAIT TO GET MY FIRST ONE DONE,

8

Thank you for your feedback Edward! I can’t wait to see your work! :slight_smile:

9

Nice work Thierry! :slight_smile:

10

Thierry! Have a ? i like the menu you are using but do not see that in one of the Beaver themes.

Did you use a Beaver theme or another.

How did you get the menu to have the roll over color effect and that layout ?

Thanks
Just working on some sites and love that menu style.
I have spent this past week creating so many page layouts and saving them as templates i think i could build a site in a few clicks just loading in templates into each page now.

11

Thanks for your comment Martin!

EdWard: Actually, I simply used the automator skin that ships with the beaver builder and I applied some custom CSS to it. It’s really nothing complicated…a simple CSS transition effect applied to the font-size/font-color and background color with a delay. Feel free to use FireBug to analyze my code :wink: