%[if %("%id=append%" == "true")% ]%
We decided to listen to what our theme customers were saying. We took into consideration the things people wanted to do with theme banners and headers in RapidWeaver. Time was spent researching emerging trends in web design. As a result of this, the 'FreeStyle' banner concept was conceived. FreeStyle has solved a great many problems and given RapidWeaver users (both novice and expert users) options to build beautiful banners that simply were not possible a few years ago.
Basically FreeStyle is a branch off the opensource ExtraContent project, but also borrows a few ideologies from the Concrete5 publishing platform. FreeStyle is nothing more than an empty divisional container in the theme index.html file. With the correct code or stack, you can effortlessly embed a broad range of different content into the theme banner container. FreeStyle does some important tasks behind the scenes for you, like ensuring content is responsive and search engine optimised.
This stack serves as an optional 'FreeStyle enabler'. It can be used to configure FreeStyle banner containers in a compatible theme (any theme advertised as having support for FreeStyle). This FreeStyle stack can do all sorts of wonderful things, like display static images, a slideshow or even video content. The possibilities are almost endless. As the name suggests, 'FreeStyle' gives you the freedom to create eye-catching banners of any style you like.
Although mostly intended for use in ThemeFlood RapidWeaver themes, it's certainly feasible (as proven in the past) to reuse this same stack in non-FreeStyle themes from other companies. To do so, just uncheck the Embed In FreeStyle setting, and place this stack in the normal page flow or within the ExtraContent stack. However please note that we do not provide support for RapidWeaver addons from other companies and therefore cannot guarantee compatibility or suitability of this stack beyond ThemeFlood themes.
Start building RapidWeaver theme banners the easier and smarter way!
Drag and drop stacks into the placeholder shown above. Supports styled text, images, video, columns, HTML code and most other basic stack elements; including things like the ImageCaption, HoverBox and ImageKiosk stacks (sold separately). Experimental support is provided for PlusKit @import and Joe Workman Global Content. Embed code for other things like SoundCloud can also go in here, within HTML stacks.
Drag and drop an image from your computer into the placeholder shown above (denoted with the downward-pointing arrow). Double-click the image to view its properties (switch off any constrained sizing and give the image a suitable ALT attribute). Search engines like nice ALT attributes that give a brief description about the image being displayed. You can change the image file name too if you prefer.
If you prefer to source an image from another location (like an image warehouse), type a standard HTML image tag in the HTML code box. Here are some examples of typical HTML image tags you can use in RapidWeaver:
A standard HTML image tag calling an image from another website via a URL:
<img src="http://example.com/images/ice-cream.jpg" alt="Ice Cream">
Using an image that has been added to your RapidWeaver project as a resource:
<img src='%resource(ice-cream.jpg)%' alt='Ice Cream'/>
Using an image stored in the theme contents:
<img src='%pathto(images/editable_images/1.jpg)%' alt='Banner 1'/>
The Splash template works almost identically to the Static Image template. However in this template, an extra placeholder is provided. Into this placeholder you can drag and drop columns, text or image stacks (and other basic addon stack elements like UsefulStack). Content placed inside this new placeholder will be rendered over the top of the banner image. This enables you to build an eye-catching 'splash' container at the top of a page, featuring a vivid image and bold text.
Drag and drop an image from your computer into the placeholder shown above (denoted with the downward-pointing arrow). Double-click the image to view its properties (switch off any constrained sizing and give the image a suitable ALT attribute). Search engines like nice ALT attributes that give a brief description about the image being displayed. You can change the image file name too if you prefer.
In the stack settings, you can adjust something called the 'breakpoint'. What this does is to dissolve the placeholder on smaller screens and render the content underneath the banner image. This solves the problem of text or graphics breaking outside of the banner region and looking messy. It guarantees that people viewing your website on a smaller screen can still see all basic content in your FreeStyle banner.
The Splash template works almost identically to the Static Image template. However in this template, an extra placeholder is provided. Into this placeholder you can drag and drop columns, text or image stacks (and other basic addon stack elements like UsefulStack). Content placed inside this new placeholder will be rendered over the top of the banner image. This enables you to build an eye-catching 'splash' container at the top of a page, featuring a vivid image and bold text.
If you prefer to source an image from another location (like an image warehouse), type a standard HTML image tag in the HTML code box. Here are some examples of typical HTML image tags you can use in RapidWeaver:
A standard HTML image tag calling an image from another website via a URL:
<img src="http://example.com/images/ice-cream.jpg" alt="Ice Cream">
Using an image that has been added to your RapidWeaver project as a resource:
<img src='%resource(ice-cream.jpg)%' alt='Ice Cream'/>
Using an image stored in the theme contents:
<img src='%pathto(images/editable_images/1.jpg)%' alt='Banner 1'/>
In the stack settings, you can adjust something called the 'breakpoint'. What this does is to dissolve the placeholder on smaller screens and render the content underneath the banner image. This solves the problem of text or graphics breaking outside of the banner region and looking messy. It guarantees that people viewing your website on a smaller screen can still see all basic content in your FreeStyle banner.
The Jumbotron template follows-on from the Splash template. However in this template we instead provide two blank placeholders that float over the background image. Both of these placeholders are 50% wide; one is floated on the left and the other floats on the right. This FreeStyle template is ideal for creating typical 'app' headers, which often feature a bold block of text on the left and a vivid graphic or icon on the right.
Drag and drop an image from your computer into the placeholder shown above (denoted with the downward-pointing arrow). Double-click the image to view its properties (switch off any constrained sizing and give the image a suitable ALT attribute). Search engines like nice ALT attributes that give a brief description about the image being displayed. You can change the image file name too if you prefer.
The Jumbotron template follows-on from the Splash template. However in this template we instead provide two blank placeholders that float over the background image. Both of these placeholders are 50% wide; one is floated on the left and the other floats on the right. This FreeStyle template is ideal for creating typical 'app' headers, which often feature a bold block of text on the left and a vivid graphic or icon on the right.
If you prefer to source an image from another location (like an image warehouse), type a standard HTML image tag in the HTML code box. Here are some examples of typical HTML image tags you can use in RapidWeaver:
A standard HTML image tag calling an image from another website via a URL:
<img src="http://example.com/images/ice-cream.jpg" alt="Ice Cream">
Using an image that has been added to your RapidWeaver project as a resource:
<img src='%resource(ice-cream.jpg)%' alt='Ice Cream'/>
Using an image stored in the theme contents:
<img src='%pathto(images/editable_images/1.jpg)%' alt='Banner 1'/>
In the stack settings, you can adjust something called the 'breakpoint'. What this does is to dissolve the columns on smaller screens and render the content underneath the banner image. This solves the problem of text or graphics breaking outside of the banner region and looking messy. It guarantees that people viewing your website on a smaller screen can still see all basic content in your FreeStyle banner.
BX Slider is an opensource slideshow plugin, released freely under the MIT license for personal and commercial use. This slider is fully responsive and has lots of customisable options for RapidWeaver users. On touch devices, users can navigate slides using finger swipe gestures. BX Slider works reliably on all modern web browsers. Visit the developers website at bxslider.com for more information about the original slider plugin reused here in FreeStyle.
Right now, you have the slider set to the 'Drag And Drop' setup mode, in the settings on the right. This is good to use if you want to setup a basic image slider without needing to use any HTML code! However it can make things a little more tedious if you want to change the order of slides in future or pull in images from a warehouse (in which case HTML Code might be a better setup to use).
Using the 'Slides' setting on the right, you can adjust how many slides to display in this slider. Every time you increment the number, a new placeholder will be rendered above. From this point onwards, simply drag and drop basic stack elements into each slide, along with your content.
Note that some slider settings only work when others have been enabled or disabled. For example, the carousel only works correctly when the slider mode is changed to 'horizontal' and if Image Captions are turned on it's advisable to turn off pagers and auto controls.
BX Slider is an opensource slideshow plugin, released freely under the MIT license for personal and commercial use. This slider is fully responsive and has lots of customisable options for RapidWeaver users. On touch devices, users can navigate slides using finger swipe gestures. BX Slider works reliably on all modern web browsers. Visit the developers website at bxslider.com for more information about the original slider plugin reused here in FreeStyle.
Each slide is formed using a basic HTML list element, for greater flexibility. Don't panic if you have never used HTML code before - it is very easy! Some example code with links to 4 images is already loaded in the HTML code box above (double-click to view and edit this code). Each slide list item can contain images, links or any other basic HTML tags; or a combination of different content (like images nested inside link tags). Type each list item in the box shown above, like this:
<li><img src='http://example.com/images/pic1.jpg' alt='Picture 1' title='Title for 1' /></li>
<li><img src='http://example.com/images/pic2.jpg' alt='Picture 2' title='Title for 2' /></li>
<li><img src='http://example.com/images/pic3.jpg' alt='Picture 3' title='Title for 3' /></li>
<li><img src='http://example.com/images/pic4.jpg' alt='Picture 4' title='Title for 4' /></li>
Images can be attached to your project and referenced as RapidWeaver resources:
<li><img src='%resource(pic1.jpg)%' alt='Picture 1' title='Title for 1' /></li>
<li><img src='%resource(pic2.jpg)%' alt='Picture 2' title='Title for 2' /></li>
<li><img src='%resource(pic3.jpg)%' alt='Picture 3' title='Title for 2' /></li>
<li><img src='%resource(pic4.jpg)%' alt='Picture 4' title='Title for 4' /></li>
Or you can use example images bundled in the theme already:
<li><img src='%pathto(images/editable_images/1.jpg)%' alt='Banner 1' title='Title for 1' /></li>
<li><img src='%pathto(images/editable_images/2.jpg)%' alt='Banner 2' title='Title for 2' /></li>
<li><img src='%pathto(images/editable_images/3.jpg)%' alt='Banner 3' title='Title for 3' /></li>
<li><img src='%pathto(images/editable_images/4.jpg)%' alt='Banner 4' title='Title for 4' /></li>
Note that some slider settings only work when others have been enabled or disabled. For example, the carousel only works correctly when the slider mode is changed to 'horizontal' and if Image Captions are turned on it's advisable to turn off pagers and auto controls.
The FreeStyle stack lets you embed Google maps, and runs-off the standard embed code that Google freely provides website owners already. Maps make interesting banners, and can be used to show locations which the page may relate. The map container scales horizontally, and retains a fixed height. Follow these steps to get your map setup in FreeStyle:
*You may need to play around with the map sizing a little bit. Google has an odd way of sizing maps. Typically it has been found that the map will always retain the same height, set in the FreeStyle configurable options. However the sides of the map will crop correctly as the screen becomes narrower. Refreshing the web browser window will re-centre the map again.
The FreeStyle stack lets you embed Open Street Maps. This can be considered an opensource competitor to the Google Maps service, and some people favour Open Street Maps for having a clearer license agreement and easier usage. There is some evidence to suggest that these maps are more accurate and frequently updated too. A key advantage of using Open Street Maps over Google Maps is the ability to drag and drop a single marker pin on the map, which remains intact when the map is embedded on another website. This makes Open Street Maps ideal for highlighting specific locations, right down to street level. The map container scales horizontally, and retains a fixed height. Follow these steps to get your map setup in FreeStyle:
*You may need to play around with the map sizing a little bit. Typically it has been found that the map will always retain the same height, set in the FreeStyle configurable options. However the sides of the map will crop correctly as the screen becomes narrower. Refreshing the web browser window will re-centre the map again.
The FreeStyle stack lets you embed a Dailymotion video. Follow these steps to get your video setup in FreeStyle:
Use the HTML5 Video template for embedding audio or video content you convert and host yourself. HTML5 audio and video works in all newer web browsers, including iOS and Android. Follow these steps to get your video setup in FreeStyle:
The opening and closing <video>
tags are included for you already; you just need to provide the source tags and the links to your uploaded audio or video files. If you need help with understanding the HTML5 video code, search online. Some companies like Mozilla, HTML5-Rocks and Opera have published some brilliant information and working examples that you can follow. Providing your video in .mp4, .ogv and .webm formats greatly improves browser compatibility, because not all web browsers support MP4. FreeStyle will scale HTML5 Video and poster image responsively to fit within the banner. If you find your media is not playing back in some web browsers, make sure your MIME types are correctly set on the server hosting the files.
The FreeStyle stack lets you embed a Kickstarter video. It uses the standard Kickstarter HTML5 / Flash embed method. For best results, use the largest video size (normally 800px wide and 600px tall). Follow these steps to get your video setup in FreeStyle:
The FreeStyle stack lets you embed a TED video. It uses the URL that TED provides in the website embed code. For best results, use the largest video size (normally 853px wide and 480 tall). Follow these steps to get your video setup in FreeStyle:
Use this template to embed a 6-second long Vine video. Vine is a good choice to use for short video's that do not need to be more than 600px wide. Follow these steps to get your vine video setup in FreeStyle:
The FreeStyle stack lets you embed a Vimeo video. It uses the standard Vimeo HTML5 / Flash embed method (similar to the code provided under the share button on the Vimeo website already). Only video's that have been marked as 'public' and allow for embedment can be used in this stack. Check the video license agreement carefully. For best results, use HD video content. Follow these steps to get your video setup in FreeStyle:
The FreeStyle stack lets you embed a YouTube video. It uses the standard YouTube HTML5 / Flash embed method (similar to the code provided under the share button on the YouTube website already). Only video's that have been marked as 'public' and allow for embedment can be used in this stack. Check the video license agreement carefully. For best results, use HD video content. Follow these steps to get your video setup in FreeStyle:
The Call To Action template displays a static image with a ghosted-style button layered over the top. The button is set to display in the centre of the image; and you can adjust the button vertical alignment using the configurable settings provided. As the name suggests, this template is ideal for creating bold banners with a vivid 'call to action' button. The call to action button itself can be set as a link to another page, a shopping cart, a file download, an email subscription signup form, and many other actions.
Drag and drop an image from your computer into the placeholder shown above (denoted with the downward-pointing arrow). Double-click the image to view its properties (switch off any constrained sizing and give the image a suitable ALT attribute). Search engines like nice ALT attributes that give a brief description about the image being displayed. You can change the image file name too if you prefer.
The Call To Action template displays a static image with a ghosted-style button layered over the top. The button is set to display in the centre of the image; and you can adjust the button vertical alignment using the configurable settings provided. As the name suggests, this template is ideal for creating bold banners with a vivid 'call to action' button. The call to action button itself can be set as a link to another page, a shopping cart, a file download, an email subscription signup form, and many other actions.
If you prefer to source an image from another location (like an image warehouse), type a standard HTML image tag in the HTML code box. Here are some examples of typical HTML image tags you can use in RapidWeaver:
A standard HTML image tag calling an image from another website via a URL:
<img src="http://example.com/images/ice-cream.jpg" alt="Ice Cream">
Using an image that has been added to your RapidWeaver project as a resource:
<img src='%resource(ice-cream.jpg)%' alt='Ice Cream'/>
Using an image stored in the theme contents:
<img src='%pathto(images/editable_images/1.jpg)%' alt='Banner 1'/>
In the stack settings, you can adjust something called the 'breakpoint'. What this does is to dissolve the columns on smaller screens and render the content underneath the banner image. This solves the problem of text or graphics breaking outside of the banner region and looking messy. It guarantees that people viewing your website on a smaller screen can still see all basic content in your FreeStyle banner.
The Splash template works almost identically to the Static Image template. However in this template, an extra placeholder is provided. Into this placeholder you can drag and drop columns, text or image stacks (and other basic addon stack elements like UsefulStack). Content placed inside this new placeholder will be rendered over the top of the banner image. This enables you to build an eye-catching 'splash' container at the top of a page, featuring a vivid image and bold text.
Drag and drop an image from your computer into the placeholder shown above (denoted with the downward-pointing arrow). Double-click the image to view its properties (switch off any constrained sizing and give the image a suitable ALT attribute). Search engines like nice ALT attributes that give a brief description about the image being displayed. You can change the image file name too if you prefer.
In the stack settings, you can adjust something called the 'breakpoint'. What this does is to dissolve the placeholder on smaller screens and render the content underneath the banner image. This solves the problem of text or graphics breaking outside of the banner region and looking messy. It guarantees that people viewing your website on a smaller screen can still see all basic content in your FreeStyle banner.
The Splash template works almost identically to the Static Image template. However in this template, an extra placeholder is provided. Into this placeholder you can drag and drop columns, text or image stacks (and other basic addon stack elements like UsefulStack). Content placed inside this new placeholder will be rendered over the top of the banner image. This enables you to build an eye-catching 'splash' container at the top of a page, featuring a vivid image and bold text.
If you prefer to source an image from another location (like an image warehouse), type a standard HTML image tag in the HTML code box. Here are some examples of typical HTML image tags you can use in RapidWeaver:
A standard HTML image tag calling an image from another website via a URL:
<img src="http://example.com/images/ice-cream.jpg" alt="Ice Cream">
Using an image that has been added to your RapidWeaver project as a resource:
<img src='%resource(ice-cream.jpg)%' alt='Ice Cream'/>
Using an image stored in the theme contents:
<img src='%pathto(images/editable_images/1.jpg)%' alt='Banner 1'/>
In the stack settings, you can adjust something called the 'breakpoint'. What this does is to dissolve the placeholder on smaller screens and render the content underneath the banner image. This solves the problem of text or graphics breaking outside of the banner region and looking messy. It guarantees that people viewing your website on a smaller screen can still see all basic content in your FreeStyle banner.