Site Building Advice 3

Skyline Tips and Tricks

Earlier this week we introduced you to Skyline, our newest template that’s capable of bringing your company’s branding to the next level. Its versatile new features will give your logo the spotlight, and your website the professional feel you’ve been looking for.

To help you become better acquainted with enticing new feature, we’re excited to detail a few tips that will kick-start your website’s transformation.

Skyline paired with Style Designer
To start, we’ve found it most important to note just how easy Skyline customizations can be with the use of Style Designer.

Upon opening Style Designer, you’ll notice a list of settings on the left that will put you in the driver’s seat. These properties give you full control from colors and backgrounds to fonts and headers.

We understand that our wide variety of options may be a lot to digest all at once, and in turn have an easy way to look at specific properties. For example, let’s take a look at customizing your background. While in Style Designer, double click your current background, taking you from a full list:

Skyline - 1
to a more concise one:

Skyline - 2
Notice how the properties on the left have only three sections. This shows you which settings specifically apply to the area selected, in this case, your background.

Use this double-click trick on any property of your page, from your logo all the way down to your footer. You can always click the “All Properties” link to see all items.

Full control of your logo
Now that you know the tricks of the trade when it comes to Style Designer, let’s put them to use with your logo.

Double click the Skyline logo to bring up all of the customizable settings available at your expense. From here, click “Logo,” then, “Edit” and finally, “Select image” to give add your own image. Once done, your logo will immediately be displayed in your header.

After you’ve uploaded your logo, you may want to explore further customizations. Let’s say, for example, you’ve uploaded your image, and it’s too big. Changing the size of your logo is no problem with Style Designer. Double click your image, click “Logo” and adjust the width until it suits your fancy.

http___makeagif.com__media_11-15-2013_19Q26u
Is your new logo in the right spot? With the Skyline template, moving it is a cinch. Once you’ve double-clicked your logo, check out the “Layout” section. Click the “Header Alignment” for the option to position your logo to “Top,” ”Bottom,” “Left” or “Right.” Continue playing with your logo settings – you’ll surprise yourself with what you’re able to create!

Tie it all together with a brilliant banner
Another alluring aspect of Skyline is the ability to add a professional, customizable banner. Whether you have a picture to extend across the width of your site or a transparent image, Skyline can handle it. You can always hide the banner if you prefer.

For the sake of this example, we’ll add a transparent image and a background color to our banner. To start, double-click on you banner to show all of the settings you have to work with. From there, click “Banner Image,” “Edit” and “Select Image.” Once you’ve uploaded your image, proceed in adjusting the position, size and whether or not you want the image to repeat. Lastly, decide on a background color to place behind your image, and voila! You have your banner!

Skyline 4
Once your banner image is in place, click “Banner Max-Width” to decide how large you would like your banner image to be.

As you can see with Skyline, the site transformation you’ve been looking for is completely obtainable. Try out our newest template, upload your logo and let your business’s branding unfold.

  • Holly Peters

    In the pictures above on the skyline the navigation menu is aligned in the centre with the logo to the left, I can get the logo to go to the left, and I can adjust the padding to get the navigation menu down to the middle, but how do you adjust the padding on the right hand side to allow it to be in the middle rather than to the right hand side?

    • Stacey

      Hi Holly,

      While in Style Designer, double click on your site navigation. This will populate Style Designer with the specific presets available to edit your site navigation.

      From there, under the “Layout” menu, click “Header Padding” and you can adjust your navigation padding there. On the example site, as you can see the header alignmentis to the left. To get the navigation to the middle, our right header padding is set to 371 px.

      Hope this helps!

  • Pingback: Featured Website: Miracle Mittens and More | Yola