How To Use Elementor Tutorial - Building Your First Pages

ever wonder how a webpage you like was built in this intro to page building with Elementor you're gonna see how easy it is to create cool pages this is Cassie from Elementor welcome to our first steps tutorial in this tutorial you'll learn the secrets of how a page is built play with editing tools to design your text and images use page templates and create your first stunning section all from scratch I'm gonna walk you through the first steps of page building so let's dive in so we'll begin by adding a new page in your WordPress dashboard under pages add new press edit with Elementor you can also take a shortcut in the WordPress dashboard just click create new page and by the way Elementor works with any theme okay so what are we looking at here on the right side is the editing screen of your site this is your design playground where you can add and edit elements that form the layout of your page and over here on the left side is the Elementor panel here creative tools called widgets you use widgets to add elements to your page like headings paragraphs images and videos you can also search for a specific widget here so when you start building your page keep in mind you can either design the page from scratch by pressing add section and then choosing different structures of columns and then dragging widgets inside these columns from the panel like this or many people opt for our pre-designed templates so let's check them out click Add template now if you scroll down you'll see that we offer over 100 stylishly designed templates if you click on this little magnifying icon here you can preview a template before you add it not the one you're looking for preview another one once you find the one that you want you can just insert it up here on the top right we also offer search so if you know the name of the template you're looking for just look it up and insert it directly to get an idea of the structure of a completed page let's take a closer look at the anatomy of a template now each page in Elementor is comprised of sections now here is a section handle this entire area is a section this is also a section another section and another section and then inside the sections you see you have columns which you can identify by these black dotted lines this is the columns handle here another column and inside the columns you have widgets here's a text widget here you can see there's a video widget inside a column inside the section now the really cool thing is that basically you can move any element around so let's duplicate a section and then let's move it down here and delete it you can do the same for a column go into the columns handle duplicate it drag it over here or you can even drag it into a different section and delete it and then you can do that for the widgets to duplicate drag and delete easy-peasy all right ready to create your first section so add new section now here if you hover over the different structures of columns you can choose if you want four columns three let's start with to see inside our section we have two columns let's start by dragging a heading widget into the left column go back to the menu of widgets now we can drag over a paragraph of text widget into the column and let's drag in a button you can see that you drag in the widgets according to the blue line indicator not where you meant it to be drag it down you can also drag it into another column or drag the widget back okay on this side let's add an image and to choose your image you can either upload a file from your computer and select it here or go into your media library and insert the media but before we design the widgets we're going to adjust the height of the overall section to create some more space and by the way this is explored more in a specific video so let's click the handle here of the section which opens layout style and advanced three tabs that you'll be working with to customize your section so under layout we go into height minimum height and here you can toggle the amount of height your section has you can also choose a specific number here or just type it in let's try five hundred and let's also set our content position to the middle now to get a sense of the space of our section let's also give a section of background color so let's go to the style and then click on the paintbrush and here you can choose a color so you see this is our entire section right now you can make it green black let's make it baby pink now you can also give a background color to your column you click on the handle which opens layout style and advanced again go to style click on the paintbrush choose color so here we're giving color to the column and let's remove it alright so now we can go back and tweak our widgets so let's click the headline widget handle which opens three tabs content style and advanced here we can set the alignment to the center to the right or to the left okay let's continue to customize our headline widget so click on the handle of the headline which opens content style and advanced the three tabs for your headline widget now remember that actually the section or column if you click on their handle it opens layout style and advanced in general when you're searching for design options look under content for text editing under style for colors fonts and most things that you'll need and then Advanced Options for spacing and other advanced options so click on the widgets handle this blue pencil here to open the three tabs in the panel to design it you can also just type your headline text directly on the screen like that and then under style we can give the text some color and under typography we can change the font style and we can also adjust the size here you can also type in the number directly there are some other parameters here that you can play around with just check it out on your own or you can reset back to the default settings if you need to and you can do the same for the text widget under style you can change its text color and all these typography parameters now let's design another widget this time the button click on its handle to open its panel you can also just type directly on the screen you can align the button to the center or to the right let's keep it left and here you can also adjust the size if you want under style you can change the typography and its size and those other parameters that you have for the headline and text widgets you can change the text color and the background color woohoo you built your first section Congrats if you want to see what it looks like live just click on this arrow here oh and don't worry your work is saved automatically if you want to publish it and see your live site click the green Update button down here on the bottom right of the panel wanna see what it looks like on mobile then check it out in responsive mode here we're in the desktop you can see what it looks like on the tablet or mobile and throughout the panel you can find responsive editing tools you can just keep an eye out for the mobile icon you can find it in many widgets for example here in your headline widget if you go under style and typography when you're tweaking the size of your font if you just click here under size it opens up three different options desktop tablet and mobile now you can see what it looks like on your mobile or return to desktop also in the bottom panel the circular arrow icon takes you to your history now the history is divided into actions and revisions in actions you can retrace your steps you can click to return to an earlier edit as an alternative to using ctrl or command Z to undo and then under revisions you'll find all your saved versions it auto saves after every change so we see that every page is made up of sections and this is the basis of page building with Elementor try out different widgets from the panel you can press the dial key pad here to get into the menu of the widgets so generally we've covered most of the interface one last item in the panel is the hamburger icon it brings you to a menu of advanced configurations these options relate to the entire website and not to individual pages here you can set global defaults for fonts colors etc or exit to the dashboard more details in another tutorial thanks for joining me for the first steps to page building with Elementor in the next video I'll go into more details about creating more complex sections and pages we publish videos weekly to become a professional subscribe to this channel

Channel: Elementor Website Builder for WordPress

Views: 308,964

Rating: 4.8877401 out of 5

Keywords: Getting Started, Overview, How To Use Elementor, Elementor for Wordpress

Id: 43j6h3oCm0U

Length: 11min 21sec (681 seconds)

Published: Wed Feb 21 2018