Start Selling Today - Your Online Shop can be ready in less than 1 hour!Get started

Help Center

TutorialHow can I design a beautiful website?

Designing a website in Solomoto is simple and easy. Start from our beautiful, pre-made template which you can customize however you desire to achieve a stunning website. Using the navigation bar on top and the sidebar on the left hand side of the screen, you can personalize your website however you would like using any type of widget, personalized text, images, descriptions, forms, videos, and more.

 

 

How do I save my work?
You can save the current draft of your website by pressing the “Save” button on the top of the screen. Remember to save your work every time you edit to make sure all changes are saved and you don’t lose your work.
How can I undo an action or edit I made while building my website?
You can undo an action or edit by clicking the back arrow on the top of the screen. You can also hold down the control key (Ctrl) on your keyboard and press the “z” key to undo an action.
How can I redo an action or edit I made while building my website?
You can redo an action or edit by clicking the front arrow on the top of the screen. You can also hold down the control key (Ctrl) on your keyboard and press the “y” key to redo the action.
How can I choose a template?
When you click on the “Publish Website” widget, a template for your website is automatically pre-selected for your business. The template selection is based on the business category you chose for your business.

The format of the website can be changed by adding or deleting stripe sections (notice how each part, or “section” of the website is in its own box, called a stripe).

You can change the theme of the template layout by clicking the “Theme” button on the top navigation menu. By changing the theme of the website, you will change the color scheme, look, and feel of your website, giving it your personal touch. When you like a theme, click on it and then press the green “Done” button.
Which theme should I choose?
You should choose a theme that best suits the look and feel of your company. Pay attention to the colors that are present in the theme and how that might affect how people view your business.

We recommend to surf through many themes to find the one that best represents your business and brand. Remember, you can always edit the theme and personalize it with your own content.
How can I upload a logo to my website header?
The template website comes with a placeholder logo that can be replaced with your own. The placeholder logo is usually located in the top left corner of the website. Mouse-over the logo placeholder in the website header where a list of options will pop up.

To change the logo, click on the edit icon (the pencil) where you can upload your business’ logo from your computer, upload an image from the internet, or use an image from the Solomoto collection.

If you don’t have a logo, you can use the “Text/HTML” widget to write your business’ name in place of the logo.
How can I manage the pages of my website menu?
Each template comes with a pre-made menu for your website that you can start from. To edit your website menu, mouse over the existing menu, and click on the edit (pencil) icon.

From the edit bar, a screen pops up where you can edit the Menu Title names, reorganize the menu names, hide these names from view, change the design and style of the menu bar, and more.
How can I reorganize the items in my menu bar?
To reorganize the page names in your menu bar, mouse-over the menu bar and click the edit (pencil) icon to open up a menu screen. In the general settings tab, you will see a list of the menu titles under the “Menu Titles” column. To the right, you will see two buttons. The button on the right with the four arrows allows you to move the names so they appear in a different order.

Simply drag (click, hold, and move) the four cornered button of the desired menu name and move it up or down to where you want it to show up on the menu bar. The name on the top, will be the leftmost name on the navigation bar. When you are happy with the changes, press the green “Done” button.
How can I hide or unhide a page from the main banner?
You can hide or unhide a page from the main banner by mousing-over the menu bar and clicking the edit (pencil) icon to open up the menu screen. In the general settings tab, you will see a list of your menu titles under the “Menu Titles” column. To the right, you will see two buttons. The button on the left tells you whether that page is seen on the menu bar.

If the button is green with a white eye icon in it, that means that the page is visible on the menu bar. If you wish to hide that page from the menu bar, simply click the green eye button. You will notice that the button will turn grey and a line will be drawn through the eye, symbolizing that you cannot see that page on the menu bar anymore.

If you want to unhide a page from the main banner (re-add it to the main banner), simply click the grey button with the crossed out eye icon, which will cause it to turn green and have the eye icon without the line, signaling that you as the user can now see the page title on the menu bar.

When you are happy with the changes, press the green “Done” button.
How can I change the design or style of my menu bar?
You can change the design or style of the menu bar by mousing-over the menu bar and clicking the edit (pencil) icon to open up the menu screen. By default, you are looking at the general settings tab. Click the “Design & Style” tab where you will see several possible menu designs on the left-hand side.

You can preview the menu bar on the right-hand side via the “Preview” section. You can also change the menu look even more by playing with the menu settings underneath the “Menu Settings” section. These settings include altering the spacing between the menu options and the colors of the background, border, and text.

