Wix Portfolio: Customizing Your Wix Portfolio Pages

1. Click the Design icon

   

   on the Portfolio Page element.

   

2. Select Background.

3. Customize the portfolio page's background color and opacity, border, corners and shadow.

1. Click the portfolio gallery element on the page.

2. Choose what you want to edit:

   • Layout: Click Layout, choose a layout type and click Customize Layout to make further changes including gallery direction and scroll direction.

     Note: Changing your gallery direction will invert the order of the gallery items displayed.

   • Behaviors: Click the Behaviors icon

     

     and set the video play options.

   • Design: Click the Design icon

     

     . Then click the What do you want to design? drop-down to choose which part of the gallery you want to design. Choose from the following settings to customize the design: Regular or Hover state, Background fills, Borders, Shadows, and Corners.

1. Click Manage Collections.

2. Drag and drop your collections to change the order they appear in your portfolio.

1. (In the Inspector panel) Click the Background drop-down.

2. Customize the background's color and opacity, border, corners and shadow.

   

1. Click the portfolio gallery element on the page.

2. Choose what you want to edit:

   • Layout: Click Layout, choose a layout type and click Customize Layout to make further changes including gallery direction and scroll direction.

     Note: Changing your gallery direction will invert the order of the gallery items displayed.

   • Behaviors: Click the Behaviors icon

     

     and set the video play options.

   • Design: (In the Inspector panel) Click the What do you want to design? drop-down to choose which part of the gallery you want to design. Choose from the following settings to customize the design: Regular or Hover state, Background fills, Borders, Shadows, and Corners.

     

1. Click Manage Collections.

2. Drag and drop your collections to change the order they appear in your portfolio.

1. Click the collections list element on the page.

2. Click Explore Designs on the action bar.

3. Select your preferred preset.

1. Click the Display Elements icon

   

   on the action bar.

2. Click the relevant drop-down: Collection or Gallery layout.

3. Select / deselect the checkboxes next to the elements you want to show / hide.

1. Click the All design options icon

   

   on the action bar.

2. Select the relevant part of the portfolio page under Choose what to design.

3. Design the selected part using the available options.

   • Fill colors

     

     : Change the color of the page part, choosing one of your brand colors or a custom color.

   • Border

     

     : Define the borders of the page part so it stands out, choosing a color, width and style. Click the Edit individual borders icon

     

     to design each side of the border.

   • Corners

     

     : Make the corners of the page part more square or round by dragging the slider under Radius. Click the Edit individual corners icon

     

     to design each corner separately.

   • Shadow

     

     : Apply inner and outer shadow to give the page part an interesting 3D effect, setting the position, blurriness, color and more.

   • Spacing

     

     : Add breathing room to your content by adding padding around the page part (or the selected area).

   • Layout

     

     : Adjust aspects of the layout like column behaviour and aspect ratio.

1. Click the Elements icon

   

   .

2. Select the checkbox next to each element you want to appear.

Tip: You can also hide an element by selecting it on the page and pressing Delete on your keyboard. Follow the steps above if you need to show it again.

1. Click the Design icon

   

   .

2. Choose which design element you want to edit:

   • Title: Customize the style, font, formatting, effect, character and line spacing of the text and adjust the text's SEO and accessibility.

   • Description: Customize the style, font, formatting, effect, character and line spacing of the text and adjust the text's SEO and accessibility.

   • Back Button: Customize the Regular and Hover states of the 'Back' button.

   • Background: Adjust the background's color and opacity, border, corners, and shadow.

     

Tip: Click Reset to Theme to restore the default design settings.

1. Click the portfolio gallery element on the page.

2. Choose what you want to edit:

   • Layout: Click Layout, choose a layout type and click Customize Layout to make further changes including gallery direction and scroll direction.

     Note: Changing your gallery direction will invert the order of the gallery items displayed..

   • Behaviors: Click the Behaviors icon

     

     and set the video play options.

   • Design: Click the Design icon

     

     . Then click the What do you want to design? drop-down to choose which part of the gallery you want to design. Choose from the following settings to customize the design: Regular or Hover state, Background fills, Borders, Shadows, and Corners.

     

1. Click Manage Collections.

2. Hover over the relevant collection and click Manage.

3. Drag and drop your projects in the Projects in this collection section to change the order they appear in your collection.

4. Click Save at the top right.

1. Click the Elements icon

   

   .

2. Select the checkbox next to each element you want to appear.

Tip: You can also hide an element by selecting it on the page and pressing Delete on your keyboard. Follow the steps above if you need to show it again.

1. (In the Inspector panel) Click the relevant drop-down and design the element:

   • Title: Customize the style, font, formatting, effect, character and line spacing of the text and adjust the text's SEO and accessibility.

   • Description: Customize the style, font, formatting, effect, character and line spacing of the text and adjust the text's SEO and accessibility.

   • Back Button: Customize the Regular and Hover states of the 'Back' button.

   • Background: Adjust the background's color and opacity, border, corners, and shadow.

     

