- 02:00Create site with ClickBump JumpStart Pro
- 03:40Install Honeypot skin into site
- 04:50Slider setup
- 07:40Upload custom slider image(s)
- 08:50Mobile responsive demo
- 09:25Layout of “Above Header” widgets
- 12:25Setup home page blog listing
- 14:15Add thumbnail images to posts
- 15:50Create category listings
- 19:00Adding category widget to “Below Header” container
- 21:20Configuring category widget settings
- 22:00Changing the thumbnail sizes on the menus widgets
- 22:43Changing summary text length & “Read More” text on menus widgets
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.
Clean design that reigns in attention
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
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
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.
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.