How to Build a Good Homepage in Umbraco 8

An efficient and aesthetic homepage is important. As the most frequent landing page on your website, your homepage should encourage visitors to stay on the site and follow through on your call to action.

On your Smartly Done Website, the homepage will automatically be set at the top of the Content menu when you log in to Umbraco to make changes. From here you can add and delete pages and components, but you should never delete the homepage bar.

Banner Component

Adding a banner to your homepage adds an appealing visual, modern style, and can house a call to action or logo.

Step 1: In the home dropdown, there is a folder labeled “Components.” Click the three dots to its side and choose the banner component. Be sure to name it this component so it is easy to manage and find if you need to edit it again.

Then, in settings, make sure the banner is hiding arrows and navigation dots, and the autoplay is set to zero since there is only one banner slide in our example. (If you have more than one banner, feel free to add dots and/or arrows to help your visitors navigate through your banners easier.)

Step 2: Design the banner slide.

Under the "Content" section, click the “Add Content” button to add your first slide.

After pressing the “Add Content” button, you’ll find there are two sections to the banner creation, “Settings” and “Content.” We’ll work on Settings first.
Title the banner slide for so it's easy to refer back to.
Choose a background and button color. These are only necessary if you will have a color overlay on your image or a button that leads to another page.
Select one of the three sizing options: takeover, medium, and short. Takeover fills the entire viewport, medium fills about 65% of the viewport, and short fills 40%. For this example, we’ll be using the takeover size.
Select a text alignment option.
Select the overlay option to create a semi-transparent layer between the image you’ll select for the banner slide and the text. The overlay color will depend on the background color you chose. This is an optional step, but it can help to make your text more readable.

Optional features:

Add a scroll prompt to indicate to users that more content is available below the banner slide.
Parallax effect - this makes the content below the banner scroll up over the image instead of pushing the image up with it.
If you’d like your banner slide text to animate into the frame, turn on the animate setting.

Step 3: Add content.

Click on the image media picker. A panel will appear to the right-hand side of the page showing your media library. You can navigate to an existing image or choose to upload a new one. Then click submit and add some alt text for the image. You could also add a video here, but we won’t in this example.

Enter a heading for your banner and select an HTML tag for display. Since it’s at the top, we should set it to H1.
Add some text below the headings if applicable.
Use a call to action button by using the URL picker to link to an internal page on the site. In this case, we’ll be using the "Contact" page.

Step 4: Press save and publish to add the new banner to your homepage.

Add Services with Pods Component

Step 1: Click on the three dots to the right of the components folder under the homepage and choose the "Pods" component, naming it for CMS reference.

Step 2: Go to the settings tab.

Choose to display the image above the text.
Choose a row that has the right number of items for the services that you offer. In this example, we’ll use three.
You’ll also need to choose the text alignment and image style you want.
If you want the services to animate in, make sure the option is switched to yes.

Step 3: Move to the intro tab. Switch it to “Yes” to see options.

You’ll need to select another alignment for your introduction. In this example, we’ll be using left alignment.
If you want to also add a short introduction to your services, add a heading. This should be H2 since the banner above it is the first heading. Having a hierarchy of headings will help improve your search rankings.
Add a summary of your services in the text box.
You don’t need a link here, so leave it blank.

Step 4: Add pods. For this example, we’ll use the “Text/Image Pod”.

Go to the Content tab and click the “Add Content” button to add your first pod.

Name the pod for CMS reference.
Add an image by selecting the Media Picker. Also, add image alt text.
Enter a pod heading.
Enter some summary text about your services in the text box.
Link to the relevant service page.
Repeat for other services.

Step 5: Save and publish.

Text with Slideshow

A slideshow is a great way to break up your content and add movement to your page. Slideshows can be used to list information or create a powerful call to action.

Step 1: Create a "Split Component" and name it.

Step 2: Select the “Slideshow” option for split (1)

Step 3: Move the desktop and tablet column width to 12

Step 4: In the “Slideshow (1)” section, choose the image style, rotate speed, and add a heading if you want one.

Step 5: Press “Add Content” to add a video or image. We’ll use the image option for this example.

Name the image so it’s easy to find and edit later
Select an image
Write alt text
Press the “Add Content” button again to add more images

Step 6: Change the desktop and tablet column width on Split (2) to 1.

Other Option:

Slideshow with text:

Make the split component column widths to 6 on both Split (1) and Split (2).
Choose the text block option for Split (2).
Fill in the heading, text, and buttons.

The photos will switch but the text will stay the same.

Step 7: Press Save and publish.

Adding the Final Touches

Add unique meta information⁠—the information that will be displayed on Google and other search engine results. If you don’t add something, the title will default to the name of the node.

Step 1: Click on the home button and move to the SEO section.

Enter a unique Meta-title that is shorter than 70 characters.
Enter a Meta-description between 100-160 characters.
Upload a page specific open graph image (if you don’t, it will simply use the one you uploaded for site-wide content in global settings).
Assign a Twitter creator name by entering your company’s Twitter username.
You can also add an alternative URL for every page on your site. Though you probably don’t want to do this for the homepage.

Step 2: Got to the navigation section of the homepage.

You can choose to hide pages from navigation, though you shouldn’t do this for the homepage.
Choose an alternative name when the page is featured to boost SEO.
Turn off the breadcrumb trail since no pages will be higher than the homepage hierarchy.

Step 3: Go to the reusable content tab.

In website configuration, you can create reusable components and pods which are useful for key messages to use throughout your website.

Step 4: Each page has a section called “Scripts.” This tab allows you to add third-party or custom scripts to each page. If you enter the code here it will not override the default scripts you may have added in global settings. But for our example, we’ll leave it blank.

Step 5: Go to the properties tab on the homepage.

The properties feature basic elements such as the publish and unpublish date fields.
For multi-lingual websites, you will have more than one home module and website module. You can assign the correct website configuration in the properties tab.
We have added a switch to disable the delete in all nodes. This way you don’t accidentally delete something important. Make sure this is enabled.
You can choose to not display the header or footer of any page.
You can also enter custom class names to any page or component on the site. This is useful if you want to edit something on one page instead of the whole site and you don’t want to alter the MVC code behind the scenes. Add some custom CSS to the stylesheets then add your custom classes here. We’ll leave this blank.