Skyline provides the unique ability to move a logo and navigation to the left, top, right or bottom, depending on the look and feel of your brand. Here are the core elements of Skyline that you can customize within the Style Designer.

Layers

body - This is the outermost area of the page. It shows the background image or color as well as padding (the spacing around the element) and vertical alignment. 

header - This element contains the page title or logo and the website navigation bar. Here, you can change the layout (position of logo and navigation), background color and padding.

header container - This is the area surrounding your header. You can set the background color or make this transparent (color opacity to 0%) if you have an image.

banner - The banner area displays the site tagline and allows you to add a banner image, change the width and padding as well as adjust the background and foreground colors if you do not have an image. If you prefer not to have a banner, you can hide this element.

content - This is the primary content area that holds all widget content, including text, pictures, columns, etc. You can choose your preferred width, padding and background color.

footer - The footer area is located at the bottom of the page and displays contact information and optional social media share icons. This element can also be hidden. Available properties include background color and padding.

See wireframe for more detail >>

Layout Options

header alignment allows you to set the layout within your header. This property controls the position of the page title or logo in relation to the navigation (top, left, right or bottom).

site width is where you can control the width of your header, banner and content areas.

body padding provides the option to control the spacing around the outside of your content (inside the window).

header padding controls the spacing around the inside of your header.

banner padding gives the option to control the spacing around the inside of your banner. You can use this property to change the size of your banner.

content padding let's you control the spacing around the inside of your content.

Images

background - You can set a background image on select pages or to the entire site. After you upload an image to the background, you can use the properties below the element to control its position and size, making sure that it displays correctly.

logo - Uploading a logo image automatically  replaces the page title text and will display on all pages of your site. To control the layout of your logo in relation to the navigation bar, adjust the header alignment property. The size of the logo image can also be controlled from the element properties.

banner - Similar to your background image, you can add a banner image to select pages or to the entire site. To control the position and size of the image, use the element properties.

Take your business online and start building your website today. In just a few minutes, you can create a beautiful, professional website on Yola.  Get Started.