BEGINNERS GUIDE

How To Create A Professional Website In Under An Hour

At the end of this guide, you will know how to use Simvoly to create amazing pages and websites. We will walk you through the fundamental parts of every website. Becoming a real web designer has never been easier.

You probably already selected a theme. If you haven't, browse our themes and pick the one you like. Use them as the starting point of your website. Themes are fully customizable and you can always switch to another or create a new website later.

The Website Builder

So how do I work with the builder? Simvoly is made to be easy to use, it has a few main structure elements that are core for every website. You can build anything with our widgets or use the pre-made blocks.


We are going to show you examples of a Business Website, Portfolio and an Online Store. You will learn how to create stunning landing pages, highlight your work in a portfolio, set up an online store in minutes or start your own blog.

Containers

Main structural element in our builder is the Container. It's the root component that holds your widgets. Use it to organize your content in sections. You can adjust a few settings like background image, color, columns, make it full-width, change it's margin or add an anchor point.


When structuring your content, as you will see with all themes and blocks, content is arranged in columns. They are very easy to use and keep your website neat and well structured, so I strongly suggest that you use them.


Other important functionality is the margin. It's a unique setting that enables you to create space around your containers and widgets. To use it, click on the margin icon and just drag the container up or down to adjust its margin.

Widgets

These are the building blocks of your website. Use the simple drag and drop functionality to add and arrange widgets on your website. While dragging, small blue line will guide you where the widget will be positioned when dropped. You can always change the position, margins or the settings of your widgets. With various widgets available you can create almost anything you need for your website. 

Save time by using some of the predefined blocks we offer. They are containers filled with widgets, made to save your time and lift the hustle of setting up the structure yourself. Blocks are very well designed and ready to use to quickly fulfill your website idea.

Simple Drag & Drop

Our main goal is to help you create something beautiful in a simple and fun way. With just a few clicks you can add anything to your website - drag and drop images, forms, videos, texts and much more.

Beautiful Block Widgets

Our designers made many beautiful blocks for your convenience. Add well thought heroes, galleries, call-to-actions or different text layouts with a single click.

Be the designer and let us help you save time.

Margins For Spacing

No more struggle on how to create space around your widgets. By clicking the 'Margin' button on every widget, you are enabling the margin mode. Simply click and drag you widget to create space around it.

Website Header

One of the key components of your website is the look of your header.

That's why in Simvoly we give you a variety of options to choose from.

Website Logo

Important thing is to change your logo. You can either upload an image or have a text logo. If you haven't decided on your logo yet, you can always change it later.


We recommend you to have a logo that contrasts with the header background color. In this example, the header is very light gray and the logo is darker, which gives a nice contrast between them.

Header Styling

With Simvoly you can choose from 11 Header designs. You can switch between them and select the one you like the most. Adjust the background & text color, font, size and more.

Website Hero

This is the area right after the header. It's the first thing people are going to see when visiting your website. Website hero has to be clear and engaging about your mission and what you do. In the slider below you can see some of the Hero blocks that we've designed.

We aim for simplicity and clear call to action.

Whether it's a portfolio, a business or an e-commerce website, you need to pitch the first thing your visitors need to know about your business or idea.


If you build an E-Commerce website, you can highlight some of your products with a call-to-action to detailed information, or to promotions that are currently available for your visitors. DON'T forget - keep it simple, clean and always use nice, quality images. Also, don't forget about the contrast - don't use white text on bright backgrounds or dark text on dark backgrounds, your headlines need to be visible.

Main Content Area

You have a lot of options here. It all depends on your business type and website idea. If you're seeking to create a more corporate website, you might want to list your services, short company bio, some package plans or sections that lead to inner pages of your website.


You can also build a one-page website where all your content is on a single page with navigation scrolling to that area. It's a great option for websites that are not content heavy (e.g. portfolio/artist websites).

Business Website

On top you can see the Hero mentioned above - nice blue overlaid image with a big straight to the point heading and contrasting call to action (click the image to enlarge).


Then comes the Content Area of the website, you have a section with nicely formatted heading, paragraph and a call to action of some sort as well as a beautiful image. You need to remember that people LIKE a visual representation of the content. It's boring to see plain text and people tend to often skip websites that are heavy on the text. It's all about grabbing their attention while giving them valuable information.

Next content section is similar to the first one, only difference is the background image. It's well selected to contrast the text and follows the look and feel of the website. At the end of the Content Area we have services or products or maybe you can put pricing options in a nicely formatted manner, finishing with a contact form in this example.

You can use the Block Widgets to add your own sections. They are nicely formatted for various purposes, save you time and make your website look great. Don't be afraid to try different things but ALWAYS keep it consistent. Use the same fonts, same colors, same line heights. It really make a difference.

Portfolio Website

There are different approaches when it comes to portfolios. In this example, we have a short Hero with the designer's name and short describing info. You can add more content, a photo, or social network links, etc.


Then it's always great to put nice portfolio images, galleries or case studies of recent work. The reason why people visit a portfolio website is to see who you are and what you are capable of, e.g. see your work, so focus on that. Select your favorite pieces of work that represents you the best.


At the end, we have recent blog posts. Some or most of you probably don't have a blog just yet, but it's a great to have it. Blog helps you acquire returning visitors, create a mailing list, get your search engine score higher and bring traffic, shares and social presence.


For a detailed guide on blogs, you can also check out How To Start A Blog: Everything You Need To Know.

Online Store

Online stores are no different than any other websites. Always start with a nicely laid out header. It should be easy to navigate throughout your website. Continue with a Hero section, highlighting products, promotions or a collection.


The Content Area can vary depending on the online store. In these examples, we show featured products (with 3 and 6 products). You can add a carousel, or a button leading to a page with all items. If you are selling just a few products or services, you can highlight just one of them with nice images, specifications and a link to the the product's page.


After the featured items you can add other products, section about the quality of your items or list some of the product categories. Another option is to have a promotional banner, like in this example - "GET 20% OFF NOW!", with a nice contrasting button. This will invite your customers to engage more with your website and visit your products list. Don't overwhelm your visitors with having too many items on your homepage. Show a few featured items and a few sections about your company, promotions or the value of buying your products. You can read more in our article What Is Important To Know When Creating An Online Store.

Simvoly Is Not A Regular Website Builder

Simvoly is a place to feel like a real web designer. You can do anything with just a few clicks - stunning websites, portfolios, create a blog and start earning money.

Come and give it a try!

View Details
- +
Sold Out