WordPress Sales Pages – Building sales pages with the Privateer Theme

Here is what we will be covering in this tutorial:

• Manipulating the page backgrounds
• Manipulating the site header
• Manipulating the site footer
• Hiding different elements of the page
• Overriding the favicon
• Overriding styles for the page title and html sales box entities

When finished, we will have a sales page that looks nothing like the site that it is on. Here are two sales pages served up by this site:

• The Privateer Theme
• Web Building with the Privateer Theme course

With the Privateer Theme, wordpress sales pages can be either posts or pages. I personally prefer to use pages unless I have a specific reason that I want them to be posts…such as if I am creating a product sales page on a site that I use to sell product directly and I want the product to show up on the home page.

If you tend to build pages in blocks, you might do what I have done and set up one of your html sales box entities to have a header that looks like a section head in the sales page, a body that takes care of styling section content, and a footer that you either do not use or use for some specific type of display.

On this page, the large bold sections written in small caps are using a styled head element and sections such as this are using a styled body element. When necessary I end the html sales box entity and add some other type of content, but this page is, overall, written like the following:

<div class="product">

  <div class="head">This is a section title</div>
  <div class="body">
  This is the body section for the title above it.
  </div>

  <div class="head">This is the next section title</div>
  <div class="body">
  This is the second sections body.
  </div>

  <div class="head">This is the next section title</div>
  <div class="body">
  This is the third sections body.
  </div>

</div> <!-- this ends the product box -->

As you can see, I do need to enter some html here and there, but it is minimal and the overall look of the page is reasonably clean and consistent.

Whether you are creating a page or a post, keep in mind that the search results functionality of the site ( if used ) will pull up your pages as well as your posts…and be sure to create them in a fashion that will look good when shown on your search results.

If creating sales pages as posts, the same applies to your home page and various archive pages as well.

This Tutorial

As you can see, this tutorial is made using the sales page capabilities of the privateer theme.

Actual time to style this page was just over 3 minutes.

In the sections below, styling information is provided for this page along with graphic dimensions. Please note: The graphics used on this page are property of Net Profiteers and not public domain.

Within the post and page editor, in the Privateer Core Options section, you will find a Site Header Overrides section.

Custom Header Type

By default, there is a Custom Header Type selection box with the value "Normal" set in it. Here are the different values and what they do:

Normal

This tells the theme to use your normal site header for the page or post. For sales letters, this is probably not the setting you want.

None

This tells the theme to hide the site header entirely.

For sales letters that don’t have a fancy header this works great.

Custom

This tells the theme to use a completely different header setup that the one used currently for the site.

To actually create the custom header, you will need to save a draft ( or save your changes ) so that the editor reloads and displays the extra options available when using a custom header.

Bar Setup

This option works in exactly the same fashion as the Header Bar Setup option located in the Privateer – General Display – Header Setup menu.

You enter the codes for the bars you want to be shown in the order you want them shown and they will be used.

Available Bars

The two extra bars ( %pbar1 and %pbar2 ) are custom bars that can be styled and have content entered into them which is specific to the current post or page.

To use the extra bars, you set them up in the page or post editor. They each have the following options:

Bar X Content

Enter the content you want in the bar here.

Bar X Box Style

Style the container holding the content here.

Bar X Link Style

Style links within the bar here.

Bar X Hover Style

Style the hover state of links within the bar here.

About the Bars

Between the ability to place content, style the container, and style the links in their normal and hover states, you can use custom bars to create just about any look you want, provided you know a little bit of html and css.

Settings for this page

The following header override settings were used for creating this page.

Custom Header Type

This was set to Custom as I wanted a header, but one completely different from that of my site.

Bar Setup

This was set to %pbar1 as I wanted only a single custom bar specific to this wordpress page.

Post Bar 1 Content

This was set to the text you see at the very top of this page, noting where the graphics came from and what theme created the page.

Post Bar 1 Box Style

• background: #FFFFFF url(http://www.theprivateertheme.com/wp-content/uploads/ealw-header.jpg) no-repeat top left;
  This set the header graphic as a non-repeating image starting at the top left of the available area.
• height: 213px;
  The space needed to display the full graphic.
• padding: 5px 0 0 200px;
  The content inside should be 5 pixels from the top, 0 pixels from the right and bottom, and 200 pixels from the left side.
• color: #FFFFFF;
  White text
• font-weight: bold;
  Bold text
• margin: 0;
  No margin space. We want the graphic fill the box.

Post Bar 1 Link style

• color: #FFFFFF;
  White links
• text-decoration: underline;
  Underlined links

Post Bar 2 was not used for this sales page.

The Footer Overrides section of the Privateer Core Options menu in the post and page editors provides you with the ability to configure the site footer for each page or post you create. As with the Header Overrides, the default option is "Normal".

Normal

This tells the Privateer Theme to use the normal web site header.

None

This tells the Privateer Theme to remove the footer area completely.

This is great for simple looks that don’t need any fancy graphical header and / or links at the bottom of the sales copy.

Custom

