Advanced tutorial for designers showing how to create a portfolio site.
STEP 1. Planning 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. Create 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 a blank page (1).
STEP 3. Set the row visibility for your site
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:
- Feature 2
In the background tab (1) set the width for this website (2) to be 840px.
To import images, click on the Media tab (1) and then click on the Add button (2).
1. Select the folder where you saved all the files for this project.
2. Select the header image
Add an image to a row style
1. Click on the settings icon for the headers row.
2. Select the header style to apply it to this row.
3. Click on the settings icon for this 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.
Add a background pattern
Upload a pattern to your editor. If you don't have a pattern you can find some great patterns at ava7patterns or use a solid colour instead of an image.
1. Click on the background tab
2. Select Image on the drop down menu
3. Click on the pattern and drag it to the image box
4. Check the tick boxes to make the pattern repeat itself across your websites background
Follow the same process with the rest of the rows and add a different style to each one of them.
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.
On the Services page we won't be needing the feature row, so click on the Row visibility icon and uncheck the 'feature' tick box (1).
Continue duplicating pages to complete the site structure
After creating all the pages for the website we can start adding content. Go to the About page.
STEP 5. Add some content
On the Widgets tab (1) select the Carousel Widget (2) and Drag and Drop it to the feature row (3).
1. Click on the settings icon for the Carousel Widget
2. Add as many pages as you need by clicking the 'Add' button.
3. Drag & Drop the images to the carousel widget
4. Set a time interval for the carousel widget
5. Uncheck the Page indicators and the Next and Prev buttons
You will now have an image banner to show on top of your page.
The navigation menu shown in this website was is made with grpahics created in Photoshop. This allows us to use a font not available within most web browser.
As a simpler alternative, you can use the Navigation menu Widget but you will have a smaller choice of options
First, upload the buttons for your navigation menu. Here I have uploaded two images for the same button. i.e. about and about-ro (to create arollover effect on the link)
We want the navigation to be the same on every page, so we are going to put it inside a template widget. This means that when we edit on one page, it will be updated everywhere.
1. Create a Template widget called 'Navigation'
2. Drag the Template widget on top of the menu bar.
1. Add a Columns widget inside the Template widget
2. Divide the columns widget into 5 columns
3. Add an image to each column to make the navigation menu
4. Add a Site search widget to the last column
1. Select the first image
2. Click on the settings icon
3. Select the rollover image
4. Drag & Drop the image to the Rollover box
5. Add a link to this image
Select Internal Link (1). We were editing the About image, so select the about page (2) in the drop down menu. Save the link (3)
Follow the same steps for all the images in the navigation menu.
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.
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 content document into the different text blocks across your website. Find out more about Creating or editing a type style
STEP 6. Create a good looking portfolio
The portfolio page.
There are a lot of images on this page and it will help the page load faster if we scale images to the right size before importing them.
We have useda Columns Layout widgets to create the structure for this page
To add image to the layout:
1. Drag the grayscale thumbnail to the column widget
2. Click on the settings icon for this thumbnail
3. We have two other images, one for the rollover and one for the lightbox.
4. Drag the colour thumbnail to the Rollover slot
5. Drag the larger image to the Lightbox slot
You can test the images using the Preview mode. When you roll over an image you should see it changes.
When you click on the image, the image will show larger in a lightbox.
STEP 7. 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.
Go to Manage (1) and then click on the SEO (2) button.
The SEO settings should make it easy for a search engine to index your site contents. Don't forget to click Save Settings (3) 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.
STEP 11. Change the links in the navigation menu
After publishing the website with an external domain, the links on the navigation menu needs to change. Instead of pointing to an Internal BaseKit page, it needs to point to an external link.
1. Click on the first image in your navigation menu and click on the configuration icon
2. Select Add link in the options panel
3. Write down the external link to your page
4. Save link
5. Publish your site again