Wix eLearning Demo: Landing Page Design

hi my name is andre williams and welcome to our Wix website demo lesson now you have to complete freedom to edit website designs landing pages thing backgrounds text logo designs and interaction buttons at any point in time during the project lifecycle in this week’s editor we will use the tools to create a landing page and a background photo choose a button design and add our logo let’s click on the plus icon located on the – editor and you
will see different options for adding buttons images text and another design content let’s add our first element which will be a strip background click the strip option and you will see several pre-made stripped designs with diverse design options to fit our users interaction personas strips are block banners used on a website or landing page to organize content let’s choose a suitable strip and drag it to our blend design canvas even though we
like the design layout of our strip right now we want to change the current stock picture to something more relevant to what our vision is for this project which should be something based on technology training and physician skin interactions we’ll electronical medical records let’s begin by clicking on the change trip background option and this will allow us to have access to a library of images and photos and videos to use for our design now
click on the image in the change background edit window next click on the wick stock image library folder now let’s type in the word doctor to filter out some of the images in our huge library this image that we are looking for is something as a doctor may have interacting with technology let’s say your iPad or some type of electronic medical record let’s choose our doctor here which seems to be viewing an x-ray on iPad use an electronic medical
record device or software which is appropriate design today let’s click change the background now that we have changed the main background image let’s also change the opacity of the image to alter the contrast and allow our text to be more visible now let’s click the Settings button in the background editor and let’s decrease that image opacity by 30% ah that’s better now that our background image is ready let’s change the text and the content
and also the color in order for the text to be more suitable and visible to our users let’s first highlight the first line of text and change that text to MDE learning portal let’s also change the text color by highlighting the text we just actually typed in and choose the color blue available in our change text settings editor let’s move to the next line of text and double click on that text and highlight it and change it to technology-driven
let’s highlight that text and also change the color of that text to the exact same blue shade as our previous text above click on the color blue in the text setting editor once again last for the text let’s highlight the text and change the color of the exact same blue shade as the previous text there’s no need to change the content of this text in the last line because it’s very well suitable for what we are doing today next we want to add
buttons to crave for the interaction of our doctors to search for learning courses and also a button to allow them to have access to feedback in a survey section for our training website click the button option in a Wix editor and click the button option to choose the first button design at the top left and let’s add this to our landing page by dragging it on our canvas now let’s move this button to the appropriate place for our users and let’s
stretch this button by actually clicking on one of the corners and dragging it to the suitable size that we want this will make it a more visible for our users and also allowed them to have access to it let’s double click on this button and change the current text let’s choose MD lessons now that our button is created let’s actually create a second button but in order to create this in a simple way let’s take a cool shortcut and we don’t want to
repeat all the same steps that we just made so here’s a cool tip let’s just right click on that current button we just created select copy right click on the canvas again pace same exact button same exact features in design but we want to change the word of the button from MD lessons let’s change that by that wording do you remember by double clicking and typing in the word feedback ah we say three or four clicks now let’s drag that button to the
appropriate place where we want it to be last but not least let’s add our clients logo to the upper left corner of our menu strip we’ll do this by clicking on a plus and the Wix editor and let’s choose the image selection let’s choose an image that I already pre-loaded before it is lesson today which should be here at the top strip menu area great this looks great awesome now that we have completed our demo for the session let’s look and preview
our module design before we wrap up take a look at all the things that we just went through