Introduction to Power Pages and Website Creation:
The realm of website creation has been revolutionized by Microsoft Power Pages. This robust and secure platform offers an enterprise-grade, lowcode solution, functioning as a software as a service (SaaS). Whether you're an adept low-code creator or a skilled developer, Power Pages grants you the ability to swiftly design, set up, and launch contemporary business websites that seamlessly function across various web browsers and devices.
Goals and Audience:
As you've learned from the introduction, creating a website has become easier than ever. Now, I'm excited to share my experience of building a website designed for travellers. The website I created is for an airline company, helping passengers easily book their seats for trips between different countries. Throughout this blog, I'll walk you through the step-bystep process of how I accomplished this, using simple and straightforward language. Whether you're new to website creation or have some experience, you'll find valuable insights to create your own travel-focused website.
Selecting a Template:
If you visit https://make.powerpages.microsoft.com/, you'll see a userfriendly page. On this page, there's a button that lets you start creating your website. When you click the button, a new screen will appear. This screen offers various templates for making your website. If you have a specific purpose in mind, you can pick a template that suits it. But if none of them fit, you can choose a blank template. This lets you begin with a completely empty page and design things just the way you want. I personally didn't find a template that matched my goal, so I decided to go with a blank template.
Customizing Your Template:
I started by modifying the header section, where I replaced the old header and updated the logo to match my website's theme. After that, I worked on aligning the logo properly within the header. Once the logo was in place, I moved on to adjusting the overall layout of the header and refining the colour palette to ensure a cohesive look. During the process, I made sure to use the preview button at the top of the interface. This button allowed me to see how the website was shaping up as I continued working on it. On the left-hand side of the screen, there's a navigation panel that shows the current pages within the website. It's a handy tool for keeping track of your progress and organization. When adding new pages to the website, I noticed an important feature. A pop-up screen appears, giving me the option to decide whether I want the page name to be displayed in the navigation menu or not. This flexibility adds a layer of control over how the website's navigation is structured. For a visual reference, I've included an image of the header section below, so you can get a better idea of the changes I made.
Creating Pages:
• Home Page:
Moving on to the pages of the website, I crafted a total of four pages: Home, Offer, Booking, and About Us. Additionally, within the sub-pages, I incorporated a Contact Us section. Starting with the Home page, which was built from the blank template, I began by adding sections to structure the content. Since the template was devoid of pre-defined layouts, I was able to tailor the layout according to my specific requirements. For the section, I opted for a Single Column layout. This layout enabled me to neatly arrange the components I needed. In this particular section, I integrated an Image component and a Text Box component. To enhance the visual appeal, I adjusted the corner radius of the image, giving it a polished look. There's a noteworthy point to consider here: while arranging components, the flexibility is limited to moving them only up and down within the column. Utilizing this setup, I included a relevant image that resonated with the airline theme. Subsequently, I added descriptive text within the text box to provide context and information. The flexibility of the blank template allowed me to create a customized structure that suits the content and branding of the website. Following that, I proceeded to create a second section right beneath the first one. For this section, I opted for a 3-column layout to provide a visually appealing arrangement. Within each column, I incorporated three distinct components: an Image, a Spacer, and a Text component. The Spacer played a crucial role in maintaining appropriate spacing between the components, ensuring that the design appears neat and organized. To add images, I had the flexibility to either upload them directly from my computer or utilize images from external links. This provided me with the versatility to select images that perfectly align with the content and theme of the website. The 3-column layout allowed me to present information in a concise and visually engaging manner. By thoughtfully combining images and text, I aimed to create an inviting and informative experience for visitors exploring the website.
• Offer Page:
Moving on to the next page, I employed a similar approach to create a dynamic layout. On this page, I incorporated two sections, each utilizing a 3-column layout. Within each column of these sections, I strategically included four components: an Image, a Text, a Button, and a Spacer. This arrangement allowed me to effectively convey information and encourage user interaction. By incorporating Links within the images, I provided users with the ability to access relevant content or navigate to specific areas of the website. Additionally, I adjusted the dimensions of the images to ensure they were visually balanced and aligned with the design aesthetics. Text components played a pivotal role in delivering concise yet impactful messages to visitors. To maintain consistency and brand identity, I carefully selected and configured fonts for the text. To enhance the overall user experience, I thoughtfully integrated Buttons that offered clear calls to action, guiding users toward relevant sections or actions on the website. Maintaining the design's cleanliness and organization, I utilized Spacer components to establish appropriate spacing between the elements. This ensured that the content was visually appealing and easy to navigate. For a visual representation, I've attached a screenshot below. This should give you a better understanding of how the layout comes together and how the components interact with each other to create a cohesive and engaging web page.
• About us Page:
Transitioning to the "About Us" page, I introduced a 2-column layout to offer a balanced and visually pleasing presentation. In the first column, I incorporated an Image component to provide a visual representation that resonates with the content. In the second column, I added a Text component to convey the narrative of our journey and purpose. To ensure the text was positioned optimally within its component, I thoughtfully included a Spacer right before the text. This strategic placement helped maintain alignment and centred the text within the column. Following a similar layout approach in the second section, I maintained a 2-column structure. However, I flipped the content arrangement. This time, the first column featured descriptive text that provided insights into our mission and values. Meanwhile, in the second column, I placed an Video component that visually reinforced our story and identity. This symmetrical design allowed for a well-balanced and harmonious display of content. By thoughtfully arranging images and text in alternating columns, I aimed to capture the attention of visitors while effectively communicating our brand's message and ethos. To give you a better visual understanding of the design, I encourage you to take a look at the screenshot attached below. It showcases the layout and the way images and text work together to create a compelling "About Us" section.
