All of these instructions are optional depending on how you use this template. I suggest you review them quickly just so you know what to update if needed! Then come back and follow step-by-step when you customize this template for your portfolio.


UDESLY-START-PHPecho udesly_get_image(_u('i502705e8', 'img'))->altUDESLY-END-PHP

1. Back to Top link

For the "Back to Top ↑" link in the footer to work correctly, add the id "top" to the first section in each page.

2. Profile Picture

For the ABOUT page, use a free tool like to remove the background from your image and replace the current profile picture.

Theme Switcher


  • It's best to use the theme switcher if you have a simple site where visitors will not be going between pages often. Loading new pages resets the toggle/theme (this is just a limitation of Webflow)
  • Test each page of your site after making changes to the theme colors or adding new elements to a page
UDESLY-START-PHPecho udesly_get_image(_u('ind62261', 'img'))->altUDESLY-END-PHP

Changing Theme Colors

Update your color swatches on the Style Guide page to change the Default and Inverted themes

UDESLY-START-PHPecho udesly_get_image(_u('in3da5ba09', 'img'))->altUDESLY-END-PHP

New Designs & Pages

1. Add a "Body" class to the body when creating a new page

UDESLY-START-PHPecho udesly_get_image(_u('in5bf42fb1', 'img'))->altUDESLY-END-PHP

2. Add a "Link" or "Inline Link" class to all links

UDESLY-START-PHPecho udesly_get_image(_u('in81aa69f', 'img'))->altUDESLY-END-PHP

3. Add "Color Text Primary" to text inside link blocks (e.g. cards). See and example on the Work page.

UDESLY-START-PHPecho udesly_get_image(_u('in5615c99c', 'img'))->altUDESLY-END-PHP

4. Add your inverted logo (second Logo) in the Navigation symbol. The theme switcher will hide the default logo and show the inverted logo when toggled.

UDESLY-START-PHPecho udesly_get_image(_u('in66ebed7b', 'img'))->altUDESLY-END-PHP

5. Use divs around content to add surface (background) colors and borders. See the list of available classes in the Decoration section of the Style Guide.

WORK – Horizontal page

If you use the WORK – Horizontal page it needs to be adjusted based on your number of Projects you have in the CMS.

UDESLY-START-PHPecho udesly_get_image(_u('i245c91d9', 'img'))->altUDESLY-END-PHP

Step 1

Set height of "Horizontal Scroll Section" to
100vh x NumberOfProjects.

 6 Projects, so 100 x 6 = 600vh

UDESLY-START-PHPecho udesly_get_image(_u('i2b1f4cf3', 'img'))->altUDESLY-END-PHP

Step 2

Set "Horizontal Case Study Cards" interaction ending keyframe percent to
100 – (100/NumberOfProjects)

Example: 6 Projects, so 100 – (100/6) = 83.3%

Step 3

Set "Horizontal Case Study Cards" Move X percent to the same number as step two but negative.

Example: –83.3%