If you want a graphical footer and/or links in the footer and do not want it to be the same as your sites normal footer, then this is the setting you want.

When you switch to it you will need to save a draft or save the page before you will see the options available for customizing it.

Content

With this option, you can enter the content you want to be shown in your custom footer.

Box Style

With this option, you can style the container that contains your custom footer content.

Link Style

With this option, you can style the links within the custom footer.

Hover Style

With this option, you can style the hover state of links within the custom footer.

Putting it together

With these options, you can place backgrounds, add any content you want, and style the footer to get just about any look that you want for your wordpress sales page.

This Pages Settings

The following settings were made to apply the custom footer on this sales page.

Custom Footer Override

This was set to Custom so we could use a footer that is completely different than the rest of this site.

Content

Just a link to this sites home page.

Box Style

• background: #03245a url(http://www.theprivateertheme.com/wp-content/uploads/ealw-footer.jpg) no-repeat top left;
  Sets the background to be the same color as the background outside of the page and sets the footer image up as a non-repeating image starting at the top left of the container.
• color: #FFFFFF;
  White text.
• padding: 5px 50px;
  Content should be 5 pixels from the top and bottom of the container and 50 pixels from the left and right of the container.
• height: 70px;
  Make the footer at least 70 pixels high, to ensure we have the graphic displayed.
• text-align: center;
  Align text in the center of the area available.

This sub-section of the Privateer Core Options panel in the wordpress post and page editor contains options not related to the header, footer, or the sales box entities.

FavIcon

This sets the favicon for the page, overriding the one for the site if provided.

Site Body

This overrides styling for the html body tag. Normal styling for this is done via the Privateer – General Display – Body Style and Text – Body Style option in the theme.

If you want to change the area outside of the main page container which holds the site header, page content, sidebars, and footer, this is the place to do it.

Content Area

This overrides styling for the container that holds the site header, page content, sidebars, and page footer.

This is the place to set up different main background areas for the page and apply backgrounds for the middle section of the page.

Page Wrapper

This overrides styling for the page level content wrapper which holds each page templates information.

Mainly used when you have used special styling on page wrappers.

Post Wrapper

This overrides styling for the post level content wrapper which holds the post or pages content.

Mainly used when you have used special styling on the post wrappers.

This Page

For this page, I used the following settings.

Favicon

I changed the site favicon for this page to a yen symbol ( fff-money_yen.ico )

Site Body

• background: #03245a;
  This changed the area outside of the page to fit the graphic set.

Content Area

• background: #FFFFFF url(http://www.theprivateertheme.com/wp-content/uploads/ealw-bodybg.jpg) repeat-y top left;
  This sets the page background color to white, applies a graphic to give the nice fading sides, and repeats it horizontally while starting at the top left.
  This would apply to the header and footer as well, but those are given their own specific styles.
• width: 950px;
  Makes the content area the same width as the graphic set, so that it displays properly.

This sub-menu handles overriding the normal page or post title content area as well as the styles defined for the sales boxes in the Privateer – HTML Entities menu.

Page Title Container

This setting styles the normal page or post title. It actually styles both of them…so you should hide one of the two if you use both on a page unless you want them both to be styled with what is set here.

Other Options

The rest of the options in this sub-menu correspond to the various parts of the sales box entities which are set up via the Privateer – HTML Entities menu, allowing one to alter the default style for any of them on an individual page and post basis.

This Page

This sales page simply styles the Page Title Container to turn it into a sales page title rather than using the Sales Title Box entity.

• background: #FFFFFF;
  Make the backround white (It is normally gray on this site)
• font-size: 1.4em;
  Make the title 1.4 times normal size.
• color: #880000;
  Dark red
• text-align: center;
  Center it

The Hide Specified Items options is part of the Display Method sub-menu of the Privateer Core Options panel in the post and page editors.

With it, you can hide any of the following page elements by checking them and they will not be shown even if they are set to be shown on posts or pages.

• Page Kicker, Title, Subtitle, Summary, Byline, Above Postlist, Below Postlist, Footer
  These are page level items, shown for each template if configured.
• Post Kicker, Title, Subtitle, Summary, Byline, and Footer
  These are post level items, shown for each post on a template if configured.
• Nav Bars
  The next page, previous page, child pages, and bread crumb navigation bars, if shown on a page normally.
• Side Bar 1
  The first sidebar
• Side Bar 2
  The second sidebar
• Comments
  The comments section
• Linked Comment Authors
  If checked, this will draw comment author names without turning them into links.

This Pages Settings

For this page, the Post Byline, Post Footer, Nav Bars, Side Bar 1, Side Bar 2, and Linked Comment Authors boxes are checked.

You can see that the Linked Comment Authors box prevents comment author names from being linked by leaving a comment on this page.

If you make a lot of similar sales pages, you can use the Copy Settings From Another Post or Page sub-menu within the post and page editors to copy all of the above settings from a post or page with the specified ID.

To do so, on the page you want to import settings to, enter the ID of the page or post you want to import settings from and select Save Draft or Save Changes to have the settings imported.