An efficient and aesthetic homepage is important. As the first page your visitors will notice, 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.
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" tab, click the plus sign and add your first slide.
- After pressing the plus sign, 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 view port, medium fills about 65% of the view port, 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.
- Add a scroll prompt to indicate to users that more content is available below the banner slide.
- Paralax 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 in 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 Us" page.
- Then enter the button caption.
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.
- 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.
- Go to the Content tab and click the plus sign 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 "Text with Slideshow" component and name it.
Step 2: Go to the settings tab.
- Choose the position of your text as either before or after your image.
- Choose a background and button color.
- You can also add a background image, but we won’t in this example.
- You can add spacing around the image, but if you want the design to bleed to the edge of the component, leave it off.
- In this example we’ll only have one video/image, so we will hide the arrows and navigation dots and turn off autoplay.
- To stay consistent with other pages, turn on the animation.
Step 3: Go to the text tab.
- Choose an alignment. For this example, we are sticking with the left alignment.
- Enter a Heading and select H3 since it’s the third element down in the hierarchy (under the banner and pods).
- Add a summary.
- Add a link using the URL picker to link the slideshow to your "About Us" page. Enter a caption for the button.
Step 4: Got to the image/video slideshow and press the plus sign to add your first Image/Video. For this example, we’ll add an image.
- Give the image/video a name for CMS reference.
- Add an image through the media picker and include alt text.
- Disable the light window. If it is enabled, it will allow you to click on the image and view it as a full version.
- Don’t add a link to the image.
Step 5: Hit the save and publish button at the bottom right of the screen.
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 tab at the top of the page.
- 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 tab.
- You can choose to hide pages from navigation, though you shouldn’t do this for the home page.
- 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. In this example, we’ll turn off the default pods setup in global settings and do the same for top components.
Since there is a default "Call to Action Strip" setup in global settings for bottom components, leave that to display the content of the front-end.
Step 4: Each page has a tab 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 in the home icon.
- 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.
Step 6: Press save and publish to make your site changes live.
About the author