In this WordPress tutorial we’re going to learn the basics of Elementor. Elementor is a drag-and-drop page builder plugin for WordPress. It’s completely visual and it allows you to design and customize your website easily, even if you don’t have any coding knowledge. With Elementor, you can create stunning web pages with just a few clicks
Table Of Contents
Intro – 00:00
Elementor Basics – 00:33
Using Elementor With Starter Templates – 07:00
EXCLUSIVE WORDPRESS DEALS 2023
🟡 SureCart — https://www.wpcrafter.com/surecart (SAVE 50% Auto Applied)
🟡 SureMembers — https://www.wpcrafter.com/suremembers (SAVE 50% Auto Applied)
🟡 Presto Player — https://www.wpcrafter.com/prestoplayer (SAVE 33% Auto Applied)
🟡 Astra Theme — https://www.wpcrafter.com/astra (SAVE 10% Coupon WPCRAFTER)
🟡 CartFlows — https://www.wpcrafter.com/cartflows (SAVE 40% Auto Applied)
🟡 Cloudways — https://www.wpcrafter.com/cloudways (SAVE 20% Coupon WPCRAFTER)
🟡 BuddyBoss — https://www.wpcrafter.com/buddyboss (SAVE 10%)
* Want to offer a discount to WPCrafter subscribers, contact me on my website
BEST WORDPRESS PAGE BUILDERS
🟡 Spectra — https://www.wpcrafter.com/spectra
🟡 Elementor — https://www.wpcrafter.com/elementor
🟡 Beaver Builder — https://www.wpcrafter.com/beaverbuilder
🟡 Divi — https://www.wpcrafter.com/divi (SAVE 20%)
BEST WORDPRESS HOSTING
🟡 Full List — https://www.wpcrafter.com/hosting
🟡 Cloudways — https://www.wpcrafter.com/cloudways (SAVE 20% Coupon WPCRAFTER)
🟡 Hostinger — https://www.wpcrafter.com/hostinger (SAVE 75%)
🟡 NameHero — https://www.wpcrafter.com/namehero (SAVE 70%)
🟡 SiteGround — https://www.wpcrafter.com/siteground (SAVE 70%)
CONTACT WPCRAFTER
☑ Website — https://www.wpcrafter.com
☑ Facebook Group — https://www.facebook.com/groups/wpcrafter
☑ Twitter — https://twitter.com/wpcrafter
☑ Twitter — https://twitter.com/adampreiser
All of the opinions expressed in this video are my own, I was not paid to make this video. Whenever there is a link in any of my videos, if there is a referral program available, please assume that you are clicking on a referral link.
Elementor what is it and why should you Care well basically Elementor is a drag And drop page builder for WordPress it's Completely Visual and it allows you to Design and create websites even if you Have no prior coding experience or Knowledge so this whole video is just Going to be like a quick getting started Guide for Elementor and how you can use Elementor with starter templates to get A beautiful website up and running in Just a few clicks and honestly I'm Willing to bet we could get this done in Under 10 minutes so let's put 10 minutes On the timer Let's get started and see if we can do The Elementor quick start guide in less Than 10 minutes alright so let's get Started with using Elementor the first Step is to install the Elementor plugin Onto your WordPress website how are you Going to do that well you're going to Head to the plugin section of your WordPress dashboard click add new and Search for Elementor once you find it Click install and then click activate You don't need to make an account or Anything if you're only going to be Using the free version next I'm actually Going to recommend installing the Starter templates plugin it's used on Nearly 2 million websites because it Provides hundreds of one-click templates That you can use for absolutely free
Once that's installed you will have a Vast collection of professionally Designed templates at your disposal it's A really good way to jump start your Website's look and feel if you don't Exactly know what you're going for Alright so now that we have everything Set up let's start editing within Elementor you have two options to access The Elementor editor either click the Edit with Elementor button in the WordPress admin bar or you can go to Pages in The WordPress dashboard choose The page you want to edit and then click Edit with Elementor now once you're in The Elementor editor you might notice a Prompt to turn on flexbox flexbox is a Feature that enhances the layout options That you have within Elementor click That link turn it on keep in mind that This may be enabled by default in the Future but at the time of recording this It's not so just make sure to turn it on And you'll find this in the experimental Features menu this is something you're Going to want to keep an eye on these Features often introduce either new Functionalities or enhancements that can Help you take your website to the next Level so while they may be in their Experimental phase they can provide Interesting opportunities for you and Your website so it might be something Worth checking in on every now and again
Now before we start editing the page Let's talk about containers you might Know them if you've used this before as Sections but basically a container is a Section of your page that holds content Widgets are the building blocks of your Page they can be anything from text Blocks to images buttons or even complex Elements like forms or galleries now in Elementor or widgets are the drag and Drop building blocks that will allow you To add and customize different elements To your page there are a ton of them to Experiment and play around with but the Most important I think are the header Container button text and image with These building blocks you can build Pretty much any site that you come Across online in your day-to-day the Container widget almost acts like the House that all the other widgets live in It helps organize and group different Sections of your web page so by Adjusting the container settings like Background color padding or margin you Can control the overall appearance and Spacing of the content within it and by The way if you don't know what padding In margin are don't worry I'll explain That in just a minute now the button Widget allows you to create interactive Buttons on your web page you can Customize its text style size and colors Or add actions and links to it buttons
Like this are commonly used for calls to Action like sign up learn more buy now Things like that that are geared to Guide users towards specific actions now The text widget enables you to add and Format text content on your web page Through this you can customize the font Size color alignment and any other text Properties using the text widget Settings you're going to use this for Things like paragraphs lists and any Other text that you need on your design Now the image widget allows you to Insert and customize images on your web Page you can do this by either uploading Images from your computer or choose from The media library the image widget Provides options for controlling the Image's size alignment borders and all The other visual aspects of it now if You're a photographer this would be Useful for showing your pictures a Graphic designer your illustrations or Your logo work or if you run an E-commerce store then it could be useful For showing product photos now to use These widgets within Elementor You're Simply going to drag and drop them from The widget panel onto the container Within the Elementor editor or I guess Into after that you can customize their Settings including like I said the text The style the layout and the Interactivity using everything that
You're going to find on the left panel Elementor's controls and options for Each widget are pretty intuitive so I Think you'll get the hang of it pretty Quickly but now that you have the basics Done let's explore the editing options Within Elementor on the left panel You'll find the editing options for each Element when you select a container You'll see the edit container tab which Provides options for layout style and Advanced settings you're going to want To take some time to familiarize Yourself with these settings because This is what allows you to customize the Appearance and the interactions and Behaviors of everything within each Container under the layout tab you can Choose between boxed or full width Designs you can adjust the spacing in Style tab you can fine tune the visual Aspects such as the colors fonts and Backgrounds that you'll see on your web Page and in the advanced tab you have Additional options for the more advanced Users like padding and margin I told you We'd come back to it so what exactly is Padding and margin so imagine your Content is like a picture frame padding Is the matting that goes inside the Frame creating space between the picture Which is your content and the frame's Edges which is your container it adds Breathing room to make sure that the
Picture doesn't touch the frame directly On the other hand margin is like the Empty space on the wall that surrounds The frame itself it defines how much Space there is between the frame or your Container and other objects nearby it Helps give the design balance and Prevent it from feeling too crowded Alright let's talk about responsiveness Elementor provides a responsive mode That allows you to preview and adjust Your design for different devices it's Essential to ensure that your website Looks great on mobile tablets and Desktops so don't forget to test your Design in responsive mode before Publishing and speaking of things to Remember remember to save your changes Regularly by clicking the update button To ensure that your progress is saved if You want to see how your website looks To visitors you can use the preview Button to get a glimpse of the final Result before publishing lastly let's Talk about the history and the nav Feature so first of all history Elementor keeps track of your editing History it allows you to undo and redo Changes as needed it's helpful if you Make a mistake or if you're trying to Backtrack to a previous design State Maybe you got carried away changing Colors and now you just want it all Undone you can find that within your
History and click it and you're good to Go now in that bar you're going to find Right down here I like to drag that all The way over to the right and pin it There so that I can always see it now it Looks empty right here but as you fill Up a page you'll see that it kind of Follows the natural hierarchy of the Website it just makes it easier for you To navigate and find different elements Within your website that you're trying To fix or edit or change now I'm going To take everything I just talked about Bring it into a starter template and Show you how easy it is with these Building blocks as a foundation to build Out your own custom website using Elementor and starter templates alright So here we are in our WordPress Dashboard the first thing we're going to Do is go to our installed plugins we're Going to go to starter templates and I'm Going to pick love nature there's a ton Of really well designed like more Niche Down Templates that you can choose from like This web designer one this fashion Portfolio one this politician one but I Find that nature is kind of the best Neutral starting point that you can take In whatever Direction you want So you can upload your logo here if you Want to I'm going to show you how to do That later along with changing all of
These uh Global colors so Skip and Continue you can like I said change your Global colors here but I'm going to show You how to do that later Submit and build my website And there we go it took 12 seconds but Now we have this whole website so we're Going to view And here we are All right now let's show you how to Customize this website so we're going to Go up here to edit with Elementor so the First thing I'm going to do is just Change the pictures and the text I'm not Going to change the button color right Now because I'm going to show you how to Do that globally later so if I wanted to Change this background I'm going to Click these dots I'm going to go to Style And I'm going to go to let's do a Slideshow so I'm going to add images now I already have all of my images uploaded But if you wanted to do that you would Just drag and drop them here or select Files through this So let's pick some ones that I know are Wider shots like that that that and that Create new gallery and let's see do I Like the order that this is in yeah it's A good order insert So here it is now this is going to be my Background I like to keep it on infinite Loop just so that way like when it hits
The last one it's gonna go back to the First one uh duration is in milliseconds So this is going to be about five Seconds I'm going to change that to Let's do three and a half seconds I like the fade transition as far as Background size goes you can change it I Think it looks best on default And background position you can change It to Center Center left but I'm going To keep it on default for there as well Ken Burns is like a slow Zoom so if you Turn that on you'll see it kind of Zooms In you can change it to zoom out if you Want I like the zoom in effects now the Only other thing I want to do Is background overlaying because I want To put Just want to make it a little bit darker So that the text Pops a little bit more And you can see as you drag it it's Going to make it you know you're just Changing it's basically a layer of black That you put over and then you're Changing the opacity right so I want to make it just a little bit Darker so that the text really pops Perfect [Music] All right so now I'm going to change the Text so let's just say let's delete that And just do like And then you can change this I'm just Gonna delete that and so here we have
This now what I don't like is how close It is to the top so I'm just going to Put a spacer in there Foreign To be more fitting too what it is that I Do if you wanted this to be a little Thinner you would go to edit container And then the minimum height You can adjust from there and if you Wanted to move any of the content this Is how you would do it I'm going to keep it at how it was so Now if we go down to this section again You could change this to say like what I Do And let's say I'm going to change this Picture with that Change that one That Change that one With that now one thing to keep in mind Is that because I took all of these Photos I was able to crop them all the Same way so if you're sourcing photos if You hire a photographer or you hire a Graphic designer it's important to make Sure that they are all the same size Otherwise you know if this one's really Small and a rectangle but this one is a Tall rectangle and this one's just a Square it's it's going to look bad so Then we'll go down here change this and Say like Light photography music videos
And content creation we can keep that so Now we have this testimonial page and You'll see again it's all very much the Same right once you understand the Building blocks of it everything kind of Falls into place so like this this is Just an image you can replace it with Anything you want so if I wanted to Replace it with this headshot for some Reason I could now I can either hit Ctrl Z to Undo that or I can go into history Click that and it's good so maybe if you Have like an email from a client Thanking you or just like a review that You have on Google you can copy that Paste that here so this is an about Section so actually this is a perfect Opportunity so if I go here to choose Image I can upload files select files And I should have a photo in here yep Select boom there it is you can change This to fit you fit whatever your Business is if we go to find out more This is likely going to link us to the About section so actually in Elementor If you go to link on the button and you Just type about Should find the about page and then you Can change the alignment of the button I Like it to the left and then we're just Going to click update to save that and There it is so same thing down here if I Want to change the background I'm going
To right click edit container and for This one I actually want to do a video So we're going to click video and then I Have a video link And there it is and then same thing Background overlay I just want to make It A little darker so that the text really Pops off of it when I make it white and There it is that's pretty much how you Can customize your whole website using Elementor now the only things that you Can't edit within Elementor are your Header and your Footers now once you're Back in your dashboard you're going to Go to appearances and customize so to Edit your header you're going to go to Your header Builder And these are the components that make Up the header so if you want to change Your logo you're going to change that Here you can change the button over here So if you wanted that to say like Contact Instead of the phone number and then you Could link that to either the telephone Or you can link it to another page so Like so then you just have to get the Link to the contact page paste that There easy so that's where you go to Change like your logo and this header And in addition to the header this is Also where you will build the footer Which is right down here and then if you
Go to Global and then colors so if I Want to take this yellow and say make it Red There you go and then you'll notice once You hover it still turns to the other Yellow so that's this So we'll just take that and make it a Darker red And you'll notice as you go through the Website everything that was that yellow Color is now going to be this new red Color and that'll be Universal through The whole website and then the last Thing I want to go over is just Responsiveness so if we go back to our Home page edit with Elementor All right so if we remember we're going To go down here click responsive mode so We are currently in desktop so let's go To tablet [Music] Scroll down everything looks not so good So we know now that we have to edit this In tablet so that if somebody looks at This on tablet it doesn't look like this So we're just gonna Drag that out And much better Down [Music] And change this change it using one of The global colors as well All right now I have a feeling because That looked a little odd on tablet it's
Going to look odd on mobile so let's Scrolling down same old same old that Looks perfectly fine on mobile but That's the importance of checking right Because if it looks fine on mobile and It looks fine on desktop doesn't mean It's going to look great on tablets so For the sake of keeping this just down To a quick start guide that is how you Will check for mobile responsiveness and There it is that is how you build a Website using Elementor and starter Templates it took what 15 minutes maybe to record then that's With me stuttering and accidentally Messing up what I'm trying to say so There is not a doubt in my mind that you Can do this in under 10 minutes once you Have the basics down and again as you Saw everything is the same building Blocks and it's all click and drag you See exactly what you're gonna get as you Do it this is to me the easiest way to Build a professional and beautiful Looking website with no coding knowledge Or experience so thank you so much for Watching this video I hope it helped if You want to see anything else in terms Of Elementor tutorials let us know down In the comments below subscribe if you Haven't already leave the video a like And I will see you in the next one Foreign [Music]
Thank you
