Difference between revisions of "How to build business sites with Swift"

Revision as of 08:53, 22 March 2015

Lets convert this to a WordPress site using Swift

Lets learn this by example. This tutorial teaches you how to convert the PSD on the right into a WordPress site using Swift. Before getting started you should install the page builder plugin from SiteOrigin

Stage 1: Setting up the outer skeleton

As this site is having the navigation style of SwiftModern, we will use SwiftModern child theme to build this site. The same site can be done with Swift, but you will have a bigger header.

1. Goto Swift options and upload a logo thats 32px tall and less than 220px wide.
2. Goto appearance/menus and assign the three menus. If you are using regular Swift without child theme then there will be 6 locations.
3. Set the site width to 1160px. Thats the maximum width you can have for scree with horizontal resolution of 1200px.
4. In design options -> layout settings, set the layout to hybrid or fixed. We will go with hybrid.
5. Set the navigation style to modern in design options -> layout settings and select the remove borders option below it.
6. Finally go to design options -> color options
   1. Check enable custom colors and uncheck all section except for "Modern Nav (Below logo)"
   2. Set modern nav colors as below

Navigation background: rgb(2, 145, 141)
Navigation border: transparent
Link color:rgb(255, 255, 255)
Link hover bg:rgb(0, 117, 114)
Link hover color:rgb(255, 255, 255)
Dropdown links hover color:rgb(255, 255, 255)
Dropdown links hover bg:rgb(2, 145, 141)

At the end of stage 1

This finishes stage 1, and you site should look something like this. (Focus on the header)