New Template: “Velocity” for ClickBump 5

Today I’m releasing a new premium template made for owners of CE4 (aka ClickBump Express/Engine). Its called “Velocity” and its an SEO optimized, fully-validating html5 compatible template made for WordPress and CE4.

Here’s a preview (click the image for full size preview):

This template features a unique blend of cutting edge CSS design, html5 compatibility, as well as the ability to morph into any color scheme you can envision, using the CE4 point and click color options.

You can also add a custom header graphic (to replace the default female avatar character) and I’ve included a layered .pxd file with the package so that you can easily create your own custom header image to make this your own. You can open the .pxd image at pixlr.com, edit it, then save it as header.png for uploading to your site.

The template also features a vast array of color customization options. Here is the help overlay that you will see at “CE4 > General Settings > Show Help” (click the image for full size preview)

By default, the color values are preset to match the example. However, you can easily customize these colors, along with the header image to instantly transform this template into your vision. As you can see in the screenshot below showing CE4’s point and click color swatches (1-4) that you will use to set those colors:

Adding the CE4 Google Search Widget to the template

At the top right corner of the screenshot, you can see the Google Search Widget, specially formatted and anchored to the top right corner of the template’s header area. Its a snap to add this to your CE4 enabled site.

1) Go to “Appearance > Widgets” and drag “Google Search Widget” (a ClickBump CE4 exclusive widget not found elsewhere) over into the “Sidebar”. Once you’ve done that, it will look like this:

As you can see from the screenshot, I’ve already pasted in all of the default script for you. All thats left for you is to place your Pub Code into the space provided. You’ll get this from your Google search widget code at your Adsense dashboard.

Adding Your Ad Code to the template’s Main Content Ad Area

To add your Main Ad code to the template, you have two options (for Adsense), you can use your Client ID and Slot ID or you can paste your entire Ad code block. I’m using a combination of both in my example, so that I can rotate ads between the two. However, you can use one or the other.

To enable the stacked 336×280 ads as you see in the screenshot, open your site’s admin dashboard and click on the theme options panel (CE4). Once you have that open, just click on the “Ads” tab and paste in your Google Client ID and Slot ID for your saved large rectangle ad like so (click the image for full size preview):

Note that I have a few extra options selected in my example. These are all optional (as all of the CE4 settings are). By placing ad code into the “Alternate Ad Code” block, and checking the “Turn on Ad Rotation Script” option, I’m enabling CE4 to rotate the ads that the viewer sees between the Adsense main ad (the one I’ve specified at the top with the Client ID and Slot ID) and the “Alternate Ad Code”.

What’s cool about this feature is that I can place ANY ad code I want into the “Alternate Ad Code” box, and I’m not limited to Adsense. I can, for example, rotate between my stacked 336 Google Adsense blocks, and a high commission ClickBank product with affiliate link (or whatever). You get the idea. This is very powerful.

Feel free to use the comments are below to ask any questions you may have about setting up the new “Velocity” template for CE4. Existing CE4 owners can purchase and install this template beginning today at Paypal.

Adding Menus to the Velocity Template

The template is pre-configured to present the WordPress custom menus as you see in the screenshot, with the current post or section automatically highlighted. It also will display any posts you’ve flagged with the top-menu category and place them in the blue bar across the bottom portion of the header area. If you built your site with JumpStartPro!, the installer automatically created a custom menu for you. However, if you did not, click on “Appearance > Menus” to create and configure your menu similar to this (click the image for a full size preview):

The custom menus are flyout enabled, so that if you drag and drop them under one another, they will automatically orient themselves as flyout menus.

To flag specific posts to appear in the blue bar below the custom menus, just add the “top-menu” category to the post and CE4 takes care of the rest.

Adding the footer boxes

The four boxes you see at the bottom are optional. However, these are great areas to showcase special Amazon or ClickBank products that relate to your niche. Or, you can just place additional content into them. To create them, just go to “Appearance > Widgets” and drag a few “ClickBump Box” widgets over into the “Footer” sidebar as you can see below. You can use as many or as few box widgets as you want. Velocity with auto adjust them to fit alongside one another!

Note from the screenshot above, one of the unique capabilities of the CE4 theme that set it apart from other themes, the ability to set widget visibility. For example, in this case, the widget will only be seen on the home page.

Feel free to use the comments are below to ask any questions you may have about setting up the new “Velocity” template for CE4. Existing CE4 owners can purchase and install this template beginning today at Paypal.

More from Tutorials

4 Responses to “New Template: “Velocity” for ClickBump 5”

  1. stan says:

    Hey Scott, have to say the templates are really nice, i have a question on velocity, is it possible to add a link unit on the blue bar, below the custom menus? Thanks

    • Scott says:

      Hi Stan, thanks for the kind words. The blue bar is meant for your top-menu posts. However, if you’d rather place an ad link unit there, it would be no problem with a single line of custom css code added to the “Custom CSS” input in theme options.

      First, you would add your link code to a “ClickBump Ad Box” widget placed into the “Header” area of the widgets (Go to “Appearance > Widgets > Header” and drag a “ClickBump Ad Box” over into that, then paste your Google ad link unit code into it and click Save.

      Next, you would add this line of CSS at “ClickBump 5 > Misc > Custom Code > CSS”

      .featured-home.box.ad {margin-top:-25px}

      // of course, you would also want to make sure that you set your ad link colors to match the template. That is, background color = #007fff and link color = #ffffff

  2. Scott says:

    @fathonezic, thanks for your comments. The post title is just hidden on this view. Its a single option in ClickBump theme options (Layout > Hide > Post Title on Home Page) since in many cases its redundant to repeat the post title on the home page.

    For amazon ads (or any type ads for that matter) in the sidebar, its as easy as dragging a “ClickBump Ad Box” widget over into the sidebar at (Appearance > Widgets), then pasting your ad code into it. The theme is set up to automatically display your ads there.

    BTW, All templates have sticky page content. The XFactored 2 example just takes advantage of the “Category Index” feature of ClickBump which allows you to place a thumbnail index of your chosen categories on the home page. This feature is available to ALL templates.

    Hope that helps. This is a pretty flexible theme, able to morph into just about any look you can imagine, just with a few clicks in theme options to turn on/off features.

    ~ s

  3. fathonezic says:

    nice template…
    but, why i dont see any title in the content ??
    this template is great, looks like x factored 2 but with sticky page content. nice !

    1 more question, can i place amazon ads in the side bar like you did in this site ?? i see a lot of amazon ads in your site (clickbump.com) that you place in the side bar. If i can do it, how to do it ??

    i will definitely buy this template after it is clearer

☝ Back to Top