Click all the elements of the divider and hold control to duplicate the same. Let's see what the next section of the landing page is. This section has a little bit more information on the course with a bunch of icons and some text. So let's go to the quick toolbar and drag another image and position to the left. Let's go to the quick toolbar and drag down an icon right next to it. Duplicate these icons using the Option key These icons will be denoting what the students can learn and the course increased the length of the image and select icon hold on option key and create the third row.

Let's align the icons using the smart guide in balsamic. Another important aspect in design as well as balsamic is creating reusable symbols. We will be using the divider a lot more than the rest of the section. Hence it makes sense for you to create a reusable divider symbol. Select the head true the other head true handle other true and head over to the top of the toolbar and click through Come to the lower left corner and enter the group name as divider and click the pattern convert to symbol. You can see that going to the symbol staff, the dividers available for reuse, you can just drag it down and continue using it.

Unlock the browser and extend the land. Lock it back again so that it does not move around. And let us see what the next section of the landing page is. This section is an FAQ section or a Frequently Asked Questions section consisting of common questions that students might have. So let's just click on the curriculum subtitle and hold the Option key and duplicate the same and renaming it to FAQs. Let's go back to the Quick Access toolbar and search for the text field.

We will be using this as the question field hold down Option to create duplicates of the same, denoting multiple question fields. Now head over to the quick toolbar and search for an arrow. This is to denote that when the user clicks on the arrow, the answer will drop down. resized the arrow to s and drag it to the corner of the text field and hold the Option key and create duplicates of the same. Make sure they're all aligned and look good. Now let's have a look at what the next section of the landing pages.

This section is the instructor bio section, where the instructor has a few details about himself. So the next way is to head over to the symbols tab and insert the divider symbol that's unlocked the browser and extend it a little bit more and lock it back again. Copy the image from the course about section and hold option to create a duplicate of the same. Let's just use subtitle and enter some basic text introducing the instructor to the student Let's take a block of text and realign it a little bit so that it looks like content is present, which goes a little bit more deeper into the instructors skill sets. Let's align it a little bit more so that it all looks good. We are here at the last section of the landing page that is the call to action page and the footer section.

The call to action we are asking from the user is to enroll for the course. So dragging the dividers symbol from the symbol tab and drag down the subtitle to create a duplicate of the same and rename it to start learning today. Position it a little bit to the center. drag down the copy of block of text from above and resize it, head over to the quick toolbar again and drag down a button and position it just below the text and rename the button to enroll now, go back to the quick add toolbar and search for headshots again. Drag it up all the bases that its edge to edge with the browser window, thereby creating a solid divider line. Insert a block of text, align it and go back to the quick toolbar and look for a list item.

Renamed the list item to the names of the pages and position it right next to the block of text can be home about contact, whatever is relevant and what and all the pages you have in the landing page. Congrats, you have completed a completely mobile ready landing page. Even though the wireframe looks great and complete, it still looks a little bit sketchy. This is because we need to change the skin of the wireframe. Head over to the inspector and click on wireframe skin. And voila, that our wireframe just became so much better.

It's looking so professional and ready to be published to the world. Congratulations, you know how to design and wireframe mobile ready landing pages. This is an exciting time, you're ready to move on to much professional projects and create projects of your own and upload them on your triple social media pages LinkedIn, etc. As always, anything you require, you can send a message and I'll be glad to help. And lastly, I urge you to leave an honest review for this course, along with feedback, if any, so that I can work on them and improve your learning experience.