How to create a Portfolio Designer Website in 6 Steps for free

15th October 2022

In this Tutorial you will learn how to set up a free website in 6 steps with "Lay Theme Free".
We will set up WordPress and install the free WordPress Theme Lay Theme Free Version.
You got two options. A local setup or an online setup.

Option 1: Local Installation (totally free)


When setting up a website locally it won't be on the internet. It will only be accessible from your laptop. However, you can later get webhosting and move the site to your webhost. Then it will be online.

This is just so you can try Lay Theme totally for free.

If you want to go online later you will need to do Step 6.

Scroll down to Step 1 for the local installation.

Option 2: Online Installation


If you want to get webhosting and install Lay Theme there, we recommend Dreamhost or GreenGeeks. We are their affiliates. Other webhosts work fine too.

Once you got webhosting, install WordPress on your webspace. Most webhosts have a one-click installer to do this.

Then skip to Step 3. You won't need to do Step 6.

1. Download Lay Theme and Local

First, download Lay Theme Free Version.
Then head over to localwp.com and download "Local" for free.

localwp.com is an App for local WordPress

2. Install Local

Install Local! Once installed, you can add a new WordPress site using the "+" button.

The "+" button is on the bottom left

Click the "WP Admin" button on the top right. Login to the WordPress admin panel.

3. Install Lay Theme

If you haven't already, download Lay Theme Free Version.

Go to your WordPress admin panel. It can be found at "yourwebsite.com/wp-admin/". Now go to "Appearance" → "Themes".

Click "Add New" at the top.

The Themes section is where you install Lay Theme

Now click "Upload Theme" and upload lay.zip.

Upload Lay Theme here

4. Most Important Sections

These are the four most important sections of Lay Theme.

Gridder


This is where you edit your pages.
Go to "Pages" or "Projects" to see it:

The Gridder

Textformats


You create your Textstyles here and reuse them throughout your website.
We recommend you always use "Textformats"!

Textformats

Customize


Find a lot of settings for customizing the look of your Website here. Also set your Frontpage here.

Go to "Customize" → "Menu Style" → "Menu Bar" to hide the white bar at the top.

Find "Customize" here

Lay Options


In here you'll find lots of settings.
You can enable extra features like Custom Phone Layouts.

Lay Options

You're good to go!

Read further to see how we would create a simple Portfolio Website. Or play around with Lay Theme to see how it works or watch the Getting Started Video.

Take a look at Documentation for a deep dive into Lay Theme.

5. Create a Free Portfolio Website Walkthrough

Here we go!

We will create a simple Portfolio Website. This is the end-result: free-website-tutorial.laytheme.com

Watch the video above or read on. It's the same thing, here it's just in written form:

Create a Front Page and change your Site Title


Go to your admin area (yourwebsite.com/wp-admin/).
On the left go to "Pages". Create a new Page. This will be your frontpage. In here add some text like I did.

We add some text just so we see whats on the frontpage

When we visit your website at "yourwebsite.com" we don't see the frontpage as the first page. Let's change that.

Go to "Customize" → "Frontpage". Choose the page you just created as your frontpage.

This is where you set your Frontpage

While you're in Customize go to "Site Title" and change it so it doesn't say "Just another WordPress site". Because Lay Theme websites are anything but that :).

Typography


Go to "Lay Options" → "Webfonts". Upload a cool font, I got one by Blaze Type.

Upload Webfonts here

Then go to Textformats and set that Font for your "Default" Textstyle. You can create more Textstyles here to use throughout your website.

Textformats have settings for all devices

Change the Default Grid Settings


In "Lay Options" → "Gridder Defaults" change the settings so we have more space at the top.

We could do this for every page and project individually but it's easier like this. We like to use pixel values for everything. You can change "Frame in" to px and "Row- and Column Gutter in" to px.

For "Frame Top" use a value like 150 pixels. This way our menu has more space at the top of your website.

Make sure to check "Apply Desktop Gridder Defaults" so the changes are applied to our existing pages.

Gridder Defaults is for having a consistent Grid on your whole website.

Create Projects with Tags


In "Projects" create a Project Page. Go to Projects, click "Add New", change the title and insert a Featured Image.

The Featured Image is the preview image of your project. It's also called "Project Thumbnail".

