"FreeStyle is easy to use. It creates banners / slideshows that are static or motioned; which easily adapt to any RapidWeaver theme. This stack enhances webpage designs through its effortless yet sophisticated features."
Richard Wagner
The open source FreeStyle banner concept arrived on the RapidWeaver theme scene a few years ago. It was at a time when traditional banners in RapidWeaver themes were failing to give users the freedom of creativity they desired; and at a time when factors like page loading speed, SEO, browser compatibility and responsive behaviour were becoming a high priority for many. FreeStyle came forward and solved many of these fundamental problems.

Research has shown (search online for 'website 8 seconds rule') that successful websites need to engage with users in under 8 seconds. Although strictly not applicable to every website, the 8 second rule certainly holds true for most. The banner region above the page fold is typically engineered in most better websites to provide this engagement; either through an eye catching static image or motion (in the form of sliders or video). FreeStyle accomplishes the task of helping you build effective banners that outshine the competition and get you the results. Less bounce-backs and more click-throughs.

The FreeStyle 2 stack is a major upgrade over the previous version. It provides a mostly code-free approach for RapidWeaver users who want to do more with FreeStyle banners. Beyond static images and a slider, the FreeStyle stack now includes several different templates, a brand new editing interface and lots of useful documentation (within the stack). The FreeStyle stack offers a perfect synergy between RapidWeaver themes, the Stacks plugin and the FreeStyle banner concept.

Templates

The original FreeStyle stack could only handle basic slideshows and static images. However this new version has added a number of other banner types, which we now brand as 'FreeStyle Templates'. Each template provides written instructions, useful information and specific configurable options relating to the template. The following templates are now available in FreeStyle:

  • Blank
  • Static image
  • Splash
  • Jumbotron
  • Hashtag
  • Call To Action
  • BX Slider
  • Google Maps
  • Open Street Maps
  • Dailymotion Video
  • HTML5 Video
  • Kickstarter Video
  • TED Video
  • Vimeo Video
  • Vine Video
  • YouTube Video

It's pretty amazing to think that one stack can do all of this (and more)! But from the outset, our goal with FreeStyle 2 has been to deliver a smart stack that gives ThemeFlood theme users incredible power and flexibility. One stack that can save both time and money.

Examples

Some examples of the FreeStyle stack are shown below. These have been placed inside UsefulStack stack elements, with a maximum width of 1000px applied and a 5% bottom margin. More FreeStyle templates may get added to the FreeStyle stack over time. Resize this page to see the responsive scaling take effect.
 
 

Static image

A simple static image. Ideal for photographs, artwork and other illustrations.
Banner 1

Splash

A combination of a static image and some heading content.
Banner 1
A catchy subheading goes here like this

Call To Action

Display a ghosted-style button over a static image, to create a powerful 'call to action' unit above the page fold.

Hashtag

Static image with large responsive text displayed. Combine with the FontStack for embedded web fonts. In this example, Oswald was used
FreeStyle
#HASHTAG

Jumbotron

A static image and two blocks of written content
Banner 1

Jumbotron Title

In this area you can put some content about the products or services you provide. The idea is to get the attention of readers.
Put additional written content or a large icon / logo image here on this side.

BX Slider

A set of images cycling within a slideshow.
    Banner 1 Banner 2 Banner 3 Banner 4

Open Street Map

Easy embedding of Open Street Map mapping.

Kickstarter Video

Embed Kickstarter campaign video content within a FreeStyle banner.

YouTube Video

Create banners consisting of a YouTube video. Both Flash and HTML5 video content is supported.

Overlays

Overlays are new in version 2 of the FreeStyle stack. These let you display a transparent (or semi-transparent) block of content over your banner images or video. This content could comprise of links, social networking icons, caption content or quotes from clients. The overlay option aims to emulate the 'Banner Content Box' options already found in some themes.

Setup

Simply drag and drop the FreeStyle stack into a Stacks page. Follow the onscreen instructions. Choose a template from the drop-down menu in the stack settings and then configure your banner however you want it. Some templates (like BX Slider) have more configurable options than others. Also you may find that stacks you drag and drop into FreeStyle (like columns, text or images) can have styling applied as normal.

Print support

Static images and banners will print more-or-less the same as they're shown on-screen, in most web browsers. Other content types like maps and video typically don't print. You can stop FreeStyle banners printing by using this custom CSS code:

@media print {
.freeStyleWrapper {
display: none !important;
}
}

Custom CSS code can either go in the RapidWeaver Page Inspector (within the custom CSS box) or you can open the theme contents and place it in the custom.css file (which will apply the code automatically to all pages using the theme).


Using FreeStyle in non-ThemeFlood RapidWeaver themes

FreeStyle was originally designed and developed to be used in the excellent RapidWeaver themes available from ThemeFlood, which have supported FreeStyle banners for a while. However it’s possible to use the FreeStyle stack in some RapidWeaver themes by other developers. If your theme is not advertised as having support for FreeStyle, you will need to uncheck the Embed in FreeStyle option, and use another method (like ExtraContent or Global Content) to try and place the FreeStyle stack in a theme header or banner. Contact the theme developer if in doubt.
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.
Bookmark or share this page
Baidu 百度
Blogger
Delicious
Digg
Facebook
Google+
LinkedIn
LiveJournal
MySpace
Одноклассники
Reddit
Renren 人人网
StumbleUpon
Tumblr
Twitter
ВКонтакте
Weibo 微博
XING
Contact Us
Email This Page
Print This Page
PS: This bookmarking and sharing popup is powered using our brilliant SocialPopup stack!

Cookies

Like a lot of websites, Stacks4Stacks uses cookies to help enhance your browsing experience and handle things like purchases. We take your privacy seriously, and welcome you to freely opt-out of nonessential cookies at any time by reviewing your preferences on this page.