Tip: Click Reset to Theme to restore the default design settings.

1. Click the portfolio gallery element on the page.

2. Choose what you want to edit:

   • Layout: Click Layout, choose a layout type and click Customize Layout to make further changes including gallery direction and scroll direction.

     Note: Changing your gallery direction will invert the order of the gallery items displayed.

   • Behaviors: Click the Behaviors icon

     

     and set the video play options.

   • Design: (In the Inspector panel) Click the What do you want to design? drop-down to choose which part of the gallery you want to design. Choose from the following settings to customize the design: Regular or Hover state, Background fills, Borders, Shadows, and Corners.

     

1. Click Manage Collections.

2. Hover over the relevant collection and click Manage.

3. Drag and drop your projects in the Projects in this collection section to change the order they appear in your collection.

4. Click Save at the top right.

1. Click the collections list element on the page.

2. Click Explore Designs on the action bar.

3. Select your preferred preset.

1. Click the Display Elements icon

   

   on the action bar.

2. Select / deselect the checkboxes next to the elements you want to show / hide.

1. Click the All design options icon

   

   on the action bar.

2. Select the relevant part of the collection page under Choose what to design.

3. Design the selected part using the available options.

   • Fill colors

     

     : Change the color of the page part, choosing one of your brand colors or a custom color.

   • Border

     

     : Define the borders of the page part so it stands out, choosing a color, width and style. Click the Edit individual borders icon

     

     to design each side of the border.

   • Corners

     

     : Make the corners of the page part more square or round by dragging the slider under Radius. Click the Edit individual corners icon

     

     to design each corner separately.

   • Shadow

     

     : Apply inner and outer shadow to give the page part an interesting 3D effect, setting the position, blurriness, color and more.

   • Spacing

     

     : Add breathing room to your content by adding padding around the page part (or the selected area).

   • Layout

     

     : Adjust aspects of the layout like column behaviour and aspect ratio, as well as button layouts.

1. Click the Elements icon

   

   .

2. Select the checkbox next to each element you want to appear.

Tip: You can also hide an element by selecting it on the page and pressing Delete on your keyboard. Follow the steps above if you need to show it again.

1. Click the Design icon

   

   .

2. Choose which design element you want to edit:

   • Title / Description: Customize the style, font, formatting, effect, character and line spacing of the text and adjust the text's SEO and accessibility.

   • Basic Info Label / Text: Set the themes, fonts, formatting, effects, character and line spacing, vertical text, and SEO and accessibility of the details labels. .

   • 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.

1. Click the portfolio gallery element on the page.

2. Choose what you want to edit:

   • Layout: Click Layout, choose a layout type and click Customize Layout to make further changes including gallery direction and scroll direction.

     Note: Changing your gallery direction will invert the order of the gallery items displayed.

   • Settings: Click the Settings icon

     

     to choose what happens when items are clicked, what shows when images are loading and use right click protection.

   • Behaviors: Click the Behaviors icon

     

     and set the video play options.

   • Design: Click the Design icon

     

     . Then click the What do you want to design? drop-down to choose which part of the gallery you want to design. Choose from the following settings to customize the design: Regular or Hover state, Background fills, Borders, Shadows, and Corners.

     

1. Click the Elements icon

   

   .

2. Select the checkbox next to each element you want to appear.

Tip: You can also hide an element by selecting it on the page and pressing Delete on your keyboard. Follow the steps above if you need to show it again.

1. (In the Inspector panel) Click the relevant drop-down and design the element:

   • Title / Description: Customize the style, font, formatting, effect, character and line spacing of the text and adjust the text's SEO and accessibility.

   • Basic Info Label / Text: Set the themes, fonts, formatting, effects, character and line spacing, vertical text, and SEO and accessibility of the details labels. .

   • 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.

1. Click the portfolio gallery element on the page.

2. Choose what you want to edit:

   • Layout: Click Layout, choose a layout type and click Customize Layout to make further changes including gallery direction and scroll direction.

     Note: Changing your gallery direction will invert the order of the gallery items displayed.

   • Settings: Click the Settings icon

     

     to choose what happens when items are clicked, what shows when images are loading and use right click protection.

   • Behaviors: Click the Behaviors icon

     

     and set the video play options.

   • Design: (In the Inspector panel) Click the What do you want to design? drop-down to choose which part of the gallery you want to design. Choose from the following settings to customize the design: Regular or Hover state, Background fills, Borders, Shadows, and Corners.

     

1. Click Explore Designs on the action bar.

2. Select your preferred preset.

1. Click the Display Elements icon

   

   on the action bar.

