 Ricky's our next speaker now Ricky told me that he wanted to tell everyone that there's a better talk in the other room so if everyone can just get up and leave and go to the other room I think that'll make Ricky happy no no no this is a very good talk all about using page builders so give Ricky a round of a pause thank you very much can everybody hear me okay yep cool okay welcome everybody to word camp Sydney is everybody feeling awesome this morning yeah how many people are here for the first time for a word camp hands up oh geez awesome and just to give me an idea of the tone I'm gonna say how many people actually use page builders okay so this might not be so exciting for you but let's go for it I'll hopefully I'll teach you something here okay let's see if this works maybe there we go here we go so a little bit about me that's me in my usual word camper tire hopefully I won't subject you to that tonight I live in Brisbane anybody here from Brisbane whoo I do web design I did for a long time using WordPress like most of us here hopefully it's no gym with people here sneaking in I work for WP engine that's that's a little logo here so about a year ago almost to the day I got accepted to work for WP engine went to the dark side and now I work with servers and data and boring stuff which is better pays the bills and if you want to come and get some swag we're out there out there in the hall okay so for those you who want to find out what's going on and maybe sneak over to the better talk next door I'm going to talk about a quick history of page builders how I use page builders which is usually very badly different ways to use page builders some hits and tips that I've got over the years to make it work a little bit better and my vision of the future which is really probably something we're able to see how it goes first off I'm just going to do a disclaimer I am not a page builder expert I use it in my own way I'm not like a super user I'm not affiliated with any of the page builders we're going to show you today in any shape form they're just the ones that I use and I'll mostly drunk when I write this talk so just gonna put that out there that it might not be that good anyway let's get on with it so a little bit of history of page builders this was really interesting I started doing some research when I started writing this talk last night and I was really surprised at how far I went back oh Jesus buttons not working real good let's go back a bit memories there we go does everybody remember this yeah when I started researching page builders I was doing yeah reading some blogs and some articles and it took me back to a time when this thing was doing the rounds and everybody had to have it on their website and websites look like that is everybody remember those ones yeah strangely enough when I looked up these really bad looking websites this one's actually still in existence I found it on a website called 10 websites you work won't believe I still live so if you want to check it out and just you know see how it runs yeah so back in the day I I started out with a program called fusion eight when I back in about 2004 I used to get computer magazines with the discs on it everybody remember those and one of this came with a program called fusion eight which they'd gone to fusion nine were giving away last year's edition of the software so that was the start of my web design journey so I loaded this up and started playing with it and it was using a whizzy wig which you could sort of drag and drop all your images and menus and make a web page out of it is everybody remember that does anybody ever use one of those maybe front page or so yeah dream weaver so that was my first introduction to making websites and what I found out was there they actually should be called that which is a what you see is not always what you get because I would drag things around put it on the screen and it really once it went live it really didn't look you know something was usually buggy or you couldn't get something to move exactly where you wanted it to so I kind of got disillusioned with that whole system and that's when I decided to learn HTML and CSS and build websites the right way and from that point forward I was using notepad and just coding and and making websites that that system so that was good and then I found WordPress which just took me to the next level because then all of a sudden I could make fancy logins and all these amazing things that I didn't know how to code but still using HTML and CSS to make things look awesome and then one day I got a theme that had a page builder in it it let me drag things around and make the page a little bit different but it wasn't that good and as you can see from there you couldn't really get an idea of what was going on the page until you previewed it so it wasn't much better than the text editor it just allowed you to place blocks in and do some funky stuff so use that for a little while because it was included with the theme which there was a lot of themes coming out that time with all these page builders and yeah kind of did all right but then things went a bit more forward I'm now using beaver builder amongst other things page builders really sort of they started accelerating a lot of them came out the woodwork there's some really good ones that came out the beaver builder was just one the ones that I got recommended and started using I found it really easy and really helpful one thing though was that I was very conscious that a lot of developers kind of shun page builders so it was kind of like I didn't tell anyone I was using a page builder I was my dirty little secret and you know I was kind of ashamed that I was using it for a while then suddenly you know more people started using I think I'm going to give up on this this is not working real good so this is gonna do a little quick gif maybe of how a page builder works now one of the best things that I found with these page builders was that they came with some pre-made templates so I could scroll through the templates pick one that I liked and a couple of seconds I had a fully functioning website of course you know that's not exactly what you want for your website you want different images and text and all sorts of things but it was a good starting point so you can see from there within a couple of seconds I've got a full website of cheese and everything fancy little widgets and you know footers and all that kind of stuff just like that so I thought man this is awesome does anybody use one of these where you can just make a web like a whole entire page like that in a few seconds but what I found was it was good like I actually had a client once who rang me up and he said I want a website by tomorrow like it was just an urgent thing he didn't really care what it looked like he just needed five pages and some information on it so he could do a government tender or something like that I managed to knock it up in less than eight hours through a heavy storm with a blackout and while doing other jobs and then the next day asked him how it went he said I have even looked at it so yeah so that was really exciting but I found it really good once you make one of those templates once you blow one of those up you can easily switch in all the stuff that you want different images different text you can take parts out add parts and then when you get something you really like you can actually template it out and save it and then you can reuse it so very good for speeding up your workflows for those who haven't used much of page builders they're very easy so I'm just gonna quickly add a countdown timer here and these are things that I couldn't code on my own I don't profess to be an amazing coder but you know you can drop gadgets like using plugins you can drop this into a page I'm just adding a date which just happens to be today's date maybe yesterday's date and it'll start a timer very easy once you've done that there's a lot of other options you can do too what I found was along web pages you might reuse a certain part so one of the options in there is to actually make it a global option so for the little blocks you can save these blocks and reuse them so you you kind of customize them save them and you can you've got the option of making it a global or non-global kind of entity so right here I'm just saving this little countdown timer with that time on it and in here it's saying global so with a global one if you're going to be reusing it across the site on different pages and making it global means you don't have to go into each individual page and update you can make make that little snippet put it across multiple pages and when you when you make an update you update one and updates all of them so it's one of those things you need to make a decision do I want to make this a global snippet or do I want to make it just a once-off but I found that very handy especially when you had little bits of snippets across pages everywhere one thing I found with beaver builder and there's a couple others that do this as well as well they've got a lot of add-ons so I got the ultimate add-ons for beaver builder which gave me a whole heap of more functionality at the top of what beaver builder already gave me and there's a whole heap of other ones out there that CB custom modules if you are using beaver builder as a free module it adds a bit of funky stuff in but yeah keep an eye out for that and one of the things I really love was these before and after photo sliders they're really fun to work with that's just one of the extra add-ons but it just means you you know you're not locked into this one thing it can be added on to which is really good the other thing you can get with these is for example beaver builder there's another part of it where you can actually like use the page builder functions on the header and the footer and the side bar so you can effectively use the page builder on your theme which is something that you know a lot of people don't consider so you can take the the header there and you can put in a you know logo different place you can put in slider you can put in a countdown timer in your header same if you footer you can do some really funky customizations on that as well and another thing I found out was we can use it to customize WooCommerce as well and that was something I didn't realize you could do I thought it was just going to work in the pages but then I found that somebody's made an add-on that allows you to change how Woo looks your product pages you can make custom product pages and it saves you having to get in and recode the PHP files so there's a lot of options and I've been talking a lot about beaver builder but Elementor is another one that's getting a lot of attention at the moment and I've played around with that it's another good really good page builder a lot with a lot of these you can get a free trial version or the light version of them so it's not going to cost you anything you can get in and play with them had a bit of fun not sure if this is going to do something here we go so with Elementor it's very much the same as beaver builder you got some like functionality down the side what they call modules you can click on a module and it will basically add some funky stuff onto your page so right here I'm putting in a skill level kind of skill bar I'm going to show you how much of a light awesome ability I've got on web design which apparently is very little there we go it's getting worse it's getting worse there it goes and then we turn the green there is this is really just scraping the surface of what these page builders can do and for anybody who's used one that they've obviously know that you know there's a lot of stuff that you can make it do and and just make your pages that much better the main question is who is this suited for like I was saying back in the early days a lot of developers were just kind of scoffing at the idea of page builders because they wanted to do everything themselves and a lot of them were very bloated slowed sites down and weren't that much better than what they could code themselves so generally in the beginning it was just suited for people new to the pro wordpress bloggers small businesses who didn't have that coding ability we're a bit lost even in the text editor to make it pages look really awesome but lately I've seen a bit of a trend freelancers and agencies are using page builders a lot now too because it does speed up the processes speeds up the workflow and lowers the price point of what they're developing and also seen big enterprise customers using you know large companies enterprise customers using page builders in their websites as well even though they've probably got a big team of developers sitting on their stuff page builders are actually making a lot easier for them so I'm just going to run through a few case studies of why people would use it and how to help them first use case would be no coding ability so your bloggers and new business people some people kind of struggle with the text editor trying to get images to align and get things to look good this is me trying to make a page look good not very good there so by using that templating system that I showed you earlier we can build out the entire page very quickly and easily so for somebody who's got a restaurant or you know a plumbing business something like this can build out the entire site they just have to swap in their images swap in their text and away they go so for bloggers small business really good and easy to use for freelance agencies that templating method you can template out all kinds of different sites and start a project very quickly and easily so it speeds up the process time one of these templates can be custom made they can be swapped out between different sites you can kind of keep a library of them it's also good for mock-ups wireframing I used to use it a lot to quickly build out a site that given a customer an idea of what the site's going to look like even if I wasn't going to use the page builder so you could kind of do that whole wireframing thing and but also make it interactive so they could click around it and use it so even agencies can use page builders it is probably won't tell anyone this is the one that really got me interested this is actually the WP engine company site and they actually use beaver builder now when I heard that I was very surprised because I know we've got a team of really good developers on staff that could build a website out from scratch and make it look awesome so I was really interested to find out why our team decided to use beaver builder which I thought was just a you know a basic plug-in that anyone would use to build out a whole corporate site the reasoning behind it was that the marketing team do a lot of the page building and what they've managed to do is they've worked with the marketing team to build out certain sections and get that uniformity and they save it all of those little snippets in the library so if somebody needs to build a new page out they can pull in all the different parts of that they need very quickly and easily without having to go to the coders and start from scratch and it's always uniform so if they need a little section it's going to show off the our personnel or you know this little section here it's just there they drag it in it's done so it speeds up the development type and you know they'll need to every now and then they have to create a page very quickly so that just works very well okay we're going to have a little intermission it's sort of getting a bit boring so I put a produce in so my little intermission I'm going to tell you about my cat that's my cat called fluff his hobbies include sleeping eating and annoying me when I'm trying to work usually getting between me and the keyboard and stopping me from doing anything I need to do like writing this talk that's it we're going to go on okay so how to get the best out of your page builders first thing you got to do is find one that suits you don't just take somebody's word for it and use that try them all there's a lot of them like beaver builder elementary and a lot of the other ones out there we've got a light version that you can download for free so test it out see how it goes see if it works for you make sure it's lightweight there's some that are very bulky add a lot of short codes and they're not very good and be careful the ones that add short codes because if you take it away it doesn't work things like beaver builder you can actually take the plug-in away and it will still kind of work even without the plug-in because it just adds to code to the page one thing I found really useful is as you could see there's a lot of things on there and a lot of them you look at and not really sure what they do so I made like a demo page catalog if you will of all the functionality so just kept dropping the blocks in and and the idea was that I could go through that page and test all of them out and know what they did so kind of refreshes your memory about all the modules so you can better build another page out of it because yeah that some of them have got so many and you look at it and you kind of like I don't know what that does so you got to like drag it in and play with it so building out just a test page on a test server if you can do that or just make a dummy page on one of your sites so you can just go through and refresh your memory on everything that's there saving your rows and templates for later use a lot of people will just drag them in and sort of forget about it and then later on you know maybe two months later they'll think oh geez I want to recreate that if you save them all these things and then back them up it works a lot better one thing I found out that a lot of people don't know is you can actually use multiple page builders throughout your site you don't have to stick to one but you can only use one page builder per page so you can't use two page builders on single page but you can actually use for example Elementor and Beaver Builder in the same website and possibly even Gutenberg so that's the best way to use your page builders okay so the future of page builders now this is just me kind of spitballing where it's going to go but we can kind of see where it's heading love that image just give you a couple of seconds for that there we go this one's for Hannah so I can see page builders being an all-encompassing thing we can see that they're already creeping into the theme area we're commerce basically page builders going to be a one for all you'll be able to load one thing change your theme change your page change everything from this one product it may even make themes kind of obsolete you'll just have like a basic blank theme and you kind of build it yourself which is something we haven't had yet basically you know most people have to build the theme from scratch or get a theme that you're happy using or it kind of mimics what you want to do so being able to like just start for blank canvas and drag everything in exactly how you like it I think that's going to be a game changer and sort of building on what Luke just had a big talk about Gutenberg one of the things is it's getting very blurry about whether Gutenberg is actually a page builder or it's not and I think a lot of people have got different opinions on that it kind of works like a page builder you can drag things in and and build out a page very quickly just the same as I did with the beaver builder so you know where's it going to go I think I mean ultimately the goal is for Gutenberg to really be a page builder will that make beaver builder and Elementor and all these other ones obsolete maybe if it's already in word press why would you buy something else or you know need to install something else so yeah I can see that being a very big possibility and I'm also very interested to see at the moment I've tested it out Gutenberg won't work inside a page builder but at the moment it's a plug-in as far as Gutenberg going forward it's a big chance that Gutenberg may actually work inside your page builder because one of the things you drag in a lot of things you drag in would be just be the text edit box when you're typing out text so if Gutenberg is replacing that and the theme builders the beaver builders and the elementors work with WordPress in the right way there's a good chance that you could drag Gutenberg inside the page builder and have both at once don't know how that's going to work but it could be very interesting so I feel that's that's kind of where it might be going so it's going to wrap this up quickly page builders they can help peeps create amazing pages it's helped me do some really amazing work without doing much work at all speeds up processes speeds up development time can help large companies create new pages pre-approved and uniform blocks very quickly and easily and very cheaply and they're fun to play with you can do some really funky things one of the things is you can actually do like kind of weird shapes between your dividing blocks which is really fun and you can do some like sticking images in between blocks of that they really sort of bring the the website up and makes it just takes it to the next level and all without knowing much code at all so that's the end of my talk thank you very much that was great Ricky well done well done so we've got about 15 minutes for questions so Zach will throw a microphone out to people cat at the back okay so you said which one do I like best while we get the microphone fixed so that's that's a really hard question I have been using Viva Builder for about two years now after basically I did the WP elevation course and the Hedroy Dean recommended it and I thought I'll give it a go and he was right it was a really good system used it for quite a while but then I've just been hearing a lot of talk about elementals I've just installed Elementor in the last couple of weeks I mean playing with that and it's it's really good as well so it's really hard to choose and like I said you don't have to be locked down to one you can actually use two different people five different page builders on one site so you could kind of mix it up and just use the one that works best for that page if one's got a feature that the other one hasn't you need on that page we'll just use that page builder unfortunately like I said you can't swap them to on the one page but you know you can't have it all just get the microphone to you I may ask where is the web of atreus of the Elementor Elementor yeah web atreus how can you find them okay it should be just Elementor on the screen let's let's have a look let's let's let's have a good that's a good question I believe it should just be Elementor web atreus Elementor.com there we go Elementor.com yep no need a AU not AU no it's a it's a okay second made in America I'm not sure second questions except the Elementor and the viewer page builder do you have any other free builders for page there I believe there are some more free ones I don't know what they had the two I've tried a beaver builder and Elementor there's bound to be a quite a few more out there I really don't know I know there's a lot of themes that incorporated page builder with them and they sort of come free with the theme other than that I'm not really sure until now have Elementor and the viewer viewer builder yeah and Koopin back builder only three that's all oh there's a lot of a lot of yeah a lot of them out there do you have any other free money there we go side origin side origin how to spare side origin but thank you thank you no worries probably the best idea and the way I do it is just Google free page builders for word press and that should return a few results no problems at all you can also go into the the web word press repository and search in there and you'll find everything that's been approved by that word press hey Ricky hey you touched on Gutenberg which was great what would you say to someone who was comparing Gutenberg tool page builder why would they use Gutenberg over a page builder or why would they use a page builder over Gutenberg that's a really good question the main reason I would say at the moment page builders are definitely add more value there's a lot more you can do with page builder I know Luke gave an amazing demo of Gutenberg and I'll tell you what I'm I'm really excited about Gutenberg I think it's going to be a real big game changer but this it's still limited in what I can do in this in a certain respects there's a lot more funky stuff you can do with with page builders but like I said there's a good chance that once good a bird goes live you could use both you could use the page builder and have Gutenberg inside not gonna say that's an absolute fact but hey you never know I know beaver builder element or all those guys are working really hard with word press and and Gutenberg to make sure they are compatible it is a big thing that you know it's gonna be a big part of word press going forward it's no use these companies just can't put their head in the sand go I would make a plug-in or wipe it out because people are gonna want to use it and it should work inside a page builder because it is just not much different than the text editor it's the text editor is just putting in that that space there so Gutenberg should work but I think Gutenberg's in its infancy now it's got some amazing features and it's only going to get better so they could come a day where that Gutenberg is going to sort of faster pass the page builders but at the moment I think the page builders just got that edge on certain things that they can do and the fact that there's just that all those add-ons and extra functionality but yeah that's slowly that that margins kind of closing and I think once Gutenberg goes live and I'm pretty sure Luke touched on this that there's going to be a whole heap of people do you like third-party options for Gutenberg very much the same as the page builders and they're probably going to be more you know more of that out there and yeah it could could actually spend spell the end of page builders in some way shape or form very good question and don't forget to bring that up tomorrow at the Gutenberg panel as well question at the back lots of running going on thank you could you make a few comments about the pricing side of things I'm understanding that the core core part is often free and you pay for add-ons is that just for the developer or if you roll out to client sites is there a sort of ongoing trailing charge you have to pay for for maintaining updates to client sites that is a good question and that's always especially when you do it for clients and you're buying things like this whether it be themes or plugins or page builders you've got to sort of consider the costs and how you're going to roll that out whether you're going to make them in charge of those costs going forward or you've got to kind of wear that and maybe on goingly charged them with the page builders as it's one of those things is a whole heap of different models with beaver builder and the thing I liked about the most was there was the option for I think was a hundred and ninety nine dollars a year which then comes down as you renew but it would let you use the the page builder across unlimited sites so it wasn't cost me every time I built a site I just bought the license once and I could build me in sites and it would be covered but it'd be all covered under my license so if I stopped using my license all those copies would then kind of cease getting the license and then the end customer would I have to buy their own license or they would just have to be stuck with a non-licensed version. Elementor I think is very similar I think you've got the different pricing methods there where it's like a one site for X amount of dollars and then unlimited sites for a bit more but yeah it's one of those things that you kind of have to make that decision as a business owner, a web developer do you want to be kind of doing that via customers and maybe on charging on a yearly basis or do you want to kind of push it off to them and I've had that just recently where I've had a wasn't so much a page builder but a plug-in that I was paying the license for and then I stopped paying the license well actually the client decided to take over the license so it's just a matter of him buying of that license and putting the code in and problem solved. Does that kind of answer your question? Okay. That's another question on the front here. You mentioned about the copying templates across layouts across different so creating it one one layout and then using it on other sites. Is that something a user can do or is it something that they then have to go to okay I've created this can you please Mr. Web Developer create that so I can put it in other sites. Do you mean as the end user or? Yeah so like so for instance if I build a site say I'm a resume writer or something and I decided I want to give my clients online resumes so I create an online resume site that I decided yep that's cool I want to use that for other clients how do I then be able to use that for other clients on other sites with different domain names. You can export those templates out and load them into the new sites so yeah they can be pushed across it's not limited to that one and I know this works in be built I'm pretty sure it works in Elementor as you can actually kind of save them out and then push them into the new sites so you could effectively you know like give that that template to somebody who's already got the plug in and they can load that up. Any more questions? All good. Well that's that's an early wrap-up so we can we're not far off actually five minutes off morning tea and I know I'm starving. So can you dance for five minutes or walk in there for five minutes? Let's see I don't know if I've got any more slides I think that's it this is a question one. Oh let's thank you very good. Very interesting to see how far the page builders have gone. Yeah yeah it is it's they've definitely come a long way and now I think it's going to be interesting I'm really interested to see how the battle of between page builders and Gutenberg goes. I've got a feeling in the end I think Gutenberg might win out. So the short code you mentioned short codes so is there any one particular one that uses that? No there's a few that use the short codes and that that's probably a legacy from a lot of the earlier page builders but nowadays are getting smarter so I think a lot of them will probably change over to the different ways maybe but yeah it's you need to sort of look into each page builder and make sure you're getting something that's going to work and usually if you check the you know the forums and just Google you know how the best lightweight page builders you'll get some good answers that way. Nice nice I'm nice to see a little WP elevation mentioned there as well. Yeah I love WP elevation it's I always talk about Troy and his team because they do an amazing job so if anybody is out there who's starting out with web design and needs that extra bit of help I can highly recommend them.