Case Study: Create a Unique Site With Porto

Recently, we shared on our Facebook page an example of a client website based on our Porto theme, and realized fairly soon from all of your comments, feedback and questions that not all of you know how to use Porto to its full potential.

Apart from the two styling directions and multiple page layouts that you can see on Porto’s demo site, there are so many more customization possibilities under the hood. So, from now on, we will be doing Case Study articles to help you understand better your theme, and “squeeze” out the most out of its design and features.

First things first. In case you are only considering getting Porto, here’s what this beautiful theme is all about:

Porto was designed for the modern creatives, the storytellers, adventure seekers and trend setters. It is a multipurpose website theme that can perfectly match the needs and style of any photographer, videographer, planner, traveler or blogger willing to share his/her adventures with a larger audience. If you are looking for a clean polished look, with a vibe of elegance – Porto is your theme. It offers two styling options – a Classic and Editorial look, which you can easily switch between, full screen and full-width sliders, as well as a wide range of aesthetic choices (colors, fonts, widgets, navigation options, etc) to help you craft your dream website.

The beauty of Porto, is it’s versatility – you can opt for longer comprehensive page layouts (www.lorenioppolo.net) or create a clean minimalistic design (www.daysmadeoflove.com). Any look guarantees a beautiful and memorable impression on your viewers, across any device.

Now let’s get back to our Case Study. The website that got many of you excited and curious is owned by Kristen Blake from Kristen Soileau Portraits. You can check out her website www.kristensoileauportraits.com or watch our video here. Her website was built by us, via our Full Setup service with the Porto theme. Here are a few tricks/features that we used to craft this beautiful site:

Trick #1: Sticky Menu + Shadow

Sticky menus are incredibly helpful when you have longer pages, and want to keep your viewers engaged with your content and ensure a smooth and effortless experience for them. We explain how to make your menu sticky in the following video:

Go further with customization and add a subtle shadow to your sticky menu, to get a feel of depth. For this, you will need to add the following code to your Custom CSS section (go to your Flothemes tab > Custom CSS):

@media only screen and (min-width: 769px){
.navigation-block.sticky {
box-shadow: 0 0 4px 0 rgba(0, 0, 0, .4);
}
}

Trick #2: Unique Footer

Create pleasant and memorable impressions on your users with every single element of your website, even your footer. Take advantage of the color palette, experiment with the widget areas and create a unique look that accurately describes your personality and brand identity.

The following two videos explain how to customize your footer to get the look that Kristen has, but please do not limit your creative experiments just to this design (wink).

The footer section for Porto

Porto options for the widget areas

Trick #3: May the Shortcodes be with You

If you want to add an extra area to your homepage, let’s say an About or Philosophy section, you’ll be surprised how much you can create and achieve through shortcodes. Your section can be build from 1, 2 or 3 columns, depending on the design idea you have in mind.

Trick #4: Contact Forms on your Homepage

Who said contact forms need to be hidden somewhere deep down in your sitemap?
Some clients access your website already knowing that they want to hire you, so save their time and hustle by adding a brief contact form to your homepage, as in Kristen’s example. Here’s how:

Trick #5: Custom Loaders

Last awesome trick that many of you will enjoy and get excited about is adding a custom loader for your website. What can be more unique and exclusive then your own brand icon entertaining users while your site pages load?
For this feature, you will need a plugin called The Preloader. Follow their instructions and tutorials and enjoy the new unique twist that your website just got.

—

So, hope we’ve managed to dazzle you with these few tricks and possibilities to present your portfolio, products and blog in an extraordinary and attractive way. Don’t forget, your website is your digital business card. It can allure or repel your potential clients. Follow our tutorials and guides, and never fail to make an outstanding impression!

Also, follow our Instagram and Facebook pages, to stay informed about new features, updates and contests, as well as get inspired from the client website examples that we share there.

A few more client websites using Porto:

Jonas Peterson –  www.jonaspeterson.com
Leura Film (videography) – www.leurafilm.com
Fer Juaristi – www.ferjuaristi.com
Don & Helen – www.donbringas.com
Just Married Wedding Photography – www.justmarried.com.pl