In order to code my design I use Webflow [ Full Disclosure: I'm a compensated advisor and an affiliate for Webflow.] Webflow is a modern no-code tool that has completely changed the Web design industry.
In fact, this website is built with Webflow, the same as most of the Websites I design for my clients. I love how I can design absolutely anything and visually implement it with html and css without the need to hire a developer.
Next I am about to show you how you can customise this illustration portfolio website. To follow along with me you can download this design portfolio template for free and customise it with your own content and your own projects.
First of all visit the page where the template is hosted. Once you are on the page, press the clone button and the project will appear in your personal dashboard from Webflow.
To make things simpler, think about Webflow as one of your preferred design tools such as Adobe Indesign or Adobe illustrator.
On the left side you will have control over all the layers and content (this shows html elements such as divs, forms, navbar, text and headers)
On the right side you will control the styles of the elements selected ( colours, spacing, typography, etc ( this is the CSS of the website).
In order to add new elements to your website you just have to drag them from the element section and place them on your canvas.
Let’s start customising the header. First add your name on the nav bar by double clicking on the text element and just writing your own name. This is simple, isn't it?
Next, add your email address on the contact button of the navigation bar.
To achieve this, once the contact button is selected, click the "Element Settings" button at the top right of the canvas, select the email icon and write your email address.
To change the heading and the introductory text you just have to select the text element, double click as you did with your name and proceed to add your content.
To add your own instagram, twitter account and email, select the social media icon, and in the right panel, select the “Element Settings“ tab, then select the “url” tab and paste your social media link.
If you wish to add an additional social media icon it is very straight forward. First select any of the social media icons, right click and select “duplicate”.
Now select the image in the new icon and click the settings tab just above the image and replace the image with one from your computer.
There you go. You have your social media icons all set. Now you can do the same with the icons located in the footer.
It’s time to replace the sample projects and add your own projects.
First select the image thumbnail and as you did with the icons, select the setting tab icon above the image and click “replace” to select your own image.
Second, while keeping the image thumbnail selected open the "Setting tab" and in the “Light Box Settings” select the image file and replace the file with your own image file.
Finally, replace the sample caption of the image for the name of your project.
Now you can start making changes on the About page. To switch between pages on your project click on the Pages icon located at the left of the screen and choose the “About page”.
In order to replace the image with your own image first select the picture layer, then click the "Style" tab at the right of the screen, in the "Background" section select the image file and click the “Choose image” button.
Now add your email in the contact button. Fist click the button, secondly click in the "Element Settings" panel, select the email icon and write your own email.
To continue adding your own content you just have to apply the same customisation methods previously used for the home page.
