Artists on the web have no shortage of options for building a portfolio website. Artists can get a free website (which is unprofessional in my opinion – read The Greatest Internet Myth). Many of the paid options involve expensive monthly fees. Hosting websites can be cheaper, but requires technical knowledge of cPanel and ftp, and the cost for hiring a web designer could run into the thousands.

create portfolio websiteThese are some reasons I like Webydo, and am using it for this portfolio tutorial series:

  1. Artists have full control of the website and can redesign it (or parts of it) anytime. For myself, this is a big plus. I find working from a template very restricting in that I am always confined to the template. With Webydo, its easy to add elements without messing up the entire design.

  2. The Webydo CMS is so easy to use. If you are familiar with Photoshop or Gimp, this will be a breeze.

  3. If an artist decides to create another site, such as an online store or blog, they can easily create and access it from the same Webydo dashboard. There will be no dealing with cPanel or uploading files by ftp. Everything is handled by the Webydo DMS.

  4. There is a certain satisfaction which comes with building a site oneself, and having complete control over its design.

To learn more about Webydo, please read these posts:

Designing Websites with Webydo
Webydo Design Business Branding

This tutorial series is meant as a general guide in creating your own website. If you are unfamiliar with Webydo, just follow along. Then, use that knowledge to create a unique portfolio of your own. If you have your own graphics, banner and logo, use them to personalize your website.

I will be as thorough as I can so there will not be any confusion. If you need additional help, watch the great Webydo training videos, as mentioned at the end of this article. Remember, if you ever make a mistake, just hit the undo icon in the top right corner – and don’t forget to save often.

Building a Portfolio Website Series – Setting up your Pages


  1. After logging into the Webydo dashboard, click +New Website at the top.

  2. How would you like to start?

    webydo website options 

    We are presented with 3 options for designing a website – Design, Layout and Blank. With Design we will start out with a pre-designed template. This can be used as inspiration for designing a unique website. Basically we would be beginning with a fully designed website, and working backwards. For the Layout option, we begin with a basic structure. Certain pages are already added, and the website also contains site elements such as a contact form, image boxes, header and text boxes. With the Blank option, you begin with a blank slate.

    The Layout option seems like the simplest way to go about building a website, with part of the work already done for us, so we will choose this one.

    Click Layout, and select Portfolio Layout. Wait for the Webydo CMS to load.

  3. Pages background color

    Hit the Site Presets button at the top most menu. Click the color box under Page - Background, and choose a background color. Select any color you like – it can be changed anytime. We will be selecting the second last palette option at the bottom of the color chooser popup - #CCCCCC

    Hit OK to apply this color to all pages of the portfolio website.

    If you would like an image for your background instead, hit the little image icon here to upload one.

    Tip: Want a full background image just for your homepage? First have your homepage selected, then click anywhere on the background. Open the Properties Panel at the right if it doesn’t open automatically. Select the image icon here to upload a background image to just the home page.

    website background color

  4. The first thing we are confronted with are 4 pages – Home, Gallery, Contact us, and About us. You will notice that the home page has a thumbnail gallery of images, but for the purpose of this tutorial we will be changing this. If you like it this way, you can keep the page like it is and just follow along. The Gallery page has a slideshow. This is the one we would like to see on the home page, but will be changing it to a full screen slideshow.

    Click Pages at the top.

    webydo pages
    With Home selected, hit Duplicate. This creates an exact copy of your Home page. Notice that the new page is also named Home, but has different icon beside it. We will later be using this as the Gallery page.

  5. Now, go to the real Home page, and select everything in the main area by holding down Shift and clicking. Once all the parts with “Insert your Slogan here”, and image and text boxes are selected (as shown below), right-click on one of the elements and choose Delete in the menu. Now, you are left with a blank page with only a header and footer.

    webydo select elements 
    In the top menu, grab the Gallery icon, and drag it to the main area. We will deal with this page later. Now there is some cleaning up to do.

  6. Go to Pages in the top most menu, and select the Gallery page. In the options to the right, hit Delete and confirm.

    Now, in the second page titled “Home”, click “Page settings” in the options. Enter “Portfolio” or something similar for the title, then hit Save. In the same way, change the titles for the “About Us” and “Contact Us” to Bio and Contact.

    Notice that you can also reorder the page here by using the directional icon to the left of the titles. Drag the Portfolio page just below the Home page, then hit X in the upper right corner to close that menu.


That’s all for this part of the tutorial on creating a portfolio website with Webydo. While waiting for the next part, you may decide you want to continue on with your website. 

If you need any help along the way, don’t forget to visit the Webydo Help menu. Find it at the top right of the CMS. Watch the video tutorials and find extra guidance in the Knowledge Base. Also, hit “Get to know your workspace” to get a guided tour.

This is another article we have written about Webydo:

Easy Website Design

If you have any questions, leave a comment or contact me via the contact form below.

UPDATE! Find part 2 of this series here: Creating a Slideshow

No comments:

Thank-you for your comment!