Your opening screen for a fresh install should look something like this :
Things are looking a little bland :-) Lets start by adding a menu.
As shown below :
The screen will update to something like the one below:
Primary Menufrom the drop down list
Your menu system is now ready to go. Simply select the pages and add them to the menu. You can drag
the menu item to indent it and it will appear under the parent. To create a dummy menu item just use
# in the
Custom Links/URL section, give the link a title and click the
Add to Menu button.
Dummy menu items come in handy when you are setting up drop down menu items. In the default menus set up the
Home page and the Sample Page are included in the menu. If you want to delete them just click the down arrow
for each menu item and remove them.
Now that the menu is installed there are a few options. Go to
Under the Header tab, you will see that there are three
Menu border options and three
Header menu location options. The menu can be put on
the left,right or center of the Header. You can leave it with no border, a full border, or just
a border that covers the menu. I decided to only allow the menu border option when the menu is centered,
as it does not look great on the left or right sides. Scroll to the bottom and click
Save Settings button.
For now that's enough about the menu. We'll add more items as we work through the documentation.
The header is repeated on every page of your site. Expressions does not allow you to have different headers for each page, and it's not really recommended as users will want to be comfortable navigating around your website. There are a lot of options for the header system and I will show you in detail how to use each one.
Further Reference: WordPress Appearance Header Screen
You can include a website site logo in the upper left hand corner or in the center of the header. To do this
Header and you will see the following screen:
This theme is responsive meaning that images are automatically scalled to screen width. Your logo will be scaled as the screen size is changed. If the logo is on the left it is scaled to 28% of the screen width, if it is positioned in the center it is scaled to 50% of the screen width. The scaling occurs only if the available width is less then the original logo size. The logo is not scaled larger. Logo height is automatically set to maintain the proportion of the original logo.
Tip: Keep your logo under 200 px wide, and keep the height reasonable, so it looks good. Also I will typically create the logo as a jpeg or png image.
Once you have designed your logo cick the browse button and select your file. Then click the upload button. You will then see the next screen :
You can crop your image to the desired dimensions here. I think it's better to set up your logo to the correct size
before you upload it, using an image editing program such as Gimp, or Photoshop. I created a quick image
for this demo, sizing it at 200px wide by 52px high. So all I have to do is drag the selected area to capture the
entire logo and click
Skip cropping and Publish image as is.
If you want to remove an image from the header panel you need to delete it in the
Finally, if you do not want a header image click the
Remove Header Image Button.
We're not quite done yet as you need to tell the theme to show the logo. Go to
Under the General Tab, scroll down to
Header Options. Click
Show LOGO. If you want the
logo centered click
Center LOGO otherwise leave it unchecked. Scroll to the bottom and click
Save Settings button.
Tip: If the last thing you did was click a check box on or off, yo can just hit your enter key and the settings will be saved.
The installed logo is shown below. Note that I have also selected to show the blog title and tag line (description). The "Sample Page" menu item also appears in the header.
The header area has a couple of widgetized areas. The first one is called
Right Header Area and
it is allways available for use. The second one is called the
Left Header Area and it
is only available if the user chooses to not show a logo, Site Title, and Description. Lets start with
Right Header Area but first I want to talk about the
As we continue to pursue the Header set up it's a good time to talk about the Social Widget.
Expressions comes with a custom social widget. To set up for the widget you first need to enter the links
for the social sites you are a part of. Go to
Expressions Options =>
If you want to use font icons for social icons click the "Use Social font icons". Then input the links for your social
sites. Remember to
Make sure you test your social links.
Appearance Widgets and you will see that there are quite a few widgetized areas in a column on the right.
Also notice the
Expressions Social Links Widget. Open up the
Right Header Area and drag over the
Expressions Social Links Widget:
Delete the Social Links title (If you don't want the title showing in the header), pick the size of the icons you want, select the social links you want to show and save the widget.
Want to add a phone number? Drag the
Text Widget and place it above the
Expressions Social Links Widget.
Enter the phone number and save the widget.
If you want to go completely custom in the Header area you can activate the
Left Header Area by simply unselecting
Show Blog Title, and
Show Blog Description. Doing this will allow you more freedom
to customize your header area. For example if you want to put in your blog title and a description on the left side,
Widgets and drag over a
Text widget to
Left Header Area.
I added a different title, and description, using html, and added in-line styles for spacing. Also note the menu area now has a border.
The header now looks like this :
When you enable the
Left Header Widgetized Area you also can load a banner image. The banner image is loaded using
the same procedure as you loaded the logo. The big difference is that now you can load a full width banner.
Tip: Keep the banner 960 px wide, and no more that 320 px high.
I created a banner for demo purposes, and the
Headerpanel is shown below :
The new header set up is shown below: