Advanced tutorial showing how to create a Bike Shop Website.
STEP 1. Plan your website
Before you start building your site, it's a good idea to do these things:
- Gather all your text content into a single document
- Make a list of the pages you need
- Collect all your images into a single folder on your computer and give each image file a descriptive name
Each of these steps will save you time later.
STEP 2. Start your website
1. In the template picker, click on Blank sites
2. Select the template that has no content
3. Click on the Yes, use this one button.
The first time you get into the website you will see it is a blank template
STEP 3. Edit the style of your website
BaseKit pages consist of 1 or more rows.
1. Click on the Row Editing (1) button to enable row editing mode.
2. Click on the Row visibility icon (2)
3. Select the rows you want on your site. For this example we will need:
- Header 2
If the Header row is located before the Feature row, you can drag the Feature row up by clicking on the icon (4) and dragging up the row
In the background tab (1) set the width for this website (2) to be 840px.
To create a new style for our website, we need to add some images to our BaseKit editor. Click on the Media tab (1) and then click on the Add button (2).
1. Select the folder where you saved all the style files for this project.
2. Select the feature image you have prepared.
1. Click on the settings icon for the feature row.
2. Select the feature style to apply it to this row.
3. Click on the settings icon for this style.
Let's edit the Feature style
1. Select Image in the Background drop down menu
2. Drag the image to the box
3. Click on Save changes
The image is now part of the header.
Change the background
I will use a linear gradient for my background.
1. Click on the background tab
2. Select Linear Gradient on the drop down menu
3. Select the 2 colors for your gradient. I chose a medium gray (8f8f8f) and white (ffffff)
4. Select the angle for your linear gradient
Follow the same process with the rest of the rows and add a different style to each one of them.
You can adjust the height of your rows to fit the background image you added in the row style using the row handler (1).
If you want to know more about styling, take a look at our Site design, themes and styles tutorials
STEP 4. Create more pages
In the site navigation panel click on the page to duplicate it.
Continue duplicating pages to complete the site structure.
Our store is going to be located in the Online Store (1) page. Go now to this page.
We are going to add a background for the sub navigation menu.
1. Drag a Background Widget to your main row.
2. Click on the widgets settings icon.
In the options panel:
1. Drag the image called 'submenu' to the image box.
2. Select Stretch Image in the Options drop down menu.
3. Set the padding as zero.
4. Adjust the width of the background widget using the corner handles.
For the subnavigation menu you need to create a folder.
1. In the site navigation panel click the ADD button
2. Select Create Folder
1. Give the folder a descriptive name. (This name won't appear in the sub navigation menu).
2. Untick the checkbox
3. Click on the Create Folder button
You will see the folder in the site navigation panel. The pages we need to add inside this folder should be a duplicate of the Online store page as it already has the background for the sub navigation menu.
1. Select the Online Store page
2. Click on Duplicate page and contents
1. Name the page with the first product category (in this case, Folding Bikes)
2. Select the folder you created for your products in the drop down menu
3. Click on Save
Continue duplicating pages to complete the site structure
STEP 5. Add a Template Widget for the Navigation menu
1. Create a Template widget called 'Navigation menu'
2. Drag the Template widget on top of the feature row.
Add a Navigation menu
1. Add a Columns widget inside the Template widget (by default it will show two columns)
2. Add a Navigation Menu Widget to the first column
3. Add a Site Search Widget to the second column
4. Click on the settings icon for the Navigation Widget
1. Change the padding and spacing for your navigation menu
2. Click on the Styles tab
For this example, select the style Page Link and:
1. Change the font color to white
2. Select the size and font for your navigation menu
3. Save your changes
Select the style Page Link (Hover) and
1. Change the font color to blue (00afff).
2. Save your changes
Select the style Page Link (Selected) and:
1. Select the background tab.
2. Change the background color to blue (00afff)
3. Save changes
Now select the Template widget and lock it by clicking the lock icon (1). This will prevent any accidental modification of the widget.
Now we can drag this widget onto every page on our site.
STEP 6. Add a Template Widget for the Sub-navigation menu
1. Go to the Online Store page
2. Click ADD in the Templates tab to create a new Template Widget. Call it Sub Navigation or another descriptive name.
3. Drag the sub navigation template widget to the background widget in the main row
Drag a Navigation Menu Widget (1) into the Template Widget
1. Click on the settings icon for the Navigation Menu Widget
2. Select the Folder that contains your product pages.
3. Align the pages to the centre
4. Adjust the padding and spacing
5. Lock the Sub Navigation Template Widget
Now you can add the Sub Navigation Template Widget onto the products pages.
STEP 7. Add content to your site
We can start adding some content to our website.
1. Add some Visual Guides (1) and move them around.
2. Add some text and image boxes. You can replace their content with your own.
Copy and paste the text from your word document into the different text blocks across your website. Find out more about Creating or editing a type style
Create a good looking service page
The service page.
We have used a Columns Layout widgets to create the structure for this page
Here you can see in more detail how we did this.
1. Add a Columns Widget from the Widget panel and set it to have 4 columns
2. Add a Background Widget inside the first column
3. Click on the settings icon for the Background Widget
4. Upload the image to show in the background
5. Drag that image into this image box
6. Select Stretch Image from the Options drop down menu
7. Set the padding to zero.
Add a text block inside the Background Widget
Paste your text inside the Text Block Widget.
Adding e-commerce to your site
1. Go to your first product page (Folding Bikes).
2. Drag a PayPal Add to Cart Widget to your page
The first time you add a PayPal widget to your page, it will ask you for your PayPal accounts email (1) and the currency you want to use (2). After setting this up, click on the Save button (3).
1. Click on the settings icon for the PayPal Add to Cart Widget
2. Fill the blanks with the information about your product
3. Drag an image of your product from your Images tab
4. Save your changes
5. Change the widget styles (Optional)
Drag a PayPal Cart Widget (1) to your page so your clients can view their carts and proceed to make a payment.
Add your contact information
It's a good idea to include your address and a contact form on your website.
With BaseKit you can add a Google Maps Widget or add an map image showing your location.
You can set the completed forms to be sent to your email account so you know when someone asks for more information about the service you offer.
All your data gets stored in a database. If you want to see it click on the DATABASE tab (1)
If you want to download the data into a spreadsheet to your computer click Export data (2).
STEP 8. Improve your SEO
First, you will need to Submit your site to Google
Optimising your site will help Google and other search engines to choose when to show our site in search results. The most important thing to know about Site Engine Optimisation (SEO) is that your site must have relevant and original content with links from other sites. Everyone wants their site to be listed at the top of a Google search but this can only be achieved through good content, optimisation and linkage.
Click the Manage tab (1), click on SEO (2) and then set the title and description of your site. The site title should include the name of your organisation and what you do. The site description should be one or two short sentences that you would like to appear in a search listing for your site.
Click Save settings when you are done.
To set the SEO details for any other pages, go to the Design mode and then click the page settings button. Click SEO (1) to open the Page options dialogue.
Set the keywords for this page (1). Use short words that describe what is on this page that makes it different from other pages. Use a few words - there is no right number but there is advantage in using more than your need or repeating words.
The Description field should describe what is on the page in one or two short sentences (2)
Click Save (3).
STEP 9. Map your domain name to your site
If you own a domain with us, now is time for you to link the domain to your BaseKit site. From the Account (1) drop down menu on the top left of your editor, select Account (2)
- Click on the Domains tab
- Select the domain you want to use from the list on the left
- Select the site you want to map your domain to from the drop down menu
- Click on the Update button
STEP 10. Publish your site
Click on the PUBLISH (1) button and you are done. You can now access your website using your custom domain name.