 Please welcome Jason Oriana, Page Builder Magic. My name is Jason Oriana. I'm a WordPress developer working in my own agency with my lovely wife Josie. I'm here to talk to you today about using Page Builders to make beautiful websites. Especially my favorite one, Elementor. That's the one that I'm going to be demonstrating. I'm going to give you some of the pros and cons of using Page Builders. Despite some of these cons, why I think Page Builders are still magic. Okay, so let me, I know they already introduced me, but again, I graduated from ITT. I've been doing WordPress since 2016 and I started my business in 2017. That's it in a nutshell. So what is a Page Builder? A Page Builder is a tool that facilitates web development by allowing you to grab blocks or elements such as images, headings, paragraphs, lists and what have you. It lets you grab these blocks and put them more or less wherever you want on a page to form a final website without having to write any code. And that's what I think the main advantage is you don't have to write any code. So why use a Page Builder? Because it is easy to use. Because it's easy to use and also it's highly customizable. You're able to create unique designs without having to code and it's very efficient. You don't have to keep going back and forth between tabs. You don't have to refresh browsers. You don't have to write code in a separate file. It's very efficient. So in order to show you a little bit... So the new WordPress editor, Gutenberg, it's considered a block editor. So it shares a lot of similarities with Page Builders. But there's a lot of differences. I actually stole some blocks from my kids to show you an example. So if you were to build a website right now, you would typically start with a banner or hero section. And that would usually have maybe a picture and then some text. And then under that you might have maybe a couple of paragraphs maybe or a headline and a paragraph. And depending on your theme or your preferences, you might have a sidebar. Both the Gutenberg editor and the Page Builders allow you to easily add like... Let's say if you wanted to add a two column row. For example, let's say you had an image and some text that you wanted to put in. That would be very easy to do with a Page Builder and with Gutenberg. And it's also very easy to rearrange the order of things. So if you wanted to drop one of the paragraphs down, it's very easy to just move them around. You just move the blocks around. And if you prefer, you could even move the sidebar to the other side. That wouldn't be too hard. Boy, I think I got the wrong file. So that's kind of where a lot of the similarities end. If you were to look at the Gutenberg editor on the back end. To build that example, the website that I just had, the blocks. You might have the title and the featured image right here on the right hand side. And both of those together would make the banner. And you can see the other elements, the paragraph, the two column row. That's my daughter, by the way. And then another row on the bottom. So one of the things you can't see right here is the header. You can't see the header. You can't see the sidebar. And you can't see some of the styling, right? So this is what it might look like on the front end. It looks very different than what it looks like on the back end if you were to build this. If you were to use a Page Builder instead. If I was to scroll down a little bit, you would actually be able to see the header. You can see your blocks that you're working with. Anytime you want to adjust something, you just adjust it on the right hand side. This is an example of Elementor, which is the one that I'm using. And if you were to actually go right here. If you wanted to, say for example, increase the spacing between the blocks. Or if you wanted to stagger the blocks. Or if you wanted to make one of the blocks round. How would you accomplish this right here, right? Sometimes you have a few options right here. It's a little bit limited, but sometimes you have options here. If you know how to code, you can go into the Customizer and edit the CSS yourself. And make some of these changes yourself. But if you're a beginner and you don't know how to code. Or if you're worried about having a typo in your code. Or if you're worried about forgetting a semi-colon or something like that. That happens all the time. You might be better off using a page builder. And this is what it might look like. Like say if you wanted to give an effect to the banner. It's very easy to just click on the banner. And do some effects right there on the left hand side. You can very easily add spacing between the columns without writing any code. You can make the picture round. You can stagger the columns. Make them overlap. You can add styling. When I first started, or actually before I started using WordPress. I almost didn't want to use WordPress. Because a lot of the sites that I saw that were built using WordPress. They looked a very cookie cutter to me. And that's not what I wanted. I wanted to build unique websites. Sites that would impress people. And I think this is a tool that really facilitates that. It makes it easy to create a round picture. A round block makes it's not a big deal. It's not hard to code. But if you can do it easier. I mean that's it's efficiency right? I'm going to go into some examples of how to use a page builder in a little bit. But first I want to go through some of the pros and cons. Of using it starting with the biggest pros and cons. The right design can really help you accomplish a goal. You can lead customers to where you want them to. You can engage your customers with a good design. And page builders can help you do that. And if you have customers that are engaged. That stay on your page longer. Then it can positively affect your SEO. On the other hand the main negative part about using page builders. Is that they add weight to your page. It's a bigger file that has to be downloaded. If you're on a desktop and you have a good connection. It's not a problem usually. But if you're on a mobile phone. Or you have a bad connection. You can have a higher bounce rate. That can affect SEO. Theme integration. According to the page builders. They claim that they work with any theme. But in reality sometimes there's PHP errors. Sometimes you have layout issues where the margins are off. And sometimes you have loading issues. Sometimes pages don't load correctly. And if you go to Google. And you ask Google what works best. What themes work best with page builders. You can get many good answers. I use Astra myself. But I've also used Ocean WP and Generate Press. And those are good themes to use with page builders. Let's see. Customer handoff. Sometimes you might have a customer that wants to be able to edit their own work. And the advantage to a page builder sometimes is that they're easy to use. So if your customer wanted to learn how to use a page builder. And wanted to edit themselves. It would be very easy to do. There's a lot of YouTube videos online that you can find. And it'll help your customer. But on the other side. If you're handing off to your customer. They might end up using Comic Sans fonts. And you might have all the spacing thrown off. So a few months down the road. After you hand it off. You might not even recognize that as your own work. If you're handing off. So I really would recommend if you're handing off to the customer. That wants to edit their own work. That you use a Gutenberg editor instead. And try to not have too many options for customers. Design. Page builders can help you design in the browser. So because you can see your changes live. And because you can manipulate it. And you can position things wherever you want. You can design in the browser. Instead of having to sometimes use Photoshop. Or other tools that might help you with design. You can see your changes live. You can see what they would look like on desktop. Tablet and mobile views with a push of a button. It's very easy. So you don't always need a designer. You can download templates. If you want a quick start. You can always download a template online. And just change the image and the words. It's very easy to do. Or if you've already created a webpage that you like. On another site. You can actually download the template. And use it on that site. Or on other sites as well. But designers. They're there for a reason. They can make your product better. They can help you with product engagement. So it's actually good to have someone who knows what they're doing sometimes. And same thing with development. You don't need to know how to code. To use a page builder. That's one of the main advantages of it. You don't have to code CSS. You don't have the errors. Like I said. If you forget semicolons or something. That's also a disadvantage. That you don't need to know how to code. If you're going to be building websites for a living. You should eventually learn how to code. And your friendly neighborhood web developer needs to eat. So don't cut them out. The timing is not right in the slides. But you get it. Competition. There's a lot of competition between the page builders. Elementor, Divi, Beaver Builder, Visual Composer. I'm using Elementor. But these are other great options. And there's more. I think there was Thrive or something. And they're constantly competing with each other. Because they want you to use them. So they give you a lot of features. They constantly keep adding features. Which can be a disadvantage. Because there's almost daily updates sometimes. And sometimes when the customers have too many options. Or when the designer or developer has too many options. Sometimes they tend to use it or overuse it. And you want to keep things simple sometimes. Alright. My next slide. So when you're using page builders. You can make beautiful designs. And you can impress. It's a good among your peers. Other designers, developers. You can impress them by your product. The way it looks. It's a beautiful page. But like for example. I was at a meet up recently. And one developer said to another developer. That he used a page builder. To make a website. And the other developer said. That he felt. That if you use a page builder. You are not a real developer. Alright. So. I mean. You're really not going to satisfy everybody. And if you have a tool. That's going to make you more efficient. You shouldn't be worried too much about. About what other people are saying. Alright. So using a page builder. It's kind of a balancing act. You want to. Whether you should or not. Is a balancing act. On the one hand. You want a good design. On the one hand. You want a good design. And you want to be able to add flair. Right. You want to be able to add flair. And you can sometimes add too much flair. Right. And it comes off as tacky. So it's easy to use. It's highly customizable. So you can do a lot of things. But you want to keep the flair under control. On the other hand. There's performance right. I hope there's no San Antonio Spurs fans in here. But. I find the San Antonio Spurs. The most boring team right. They're extremely boring. But they're effective. They constantly win. I don't know why they didn't show. Easy to use performance right. They're effective. In 1998. The highest rated NBA finals. Was the Chicago Bulls versus the Utah. Utah Jazz right. They had 29 million viewers. The. The San Antonio Spurs in 2007. They played the Cleveland Cavaliers. And they had nine million viewers. That's a 20 million viewer difference right. So even though they're winning. They're a good team. You know they might not be. The best as far as. If you're running a business right. If you're running a business. You want to make money. And that's that would be the ultimate goal. And you're not doing it with this. Even though you're winning right. So. So it's kind of. There's there's a balance between having flair. And. And having speed. So. I'm going to show you show you guys. Had it. Some basics on how to use a page filter. In case you're new to this but. Here's some here's some links. That I had. I'm going to share the. Some of these links and I'm actually missing a link here but. This one in this one in particular talks about. Page speed and and they they recommend you not use page builders. Because because of the speed bottom. There's there's certain things you can do and. I still recommend them because it's an efficiency tool right. I'm going to save the questions for later. Actually. I actually uploaded the wrong slide so I don't have all my sites here. But let me go into an example of how to use a page builder element or. Okay. Sorry I had this ready. I don't know why I disconnected all right. So if you here's your wordpaste dashboard if you wanted to. Oh okay. Mirror duplicate. All right. So here's your wish WordPress dashboard. If you if you wanted to download the web. The page builder you could go to plugins. Let me put this down. Page you guys can hear me right. Page builder so. Okay add new. Sorry. You can go to. Page builder. All right so the first one that comes up is Elementor. I've already installed it but if you hadn't installed it you would just install right here. You install and then activate. So I'm going to activate it right now. Yeah Elementor is free to use. Yeah so so most of these most of these are free to use. They do have pro options but you can start with the free and. And that's an excellent choice. It's you can't go wrong with using free. And there's actually a lot of supplemental plugins that can actually help you do a lot of things that some of the pro versions do. So you don't actually for the most part you don't need to use the pro versions if you use other plugins. So once it's installed you can actually. Oh I forgot. What I wanted to do. Was actually. Duplicate another site. Marvel. And I had this up but I don't know why it disappeared on me. Oops. What I wanted to do is actually duplicate a site because. You want to see. You want to see what it could do and. And we want to. Just make make something that looks looks good right. So I would go to new. Page I'm going to try to build this as fast as possible. There are a few other plugins that I that I can use to. Hopefully extend Elementor. So you can start with the title. I'll call this example. I think I already have other examples here so I'll go with example four. And just hit publish publish. And then you it has an option right there to edit with Elementor right up here. And then it'll take you to another screen where you can actually see the editor. So you can see the header and you can see the footer right here. So you can actually see what it'll look like in the end. You don't have to guess what the whole thing would look like together. If you wanted to add a section you could just click this plus symbol right here. We'll start with one column. These are these are different column sizes right. So you can go with one column two column three column and so on and so forth. I'm going to use a one column right now. And up here where these squares are. That's where you can add like say for example a heading. If we go back to here you can see this has this has text and heading and then more text. So we're going to go text heading more text Bruce Banner. Let's see. You can edit either right there in the editor or you can edit right here on the left hand side. Whichever is easier for you sometimes whatever your preferences are. Oops. I'm going to copy this text and while it's doing that I'm going to... So when you want to style it you can just go right here. Actually since this is the title I would usually put H1 right here. And you could style it right here. You can make it you can change the color real easily. I'm going to make this white because there's a background picture that I'm going to add right now. And typography. I'm going to change the size make it big. And I already uploaded some pictures. So this section right up here controls the whole roll right. There's if you wanted to control the column. This is the column right there to edit the column. If you wanted to control the section. You can click on the section itself the little whatever your block is right there. But right here I want to add an image to the background of the whole roll. So I could go to style background type image. Oh boy. Media library. Oh shoot. I'm actually using the wrong... I'm sorry guys. Let me do this real fast. I'm sorry guys. When the internet went down somehow it closed my page. Sorry. I think I already got this down real fast anyway. So if you go to plugins activate. I had also downloaded a few other plugins. Essential add-ons for Elementor. I'm going to activate that one while I'm here. That has many features that can extend the functionality. And... Oh, it kicked me up. Let me create a new page. Sorry guys. You're good. Example 4. Publish. Publish. Elementor. So I'll go through some of these stuff that I just did real fast. Yeah, there you go. That's a better example because it has the header and the footer. The header that I already styled. I styled the header using the theme. And I got it as close as I could to the Hulk example. Okay. So... Section. I'm going to put this image in right away. So right there you can just choose your image and insert media. You have the position. You have all kinds of options right here and how you want it to look. I want it in the center. You can kind of do a parallax effect if you push fixed. I don't want that right now because they don't have that. But it's a nice feature. Repeat. No repeat. Size. Cover. And I'm going to add a minimum height to this. I don't know why. By default it usually has gaps. And I usually like to take off the gaps. Let's see. Minimum height. I'm going to do a... 45. VH. Add a title. So to style it, let's see. We're going to make this white. It's very easy to change the font size. Go to typography. Let's go 1.3. And one of the nice things you can do when you have... You've already styled. You've already styled one div. Actually copy it. Right click it and copy. And then you can go on the next one and just paste style. And then you can see it's already styled. I'm actually going to add some... Oh yeah. Yeah, let's see. I copied it. Right click to this one right here because I already made the text white. I copied it. And then I highlighted the other paragraph. And right clicked it and... Where it says paste style. I just pasted the style. So it's very easy to be consistent with all your... Like say if you had a bunch of paragraphs, you can very easily apply the same style to all your paragraphs. Let's see. Style. Text color. White. I'm going to add some margin to this on the bottom. So this right here unlink sits so you could have different margins for different sides. Top. Right. Bottom. Dirty. All right. And if you notice this one right here, this text right here only goes like halfway through the screen. It doesn't go the whole length. So I can easily change that. Close this. I can easily change this. I click right here. Custom positioning. I could change the width and custom width. And I could actually choose percentage and put like 50%. So now the... Now it only goes to 50%. Did you have a question? No. Oh, okay. Sorry. All right. I'm going to go ahead and add another row. This time I'm going to add a two column row. And right here I'm going to search for a navigation menu. And I'm going to insert that. And right here you can... I already set up this menu in the customizer in the theme. So you could actually just from the dropdown choose your menu. And like I said previously, sometimes you do need to know how to code a little bit just because there are certain limitations to even page builders. So I had already added some code in here. So if you already have... If you want to add custom codes, you could still put it in the customizer and then just add your classes here. I'm going to add a class character. And you can see it's already styled. In this example, this is kind of up here over the banner. So I'm going to give this a negative margin to move it up. Whoops, negative 70. And right here I'm going to add... See there's a lot of tools that you can use. So I could just type in social. And you can see I have social icons that are already pre-made. I did read somewhere that one of the problems with page builders sometimes is that they download other stuff. So sometimes when they download the, like say, Font Awesome and other stuff, it adds a lot of extra weight to the page builders. So I don't know if there's a way around it if you definitely need the icons. It saves time to use these tools. Let's see, I don't want that one. And I don't want the official color. I want custom color. And I'll make this white and this one light gray. By the way, here's another neat thing. Right here in the hamburger menu up there on the top right, you can actually choose the color picker. You can choose colors. Like say if I wanted a red. I could go with FF RGB 0000. And I could apply. And now every time I want to change colors, it appears right there in my menu. So this is going to be for my whole screen. So I could save my colors for the whole webpage. I'm not going to use red, I'm going to use like say one of these. And it works great for positioning. I could position it to the right. And I'm going to give this one a negative margin as well. Negative 50. Negative 40. One thing I did forget to add on the banner. If you see. Oops. Okay. Come on. Go away. Well, I don't know if you could see it, but yeah, this is tilted right here. This is lower than up here. That might be a little bit hard to do. I actually did it on just using the Gutenberg editor and I had to use clip path. But when you do it right here on Elementor, it actually inserts, I believe it's a SVG file, which is SVG I think is pretty performant. Let's see. So I can go right here and I could choose style and a shape divider. And I could put it either on the top or the bottom. And right here I'm going to choose tilt. You can see it has a big tilt right there. I'm going to flip it. And then I could make this not so high, maybe 40. And you know what I'm going to do? I'm going to increase the padding on this. Update. And see this button right here? You can actually, although you can see, you can see what it looks like right here. It doesn't take up the full width. If you wanted to see what it looks like, you can either click here or you can actually load it on its own right there to see the example. And the advantage of this is that every time you hit update right here, this one automatically reloads. So it's looking pretty close. So what I did is I added padding so that I can increase the space right here. And I increased this space right here. So I liked it a little bit better. On the text blocks? No, but the paragraph blocks already come with padding on the bottom. I think that's part of the theme actually. Yeah, they already come with padding on the bottom. So let's... All right, now I'm going to build... I'm not going to put in the add. I'm going to put in this section right here. So now we can add a two column row. Another two column row. And I'm going to add an image. It's right there. And again, for some reason, these sections, the rows come with an extra gap. And I don't like those gaps. I'm using the Astra theme. Astra claims to be a very lightweight. I think they said something like 50 kilobytes or something. It's pretty lightweight. And I think it's used often with Elementor. Let's see. So you can choose your image right here on the left-hand side. And let's see. I'll put Bruce Banner. I'm going to add a heading. And so we want to center it vertically, right? So I would go to the column. And then right here, a vertical line. I can choose middle. Choose middle. And... All right, let's see. I could actually copy this style. Copy. Paste style. Oops, but this is black text. Let's go with that one. And it's... I'm going to leave this just for time's sake. I'm just going to leave that there. And now this section is kind of tricky. The post. When I... I've already created posts in the... using the editor. But if you wanted to import those posts, you can add recent posts. Which is... This is what Elementor comes with by default. But it doesn't have pictures or anything. No images. You don't want that. I actually had to download a different... I downloaded a different plugin called Essential Add-ons for Elementor. And that one comes with a post grid. So you can see the posts are already there. And I want to get through this really fast because I want to do a speed test. And this comes with its own options. Let's see. Color, background, border. Background. Where did it go? Background. Typography. Okay. That was the wrong section. Oh, I don't want my picture there. So you can... It's very easy to customize it. I don't want the excerpt. And I don't want the meta. And I'm going to make this white. Title. Post grid style. Post background color. Yeah, I'm going to make that dark match. All right. So now it kind of matches. It closely matches this website, right? Except for the ads. And you can see this part right here. This is theirs. I could add a title here as well. But what I kind of wanted to show... Jason. So I built this... I had already built the same website. I built it using just a Gutenberg editor. And I had to install a Gutenberg block plugin to make the bottom part right here. So it looks pretty similar as well. What I wanted to do was go to Pingdom. And do a performance test on this. So this is the one that I just built, right? And it is missing the headline right here. The latest news. I already actually built example two right here. So it looks the same, right? So what I want to do is... Shoot. Website performance speed test. Five minutes, okay. GT metrics. It's not out. So this one is just using Gutenberg. And this one is just using... This one is using the Elementor plugin. I'm not sure if I'm going to have time. But anyway, I did the speed test, right? Already on Pingdom and on Google Insights. So you can see that this is using just a Gutenberg. It gets a C71. And this is the one using the page builder. So it gets an A and a D. I'm not sure how that works. Page... Yeah. Yeah, so... Yeah. Greg's a smart guy. So, yeah. If we were looking at the performance test, what would you focus on? The A and the D, for example? I think more the loaded page time. Probably. And... I don't know why it's smaller, this one. Pretty much what it got in the past results was using just Gutenberg is better. It's faster, but it takes a lot longer to code. But it's very... We're talking about like a half a second, right? Half a second, usually. Using page builder is a bigger file and it's about half a second slower. If you optimize it, if you use a plugin, I was going to show you, but I ran out of time. If you install an optimization plugin, you can actually make that better and make it almost equal to the Gutenberg. Or sometimes even better. But... So it's something you have to consider, right? Performance and value. Value, pretty much. Efficiency. How much time are you going to spend on it? I built this in 15 minutes. So it took me a lot longer to build the other one using Gutenberg, just a Gutenberg editor. But if you were building a website where you were selling things, you might want to consider speed a lot because you might have bounce rates. People getting tired of your page loading. But if you're not selling products, maybe it doesn't matter as much. And I actually did a speed test on this page right here. And this one, it got a really low speed test. Of course they're running ads as well, so that might affect it. But it got lower than both of my examples. So that's just FYI. Any questions? Well, I hadn't used GMetrics before, but I used Pindome. And I used Auto Optimization. Sorry, you had to read my mind. Yeah, let's see. I used... And in my slides, I'm going to have one more recommendation. But yeah, there's actually some... Auto Optimize is what I used. Thank you. So I think we have to wrap it. Yes. So we'll open it up for questions. And we have a microphone here for you. Well, what code do you use if you want to learn how to program WordPress? What code do I use? HTML or what code is it? HTML is for anybody on the web, right? HTML is pretty much just the info. CSS is the style. And JavaScript is functionality. So it's kind of a combination, but you obviously... You have to start with HTML because that's the foundation. CSS is the style. CSS is what makes it look good. And... Yeah, JavaScript not as much, but... Yes. Oh, yes. For WordPress, PHP, yes. PHP generates HTML. That's its job. So HTML, they kind of get your feet wet. PHP, they kind of take the next steps. JavaScript. I think I had a question back there. Yeah. So you spent a good deal of time working on that page design in Elementor. Are you able to convert it to a template so that you can reuse the design for another page for another server? Yes. And it's very simple to do that. You just go right here to the bottom and save as template and give it a name. My template. Save. And I was actually going to... If I had time, I was going to fix the header because the header... I wanted to make it look closer to this example, but that's something you can do. Export a template and use it on other websites. Or on the rest of the pages. But, yeah, that's just hit save and then you could download right here. Export. Wordpress and other platforms? Wordpress is its own program. I think what... It's built on PHP and you can use PHP on other platforms. There's competitors to WordPress. But, um... You can use a server for Wordpress and other platforms like Wordpress. You may want to take one of the societies that you share outside and we'll explain the difference of the components. Yeah. Sorry. Thanks. How would you... How easy is it to see what that page would look like in a mobile? Oh, yes. I completely forgot to mention that. I'm sorry. It's very easy to do. You just go right here to this button down here and you can see tablet or mobile. And, yeah, you can... You can see there's a lot of things I need to change. Like, I can make this... I can make this, um... Like the full width instead. And then when you go back here, it's still half... You can make customizations strictly for the mobile and strictly for tablet. Desktop, tablet, and mobile. Yes. It shows a preview level recognition. Yeah, so... Yeah, so you can go, um... 100. Oh, actually, this is pixels. 100%. You can use... You port with pixels or percentage. And you can change. Sorry. We have time for one more question. Website, and it seems that it came with its own builder called Nimble Builder. So if I wanted to use a different page builder, even though I've incorporated that theme, is that possible to add up on here? Uh... According to the page builders, they claim that they can work with any theme. So... So the answer... The short answer is yes. It'll work, but, um... There's... There's sometimes there's PHP error, sometimes there's loading issues and stuff. Um... So the short answer is yes, but it depends. I'm not familiar with that theme, yes. Alright. Let's give them a hand. Thank you, guys.