In this video, I'm going to explain thebasics of Elementor. And I'm going to showyou how it works inside of WordPress. It's important tounderstand how Elementor, your theme, and WordPress works together. Otherwise, you're goingto spend a lot of time trying to figure outit all by yourself like I did. So, let's get started. What do we needto understand? The difference betweenElementor for free and Elementor Pro. Why you need a theme and what WordPress does. To simplify it, a website is nothingmore than a few pages that are connectedwith each other. A page consists of a menu with a logo andsome menu items, the content of the page, and the footer. The menu and footerappear on all pages and the contentwithin those pages is different on all pages. So, to edit these pages, you will need to go to thebackend of WordPress.
WordPress is the interfacewhere all of your pages are, your plugins, your theme,and your settings, which you can onlysee when you log in. So, back in the days, you would download a themesomewhere on the internet, which would give youa lot of options to edit your pages, yourmenu, and your footer. For every page, you would go to aspecific edit page where you could play around with the settingsof that page. Then you would save it and check if your changesworked out on the live page. This meant that you hadto go back and forth all the time to see if it workedout in the way you wanted. Also, all of the themeshad different options, but no theme hadall the options. So, often times, you would stumble uponlimitations of that theme, and you wouldneed custom code to get the pagethat you want. This was how Elementorworked for years.
But then, somethingnew hit the market, the page builderslike Elementor. With a page builder, youcan skip the edit page and go straightto the live page. You will get a sidebarwith different options and you can drag anddrop different elements on the page.
This means that youdon't need to use the difficult editpage anymore. And build up yourpages super-fast with an experience that'ssimilar to a design tool. The only reason you willstill need your theme is to run Elementor, because Elementor cannotrun without a theme. And you will need your theme to edit your menuand your footer. So, let's buildour first page. So, here I am on the freeversion of Elementor on a blank new page and I can justdrag the elements out of Elementor on my website. So, for example, I canjust drag a video on a canvas and then, I can place a YouTube link in here and I just have avideo on my website. Or for example, if I click here, I can add a title super easy and I can typethe title here. This is a title.
I can drag a button and make it link to awebsite that I want. Things like an image gallery, a progress bar, or for example,a testimonial, where you can changethe photo, the text, and everything about it. And then, if I justclick publish, the website is savedand this page is live. And if you haveno inspiration for what to put on your page, they have these templates. And these are fullydesigned templates that you can click on toget some inspiration. And what's even better isthat you can insert them. So, if you have a template that's similar to thewebsite you want to create, you just click on insert. And then, this whole pageis inserted into your page and then, you canchange that page. So, let's just trythat for now. Let's insert this page. Now, I need to zoomout a little bit because my screenis too small. But now, this whole page is inserted into my page and I can just changethe text in here. So, for example,featured courses and if I then click update, this page is also live.
So, this is super cool. But for people who want to make their own design, and don't want to rely on adesign from somebody else. They also havesomething great and that's called blocks. So, that's whatyou find here. And with this blocks you can build up apage really fast because these are the blocks, the sections on every page. So, let's say you want tobuild your own portfolio. So, you've madea little sketch just on paper withthe first section and you want a big videoin the background here, you want some text then, you want yourservices section, and you want threeparts here. And then, you maybewant an image gallery for your work. And then, maybe you wantsome contact information with a map. So, let's say this iswhat you want to build. And this is where thecategories come in. So, they already have the most common categorieshere in the block. So, if you click on hero, that's like the uppersection of your website. You can already insert something like we'vesketched on paper. For example, let me zoom out,something like this. And then you can replacethis image background with a video. So, now, if you want toadd our services block we just go to services because they alsohave a services tab. And then, youwill be like oh, this section lookslike what I want. So, you insert that. And then, you haveyour services section. Maybe you just want one row. So, you delete this one, super easy. Now, we're going to add our portfolio section.
They also have aportfolio section. So, for example, check out my work. Something like this. Boom! You have your portfolio. Now, at last we wanta contact place. So, something like this, which I've sketched on paper. And there you have it, there's your contactsection, all right. So, this is, thisis super cool. Now, you have all thoseblocks on top of each other. But now, of course, youwant to change the design to your fonts andyour colors. So, let's justsay for example, we want to change this title. So, we click on the title andthen there's the style tab, and within thestyle tab we can super easy change the color, for example, right. Or we can changethe font size because we thinkit's too big. We can even changethe font itself. So, I'll make itsomething like this.
Or the font that I use. And now, this looks already a little bit more unique. But now, I havemy other titles. And they've madeit really easy, this also is so cool. They have copy and paste. So, if you click, right click on the title, you click copy, you go up, you go to another title. And you click, right click, and you click paste style, is copying the style. So, that makesit really fast and really easy tochange the whole page in like, 10 seconds, right. So, if you paste this style, now you see it'smiddle aligned because this text isalso middle aligned. So, if it's left alignedyou can click here and then, you justclick on alignment and then it's left. Super easy, super fast, and if you clicksave it's live. Now, we have justdesigned a simple page that you can saveand it's live. This works great forsimple websites that don't change. But often times, a website is more thanjust a few static pages. Most websites have sectionsthat change a lot. For example, a blogwith blog posts. Or a web-shop with productpages and search results. If you have justElementor for free you would still need atheme to edit those pages, with of coursethe limitations. So, if you alsowant to design those dynamic pageson your website, you will need Elementor Pro. Also, with Elementor Pro you can design yourown menu and footer. So, as you can see here you can design theheader, the footer, your blog items. What's also a nice benefitabout Elementor Pro is that they have a lotmore templates, right. Because as you can see, a lot of those blocksare only available when you buy Pro. So, for example,on these pages, you will see thisfirst five are free, but then, a lot of themhave this Pro icon. So, if you want all thetemplates that they provide you would also need Pro. Also, they will give you alot more widget, right. Because this ispretty limited. It's already super nice, which you can do withthe free version. But for example, I'm here on a website whereElementor Pro is installed.
You would have thisnew section, right. So, you could add sliders, you could add an extranavigation menu, you can insert a form, your own contact form. And most importantly, you can insert your blog post and design them yourself. And also, when you'redesigning bigger websites, you will have alot of elements that are the sameon every page. And if you only havethe free version and something changes, you would need to changeevery page manually. And that's not a reallynice experience. So, that's whyin Pro they have this thing called template. So, if you think like,okay, this part I'm going to use on all the pages on my website. You can click on it and click on saveas a template. And then, if you change somethinginside of the template it will change on allthe pages, right. So, if you're buildingbigger websites you would want thattemplate feature, trust me. And what's also really greatabout the Pro version is that they havea role manager. And role managerallows you to limit what the client can do. So, if you're workingfor a client and you want them toedit the text only, but not mess up your design, they have a roll manager. So, for example, you adda user, a vapor user and you give them their ownemail and their own login.
You can say they canonly edit the content. And then they can only editthe text and the images. And if you give them you know, all access, they can just mess upyour whole website and you need to start over. So, that's also areally nice feature if you're workingwith clients. So, if you wantto get started the download linkfor Elementor free is in the description. I've also put the linkfor Elementor Pro and there's also arecommendation for hosting if you don't havehosting yet. I will make a video very soon on how to install Elementor and WordPress onyour hosting. So, if you don'tknow how to do that you should waitfor that video. But chances are thevideos is already live when you're watching this.So, check the description. All right, thanks so much and see you next week.
Web Design and Development
Post a Comment