STEP 1:

Identify which project you will work on.

STEP 2:

Select the main image for the project. For that specific image, the preferred dimensions should be 800w X 450h but can be smaller as long as the dimensions are proportionate for example: 600w X 338h. The DPI preferrably 100dpi or less.

STEP 3a:

Prep the rest of the images.  The rest of the images in your project should be resized so that they are no bigger than either 1000w or 1000h and the DPI preferrably 100dpi or less.

This will ensure that your website loads fast otherwise it can take a while for pages to load.

STEP 3b:

In addition, make sure to save them so that they can be identified properly.  I normally do something like bef or aft + project name (ex: aft-tender-greens-1.jpg, bef-tender-greens-1.jpg) this will help you locate them when you upload them and in addition it will help out your website’s SEO.

STEP 4:

Now that those are ready, lets go to the websites admin area to set up the projects on the website.

STEP 5:

To setup a project on the website we have to go to two different places: Porfolio & Pages.  Let’s start off with going to Portfolio.  Click on Porfolio to get to the Porfolio page.  Here you will see a list of all your projects.  Click on “Add New” to create a new project.

STEP 6:

Enter the name of your project “enter title here” and select the portfolio category.  In this case there should only be 1 option “pacific”.  But you can enter more categories if you like… more on that later.

STEP 7:

Now we will set the featured image.  Click on “Set featured image”.  This will open up the media library.  Here you can drag and drop the main image for this project (from Step 2).  After that just click on the blue “Set featured image” btn.

STEP 8:

To the left of the featured image go ahead and uncheck the “allow comments box”.

STEP 9:

Last thing is the Qode General section.  Here the first thing you can do is set the date if you like.  Next and really important is the Portfolio External Link section.   This is how we will link the Portfolio to a Page.  The first part of the link should always remain the same:  http://www.pacificsteelindustries.com/portfolio/ the second part should be the name of the project but no spaces are allowed so use “-” instead.  So as you can see in the image the last part is “2447-pch” but for the project I am creating right now I will use “tender-greens” instead.  All lower case.  Finally make sure that the “Portfolio External Link Target” is set to “Self”.  Make sure you click the blue “Update” button on the top right of the page to save our newly added portfolio.

STEP 10:

If you now go to the websites Portfolio’s page, you will see that the new portfolio has been automatically added to it.  However, if you click on it to go to the page, it won’t be there yet because we haven’t created that.  We will go ahead and do that now.

STEP 11:

Let’s now go to the “Pages” page.  First thing you should notice is the section that lists the pages: Portfolio and underneath that you have all the project pages that have already been created.  I will now create a page for the Tender Greens project.  Normally we click on the “Add New” button on top of the page to create a brand new page, but before we do that let’s copy the content from one of the existing pages.  Since this project is similar to the Petco project, because they both have “process” and “after”, I will copy this projects content.  Hover over the Petco project and click on “edit” to go into that page.

STEP 12:

After the page loads, lets click on the blue button called “Classic Mode”.  You will notice that the content changed to just text.  Now click on the “text” tab to the right.  And finally let’s copy all the text.  We will paste that onto our new page.

Ok we got what we needed so we can leave without saving this page.  Click on “Pages” again (left navigation).  Now let’s go ahead and create our new page.  Click on “Add New” to create a new page.

STEP 13:

Go ahead and enter the name of the project.  Then make sure that the “text” tab is the active tab and then paste the text that we copied earlier as shown in image.  Finally click on the blue “Backend Editor” button.

STEP 14a:

Before you start switching out images, lets fix a couple of settings on the page.  Let’s start in the Page Attributes section.  Change the Parent from “(no parent)” to Portolio.

STEP 14b:

Now scroll down to Qode General section and make the following changes:

1. Page Background Color: select it and paste this: #969696
2. Always put content below header: select “Yes”
3. Header Skin: select “Light”
4. Initial Header Background Color: select it and paste this: #464647

After these changes go ahead and click the blue “Update” button on top right of page so we can save our work.

STEP 15:

Last thing we will want to do is change the section headers (if they are different) and then the actual images.  Just hover over the section that you will change and click on the (Pencil Icon) which will allow you to edit.  When you change the images, you will want to first remove all the image that are already there because they will belong to a different project.  Just click on the red X in the middle of the images to remove them.  Once you have removed them then click on the “+” sign to open up the media window.  At this point you can drag the appropriate images into the media window and add them to your project.  You can sort them as you like by dragging them around.  That should be it, don’t forget to save the section and then the page.