In this section we are going to be wireframing 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 get a scrollable mobile browser window. That's it.
Lock the object by right clicking it. Head over to the Quick Access toolbar and drag down a title. Position the title in the center and change the content of the title to loan wireframing reduce the size to 24. Now head over to the quick ad toolbar 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. Does the text get hidden. resize the image to fill the entire browser window. Once you're aligned it, right click on the image again and select Send to pack. 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. Now go back to the quick toolbar and drag down a button. Align the button below the block of text Now select the background image and hold Alt and 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 cap of the newly created image rectangle and resize it a bit. Move the image down a little bit. Head over to the Quick Access toolbar to drag down another image UI element.
Position the image holding down the option key and create copies of the same. Select all the images and allow them with respect to each other, and the image rectangle below. Go to the quick add toolbar and select subtitle. Drag the subtitle below the image and rename it to walk the line alone. reduce the size to 14 and align it again. Head over to the quick add toolbar and select text to the content presented.
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 will understand in a couple of seconds. Once it's done, you can still make out that it does not look like a point list. There This because I did not give a spacing between the hyphen and the text.
Once we add 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 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 toolbar. In balsamic getting a horizontal line of text is called headshot. You can just type line and actual object would be displayed.
Align the head true so that it is below the text and go to the quick cat toolbar and select circle. Reduce the circle size to M or either s Dragon Knight next to the head shoe so that It's right in the center, hold on an option key and drag down another copy of the hedge 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 charts. Grid charts 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 grid 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 the title, comma, lectures, comma, duration and delete the rest and hit enter. Step separating the words with a comma tells balsamiq that it needs to create a new column. 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 balsamic that they need to be placed on Under the same columns. Also, even if you add an extra comma by mistake, in any of the lines, balsamic is going to understand that a new column has to be created for the same.
I have deliberately made an error over here to show you points to you if you spot it, but you will see what I have made shortly and see that there's an additional column over here. Remember, even if you add an extra comma, balsamic is going to 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.