Magnetic – Free Photography Website Template


Magnetic is an amazing pixel perfect PSD Photography website template, it’s a template made for photographers, but it can be used also as a portfolio template by creative people, like web designers, graphic designers…etc, the PSDs are fully-layered, well-organised and easy to customize.

Magnetic template comes with the three fully-layered PSDs Home/portfolio, Inner Page and Contact Page

Illustrations by Sara Spano.

Get Free Update !

Join our mailing list today and receive exclusive web design tutorials and high quality free web resources.

  • Yogesh Mankani

    Useful freebie, we have featured it here :

    • Thanks you @yogeshmankani:disqus

      • Yogesh Mankani

        It was our pleasure 🙂

  • nowhereman

    nice, thanks your share!

  • Newbee

    This is a great template, Thank you! I’m new to this so I need a bit of help. I’m currently customizing this template but I’m not sure how to solve the following. If you click on one of the images in the grid, you’ll go to the file inner.html. This file has an image (hero-image.jpg) at the top. What I would like is to have different top image each time you click on an different image in the grid. It seems that the index.html file is telling the inner.html file that only 1 image is shown at the top, at all times. How do I change that? And can you tell me how to embed vimeo video into the inner.html file? Kind regards

    • Hi @Newbee, the answer is you need to create a page similar to “inner.html” for each image, then you need to changes the image inside each “inner.html” page, you must have a basic understanding of html to do it, let me know if you need more help.

      • Makar85

        thank you for the quick reply, would you mind explain how to create similar “inner.html” so that each image on the grid can link to a page with a different top image?

        • @Makar85:disqus you just need to create an inner page for each image on the grid, for example ‘inner1.html’ for image 1, ‘inner2.html’ for image 2 and so on.

          • Chelsea

            Hi, I had the same question as him, but when I looked through the code, it’s actually the css that’s telling the background to be that image. I’m like him and I want a different image for each page…. do you know how to do this?

  • I’m using it! Thanks,

    • @rodnylobos:disqus, you website is looking beautiful 🙂

  • Guido

    Pleaaaaaaaase help me. I have tried everything! When the page is resized the index page colapses in an tablet / phone friendly version. However for me it happens way too quick. When resizing my window on desktop I get frustrated with how quick it collapses. Is there a way to change at which screensize it collapses? For instace at 600px or less.

    • Hi @disqus_SWx9xom4wY:disqus ,we set the break point for this template to 550px, hover if you want to change follow this simple steps, open the “main.css” file which is located inside the “css” folder and search for “@media (max-width:550px)” (without the quotation mark) then change the “max-width” value to what ever you want.

      Let me know if you need more help & good luck.

      • Guido

        Thanks for the response! Strange the template I downloaded had it set at 1100px?? I changed it and it didn’t work at first. The I found another one at the /* Responsive Code */ and changed it too. It worked! Thanks so much!

        • You are Welcome @disqus_SWx9xom4wY:disqus, thank for your comment, let us know if you have more questions 🙂

  • Makar85

    Hi, i’ve been experimenting with this template, i really like it but i can’t figure outlaw to add more hero-image.jpg in the inner page. can you please help me?

    • Hi @Makar85:disqus, you can only add one hero image per inner page, it’s not a slider.

  • hi pixelhint

    thanks for the theme, now i using it, i have question

    how to change map on contact in magnetic theme?



    • Hi @kaosmurahbandung:disqus, you need to change the longitude and latitude coordinates at the beginning of the “map.js” file with your coordinates, which is located inside the “js” folder, and that’s it.

  • Jolee Main


    Thanks for such a beautiful template. I have run into a small problem… On mobile devices I’d like some of the links in the menu to scroll to divs on the same page. However, when you click the link in the menu, the site scrolls but the menu does not automatically close so it appears like nothing happens to the viewer.

    Is there any way the menu could close after a link is clicked?

    Thanks so much!

  • Lucien Schilling

    I like the template! Great work, but what I do not like is having the menu inside each file. Changing the menu makes me sick of needing to change each file each time. This could be solved by loading an external menu file. I’ve seen that once, but can’t remember where…

  • This is amazing, thank you very much… Where can we get other matching social logos?

    Thank you!

    • nvm, I downloaded the PSD files and the found the font (Socialico)

      Thanks for the template.

  • Kim Aaltonen

    Hi, i’ve been experimenting with this template, i really like it but i can’t figure out how to change picture. i have tried to change the name in index to the new picture, and i`ve been tried draw on the original picture but the same happens. why?