by Julia Blake
A good website not only includes a stylish look and strong backend solutions; it should also be easy to use with all the necessary information clearly visible. And if you run a commercially-oriented website, you should pay attention to conversion goals too.
Most designers are pretty tech-savvy, but those of us who aren’t web designers may not know where to start when building a website that lives up to our artistic standards. Customizing a website from a ready-made template is a pretty handy solution for many creative business owners, entrepreneurs and other design professionals who may not have the background needed to create a site from scratch.
Modern website builders allow users to create a website with little hassle, coding or technical skills required. But when people come closer to the process of website creation, users may feel lost among multiple features, widgets, options and settings. It helps to know the capabilities of a website builder—and how you can leverage its features to create a more effective website. A person without proper knowledge may not know where to start and how to customize a web template to get a really unique website without ruining the entire structure.
I’m not a professional web designer or developer, so I wanted to work with an easy-to-tweak website builder that didn’t require me to spend days learning how to code a header or add content. For this tutorial, I chose to start with a MotoCMS template. This relatively new website builder has a WYSIWYG editor that allows you to make a website without advanced coding skills or extensive web design knowledge, so it’s just what I need. If you’re like me and you’re not a web designer, you may choose to build your website using a drag-and-drop admin panel.
There are many other drag-and-drop site builders, such as Squarespace or Weebly, and it’s a simple matter to apply the steps in this tutorial to these platforms as well. Explore the features of each and choose the best one for you.
First, you should decide on what kind of template you need, what sections you plan on your future website, and — most importantly — your main goals for creating a website. I created a website for a small café with this single-page template. Here I have everything I need for a small local business website: clear structure, handy navigation and useful options that will allow the business to attract clients online. There are hundreds of thousands of website templates out there, so be sure to do your research before you choose the one that’s right for your needs.
Most webpages have a standard structure: Header, Content and Footer. I will make changes to each of these sections step by step. Follow along, and don’t forget to save your creation after each step to keep all changes alive.
Customizing Your Header
A header usually contains basic information about the brand—typically its logo and a navigation menu. In many cases, the header can contain a catchy image/images that show off products and services. For thus tutorial, I will add the background images and navigation menu to the header.
Again, this tutorial uses MotoCMS, but the techniques I use can be applied to many different drag-and-drop site builders.
For this CMS, I click the Header section and choose a top container with a pattern. On the right panel I can see its properties. In the Design section, I changed the image to a coffee pattern. Using the “Tile -> Repeat X” option, I set my small image repeat on the X-axis and take up width of the container.
I added a Navigation menu to the same container by dragging-and-dropping the Menu widget below the pattern, customizing it with preset color and font options. I set all links in the menu to the same page, but different sections, so that users who click on each menu item will jump down to the appropriate section. I named the Menu labels and the sections similarly so that I can anchor each menu item to a specific section. When creating each section (Welcome, Menu, Happy Hour, etc.) later, I will add the same anchor text.
Play with the options in your CMS to make the most of its tools.
If you opt for a long single-page design, it’s important to ensure that users won’t get lost on the website and will easily get to this or that section from every part of the site. Thus, you need your menu to be visible all the time people scroll down or up. In MotoCMS, the “Sticky” option allows you to “glue” the navigation menu to the top of the display on the browser. I tick the checkbox for the “Sticky” option so my navigation is always on top.
Finish up your header with attractive imagery that will tell users a bit about your website, your business and services. Since I’m creating a website for a small local café, I’ll add photos of the menu items. Sliders are versatile elements that offer different user experience when applied in different places, but for these purposes I will add one to the header.
As you can see, I’ve added the slider widget to the header container, which opened a lightbox window where I can choose among images in your media library. Most designers and UX specialists claim the optimal number of slider photos is three to five, so I’ll add four.
Note: Regardless of the CMS you’re using, it’s best to use image files with equal widths and heights to achieve a good-looking slider with no blank areas on top or side of the container.
I’ve set each slide’s duration to 8 seconds so that visitors have a chance to absorb each one, but they won’t have to wait long to see the next one. I also set up pagination for slides control to help users easier change slides.
To improve your user experience you may choose to disable the slideshow and allow users manually flip slide images when they need it with the use of the arrows. Your CMS may also allow you to choose the type of animation that will be used within the slideshow. I chose the FadeIn animation option.
Content Area Customization
The content area is one of the most vital sections for your website. It contains all the necessary info about your business, services or products you offer; shows your team what helps to establish closer relations with customers; displays reviews and testimonials from loyal customers; and, of course, provides information about the business’s location, contact information and social connections.
You can add as many containers or rows to the Content section as you need. First, decide what sections you wish to have in your content. I’m going to add the following content areas for this website: an About section; a Staff section; a Menu section with images and prices; aCalendar section to post info about upcoming discounts, specialties and various promotions; and a Contact Us section to keep in touch with customers or allow them to leave orders. Below, I’ve detailed how you to add and customize each section—and what to consider when you’re creating them.
Welcome
After choosing a Content section, I’ve added a Container where I will create my first section: a Welcome note. I’ve added a background too. When creating a background in MotoCMS, the Container will fit the image height, so I’ve added an image at a height of 550 px.
Note: Keep all your Header, Slider and Background images of one width to achieve a slick-looking website and avoid blank areas around backgrounds on different devices.
At this point, I started adding the text. I dropped the Text widget and type a welcoming message to potential visitors. Most text widgets in your CMS allow common text formatting options (font style, size and color, as well as setting headings, etc.).
If the heading is too close to the top border, the H. Divider widget sets an additional narrow row between a top border of the container and the text. Set the width of the H. Divider to “0” to remove the default thin line in it.
Here, I’ve dragged the Row widget to the Container, allowing me to set up multiple elements in columns. I will use this option to arrange the text in a more narrow area that the entire container width. I’ve dropped a Row widget into the Container below the first Row with my welcome text, and I’ve set up three columns from the left panel.
A welcoming message should be catchy and friendly to attract users’ attention and tell potential customers why they should choose this service or product. Explain the advantages of using your services, and say how people can benefit from them—but keep it short. Users typically scan webpages instead of reading them in detail, so it’s best to encourage them to scroll further to get more info about your services, products etc.
Menu Section
This section is one of the most vital elements of my website (or any other restaurant website). If you’re creating a portfolio site, a section like this would be a great place to list your areas of expertise—logo design, publication design, etc. In this case, I might consider making a separate page for the menu if there are extensive options. Instead, I’ve chosen to feature a vibrant menu section showcasing of the most popular ones.
I’ve added the Container to the Content below the Welcome section. Then, I’ve added text and image widgets like I did for the Welcome section.
A experience-enhancing feature you can add to your your website in most drag-and-drop builders is a parallax effect that adds more depth, motion and vividness to the website while scrolling. In this CMS, I ticked the checkbox with it on the right panel to add the parallax effect.
Here, I’ve created a simple menu with two rows of menu and by three items in each row. I dropped the Row widget below my text, choosing the “3 columns” option on the left panel. I added an image to each column and a text with a title and description of the dish, then repeated for the second row.
I also added the price to each image. For a restaurant website, including prices improves trust to your brand and allows people to find that information without having to search for it on other websites or visiting your competitors. Most users search for prices, location and working hours on restaurant and cafe websites, so it’s important to display this information for the best user experience. For a portfolio site or a design studio’s website, you may choose to include information about rates or quotes.
News & Events
It’s important to list the freshest news about your business on your website—events, special anniversaries, blog posts or (for restaurant websites) happy hours and special prices. Keeping your site fresh not only helps your visitors find a more dynamic online experience, but also increases your traffic from Google.
This section should be simple and flexible so you can add changes to it in future. A catchy background photo with an informative text and a call to action (optional) is a great way to bring your customers or potential clients the latest updates and news about your brand and services.
In my example site, I’ve added another Row widget and chosen a two-column option so I can add text to one side of the screen. I added a creative image as a background with smooth texture on the right side, where I’m about to add the text.
Note: Adding anchors to each section is a great way to improve usability and enable quick navigation to each part of the website.
Then I added the Text widget to the right column and typed in my news and events text.
Staff Section
This section is high-priority for design firms, small businesses and, in this case, the food industry. This section allows you to get closer with your customers and establish strong relations with them. People like meeting the teams that create the products and services they use and get an “inside look” at the business. For a restaurant website, I want to project a clean, well-lit atmosphere with nice and open photos of the staff.
I added a sample staff photo to the background and added a few words about the team. To determine the best placement for the text, I carefully examined my background image so that I could be sure I wouldn’t put my text in the way of the subject’s face.
Contact Us Section
Any business website should be not only user-focused, but also conversion-oriented. A contact page significantly increases conversions, especially for products and services that can’t be attained online. It also helps improve engagement and build trust to your brand.
For a restaurant, the contact form can enable customers to reach out to the business, or to place orders on the website. For any site, it’s important to respond quickly to the people who contact you via your website so you can establish strong relationships and improve in your services.
Always keep your contact form as simple as possible for better usability.
To create a Contact form in my CMS, I’ve created a header and used the Contact Form widget to add the form. After adding the Contact Form to the container, I’ve carefully selected the fields I need my users to fill in order to send messages. In most contact forms, you’ll see Name, Email and Message fields. You can also add a Phone Number field if you plan to reach out to your customers over the phone. Here, I ticked the * to make some fields mandatory; it’s better to make only one or two fields mandatory for better UX. Finally, I’ve selected a clear and appropriate Send button.
Select an email address where you want the messages to direct your users. Be sure to set up clear success and error messages so that your users will know that their messages have been sent.
Customizing Your Footer
Footers typically include information about a business’ location and phone number, as well associal media buttons to engage with your customers on Facebook, Twitter etc. I’m also intersted in adding a map widget to help users easily find the restaurant’s location.
When adding social buttons, it’s important to consider a strong social media strategy and choose wisely networks where you wish to be presented. Specialists suggest choosing a few networks to run your pages in full force without spreading yourself too thin by trying to run multiple accounts on many networks. It’s better avoid some social media platforms entirely than to have several neglected accounts.
For my website, I’ve added the cafe address, social media buttons and a copyright note to the Footer with a three-column layout. In one column, I’ve also added a prominent button with the business’s phone number.
Making a phone number clickable is a great and simple way to improve the usability of your site. IT gives mobile users the opportunity to connect instantly from a smartphone and helps raise conversions.
I’ve added a Social widget to the second column so that it displays all of the networks I want to include (Facebook, Twitter, Pinterest, Instagram). Make sure you link to the right account, and choose a button design that suits your overall web design.
It’s also important to add copyright text to footer as well. Don’t forget to check it every year and update the copyright information.
For my last step, I added a Map widget and customized it by setting up its height (while this widget automatically takes the entire width of the Footer) and tweaking the spacing for better look. I also set up Alt-text that shows the address on the map.
Making It Responsive
Most systems allow you to preview the website while you’re making changes to see what can be improved. Keeping this in mind, I set up the Social widget alignment for smartphone (landscape and portrait mode) to the left to keep the entire footer layout consistent.
Most systems will allow you to tweak the font size for tablet or smartphone. When applying a parallax option to a container, make sure the background image is high enough.
SEO Options
When creating a website, don’t forget about on-page search engine optimization. Create a proper page title and URL, and write a relevant and competitive description for each page. All of the elements I mentioned above should contain relevant keywords to help users find your site.
You can also optimize images by adding a relevant title and ALT-tag to each one.
Here’s how my website turned out—a fully new responsive website for a cafe, both user- and SEO-friendly. It’s a basic, but nice-looking website you can customize without deep knowledge of web design using a variety of platforms.
The post Simple Website Customization: A Step-by-Step Tutorial appeared first on HOW Design.