When you are happy with the changes, press the green “Done” button.
How can I add a page to my website?
On the top of the screen, click on the “Pages” tab to edit the pages your website has. To add a new page, on the left of the screen, click the “Add new page” button. Then, on the right hand side, enter that page’s information, including the page name (what you see on the menu bar) and the page link (what you would see in the HTML/CSS code -- usually, you would make the page link the same name as your page name, but with no spaces or capital letters.

The Page Title (SEO), Page Description (SEO), and Keywords (SEO) is what search engines will use to see what your page is about. By putting in words for what your page is about in these sections, it will help search engines like Google and Bing, locate this specific page of your website, which will help direct potential customers to your website. Remember to use keywords to help your website get to the top of web searches.

Note you also have the option to exclude the page from internet searches which means that Google and Bing will not be able to bring potential customers directly to this page. To do this, check the box that says “Exclude page from search.”

If you do not know how to code or what HTML is, do not worry, you can leave this blank when creating a new page. It will not affect you, your website, or your business.

When you are happy with the changes, press the green “Done” button. You will see that a new page was added to your menu bar.
How can I delete a page from my website?
On the top of the screen, click on the “Pages” tab to edit the pages your website has. On the left-hand side, click on the page you wish to delete. By clicking on the page, you will be able to see its information and on the top right-hand corner of the screen, you can press the red “Delete Page” button to permanently delete the page from your website.
How can I edit the name or keywords of an existing page?
On the top of the screen, click on the “Pages” tab to edit the pages your website has. On the left-hand side, click on the page you wish to edit. By clicking on the page, you will be able to see its information which you can then edit.

When you are happy with the changes, press the green “Done” button.
How can I view and edit an existing page on my website?
There are two ways you can view and edit an existing page on your website. The first is by clicking the page you want to visit on your main bar. This will bring you directly to that page.

The second is by going through the “Pages” tab. This is the only way to view or edit pages that are not accessible via the menu bar (e.g. if they are hidden). On the top of the screen, click on the “Pages” tab to edit the pages your website has. On the left-hand side, click on the page you wish to view. By clicking on the page, you will be able to see its information and on the top right-hand corner of the screen, you can press the green “Go to Page” button which will direct you to that page on your website.

You can then view and edit that page of your website just like you would on any other page. When you are happy with the changes, remember to press the “Save” button the top of the screen. The “Save” button is to the left of the “Publish” button.
How can I add a stripe to my webpage?
Too add a stripe (new part or section) to your website, mouse over the end of a stripe and click the green “plus (+)” button. You will then be directed to pick what type of stripe category you want on the left-hand side (e.g. contact, news, our projects) and then pick a template you like on the right-hand side.

When you are happy with the changes made, click the green “Done” button.
How can I move my stripe down or up on my webpage?
To move your stripe higher up or lower down on your webpage, mouse-over your stripe that you wish to move and click on the right-hand side either the up arrow to move the stripe up one position or the down arrow to move the stripe down one position.
How can I delete a stripe?
To delete or remove a stripe, mouse-over your stripe that you wish to remove and click on the right-hand side the “X” close symbol.
How can I edit the header on the page?
You can edit the header (the top-most stripe where your logo and menu bar is located) by mousing over the header and clicking the settings (gear) icon. From there, you can edit whether the header moves as the user scrolls down, if it shows up on every page, the color, measurements, spacing, alignment, and more.

When you are happy with the changes, press the green “Done” button.
How can I make the header move with the user as they scroll down?
You can edit the header (the top-most stripe where your logo and menu bar is located) by mousing over the header and clicking the settings (gear) icon. From there, you can make the header stick, or scroll down with the user by checking the box “Stick to the Top” under the “Header Stripe Settings” section.

When you are happy with the changes, press the green “Done” button.
How can I make the header stay at the top and not move as the user scrolls down?
You can edit the header (the top-most stripe where your logo and menu bar is located) by mousing over the header and clicking the settings (gear) icon. From there, you can make the header stay on the top, or not move as the user scrolls down, by checking the box “Stay on Top” under the “Header Stripe Settings” section.

When you are happy with the changes, press the green “Done” button.
How can I edit the main banner or replace the image on the page?
The main banner is the opening picture you see as the background of your page. It is directly under the header. To edit the main banner, mouse-over the main banner on the page and click the edit (gear) icon to be taken to the Stripe Settings.

To replace the image, press the “Change” button across from the “Background Image” title where you can either upload an image from the internet, from your own computer, or Solomoto’s personal selection.

If you previously added images to your collection, they will be stored in the “My Collection” tab.

Remember, if you upload an image from the internet to give the photographer credit or to site your source of where you got it, otherwise it could be considered copyright.
What is a parallax effect?
A parallax effect allows you to give your website layers and appear more complex because there is a delayed effect between the speed of the text and the image as a user scrolls down. To the user, when she scrolls down, it looks as if your text and the rest of the website moves over the original background. This makes it seem like the original background is behind the entire website, creating a cool effect.

To enable the parallax effect, click the edit (gear) icon on a particular stripe and check off the box labeled “Enable Parallax Effect.” To turn off the effect, uncheck the box.

Play around with the effect to see if you like it for your website. When you are happy with the changes, press the green “Done” button.
How can I customize the content of my website page?
On the left side of the screen, we have created special widgets to help you personalize the content of your website. Each widget allows you to insert a different element to the body of your website.

To insert an element, simply drag (click, hold, and move) an element to the desired body of your website. Where you see the grey highlighted area is where the element will be inserted.

When you are happy with the changes, remember to press the “Save” button the top of the screen. The “Save” button is to the left of the “Publish” button.
How do I move an element already on my webpage?
You can move any element on your webpage by mousing-over the element and dragging (clicking, holding, and moving) the grey square with the four corner arrows that corresponds to that element to another area of the webpage.

When you are happy with the changes, remember to press the “Save” button the top of the screen. The “Save” button is to the left of the “Publish” button.
How can I delete an element from my webpage?
You can delete any element from your webpage by mousing-over the element and clicking the “X” closing symbol that corresponds to that element which will delete it from your webpage.

When you are happy with the changes, remember to press the “Save” button the top of the screen. The “Save” button is to the left of the “Publish” button.
How can I add and edit a text block for my webpage?
To add a text block to your website, drag (click, hold, and move) the Text/HTML widget located on the left-hand side of the screen to where you want the text to be located.

After you add the Text/HTML widget to the right area on your webpage, you can type or paste what you want the text to say and then edit the text by changing the font type, size, color, alignment, or accents. You can also add a link, so if a user clicks on a word or phrase, they are sent to that link.

You can also insert images and tables within your text by clicking on the image or on the table button in the text editor bar.
How can I add or edit an image for my webpage?
To add an image to your website, drag (click, hold, and move) the Image widget located on the left-hand side of the screen to where you want the image to be located.

When selecting an image, you can choose between uploading a new image from your computer or table, uploading a new image from the internet, or choosing between images in the Solomoto collection.

If you have previously added images to your Collection, they will be stored in the “My Collection” tab.

Any image you have selected can be cropped or resized. At the bottom of the screen you can set a target destination for your image to redirect users that click on it to a new link or page of your website.
How can I add multiple images to my website at once?
To add multiple images, either in a grid-like formation or in a carousel (rotating images) format, drag (click, hold, and move) the Gallery widget to the desired area on your webpage. You will then be able to choose what images you would like to have in your gallery by uploading new images from your computer or tablet, uploading new images from the internet, or choosing between images in the Solomoto collection.

If you have previously uploaded new images to your Collection, they will be stored in the “My Collection” tab.
How can I edit my gallery images?
You can edit your gallery by mousing-over the gallery and clicking the edit (pencil) icon which will bring you to the gallery settings screen. There, you can edit the gallery images by adding or deleting images, adding descriptions, and creating external or internal links under the “Images & Text” section.

If you want the users to be directed to a page on your website when they click an image, underneath the description of the image in the “Images & Text” section, there is a drop down menu. Click the menu and select “Website Page.” A new drop down menu will appear where you can pick what page you want the image to direct your user to.

If you want the users to be directed to an external link (not on your website) when they click an image, underneath the description of the image in the “Images & Text” section, there is a drop down menu. Click the menu and select “External Link.” A new textbox will appear where you can write or paste the link you want the image to direct your user to. Remember to paste the entire URL, so the computer can redirect the user to the appropriate website.
How can I change the style or design of my gallery?
You can change the style or design of your gallery by mousing-over the gallery and clicking the edit (pencil) icon which will bring you to the gallery settings screen. Once there, click on the “Design & Style” tab where you can then edit the style of the gallery (how the images are presented) and the design of the gallery (customizing the design of a specific type or style of gallery).

When you are happy with the changes, press the green “Done” button.
How can I add a Catalog to my webpage?
Too add a catalog to your website, drag (click, hold, and move) the catalog widget found on the left-hand side of the screen and move it to where you want the catalog to be on your website.

In the widget window, you can insert new items by clicking the green “Add new item” button and then upload new images from the internet or your personal computer. You can also use images from the Solomoto collection. If you have already uploaded images to your collection, you can access those images by going to the “My Collection” section.

You can then add more detail explaining each feature in the catalog by including the title, subtitle, description, and button for each image. The button can be a link to a page on your website, an external link (off of your website), or a widget.
How can I edit my catalog?
You can edit your catalog by mousing-over the catalog and clicking the edit (pencil) icon. You can then edit any text, link, or image for each part of the catalog in the “Images & Text” section.

Additionally, in the “Design & Style” section, you can change the design of the catalog by clicking on the different layouts on the left-hand side and further edit each design by playing with the settings found on the right-hand side. Also on the right-hand side is a preview section where you can see what your catalog will look like, when you are done editing.

When you are happy with the changes, press the green “Done” button.
How can I add a Video to my webpage?
To add a YouTube or Vimeo video to your website, drag (click, hold, and move) the video widget found on the left-hand side of the screen and move it to where you want the video to be on the website.

In the widget window, insert the video’s URL (link to the video) and select the width you would like the video to be either in percent or pixels.

When you are happy with the changes, press the green “Done” button.
How can I add my Contacts to my webpage?
To add a contacts section to your website, drag (click, hold, and move) the “Contacts” widget found on the left-hand side of the screen and move it to where you want the contact section to be on the website.

You will then be asked to fill out all the relevant details in the contact widget window including the address, website, phone numbers, e-mail, and more. You can also choose to add a map of your location via Google Maps as well as business hours.
How can I add a collection form to my webpage?
A collection form can collect emails, phone numbers, messages, names, or anything that your business would want to collect. To add a form to your website, drag (click, hold, and move) the “Form” widget to where you want it to go on your website.

You will then be asked to write the purpose of the form and what you want people to give you when they submit. In the form widget, on the “Fields Set Up” section, you can write and edit the form title and subheading.

You can also add or delete input fields (e.g. Email, Phone) by clicking the green “Add new field” button to add a field or by mousing-over an existing field and clicking the red “X” to delete that field. To reposition the fields in the form, you can drag (click, hold, and move) the green button with the four arrows on the respective field and move to the desired place.

To change the text that is inside of each box, click on the box, and type what you want each box to say. Each field is automatically set as required (meaning that for someone to submit the form, they need to fill out each box), but if you want fields to be optional, you can uncheck the box that says “Required” for the specific field of interest.

In the “General Settings” tab on the contact form widget, you can change the form’s colors, the message after submission, and where to send the feedback email. Note, for the message after submission, the top box is the title and will appear big, while the bottom box is the body of the message and will appear small.

When you are happy with the changes, press the green “Done” button.
How can I add columns to my webpage?
To add (vertical) columns to your website, drag (click, hold, and move) the “Columns” widget found on the left-hand side of the screen and move it to where you want the columns to be on the website.

You will then be asked how many columns you would like. These columns are good for breaking up a stripe into sections, to make it easier to put images, text, and other things on your webpage to better organize your website.
How can I add an About section to my webpage?
To add an about section to your website, drag (click, hold, and move) the “About” widget found on the left-hand side of the screen and move it to where you want the about me section to be on the website.

You will then be asked to fill out information regarding the about section including the section title and the description or body of the section. When you are happy with the changes, click the green “Done” button.
How can I add a Button to my webpage?
To add a button to your website, drag (click, hold, and move) the “Buttons” widget found on the left-hand side of the screen and move it to where you want the button to be on the website.

You will then be asked to fill out information regarding the button including what the button says, the link that the button does (can be to a page on your website, a widget, or external), and where the butter is aligned on the page.

You can also customize the look of the button by clicking on the “Design & Style” tab. To customize the button, you need to uncheck the “Enable template button styles” box.

When you are happy with the changes, click the green “Done” button.
How can I add a Map to my webpage?
To add a map to your website, drag (click, hold, and move) the “Map” widget found on the left-hand side of the screen and move it to where you want the map to be on the website.

You will then be asked to fill out information regarding the map including the map design found on the left-hand side of the screen and what the map is showing found on the right-hand side of the screen.

When you are happy with the changes, click the green “Done” button.
How helpfull was this article?

Can't find what you're looking for?

Our team of experts will be glad to assist you.

  • Beila Kahana

  • Fabio Craveiro

  • Ana Amaral

Contact us