Happy days! Flothemes installation done, so it’s time to move forward and build a website. In my article series about working with Flothemes I am building a brand new website on VDS server. You can follow all works and changes live on Destination Wedding Photographers. That’s right, I am building a real website based on theme Porto made by Flothemes. Plan for the website is simple. I want it to be simple and clean look, no big fuss. I need a high quality images, probably full retina support – because I am a wedding photographer I want to show to my clients only high resolution/best quality images! Usually this is the negative factor for page speed, google insights and google rank. However, let’s try! PS. If you have any questions please write them in comments below.
First of all, theme has a good documentation. Flotheme did a great work describing all options here. It is a general documentation to allow you build a simple website.
Now coming back to our home page; needs to be classy. We definitely want a slideshow with 5-6 top images, a welcome wording, last 6 blog posts, a bit more details about us and finally nice call to action. Website speed is a priority. Flothemes Porto offers two options for slideshows: full screen and something like a carousel. I like this “carousel” slideshow so I will give it a go. According to documentation we can create all slideshows in one place: Slideshow section.
Now the important question; What are the dimensions for the images. Well, it’s vary and depends on your idea. I want this slideshow to be approx 40% heigh and also I want them to be in retina size. I know, it’s a big pain for speed optimisation and general performance, but we want our visitors to have a better visual experience. I am going to use lazy loading scripts (more details later), each photo needs to be retina compatible and less than 600Kb. Dimensions of my images for 40% size of screen slideshow will be 1950px. That’s right, double size because of Retina. Having 7 images in the slideshow speed results doesn’t look good at the moment:
First of all I don’t run any optimisation plugins on that stage. So it’s pure Flothemes and WordPress on a high-specs VDS with mod_pagespeed and Varnish (cache not active yet). I am a bit worried at this step with the amount of requests. Definitely I won’t add Instagram widget at the bottom of page because that will definitely increase the requests… Again, I want to keep it simple and fast to gain as much as possible in Google ranking.
Time to add some wording. To do that I’ve decided to use a Visual Composer, external plugin delivered with Flothemes Porto. I must say I love VC. I’ve been using plenty of themes with built-in Visual Composer (delivered with theme by authors). Most of themes comes with personalised VC, and in most of cases I love that customisations. Here in Porto from Flothemes Visual Composer is out of box. This is a basic version of VC, no addons, no personalisation. To be honest I got used to fully loaded versions of VC, so I feel a little disappointed here. It would be awesome to see personalised VC from Flothemes, maybe with Floshortcodes. Anyway, adding a text in two columns to the page is so easy…
Welcome wording looks nice in two columns. Using a Flothemes panel I’ve changed site content width to 1040px – better visual experience for my page. The content width is a personal thing, Standard value 1200px was a bit too wide for me. In mean time I’ve added test blogs just to see how can I place them on my home page. I won’t give a tutorial how to create a blog post here because this is well described on WordPress website.
Home Page Blog Posts
Blog posts can be added in two ways (into the page, not blog page). First using a Floshortcode, second using a Visual Composer grid builder. Using a Floshortcode is pretty easy. Create a new row > add Text Block > from icons bar select Flo Shortcodes Plugin > List Posts
In my scenario I’ve used Taxonomy All (later I will change to specified category), View type Thumbnail view title on hover, 6 posts in 3 columns with 5px gutter. No surprise, looks a bit too simple and too standard, too small and too big fonts.
First of all having a Visual Composer mean you can easily tweak the look. Flothemes doesn’t limit you on that! So I will definitely stretch row and content.
This will render my content edge to edge, it’s not bad but I will limit that a bit using columns. Also I need some blank space between welcome wording and blog posts grid. Would be nice to have some heading for that blog grid… let’s say Recent Stories… Everything is easy to achieve with some basic knowledge about Visual Composer. You can find out some tutorials how to use VC here.
The heaviest elements are on the page. So after that I’ve did another checking on page performance… of course, those are only numbers which we should worry too much on developing stage. I’m posting that to show you how the website grows and how this can affect your SEO if you don’t do any website optimisation after going live.
Let’s play now with the website optimisation and performance… to be continued