{"id":1890,"date":"2021-06-20T14:15:43","date_gmt":"2021-06-20T14:15:43","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=1890"},"modified":"2023-02-22T09:44:03","modified_gmt":"2023-02-22T09:44:03","slug":"create-your-first-landing-page-with-elementor-pro","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/create-your-first-landing-page-with-elementor-pro\/","title":{"rendered":"Create Your First Landing Page With Elementor Pro"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1890\" class=\"elementor elementor-1890\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6e66256b elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6e66256b\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-28100b2c\" data-id=\"28100b2c\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-129772a1 elementor-widget elementor-widget-video\" data-id=\"129772a1\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=Nap76tM6ToM&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-439f54bc elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"439f54bc\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3511f035\" data-id=\"3511f035\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7d55c38 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"7d55c38\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1311\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1311\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1312\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1312\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1311\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1311\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1311\" tabindex=\"0\" hidden=\"false\"><p>Welcome to the Elementor Basics Webinar. This Webinar will give you a basic breakdown of Elementor Pro and show you how to use it to design, build and publish your own Pro Landing Pages!<\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1312\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1312\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1312\" tabindex=\"0\" hidden=\"hidden\"><p>hi and welcome to elemental probe basic<br \/>webinar my name is Eve and I&#8217;m a web<br \/>designer and lead educator here at<br \/>elemental and I&#8217;m really excited to help<br \/>you use the Internet&#8217;s leading WordPress<br \/>drag-and-drop site builder elemental<br \/>this webinar will give you a basic<br \/>breakdown of some of elemental pros<br \/>abilities by showing you how we used it<br \/>to design the landing page for this<br \/>specific webinar okay so these skills<br \/>can also be applied to create attractive<br \/>landing pages for your own businesses to<br \/>help convert potential customers such as<br \/>the hospitality industry restaurants<br \/>software as a service companies gyms<br \/>ecommerce and a lot more so I&#8217;ll go<br \/>ahead and share my screen with you so<br \/>you can see the landing page that we&#8217;ll<br \/>be creating today there we go okay so<br \/>this is the landing page that we&#8217;re<br \/>going to be creating today I&#8217;ll just<br \/>scroll down back up so what exactly is a<br \/>landing page first of all a landing page<br \/>is a page on your site that visitors<br \/>arrive on via some kind of advertising<br \/>it could be via Facebook it could be a<br \/>Google search it could be a link in an<br \/>email and the page this has got a<br \/>specific purpose okay so the purpose is<br \/>to convert visitors into leads by taking<br \/>a specific action and in our example<br \/>over here the purpose of the page is to<br \/>convince the visitor<br \/>you\u00f5ll everywhere around the world to<br \/>save a seat for this amazing webinar so<br \/>as you can see over here we&#8217;ve got CTS<br \/>call to actions to save the seat when we<br \/>click on it you automatically scroll<br \/>down to the last section here to fill in<br \/>the form and to save the seat here we<br \/>have some interesting custom positioned<br \/>images with some motion effects to grab<br \/>the attention and in the middle over<br \/>here we have six takeaways that you&#8217;ll<br \/>get from attending the webinar to<br \/>convince you that it&#8217;s great to join<br \/>this webinar so and a mentor is the<br \/>perfect tool to help you create<br \/>adding pages if you don&#8217;t know I&#8217;ll just<br \/>give you a brief overview of what<br \/>Elementor is if you know it will take<br \/>about two minutes it&#8217;s an advanced page<br \/>builder it allows you to build entire<br \/>websites page by page with your own<br \/>custom design let&#8217;s drag and drop<br \/>meaning that you work directly on the<br \/>page you see the result in real time<br \/>exactly the way that the website wizard<br \/>visitors would see it there are many<br \/>advantages in using elemental Pro such<br \/>as saving time and development costs<br \/>with access to over 50 plus pro widgets<br \/>and Counting 300 Pro templates that are<br \/>also we creating more and more template<br \/>kits full websites that help you design<br \/>and build faster without using code also<br \/>to help boost your landing page<br \/>conversions with elemental pros<br \/>marketing and conversion widgets we&#8217;ve<br \/>got a visual form builder with built in<br \/>integrations which we&#8217;re going to be<br \/>using for this webinar and powerful<br \/>animations that bring your site to life<br \/>we also have a design design oriented<br \/>pop-up builder for pro users that you<br \/>can also integrate with your favorite<br \/>marketing tools and there&#8217;s so much more<br \/>so I&#8217;ll stop babbling and I&#8217;ll just let<br \/>you know that feel free to ask questions<br \/>in the chat we&#8217;ll try to answer them and<br \/>I&#8217;m gonna be pausing every now and then<br \/>to to answer some questions ok so to<br \/>start working with elemental you need to<br \/>create your first page so what I&#8217;ll do<br \/>over here I&#8217;ll go to pages in the<br \/>dashboard and click add new and I&#8217;ll<br \/>give it a name I&#8217;ll call it landing page<br \/>Pro webinar<br \/>so and then I&#8217;ll go ahead and hit edit<br \/>with elemental and in order to start<br \/>with a clean page I&#8217;ll go to the page<br \/>settings in the left on the bottom and<br \/>I&#8217;ll choose page layouts and I&#8217;ll set<br \/>that to canvas okay so this is the<br \/>easiest way to create a full blank page<br \/>without a header in the footer<br \/>exactly what we need for our landing<br \/>page so let&#8217;s just have a quick overview<br \/>of our elemental and the interface on<br \/>the right side over here is the editing<br \/>area this is where we&#8217;re going to be<br \/>adding and editing the elements that<br \/>form the page the layout of the page and<br \/>on the left side over here is the<br \/>elemental panel if we click over here on<br \/>the widgets icon we have the creative<br \/>tools these are the widgets you can use<br \/>them to add them to your page you can<br \/>add headings paragraphs images and<br \/>videos and a lot more and you can always<br \/>access this area by clicking on the<br \/>right on the icon widget icon on the<br \/>right over here and another thing that<br \/>we have is global widgets a carries for<br \/>pro users and with this feature you can<br \/>save the widgets as a global widget and<br \/>then you can add it to multiple areas on<br \/>your site and you can all the areas will<br \/>be editable from that single space I&#8217;m<br \/>going to be showing you exactly how to<br \/>do that when we&#8217;re going to be creating<br \/>our last section with the form widget<br \/>and so I&#8217;ll show you that later on if we<br \/>look over here we have the hamburger<br \/>menu on the left and there are a lot of<br \/>options over here like setting your<br \/>default colors go back over here and<br \/>default fonts which are set later as<br \/>well and we can also view the page and<br \/>we can exit back to our dashboard at the<br \/>bottom over here we have some other<br \/>settings we&#8217;ve already spoke about the<br \/>page settings over here we also have the<br \/>Navigator okay which will help us get a<br \/>clear understanding of the page and the<br \/>layouts and everything that&#8217;s in it it&#8217;s<br \/>empty right now because we haven&#8217;t<br \/>created anything so we&#8217;re going to come<br \/>back to this and we&#8217;ll see exactly how<br \/>it&#8217;s going to help us create our page<br \/>okay let&#8217;s have a look let&#8217;s carry on to<br \/>the history over here we can see all of<br \/>the actions that we made all the edits<br \/>and everything we can go back to them we<br \/>can also check out the revisions over<br \/>here we have the responsive mode here we<br \/>can switch between the screen modes and<br \/>we can for example go to mobile and make<br \/>verbal edits tablet and make tablets<br \/>tablet edits we&#8217;ll go we&#8217;ll do that soon<br \/>as well and over here we can preview the<br \/>page and we can of course publish and<br \/>there are other same options as well<br \/>which we&#8217;ll go over soon okay so let&#8217;s<br \/>take a closer look at how pages are<br \/>built there are two ways that we can<br \/>start we can I&#8217;m going to start off with<br \/>the library so we&#8217;ll just click over<br \/>here and as you can see over here we can<br \/>preview we just click on the magnifying<br \/>glass so we can preview pre-made blocks<br \/>and pages over here and also our own<br \/>templates and we can just simply insert<br \/>them into the page okay so I&#8217;ll go ahead<br \/>and choose let&#8217;s have a look I&#8217;ll choose<br \/>the get in touch I&#8217;ll choose this pro<br \/>block our power in numbers I&#8217;ll go ahead<br \/>and just insert that and as you can see<br \/>we straight away we&#8217;ve got a block with<br \/>some content in it with some widgets so<br \/>let&#8217;s just have a look exactly what we<br \/>have our way okay so Elementor uses<br \/>three main building blocks we have the<br \/>sections we have the columns and we have<br \/>the widgets you can identify the columns<br \/>sorry we can identify the section by the<br \/>blue line okay and they are the biggest<br \/>there are the biggest building blocks<br \/>then we have the columns you can<br \/>identify them by the black dashed border<br \/>over here there&#8217;s one over here and<br \/>inside them we have with the widgets<br \/>okay as a heading widget over here is a<br \/>countdown widgets and we can control all<br \/>of these columns and sections and<br \/>widgets with their handle for example we<br \/>can right click and duplicate the<br \/>section and we can just delete it like<br \/>so we can also duplicate the column so<br \/>now we have two columns with the same<br \/>content in it and<br \/>I&#8217;ll go ahead and just delete this and<br \/>what we can also do is we can move the<br \/>columns and the widgets and the sections<br \/>around so by simply dragging and<br \/>dropping so I&#8217;ll just drag this column<br \/>over here and if I&#8217;d like to duplicate<br \/>the section and remove this I can drag<br \/>this section down over here let&#8217;s see<br \/>below the blue line indicates where it&#8217;s<br \/>going to be positioned right okay so<br \/>let&#8217;s have a closer look at the section<br \/>columns in the widgets they have three<br \/>tabs I&#8217;ll go ahead and click section<br \/>they have three tabs in the panel on the<br \/>left the section and the columns they<br \/>have layout style and advanced tabs and<br \/>widgets they have content style in<br \/>advanced tabs so soon we&#8217;ll see exactly<br \/>how these settings are used to create<br \/>our landing page but first I&#8217;ll go ahead<br \/>and delete the section because we&#8217;re<br \/>going to be building it from scratch<br \/>okay so another way to add a section is<br \/>by pressing the plus icon so I&#8217;ll go<br \/>ahead and press the plus icon and then<br \/>you can simply choose one of the preset<br \/>structures so you can choose them and<br \/>you can later on you can tweak them as<br \/>well so I think it&#8217;s time to start<br \/>building our landing page so let&#8217;s just<br \/>have a look this is our landing page<br \/>that&#8217;s what we&#8217;re going to be building<br \/>and I&#8217;ll start off in this page settings<br \/>okay<br \/>and what I&#8217;ll do over here is I&#8217;m gonna<br \/>give it a background color the whole<br \/>page okay so go to style and I&#8217;ll choose<br \/>background type classic and I&#8217;ll give it<br \/>a color I&#8217;ll just paste my code over<br \/>here<br \/>I&#8217;ll give it a gray gray background<br \/>color okay so now I can add sections and<br \/>I can start building but I don&#8217;t need to<br \/>give them a background color the<br \/>sections because I gave the page<br \/>settings a background color so that will<br \/>save me some time okay great<br \/>the next thing that I&#8217;ll do also to<br \/>speed up my process is I go to the<br \/>hamburger menu over here and I&#8217;ll go to<br \/>the default fonts remember I mentioned<br \/>it before over here I set the all the<br \/>fonts I set them to Roberto<br \/>okay this will save meiosis some time<br \/>when I add heading widgets and stuff<br \/>like that there&#8217;ll be set as default<br \/>which we&#8217;ll see soon okay great so for<br \/>the first section let&#8217;s have a look over<br \/>here this is the first section as you<br \/>can see we have two columns over here<br \/>and we can already see a little bit of<br \/>the this the second section over here<br \/>giving us some interest to read about<br \/>two takeaways okay so how exactly can we<br \/>create that layout and set that up so<br \/>for the first section I&#8217;m going to<br \/>create a section with two columns and<br \/>I&#8217;m going to control the heights okay so<br \/>I&#8217;m going to control the height of the<br \/>section and I&#8217;m gonna give it a minimum<br \/>height meaning that the section will be<br \/>at least this height no matter the<br \/>amount of content in it will be at least<br \/>this height the default setting is 400<br \/>so I can increase it&#8217;s in pixels but I&#8217;m<br \/>going to use a different units I&#8217;m gonna<br \/>use a relative unit called VH view<br \/>height which is in relationship to the<br \/>viewports heights so 100 percent 100 VH<br \/>means that it takes up a hundred percent<br \/>of the viewports Heights which you can<br \/>see over here 50 VH would mean it would<br \/>take up half of the viewports height and<br \/>I&#8217;m going to be setting it to 80 so that<br \/>when my second section starts you<br \/>already see it above the fold which will<br \/>be come in handy for our landing page<br \/>okay so let&#8217;s move on what I&#8217;m gonna be<br \/>doing is I&#8217;ll go to style and I&#8217;ll give<br \/>it a background image okay so I got a<br \/>background type and I&#8217;ll I&#8217;ll use this<br \/>white quarter circle okay<br \/>so I&#8217;ll use this circle over here and<br \/>I&#8217;ll go ahead and insert it and I&#8217;m<br \/>gonna fix this first of all I&#8217;m gonna<br \/>set it to no repeat no repeat so we only<br \/>see it once and then I&#8217;ll set it<br \/>position I&#8217;ll set it to top center okay<br \/>great that&#8217;s where I want to have it<br \/>next what I&#8217;m gonna be doing is I&#8217;ll<br \/>drag an image widget so I&#8217;ll go to the<br \/>widgets air drag an image widget into<br \/>the left column and I&#8217;m gonna be<br \/>choosing the elemental logo so I&#8217;ll go<br \/>here and just choose the elemental logo<br \/>like so<br \/>and I&#8217;ll align it to the left and in<br \/>style I&#8217;m gonna control the width I just<br \/>make it a little bit smaller 25% that&#8217;s<br \/>great and I&#8217;ll use a CSS filter so I<br \/>want this color now I wanted to be dark<br \/>I want it to be black but I don&#8217;t want<br \/>to create a new logo and in Photoshop<br \/>and then upload it and whatever not so<br \/>I&#8217;ll just use a CSS filter over here to<br \/>save some time and I&#8217;ll just bring the<br \/>brightness all the way down so now it&#8217;s<br \/>dark okay so that&#8217;s great and the next<br \/>thing that I&#8217;ll do is I&#8217;ll drag I&#8217;ll go<br \/>ahead to the widgets and I&#8217;ll search for<br \/>the icon list the icon list widget and<br \/>I&#8217;ll drop it here under the elemental<br \/>logo and I&#8217;ll go ahead and delete to<br \/>list items so I&#8217;m left with one and what<br \/>I&#8217;ll do is I&#8217;ll click on it and I&#8217;ll<br \/>change the text I&#8217;ll change the text<br \/>over here to the webinar and the dates<br \/>and the time so in text I&#8217;ll go ahead<br \/>and change that that&#8217;s great<br \/>and now I&#8217;ll hover over the over the<br \/>icon and I&#8217;ll choose upload SVG I&#8217;ve<br \/>uploaded some SVG&#8217;s so what I&#8217;ll go and<br \/>do is choose this live as SVG icon over<br \/>here and insert it and now we need to<br \/>style style it a bit so I&#8217;ll go to style<br \/>and I&#8217;m gonna increase the icon okay so<br \/>go to icon drop-down excuse me I&#8217;ll go<br \/>to icon drop-down and um I&#8217;ll go ahead<br \/>and change the size to I&#8217;ll go ahead and<br \/>set it to 60<br \/>okay that&#8217;s great now I&#8217;ll star the text<br \/>so I&#8217;ll go to the text drop-down I&#8217;ll<br \/>change the text color to black and the<br \/>text indent I&#8217;ll set to 16 to create<br \/>some space there between and over here<br \/>remember when I set the default font<br \/>family Roberta so the family here set to<br \/>default so it automatically said to<br \/>Roberta that will save me some time what<br \/>I&#8217;ll do is I&#8217;ll just change it to 22<br \/>pixels and I&#8217;ll set the weight to 500 so<br \/>it&#8217;s a little bit bolder okay great<br \/>next what I&#8217;ll do is I&#8217;ll drag in a<br \/>heading widgets I&#8217;ll drag a heading<br \/>widgets under under this text and what<br \/>I&#8217;ll do is I&#8217;ll I&#8217;ll just change the<br \/>text over here okay this is my text<br \/>create your first landing page with<br \/>elemental Pro and as you can see I added<br \/>brake lines over here so landing page<br \/>will always appear under create your<br \/>first and with elemental Pro will always<br \/>appear and the landing page so it&#8217;s<br \/>something that you can use next I&#8217;ll<br \/>style it so I&#8217;ll get a style and I&#8217;ll<br \/>change the color to black and over here<br \/>I&#8217;ve got it&#8217;s a photography and I&#8217;ll<br \/>choose the font family<br \/>also here&#8217;s Roberto&#8217;s apply it<br \/>automatically this will be 70 and I&#8217;ll<br \/>add a decoration of the he&#8217;ll set it to<br \/>underline and I&#8217;ll play around with the<br \/>line height I&#8217;ll change the line I to<br \/>pixels and I&#8217;ll set it at 80 and the<br \/>letter spacing here I&#8217;ll drop down a bit<br \/>to bring it together<br \/>I&#8217;ll do it negative 4<br \/>okay that&#8217;s great so now we can move on<br \/>to our button this is our CTA okay so<br \/>I&#8217;ll go ahead and drop this button over<br \/>here and I&#8217;ll change the text and in<br \/>text I&#8217;ll go ahead and she saved my seat<br \/>and what we&#8217;re gonna be doing is we&#8217;ll<br \/>set the link to automatically scroll<br \/>down to the third section which contains<br \/>the form and we haven&#8217;t created it yet<br \/>so I&#8217;ll show you exactly how to do that<br \/>later on but first let&#8217;s style the<br \/>button so I go to style and interpret<br \/>Apocrypha I&#8217;ll go and set the family to<br \/>Montserrat I&#8217;ll set the size to 16 and<br \/>the weight to bold<br \/>uppercase on buttons it&#8217;s always good to<br \/>have the uppercase going<br \/>let&#8217;s have a look I&#8217;ll play around with<br \/>the letter spacing a bit<br \/>I&#8217;ll space it out just a little bit like<br \/>sir that&#8217;s cool and next what I&#8217;ll do is<br \/>I&#8217;ll change the background color okay so<br \/>I&#8217;ll go ahead and set a pink red<br \/>background color so I get a background<br \/>color over here and I&#8217;ll change that<br \/>like so and now I&#8217;m gonna change I&#8217;m<br \/>going to change the shape to pill shape<br \/>so I&#8217;ll add I&#8217;ll add some border radius<br \/>I&#8217;m gonna go for fifty pixels all around<br \/>as you can see over here and what I want<br \/>to do is I&#8217;m going to unlink the padding<br \/>values because I want to set custom<br \/>padding over here so when I remove it<br \/>it&#8217;s there&#8217;s no padding whatsoever and<br \/>what I&#8217;ll do is I&#8217;ll set it to 20 on the<br \/>top and 20 on the bottom and 35 on the<br \/>right and 35 on the left okay so that&#8217;s<br \/>exactly what I what I like which is<br \/>great and now the only thing that I want<br \/>to do with the button still is on havre<br \/>when you hover over the button I want to<br \/>change the background color to to this<br \/>nice green so I&#8217;ll go ahead and choose<br \/>background color there we go so now when<br \/>I hover over the changes and to grab the<br \/>attention also I want to add a hover<br \/>animation so I&#8217;ll go ahead and choose<br \/>grow so this is nice it pops up nicely<br \/>okay that&#8217;s great<br \/>and now I want to create some space<br \/>between the text and the button so what<br \/>I&#8217;ll do is I&#8217;ll go to advanced in the<br \/>button and I&#8217;ll unlink the padding<br \/>values okay and I&#8217;m gonna change the<br \/>units from pixels I&#8217;m gonna change it to<br \/>percentage because this is a relative<br \/>unit and it&#8217;s better for responsive<br \/>design it&#8217;s better for tablet and mobile<br \/>so what I&#8217;ll do over here is I&#8217;ll add<br \/>five percent five percent padding on the<br \/>top and that&#8217;s it um now let&#8217;s have a<br \/>look at our page so you can see the<br \/>elemental leg over here pops a little<br \/>bit out the way that I did that is I&#8217;m<br \/>gonna select I&#8217;m gonna select the logo<br \/>okay and what I&#8217;m gonna be doing is I&#8217;m<br \/>going to go to advanced<br \/>I&#8217;m going to play around with the margin<br \/>I&#8217;m gonna give it a negative margin okay<br \/>so I can unlink the margin and I&#8217;m gonna<br \/>give it a negative margin on top<br \/>the moment that you give it a negative<br \/>margin you can see it comes up and then<br \/>it comes out of the the column itself<br \/>okay so you need to pay attention to<br \/>this nuts out of the column will soon<br \/>see also in mobile how that affects the<br \/>mobile but that&#8217;s that&#8217;s how I got it<br \/>out so that&#8217;s great now let&#8217;s move on to<br \/>the column on the right okay so what I&#8217;m<br \/>gonna be doing is I&#8217;m gonna be dragging<br \/>I&#8217;m going to be dragging an image<br \/>widgets into the right over here okay<br \/>and I&#8217;m gonna be choosing a very special<br \/>picture there we go and I&#8217;ll go ahead<br \/>and insert that and I&#8217;ll just go ahead<br \/>and make sure that the size is set to<br \/>full and what I&#8217;ll do next is I&#8217;ll drag<br \/>an image widget<br \/>sorry I&#8217;ll drag a heading widget under<br \/>it there we go<br \/>and I&#8217;ll change the text okay I&#8217;ll<br \/>change the text there we go and what<br \/>I&#8217;ll do is I&#8217;ll style it so I&#8217;ll go to<br \/>style and I&#8217;ll change the color to black<br \/>and in typography I&#8217;ll go ahead and set<br \/>it to search for and set it to one<br \/>surrett I&#8217;ll set it to 20 pixels and<br \/>I&#8217;ll make it a little bit I&#8217;ll change<br \/>the weight to 500 and now in order to<br \/>position it exactly where we like okay<br \/>I&#8217;m gonna be I&#8217;m going to be going to<br \/>add the Advanced Settings here as well<br \/>and I&#8217;ll unlink the padding like before<br \/>change the unit to percentage and I&#8217;ll<br \/>just add a little bit let&#8217;s see I just<br \/>move it over here 25% is nice that&#8217;s<br \/>great okay next I&#8217;m gonna be duplicating<br \/>this and I&#8217;ll change the text<br \/>okay great and I&#8217;ll change the text<br \/>color I&#8217;ll change it to gray so I&#8217;ll get<br \/>a style and I&#8217;ll change the text color<br \/>over here change it to gray and I&#8217;ll<br \/>make it a little bit lighter so I&#8217;ll go<br \/>to wait and I&#8217;ll set it to 300 so it&#8217;s a<br \/>little bit lighter and in order to move<br \/>it closer to the first heading what I&#8217;ll<br \/>do here is also go to advanced and<br \/>unlink this time I&#8217;ll unlink the margin<br \/>okay which is above it&#8217;s outside the the<br \/>widgets unlink that and I&#8217;ll change it<br \/>to the value at the unit to percentage<br \/>and I&#8217;ll give it a negative margin of<br \/>two percent negative top margin of 2%<br \/>okay that&#8217;s great okay now for the<br \/>shapes okay as you can see here we have<br \/>the shapes we used cast and positioning<br \/>and we used motion effects okay so let&#8217;s<br \/>see exactly how how we do that okay<br \/>so first of all I&#8217;m gonna be dragging in<br \/>an image widgets so I&#8217;ll drag an image<br \/>widget over here and I&#8217;ll go ahead and<br \/>change it to the big black semicircle<br \/>okay so this one and I&#8217;ll insert it like<br \/>so and next what I&#8217;ll do is I&#8217;ll go<br \/>ahead and duplicate the image and the<br \/>second image I&#8217;ll choose the red square<br \/>and the black semicircle okay so that&#8217;s<br \/>these two and in order to position them<br \/>next to each other what we can use we<br \/>can use the positioning option in<br \/>advanced so I&#8217;ll go ahead and select<br \/>this image and in advanced as you can<br \/>see we have a positioning option okay<br \/>I&#8217;d like to in advanced warn you that<br \/>custom position itself it&#8217;s not<br \/>considered a best practice for<br \/>responsive web design and also shouldn&#8217;t<br \/>be used to frequently but for this for<br \/>landing pages to create the interaction<br \/>and to really position things the way<br \/>that you like it&#8217;s it&#8217;s a very good<br \/>solution so what we do is what we will<br \/>do now is go to a width and basically<br \/>we&#8217;ll set it to inline okay and I&#8217;ll go<br \/>ahead and do it<br \/>the second one is well could have<br \/>advanced I&#8217;ll go to positioning and I&#8217;ve<br \/>got a width and I&#8217;ll set it to inline<br \/>and now they&#8217;re next to each other okay<br \/>and we can position them even more<br \/>accurately by setting the position<br \/>itself to absolute okay so I&#8217;ll go ahead<br \/>and select this first image and I&#8217;ll set<br \/>the position to absolute and the moment<br \/>that I set the position to absolute you<br \/>can see that the second image a jump to<br \/>the left this is because the moment that<br \/>I set the black semicircle to absolute<br \/>it essentially was removed from the flow<br \/>of the elements on the page so I&#8217;ll go<br \/>ahead and select the second image okay<br \/>and I&#8217;ll go to positioning sorry there&#8217;s<br \/>the second image there we go and I&#8217;ll<br \/>change the position to absolute as well<br \/>so now that both they&#8217;re both removed<br \/>from the flow of the of the elements on<br \/>the page and we can play around with<br \/>them we can play around with the<br \/>position so what I want to do is I want<br \/>to have the square semicircle so I<br \/>selected over here I wanted to have it<br \/>in the top right corner of the image and<br \/>the black semicircle sorry I want the<br \/>the square semicircle in the top right<br \/>and I want to black semi cooper circle<br \/>in the top left and so I&#8217;ll select the<br \/>square semi circle first over here and<br \/>I&#8217;ll go I&#8217;ll go to the horizontal<br \/>orientation and I&#8217;ll set it to right<br \/>okay and I&#8217;ll leave the vertical<br \/>orientation at the top because that&#8217;s<br \/>where I want to have it now I can<br \/>position it accurately with the offset<br \/>okay what I&#8217;ll do is I&#8217;ll change the<br \/>units to percentage because it&#8217;s a<br \/>relative unit and it&#8217;s relative to the<br \/>column that it&#8217;s in which will help us<br \/>later on if we creating full tablet and<br \/>we&#8217;re creating for mobiles it&#8217;s a better<br \/>way to design and so what I&#8217;ll do you<br \/>have me here as you can see the moment<br \/>that I move it we can we can place it<br \/>over here so I want to place it on a<br \/>place that&#8217;s over here so I can replace<br \/>it quite accurately and for the vertical<br \/>orientation I wanted to go up a bit<br \/>there we go so that&#8217;s great um now let&#8217;s<br \/>go to the black semicircle okay so what<br \/>I want to do is I want to I wanted to<br \/>remain at the top left and all I need to<br \/>do over here is I&#8217;ll just change the<br \/>units to percentage as well and I&#8217;ll<br \/>slide over here I&#8217;ll slide this a little<br \/>bit to the right that&#8217;s great and the<br \/>offsets I wanted to bring it up a bit so<br \/>I&#8217;ll go over here and I think that looks<br \/>great<br \/>also if you want them to come back to<br \/>their original position all you need to<br \/>do is just set the offsets to zero okay<br \/>so if you get lost if you&#8217;re playing<br \/>around something happens you might get<br \/>confused if the image suddenly just<br \/>disappeared I always just use this the<br \/>offset set them back to zero and you&#8217;re<br \/>good to go so I&#8217;ll just go ahead and set<br \/>this back to what I had before okay so<br \/>this was nine and this was delete this<br \/>was negative nine okay that&#8217;s great and<br \/>also there&#8217;s a great tutorial that I<br \/>made that explains exactly how to use<br \/>customer&#8217;s absolute positioning custom<br \/>positioning when you&#8217;re designing your<br \/>page so I&#8217;ll send a link in the<br \/>description as well so you can check<br \/>that out okay great<br \/>so now that we&#8217;ve got these perimeters<br \/>let&#8217;s bring them to life with motion<br \/>effects okay so we&#8217;ll select the top<br \/>left image and I&#8217;ll go ahead and go in<br \/>advanced are good emotion effects okay<br \/>and here I&#8217;ll choose mouse effects and<br \/>I&#8217;ll choose mouse track okay so that<br \/>basically as you can see when I interact<br \/>with it with my mouse it moves around so<br \/>the direction is set to opposite meaning<br \/>that when I move in a certain direction<br \/>you can see that the image itself moves<br \/>against me in the opposite direction and<br \/>I&#8217;ll control the speed over here I&#8217;ll<br \/>bring it down a bit because I wanted to<br \/>be a subtle I want it to be a subtle<br \/>interaction so that&#8217;s great and for the<br \/>top right image I&#8217;ll go ahead and select<br \/>it and go to motion effects<br \/>and I&#8217;ll switch on Mass Effect&#8217;s Mouse<br \/>track and I&#8217;ll change the direction I&#8217;ll<br \/>change it to direct direct means that it<br \/>follows me within the direction that I&#8217;m<br \/>going that&#8217;s where the image also moves<br \/>towards and I&#8217;ll make it subtle as well<br \/>so I&#8217;ll bring this down so as you can<br \/>see now they there&#8217;s a subtle there&#8217;s a<br \/>nice playful interaction between the two<br \/>elements over here okay great so now<br \/>let&#8217;s create the other two on the bottom<br \/>over there and we&#8217;ll just simply<br \/>duplicate we&#8217;ll duplicate these and drag<br \/>them down okay so you can see them and<br \/>the black semicircle I&#8217;m gonna change it<br \/>to the the white semicircle and the red<br \/>circle and this one okay and and what<br \/>I&#8217;ll do is I&#8217;ll go to advanced and in<br \/>positioning I&#8217;ll set the vertical<br \/>orientation to bottom because that&#8217;s<br \/>where I want to position it and I&#8217;ll<br \/>make sure that the percentages are set<br \/>to that the units are set to percentage<br \/>and over here I&#8217;ll I&#8217;ll set this to<br \/>seven and I&#8217;ll set this to 18 great and<br \/>I&#8217;ll select the next image and here as<br \/>well I&#8217;ll change this image to the white<br \/>triangle and the red this red a quarter<br \/>circle now go ahead and insert that and<br \/>in advanced I&#8217;ll go ahead and I&#8217;ll go to<br \/>positioning and I&#8217;ll change the vertical<br \/>orientation to bottom as well now make<br \/>sure that it&#8217;s set a percentage and I&#8217;ll<br \/>go ahead and set my values in offset<br \/>values so that&#8217;s exactly where I want it<br \/>to be positioned and to change the<br \/>interaction a bit I&#8217;m gonna go to the<br \/>left image on the bottom over here and<br \/>change motion effects Mouse track to<br \/>direct and I&#8217;ll do the opposite over<br \/>here for the right the image on the<br \/>right on the bottom and I&#8217;ll change the<br \/>mouse track I change it to opposite okay<br \/>so this really gives us this playful<br \/>subtle interaction<br \/>that you that really it&#8217;s nice for the<br \/>visitor to to see and also I&#8217;ll link<br \/>another tutorial in the description that<br \/>covers all of the motion effects options<br \/>ok because there are so many more and so<br \/>many more motion effects options so you<br \/>can really get a basic understanding of<br \/>how it works and how you can use it to<br \/>liven up your own pages for example you<br \/>know you could use this on a restaurant<br \/>website you can add custom positioned<br \/>menu items with motion effects you know<br \/>to grab the attention so that&#8217;s that<br \/>could be a creative way to to apply it<br \/>okay great so we finished with the first<br \/>section let&#8217;s see if we have some<br \/>questions around ok so I&#8217;ve got a<br \/>question from Corey when editing on<br \/>different devices do the changes only<br \/>apply to that device or does it make<br \/>changes for also it&#8217;s the mobile<br \/>responsive modes which we&#8217;re going to be<br \/>doing soon as well you can you can<br \/>basically create you can make mobile<br \/>edits for specific devices so you can<br \/>make a different font size for mobile<br \/>and on tablet will be a bigger font size<br \/>and there&#8217;s a lot of things that you can<br \/>change for all of the mobile devices<br \/>I&#8217;ll show to you I&#8217;ll show you exactly<br \/>how we can make some mobile edits to<br \/>make this page look great on mobile as<br \/>well I hope that answers the question ok<br \/>so we&#8217;ve got a question from Kela others<br \/>elements SVG or PNG okay so it&#8217;s PNG but<br \/>it doesn&#8217;t matter because you can work<br \/>with with both file types in elemental<br \/>so that&#8217;s great okay great so let&#8217;s<br \/>carry on with the second section right<br \/>let&#8217;s have a look at our second section<br \/>over here as you can see that&#8217;s the six<br \/>takeaways that you&#8217;ll get from attending<br \/>the webinar okay so let&#8217;s make a start<br \/>so first of all what I&#8217;ll do is I&#8217;ll add<br \/>a section with one column<br \/>okay and I&#8217;ll give it a mean height of<br \/>style background type I&#8217;ll go ahead and<br \/>choose an image I&#8217;ll choose the this<br \/>circle and some other shapes background<br \/>image and what I&#8217;ll do is I set it to<br \/>like before no-repeat so it appears only<br \/>once and I&#8217;ll position it in the top<br \/>center like so and next what I&#8217;ll do is<br \/>I&#8217;ll drag in the heading widgets okay so<br \/>I&#8217;ll go ahead and drag in the heading<br \/>widget and I&#8217;ll change the text this is<br \/>going to be the text the six takeaways<br \/>so I&#8217;ll go ahead and add that here as<br \/>you can see I added a break line as well<br \/>so that&#8217;s from attending the webinar<br \/>will always appear under the six<br \/>takeaways you&#8217;ll get what I&#8217;ll do is<br \/>I&#8217;ll align it to the center and in style<br \/>I&#8217;ll change the color to black okay<br \/>great now typography I&#8217;m going to change<br \/>this to Montserrat and I&#8217;ll change the<br \/>size to 50 so it&#8217;s bigger and I&#8217;ll play<br \/>around with the line height okay I&#8217;ll<br \/>set it to pixels and I&#8217;ll just space it<br \/>a bit over here that looks great and the<br \/>next thing that I&#8217;ll do is I&#8217;ll add some<br \/>some padding on the bottom over here so<br \/>that when we add our other elements<br \/>there will be some space between them so<br \/>I&#8217;ll go to advanced and what I&#8217;ll do is<br \/>I&#8217;ll unlink the padding over here change<br \/>it to percentage because it&#8217;s better for<br \/>Responsive and on the bottom I&#8217;ll go<br \/>ahead and add as you can see here I&#8217;ll<br \/>add 4% that&#8217;s great<br \/>okay next next I&#8217;ll drag in an inner<br \/>section okay so I&#8217;m dragging in the<br \/>inner section over here as you can see<br \/>we have got the main section and we&#8217;ve<br \/>got an inner section the default comes<br \/>with two columns okay<br \/>and I&#8217;m gonna add another column so I&#8217;ll<br \/>right click here and I&#8217;ll go ahead and<br \/>choose add new column so I&#8217;ve got three<br \/>in total and what I&#8217;ll do is I&#8217;ll search<br \/>for<br \/>the icon the icon box widget okay icon<br \/>box there we go okay so I&#8217;ll drag it in<br \/>and what I&#8217;ll be doing over here is I&#8217;m<br \/>going to be uploading the s and SVG for<br \/>this okay so I&#8217;ll go ahead and choose<br \/>this and I&#8217;ll choose this SVG and I&#8217;ll<br \/>go ahead and insert that like so and I&#8217;m<br \/>gonna be deleting the title and I&#8217;ll<br \/>only add a description okay so let&#8217;s<br \/>just do this I won&#8217;t need I won&#8217;t need<br \/>the title I&#8217;ll just use the description<br \/>so that&#8217;s great and now now we can style<br \/>it so I&#8217;ll go to style and I&#8217;ll change<br \/>the icon size I&#8217;ll change the size I&#8217;ll<br \/>increase it a bit it&#8217;s too big let&#8217;s<br \/>bring it down a bit<br \/>drop-down in description because we<br \/>deleted the title we&#8217;re not using it in<br \/>the description I&#8217;m gonna go and set the<br \/>color to black and in typography I&#8217;ll go<br \/>ahead and choose montserrat and I&#8217;ll set<br \/>it to 18 and that&#8217;s great okay so now I<br \/>want I want I&#8217;ll copy our copy and<br \/>outpaced the icon box widget I&#8217;ll just<br \/>go ahead and paste this so we&#8217;ve got<br \/>three in a row and I want to have six in<br \/>total right as you can see over here we<br \/>want to have six in total so what I&#8217;ll<br \/>do is I&#8217;ll just duplicate the<br \/>intersection so I&#8217;ve got two<br \/>intersections and all we need to do now<br \/>is change the texts and the images so<br \/>the first one we already set so I&#8217;ll go<br \/>to the second one and I&#8217;ll go ahead and<br \/>just add this text and I&#8217;ll select the<br \/>SVG over here<br \/>and let&#8217;s move on to the third one as<br \/>you can see it&#8217;s very easy it&#8217;s copy<br \/>paste that&#8217;s great now we choose the SVG<br \/>that&#8217;s cool well the fourth one learn to<br \/>design stunning landing pages with that<br \/>code and we&#8217;ll change we&#8217;ll change this<br \/>to this cool<br \/>SVG icon and we&#8217;ll change this one over<br \/>here discover how to make your page 100%<br \/>responsive which will do soon and I&#8217;ll<br \/>go ahead and choose the responsive<br \/>mobile tablet icon and for our last one<br \/>preview and publish pages your pages to<br \/>a live website segrete and I&#8217;ll change<br \/>this SVG icon over here to this nice<br \/>preview icon cool and now what I want to<br \/>do is I want to create some space<br \/>between these inner sections so what<br \/>I&#8217;ll do is in the first inner section<br \/>I&#8217;ll go to advanced and our unlink the<br \/>margin because I want to add space under<br \/>the intersection okay so what I&#8217;ll do is<br \/>I&#8217;ll change this to percentage like<br \/>before there we go and on the bottom I<br \/>just add two percent okay that&#8217;s cool<br \/>now I want to bring all of this content<br \/>I want to bring it a little bit together<br \/>okay inside the main section over here<br \/>so what I&#8217;ll do is I&#8217;ll just select the<br \/>section and in advanced I&#8217;ll unlink the<br \/>padding and I&#8217;ll change it to percentage<br \/>and I&#8217;ll just give it now I went and<br \/>linked out I&#8217;ll just give it three<br \/>percent all around okay so as you can<br \/>see over here if I increase it that<br \/>increases like so I&#8217;ll just leave it at<br \/>three percent so that&#8217;s great and that&#8217;s<br \/>our second section<br \/>okay so let&#8217;s see if we&#8217;ve got any<br \/>questions let&#8217;s see okay so from Suzanne<br \/>where can I find those icons and images<br \/>to use are they somewhere in elemental<br \/>or do I have to search at stock photo<br \/>websites okay so we&#8217;re going to be<br \/>sharing all of the materials that we<br \/>used in this webinar we&#8217;re going to be<br \/>sending it to you so you can re-watch<br \/>the webinar and recreate the website and<br \/>use the skills to apply it to your to<br \/>your own designs<br \/>let&#8217;s see any other questions yeah it&#8217;s<br \/>from San Sandhya how do I add Elemental<br \/>navigation and not have the WordPress<br \/>navigation is the primary navigation<br \/>okay in order to do this you use<br \/>elementals team builder we have a<br \/>tutorial about it so I&#8217;ll also send a<br \/>link in the description when the video<br \/>is on on the channel okay great so let&#8217;s<br \/>move on to our third and final section<br \/>okay so let&#8217;s have a look at it this is<br \/>going to be our forum our forum section<br \/>so let&#8217;s just build it I&#8217;ll go ahead and<br \/>hit the plus over here like before I&#8217;ll<br \/>add a section with two columns controls<br \/>hi to set a min height of 70 VH okay and<br \/>I&#8217;m gonna choose a background image so<br \/>in style to the background type and I&#8217;ll<br \/>choose image I&#8217;ll choose this little red<br \/>square I&#8217;ll go ahead and insert it and<br \/>now like before no-repeat there we go we<br \/>got the little red square back and in<br \/>position I&#8217;ll go ahead and set it to<br \/>center right<br \/>so it appears over there in the center<br \/>on the right and so that&#8217;s great<br \/>now what I&#8217;ll do is I&#8217;ll go ahead and<br \/>copy the main heading in the first<br \/>section and I&#8217;ll simply paste it over<br \/>here and what I&#8217;ll do is I also copy<br \/>this icon list widget and I&#8217;ll paste it<br \/>here as well<br \/>okay now the heading widgets I&#8217;ll go<br \/>ahead and change the text this is gonna<br \/>be the same you&#8217;ll see text the big sale<br \/>you&#8217;ll see text so go ahead and change<br \/>that and in style I&#8217;ll go ahead and<br \/>change the topography I&#8217;ll increase it a<br \/>lot I&#8217;ll make it a hundred and twenty<br \/>pixels and I&#8217;ll remove this underline in<br \/>decoration I&#8217;ll set it back to default<br \/>and I&#8217;ll play around with the line<br \/>height here to bring some space 90<br \/>pixels is good and the next thing that<br \/>I&#8217;ll do is I&#8217;ll create some space<br \/>between these two widgets so in the<br \/>heading widgets I&#8217;ll go to advanced and<br \/>I&#8217;ll unlink the padding and I set it to<br \/>percentage and on the bottom at 8% okay<br \/>great so now what I want to do is I want<br \/>to I want to create some white space on<br \/>the right side of of the column okay so<br \/>in order to do that what I&#8217;ll do over<br \/>here is I&#8217;ll go to the column settings<br \/>okay and in advanced I&#8217;ll and Link the<br \/>padding and I&#8217;ll change it to percentage<br \/>and what I&#8217;ll do is I&#8217;ll add 15% on the<br \/>top<br \/>I&#8217;ll leave the bottom as is and I&#8217;ll add<br \/>moment that I do that the text the the<br \/>letters they&#8217;re all up there numbers the<br \/>the words they all appear below each<br \/>other and we&#8217;ve got this nice white<br \/>space over here so that&#8217;s great so now<br \/>we can move on to the form widgets in<br \/>the right column so I&#8217;ll go ahead and<br \/>search for form widgets there we go and<br \/>this is our awesome form widget that we<br \/>can style to our liking as as you can<br \/>see we&#8217;ve got the name email a message<br \/>I&#8217;m gonna keep the name I&#8217;m gonna keep<br \/>the email first of all I&#8217;m gonna just<br \/>give this form a name so I know what<br \/>form this is okay so I&#8217;ll give the form<br \/>name create your first a landing page<br \/>webinar and next what I&#8217;ll do is I&#8217;ll go<br \/>to messages and I&#8217;ll change the<br \/>placeholder text<br \/>okay so in placeholder as you can see<br \/>what are your expectations from the<br \/>webinar<br \/>that&#8217;s the placeholder text and I&#8217;ll<br \/>change the default four rows or change<br \/>it to three so that was four but this is<br \/>free three so it&#8217;s a little bit less and<br \/>I&#8217;ll go ahead and add an item and I&#8217;ll<br \/>change the type I&#8217;ll change it to text<br \/>area so you where you can fill in your<br \/>answers and I&#8217;ll go ahead and change<br \/>this this placeholder text how long have<br \/>you been using Elemental okay and I&#8217;ll<br \/>change this to three as well and I&#8217;ll<br \/>just increase the size the input size<br \/>I&#8217;ll just make it medium so it&#8217;s a<br \/>little bit bigger everything and I&#8217;ll<br \/>hide the label I don&#8217;t want to see the<br \/>label I&#8217;m gonna hide the labels I&#8217;ll do<br \/>that over there and next let&#8217;s go to the<br \/>submit button okay so I&#8217;ll go to the<br \/>submit button drop-down and I&#8217;ll change<br \/>the text I wanted to say save my seat so<br \/>I&#8217;ll go ahead and paste this save my<br \/>seat and that&#8217;s great and I&#8217;ll align it<br \/>to the left<br \/>okay I&#8217;ll align the button to the left<br \/>and we have actions after submit okay so<br \/>after you after you or your visitors<br \/>press the button you can add some<br \/>actions what we going to be doing is<br \/>adding MailChimp over here the moment<br \/>that you add MailChimp you get a<br \/>MailChimp drop-down where you can choose<br \/>your API key and your audience I&#8217;ll link<br \/>another video in the description as well<br \/>that basically goes over how you can use<br \/>these email marketing platforms together<br \/>with elements of pros integration<br \/>settings and you understand also how<br \/>that works with in the additional<br \/>options are the form ID and you can<br \/>switch on a custom message as well so<br \/>there will be a link about that as well<br \/>so let&#8217;s go ahead and style the form<br \/>okay so I&#8217;ll go to style and I&#8217;ll just<br \/>increase the row gap a little bit like<br \/>so and I&#8217;ll go to the field drop-down<br \/>now and I&#8217;ll change I&#8217;ll change the text<br \/>color to just a little bit more gray<br \/>a little bit darker than if you can see<br \/>it but I just make it a little bit<br \/>darker okay let&#8217;s just change that okay<br \/>that didn&#8217;t work field text color okay<br \/>[Music]<br \/>there we go<br \/>okay so change the color and in<br \/>typography what I&#8217;ll do over here is<br \/>I&#8217;ll I&#8217;ll get a letter spacing and I&#8217;ll<br \/>increase it a little bit to stretch it<br \/>out okay I want it to be stretched out<br \/>just a little bit not too much so one<br \/>point two and what I&#8217;ll do now is I will<br \/>remove the border so I&#8217;ll just set the<br \/>border to zero so there&#8217;s no border and<br \/>I&#8217;ll create a pill shape I&#8217;ll just add a<br \/>border radius of 25 pixels creating this<br \/>pill shape so that&#8217;s that and now what<br \/>I&#8217;ll do is I&#8217;ll go to the button drop<br \/>down and I&#8217;ll change the button<br \/>background color I&#8217;ll change it to the<br \/>red the pink red okay and next what I&#8217;ll<br \/>do is I&#8217;ll go to the topography and I&#8217;ll<br \/>select set it to monster rats set the<br \/>size to 16 I&#8217;ll set the weight to 600<br \/>it&#8217;s a little bit bolder and transform<br \/>to uppercase next I&#8217;ll play around a<br \/>little bit with the line height okay so<br \/>I&#8217;ll go ahead and set it to that&#8217;s about<br \/>right and a letter spacing or space it<br \/>out as well not too much<br \/>that&#8217;s great and the next thing what<br \/>we&#8217;ll do is we&#8217;ll turn the baton also<br \/>into this pill chef so I&#8217;ll go to the<br \/>the border-radius<br \/>and I&#8217;ll give it 50 pixels all around<br \/>and next what I want to do is I want to<br \/>create some custom padding over here so<br \/>the text padding what I&#8217;ll do is I&#8217;ll<br \/>just unlink or all of the values and<br \/>I&#8217;ll go ahead and set I set it to 15 on<br \/>the top 15 on the bottom 35 on the right<br \/>and 35 on the left and now what I&#8217;ll do<br \/>is I&#8217;ll go to the right column settings<br \/>over here and in advanced what I&#8217;ll do<br \/>is I&#8217;ll I&#8217;ll I&#8217;ll unlink the padding and<br \/>I&#8217;ll set it to percentage and what I&#8217;ll<br \/>do is I&#8217;m gonna be just like we did it<br \/>with the second the the column in the<br \/>left we had created some white space<br \/>I&#8217;ll be creating some white space here<br \/>as well and so what I&#8217;ll do over here is<br \/>I&#8217;ll set 215 on top 15 on the right 15<br \/>on the bottom and on the right side of<br \/>sorry and on the left side I&#8217;ll just<br \/>leave it at 0 because I wanted to stay<br \/>close to the columns edge okay great so<br \/>as I told you before we can save widgets<br \/>as global widgets so what I&#8217;m gonna be<br \/>doing is I&#8217;m gonna save this form widget<br \/>as a global widget so I&#8217;ll just go ahead<br \/>and right-click the form widget and I&#8217;ll<br \/>choose save as global and I&#8217;ll just I&#8217;ll<br \/>just say form widgets like so and I&#8217;ll<br \/>just save it and now as you can see it<br \/>appears in a global it&#8217;s appears in the<br \/>global part of your widgets which means<br \/>that you can easily use it when you&#8217;re<br \/>creating different landing pages okay<br \/>great so now that we finish that<br \/>and what we need to do of course is we<br \/>need to set the baton in the first<br \/>section to scroll down all the way to<br \/>the third section okay so what we&#8217;re<br \/>going to be doing is we&#8217;ll go to the<br \/>third section settings because we wanted<br \/>to scroll to the third section and what<br \/>we will do is we&#8217;ll go to advanced in<br \/>advanced over here we&#8217;re going to be<br \/>adding a CSS ID okay now go ahead and<br \/>copy this and I&#8217;ll simply go back to the<br \/>button and that&#8217;s in the first section<br \/>in content link make sure that you paste<br \/>this the CSS ID after the pound key<br \/>make sure that there&#8217;s a pound key over<br \/>there and the moment you do that when<br \/>you press it it will automatically<br \/>scroll down to that section so that&#8217;s<br \/>really cool now that we&#8217;ve created we&#8217;ve<br \/>created so much stuff on our page I&#8217;ll<br \/>just pour some water alright now that we<br \/>have created a lot of content a lot of<br \/>sections a lot of columns a lot of<br \/>widgets it&#8217;s time to open up our<br \/>navigator so I&#8217;ll go ahead and press the<br \/>navigate and as you can see it&#8217;s full of<br \/>stuff right now I&#8217;ll go ahead and<br \/>minimize the sections that columns the<br \/>widgets as you can see there are three<br \/>sections okay so I can use the navigator<br \/>to really get in a quick overview of<br \/>what&#8217;s going on over here and I can<br \/>really organize it as well I can give it<br \/>a name okay so I can actually call this<br \/>hero by double clicking I can call this<br \/>this was the takeaways right and the<br \/>third one was formed to the form section<br \/>and when I press on it it automatically<br \/>Scrolls to that section that&#8217;s great and<br \/>I can go ahead and select a column and<br \/>will automatically bring it to that<br \/>column in the column settings so that&#8217;s<br \/>really really awesome also we added some<br \/>custom positioned images and some ocean<br \/>effects and in the pro navigator what<br \/>you can see is you can see these blue<br \/>lines are they are indicating that there<br \/>are motion effects and custom positioned<br \/>images so you can get a real clear<br \/>overview of things that you&#8217;ve created<br \/>and things that you<br \/>and to work with that accordingly so<br \/>I&#8217;ll go ahead and close that and right<br \/>now let&#8217;s move on to the responsive<br \/>responsive modes for the mobile on<br \/>tablet because a lot of potential<br \/>customers they they will view this page<br \/>on their mobile devices so sure let&#8217;s<br \/>have a look exactly how how we can make<br \/>responsive adjustments to make your<br \/>design look great on mobile as well so<br \/>for this webinar I&#8217;m going to be<br \/>tweaking the first section to show you<br \/>exactly how it works so first of all I&#8217;m<br \/>going to be starting with the responsive<br \/>mode I&#8217;ll go to tablet so this might be<br \/>something that you have already done or<br \/>might not have used but something that I<br \/>like to use a lot for creating layouts<br \/>and organizing the composition for<br \/>tablet and mobile modes is using the<br \/>column width percentage so I&#8217;ll go ahead<br \/>and choose the column width the column<br \/>setting over here as you can see there&#8217;s<br \/>the column width and over here I can<br \/>simply change this I can change it to 60<br \/>such a little bit flexible space and of<br \/>course it needs to be 100% to take up<br \/>the full width so I&#8217;ll just change this<br \/>to 40 and as you can see you can very<br \/>quickly just change the layout over here<br \/>to suit your mobile device so I&#8217;ll go<br \/>ahead and delete these because I&#8217;m not<br \/>gonna be using it let&#8217;s have a look<br \/>there we go<br \/>and let&#8217;s open up the mobile mode now<br \/>and I&#8217;ll open up the Navigator as well<br \/>so it will help us I&#8217;ll go ahead and<br \/>select the hero section so I&#8217;m<br \/>straightaway in the section settings and<br \/>I&#8217;ll just show you some advanced<br \/>responsive settings over here so I&#8217;ll go<br \/>to advanced responsive and one of the<br \/>things that we can do is we can reverse<br \/>the columns so reverse on mobile as you<br \/>can see the first column has got the<br \/>text the second column AV has got the<br \/>image so the moment that I reverse it<br \/>the second column and then and the first<br \/>column is switched<br \/>okay so I&#8217;ll switch it back because I<br \/>won&#8217;t be using that and what we can also<br \/>do is we can hide the whole section the<br \/>entire section can hide it on mobile by<br \/>click by simple<br \/>visibility hard on mobile as you can see<br \/>it&#8217;s grayed out at the moment that I<br \/>hide the panel over here you can see<br \/>that the first section doesn&#8217;t show on<br \/>where about which is could come in handy<br \/>when you&#8217;re creating specific sections<br \/>that you want to have visible on only<br \/>desktop and in tablet only mobile so you<br \/>can really create that experience for<br \/>your visitors and I&#8217;ll go ahead and and<br \/>not not use that because we&#8217;ll just<br \/>carry on over here making some tweaks<br \/>for mobile first of all if you have<br \/>noticed the elemental layer is out of<br \/>sight it&#8217;s because we gave it a negative<br \/>top margin in desktop mode remember<br \/>before so what you set in desktop mode<br \/>it&#8217;s automatically applied here by<br \/>default so in order to bring it back<br \/>what we&#8217;ll do is it&#8217;s in the first<br \/>column that&#8217;s what I know and it is an<br \/>image okay so I know that it&#8217;s over here<br \/>and what I&#8217;ll do is I&#8217;ll just go to<br \/>content just to confirm but I know that<br \/>this is the logo the elements or logo so<br \/>I go to advanced and the moment that I<br \/>unlink the margin because I set a<br \/>negative margin in the desktop mode the<br \/>moment that I unlink it it won&#8217;t get<br \/>that negative 100 margin and yet will<br \/>come back to its its original place over<br \/>here so as you can see we&#8217;ve got the the<br \/>logos back and let&#8217;s go ahead and start<br \/>it a bit so in style and I&#8217;m gonna make<br \/>a little bit bigger okay so I&#8217;m gonna<br \/>change the width as you can see they&#8217;re<br \/>responsive handles over here so they<br \/>indicate that these settings can be used<br \/>for responsive editing okay you can see<br \/>tablet desktop so these are specific<br \/>only four only four four for the mobile<br \/>right now so I&#8217;ll go ahead and increase<br \/>that I&#8217;ll set that to 40 and I&#8217;ll align<br \/>it to the centre I&#8217;ve got a content and<br \/>align it to the centre over here and<br \/>next I&#8217;ll select the icon list widget<br \/>and in lists are also align it to the<br \/>centre and in style in list<br \/>align it to the centre yes and then text<br \/>I&#8217;ll go ahead and increase it a bit okay<br \/>so I&#8217;ll go ahead to typography and I&#8217;ll<br \/>decrease it I&#8217;ll make it smaller okay<br \/>great<br \/>the next thing that I&#8217;ll do is I&#8217;ll<br \/>create some space between them so I got<br \/>it advanced and I&#8217;ll add some padding on<br \/>the top so unlink the padding I&#8217;ll<br \/>change it to percentage and on top I<br \/>just add at 5% next I&#8217;ll go to the<br \/>heading widget that&#8217;s too big okay so<br \/>what I&#8217;ll do is I&#8217;ll first of all in<br \/>content I&#8217;ll align it to the center and<br \/>in style I&#8217;ll just go ahead and change<br \/>the size to 36 pixels and I&#8217;ll change<br \/>the line height as well I&#8217;ll change it<br \/>change it to pixels and I&#8217;ll change it<br \/>to 48 that&#8217;s cool and the letter spacing<br \/>I&#8217;ll bring down a bit to bring it<br \/>together there we go<br \/>negative two okay cool<br \/>and what I&#8217;ll do here is also I&#8217;ll add<br \/>some spacing so I&#8217;ll go to advanced and<br \/>I&#8217;ll unlink the padding set it to<br \/>percentage and on top<br \/>I&#8217;ll give it two percent great now let&#8217;s<br \/>move on to the baton widget and what<br \/>I&#8217;ll do is I&#8217;ll align it to the center<br \/>and in advanced I&#8217;ll and link the<br \/>padding as well a lot of unlinking let&#8217;s<br \/>have a look I&#8217;ll change it to five<br \/>change it to percent and I&#8217;ll give it<br \/>five percent on the top and I&#8217;ll give it<br \/>five percent on the bottom as well okay<br \/>great so now let&#8217;s have a look at the<br \/>custom position images okay so I<br \/>actually I don&#8217;t want them to show on on<br \/>the mobile mode okay so what I&#8217;m gonna<br \/>be doing is I&#8217;ll select them and I&#8217;ll<br \/>just go to advanced and I&#8217;ll go to<br \/>positioning sorry I&#8217;ll go to responsive<br \/>and I&#8217;ll simply select hard on mobile<br \/>and out<br \/>ran out so I&#8217;ll go and do that over here<br \/>let&#8217;s have a look hard on mobile I&#8217;ll<br \/>select this one as well<br \/>responsive hard on mobile and the last<br \/>one hard on mobile so the moment that I<br \/>hide the panel you can see that these<br \/>custom positioned images they they don&#8217;t<br \/>show up okay okay so that&#8217;s great now<br \/>let&#8217;s have a look at let&#8217;s move on to<br \/>the image okay so I&#8217;ll use the Navigator<br \/>to to find my image over here let&#8217;s have<br \/>a look there we go okay we can see<br \/>that&#8217;s the image I can also give it a<br \/>name you know and then navigate this I<br \/>can find it back easily so that&#8217;s really<br \/>cool and let&#8217;s let&#8217;s change some things<br \/>for the image of the app so I&#8217;ll go<br \/>ahead in style<br \/>I&#8217;ll change the width I&#8217;ll change it to<br \/>over here go back to the section<br \/>settings and I&#8217;ll go to a style and I&#8217;ll<br \/>go to background and I&#8217;ll just change<br \/>the position over here I&#8217;ll change it to<br \/>top right okay and I&#8217;ll change the size<br \/>of the background image as well because<br \/>the white that&#8217;s there the the the<br \/>quarter circle is a little bit too big<br \/>so I&#8217;ll just I&#8217;ll go ahead in size I&#8217;ll<br \/>choose custom I can pay attention that<br \/>these are all mobile specific rights<br \/>this is what we only see on mobile so<br \/>I&#8217;ll choose custom and over here I&#8217;ll<br \/>simply I&#8217;ll set it I set it to 50<br \/>okay 50 is cool okay great so now we<br \/>almost done<br \/>I just want to add some space on top<br \/>over here so I go to the section<br \/>settings and I&#8217;ll go to advanced and<br \/>I&#8217;ll for the last time unlink the<br \/>padding over here and I&#8217;ll change it to<br \/>percentage and on top I&#8217;ll just give it<br \/>five percent and that&#8217;s great okay so<br \/>let&#8217;s take some questions over here yes<br \/>I&#8217;d like to remind you that the webinar<br \/>will be available on the channel so you<br \/>can read you can watch it again so no<br \/>worries if you missed something you can<br \/>check it out again go back and scroll<br \/>along why okay so Kemp spot printer Nell<br \/>ornate Lance it&#8217;s got a question why do<br \/>you put the margin and padding two<br \/>percentages a set of pixels this is for<br \/>mobile responsive design the percentages<br \/>are relative units relative to the<br \/>column that it&#8217;s in so the moment that<br \/>the screen size changes the the padding<br \/>itself will will be red will will change<br \/>relative to the column size which is a<br \/>very good for responsive responsive<br \/>editing so the responsive behavior is is<br \/>you don&#8217;t you don&#8217;t have to tweak that<br \/>too much and so that&#8217;s why I use the<br \/>percentage<br \/>let&#8217;s have a look Leo Leo August with<br \/>all the changes that you made does it<br \/>make sense to save publish every now and<br \/>then in cash of a crash or a similar<br \/>event so it&#8217;s your work is automatically<br \/>been saved sorry I didn&#8217;t mention it<br \/>it&#8217;s automatically been saved and you<br \/>can also save as draft every now and<br \/>then if you want to but as I mentioned<br \/>before we&#8217;ve got the history over here<br \/>with as you can see I&#8217;ve been working<br \/>now for I think about an hour maybe we<br \/>can see all of the edits that are made<br \/>you can see I edited the label on the<br \/>form I I am used this section around I<br \/>change the background all of these<br \/>things I can go back to them and so I<br \/>can really control exactly what what<br \/>happened so you don&#8217;t have to be afraid<br \/>that something would got lost because of<br \/>a crash ok great so let&#8217;s go back I&#8217;ll<br \/>go ahead and close the Navigator I&#8217;ll go<br \/>ahead and close and navigate and I&#8217;ll go<br \/>back to the desktop mode and now that we<br \/>finished creating our page I&#8217;ll go ahead<br \/>and hit publish and we can preview we<br \/>can see our live page over here and as<br \/>you can see it works we can just drop<br \/>down like so here we&#8217;ve got all the<br \/>sections that we made and everything<br \/>looks great so that&#8217;s really cool um<br \/>another thing that we can do in the save<br \/>options is we can save this entire page<br \/>as a template in our library so I can<br \/>call this a landing page landing page<br \/>template okay and then it&#8217;s in my<br \/>library so I can quickly reuse it and<br \/>create other pages over here and I can<br \/>just insert that on the fly so I can<br \/>really create a lot of pages that will<br \/>save you a lot of time setting that up<br \/>from from from from the girl also<br \/>another thing you can do is you can save<br \/>sections as templates so I can go just<br \/>right-click a section I want to save<br \/>this contact as<br \/>foom section I want to save it as a<br \/>template so I&#8217;ll just right-click that<br \/>and say I&#8217;ll just save it as a form<br \/>template and I can just reuse it as well<br \/>as you can see it shows over here and if<br \/>I want to add a new section on a new<br \/>page somewhere else you know I can just<br \/>I can go ahead and select my library and<br \/>my templates and I&#8217;ll just go ahead and<br \/>insert it and the moment that I insert<br \/>it that&#8217;s what we&#8217;ll just show so that&#8217;s<br \/>really great I&#8217;ll go ahead and delete<br \/>this another cool tool that you can use<br \/>by the way is the finder okay I don&#8217;t if<br \/>you a lot of you know about it well if<br \/>you use it or not<br \/>I use a lot too in improve my workflow<br \/>you can use it with command E or control<br \/>if you&#8217;re a PC user and you know use it<br \/>to search for for things that I want to<br \/>do or places I want to go essentially as<br \/>a search bar that offers very easy<br \/>navigation between different pages and a<br \/>lot of different dashboard settings so I<br \/>don&#8217;t have to go back to the dashboard<br \/>and search for things for example I can<br \/>go ahead and and and type add new and<br \/>very easily I can go ahead and create a<br \/>new page and and there are a lot of<br \/>other things that that you can do okay<br \/>so we&#8217;re nearing the end of the webinar<br \/>I&#8217;ll go ahead and bring myself back like<br \/>sir there we go okay so this is just the<br \/>tip of the iceberg there really is so<br \/>much more that we can learn an elemental<br \/>Pro are really provides you with a lot<br \/>of tools to create highly converting<br \/>landing pages as well as fully fledged<br \/>websites such as the form widget that I<br \/>mentioned before motion effects to<br \/>really help bring your design to life<br \/>pop-ups to keep your visitors engaged a<br \/>theme builder to visually customize your<br \/>websites headers footers archive pages<br \/>single posts and a lot of other areas on<br \/>your site and a lot more so I think I<br \/>think you&#8217;re ready to take your first<br \/>steps with with Elementor and you know<br \/>create your own stunning landing pages<br \/>and proudly publish them<br \/>like to invite you to join our Facebook<br \/>group with loads of helpful tips and<br \/>tricks also become a part of our huge<br \/>elemental community full of like-minded<br \/>web creators everybody&#8217;s helping each<br \/>other out becoming better at what they<br \/>do also don&#8217;t forget to subscribe to our<br \/>YouTube channel full of all types of<br \/>tutorials to really help you master your<br \/>your elemental skills and lastly also<br \/>check out our website check out the Help<br \/>Center for easy access the knowledgebase<br \/>F accuse Docs and a lot more lastly I<br \/>like to remind you that you can re-watch<br \/>this webinar it&#8217;s going to be a video<br \/>it&#8217;s going to be on our channel we&#8217;ll<br \/>send you a link to the materials to<br \/>create this landing page so feel free to<br \/>re-watch it and recreate the page<br \/>step-by-step and then you can also apply<br \/>these skills to create your own<br \/>attractive converting landing pages for<br \/>all types of business if it&#8217;s a<br \/>hospitality industry restaurants<br \/>software companies gyms ecommerce a lot<br \/>more so I wish you good luck and most of<br \/>all enjoy being creative very important<br \/>thanks for tuning in and ciao for now<br \/>[Music]<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview Welcome to the Elementor Basics Webinar. This Webinar will give you a basic breakdown of Elementor Pro and show you how to use it to design, build and publish your own Pro Landing Pages! Transcript hi and welcome to elemental probe basic webinar my name is Eve and I\u2019m a web designer [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":7703,"comment_status":"closed","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[47],"class_list":["post-1890","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","tag-webinars"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Create Your First Landing Page With Elementor Pro - Academy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/academy\/create-your-first-landing-page-with-elementor-pro\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create Your First Landing Page With Elementor Pro - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview Welcome to the Elementor Basics Webinar. This Webinar will give you a basic breakdown of Elementor Pro and show you how to use it to design, build and publish your own Pro Landing Pages! Transcript hi and welcome to elemental probe basic webinar my name is Eve and I\u2019m a web designer [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/create-your-first-landing-page-with-elementor-pro\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-20T14:15:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-22T09:44:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Create-a-Registrants-Landing-Page.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Hodaya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hodaya\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"48 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create Your First Landing Page With Elementor Pro - Academy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/academy\/create-your-first-landing-page-with-elementor-pro\/","og_locale":"en_US","og_type":"article","og_title":"Create Your First Landing Page With Elementor Pro - Academy","og_description":"Overview Transcript Overview Welcome to the Elementor Basics Webinar. This Webinar will give you a basic breakdown of Elementor Pro and show you how to use it to design, build and publish your own Pro Landing Pages! Transcript hi and welcome to elemental probe basic webinar my name is Eve and I\u2019m a web designer [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/create-your-first-landing-page-with-elementor-pro\/","og_site_name":"Academy","article_published_time":"2021-06-20T14:15:43+00:00","article_modified_time":"2023-02-22T09:44:03+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Create-a-Registrants-Landing-Page.png","type":"image\/png"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"48 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/create-your-first-landing-page-with-elementor-pro\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/create-your-first-landing-page-with-elementor-pro\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"Create Your First Landing Page With Elementor Pro","datePublished":"2021-06-20T14:15:43+00:00","dateModified":"2023-02-22T09:44:03+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/create-your-first-landing-page-with-elementor-pro\/"},"wordCount":11627,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/create-your-first-landing-page-with-elementor-pro\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Create-a-Registrants-Landing-Page.png","keywords":["Webinars"],"articleSection":["Design \/ Layout"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/create-your-first-landing-page-with-elementor-pro\/","url":"https:\/\/elementor.com\/academy\/create-your-first-landing-page-with-elementor-pro\/","name":"Create Your First Landing Page With Elementor Pro - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/create-your-first-landing-page-with-elementor-pro\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/create-your-first-landing-page-with-elementor-pro\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Create-a-Registrants-Landing-Page.png","datePublished":"2021-06-20T14:15:43+00:00","dateModified":"2023-02-22T09:44:03+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/create-your-first-landing-page-with-elementor-pro\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/create-your-first-landing-page-with-elementor-pro\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/create-your-first-landing-page-with-elementor-pro\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Create-a-Registrants-Landing-Page.png","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Create-a-Registrants-Landing-Page.png","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/create-your-first-landing-page-with-elementor-pro\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Design \/ Layout","item":"https:\/\/elementor.com\/academy\/design-layout\/"},{"@type":"ListItem","position":4,"name":"Create Your First Landing Page With Elementor Pro"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c","name":"Hodaya","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","caption":"Hodaya"},"url":"https:\/\/elementor.com\/academy\/author\/hodaya\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1890","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=1890"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1890\/revisions"}],"predecessor-version":[{"id":9553,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1890\/revisions\/9553"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/7703"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=1890"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=1890"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=1890"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}