{"id":1860,"date":"2021-06-20T13:37:06","date_gmt":"2021-06-20T13:37:06","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=1860"},"modified":"2023-04-30T08:17:54","modified_gmt":"2023-04-30T08:17:54","slug":"elementor-pro-live-webinar-create-your-first-landing-page","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/elementor-pro-live-webinar-create-your-first-landing-page\/","title":{"rendered":"Elementor Pro Live Webinar: Create Your First Landing Page"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1860\" class=\"elementor elementor-1860\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-eae671e elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"eae671e\" 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-389e59a7\" data-id=\"389e59a7\" 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-f46be43 elementor-widget elementor-widget-video\" data-id=\"f46be43\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=1v7DqtNgmyk&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-605f232 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"605f232\" 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-9590570\" data-id=\"9590570\" 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-75522679 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"75522679\" 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-1961\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1961\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1962\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1962\" 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-1961\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1961\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1961\" tabindex=\"0\" hidden=\"false\"><p>Welcome to the Elementor Pro 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-1962\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1962\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1962\" tabindex=\"0\" hidden=\"hidden\"><p>we go hi and welcome to this elemental<br \/>probe basics webinar my name is Eve and<br \/>I&#8217;m a web designer and lead educator<br \/>here at elemental and I&#8217;m really excited<br \/>to help you use the Internet&#8217;s leading<br \/>WordPress drag-and-drop site builder<br \/>elemental and what we&#8217;re going to be<br \/>doing during this webinar it&#8217;s I&#8217;m going<br \/>to be giving you a breakdown of some of<br \/>elemental pros abilities by showing you<br \/>how we used it to design a landing page<br \/>for this very webinar so these skills<br \/>they can also be applied to create<br \/>attractive landing pages for your own<br \/>business help convert potential<br \/>customers could be hospitality industry<br \/>restaurants software is a service<br \/>companies gyms ecommerce and a lot more<br \/>so let me just show you what we&#8217;re going<br \/>to be building I&#8217;ll go ahead and share<br \/>my page over here there we go okay so<br \/>this is the landing page we&#8217;re gonna be<br \/>building okay so what exactly is a<br \/>landing page right so basically a<br \/>landing page is a page on your site<br \/>where visitors arrive on via some kind<br \/>of advertising it could be a Facebook ad<br \/>it could be a Google search and the page<br \/>itself is designed with a specific<br \/>purpose to convert visitors into leads<br \/>by taking a specific action with call to<br \/>actions and in our example the purpose<br \/>of the page is to convince the visitor<br \/>to save a seat for this amazing webinar<br \/>so as you can see there&#8217;s CTA s this<br \/>call to actions over here<br \/>and when we scroll down and the here is<br \/>section a we stretch where you can see<br \/>also the next title over here the<br \/>takeaways you&#8217;ll get from attending the<br \/>webinar and you know basically<br \/>Elementary is really a great tool to<br \/>create landing pages what it is is an<br \/>advanced page builder it allows you to<br \/>build entire websites page by page with<br \/>your own custom design its drag-and-drop<br \/>meaning that you work directly on the<br \/>page you can see the results in real<br \/>time exactly the way that your website<br \/>visitors<br \/>would there&#8217;s also very many advantages<br \/>in using elemental Pro such as saving a<br \/>lot of time and development costs<br \/>because elemental Pro provides provides<br \/>you with 50 plus pro widgets 300 plus<br \/>pro templates and counting it helps you<br \/>design and build faster without using<br \/>code there&#8217;s also a lot of features you<br \/>can use to help boost your landing page<br \/>conversions with a lot of marketing and<br \/>conversion widgets such as the visual<br \/>form builder which we&#8217;re going to be<br \/>using today during the webinar and also<br \/>powerful animations that can bring your<br \/>site to life as you can see over here<br \/>there&#8217;s a subtle there&#8217;s a subtle<br \/>animation over here this motion effects<br \/>going on which we are also use today<br \/>there&#8217;s also a design oriented pop-up<br \/>builder that can be integrated with with<br \/>your favorite marketing tools and<br \/>there&#8217;s a lot more so I&#8217;ll stop babbling<br \/>and also if you have got any questions<br \/>feel free to ask in the chat we&#8217;re going<br \/>to be trying to answer them and I&#8217;m<br \/>going to be pausing every now and then<br \/>to take some questions to answer some<br \/>questions so let&#8217;s dive in so to start<br \/>work with elemental we need to create<br \/>our first page so I&#8217;ll just go to our<br \/>dashboard over here and in pages I&#8217;ll<br \/>just go ahead and click add new and what<br \/>I&#8217;ll do is I&#8217;ll give my page a name and<br \/>I&#8217;ll click edit with elemental okay now<br \/>to start with a clean page what we going<br \/>to be doing is we&#8217;re going to go to the<br \/>bottom panel on the left in page<br \/>settings and we&#8217;re going to be going to<br \/>page layout and simply choose elemental<br \/>canvas so this is the easiest way to<br \/>create a full blank page without a<br \/>header and a footer which basically is<br \/>exactly what we need for our landing<br \/>page okay so let&#8217;s get familiar with the<br \/>elemental interface so on the right side<br \/>is the editing area this is where you<br \/>can add and edit elements that form the<br \/>layout of the page and on the left side<br \/>we have the elemental panel so I&#8217;ll<br \/>press I&#8217;ll press the widgets icon over<br \/>here these are creative tools these are<br \/>widgets basically the elements that you<br \/>to your page like headings paragraphs<br \/>images videos and a lot more and you can<br \/>always access this area by clicking in<br \/>the right top corner over here the<br \/>widgets icon and over here we&#8217;ve got<br \/>global okay so with this feature you can<br \/>save a widget as global and then add it<br \/>to multiple areas so all the areas there<br \/>will be added to both will be editable<br \/>from one single place and I&#8217;m going to<br \/>show you how to use that for the form<br \/>widget which we&#8217;re going to be creating<br \/>in a bit then we can go over to the<br \/>hamburger menu on the left and what we<br \/>have over here is we&#8217;ve got more options<br \/>like global default global default<br \/>colors and fonts and also you can click<br \/>over here to view your page and exit to<br \/>dashboard if you want to go back to your<br \/>WordPress dashboard at the bottom we<br \/>have another panel with more key<br \/>features just like we saw before we can<br \/>enter the page settings over here you<br \/>can choose the layout over here&#8217;s the<br \/>Navigator to get a clear overview of of<br \/>the page which currently is empty<br \/>because we haven&#8217;t built anything so<br \/>I&#8217;ll go ahead and close it over here we<br \/>have the history with to view the recent<br \/>changes and we have the responsive menu<br \/>here for switching between screen modes<br \/>got mobile tablet and desktop over here<br \/>and over here we can preview the page<br \/>before we save them and when we&#8217;re ready<br \/>to publish we&#8217;ll just publish and there<br \/>are some other save options as well<br \/>which we&#8217;ll go over we will go over soon<br \/>so let&#8217;s take a closer look at how pages<br \/>are built okay so there&#8217;s two ways we<br \/>can start I&#8217;ll go ahead and start with<br \/>entering the library so here you can<br \/>preview elementals premades blocks and<br \/>pages you can preview like so you can go<br \/>back to the library one of the template<br \/>kits are here as well<br \/>you&#8217;ll save templates which we&#8217;ll use<br \/>later as well there also over here and<br \/>here the blocks so I&#8217;ll just go ahead<br \/>and insert a block so you can see there<br \/>we go preview it go ahead and insert it<br \/>to our page<br \/>and let&#8217;s just check out what we have<br \/>okay so elemental basically uses three<br \/>main building blocks sections columns<br \/>and widgets sections they&#8217;re the largest<br \/>and you can identify them by the blue<br \/>border like you see over here inside<br \/>sections we have the columns and you can<br \/>identify them by the black dashed border<br \/>and inside the columns we&#8217;ve got the<br \/>widgets okay so we got the heading over<br \/>here here we&#8217;ve got the countdown<br \/>widgets and you can control the section<br \/>column and widgets with their handle<br \/>okay so if you&#8217;d like to edit the<br \/>section you can just right click over<br \/>here<br \/>you can duplicate it so now you have two<br \/>sections I can just simply delete it as<br \/>well I can also go ahead and add a new<br \/>column like so and the widgets here I&#8217;ll<br \/>just simply drag it okay if you want to<br \/>position it you can just drag and drop<br \/>where the blue line where you see the<br \/>blue line that&#8217;s where where it&#8217;s<br \/>indicates where it&#8217;s going to be<br \/>positioned so I can just really move it<br \/>around and that the column of a hack and<br \/>drag as well to really play with the<br \/>layout so there&#8217;s a lot of things I can<br \/>do with with the sections the columns<br \/>and the widgets with their settings over<br \/>here which we&#8217;ll be using when we&#8217;re<br \/>building our landing page so let&#8217;s just<br \/>check out some settings that we have as<br \/>well the sections columns and widgets<br \/>have three tabs in the panel on the left<br \/>the sections and the columns they have a<br \/>layout style and Advanced tab and<br \/>widgets they have the content style and<br \/>Advanced tab and soon we go soon we&#8217;re<br \/>going to see exactly how these settings<br \/>are used to create our landing page but<br \/>first I&#8217;m gonna be deleting this and<br \/>let&#8217;s just go over the other way to add<br \/>sections and to create your page is by<br \/>simply pressing plus over here and you<br \/>can simply choose one of these presets<br \/>structures so you can tweak them on the<br \/>go as well as you can see we&#8217;ve got a<br \/>section with two equal columns a section<br \/>with three equal columns a section with<br \/>two columns where the the right column<br \/>is larger than the left column etc okay<br \/>so let&#8217;s dive in and start building our<br \/>landing<br \/>okay so first of all before I start<br \/>building the section I just want to set<br \/>up some page settings over here so I&#8217;ll<br \/>go to the page settings and I&#8217;ll go to<br \/>style and give it a background color<br \/>okay now the reason why I&#8217;m setting this<br \/>in the page it&#8217;s sad enough to set this<br \/>background color at every section<br \/>because our design the background is all<br \/>the same so I&#8217;ll go ahead and choose<br \/>background type and I&#8217;ll choose color<br \/>and I&#8217;ll give it this gray background<br \/>okay great now another way to speed up<br \/>my design process is I&#8217;m going to set<br \/>default fonts okay so as you can see<br \/>here default fonts I&#8217;ve set them to<br \/>Roberta and soon you&#8217;ll see exactly how<br \/>that helps me out okay great so first of<br \/>all let&#8217;s have a look at the first<br \/>section that we&#8217;re going to be building<br \/>as you can see there&#8217;s two columns over<br \/>here as a logo there&#8217;s some text and the<br \/>call to action when we press the call to<br \/>action we scroll down to the third<br \/>section and here&#8217;s a nice interaction<br \/>with some custom positioned images and<br \/>motion effects which we&#8217;ll see exactly<br \/>how we do it also what we can see over<br \/>here is we can already see the title of<br \/>the second section which draws the<br \/>attention to want to scroll down and<br \/>really read what the takeaways are so<br \/>I&#8217;ll show you exactly how this is built<br \/>first of all I&#8217;m going to be adding a<br \/>section with two columns okay and I&#8217;m<br \/>going to control the height okay so I&#8217;m<br \/>gonna go to in layouts I&#8217;m gonna go to<br \/>height and I&#8217;m gonna set min height and<br \/>a min height means that no matter the<br \/>amount of content inside the section it<br \/>will be at least a certain height in<br \/>this case the default is 400 pixels and<br \/>I can increase that over here but I&#8217;m<br \/>gonna be using a relative unit<br \/>v H which stands for view Heights which<br \/>in is in relationship to the viewports<br \/>height so 100 VH is basically a hundred<br \/>percent of the viewports height as you<br \/>can see the top part of the section the<br \/>blue line and the bottom at X exactly<br \/>hundred percent of the viewport height<br \/>if I set it to 50 it takes up exactly<br \/>half and what I&#8217;m gonna be doing is I&#8217;m<br \/>gonna be setting it to 80 and the reason<br \/>that I&#8217;m do<br \/>that is the moment that I build the<br \/>second section you already start see<br \/>there you&#8217;ll see the title and that&#8217;s<br \/>exactly what we&#8217;re looking for this is<br \/>the title that we&#8217;re going to be that&#8217;s<br \/>going to be viewable basically when you<br \/>first land on the page already okay so<br \/>let&#8217;s let&#8217;s go to style so I&#8217;m gonna I&#8217;m<br \/>in this section I&#8217;m going to style and<br \/>I&#8217;m gonna be choosing a background I&#8217;ll<br \/>set the background to classic and I&#8217;ll<br \/>choose an image okay so I&#8217;ve got an<br \/>image and I&#8217;ll choose I&#8217;ll choose the<br \/>white quarter circle let&#8217;s see this one<br \/>over here and I&#8217;ll just simply insert it<br \/>and the first thing that I&#8217;ll do over<br \/>here is I&#8217;ll just set it to no-repeat so<br \/>just appears once and I&#8217;ll position it<br \/>in the top center okay that&#8217;s great<br \/>now what I&#8217;ll do is I&#8217;ll enter my<br \/>widgets my widget settings over here and<br \/>what I&#8217;ll do is I&#8217;ll just drag in an<br \/>image widget into the left column okay<br \/>so you can see the blue line indicates<br \/>where it&#8217;s going to be positioned and<br \/>I&#8217;ll go ahead and choose choose the<br \/>image I&#8217;m gonna be choosing the the<br \/>element or logo so I&#8217;ll just go over<br \/>here and choose elemental that&#8217;s the<br \/>logo I&#8217;ll just make sure that the image<br \/>size is set to full and I&#8217;ll align it to<br \/>the left I&#8217;ll align it to the left as<br \/>well now what I&#8217;ll do is I&#8217;ll go to<br \/>style and I&#8217;ll change its size so I&#8217;ll<br \/>basically they&#8217;ll do that with the width<br \/>I set it to 25% and and a cool trick<br \/>basically if you&#8217;ve got a color a logo<br \/>that you want to change and you know you<br \/>don&#8217;t want to like create a new logo and<br \/>export it and and upload it etc you can<br \/>use CSS filters so I want to change this<br \/>red logo I want to change it to Doc<br \/>wanna change it to black so I simply<br \/>just drag the brightness all the way<br \/>down so that will save me some time over<br \/>here<br \/>the next thing that I&#8217;ll do is I&#8217;ll drag<br \/>in the icon list okay I&#8217;ll just search<br \/>for it in the search bar and icon list<br \/>I&#8217;ll go ahead and drag it over here and<br \/>only going to be needing one item so<br \/>I&#8217;ll just delete these two items over<br \/>here and I&#8217;ll just click on it and I&#8217;ll<br \/>change the text I&#8217;ll change the text to<br \/>webinar February 20 I care that&#8217;s today<br \/>there we go cool now what we&#8217;re going to<br \/>be doing is uploading we&#8217;re going to be<br \/>using SVG as the icon of a so I&#8217;ll go<br \/>ahead and press upload SVG I&#8217;ve already<br \/>uploaded some SVG is over here so I&#8217;m<br \/>gonna be choosing this live icon and<br \/>I&#8217;ll just insert it and I&#8217;m going to<br \/>change the size so I&#8217;ll go to style and<br \/>icon and I&#8217;ll just increase the size<br \/>over here increase it to 60 that&#8217;s cool<br \/>and in the text drop-down out our style<br \/>it a bit so I&#8217;ll change the color to<br \/>black and I&#8217;ll increase the indent over<br \/>here between the icon and the text I&#8217;ll<br \/>increase it that&#8217;s cool next let&#8217;s go to<br \/>typography and over here as you can see<br \/>the font family is set to default like I<br \/>mentioned before in in the default<br \/>calories and fonts over here this is the<br \/>Roberto right the Roberto that I said<br \/>before it&#8217;s automatically applied which<br \/>means that it will save me some time as<br \/>well and then it is selected I&#8217;ll just<br \/>set the size to 22 pixels and I&#8217;ll<br \/>change the weight to 500 just a little<br \/>bit bolder and the next thing that I&#8217;ll<br \/>dragging over here is a heading widget<br \/>there we go<br \/>and I&#8217;ll go ahead and add my text over<br \/>here this is gonna be the create your<br \/>first landing page with elemental pro so<br \/>I just go ahead and add that and as you<br \/>can see I added brake lines over here<br \/>basically I used them too to make sure<br \/>that the text will always appear under<br \/>each other so that&#8217;s why I use that now<br \/>let&#8217;s start it a bit so I&#8217;ll go to style<br \/>and I&#8217;ll change the text color to black<br \/>and in<br \/>POG Rafi also the default font family<br \/>over here is Roberto I&#8217;ll just change<br \/>the size to 70 70 pixels and I&#8217;ll set<br \/>the decoration over here to underline<br \/>and I&#8217;ll play around with the line<br \/>height<br \/>okay so I&#8217;ll change the unit to pixels<br \/>and as you can see I can control the<br \/>line height over here and I&#8217;m going to<br \/>increase it a bit to here and the letter<br \/>spacing I can control that as well so<br \/>I&#8217;ll bring them a little bit closer to<br \/>each other I drag that to negative 4<br \/>that&#8217;s cool okay great so now we&#8217;re<br \/>ready to drag in our call to action the<br \/>baton widget so I&#8217;ll go ahead and drag<br \/>in the batting widget over here and I&#8217;ll<br \/>just change the text to save my seat<br \/>there we go and over here for the link<br \/>what we&#8217;re going to be doing is we&#8217;re<br \/>going to be setting the link to<br \/>automatically scroll down to the 3rd<br \/>section which contains the form which we<br \/>haven&#8217;t created yet so I&#8217;ll show you<br \/>exactly how to do that a little bit<br \/>later next let&#8217;s star the button so in<br \/>style<br \/>I&#8217;ll go to typography over here I&#8217;ll<br \/>change it to Montserrat and the size<br \/>I&#8217;ll change to 16 I change the weight as<br \/>well and I&#8217;ll set the transform to<br \/>uppercase that really stands out so it&#8217;s<br \/>good to do that for 4 buttons and I&#8217;ll<br \/>play around with the letter spacing as<br \/>well I&#8217;ll make it stretch out a little<br \/>bit I set it to two<br \/>okay that&#8217;s cool now let&#8217;s change the<br \/>background color okay I&#8217;m gonna give it<br \/>this pink red I&#8217;ll give it a pink red<br \/>background color so I&#8217;ll just go ahead<br \/>and choose background color and I&#8217;ll<br \/>paste my color code over here and I want<br \/>to save this colors to use it later on<br \/>so in my color picker I&#8217;ll just add<br \/>picked color which is really cool for<br \/>when I get rid of it I can justly drag<br \/>and delete it and if I want to<br \/>reorganize and reorder my colors I can<br \/>do that as well which is really cool<br \/>okay so let&#8217;s carry on I&#8217;m going<br \/>be adding a border radius I&#8217;m going to<br \/>set it to 50 pixels all around so to<br \/>become a pill shaped and next what I&#8217;ll<br \/>do is I&#8217;ll give some custom padding<br \/>values okay so in order to do that first<br \/>of all I&#8217;ll unlink all of the defaults<br \/>padding values and I&#8217;ll set them<br \/>individually so I&#8217;ll give it 20 pixels<br \/>on top and 20 on the bottom and I&#8217;ll<br \/>give it 35 pixels on the left and on the<br \/>right as well so it&#8217;s just a little bit<br \/>bigger now what I want to do is I want<br \/>to set some have a have a color as well<br \/>I want I want the button to change to a<br \/>green color so on hover I&#8217;ll change the<br \/>background color I&#8217;ll go ahead and paste<br \/>that over here as you can see it changes<br \/>to green when I hover over it and I&#8217;ll<br \/>also add a hover animation I&#8217;ll set it<br \/>to grow which really makes the button<br \/>pop out which is that&#8217;s really cool okay<br \/>great now what I&#8217;ll do is I&#8217;ll create<br \/>some space between this the text over<br \/>here and the button in order to do that<br \/>I&#8217;ll go to advanced okay so this we&#8217;re<br \/>still in the the button widget I&#8217;ll go<br \/>to advanced and I&#8217;ll give it some<br \/>padding so unlink the padding values and<br \/>what I&#8217;ll do is instead of pixels I&#8217;m<br \/>gonna be using a relative units I&#8217;ll use<br \/>percentage and I&#8217;ll just add the padding<br \/>on top I&#8217;ll just give it five percent<br \/>like so okay great<br \/>so now we&#8217;ve done with the left side of<br \/>the left column okay<br \/>what I&#8217;m going to be doing now is I want<br \/>the elemental logo I wanted to I wanted<br \/>to come out of the column basically to<br \/>lift it up as you can see over here it<br \/>appears a little bit more above so what<br \/>we&#8217;re going to be doing over here is<br \/>we&#8217;re going to be adding a negative<br \/>margin okay it&#8217;s just something that<br \/>I&#8217;ll show you how to do we&#8217;ll go to<br \/>advanced and what I&#8217;m going to be doing<br \/>is I&#8217;ll unlink the margin value and on<br \/>top over here I&#8217;ll give it a negative a<br \/>negative value as you can see it moves<br \/>out of the column and I&#8217;ll set it to<br \/>negative 100 negative 100 pixels okay<br \/>great so now we&#8217;re ready to move on to<br \/>the right column what I&#8217;ll do is I&#8217;ll<br \/>drag in an image widget okay now make<br \/>sure that the size is set to full and<br \/>I&#8217;m going to be adding this cool image<br \/>over here go ahead and insert it and<br \/>next what I&#8217;ll do is I&#8217;ll drag in a<br \/>heading widget<br \/>I&#8217;ll drag it in over here and I&#8217;ll<br \/>change the text to my name there we go<br \/>and let&#8217;s start it a bit so I got a<br \/>style I&#8217;ll change the text color to<br \/>black and in typography I&#8217;ll set this to<br \/>montserrat I&#8217;ll set it to 20 pixels and<br \/>I&#8217;ll change the weights as well there we<br \/>go and now in order to position it<br \/>exactly where we like you know I wanted<br \/>to appear closer to the image what I&#8217;m<br \/>going to be doing is I&#8217;m gonna be going<br \/>to advanced as well and I&#8217;ll unlink the<br \/>padding values over here I&#8217;ll change the<br \/>unit to percentage and what I&#8217;ll do is<br \/>I&#8217;m going to be giving a 25 percentage<br \/>on the left over here okay so as you can<br \/>see when I increase the left padding it<br \/>moves towards the right so all of this<br \/>is padding and I set it to 25% so that&#8217;s<br \/>great<br \/>now I&#8217;ll go ahead and simply duplicate<br \/>the heading and I&#8217;ll change the text<br \/>there we go and I&#8217;m gonna change the<br \/>color of you I&#8217;m gonna change it to gray<br \/>so it blends in there nicely<br \/>I&#8217;ll choose style go ahead and paste my<br \/>color cut over here for gray in<br \/>topography I&#8217;ll go ahead and change the<br \/>weight I want it to be a little bit<br \/>thinner like so that&#8217;s great<br \/>and I wanted to move up a little bit<br \/>towards the first heading so again in<br \/>order to move it closer I&#8217;m gonna be<br \/>unlinking the margin value in the<br \/>Advanced tab over here and I&#8217;ll change<br \/>the unit to percentage as well and I&#8217;ll<br \/>give it a negative 2% as you can see it<br \/>move towards the first the first heading<br \/>okay great so let&#8217;s just check out the<br \/>first section what we have so far<br \/>or we all you are missing right now is<br \/>is the custom position the images over<br \/>here which we&#8217;re going to be doing right<br \/>now okay now for the shapes so let&#8217;s<br \/>first of all drag in an image widget<br \/>I&#8217;ll go ahead and drag an image widget<br \/>over here and I&#8217;ll choose the big black<br \/>semicircle there we go<br \/>I&#8217;ll insert it and I&#8217;ll just duplicate<br \/>and I&#8217;ll choose I&#8217;ll choose the red<br \/>square with the black semicircle now<br \/>insert that one over here and now in<br \/>order to position them next to each<br \/>other what we can do is we can use the<br \/>positioning option in advanced okay so<br \/>custom positioning is not considered<br \/>best practice for responsive web design<br \/>so it shouldn&#8217;t be used to frequently<br \/>but for this for this design it&#8217;s a very<br \/>good way to to use this so what we&#8217;ll do<br \/>is I&#8217;ll select the first image over here<br \/>and I&#8217;ll just go to advanced in<br \/>positioning over here we&#8217;ve got width so<br \/>I&#8217;ll just change it to inline and I&#8217;ll<br \/>select the second one and go to advanced<br \/>positioning<br \/>and change the width to in line as well<br \/>and we can position them even more<br \/>accurately by setting the position to<br \/>absolute so I&#8217;ll go ahead and select<br \/>this image over here and as you can see<br \/>over here we&#8217;ve got position our options<br \/>and I&#8217;ll set it to absolute and as you<br \/>can see the second image jumped to the<br \/>left okay so this is because the moment<br \/>that I set the black semicircle to<br \/>absolute it basically was removed from<br \/>the flow of elements on the page so I&#8217;ll<br \/>go ahead and select the second image and<br \/>I&#8217;ll set its position to absolute as<br \/>well and as you can see now both they&#8217;re<br \/>all they&#8217;re both removed from the flow<br \/>of elements on the page so we can play<br \/>with them and we can position them so<br \/>they look great so I want the the square<br \/>semicircle image I wanted to pick to<br \/>appear in the top right corner and the<br \/>black semi semi circle on the left so<br \/>I&#8217;ll start with the square and semi<br \/>circle so I&#8217;ll go ahead and select that<br \/>and what I&#8217;ll do is I&#8217;ll go to the<br \/>horizontal orientation okay and I&#8217;ll<br \/>just set the horizontal orientation to<br \/>right okay and I&#8217;ll leave the vertical<br \/>orientation to top because I wanted to<br \/>appear at the top and next I&#8217;ll just<br \/>play around with the offset over here so<br \/>I can position them what I&#8217;ll do is I&#8217;ll<br \/>change the unit to percentage so it&#8217;s a<br \/>relative unit which is a better way to<br \/>design for for mobile responsive it&#8217;s<br \/>basically it&#8217;s a relative to to the<br \/>column that it&#8217;s in which is going to be<br \/>help which will help us make it more<br \/>responsive when we make edits for mobile<br \/>and tablets so what I&#8217;ll do is I&#8217;ll go<br \/>ahead and drag this as you can see it<br \/>moves towards the left I&#8217;ll position it<br \/>over there like so and I&#8217;ll change this<br \/>value also to the unit also to<br \/>percentage and I&#8217;ll go ahead and drag<br \/>this up a bit okay that&#8217;s great next for<br \/>the black for the black shape over here<br \/>I&#8217;ll just leave it at top left<br \/>horizontal and vertical orientation and<br \/>I&#8217;ll just change the units to percentage<br \/>and I&#8217;ll go ahead and position them by<br \/>dragging this offset sliders over here a<br \/>little bit up okay that&#8217;s great so<br \/>another way to move them around is to<br \/>just you can drag them as well as you<br \/>can see over here and in order to get it<br \/>to the original it back to the original<br \/>position you can just simply set the<br \/>offset values to zero okay so when<br \/>playing around with these advanced<br \/>settings you sometimes might get<br \/>confused if an image might have<br \/>disappeared but most likely its<br \/>positioned outside the page simply set<br \/>the values to zero again just like I did<br \/>and are you good to go there&#8217;s also a<br \/>great tutorial that I made that explains<br \/>how absolute positioning works and how<br \/>to use it when you&#8217;re designing your<br \/>page so you&#8217;ll get a link to that<br \/>lecture as well okay great so I&#8217;ll just<br \/>go ahead and set these values back that<br \/>I had before this was nine and let&#8217;s see<br \/>there we go and now let&#8217;s bring the the<br \/>let&#8217;s bring these images to life with<br \/>some motion effects so I&#8217;ll select the<br \/>top left image over here and in advanced<br \/>we&#8217;ve got a motion effects drop-down<br \/>okay and I&#8217;ll choose mouse effects so<br \/>I&#8217;ll switch the mouse effects on and<br \/>I&#8217;ll choose Mouse track and it by<br \/>default it&#8217;s set to opposite okay so<br \/>basically when I start moving my mouse<br \/>basically it moves towards the opposite<br \/>direction so I&#8217;m moving over here you<br \/>can see the image moves against me over<br \/>here so I&#8217;ll do that but I&#8217;ll change the<br \/>the motion I&#8217;ll change it to a little<br \/>bit more subtle by controlling it the<br \/>speed so I&#8217;ll just drag it down a bit as<br \/>you can see it&#8217;s it&#8217;s more subtle which<br \/>is cool now let&#8217;s do the same with the<br \/>image on the right<br \/>I go to motion effects okay and I&#8217;ll<br \/>switch on the mouse effects Mouse track<br \/>and for this for this one I&#8217;m going to<br \/>be setting the direction to<br \/>direct okay and I&#8217;ll also make it subtle<br \/>I set it to 0.1 okay so now there&#8217;s this<br \/>playful interaction between the two<br \/>which is great now in order to save some<br \/>time what I&#8217;ll be doing is I&#8217;ll simply<br \/>duplicate both duplicate duplicate okay<br \/>so so we&#8217;ve got another two and I&#8217;ll<br \/>just change this one over here to the to<br \/>the white to the white semicircle in the<br \/>red circle<br \/>okay I&#8217;ll insert that and I&#8217;ll go to<br \/>advanced and now what I&#8217;ll do is I&#8217;ll go<br \/>to positioning and I&#8217;m going to position<br \/>it to the bottom left okay so I&#8217;ve got a<br \/>positioning over here and I&#8217;ll go ahead<br \/>and set the vertical orientation to<br \/>bottom and I&#8217;ll leave the horizontal<br \/>orientation to left and what I&#8217;ll do is<br \/>I&#8217;ll change the units to percentage and<br \/>I&#8217;ll give them the value that I want for<br \/>them to be positioned exactly where I<br \/>want now let&#8217;s go over to the fourth and<br \/>final image over here and we&#8217;ll also<br \/>change it I&#8217;ll change it to the white<br \/>triangle and this red quarter circle<br \/>I&#8217;ll go ahead and insert that and of<br \/>course we&#8217;re gonna be positioned this<br \/>this at the bottom right so I&#8217;ll go to<br \/>advanced and I&#8217;ll go to positioning and<br \/>over here I&#8217;ll go ahead and set this the<br \/>vertical orientation to bottom make sure<br \/>that the values are percentage and I&#8217;ll<br \/>go ahead and set these values to<br \/>position it exactly where I want okay so<br \/>now that we&#8217;ve got this going I&#8217;m going<br \/>to just make a slight change a slight<br \/>adjustment for the motion effects to<br \/>just make it even more playful I&#8217;ve got<br \/>a motion effects and over here I&#8217;ll just<br \/>choose mouse track I&#8217;ll set this to<br \/>rekt and the one on the right I got a<br \/>motion effects and change this to<br \/>opposite so now there&#8217;s a really playful<br \/>interaction over here so really looks<br \/>cool um okay so there&#8217;s a lot of things<br \/>that you can do with motion effects we<br \/>just I just applied a mouse track over<br \/>here there&#8217;s so much more scrolling<br \/>scrolling effects etc so I also send you<br \/>a link to another tutorial that really<br \/>covers all of the motion effects options<br \/>you really get a basic understanding of<br \/>how it works and how you can use it to<br \/>really liven up your pages for example<br \/>you can use it on a restaurant website<br \/>you could add some custom position menu<br \/>items with some motion effects that<br \/>could be an idea okay great so we<br \/>finished with our first section let&#8217;s<br \/>just see if we have some questions over<br \/>here let&#8217;s have a look okay so Laura<br \/>bortles she said is a landing page the<br \/>same as the home page okay so now a<br \/>landing page that&#8217;s got a specific goal<br \/>to to convert visitors to convert them<br \/>into to actual users and the home page<br \/>basically is the hub for a website with<br \/>all internal links leading to about page<br \/>contact us page and there&#8217;s all<br \/>different types of websites of course<br \/>but the main difference is that a<br \/>landing page is geared toward converting<br \/>visitors just like our webinar landing<br \/>page to make sure that you can join this<br \/>really cool webinar okay let&#8217;s see<br \/>Alejandra Carolina and what size and<br \/>format do I have to use before applying<br \/>to my website that really depends on<br \/>your design sometimes in Photoshop you<br \/>can you know slice it and export it in<br \/>very specific dimensions to make it fit<br \/>your design a better on elemental so it<br \/>really depends and there&#8217;s a lot of<br \/>online tools you can use to as<br \/>well to help you out with that Chris<br \/>Kettler says I think negative margins<br \/>are bad is that correct or not<br \/>also is it just part of elemental to get<br \/>used to using negative margins first of<br \/>all they&#8217;re not bad sometimes it&#8217;s<br \/>better to use them compared to using<br \/>absolute position so you might get<br \/>confused with absolute using absolute<br \/>positions so I I just recommend you to<br \/>use it responsibly basically so I hope<br \/>that that answers some questions let&#8217;s<br \/>move on to our second section ok let&#8217;s<br \/>first check it out<br \/>ok so this is the six takeaways you&#8217;ll<br \/>get from attending a webinar where we<br \/>have all of the six takeaways listed<br \/>over here with icons and their text ok<br \/>so let&#8217;s go ahead and I&#8217;m just going to<br \/>be adding a new section with one column<br \/>ok and I&#8217;m going to control its height<br \/>I&#8217;m going to set a min height of 60 VH<br \/>this time okay 60 VH so it takes up 60%<br \/>of the viewport size and what I&#8217;ll do is<br \/>I&#8217;ll set a background image so in style<br \/>I got a background type classic and I&#8217;ll<br \/>go ahead and choose the image over here<br \/>I choose this white circle and I&#8217;ll<br \/>insert it with all of these shapes first<br \/>of all set to repeat you know repeats<br \/>that appears once and now position it<br \/>okay so I&#8217;m going to choose position and<br \/>I&#8217;ll set it to top center so now it&#8217;s<br \/>position in the top and in the center<br \/>and next what I&#8217;ll do is I&#8217;ll just drag<br \/>in a heading widget like sir and I&#8217;ll<br \/>change the text this is going to be the<br \/>six takeaways text so I&#8217;ll go ahead and<br \/>add the text over here as you can see I<br \/>used a break line as well to make sure<br \/>that from attending the webinar will<br \/>always appear under six takeaways you&#8217;ll<br \/>get next what I&#8217;ll do is I&#8217;ll go ahead<br \/>and<br \/>to the center and in style I&#8217;ll change<br \/>the color to black and in typography<br \/>I&#8217;ll change this to Montserrat<br \/>I&#8217;ll set the size to 50 pixels and I&#8217;ll<br \/>control the line height over here I&#8217;ll<br \/>change the unit to pixels and I&#8217;ll<br \/>control it set it to 60 okay great and<br \/>now what I&#8217;m going to be doing is I&#8217;m<br \/>going to be adding some padding on the<br \/>bottom of they have for the next element<br \/>that we&#8217;re gonna be adding so I&#8217;ll just<br \/>go to the headings Advanced tab and I&#8217;ll<br \/>just unlink the padding I&#8217;ll change it<br \/>to percentage like we did before and in<br \/>bottom as you can see it creates some<br \/>padding over there I&#8217;ll just add like 4%<br \/>great so now let&#8217;s just check out the<br \/>page over here right so we&#8217;ve got a<br \/>heading and we&#8217;ve got another kind of<br \/>like part or like section with three<br \/>columns basically inside it okay so<br \/>we&#8217;ve got one main section with a<br \/>heading and then we&#8217;ve got another like<br \/>in a section over here with another<br \/>three columns and another three columns<br \/>okay so how are we going to be doing<br \/>that is we&#8217;re going to be using a widget<br \/>called the intersection widget okay so<br \/>I&#8217;ll just go ahead and show you how to<br \/>to use it I&#8217;ll just drag it in as you<br \/>can see it appears inside okay and over<br \/>here we&#8217;ve got two columns and we need<br \/>three columns so I&#8217;ll just simply right<br \/>click to enter the column settings and<br \/>choose add new column okay so now we&#8217;ve<br \/>got an intersection with three columns<br \/>and what are we going to be dragging in<br \/>these columns our icon box widgets okay<br \/>so icon box which is where we gonna be<br \/>adding the icon and the text that&#8217;s what<br \/>we need so I&#8217;ll go to widgets over here<br \/>and I&#8217;ll go ahead and search for icon<br \/>box and I&#8217;ll drag in the icon box as you<br \/>can see I&#8217;ve got an icon with a heading<br \/>over here and the description now for<br \/>the first icon what I&#8217;m going to be<br \/>doing is I&#8217;m going to be<br \/>using when I have her over here and I&#8217;m<br \/>gonna choose upload SVG I&#8217;ve pre-made<br \/>some SVG&#8217;s over here and I&#8217;m gonna be<br \/>choosing let&#8217;s have a look for the first<br \/>one I&#8217;ll choose this icon and I&#8217;ll<br \/>insert it and I&#8217;m going to be changing<br \/>the text this is going to be the create<br \/>your first live page in WordPress with<br \/>Elementor and what I&#8217;m gonna be doing is<br \/>I&#8217;m just going to delete the title<br \/>because we don&#8217;t need the title I just<br \/>want some basic text over here so there<br \/>we go that&#8217;s our text and let&#8217;s go style<br \/>it a bit I go to style and in the icon<br \/>drop-down I&#8217;ll just I&#8217;ll change the size<br \/>she can second control the size over<br \/>here I&#8217;ll just set this to 60 bring it<br \/>down one that&#8217;s great and in the content<br \/>drop-down what I&#8217;ll do is I&#8217;ll change<br \/>the color of the description okay so I<br \/>deleted the title we don&#8217;t have to style<br \/>that there&#8217;s any description left and<br \/>what I&#8217;ll do is I&#8217;ll just change that to<br \/>black and in typography I&#8217;ll change this<br \/>to montserrat and I&#8217;ll set its size to<br \/>box widget that I like to speed up the<br \/>process what I&#8217;ll do is I&#8217;ll just<br \/>right-click the widget copy and paste it<br \/>into the right column and I&#8217;ll do the<br \/>same thing I already copied it so I&#8217;ll<br \/>just go ahead and paste it again so now<br \/>we have it appear in our base appears<br \/>three times okay and also because I<br \/>wanted to eventually appear six times<br \/>what I&#8217;ll simply do is I&#8217;ll just<br \/>right-click the intersection and I&#8217;ll<br \/>duplicate that as well okay so we&#8217;ve got<br \/>two intersections each intersection has<br \/>three columns and inside each column we<br \/>have in icon widgets okay so this really<br \/>sped up the process all we need to do<br \/>now is change all of the text and the<br \/>images so I&#8217;ll start with the second one<br \/>just choose the second one over here and<br \/>I&#8217;ll go ahead and change the text and<br \/>I&#8217;ll also change the icon now let&#8217;s go<br \/>to the third one find out about how to<br \/>use widgets to build pages faster go<br \/>ahead and change the icon here as well<br \/>for the fourth one learn how to design<br \/>stunning landing pages without code as<br \/>you can see what we&#8217;re doing now there<br \/>we go and I&#8217;ll change I&#8217;ll change this<br \/>to this icon now the fifth one go ahead<br \/>and change the text change the icon and<br \/>the last one preview and publish your<br \/>pages to a live website and that&#8217;s the<br \/>last icon over here okay cool so now in<br \/>order to create a little bit of space<br \/>between these two intersections I&#8217;m<br \/>going to be adding some some padding<br \/>okay I&#8217;m gonna be adding padding to the<br \/>first intersection so they&#8217;ll create<br \/>some space over here so I&#8217;ll select the<br \/>first intersection to enter it settings<br \/>and I&#8217;ll go to advanced and in padding<br \/>over here what I&#8217;ll do is actually now<br \/>I&#8217;m gonna use a margin okay what I&#8217;m<br \/>going to be doing is a margin because we<br \/>want the space to to occur outside the<br \/>section okay the padding is inside the<br \/>section of modules outside so I unlink<br \/>that and I&#8217;ll change it to percentage<br \/>and I&#8217;ll add it to the bottom as you can<br \/>see it creates some space in between<br \/>over here that&#8217;s the margin and that&#8217;s<br \/>great okay so now what I&#8217;m going to be<br \/>doing is I want<br \/>I want these the the intersections I<br \/>want them all to come a little bit<br \/>together so what I&#8217;ll do is I&#8217;ll go back<br \/>to the main section okay I&#8217;ll go to the<br \/>the main section over here and I&#8217;m gonna<br \/>add some padding all around so they so<br \/>all of the the content inside they move<br \/>towards each other just a little bit to<br \/>make it position a little bit better so<br \/>I&#8217;ll go to advanced and I&#8217;ll go to<br \/>padding and I&#8217;ve changed it to<br \/>percentage as well and I&#8217;ll just give it<br \/>three percent all around so that&#8217;s<br \/>that&#8217;s exactly what I was looking for<br \/>and that&#8217;s that&#8217;s the second section<br \/>okay so we&#8217;re moving along nicely over<br \/>here let&#8217;s see if there are any other<br \/>questions okay okay so we&#8217;ve got Robert<br \/>Ruth<br \/>when you&#8217;re duplicating elements with<br \/>motion effects settings applied there&#8217;s<br \/>the duplication take the motion settings<br \/>as well yes it does<br \/>we just did that I&#8217;m sorry if it wasn&#8217;t<br \/>clear at the moment that you duplicate a<br \/>widget all of the settings that you<br \/>applied to the widget they&#8217;re<br \/>automatically duplicated that gets<br \/>exactly the same and this is why after I<br \/>duplicated it I actually changed the<br \/>motion effects as well you could see I<br \/>change the direction so yes I hope that<br \/>answers the question okay great so let&#8217;s<br \/>move on to our third and final section<br \/>let&#8217;s first check it out okay so this is<br \/>this is the section where we&#8217;ve got a<br \/>form widget we&#8217;re going to be styling it<br \/>using the form builder and we&#8217;ve got a<br \/>title over here and also the the button<br \/>in the first section when you click it<br \/>will automatically bring us to this<br \/>third section so let&#8217;s start building<br \/>this third section great so what I&#8217;m<br \/>going to be doing is I&#8217;m going to be<br \/>adding a section with two columns okay<br \/>and I&#8217;m gonna give it a min height<br \/>of 70 VH and I&#8217;m gonna give it a<br \/>background image in style<br \/>I&#8217;ll choose background type and I&#8217;ll<br \/>choose image over here and we&#8217;ll choose<br \/>this little red square go ahead and set<br \/>the repeat to no repeats that appears<br \/>once and I&#8217;m gonna position it to the<br \/>center on the right like so now it<br \/>appears on the right and just to save<br \/>some time what I&#8217;m going to be doing is<br \/>I&#8217;m just going to go up to the first<br \/>section I&#8217;m gonna be copying with the<br \/>big heading and simply pasting it over<br \/>here and what I&#8217;ll do as well is I&#8217;ll<br \/>just copy the icon list widget and I&#8217;ll<br \/>paste it here as well just to save some<br \/>time and now change the text the text<br \/>over here is going to be the savior seat<br \/>so I&#8217;ll select the heading and I&#8217;ll go<br \/>ahead and change the text now we need to<br \/>style it a bit so in style and<br \/>typography I&#8217;ll make it bigger I&#8217;ll<br \/>change it to 120 pixels let&#8217;s remove the<br \/>underline in decoration or set it back<br \/>to default and in line height we&#8217;ll<br \/>create a little bit more space over here<br \/>so I&#8217;ll increase that like so and that&#8217;s<br \/>great now let&#8217;s create some space in<br \/>between these two widgets so what I&#8217;ll<br \/>do is I&#8217;ll go to advanced okay so I&#8217;m in<br \/>the heading widget I&#8217;m going to advanced<br \/>and I&#8217;ll unlink the padding I&#8217;ll change<br \/>it to percentage and on the bottom I&#8217;ll<br \/>give it I&#8217;ll just increase it like so<br \/>just to create some padding over here<br \/>great now now what I&#8217;ll do is I&#8217;ll<br \/>basically our position the widgets in<br \/>this column on the left a little bit<br \/>towards the the left okay so I&#8217;ll create<br \/>some space on the right by using a<br \/>padding in the column okay so in order<br \/>to do that I&#8217;ll get to go to the column<br \/>settings over here and in advanced I&#8217;ll<br \/>go ahead and unlink the padding I&#8217;ll<br \/>change it to percentage as well and all<br \/>I&#8217;ll do is I&#8217;ll just give<br \/>fifteen percent on the top as you can<br \/>see 15 on the top and I&#8217;ll give it 15<br \/>percent on the right I guess I&#8217;ve got 15<br \/>percent on the top and 15 on the right<br \/>so now all the text is positioned<br \/>towards the left which is exactly what I<br \/>was looking for and now we are ready now<br \/>we are ready to to drag in a form<br \/>widgets okay so I&#8217;ll go to the widgets<br \/>when you start designing the form in the<br \/>column on the right so I&#8217;ll just go<br \/>ahead and search for form and I&#8217;ll drag<br \/>it in over here okay great<br \/>first of all I&#8217;m just gonna give this<br \/>form a name okay so this is gonna be<br \/>create your first LP webinar don&#8217;t do<br \/>that like sir okay and that&#8217;s just the<br \/>name for the form right we don&#8217;t we<br \/>can&#8217;t see it and what I&#8217;ll do is I&#8217;ll<br \/>change I&#8217;ll enter here we got all of the<br \/>form fields right you can see name email<br \/>messages that&#8217;s what we see here so I&#8217;ll<br \/>just go to the messages field and I&#8217;ll<br \/>change the placeholder text okay that&#8217;s<br \/>the text that you see inside the field<br \/>so I&#8217;ll just change that to what are<br \/>your expectations from the webinar so<br \/>I&#8217;ll just go ahead and add that&#8217;s in the<br \/>placeholder as you can see it appears<br \/>over here and I can also control the<br \/>amounts of rows over here so I&#8217;ll just<br \/>change that to three so it&#8217;s just a<br \/>little bit less that was 4 this is 3<br \/>great so I&#8217;m gonna be keeping the name<br \/>field the email field the message field<br \/>and we&#8217;re gonna be adding a new field a<br \/>new item okay and when we do that we can<br \/>choose the type so I&#8217;m gonna set the<br \/>type we&#8217;ve got a lot of choices over<br \/>here<br \/>I want to choose text area just like the<br \/>message field and I&#8217;ll also I&#8217;ll give it<br \/>a placeholder text over here how long<br \/>have you been using Elemental okay so<br \/>you can fill that in over there great<br \/>I&#8217;ll change it to 3 rows as well and<br \/>I&#8217;ll change the input size to medium so<br \/>it just makes everything just a little<br \/>bit bigger<br \/>and next I&#8217;ll just hide the label as you<br \/>can see message email name it all<br \/>disappears that&#8217;s cool that&#8217;s that&#8217;s<br \/>what I want for my design<br \/>and next let&#8217;s go over to the submit<br \/>button drop down and over here I&#8217;m going<br \/>to change the button text I wanted to<br \/>say save my seat<br \/>so in text that&#8217;s gonna say save my seat<br \/>and I want the button to be aligned to<br \/>the left okay great so in the next drop<br \/>down we have actions after submit okay<br \/>what we can do over here is we can add<br \/>for example MailChimp okay and when at<br \/>the moment that I do that you&#8217;ll see<br \/>that there&#8217;s a MailChimp drop down and<br \/>in the drop down you can choose the API<br \/>key and you can choose the audience as<br \/>well so I also send you another link<br \/>that you&#8217;ll get that explains basically<br \/>how to use this for email marketing<br \/>platforms which you can set up with<br \/>forms to integrate with elementals prose<br \/>form builder it also includes the<br \/>additional options where you can add a<br \/>form ID and you can also set up custom<br \/>messages okay great<br \/>so let&#8217;s start a forum I&#8217;ll go to style<br \/>and in the form drop-down I&#8217;m gonna go<br \/>to Rose Gap and I&#8217;m gonna increase it a<br \/>bit that&#8217;s the space between the rows<br \/>over there I&#8217;ll do that and let&#8217;s go to<br \/>the field drop-down lets style that I&#8217;m<br \/>just gonna change the text color to a<br \/>little bit darker gray I don&#8217;t know if<br \/>you can see it but it&#8217;s just a little<br \/>bit darker I&#8217;ll also go to typography<br \/>over here and I&#8217;ll increase the letter<br \/>spacing I wanted to spread out a bit as<br \/>you can see it spreads out that&#8217;s good I<br \/>also want to remove the border I don&#8217;t<br \/>want the border to be there so I&#8217;ll just<br \/>set it to zero so there&#8217;s no border<br \/>whatsoever and I wanted to make it<br \/>pill-shaped as well so I&#8217;ll just give it<br \/>a border radius of 25 pixels<br \/>and in the baton drop-down we can style<br \/>the baton what I&#8217;ll do is I&#8217;ll set the<br \/>background color to red okay so I go to<br \/>background color and here&#8217;s the red that<br \/>that we saved before it&#8217;s in our color<br \/>picker easier and accessible so I just<br \/>quickly select that I&#8217;ll set the text<br \/>color to white okay<br \/>and in typography what I&#8217;ll do is I&#8217;ll<br \/>set this to month surrett 16 pixels set<br \/>the weight to 600 a little bit bolder<br \/>uppercase that&#8217;s great I&#8217;ll play around<br \/>with the line height okay make it luck<br \/>sir that&#8217;s great<br \/>and the letter spacing as well just play<br \/>around with it okay that&#8217;s cool and next<br \/>let&#8217;s make it pill-shaped as well border<br \/>radius 50 pixels all around and I want<br \/>to give it some custom text padding over<br \/>here so I&#8217;ll unlink the values I&#8217;ll<br \/>leave it at pixels and I&#8217;ll simply set<br \/>bottom and 35 to the right and 35 to the<br \/>left okay great so now what we need to<br \/>do is we need to position the the form a<br \/>little bit better in the column in<br \/>relationship to the left column so what<br \/>we&#8217;re going to be doing is we&#8217;re also<br \/>going to be going to to add some padding<br \/>to the column like we did before so I&#8217;ll<br \/>go enter the column settings here and in<br \/>advanced padding I&#8217;ll go ahead and<br \/>unlink the values I&#8217;ll change the unit<br \/>to percentage and I&#8217;ll go ahead and give<br \/>it 15 percent on top as you can see I&#8217;ll<br \/>give you I&#8217;ll give it 15 percent on the<br \/>right and I&#8217;ll give it 15 percent on the<br \/>bottom and on the left I&#8217;ll leave it as<br \/>is because we already have the space<br \/>over here so now it&#8217;s positioned exactly<br \/>the way I like<br \/>okay so like I mentioned before we can<br \/>save widgets as global widgets which<br \/>means we can use them all over the site<br \/>and we can edit them in one place and<br \/>this is going to come in handy when we<br \/>use when we create multiple landing<br \/>pages in order to do that simply<br \/>right-click and say save as global and<br \/>here I&#8217;ll just call it web in our form<br \/>and then save and as you can see over<br \/>here in global we&#8217;ve got a global widget<br \/>and we can just edit it and we can drag<br \/>it in on new landing pages that we use<br \/>and all the changes that I apply here<br \/>you can see there&#8217;s this orange border<br \/>over here over all the changes that I<br \/>apply they&#8217;ll be applied everywhere I&#8217;ve<br \/>inserted this global widgets okay so now<br \/>now all that we need we need to do is<br \/>set the first set of button in the first<br \/>section to scroll down automatically to<br \/>the third section okay so we wanted to<br \/>scroll to the third section which means<br \/>we need to go to the third second of the<br \/>third section settings okay and in<br \/>advanced what we&#8217;re gonna be doing is<br \/>we&#8217;re gonna give it a CSS ID we&#8217;re gonna<br \/>be adding that over here this is just a<br \/>name it can be any description or you<br \/>know any description word that you want<br \/>just make sure that there aren&#8217;t any<br \/>spaces so I&#8217;ll go ahead and choose save<br \/>seat okay and what I&#8217;ll do is I&#8217;ll I&#8217;ll<br \/>copy this and very simply I&#8217;ll just go<br \/>to my batten settings okay and in<br \/>content like I mentioned before in link<br \/>just make sure that the pound key is<br \/>still over there and just paste the CSS<br \/>ID that you added save seat and the<br \/>moment that you do that the moment that<br \/>you press the button it will<br \/>automatically scroll down to the third<br \/>section so that&#8217;s that&#8217;s really cool now<br \/>let&#8217;s just open up the navigator okay<br \/>like I mentioned before the Navigator<br \/>was empty because we didn&#8217;t build<br \/>anything now we&#8217;ve almost finished our<br \/>page all we need to do is just tweak<br \/>a little bit for Responsive in mobile so<br \/>I&#8217;ll go ahead and open up the navigator<br \/>and as you can see all of our content<br \/>over here we can we can see everything<br \/>okay so we&#8217;ve got all of the sections<br \/>we&#8217;ve got the three sections over here<br \/>and inside the sections we&#8217;ve got the<br \/>columns and inside the columns we&#8217;ve got<br \/>all of the widgets and very cool you can<br \/>just press you can click it and it will<br \/>drag you automatically to the column and<br \/>you&#8217;re in the column settings already<br \/>let&#8217;s go to second section we&#8217;re<br \/>automatically in the second section so<br \/>this is really really comes in really<br \/>handy to get an overview of your page<br \/>and another cool thing is you can double<br \/>double-click the the section over hand<br \/>you can give it a name so I&#8217;ll call this<br \/>the hero section okay and the second one<br \/>I&#8217;ll call it takeaways section okay and<br \/>the third one I&#8217;ll call form and this<br \/>will help us out when when we busy<br \/>tweaking as well for mobile and tablet<br \/>so we really know what we what we&#8217;re<br \/>doing and what widget we actually are<br \/>and what we reading so that&#8217;s cool now<br \/>another cool thing is that you can see<br \/>over here let&#8217;s just open app we&#8217;ve got<br \/>custom positioned images and motion<br \/>effects we&#8217;ve got them in the first<br \/>section in the second column okay so the<br \/>first section in the second column as<br \/>you can see there&#8217;s a blue label over<br \/>here indicating that we&#8217;ve got custom<br \/>positioned images and we&#8217;ve got motion<br \/>effects as well so this is really cool<br \/>we can really get a clear overview of<br \/>all of the things that we added to our<br \/>page which really comes in handy<br \/>okay so potential customers they&#8217;ll view<br \/>this page on the mobile devices so let&#8217;s<br \/>see how to make some responsive<br \/>adjustments to make your design look<br \/>great on mobile as well what I&#8217;ll be<br \/>doing is tweaking the first section so<br \/>you can see exactly how it works what<br \/>you need to do is just simply enter the<br \/>responsive mode over here and what I&#8217;ll<br \/>do is I&#8217;ll choose tablet um and I just<br \/>want to show you a quick tip I don&#8217;t<br \/>know if you already know I know it or<br \/>not but it&#8217;s something that I use when<br \/>designing for mobile and tablets is<br \/>using the column<br \/>column width setting okay so what I can<br \/>do over here is I can give the left<br \/>column for example I can set it to take<br \/>up 60% of the entire width and I&#8217;ll just<br \/>select the second column and I&#8217;ll set<br \/>that to it needs to be a hundred percent<br \/>right so I&#8217;ll just set that to forty<br \/>okay so now we&#8217;ve got 60% and 40% and<br \/>this is only applied on tablet so this<br \/>is the responsive tablet handle over<br \/>here so this is only for tablet right so<br \/>I&#8217;m not going to be using this I&#8217;ll just<br \/>go ahead and delete it and I&#8217;ll delete<br \/>the 60 that I set and what I&#8217;ll do is<br \/>I&#8217;ll go to I go to mobile okay there we<br \/>go and I&#8217;ll just go ahead and I&#8217;ll go to<br \/>the first section so I just simply click<br \/>here Oh<br \/>as you can see I&#8217;m already in the hero<br \/>section settings over here and I&#8217;ll go<br \/>to advanced and as you can see there is<br \/>a responsive drop-down<br \/>okay so there&#8217;s there are a couple of<br \/>responsive settings that you can use<br \/>over here the first one is that I want<br \/>to show is reverse columns the first<br \/>column here is with the text the webinar<br \/>the second column is with the images so<br \/>the moment that I choose reverse column<br \/>for mobile only anybody that opens this<br \/>page on mobile they&#8217;ll first see the<br \/>image and then they&#8217;ll see the text so<br \/>this might come in handy we&#8217;re trying to<br \/>create a specific layout for mobile<br \/>that&#8217;s different on on desktop so you<br \/>can use that and another thing another<br \/>powerful tool that you can use is the<br \/>visibility so you can also choose to<br \/>just hide this whole section if you want<br \/>to on mobile so just choose hide and the<br \/>the it&#8217;s grayed out indicating that it&#8217;s<br \/>hidden so you can just remember that you<br \/>hide the panel over here at you just you<br \/>don&#8217;t see it anymore<br \/>okay so it&#8217;s not there on mobile which<br \/>is great now I&#8217;m not going to be I&#8217;m not<br \/>going to be doing that okay so first of<br \/>all let&#8217;s start tweaking this for for<br \/>mobile okay I don&#8217;t know if you paid<br \/>attention but<br \/>the Elemental logo over here basically<br \/>just disappeared because we gave it a<br \/>negative top margin in desktop mode okay<br \/>so whatever you define on the desktop<br \/>mode it&#8217;s automatically applied here by<br \/>default so first of all what I can do to<br \/>find it is I can just go to here oh<br \/>that&#8217;s in the first column that I know<br \/>and I&#8217;ve got an image over here okay I<br \/>already know that it&#8217;s this image<br \/>because there&#8217;s only one so but if you<br \/>want to check contents over here now I&#8217;m<br \/>that I was looking for and as I<br \/>mentioned before let&#8217;s go to advanced<br \/>all of the settings over here that I set<br \/>in defaults the negative margin they&#8217;re<br \/>automatically a plant so technically<br \/>there&#8217;s a negative top margin of 100<br \/>pixels in order to remove that simply<br \/>unlink the values okay so at the moment<br \/>that I unlink the values that the<br \/>negative 100 pixels just disappears and<br \/>now we can set them individually for<br \/>Birbal for this mobile responsive mode<br \/>what I&#8217;m going to be doing is I&#8217;m going<br \/>to style and I just want to increase the<br \/>size of the of the logo so over here you<br \/>can see I&#8217;ve got the width as you can<br \/>see this is the mobile responsive handle<br \/>for mobile I can set it for tablet and<br \/>desktop everywhere you see these mobile<br \/>handles the responsive handles means<br \/>that you can change this value for for<br \/>either mobile tablet or desktop and it&#8217;s<br \/>only going to be applied for that<br \/>devices screen size so what I&#8217;ll do is<br \/>I&#8217;ll just drag this I&#8217;ll increase the<br \/>size a bit 40% and what I&#8217;ll do is in<br \/>content I&#8217;ll align it to the center and<br \/>next I&#8217;m gonna tweak the icon list<br \/>widget I also I go to style and in list<br \/>I also align it to the centre and in the<br \/>text drop-down I&#8217;ll just change the text<br \/>size so in typography I&#8217;ll just change<br \/>the text size to 16 as you can see it<br \/>fits a lot better now when it&#8217;s smaller<br \/>what I&#8217;ll do is I will<br \/>go to advanced okay and I&#8217;ll unlink the<br \/>padding over here and I&#8217;ll change it to<br \/>percentage and I&#8217;ll add some padding on<br \/>top to create some space okay that&#8217;s<br \/>cool next I&#8217;ll select the heading widget<br \/>also over here what I&#8217;m gonna be doing<br \/>is in content I&#8217;ll align it to the<br \/>center and in style I&#8217;m gonna be<br \/>changing the size and needs to be a lot<br \/>smaller 36 pixels need to play with the<br \/>line height over here as well um I&#8217;ll<br \/>just set this at 48 pixels there we go<br \/>and the letter spacing I&#8217;ll play around<br \/>with that as well negative 2 okay that<br \/>looks that looks cool okay that&#8217;s great<br \/>now what I&#8217;ll do is I&#8217;ll go to advanced<br \/>and also unlink the padding over here<br \/>I&#8217;ll change it to percentage and on top<br \/>I&#8217;ll create some space next I&#8217;ll go to<br \/>the batten widget I&#8217;ll align it to the<br \/>center and I&#8217;ll just go to advanced over<br \/>here and link the padding set it to<br \/>percentage and add some padding on top<br \/>some padding on the bottom and I&#8217;ve<br \/>chosen to to not show these custom<br \/>positioned images on mobile so basically<br \/>I&#8217;m going to hide them on mobile<br \/>like I saw showed you before simply<br \/>select it go to responsive and over here<br \/>we can just choose hide on mobile so<br \/>it&#8217;s grayed out okay I&#8217;ll just go ahead<br \/>and select I&#8217;ll select this one as well<br \/>I&#8217;ll go to positioning sorry I&#8217;ll go to<br \/>responsive hat on mobile and on the<br \/>bottom left I&#8217;ll also go to responsive<br \/>hard on mobile and the last one<br \/>responsive<br \/>on mobile as you can see now we don&#8217;t<br \/>see the custom position images on mobile<br \/>which is great okay now let&#8217;s select the<br \/>image over here there we go that&#8217;s the<br \/>image and I&#8217;m just gonna I&#8217;m gonna make<br \/>it a little bit smaller okay so for<br \/>width I&#8217;ll go ahead and drag this to<br \/>just make it smaller 60%<br \/>once again responsive handles over here<br \/>this is only for mobile it&#8217;s gonna be<br \/>this size for mobile and that fits a lot<br \/>better okay now let&#8217;s go back to the<br \/>section settings so I&#8217;ll go ahead and<br \/>scroll up and choose hero and I want to<br \/>change the background image that we set<br \/>overheads that I don&#8217;t like the way that<br \/>it looks on mobile so what I&#8217;ll do is<br \/>I&#8217;ll just go to style and I&#8217;ll get a<br \/>background over here and I&#8217;ll just<br \/>change the position ok the position is<br \/>also mobile responsive I&#8217;ll change it to<br \/>top right so now it&#8217;s positioned over<br \/>there and I&#8217;ll give it a custom size<br \/>okay also mobile responsive I&#8217;ll give it<br \/>a custom size and I&#8217;ll set that I set<br \/>that to 250 pixels okay<br \/>let&#8217;s see I think that&#8217;s it that&#8217;s good<br \/>that&#8217;s great for my mobile what I&#8217;ll do<br \/>it now is I&#8217;ll just close the navigator<br \/>and I go back to desktop mode over here<br \/>okay great so we&#8217;re nearing the end of<br \/>the webinar are there any questions I&#8217;ll<br \/>just have a look over here if there any<br \/>questions let&#8217;s have a look<br \/>is there a specific theme in WordPress<br \/>that works well with elemental or it<br \/>doesn&#8217;t matter of the theme ok so<br \/>especially if you have elemental Pro<br \/>user you should go with elementals hello<br \/>theme it&#8217;s very lightweight and doesn&#8217;t<br \/>come with a lot of blood that other<br \/>themes do come with and you can really<br \/>use all of elemental features basically<br \/>to create a lot of things if you&#8217;re<br \/>creating landing pages if you&#8217;re<br \/>creating full-fledged websites out go<br \/>for hello theme let&#8217;s have a look to<br \/>explain the difference between padding<br \/>and margin okay let&#8217;s just quickly have<br \/>a look over here<br \/>and as you can see we have let&#8217;s see<br \/>let&#8217;s see let&#8217;s see we have a section ok<br \/>so inside the section all of the space<br \/>that we&#8217;ve got inside it that&#8217;s<br \/>basically padding okay so if we go to<br \/>advanced um as you can see this is all<br \/>three so I&#8217;ll just increase it the<br \/>moment that I increase it it adds the<br \/>padding okay on the bottom over there or<br \/>actually this is on the top of the<br \/>section so it adds the padding I&#8217;ll set<br \/>it back to three and if I choose margin<br \/>okay let&#8217;s say on top and I&#8217;ll change it<br \/>to percentage as well then it creates<br \/>space above it in between the two<br \/>sections okay so that&#8217;s the basic<br \/>explanation I hope that it&#8217;s clear okay<br \/>cool let&#8217;s see are there any other<br \/>questions okay so I just want to remind<br \/>you that the video is going to be<br \/>available on on the channel I&#8217;m gonna be<br \/>let&#8217;s have a look wrapping up the<br \/>webinar soon so the last thing that we<br \/>need to do basically is we can preview<br \/>the website and we can publish okay so<br \/>I&#8217;ll go ahead and press preview here<br \/>we&#8217;ve got our page the moment we can<br \/>interact with it the moment that I press<br \/>save my seat brings us to the forum<br \/>directly<br \/>and and that&#8217;s great so I previewed it<br \/>and I&#8217;m happy with it<br \/>so what I&#8217;ll do is I&#8217;ll go ahead and<br \/>choose publish okay so everybody with<br \/>with this link they can cheat and they<br \/>can pre they can check out your live<br \/>page and they&#8217;ll be able to see it and<br \/>what you can also do is you can save<br \/>this page as a template so basically<br \/>what it does is it adds a template of<br \/>the entire page to the library so I can<br \/>I can call this landing page pro okay so<br \/>this is a template or save it and this<br \/>way as you can see I&#8217;ve got templates a<br \/>via landing page pro I can preview and<br \/>insert it I&#8217;ll go ahead and close this<br \/>and this way you can use and reuse pages<br \/>very quickly which will save you a lot<br \/>of time and you can simply access that<br \/>over here you can insert it on a page<br \/>you can insert the whole template like<br \/>so you can also do this for sections if<br \/>I want to use this contact us or the<br \/>contact page the form section if I want<br \/>to save this as a template I can<br \/>right-click the section and choose save<br \/>as templates and just call this form<br \/>template like so and just save it and<br \/>there we go we got the form template<br \/>which we can simply insert so I&#8217;ll just<br \/>go ahead and choose insert on the page<br \/>and now it appears twice so I can just<br \/>use this I can use this very easily on<br \/>the fly to create to create these<br \/>landing pages another tool that really<br \/>saves a lot of time is the finder okay<br \/>to use it you can simply click a click<br \/>command or control e depending if you&#8217;re<br \/>on a Mac or if you&#8217;re on a PC so I&#8217;ll go<br \/>ahead and choose commanding come on e as<br \/>you can see we&#8217;ve gotta find out over<br \/>here and you can search for you know<br \/>where you want to go what you want to do<br \/>and essentially is a search bar for that<br \/>offers easy navigation between different<br \/>pages and dashboard settings what we can<br \/>use we can also create a new page very<br \/>quickly we can switch between pages<br \/>preview pages for example if I type in<br \/>add new I can vary<br \/>easily add a new page etc okay so let&#8217;s<br \/>let&#8217;s just bring myself back into the<br \/>frame over here like so there we go okay<br \/>so this is this is just the tip of the<br \/>iceberg there&#8217;s really there&#8217;s so much<br \/>more that you can learn elemental pro<br \/>provides you with a lot of tools to<br \/>create highly converting landing pages<br \/>also full fledged websites such as the<br \/>form widget that we use today motion<br \/>effects to really help bring your design<br \/>to life pop-ups to keep your visitors<br \/>engaged a theme builder to visually<br \/>customize your website&#8217;s headers footers<br \/>archive pages single post pages and a<br \/>lot of other areas on your site and a<br \/>lot more also you know the more that you<br \/>learn the better ural you&#8217;ll be able to<br \/>design and and really improve the<br \/>workflow so I hope that I managed to<br \/>bring across my workflow and I hope it<br \/>helps you out with your doing it to<br \/>improve your your own skills and I<br \/>really think that you&#8217;re ready to take<br \/>your first steps and create your own<br \/>landing page and really you know proudly<br \/>publish them and make them mug and make<br \/>them go live I&#8217;d like to invite you to<br \/>join our Facebook group they&#8217;re really<br \/>it&#8217;s full of load loads of helpful tips<br \/>and tricks&#8217; a big big big community of<br \/>like-minded web creators everybody&#8217;s<br \/>helping each other out to become better<br \/>at what they do<br \/>also don&#8217;t forget to subscribe to our<br \/>youtube channel that&#8217;s full of all<br \/>different types of tutorials to really<br \/>help you master Elementor and lastly on<br \/>our website also we can check out the<br \/>Help Center for easy access to the<br \/>knowledge base fa Q&#8217;s Doc&#8217;s and a lot<br \/>more let&#8217;s see<br \/>okay and also at last I&#8217;d just like to<br \/>remind you that we&#8217;ll send a link with<br \/>all of the materials that are needed to<br \/>create this specific landing page so you<br \/>you know feel free to re-watch it you<br \/>can recreate recreate the page step by<br \/>step also it&#8217;s very important to know<br \/>that you can apply these skills to to<br \/>create your own attractive and<br \/>converting landing pages for different<br \/>types of businesses not to say for you<br \/>know webinars like I mentioned before<br \/>hospitality industry restaurants<br \/>software is the service companies Jim<br \/>Jim&#8217;s ecommerce and and a lot more and<br \/>so I wish you good luck and and most<br \/>importantly it&#8217;s it&#8217;s always important<br \/>to enjoy being creative so thanks for<br \/>tuning in and ciao for now<\/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 Pro 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 we go hi and welcome to this elemental probe basics webinar my name is Eve and [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":9722,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[47],"class_list":["post-1860","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>Elementor Pro Live Webinar: Create Your First Landing Page - 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\/elementor-pro-live-webinar-create-your-first-landing-page\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Elementor Pro Live Webinar: Create Your First Landing Page - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview Welcome to the Elementor Pro 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 we go hi and welcome to this elemental probe basics webinar my name is Eve and [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/elementor-pro-live-webinar-create-your-first-landing-page\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-20T13:37:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-30T08:17:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Create-an-Art-Gallery-Landing-Page.jpg\" \/>\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\/jpeg\" \/>\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=\"51 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Elementor Pro Live Webinar: Create Your First Landing Page - 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\/elementor-pro-live-webinar-create-your-first-landing-page\/","og_locale":"en_US","og_type":"article","og_title":"Elementor Pro Live Webinar: Create Your First Landing Page - Academy","og_description":"Overview Transcript Overview Welcome to the Elementor Pro 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 we go hi and welcome to this elemental probe basics webinar my name is Eve and [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/elementor-pro-live-webinar-create-your-first-landing-page\/","og_site_name":"Academy","article_published_time":"2021-06-20T13:37:06+00:00","article_modified_time":"2023-04-30T08:17:54+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Create-an-Art-Gallery-Landing-Page.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"51 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/elementor-pro-live-webinar-create-your-first-landing-page\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/elementor-pro-live-webinar-create-your-first-landing-page\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"Elementor Pro Live Webinar: Create Your First Landing Page","datePublished":"2021-06-20T13:37:06+00:00","dateModified":"2023-04-30T08:17:54+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/elementor-pro-live-webinar-create-your-first-landing-page\/"},"wordCount":12390,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/elementor-pro-live-webinar-create-your-first-landing-page\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Create-an-Art-Gallery-Landing-Page.jpg","keywords":["Webinars"],"articleSection":["Design \/ Layout"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/elementor-pro-live-webinar-create-your-first-landing-page\/","url":"https:\/\/elementor.com\/academy\/elementor-pro-live-webinar-create-your-first-landing-page\/","name":"Elementor Pro Live Webinar: Create Your First Landing Page - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/elementor-pro-live-webinar-create-your-first-landing-page\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/elementor-pro-live-webinar-create-your-first-landing-page\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Create-an-Art-Gallery-Landing-Page.jpg","datePublished":"2021-06-20T13:37:06+00:00","dateModified":"2023-04-30T08:17:54+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/elementor-pro-live-webinar-create-your-first-landing-page\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/elementor-pro-live-webinar-create-your-first-landing-page\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/elementor-pro-live-webinar-create-your-first-landing-page\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Create-an-Art-Gallery-Landing-Page.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Create-an-Art-Gallery-Landing-Page.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/elementor-pro-live-webinar-create-your-first-landing-page\/#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":"Elementor Pro Live Webinar: Create Your First Landing Page"}]},{"@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\/1860","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=1860"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1860\/revisions"}],"predecessor-version":[{"id":9557,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1860\/revisions\/9557"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/9722"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=1860"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=1860"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=1860"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}