Embedded Files
about
When building a portfolio,
carefully select your best works,
don't add every work you've made, and
make your portfolio short, but oh so sweet!
Visitors don't want to be overwhelmed and you don't want to waste your time building your website when you could be making art. Your time is valuable, so let's finish this website ASAP! Also, while you can add more artwork slots, it requires more skills than this guide will cover. Dedicate some time to learning Google Sites if you need to add more slots.
In this tutorial, we will:
cover the key web builder skills you need to know and
walk you through the whole process of filling your portfolio.
1. Open Your Google Site
We need to get to your Google Site to edit it!
You can access your website by going though your Google Drive's homepage or your Google Sites' homepage. The file containing your website is stored on your Google Drive.
Google Drive
Google Sites
2. Document Name & Website Title
Right now, your Google Site's document name is "Copy of [Layout Here]" and the website name is whatever layout you purchased (ex. "Pandora 4: Tesera"). Inside Google Site's editor, the settings to change these two are located above and below to one another. But, make sure you change the correct setting for each! We don't want the wrong name to display in search engines for our site.
▼ [Task 1 - Rename the Site Document File]
The Document Name is the private and local to Google Drive. Think of it as a "File Name".
This is the name you search to find your Google Site in Google Drive. This name is private and limited to your Google Drive.
Go to the top left corner beside the Google Sites Icon.
Click the text to change the file name. Change it to something you will easily find in your Drive.
We recommend:
Year_Type Website_Name
Ex. 2024_Portfolio Website_Alyssa Zilistra
▼ [Task 2 - Rename Your Website]
The Website Title is the name of your website publicly. As in, public search engines will use this name for your website.
So, when your site is searched on Google, Bing, etc., make sure it's your name or business' name!
In the website editor area → below where you just renamed the file, → click the text to change the title of your website.
Set as your name or business / art practice name.
Ex.
Name: "Alyssa Zilistra"
Business Name: "Clay Pot Studios"
3. Website Footer
This section appears at the bottom of the website consistently on every single page. For example, the footer at the bottom of Oncuff's site contains navigation links, our slogan, and our name.
It can contain any of the Insert elements from the sidebar. You may add a message, keep it, or delete it.
▼ [Task 1 - Change the Footer Contents]
Scroll to the bottom of the Website Builder.
Hover over the Footer. → Click "Edit Footer" when it appears.
Either add a message, keep our accreditation, or delete this section. You could add your Name, Email, and Links to Social Media.
We recommend:
Name | Contact Email
Optional:
Name | Contact Email | Year of Creation | Copyright (Artist Name). All Rights Reserved.
4. Contact Information
The Contact Page is a place to put your email, social media, phone number and any other relevant information (ex. gallery representation). You can use the "Socials" element or simply put text with links in place.
Note! If you put your email address up, you will likely get spam emails from website crawlers. This is why people put up Contact Forms (where you fill in a message on the website and send it). This is a feature Oncuff is working on offering.
▼ [Task 1 - Go to the Contact Page]
Under "Pages" → Select "Contact" so we can edit its details.
[ Location ] In the "Pages" Tab, entitled "Contact"
▼ [Task 2 - Using Socials Element Insert]
If you type in all of your details in the text box, delete this section.
An "Element" is a single box containing one function from the Insert menu (ex. text box, socials box, picture, etc.).
Click once on the Socials element to select it → in the new menu → select the Pencil Icon ("Edit Links").
In a separate tab, open all of your social media pages and → copy / paste their URLs at a time into each URL slot in your Socials box.
If you want to delete a link, hit the Trash Can icon.
▼ [Task 3 - Linking Text Externally]
If you list your socials by text, then remove the Socials element.
An "Element" is a single box containing one function from the Insert menu (ex. text box, socials box, picture, etc.).
The section is formatted / written as:
Social Type Here [Tab Key Space] Your Social (optional: this is linked text)
The tab spacing makes all the text align with one another.
To link text, highlight the text you wish to link. Then, → click the Chain Icon ("Insert Link").
Paste the Web URL. → Click "Apply".
Note: avoid using the "Enter" key instead of clicking "Apply". Sometimes it doesn't link.
5. About Page
This is where you place your artist statement / biography and a photo of yourself. When uploading images, Optimize Your Image Files to avoid slow webpage loading times.
Note: Oncuff Websites come with a full Artist Statement / Bio template in the "Assets" Section.
We need to:
Change Photo
Add Artist Description
▼ [Task 1 - Access Statement Template]
In the "Pages" Tab → scroll to the bottom. → To the right of the word "Assets" → Click the arrow.
Select "About (Template)".
This has the full written version of the About template. Use it to help you structure your artist statement if you need assistance writing it.
▼ [Task 2 - Update Photo]
On the "About" page, → Click once to select the photo. → When the menu appears, select the 3 Dots at the far right side.
Hover over Replace Image then → Click "Upload".
Use "Select" if your photo is on your Google Drive.Select the Image on your Computer. → Click "Open".
Do not use the Enter Key instead of clicking. Sites doesn't register the keyboard shortcut and it will not replace your photo.
If needed, resize image either as a whole or specifically in frame.
Note: This is NOT a remedy for making big images smaller as Google still displays the largest file size. See Optimizing Image Sizes for how to properly resize images.
Click Image Once
Select Photo → Drag Dots: Resizes image on site.
Google Sites snaps to columns, so the resize must fit to one of these columns. It will snap to the nearest column otherwise. the crop of the photo within the frame.
Click Image Twice
Slider: Zooms In / Out of photo
Click and Drag Image: Change position in frame.
When done, → Click the checkmark.
▼ [Task 3 - Update Artist Statement / Bio]
If you copy / paste your statement from another file, be sure to paste without formatting.
Click inside of the text box and either:
Keyboard: Ctrl + Shift + V
Right Click: Select "Paste as Plain Text"
The setting is labelled slightly differently in each web browser. Firefox uses "Paste without Formatting".
6. Curriculum Vitae (CV)
Your CV (Curriculum Vitae) is your Resume for the art world. It includes your Education, Art Shows, Relevant Experience in the arts, as well as any other important information about your career.
Note: Oncuff provides a CV template on the Page.
You can either:
Copy & Paste your formatted CV from a Word / Docs document directly into the text box
Format your CV on Google Sites.
Insert your CV using the "Docs" insert.
We recommend using plain text rather than an embedded document, so we will show the steps for plain text pasting.
▼ [Task 1 - Fill Your CV Page]
Open your CV as a Word / Docs document. → Copy the CV to your computer's clipboard.
Highlight text, → Copy (Ctrl + C)
Note on PDFs: PDFs make the formatting stagnant, therefore the pasted text from any PDF tends to be formatted improperly or without text formatting. Use a Word / Docs document instead.
On Google Sites, → go to the Pages Tab and → Click "CV".
Unlike the last section, paste as is (using Ctrl + V).
Likely you have already formatted your CV to print and therefore, have formatting that will translate well to your website. Hence, we suggest pasting your document normally.
If the formatting does not work, paste as plain text (Ctrl + Shift + V) and format the document aesthetically in Google Sites instead.
.
7. Art Category Titles
To customize the template to suit your portfolio, we need to change the titles / text in 3 places:
(1) Page Name,
(2) Home, and
(3) Category Page's Title Text.
If you have purchased:
a Project Portfolio:
do all the steps as listed.
an Artwork Portfolio:
learn Task 1, "Pages" and after that,
skip to Step 9.
▼ [Task 1 - Pages]
Page Names dictate what the webpage is publicly called on Search Engines and in the Tab above the URL bar on web browsers.
Do not do this step yet. Keep it in mind for your next actions.
On the left sidebar → click "Pages". → Double click any page name to rename it. → Type your desired name and hit "Enter" on your keyboard to finalize the name.
Remember that this name is displayed on visitor's web browsers! Don't make your name technical like the defaults that your template comes with.
For Artwork Portfolios:
You will use this skill later in Step 9 to rename your Enlarged Artwork Pages. Skip to Step 9 now.For Project Portfolios:
Follow Task 2 & 3 of Step 7 here with this knowledge in mind.
▼ [Task 2 - Home]
This is for Project Portfolios only.
The Home page is the first webpage visitors see when they arrive to your site. It has images that link to the Category Pages. It is the corresponding text below the image that must be renamed.
In the "Pages" tab → click "Home".
Inside the Website Editor, click once on the text below the Category image. → Change the text inside. → Rename it to your category name.
▼ [Task 3 - Category Page Title Text]
This is for Project Portfolios only.
We will now (1) rename the Page linked to the Category from Task 2 and (2) change the Title text on the Category Page.
In the "Pages" tab → Go to the Category Page from Task 2 (you just changed its name).
Inside the Website Editor, → click the Title and → change the text inside to the category title.
So, in all you should have renamed:
Your Homepage Page (Text Box below Image)
Your Category Page (Pages Tab)
Inside your Category Page (Text Box with Title Text)
8. Placing Art Category Images & Statements (Project Only)
A portfolio isn't complete without your artwork. We need to replace a number of text, images, and page names around the site to get your portfolio up to speed. Remember to use Optimized Image Sizes for each location!
Project Portfolios have 3 levels of pages:
a) Home Page (Thumbnail)
^ Step 8, Task 1b) → Category Page (Thumbnails)
^ Step 8, Task 2c) → Enlarged Artwork Page (Full Image)
Step 9
This step is for Project Portfolios only. Artwork Portfolios skip to Step 9.
So by clicking the (a) "Category 1" thumbnail, visitors arrive (b) the Category Page. Then, on (b) the Category Page, they click "Artwork 1" to arrive at (c) an Enlarged Artwork Page to get a better view of the art.
Task Checklist
Update for each Art Category the following:
a) Home Page
[ ] Art Category Image (thumbnail)
Step 8, Task 1
b) Category Page
[x] Category Page Title
Done in Step 7
[ ] Opt: Project Description
Step 8, Task 2
We'll cover (c) regarding artwork images Step 9. For Project Portfolios, the only difference will be that you will do the work on "Category" pages instead of the "Home" page.
▼ [Task 1 - Category Cover Photo]
Go to the "Home" Page.
Replace the desired "Category #" image. Choose a photo that is the best representation of your artwork.
Double Click a Category Image to bring up the settings menu. → Then, select the 3 dots to the right side and → hover over "Replace Image". → Click "Upload". → Once you have selected the photo on your computer, Click "Open".
This should replace the image for the category. Repeat for the remaining Categories.
▼ [Task 2 - Project Statements]
Optional. If you have project descriptions, you can add them to your Category Pages. And, Oncuff layouts come with a written template and pre-made layout assets for project statements.
Go to the category you wish to add a project description in.
Go to Pages and → Click your desired Category Page.
Under the text title (formerly "Your Category Here"), there is a text box you can click and fill with your description. But, we also have other formatting options (see below).
To find Oncuff's written template and project description layouts, → go to Pages and → Click "Assets". → Select "Page - Info + Info Boxes" to access the resources.
While you're here, feel free to check out the other asset pages we've left for you.
9. Placing Artwork Images
A portfolio isn't complete without your artwork. We need to replace a number of text, images, and page names around the site to get your portfolio up to speed. Remember to use Optimized Image Sizes for each location!
Artwork Portfolios have 2 levels of pages:
a) Home Page
c) → Enlarged Artwork Page
So by clicking the "Artwork 1" thumbnail, visitors arrive at the Enlarged Artwork Page to get a better view of the art.
Task Checklist
Update for each Artwork added to the site the following:
a) Home Page
Category Page for Project Portfolios
[ ] Artwork Image (thumbnail)
Step 9, Task 1
c) Enlarged Artwork (Sub page)
[ ] Enlarged Artwork Image
Step 9, Task 2
[ ] Artwork Information
Step 9, Task 2
▼ [Task 1 - Home Page Art Thumbnail]
Go to where the Artwork Thumbnails are located.
For Artwork Portfolios,
go to Pages → "Home" where your Artwork Thumbnails are located.For Project Portfolios,
go to Pages → your desired Category Page.
Replace the thumbnail "Artwork 1". And, if available update the text box containing artwork information below each image.
Double Click an Artwork Thumbnail to bring up the settings menu. → Then, select the 3 dots to the right side and → hover over "Replace Image". → Click "Upload". → Once you have selected the photo on your computer, Click "Open".
When an image is selected in the editor, in the bottom left corner, you can see the title of the page that the image is linked to.
Note for 4 box wide layouts: Google Sites has a glitch where the hover to access "Upload" is inaccessible because it ends up in the right sidebar.
To solve this issue:
Click and Drag the Artwork thumbnail to a new spot on the left side. → Replace the image. → Click and Drag the new thumbnail back to its original position.
▼ [Task 2 - Enlarged Artwork Page]
For all "Artwork" thumbnails, they correspond to the pages by their numbers. So, Artwork 1 links to "1-", Artwork 2 to "2-" and so on. For project portfolios, it is the same except that they link to their corresponding Category pages.
3. On the Pages tab, open the drop down menu containing all the subpages.
For Artwork Portfolios,
Go to Pages then → "Home". → To the left of home → click the little arrow to reveal the sub pages below. Then, → Click on your first subpage (ex. "1 -").For Project Portfolios,
Go to Pages then → Your Category Page. → To the left of the category page → click the little arrow to reveal the sub pages below. Then, → Click on your first subpage (ex. "D - 1").Subpages are named with the first one to three letters of the original Category Title from the template. So, Drawing's subpages are named D-1, D-2 and so on. Sculpture is S-1, S-2 and so on.
4. On the page you've just selected, rename the sub page (Enlarged Artwork Page) to the title of the artwork. You have 2 methods you can use:
Double Click:
In the Pages tab, → double click the page name to rename the subpage.
Properties Setting:
In the Pages tab, → Hover over subpage. → 3 dots to the right will appear. → Click the 3 dots and → from the list, select "Properties". → Type the new name. → When finished, click "Done".
So, "1 -" or "D 1" becomes the Artwork Title. Ex. "Lily of the Valley"
Be aware that what you name the Page is what appears on visitor's web browsers.
5. Now, we must place the full sized artworks on the Enlarged Artwork Pages and add the artwork information.
Note: DO NOT UPLOAD YOUR ORIGINAL IMAGE AT FULL SIZE. Remember to use your optimized image sizes!
Placeholder slots are grey boxes with a "+" in the middle. You have 2 options:
→ Drag and Drop the image of your art from your computer or
→ Click the "+" to add an image from your computer.
If you make a mistake, use "Undo" (Ctrl + Z) to go back a step.
Artwork Information
Typically, you include:
Name of Artwork
Length x Width x Height
Art Medium(s)
Year of Creation
Sometimes people omit year of creation to make the whole of their body of work appear more recent.
10. Inserting Video
Video can be added through 3 methods:
Youtube URL
Embed from any video hosting service
(ex. Vimeo)Insert from Google Drive
For (2). this may not result in a video that can be played within your website depending on the video service you use. For example, Vimeo does create the video player through a URL, but embedding a Newgrounds video gives an external link to that video on Newgrounds. You can embed a snippet of code instead, but that also has limitations (see steps).
▼ [Task 1 - Youtube URL]
Go to the Youtube video you want to embed. → Copy the video URL.
To embed your video on your Google Site, either:
(A) Click anywhere on your Google Site and → Paste the URL (Ctrl + V).
(B) Go to the Right Sidebar, → click Insert. → Find and Select "Youtube". Then, see step 3.
For Option (B)...
→ Paste your URL.
→ Hit "Insert"
Resize the video as needed. (same technique for image resizing).
▼ [Task 2 - Embed From Another Site]
Go to the video you want to embed. Either:
(A) copy the website URL,
(B) find the Embed Code within the "Share" option.
Always try (A) first.
If the video does not embed as a video you can play on your website, then use (B).
To insert the video, either:
(C) (A) Click anywhere on your Google Site and → Paste the URL (Ctrl + V). → This automatically brings up the embed menu with the correct option selected depending on what you've copied. → Click "Insert".
(D) Go to the Right Sidebar, → click "Insert" and → select "Embed".
Depending on what you've copied, select the relevant option.
"By URL" for URL,
"Embed Code" for code (see step 3).
→ Click "Insert". → Resize the video as needed.
For Embed Code:
This snippet of code puts a small web player into your site.Paste or use the "Embed" option. Paste your code.
Hit "Next".
Once the Preview appears, click "Insert".
Depending on the code, you may need to remove stray text. Usually, this is after <p>, which means "Paragraph". Delete this and the text will be removed.
This may not always work. Some sites change their code to be more difficult to edit.
Resize the player as needed. It may only resize to one size. These videos are often fixed for width and height and require editing the code to change.
▼ [Task 3 - Insert from Google Drive]
Go to the Right Sidebar → Click Insert and → Select "Drive".
Make sure your video is already uploaded in your Google Drive.
Find the video in your drive. You can use the Search bar up top if needed. Select the video. → Click to select the video. → Then, click "Insert".
The next menu asks you to change the sharing permissions of the video file. → Ensure its set to "Viewer". → Select "Share".
Resize the video as needed (same technique for image resizing).
Finishing Up: Adding Extra Assets
Throughout this tutorial we've referenced the "Assets" section that includes extras to help you with website layout.
If you filled out all your Artwork Slots and need more, you can hire us or add them yourself. In covering the bare minimum, we just don't have time to get into everything you need to know! Try Youtube for more in depth Google Site tutorials. Stay tuned for our future guide on Google Site basics.
If you've filled your portfolio enough, then you're ready to Prep for Launch!
▼ To add a new Artwork Slot:
Duplicate Enlarged Artwork Page from Assets.
Rename the duplicated Page to your Artwork Title.
Move the Sub Page under the appropriate place (Home / Category).
Make the Sub Page "Hidden" from navigation.
Add a thumbnail image, the additional artwork, on Home or Category Page.
Link thumbnail image to the new Enlarged Artwork Page.
Add artwork to Enlarged Artwork Page and update Artwork Info text box.
Google Sites
Report abuse