Video: Look over my shoulder as I build this site

This post features a step by step video that walks you through the setup of the Honeypot skin to mimic this site's layout

Video Index
  1. 02:00Create site with ClickBump JumpStart Pro
  2. 03:40Install Honeypot skin into site
  3. 04:50Slider setup
  4. 07:40Upload custom slider image(s)
  5. 08:50Mobile responsive demo
  6. 09:25Layout of “Above Header” widgets
  7. 12:25Setup home page blog listing
  8. 14:15Add thumbnail images to posts
  9. 15:50Create category listings
  10. 19:00Adding category widget to “Below Header” container
  11. 21:20Configuring category widget settings
  12. 22:00Changing the thumbnail sizes on the menus widgets
  13. 22:43Changing summary text length & “Read More” text on menus widgets
youtube

I begin with a fresh WordPress install and use Clickbump JumpStart Pro to build out the initial site architecture. From there, I walk you through the setup and build the layout for you to follow along step by step.

screenshotThe Honeypot skin is ideally suited to local business, blog and authority websites that need to have cutting edge style, mobile support, quality search engine signals and world class speed.

Clean design that reigns in attention

The design of this skin is inspired by the “Flat UI” concept that has appeared most prominently in the new Windows Metro UI as well as Apple’s forthcoming iOS7 user interface.

The addition of the new ClickBump version 6.5 “Above Header” widget container allows these widgets to be highlighted at the top of every page on desktop and mobile.

This skin utilizes the new “FlexSlider2” slider that has been integrated into ClickBump 6.5. FlexSlider2 provides for a full width, responsive enabled slider for your sites.

For the live demo site, I’ve created the three slide images in Photoshop. If I choose, I can use these same images regardless if I’m using FlexSlider2 or the ClickBump default slider.

The images have been created with transparent backgrounds and saved as 24bit png files (slide1.png, slide2.png, etc) at a size of 980×299. Because FlexSlider2 automatically adjusts to fit the image’s height, I don’t have to specify a slider height in ClickBump’s slider options panel as I would with the ClickBump default slider.

Creating the slides in Photoshop

honeypot-ps

By knocking out the image background, it creates the effect that the graphics are floating above the page. This gives the appearance of a full width slider filling the entire width of the screen. Check the live demo site, its a pretty dramatic and neat effect that’s super simple to create.

Use TinyPNG to Compress PNG Images for Faster Downloads

tinypng

The tinypng.org PNG image compressor reduced a 376.3kb image down to 88kb, a 77% reduction in size!

Although their transparency effects are unmatched, transparent png images take up more space than compressed jpgs of the same size and content. To account for this, make sure to run your PNG images through the tinypng.org image compressor to reduce file sizes and maintain speedy pages. The tinypng algorithm is as close to magic as it gets. The compressed images can be as much as one third the size of the original with no apparent loss of quality. The resulting files are often smaller than comparable jpeg file sizes (and jpg does not support transparency).

Honeypot also takes advantage of the new “Above Header” widget container. This allows easier display of the text message and social icons above the header. To accomplish this, I just drag/dropped a ClickBump Text(1) widget over into the widget container as well as a ClickBump Social icons widget.

The skin already has custom css which correctly formats these widgets in place, including the responsive layout on mobile. Of course, I edited the social icons markup to point to my specific social landing pages.

Resources

The HoneyPot Sitemap XML file (Import via Tools > Import) – Warning: Use this with caution, it should only be used on test sites to replicate the content of this demo site. DO NOT USE ON PRODUCTION WEBSITES.

The HoneyPot settings.ini file (Import via ClickBump > Extras > Settings Manager > Import Settings). Warning: Use this with caution, it should only be used on test sites to replicate the content of this demo site. DO NOT USE ON PRODUCTION WEBSITES.

About the Author

My name is Scott Blanchard. I am a web software publisher and the creator of "ClickBump". I live in Birmingham Alabama with my wife and our two children. When I'm not coding wordpress or spending time with my family, I enjoy playing guitar, driving with the top down, good coffee and frequent beach trips.

Back to Top