How to set up a landing page

This is a guide designed to help you make a set up and configure a landing page for your website.

Below is a preview of how the completed landingpage will look.

In each step, one feature will be covered. It is important to note that this guide will not cover all options you will have in terms of features.

Creating the page

• Start by right-clicking the Umbraco Hotel page in the Content tree
• Choose Create and select Page
• Name your new page and click Save

The landing page has now been created, and you are ready to start adding content.

Adding a Hero widget

We will start by adding a greeting to our page. This will be done using the Hero widget, as it allows for having text on top of an image.

• In the Content group of your page, navigate to the Widget section and click Add content
• Select the Hero widget
• Fill in the 3 text fields on the Content tab
• Choose an image to be used as the background
• Select the Settings tab in the top-right corner

Use the following configuration:

Setting	Value
Text color	White
Container width	Full width
Text width	50%
Height	50%
Overlay	70%
Text alignment	Center
Vertical Text Alignment	Center
Animate	Checked

Click Confirm in the bottom-right corner to complete the setting up and add the widget to your page.

The result should look similar to this:

Configuring grids

Next, let's add a couple of grids which will serve as the structure for the next sections on the page.

• Click Add content
• Select the Grid widget
• Give the grid an alias - eg. "Text and images"

Before you start adding adding widgets to the grid, select the Settings tab and use the following configuration:

Setting	Value
Container width	Standard
Remove Column Gutter	Unchecked
Compact	Unchecked
Horizontal align	Center
Vertical Align Columns	Center
Background image	None
Background color	White
Text color	Black
Animate	Checked

Adding Text and Images

For this first grid we will be adding some text and images.

• Go back to the Content tab
• Select Add content
• Choose the Text widget
• Set the Column Width to 50%
• Add some text
• Leave the Boxed option unchecked
• Click Confirm to add the widget to the grid

Once you've added the Text widget, select Add Content again.

• This time, we'll select the Image widget
• Set the Column Width to 50%
• Choose an image from the Media library or upload a new one
• (Optional) Add a caption to the image
• Click **Confirm to add the widget to the grid

Add another Text and another Image widget, but this time, start with the Image.

Once you're done, the first grid will look something like this:

Adding Pod widgets

Follow the steps as outlined earlier when setting up the first grid. Use the same configuration as with the first grid, but select a different background color for a more dynamic look.

In this second grid, we will be using multiple instances of the Pod widget.

• Go to the Content tab
• Click Add content
• Select the Pod widget
• Add some text to the Heading and the Text fields

Use the following configuration:

Setting	Value
Column width	33%
Boxed Column	Checked
Center Content	Checked
Icon	Any
Image	None
Media Left	Unchecked
Link	None

Finally, add a button to the widget as well.

• Add some text and choose which page the button should link to
• Use the theme color for the button
• Make it transparent
• Use the default size

Click Confirm in the bottom-right corner to add the first pod to the grid.

We will want to add a total of 3 pods to this grid, and instead of having to set up each of these, we are going to copy to pod we already created and add to more. This can be done by following these steps:

• Hover the existing pod and select the Copy icon
• Select Add Content
• Navigate to the Clipboard tab
• Select the Pod widget
• Repeat the steps above until you have a total of 3 pod widgets in the grid

Now you should have 3 identical pod widgets in your grid. Select each of them in turn and update the heading, text, icon and the contents of the buttons.

This should leave you with a grid that looks similar to this:

Adding a Slider widget

Let's finalize the page by adding a more dynamic slider element to the bottom of the page, where we will slide through a set of quotes.

We will do this by using a copy of the first grid we made, and then removing all widgets from it. Alternatively you can create a new grid and use the same configuration as we used on the first grid.

• Copy the first grid on the page
• Select Add Content and navigate to the Clipboard tab
• Select the grid we copied in the first step
• Start by deleting all Text and Image widgets from the grid

Now you should be left with an empty grid, and we can start adding a Slider.

• Click Add Content
• Select the Slider widget

Before starting to add content, use the following configuration:

Setting	Value
Show Next/Prev Arrows	Checked
Show Page Dots	Unchecked
Wrap Around	Checked
Autoplay	7000
Pause Autoplay On Hover	Unchecked
Fade Animation	Unchecked

Now, let's add some content to the slider.

• Click Add Content
• Select Quote
• Set the Column width to 100%
• Leave the Boxed option unchecked
• Fill in the remaining fields

Repeat the steps above at least a couple more times, to give the slider some items to run through.

Once you've added the quotes you want to add, click Confirm in the bottom-right corner to add the slider to the grid, and again to add the grid to the page.

This was the final step of this guide. You have now setup a new landing page for your project. Feel free to play around with it and try adding other widgets to it, for a more personalized look.

The widgets we used

If you are interested in learning more about the widgets that we used, i have collected them all below along with a link to their article:

• Hero
• Grid
• Grid: Text Widget
• Grid: Image Widget
• Grid: Pod
• Slider Widget
• Grid: Quote