How to build business sites with Swift

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

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>

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

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.