Difference between revisions of "How to build business sites with Swift"
From WikiName
| Line 10: | Line 10: | ||
# In design options -> layout settings, set the layout to hybrid or fixed. We will go with hybrid. | # In design options -> layout settings, set the layout to hybrid or fixed. We will go with hybrid. | ||
# Set the navigation style to modern in design options -> layout settings and select the remove borders option below it. | # Set the navigation style to modern in design options -> layout settings and select the remove borders option below it. | ||
| − | # Finally go to design options -> color options | + | # Finally go to design options -> color options [[File:Navigation-color-settings.png|right|Lets convert this to a WordPress site using Swift]] |
| − | [[File:Navigation-color-settings.png|Lets convert this to a WordPress site using Swift]] | + | |
## Check enable custom colors and uncheck all section except for "'''Modern Nav (Below logo)'''" | ## Check enable custom colors and uncheck all section except for "'''Modern Nav (Below logo)'''" | ||
Revision as of 08:40, 22 March 2015
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.
- Set the site width to 1160px. Thats the maximum width you can have for scree with horizontal resolution of 1200px.
- In design options -> layout settings, set the layout to hybrid or fixed. We will go with hybrid.
- Set the navigation style to modern in design options -> layout settings and select the remove borders option below it.
- Finally go to design options -> color options
- Check enable custom colors and uncheck all section except for "Modern Nav (Below logo)"
- 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)
