Header Options

A lot of the work we have to do is in the header area, this is the part of the page and not the content that will get the attention of a viewer, so we have several options for the header area, background, logo, like button, titles and social media.

These are all optional and as part of planning our template we need to note the image sizes in pixels, this is so we can use the space well, remembering that we have half the width of a normal webpage.

Lets look at these, we set the header height here, we can adjust this later if we have to, in our example we are not uploading a header image, if we were it would need to be 520px wide to match our template width.

h1

Next we move to the Header Content page and starting with the logo we uploaded in the Template Option section we can select this from the Logo Image lookup, we add some alternate text, a link to our website and set the Logo Block Width to the width of our logo image, we are positioning our logo left and top, so we add margins to move the image in a little..

h110

Just like our WordPress site we can add a Title and Sub Title, to activate these we enter some test in the main titles section, we have selected a custom color and set the size to 32px fro the Title Text.

h3

We want something different for our Sub Title Text

h6

Then just like our Logo we add a margin to our title block, notice we have set this to 85 on the top this brings the titles below our Logo which is also on the left.

h111

Next we will add a like image, many template use these to remind the visitor to press the Facebook Like button.

h7

Our final part of header real estate is the Social Media social icons, we can add three icons, this is due to the limited space, you could add more in the content later if required, notice we have set the width fairly tight, and we are displaying our icons on the right, and keeping the 10px margin.

h8

Now we select the icons from the Template Images, add alternative  text and links to our Social media Accounts.

h10

Phew that was a lot to take in so what does our template look like now, if we now go to Template Layout and preview as HTML we can see our template taking shape, we will style the menu in the next post.

h9

Notices

We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information

If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.

All sample code is provided by http://DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.

This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.

Leave a Reply

Connections

Connect with Us
Follow Digital Raindrops on Twitter Join Digital Raindrops on Facebook
Share

Related Posts

Posted in Facebook Tutorial

wizard-thumb

It has been two weeks since the Beta 1 was released for testing, after feedback we have made a number of changes. The main topics in this section are still relevant but with a few changes, the major changes are … Continue reading

Read More