2. Select / deselect the checkboxes next to the elements you want to show / hide.

1. Click the All design options icon

   

   on the action bar.

2. Select the relevant part of the project page under Choose what to design.

3. Design the selected part using the available options.

   • Fill colors

     

     : Change the color of the page part, choosing one of your brand colors or a custom color.

   • Border

     

     : Define the borders of the page part so it stands out, choosing a color, width and style. Click the Edit individual borders icon

     

     to design each side of the border.

   • Corners

     

     : Make the corners of the page part more square or round by dragging the slider under Radius. Click the Edit individual corners icon

     

     to design each corner separately.

   • Shadow

     

     : Apply inner and outer shadow to give the page part an interesting 3D effect, setting the position, blurriness, color and more.

   • Spacing

     

     : Add breathing room to your content by adding padding around the page part (or the selected area).

   • Layout

     

     : Adjust aspects of the layout like column behaviour and aspect ratio, as well as button layouts.

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.

To increase the font size in the Wix Editor / Studio Editor:

1. Click the portfolio gallery element on the page.

2. Click the Layout icon

   

   .

3. Click Customize Layout and then the Items tab.

4. Click the Overlay coverage drop-down and select an option:

   • Partial Overlay: Customize the overlay coverage in pixels or percentages, position and padding

   • Full overlay: Choosing this ensures your text is always visible.

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 in the Wix Editor:

1. Click the portfolio gallery element in your editor.

2. Click the Design icon

   

3. Select the relevant item from the What do you want to design? dropdown.

4. Drag the slider to increase the Font Size until your text appears.

To increase the font size in the Studio Editor:

1. Click the portfolio gallery element in your editor.

2. (In the Inspector panel) Select the relevant item from the What do you want to design? dropdown.

3. Drag the slider to increase the Font Size until your text appears.

To increase the font size in the Wix Harmony Editor:

1. Go to the relevant portfolio page.

2. Click the All design options icon

   

   on the action bar.

3. Select the relevant part of the page under Choose what to design.

4. Click Text.

5. Click the Size field and enter a value.

Yes, you can translate your Wix Portfolio with Wix Multilingual. Learn more about translating your portfolio with Wix Multilingual.

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.

To set a specific collection as your site's homepage:

1. Add a new page to your site:

   • Wix Editor: Click Pages & Menu 

     

     on the left side of the editor and add a new page.

   • Studio Editor: Click Pages

     

     on the left side of the editor and add a new page.

2. Give your page a name.

3. Click My Business

   

   on the left side of the Editor.

4. Click Wix Portfolio.

5. Click Add Featured Collections Gallery.

8. Choose the collection that appears in this gallery:

1. Select the gallery you just added to the page.

2. Click Choose Collections.

3. Select the checkbox next to the collection you want to display.

Note: It is not possible to add a Featured Collections Gallery in the Wix Harmony Editor yet.

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 by clicking the Change Preset icon

. If this is something you'd like to see in the future, you can vote for the feature.

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.

Yes you can customize how your portfolio looks and behaves on mobile devices without affecting the desktop version of your site. Learn more about customizing your portfolio for mobile.

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.

To add a video cover:

1. Go to Portfolio in your site's dashboard.

2. Click Edit next to the relevant project.

3. Under Project Media, click Manage Media.

4. Click Add Media.

5. Upload your video.

6. Click the video in your Project Media Manager.

7. Click Set as cover.

8. Click Done.

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.

Ensure your page displays the information you want by selecting the checkbox next to the relevant element in the Widget Elements panel in the Wix Editor / Studio Editor and the Display Elements panel in the Wix Harmony Editor.

No. Currently it is not possible to link your Collection page to a custom project page / external website. Your Collection page is always linked to the default Project page(s) that come with the app once you add it to your site. You can, however, customize the Project page(s) to suit your needs.

You can ensure your text is always visible on your portfolio items by making sure there is no hover effect on your portfolio items.

To make text always visible:

1. Go to your editor.

2. Go to your Collection / Project page:

   • Wix Editor:

     1. Click Pages & Menu

        

        on the left side of the editor.

     2. Click Portfolio Pages.

     3. Click Collection / Projects pages.

   • Studio Editor:

     1. Click Pages

        

        on the left side of the editor.

     2. Click Collection / Projects pages under Portfolio Pages.

3. Click the portfolio gallery element on your page.

4. Click the Layout icon

   

   and click Customize Layout.

5. Click the Items tab.

6. Select the check box next to the relevant text under Select which text to show.

7. Scroll down and click the What happens to the info on hover? drop-down and select Nothing happens.

   

Yes. You can upload your own fonts to your editor to use in your portfolio.

Learn more about uploading fonts in the Wix Editor, Wix Studio and Wix Harmony Editor.