Now you can start layouting your first project. Insert images, texts videos and more here:

At the top of the Gridder use the Elements buttons

Create a bunch of projects and make sure you use categories, tags or both.

We only use Tags on our website:

Add Tags here

Add a Thumbnailgrid to your Front Page


Go to "Pages" and edit your Frontpage. In here, add the "Thumbnailgrid" Element. This is a Grid of the Projects you just created.

Add a "Thumbnail Grid" Element here

Also activate "Show Tag Filter".

Find "Show Tag Filter" in the "Filter" Tab

Take a look at your website. We now have an overview of all of your projects on the frontpage.

People can now filter through your Projects using your tags

Add a Footer to your Projects


Let's create a Footer for your Projects. It will contain a button to navigate to the next project. Also it will include links to your social media.

Go to "Pages", create a new page called "Footer". Add a Text, enter "Next Project" and use the "→" button to make it a "Next Project" button.

Select the text, then click the arrow button

Afterwards you can click the "( 1 )", "( 2 )" or "( 3 )" button to give your text a button style.

Now add your social media links. Click "+More" → "+Social Media Icons", add your socials and put this in your footer.

Select the text, then click the arrow button

Go to "Lay Options" → "Footer". Click "Active for all Projects". From the dropdown choose the page "Footer" you just created.

Set Footers here

Amazing! Look at a project and find the footer below.

Now people can easily go to the next project once they arrived at the end of one

Create an About Page


In "Pages" create a new page. Call it "About" and add a Text about your website.

If the text is longer you can make it have a fixed pixel width. This way it won't get too wide. Really wide text is not readable easily so we like to do this.

Right-click your text and choose "Set Text in Pixel Width". Use a value of 700 pixels for Desktop and Tablet.

Find "Set Text in Pixel Width" here

Add the About Page to your Menu


In "Appearance" → "Menus" create a menu. Assign it to the "Primary Menu" location. Add your "About" page to the menu.

Add your menupoints here

Now the menu shows up on your website:

By default the primary menu shows up at the top right

Customize the Mobile Version


When you resize your browser you'll see the mobile version.
We want our mobile version to look like this:

We need to change some settings to make your mobile version look like this

In "Customize" go to "Mobile (Smartphone)".

Find lots of settings for mobile here

In here you find different sections for mobile settings:

In "Mobile Menu" choose "Menu Style" → "Desktop Menu Style".
In "Mobile Menu Bar" click "hide".
In "Mobile Spaces" choose "Space Top in" → "px" and "Space Top" → "100".
In "Mobile Site Title" choose "Position" → "left" and "Font Size" → "15px" or any value that matches the font size of the "About" menu point.

While we're at it go back to "Customize" where you found the "Mobile (Smartphone)" section. In here, find the "Site Title" and "Menu Style" sections. Let's move the site title and menu closer to the edges of your website.

In "Site Title" and in "Menu Style" → "Primary Menu Style" you'll find position settings.

Congratulations! 🥳


That's it. You just built your first Lay Theme Website.

You may wonder how to make your website more sophisticated. Take a look at Documentation to explore more things you can do. Also look at the "Websites made with Lay Theme" section on laytheme.com for inspiration. Or take a look at our Instagram for more tips.

6. Get Webhosting and Go Online

Go online!

This is the only step that would require spending some cash.

We recommend these two webhosts: Dreamhost and GreenGeeks. We are affiliates of Dreamhost and GreenGeeks.

Get webspace and install WordPress on it. Most webhosts include a one-click installer for WordPress.

Now on your local Lay Theme website install the plugin "Duplicator".
The "local" website is the one you installed "Local" for in Step 2.

Install the "Duplicator" Plugin

Go to "Duplicator" and use it to move your website to your webhost. You will need your FTP credentials which you can find in your webhost admin area.

Here is a Duplicator tutorial:

Once you export your website and got the files using duplicator you need to upload them to your webhost by using FTP.

Do this by using FileZilla or you can use webftp in your webhost control panel if your webhost provides this.

If you use FileZilla you need to get your FTP login data from your webhost control panel.

Upload the two files to your WordPress root folder where you see the folders "wp-content" and "wp-admin" and "wp-includes".

Then in your webbrowser go to: yourwebsite.com/installer.php

Congratulations!