---
title: "Creating a portfolio with Essential Portfolio"
canonical_url: https://support.digitalphotogallery.com/articles/article/987b927c-b0cc-11ea-8752-d6336a578750
short_url: https://dpg.support/auji
category: "Websites > Guides"
locale: en
updated_at: 2021-06-03T01:10:10Z
source: Digital Photo Gallery Support
---

# Creating a portfolio with Essential Portfolio

In this guide we'll be going through the steps to set up a brand new website using the Essential Portfolio template.

> 💡 **Tip:** For an even more in-depth video tutorial, please see [Getting started with Essential Portfolio](https://support.digitalphotogallery.com/articles/article/7c1354ca-e16a-11ea-ac9c-3248f2465248).

#### Before you begin
If you're new to DPG, prepare some images or native video to upload. You can always add more later, but it will help you to see some real content when making initial design choices. And don't worry too much about any information you add using the helper (such as the name of the website or the header text), everything can be edited once the site is created.

### In this guide:
* [Create the site](#create-the-site)
* [Follow the helper](#follow-the-helper)
* [Preview your site using a testing host](#preview-your-site-using-a-testing-host)
* [Edit content](#edit-content)
* [Add navigation items](#add-navigation-items)
* [Add social icons](#add-social-icons)
* [Add media](#add-media)
* [Create sets](#create-sets)
* [Edit the design](#edit-the-design)
* [Edit the contact page](#edit-the-contact-page)
* [Add website icons](#add-website-icons)
* [Add homepage description](#add-homepage-description)
* [Set up a public host](#set-up-a-public-host)

Let's begin! 🚀

### Create the site

[▶ Video](https://cache.dpg.media/hyqelgcvfopo/videos/d8998670-b18a-11ea-8ce2-0ad4e06bc2a4/dc18adc6-b18a-11ea-8ce2-0ad4e06bc2a4.mp4)

From the Dashboard navigate to the websites screen by clicking **Manage**.

Choose the **New site** tab, then **Websites** where you will see the Essential Portfolio template. 

Select an initial theme and index view preset for the site (this can be changed later) and click **Create**.

### Follow the helper

[▶ Video](https://cache.dpg.media/hyqelgcvfopo/videos/787d2cfc-b18e-11ea-aa6f-6e50fb6d292e/7b05caba-b18e-11ea-aa6f-6e50fb6d292e.mp4)

Click **Start** to use the helper and fill in some basic information for your site. This will guide you through a few steps to easily configure things like the header and contact page. You'll also add some images to make design customisations easy to visualise.

Once you've completed each step, click the **Build website** button.

You'll see a **Creating website** loading screen. Stay on this page while the website is created, this may take a few minutes depending on the size and quantity of your images. 

Once the website is created, you'll see the website **Overview** screen. This will be your starting point for anything to do with this website.

### Preview your site using a testing host

[▶ Video](https://cache.dpg.media/hyqelgcvfopo/videos/381b2544-b191-11ea-bdad-6e50fb6d292e/3accf3d0-b191-11ea-bdad-6e50fb6d292e.mp4)

Click the **Visit** button to preview your site on the web. If you've added content using the helper in the previous step, you should see your site is beginning to take shape.

> 💡 **Tip:** This is just a preview URL for testing, we'll make a public address to share later on in this guide.

### Edit content 

[▶ Video](https://cache.dpg.media/hyqelgcvfopo/videos/42b25050-b195-11ea-9b7e-0ad4e06bc2a4/457d43c6-b195-11ea-9b7e-0ad4e06bc2a4.mp4)

From the website **Overview** screen, choose the **Content** tab. This is where you can edit information that appears on your website such as the header and footer text, navigation items and social icons.

> 💡 **Tip:** You can add a logo to the header in the design section, but a text entry is also required for accessibility.

### Add navigation items
You can add and remove navigation items here. These can link to other DPG or external websites.

[▶ Video](https://cache.dpg.media/hyqelgcvfopo/videos/1a5f7e92-b1aa-11ea-befa-6e50fb6d292e/1d1909d2-b1aa-11ea-befa-6e50fb6d292e.mp4)

Select the **Main Navigation** tab. Click the **Create** button, select type Standard and enter a name and URL. Click **OK** and repeat this process for each new item.

To [add a new page](https://support.digitalphotogallery.com/articles/article/196bbd9e-ac1b-11e2-b218-f23c91703874) to the navigation, create it in **Pages** first.

> 💡 **Tip:** Make sure that external addresses start with http:// or https://.

### Add social icons
Add links to your social media profiles. These will appear as icons in the footer and overlay navigation.

[▶ Video](https://cache.dpg.media/hyqelgcvfopo/videos/29a47054-b1ac-11ea-b849-6e50fb6d292e/2c7f5a78-b1ac-11ea-b849-6e50fb6d292e.mp4)

Select the **Social** tab. Click the **Create** button to choose a service and enter the address of your social media links.

### Add media

![](https://cache.media.digitalphotogallery.com/hyqelgcvfopo/images/6ad36810-b264-11ea-87f4-0ad4e06bc2a4/1471_support.jpg?generated=20200619204112)

On the **Overview** screen you'll see the sets linked to this website. The Gallery page is linked to the Gallery set. You can [add images or native videos](https://support.digitalphotogallery.com/articles/article/7b889c02-ab37-11e2-afa4-b8f6b11825bb) to this set to see them on the gallery page of your site. 

### Create sets

You can use sets to organise your work. Learn more about [sets and the gallery page structure here](https://support.digitalphotogallery.com/articles/article/923f931c-9cd9-11e8-b6bf-3225061e24b0). If you want to keep all you images inside the gallery without separating them into sets, you can skip this step 🏃.

[▶ Video](https://cache.dpg.media/hyqelgcvfopo/videos/82718632-b1c9-11ea-b1ab-0ad4e06bc2a4/8558615e-b1c9-11ea-b1ab-0ad4e06bc2a4.mp4)
To convert the existing images into a nested set, click on the **Gallery** set from the **Overview** screen. 

Open the **New set** panel and enter a name for the set. Click the **Create** button. Select all the images inside the gallery.

Open the **Add to set** panel and navigate to the Gallery set. You'll now see your newly created set nested inside **Gallery**. Select it and click **Add**. 

Once done, you can use the **Remove** panel to remove the images from the main Gallery set (they'll still remain in the new nested set where you just put them!).

You can create more sets inside the Gallery set to further organise your work, then add images and native video to populate your gallery. 

[▶ Video](https://cache.dpg.media/hyqelgcvfopo/videos/909cb2b8-b1ba-11ea-8c42-6e50fb6d292e/93a8eee0-b1ba-11ea-8c42-6e50fb6d292e.mp4)
If you've created some nested sets and added images, you will see them on your site.

### Edit the design
This template comes with a number of pre-made themes, layouts and navigation styles. There are endless customisations to make the design your own. In the **Design** section, start by choosing a theme and a gallery style (if you're happy with what you chose at the start, then stick with that but switching is just one click if you want a change). Once you're happy with the general layout, customise fonts and colours in the **Style** tab.

[▶ Video](https://cache.dpg.media/hyqelgcvfopo/videos/5b29f654-b1b0-11ea-b8b1-0ad4e06bc2a4/5e1c9736-b1b0-11ea-b8b1-0ad4e06bc2a4.mp4)

To enter the Design section from the **Overview** screen, click the **Edit Design** icon. In the sidebar choose the **Style** then **Theme** tab. Select a Theme to use or customise later.

Your theme will preview in the main window and you can click **Save** when you're happy with your choice.

[▶ Video](https://cache.dpg.media/hyqelgcvfopo/videos/6ced5660-b1b5-11ea-9a3e-0ad4e06bc2a4/70d88d6c-b1b5-11ea-9a3e-0ad4e06bc2a4.mp4)

Select the **Page** tab to see an array of options relating to the page's design. In the **Components** tab you'll see options for the page header, gallery views, footer and more.

Try different styles to change the look of your website. 

[▶ Video](https://cache.dpg.media/hyqelgcvfopo/videos/9d869c3a-b1bc-11ea-85ac-0ad4e06bc2a4/a07e4df2-b1bc-11ea-85ac-0ad4e06bc2a4.mp4)
If you've created sets, you can change the style of the sets view.

[▶ Video](https://cache.dpg.media/hyqelgcvfopo/videos/e35f632e-b25f-11ea-a7f4-0ad4e06bc2a4/e85594b6-b25f-11ea-a7f4-0ad4e06bc2a4.mp4)

These options are contextual to the preview window on the left of the screen. If you navigate to a different page, you'll see layout options specific to that page.

> 💡 **Tip:** Shared items such as the header will be consistent across all pages, but you can change them on any page on which they're visible.

[▶ Video](https://cache.dpg.media/hyqelgcvfopo/videos/4431e2e8-b261-11ea-af57-6e50fb6d292e/4acb29a2-b261-11ea-af57-6e50fb6d292e.mp4)
You can navigate between different pages in the preview window, or use the top bar to choose a page to view. 

### Edit the contact page

[▶ Video](https://cache.dpg.media/hyqelgcvfopo/videos/e1e5bcbc-b1d0-11ea-a7a2-0ad4e06bc2a4/e4d37a5e-b1d0-11ea-a7a2-0ad4e06bc2a4.mp4)

Select the **Pages** tab and click the **Edit** button on the Contact page. Here you can edit the default **Text** and if you need to, the email address you entered in the **Contact** tab. 

### Add website icons

[▶ Video](https://cache.dpg.media/hyqelgcvfopo/videos/ff17dcd4-b1b2-11ea-9252-0ad4e06bc2a4/020635a8-b1b3-11ea-9252-0ad4e06bc2a4.mp4)

Website icons are the icons you see in the corner of a web browser tab, when bookmarking a page or saving it to a mobile device. Using custom icons is a great way to showcase your brand.

You can add common website icons in the side panel of the website overview screen.

> 💡 **Tip:** For best results your icon should be in PNG format and a minimum of 512px across, apart from the Pinned Site icon which must be an SVG file.

### Add homepage description

[▶ Video](https://cache.dpg.media/hyqelgcvfopo/videos/d5fcf574-b193-11ea-a732-6e50fb6d292e/d90d8260-b193-11ea-a732-6e50fb6d292e.mp4)

Under the **General** tab, you can enter a description of your website. This is used by search engines and will be seen by visitors who search for your work, so use plain text rather than keywords to describe your site. 

### Set up a public host

AKA going live! If you're happy with your site, setting up a public host is the final step before making the website public. This will be the url that you share with the world. If you have your own domain name, you can configure it in the **Hosts** panel. If you don't have your own domain, you can set up a free dpg.gallery URL.

> ⚠️ **Warning:** Before you launch your site you should always add a public host, as testing hosts aren't cached for optimum speed or indexed by search engines.

[▶ Video](https://cache.dpg.media/hyqelgcvfopo/videos/9573236c-b1d8-11ea-9f6b-0ad4e06bc2a4/983279c2-b1d8-11ea-9f6b-0ad4e06bc2a4.mp4)

You can create a free dpg.gallery host, move a host from an existing DPG site or add your own new domain in the **Hosts** tab.

> 💡 **Tip:** If you're not sure how to configure your domain [ask DPG to help](https://support.digitalphotogallery.com/articles/article/72bbc7e0-cbce-11e7-8025-d28524ac7d86)!