Home

This is the “Squeeze” template’s demo site (Now Mobile Responsive). Scroll lower to see how I set this up. To see the “alt” version with a different header, click here. Want to use the built in slider widget for a header? Check it out.

This site is running the “Squeeze” template skin. All you need to run this site is a copy of ClickBump 5 WordPress theme. The configuration steps from a default JumpStart Pro installation on a new website are:

  1. Install the “Squeeze” template via “ClickBump > Home > Add/Upgrade Templates > squeeze.zip
  2. Disable the slider widget (if you will not be using it) at “Layout > Slider > Enable Slider Widget
  3. Go to “Appearance > Widgets and open the “Above Content” widget placeholder. Next, drag the “Newsletter” or “Email Opt-in” widget from the “Sidebar” widget placeholder and drop it into the “Above Content” widget placeholder you just opened.
  4. Remove the remaining widgets that appear inside to “Sidebar” widget placeholder (just drag each one to the left and drop it)
  5. Upload the settings.ini file via “ClickBump > Misc > Settings Manager > Import Settings” and then click “Apply Changes”.

Want to change the header image? Just upload a custom header file at “Images > Header Image“. I’ve included a layered header.pxd [← right click and choose "Save As"]  image that you can open and edit via the free online Photoshop clone, pixlr.com.

The default “Squeeze” template is designed to support a header image that has everything in one image (the header, the product shot and the call to action text).

I’ve also included an “Alt” version (Squeeze Alt) in this package that gives you more control over the header area by breaking up the header area into 3 components that you can edit via point and click: The top header banner, the product image and the call to action text. See the “Squeeze Alt” demo site to see how it works.

The default “Email Opt-in” sidebar widget is set for Aweber code. You can open the widget and edit this code to match your Aweber account info.

Not using Aweber? No problem. Just remove the aweber code and paste in your own custom code or that of your email service.

Above: Images that appear within your content copy are automatically embellished with a nice “flare shadow” to make them jump off the page. The theme takes care of this for you. No design skills needed. The optimal size for your images is 550 pixels wide.

 

This is how the template styles a standard bulleted list. Just enter bullet points, no design skills needed.

  • item 1 – text goes here to test the bullet points and potential wrap options. If its good, we let it go. If not, we fix it.
  • item 2 – text goes here to tes tthe bullete prooong oijo lksldsks lkoif options if its good then we are good. Otherwise, we fix.
  • item 3 – text goes here

 

This is a bulleted list with bg2 class which makes the background light gray. Just add the “bg2” class to the list item markup like so: <ul class=”bg2″>

  • item 1 – text goes here to test the bullet points and potential wrap options. If its good, we let it go. If not, we fix it.
  • item 2 – text goes here to tes tthe bullete prooong oijo lksldsks lkoif options if its good then we are good. Otherwise, we fix.
  • item 3 – text goes here

 

This is a bulleted list with a checkmark bullet <ul class=”bullet-check”>

  • item 1 – text goes here to test the bullet points and potential wrap options. If its good, we let it go. If not, we fix it.
  • item 2 – text goes here to tes tthe bullete prooong oijo lksldsks lkoif options if its good then we are good. Otherwise, we fix.
  • item 3 – text goes here

 

This is a bulleted list with both “bg2″ and bullet-check applied <ul class=”bg2 bullet-check”>

  • item 1 – text goes here to test the bullet points and potential wrap options. If its good, we let it go. If not, we fix it.
  • item 2 – text goes here to tes tthe bullete prooong oijo lksldsks lkoif options if its good then we are good. Otherwise, we fix.
  • item 3 – text goes here

 

This is a bulleted list with “bullet-check2″ applied <ul class=”bullet-check2″>

  • item 1 – text goes here to test the bullet points and potential wrap options. If its good, we let it go. If not, we fix it.
  • item 2 – text goes here to tes tthe bullete prooong oijo lksldsks lkoif options if its good then we are good. Otherwise, we fix.
  • item 3 – text goes here

 

This is a bulleted list with “bullet-orange” class: <ul class=”bullet-orange”>

  • item 1 – text goes here to test the bullet points and potential wrap options. If its good, we let it go. If not, we fix it.
  • item 2 – text goes here to tes tthe bullete prooong oijo lksldsks lkoif options if its good then we are good. Otherwise, we fix.
  • item 3 – text goes here

 

This is a bulleted list with “bullet-orange” and “bg2” class: <ul class=”bullet-orange bg2″>

  • item 1 – text goes here to test the bullet points and potential wrap options. If its good, we let it go. If not, we fix it.
  • item 2 – text goes here to tes tthe bullete prooong oijo lksldsks lkoif options if its good then we are good. Otherwise, we fix.
  • item 3 – text goes here

 

This is a bulleted list with gradient background. Just apply the “bg3” class to the list item markup like so: <ul class=”bg3″>

  • item 1 – text goes here to test the bullet points and potential wrap options. If its good, we let it go. If not, we fix it.
  • item 2 – text goes here to tes tthe bullete prooong oijo lksldsks lkoif options if its good then we are good. Otherwise, we fix.
  • item 3 – text goes here