How I Made My Website: MotoCMS Website Builder Walkthrough

Can you imagine your life without Internet? I think no one can. We created a self-contained universe, where our possibilities are practically infinite. Scientists of the past were right in some way, hypothesizing on wireless communication without physical boundaries, formation of knowledge data bases etc. Many other things, considered to be off the wall previously, become a reality today due to the world wide web.

Global network allows people to purchase goods, make orders, discover new things, read the latest news and find completely everything necessary in a matter of moments. A loner can make friends, playing computer games or declaring a holy war in some web community. A nerd can learn how Newton disclosed secrets of nature. A housewife can find recipes of time-honored dishes. And so on and so forth...

Every year millions of new websites emerge. So far, the total website amount has recently exceeded the mark of one billion hosts. Pretty exciting, isn’t it? And the kicker is that with the web evolution the website building process evolves too. Seems like making a proper website costs a lot of efforts and breaks one’s budget. Yes, some time ago that used to be the way how it worked. But things has changed since then.

At present a website owner has all possibilities to deal with own website, not being familiar with the latest trends in web design and website development. Website builders became a revolutionary approach for those users, who have the intentions to make a hit on the Internet, saving their time and money.

But purchasing a ready-made website is only the part of the story. A few more steps should be taken in order to boost your website traffic and attract as more stakeholders as possible, especially if your website is commercially oriented.

Your customer is undoubtedly the target number one. Remember, you create a website not to satisfy your design ambition, but you create it for your potential clients. An entrepreneur who doesn’t know this simple truth will fail. That’s why after choosing a website builder you must explore its advantages, learn how everything works.

It goes without saying that a novice has to be prepared for the massive information flow. But don’t be afraid, most of offered website building services are user-friendly. The developers cooperate with you and your business. They will give helpful hints and provide professional support, if it is needed.

Now it’s time for getting deeper into the process itself. I chose a website building platform, meeting my own needs - creating a single-page website for the hotel business.

Step 1: Getting Started

The chosen website builder is the admin panel, powered by MotoCMS 3. It is a great pick for non-professionals to start up a website from scratch with its WYSIWYG interface that will come home to any user.

This website editor has much in common with its most popular counterparts like Wix, Weebly or Squarespace. So if you would like to use other services, you will surely pick up relevant knowledge and skills.

MotoCMS team bears a hand soon after you log in the admin panel. Check the pop-up, including the basic information that will help you in the beginning of your website building journey.

Before getting started, pay your attention to the main areas to work with: Header, Content and Footer. Let’s play with each of them by turn.

Step 2: Header Editing

As usual, Header holds such essential website elements as a company logo, its title and a navigation menu. First, drag and drop the Container widget. It is necessary to nest those three elements to your website structure. Before the nesting itself set a background image. Click the “Design” section in the container properties, located on the right side. Here you can set up size and position of the background picture.

The navigation menu is set up with the Menu widget. I dragged and dropped it to the top of the Header. Click “Edit” to create menu items. As for the menu design, there are three stylistic presets available.

It is also possible to make the menu “sticky”. This trick is perfect for my single-page website, because of the absence of other web pages and long website scrolling. Find this option in the container settings and fill an appropriate box. From now while scrolling the website, the menu will always be in sight.

What about my beach resort website logo? Here comes the Image widget. Due to the same old dragging and dropping I placed it below the navigation menu. Uploading the label image is simple. Among this widget’s settings you will find a little pencil icon. Make a click and you will open the Media Library. It allows uploading various files, not just images, but video, audio, archives, documents etc. By the way, my Header background image was uploaded in the same way.

Step 3: Content Editing

The Content area of my website includes four pages: “Welcome”, “Why Us”, “Gallery“ and “Reservations”.

Welcome

How to lure a client? Start with the welcoming page, where you describe all the advantages of your company. That’s exactly what I did, briefly telling the key information about my website business. Here I made a use of another two widgets.

The first one is the Text widget. Write your text content, choosing its style, alignment and other preferences.

More detailed text transformation can be done in the Design section of Dashboard. Click on “Text Styles” sub-menu. There is the list of all the text styles that are used throughout a website. You can find the one you need in this list or simply click on the text you have already written in the widget. Select text style, its color, font size, line height, letter spacing.

H.Divider is the great widget to add an extra space on a web page. If some content is too close to the page border, drag and drop H.Divider or a few ones.

Parallax is another cool thing to mention. This awesome stylistic effect looks great with single-page websites. A user has to keep on scrolling, so parallax effect will be surely an adorable design element. Click on the container design settings and fill the Parallax checkbox to activate this effect.

Why Us

Meet the “must have” page for every businessman who would like to succeed online. This is the somewhat upgraded version of the Welcome page. No matter what name you will choose for this page (Services, Activities etc.), the aim is still the same - your clients’ engagement. Post the content that will show the benefits of your enterprise.

Practically, this can be realized in a few actions. Aside of the Content widget, there is another one that can be applied to change the layout of your website. If you need to structure the posted content or combine an image and some text into a single block, use the Row widget. Check this two blocks row that I’ve made. Don’t be afraid to make your row more multiple. Choose a row structure that meets your requirements.

Gallery

Without a clear image of what my beach resort does look like, the visitors of my website would leave it immediately. The benefits must be affirmed by photos. There are 3 different galleries you can choose in the admin panel, powered by MotoCMS 3: Carousel, Slider and Grid Gallery. So far as my website includes only one page, I used Grid Gallery for my website visitors to scroll pictures down. To fill a gallery with photos click the “Edit” button and select appropriate files in Media Library.

Reservations

From the name you could guess that this part of my website is made for the customer convenience. Without this page a hotel website looks incomplete, agree? A customer has already read about the resort, discovered its benefits and appearance. Now it’s necessary to convince this web visitor to spend a vacation on the ocean shore.

A bunch of basic widgets in the MotoCMS admin panel includes Contact Form. This widget will be the great solution for various websites, allowing to order a product, leave a feedback or provide professional customer support. Settings and design presets are available for the widget structure and design properties management.

Step 4: Footer Editing

Here is the area where I created the Contacts page. It reflects all the contact information that will be helpful for customers. Do you use social media services for your business? If so, welcome the Social Media widget. Connect your Facebook, Google+, Twitter, Pinterest, LinkedIn and Instagram accounts with your website.

Do you want your clients to find your company location in the easiest way? Add the Google Maps widget. Set the properties like address, zoom, height etc.

Step 5: SEO Settings

Original search engine optimization settings helps to find your website among millions of other. Write a proper page title, its description and keywords in Page Properties section.

Don’t know much about SEO? You are welcome to read this ebook, written for beginners, who would like to compete with others website owners at the web market. The guide contains the basic knowledge on search engines and its optimization.

Step 6: Responsive Design

Another great news is that you can make a website fully responsive with the admin panel, powered by MotoCMS 3. See how your website will look like via three modes of editing by clicking the icons on the dashboard: desktop, tablet and smartphone (portrait and landscape).

Step 7: Ecommerce Solution

Walking through the MotoCMS website I discovered a functional solution for Ecommerce websites. This tool allows to deal with orders, view information about the customers, sell products by setting special brand catalogs. Maybe one day I will need an Ecommerce website and try this solution on my own.

Step 8: Domain & Hosting

Don’t forget that your website needs a brand domain name that will sound familiar to your customers and a reliable hosting provider that won’t hit you in the pocket. You will easily solve these two issues after reading this guide.

The set of widgets, tools and features I mentioned about this website builder is only the top of the iceberg. I believe there is a lot of great other stuff inside the system.