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

Revision as of 18:38, 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)

Stage 2: Building the actual page

1. Create a new page and set the page template as "Full width hybrid template"
2. Check hide post title and disable all ads.
3. Click on the page builder tab ( shown in image below ).

First row

After finishing row 1, your site should look something like this.

For the first row there are 2 possibilities and we will explain both.

1. Have a single image.
2. Multiple images using slider.

Single image

1. With the page builder tab selected, click on Add a row and set the number of columns to 1
2. Click on the wrench above the row to bring up row settings, add classes pull_t_2x hero. First one pull_t_2x pulls the row up to stick it to the navigation menu and we use hero class to style this row.
3. Now click on add widget and add visual editor to this row.
4. Click on edit on this widget and under attributes/widget classes add classes center hybrid pad_tb_2x.

• center centers the content in this row
• hybrid sets the widget width equal to site width, 1160px in this case.
• pad_tb_2x adds padding of 20px above and below the row. If you use pad_tb instead it will be 10px. This value depends on the airy setting in design options / layout options.
  • regular = 10px
  • airy = 20px
  • more airy = 30px
  • lot more airy = 40px

Note: we will need more padding than 20px, so we will override it using Custom CSS for the page setting.

While you are here, lest add some content to the widget

<h3>A simple business site built on </h3>
<h1>Swift WordPress Theme</h1>
<h3>It just took us about 2 hours to build this</h3>
<br /><br /><br />
<a href="#" class="btn btn-success btn-lg">KNOW MORE</a>

lets add some custom styles to our row In CSS applied to all devices add

.hero{padding:80px 0;color:#FFF} /* adding vertical padding and setting the color to white */
.hero h3{font-weight:lighter;font-size:24px;margin:0} /* Removing margin for text above and below the main one so that we can use the lines height of h1 for even spacing above and below.*/
.hero h1{font-weight:bold;font-size:72px;line-height:1.8em;margin:0;letter-spacing:.1em}

Slider

First three steps as same as above.

1. Edit the widget and add the window with slider. You can read about sliders and various setting available here
2. For the first slide add classes hero center, remove the title and for the caption add the following html. By adding hero class, we are using the styles we used in the earlier section.

<h3>A simple business site built on </h3>
<h1>Swift WordPress Theme</h1>
<h3>It just took us about 2 hours to build this</h3>
<br /><br /><br />
<a href="#" class="btn btn-success btn-lg">KNOW MORE</a>

You can add as many slides you want Ideally you shouldn't exceed 6. 3 is optimum.

This ends row one and your site should look something like this.

Row 2

Row two is pretty simple. Add a new row and add a visual editor or the simple text widget to it.

For the rows add class pad_tb_2x, and for the widget add class center

Add the following html to it

<h3 class="row-title">About Swift</h3>
Swift theme is a product born from a common need. A need for a <strong>intuitive, fast & lightweight theme</strong>, with complete control over design.
Driven by our obsession with standards and usability, we have crafted to our highest standards,
a theme you and your visitors will be thrilled to use.

Notice the row-title class we added to h3. As there are multiple rows with similar headings, we will be applying the styles to it using this class.

Append the following CSS to Custom CSS for the page

.row-title{
	font-size:48px;
	line-height:1.5em;
	font-weight:bold;
	color:#00a19e;
	margin:0;
	text-transform:uppercase;
}

Row 3

The third row has four columns of equal width. So add a row with 4 equal columns.

1. In the first column add a text widget and add the following html.

<i class="fa fa-4x fa-lightbulb-o"></i>
<h4>Brilliant Ideas</h4>
That are elegantly executed to change the way you develop WordPress sites

Set the widgets class to center. First line adds an icon from the [FontAwesome Icons] bundled with the theme. Class fa-4x specifies the size of the icon. You can also use the visual editor widget for this purpose, but no point using big guns for a task as simple as this

1. At this stage your widget sticks to left most side of the browser window. To fix it, edit the row and add class hybrid to it.

Tips and Gotchas

1. Swift lets you choose from 4 different FontAwesome sets at design options/advanced. If an icon doesn't appear, make sure your selected icon set includes that icon.
2. Page builder lets you easily duplicate rows and widgets. So instead of adding the widgets to each column and then adding classes to them, duplicate the widget in the first column and then move it to other columns. Then you can quickly edit their content.