WireFraming Landing Page - Lesson 1

Lesson Details:

This course is brought to you by Appy Pie as part of our Academy series. In this section we are going to be wire framing a landing page a landing page is a page a user generally lands on after clicking a link on social media it does not have any header links this is to ensure the user is not distracted and does not click away from the page this is used to capture leads and contact information and make targeted sales in this section we are designing a landing page which is dedicated to selling an online course we will be using a reference page from Elementor for this landing page wireframe open a new project and head over to the quick add toolbar and drag down a browser window I want you to resize the browser window to simulate a mobile screen position it and drag down the browser so that we can't get a length a scrollable or by browser window that's it lock the object by right-clicking it head over to the quick add toolbar and drag down a title position the title in the center and change the content of the title to learn wireframing reduce the size to 24 now head over to the quick add tool bar and drag down an image this is going to be the background cover image let's drag the cover image into position and right click on the cover image and select bring it forward or bring to front this means it is going to be layered on top of the text thus the text get hidden resize the image to fill the entire browser window once you are aligned it right click on the image again and select send to back you can see the text has resurfaced again go to the quick add toolbar and search for a block of text drag the block of text below the title and align the same a toolbar and drag down a button align the button below the block of text now select the background image and hold alt + option to create another copy of the same and drag it below it select the block of text and again by holding the option key drag down between the gap of the newly created image rectangle and resize it a bit more the image down a little bit head over to the quick to bar to drag down another image UI element you position the image option key and create copies of the same select all the images and align them with respect to each other and the image rectangle below go to the quick add tool bar and select subtitle drag the subtitle below the image and rename it to what will I learn reduce the size to 14 and align it again head over to the quick add toolbar and select text clear the content presented it to create points select the hyphen key and enter the text to create a new point press ENTER to get a new line and again start with a hyphen to create a new line I'm deliberately making an error over here which you'll understand in a couple of seconds ahead once it's done you can still make out that it does not look like a point list the error is because I did not give a spacing between the - and the text once we add the spacing we can see that it looks like a perfect list item let's just correct the alignment a little bit and also increase the size of the text window now select the list and hold on the option key and create a copy of it right next to the same list let's just edit out one of the lines so that it looks properly and perfectly aligned it's looking great we have completed three sections of the landing page right now let's just correct the alignment a little bit and have a look of what we have achieved so far excellent unlock the browser and extend the browser by dragging it down below if you're annoyed by dragging down every time you can go to the inspector and increase the height of the browser to an approximate figure now have to get a divider in place head over to the quick add toolbar in balsamic getting a horizontal line of text is called Hetch rule you can just type line an actual object would be displayed align the Hetch rule so that it is below the text and go to the quick add tool bar and select circle reduce the circle size to M or rather s drag at night next to the head rule so that it's right in the center hold down an option key and drag down another copy of the head shrew thereby completing the divider hold down the option key and drag down the subtitle and rename it to curriculum and position it to the center we are now going to be learning an important topic in balsamic called grid chart grid chart enable you to display information in a spreadsheet like manner and will come handy when you have to display information in the form for grid head over to the quick add toolbar and drag down data cred and position it below the subtitle curriculum looking at the reference website we can make out we need three columns double-click on the data grid and delete the first line at a title comma lectures comma duration and delete the rest and hit enter separating the words with a comma tells pal semuc that it needs to create a new caller begin typing the contents required to be filled under the columns in the same order remember to separate each word with a comma so that we can tell pal Semak that they need to be placed under the same columns also even if you had an extra comma a mistake in any of the lines balsamic is gonna understand that a new column has to be created for the same I have deliberately an error over here to show you finance to you if you spotted but you will see whatever have made shortly you and see that there's an additional column over here remember even if you add an extra comma balsamic is gonna create a new column for you so let's get rid of the extra column on the third line and this should take the error away and extra column along with it.