015-02 Mastering website home page
00:00:05:06 - 00:00:25:49
Hello! In this tutorial, we're learning how to manage your website's home page. You will learn how to customise various elements such as the navigation bar, footer and logos, the hero section, and how to design your home page. So let's get right into it.
00:00:26:03 - 00:00:53:01
So in your website's backend, click this top item in your content panel. This item typically is named after your organisation and serves as the gateway to configuring your home page. This central hub allows you to manage site wide settings, including the top navigation bar, footer, and more. The navigation bar or nav bar is a crucial element at the top of every page.
00:00:53:05 - 00:01:13:29
It guides your visitors through your site, making it essential to organise and update it as your site evolves. Here's how you can manage it efficiently. To add a new item to your nav bar, start by going down to the nav bar header section. Here you can quickly add new pages or links to your top menu. Simply select add.
00:01:13:41 - 00:01:36:47
Choose your new page from the drop down list and submit. Adjusting the order of the menu items is straightforward. Drag and drop the items in the list to rearrange them according to your preference. This allows you to prioritise the most important pages for your visitors. For a cleaner look and to organise related pages under a single section, you can add folders to the nav bar.
00:01:37:01 - 00:02:02:20
These folders appear as drop down menus, making your navigation bar less cluttered and more user friendly. The footer of your website is not just a place to repeat your navigation menu. Here, you can include essential links not featured in the main navigation, such as social media links and a QR code for instant mobile access. It's good practice to include your contact details in the footer.
00:02:02:24 - 00:02:35:46
This typically includes your phone number, email address, and physical location, if applicable. Add a custom logo or a large button linked to a feature page such as volunteer or donate. This not only enhances functionality, but also boosts engagement by making important pages easily accessible. You also have the option to customise the layout and appearance of the footer. This includes adjusting the size, colour, and style of the text and background to ensure it complements the overall design of your site.
00:02:36:00 - 00:03:01:10
After making your changes, don't forget to save. Then select Save and Publish to update your site immediately, ensuring all visitors see the latest version of your navigation and footer. In the logos section, adjust your site's main visual identifiers. Here you can change the main logo that represents your brand across the site. Update the browser favicon for a small but significant touch.
00:03:01:14 - 00:03:10:04
All settings here apply globally and were initially set up according to your specifications.
00:03:10:08 - 00:03:32:31
The hero section is the visual centrepiece of your home page. It's the first thing visitors see, making it crucial for setting the right impression. Here, you can choose to display a striking image or captivating video that embodies the spirit of your site. If you want to make your hero section more interactive, use this form to overlay your form, such as a sign up form.
00:03:32:35 - 00:03:40:21
This form must be pre-configured to include the column layout option.
00:03:40:25 - 00:04:08:17
Now focus on setting your text with the image text position option. This lets you choose where your text appears over the image. This is essential for readability and aesthetics. Additionally, configure the hero image, text header and subtext to add compelling title and subtitle texts over your hero image or video. For a dynamic front page, you may opt to replace the static image with a video.
00:04:08:21 - 00:04:39:33
Note, however, that hero banner videos are disabled on mobile devices to optimise performance. To ensure a seamless user experience, upload an image for the first frame of the hero banner video, which will display while the video loads. Maximise your hero sections impact with the rich text content. This versatile tool allows you to overlay rich text elements like hyperlinks, embedded forms, or buttons on the hero image known as the Rich Text Editor.
00:04:39:34 - 00:04:52:161
This feature provides extensive control over what you want to display, making it possible to tailor content dynamically for different audience segments.
00:04:52:20 - 00:06:44:26
Tailoring the layout and content of your home page layout is done utilising our grid. This tool offers flexibility in arranging content blocks, making your site's front page not only appealing, but also functional and responsive to user needs. Thank you for joining us in this detailed walkthrough of your website's home page settings. With these tools, you can effectively manage and customise your site to better serve your audience.
00:06:44:30 - 00:08:56:10
It's a great way to engage visitors and gather leads right from the outset. To further enhance interaction, the sharing link URL setting allows you to make the entire hero image or video clickable. You can direct users to any link, such as a special promotion or a registration page. Enhancing user engagement and providing a clear call to action.
00:08:56:14 - 00:09:08:06
Don't forget to optimise for mobile viewers. Adapt the rich text content for mobile devices. To ensure that your key messages and calls to action are clear and accessible on smaller screens.
SwiftFox Websites
lessons
Not what you were looking for?
Get in touch and learn how easy it is to join SwiftFox, our team is available to help you every step of the way.