Customize the pages that showcase your portfolio's collections and projects. Select elements on the pages to discover and play around with their customization options. You can also manually add or remove elements like you would for other pages in your Editor.
Wix Portfolio is built on dynamic pages which allows you to apply a template page to all projects. This means that if you add or remove additional elements on a project, those images or text box changes are applied to all of your projects.
Your portfolio pages consist of:
- Portfolio: The main page where your collections are displayed. Think of it like the homepage of your portfolio.
- Collection pages: The pages that display all the projects that appear in the selected collection.
- Project pages: The pages that display each project's information and media.
In this article, learn more about:
Customizing the main portfolio page
Edit your portfolio page's background, stretch settings, and portfolio gallery. This is the 'home' page of your portfolio that displays your collections. If you only have one visible collection, this page displays your projects instead.
To customize the portfolio page:
- Click Pages & Menu
on the left side of the editor. - Click Portfolio Pages and select the Portfolio page.
- Click the Portfolio Page element in your editor.
- Choose what you want to do:
Edit Portfolio page background
- Click the Design icon
on the Portfolio Page element.
- Select Background.
- Customize the portfolio page's background color and opacity, border, corners and shadow.
You can keep the portfolio page element stretched to the width of your site or set it to appear only within the Editor's
gridlines.
- Click the Stretch icon
on the Portfolio Page element. - Click the toggle to choose the width of the element:
- Enabled: The Portfolio Page element stretches to fill the width of your site. Use the Margins slider to set the distance between the edges of your site and the element.
- Disabled: The Portfolio Page element appears within the Editor's gridlines and doesn't fill the width of your site.
Change the order your collections display on the portfolio page
- Click Manage Collections.
- Drag and drop your collections to change the order they appear in your portfolio.
Customizing the collection pages
After visitors select a collection from your portfolio page, they're taken to the collection pages. These pages display the same design and layout for every collection. Choose which elements appear in the widget, design the page to your needs, and customize the gallery that displays your projects.
To customize the collection pages:
- Click Pages & Menuon the left side of the editor.
- Click Portfolio Pages and select Collection pages.
- Click the Collection Page element in your editor.
- Choose what you want to do:
Edit the elements that appear in the widget
- Click the Elements icon
on the element. - Click the checkbox next to each element you want to appear.
Tip: You can also hide an element by selecting it on the widget and pressing Delete on your keyboard. Follow the steps above if you need to show it again.
Edit the collection page design
- Click the Design icon on the element.
- Choose which design element you want to edit:
- Title: Edit the title settings:
- Themes: Select the font theme you'd like to use for the title.
- Fonts: Select the font you'd like to use.
- Font size: Select the font size (in pixels).
- Format: Use the icons to format your title.
- Effects: Select a shadow effect for your title.
- Character & line spacing: Choose the character and line spacing for your title.
- Vertical text: Click the toggle to make your title appear vertically from top to bottom.
- SEO & accessibility: Choose which HTML tag you'd like to use for the title.
- Description: Set the themes, fonts, formatting, effects, character and line spacing, vertical text, and SEO and accessibility of the descriptions.
- Back Button: The Back Button design is set on the element itself. Click the Back Button element in the Editor to customize it.
- Background: Set the color and opacity, border, corners, and shadow of the background.
Tip: Click Reset to Theme to restore the default design settings.
You can keep the collection page element stretched to the width of your site or set it to appear only within the editor's
gridlines.
- Click the Stretch icon on the Collection Page element.
- Click the toggle to choose the width of the element:
- Enabled: The Collection Page element stretches to fill the width of your site. Use the Margins slider to set the distance between the edges of your site and the element.
- Disabled: The Collection Page element appears within the Editor's gridlines and doesn't fill the width of your site.
Choose the order your projects display in your collection
- Click Manage Collections.
- Click Manage on the relevant collection.
- Drag and drop your projects in the Projects in this collection section to change the order they appear in your collection.
- Click Save at the top right.
Customizing the project pages
Visitors get to your project pages after clicking to view any of your projects. These pages share the same layout and design across all your projects. Choose which elements appear in the widget, customize the design of the pages, and edit the portfolio gallery.
To customize the project pages:
- Click Pages & Menuon the left side of the editor.
- Click Portfolio Pages and select Project pages.
- Click the Project Page element in your editor.
- Choose what you want to do:
Edit the elements that appear in the widget
- Click the Elements icon on the element.
- Click the checkbox next to each element you want to appear.
Tip: You can also hide an element by selecting it on the widget and pressing Delete on your keyboard. Follow the steps above if you need to show it again.
Edit the project page design
- Click the Design icon on the element.
- Select a preset for your project page design. The preset design you choose determines where each item on the Project Page element is positioned.
- Click Customize Design to further edit the design.
- Choose which design element you want to edit:
- Title: Edit the title settings:
- Themes: Select the font theme you'd like to use for the title.
- Fonts: Select the font you'd like to use.
- Font size: Select the font size (in pixels).
- Format: Use the icons to format your title.
- Effects: Select a shadow effect for your title.
- Character & line spacing: Choose the character and line spacing for your title.
- Vertical text: Click the toggle to make your title appear vertically from top to bottom.
- SEO & accessibility: Choose which HTML tag you'd like to use for the title.
- Details Label: Set the themes, fonts, formatting, effects, character and line spacing, vertical text, and SEO and accessibility of the details labels.
- Details Text: Set the themes, fonts, formatting, effects, character and line spacing, vertical text, and SEO and accessibility of the details text.
- Description: Set the themes, fonts, formatting, effects, character and line spacing, vertical text, and SEO and accessibility of the descriptions.
- Cover Image: Set the color and opacity, border, corners, and shadow of the cover image.
- Page Background: Set the color and opacity, border, corners, and shadow of the background.
- Navigation Buttons: Customize the design options for the Regular and Hover state of the buttons visitors use to navigate your projects.
Tip: Click Reset to Theme to restore the default design settings.
You can keep the project page element stretched to the width of your site or set it to appear only within the editor's
gridlines.
- Click the Stretch icon on the Project Page element.
- Click the toggle to choose the width of the element:
- Enabled: The Project Page element stretches to fill the width of your site. Use the Margins slider to set the distance between the edges of your site and the element.
- Disabled: The Project Page element appears within the Editor's gridlines and doesn't fill the width of your site.
Troubleshooting text issues on your portfolio galleries
Text on your portfolio galleries might not appear properly if there isn't enough space for it. This might be related to your portfolio gallery design and font settings. Ensure a balance between font, image, and text box size to display all image text.
Depending on the way you set up your text, click below to see how to resolve the issue:
Text set to display on Hover on partial overlay
Gallery text may get cut off if you set it to appear on hover with only a partial overlay. To ensure your text is visible, you can make the overlay bigger or switch to a full overlay to ensure your text is always visible.
- Click the Portfolio Gallery in your editor.
- Click Layout.
- Click Customize Layout and then the Items tab.
- Select the Overlay coverage option:
- Select Partial overlay and set the Overlay coverage to ensure your text is always visible.
- Select Full overlay to ensure your text is always visible.
Text set to display above or underneath image
When you set gallery text to appear above or underneath images, and the font size is too large, it can result in titles and descriptions being cut off. You can adjust the font size so that all the text appears.
To increase the font size:
- Click the Portfolio gallery in your editor.
- Click the Design icon
- Click the relevant Title item from the dropdown.
- Drag the slider to increase the Font Size until your text appears.
FAQs
Click a question below to learn more about customizing your portfolio pages.
Can I translate my portfolio pages with Wix Multilingual?
How can I set a specific collection as my site's homepage?
To set a specific collection as your site's homepage, you will first need to add a new blank page. Then, choose the collection to be featured and set that page as your homepage.
- Click Pages & Menuon the left side of the editor.
- Click + Add Page.
- Click + Blank Page.
- Give your page a name.
- Click My Business
on the left side of the Editor. - Click Wix Portfolio.
- Click Add Featured Collections Gallery.
8. Choose the collection that appears in this gallery:
- Select the gallery you just added to the page.
- Click Choose Collections.
- Select the checkbox next to the collection you want to display.
Can I reposition the elements on my portfolio pages?
Currently, project pages are available in a variety of preset designs. The individual elements within those designs are locked into position and cannot be freely repositioned.
If you want to change the position of the elements in your project page, you can choose a different preset design. If this is something you'd like to see in the future, you can
vote for the feature.
Is it possible to manually customize the size of my project's cover image?
No, the size of your project's cover image is based on the type of layout that you choose. If this is a feature that you'd like to see,
you can vote for it here.
Can I customize how my portfolio looks on my mobile site?
Yes, to customize your portfolio on your mobile site:
- Click the Portfolio in the mobile editor.
- Click Settings.
- Click the Design tab.
- Customize your portfolio using the options available.
Can I add a video cover to my portfolio project?
Yes. In order to add a video cover, you need to
update the Portfolio app in the Wix App Market. Updating the app resets your cover image across all projects. Once you've updated the app, you can then go and add a video file from your Project Media Manager.
- Go to Portfolio in your site's dashboard.
- Click Edit next to the relevant project.
- Under Project Media, click Manage Media.
- Click Add Media.
- Upload your video.
- Click the video in your Project Media Manager.
- Click Set as cover.
8. Click Done.
Can I restore my Portfolio to a previous version?
No. Once you make a change to your Portfolio and publish your site, you cannot undo those changes by restoring a previous version of your site from your site history.
I've added a collection / project to my Portfolio via the dashboard, but the page is missing elements or is showing blank in the editor / on the live site. What can I do?
Ensure your portfolio page displays the information you want by selecting the checkbox next to the relevant element in the Widget Elements panel.
To select which elements display on your portfolio pages:
- Go to your editor.
- Go to your Collection / Project page:
- Wix Editor:
- Click Pages & Menu
on the left side of the editor. - Click Portfolio Pages.
- Click Collection / Projects pages.
- Studio Editor:
- Click Pages
on the left side of the editor. - Click Collection / Projects pages under Portfolio Pages.
- Click the Portfolio Page element on your page.
- Click the Elements icon
. - Select the checkbox next to the elements you want to display on your site.
and set the video play options. 
icon and customize the effect visitors see when they hover over a gallery item or scroll down the page. 
to choose what happens when items are clicked, what shows when images are loading and use right click protection. 
