Author Profile Customization Template | Photoshop + HTML

Hey all,

I created 4 PSD and HTML templates to speed up the profile customization. The template is free to download and use from here. There are few steps to add images with links to your products on your profile page.

  1. Open the PSD document (You have 4 different layouts with 1,2 and 3 columns for your images)
    01

  2. On the layers panel double click on layer’s thumbnail. A Photoshop document will open. Place your image, save and close the doc. In your main document your image will update.
    02

  3. All the images inside the Photoshop documents are cut into slices. After you replace all the images press Ctrl+Alt+Shift+S to export all the slices into separate images. Hold Shift+Click to select all slices you want to export. Click Save and on that options window go to Slices option and choose Selected Slices and click Save.


    03

  4. After you save all the images you need to upload them to your host/website. If you do not have a host on a server you can register and create a free blog on worpress.com. Over there under the Media section you can upload your images. You have 3GB free space. My recommendation is to buy your own hosting. Upload all your images and copy the URL (from browser’s address bar for each one)

  5. Open the provided HTML file with a text editor. You can use Notepad on Windows or Text on Mac.
    Each PSD file has a HTML corespondent.

  6. Edit the HTML by adding the URLs for your image and for your Item. For your image copy the link from address bar and for the item link go to your item page and do the same. Replace highlighted text between quotas.
    05

  7. Copy the HTML code without the first line. Go to your Profile > Settings > Paste the code inside Profile Text Field and Save your settings.

Now go to your profile and check the update.

Download the template from here

3 Likes

Hi, The links are broken. And I did not find where to upload this HTML, on my profile I just have an avatar place to upload the file.

https://i.postimg.cc/T3656PXL/Captura-de-Tela-2019-04-08-a-s-14-01-06.png