Your aim: to present your business, or your products. Feature cards with snippets of information about your company, your employees, or the services you offer. Feature Section is a great way to do just that in a professional manner –
An animated (or not) grid of cards that present your product with an Icon, or an image – an employees portrait, for instance –above each card (or not) and a short, informative text.
Each Feature Card has a container for a headline, plus a container for your text. As you can see in the example on the left, you can also add HTML to the text section – the image in the example was positioned with a link to a warehoused image.
So how does it come together?
When you drop a Feature Section stack onto your page, you'll be presented with a grey card, a centred smiley icon, a Feature Title and a text. In preview mode both the card and the icon already change their colours when hovered.
Format the first card by leaving the Feature Section stack active and altering the background colour, the icon colour and the Icon position. Then change the background and Icon colours for the hovered state.
Once you have your first card formatted, you can drag copy it to duplicate it, or add a fresh card by clicking the + child button; then decide how many columns your grid should have on each viewport. You can then set about adding hover animations to your cards – if you wish.
The settings within the main Feature Section stack are global settings that determine the appearance of all the cards within the grid.
The Feature Card stack simply has settings for the icon, or inset thumbnail image and has settings for a link.
Max Width – Determines the max width of the grid
Card Alignment – Defines how the cards are aligned. Top, Centred, Bottom, Stretch. With 'Stretch' each of the cards in a row has the same height
Desktop Cols; Tablet Cols; Mobile Cols – The number of columns to be displayed below each breakpoint
Gutters – Horizontal, Vertical
Background – None, Colour, Gradient, Image
Borders – Off, On
Shadow – Off, On
Alignment – Left, Centre, Right
Hide Inner Icon
Text Alignment – Left, Centre, Right
Title Font – 13 standard fonts plus Custom
Title Size, Title Spacing, Title Colour
Content formatting as above
Hover Scale – 0—1.5
Rotate (Icon) – -360—360º
Translate – -50—50px (distance the card moves up/down when hovered)
Hover BG Ripple – Card colour change on hover (default)
Ripple Origin – Top Left, Top Right, Centre, Bottom Left, Bottom Right
Ripple Colour – Card colour on hover
Hover Icon Background
Hover Icon Colour
Hover Title – default
Hover Title Colour
Hover Text – default
Hover Text Colour
My personal opinion: Because Feature Section has so many customisable options, it is a great way to present product details, short biographies, or company details. Each card can be linked to another page, or page section and make Feature Section an extremely versatile stack. I like it!
If you need inspiration, open up the demo file that comes with the stacks – it has numerous examples.
Jeroen (Marathia's Stacks) also became frustrated when formatting single lines of text for responsive sites. The result of his frustration: OneLiner.
OneLiner is a stack that allows you to set the width of a line of text to appear just as you want it on any screen. OneLiner's default setting will allow your text to fill its container width, however, it also has settings that allow you to define exactly which percentage of the container your text should fill. Example: Three single lines of text.
Now if you analyse at this text, you're going to notice that the second and third lines of text are going to appear much too small on a mobile phone to be legible.
For this reason OneLiner allows you to override its' settings above, or below a set breakpoint and define a fixed text size.
In this second example, I have set OneLiner to display the second line of text at 18px on mobile phones and the third line at 16px.
Instead of shrinking to fill the container width, the text now displays at a set size that is legible. Line-breaks appear within the text as soon as a word no longer fits on a line.
OneLiner also has further useful settings. Obviously, you can set h1–h6 and paragraph tags for your text, but you can also override the text formatting entirely by setting the font, font colour and alignment.
Tag – None (div) – (default) h1– h6
Set Custom Text Style – Bold, Italic, Underline
Align – Left, Centre, Right
Set Spacing – Letter, Word, Line
Font Family – Theme Default, Web Safe Fonts, Custom
Capitalise – Normal, All Upper Case, Initial Caps
Size Correction – Text width in %
Disable – Small Screen, Large Screen
Max Screen Width – Breakpoint
Align – Justification above/below disabled settings
Fixed Font Size – Above/Below disabled settings
Content – Custom, Site Slogan, Site Title, Site Footer
OneLiner is a cool stack that solves the frustrating problem of headline sizes elegantly and quickly.
Loaderz is a completely different kettle of fish. It is simple to use, flexible, versatile and comes with 10 different animated loaders.
Flexible? A page loader appears when a page is loading and disappears when it's ready for viewing, right?
Well Loaderz is different. It can, of course, be set up to do exactly what you'd expect it to do, i.e. the above. But what if you've got a video banner on the page that takes an extra second or two to actually play the video? With Loaderz, you can set the length of time that the loading animation should be displayed.
Or let's say that you have a video on your page that's set to display when the page is scrolled down, or a stack that connects with a database and takes some time to load…
… drop Loaderz onto your page, drop your content into it and Loaderz will display an animation until the content has loaded.
Testing – Load Forever (useful for the setup process)
Hide On – Page Load, After Set Time
Position – Fixed, Inline (Wraps Content)
Z-Index – Couldn't count the default number of 0s!
Background – Off, Colour, Gradient, Image
Show Loading Text
Loader Type – 10 animation options – the screenshot above displays 'Android Material' and 'Rotating Circle With Image' You can add your own image, or logo.
Size – Loader Height in px
Max Width – Loader Width in %
Colours – 1,2 and 3
Percentage – Percentage Of Inner Circle
Loaderz is a great option for both page and content loader animations. It is highly configurable and you're likely to see it on one of my next sites.
This year's conference was as big a success as that from 2016, with many compelling talks on subjects that will interest all RapidWeavers. Don't worry if, like myself, you were unable to visit the conference, you can still get access to the sessions by visiting the conference website.
I just took a look at the 2017 videos and I must say that I'm glad I did. They present a thousand kilos• of valuable information.
So let's take a look at what you'll be getting if you subscribe…
I was a little surprised that the videos aren't presented in chronological order, but that doesn't reduce their value. Here, in the order that they took place, is what I saw.
Creative Insights With Nick Cates. Nick has some of the cleanest RW themes on the market and during this session he explains how he goes about designing a website and why his sites are so effective. The key to a great site, as we all know, is its presentation and Nick explains how to grab (and hold) a visitors attention.
Of course, Nick couldn't get through the session without plugging Cartloom and used it for many examples, but hey! The Cartloom site is a great, effective site.
Nick also demonstrates three other sites and explains in detail why they are presented the way they are. Watch and learn.
Stacks: Novice To Pro With Isaiah Carew. You work with Isaiah's Stacks regularly, but do you really know how to get the most out of them. On the forums, we often hear how slow RW is. In this session Isaiah demonstrates what is slowing you down, why it happens and – most importantly – how to cure the problem. I assure you that I've already begun to follow his advice and even JW got to learn something new! Watch and learn.
A To Z Of Building Forms With Joe Workman. Joe's session is aimed primarily at Foundation users and he explains in detail how to build effective forms. I've observed myself, that a number of Foundation users don't really lay their forms out, but simply drag the form fields one below the other. Joe not only addresses this shortcoming, but then goes on to explain each of the form stacks in detail. And at the end of the session, there's a 'Geheimtip' a secret tip just for the conference visitors. Watch and learn.
SEO And Meta Data With Brett Carmichael. Brett begins his session by explaining the ins and outs of SSL and just how it will affect all Weavers in the very near future. He then goes on to give you detailed instructions for adding Meta Data to your site. Learn how to leverage the power of not only Google, Yahoo, Bing etc. but also Facebook, Twitter and LinkedIn. If you're not an SEO expert, get ready to take notes and take screenshots of this session. Watch and learn.
Artful Web Design With Elizabeth Martinez. If you regularly visit the Weaver's Space, or take part in the weekly hangouts, you'll have encountered Elizabeth. If you've ever followed the links to the websites that she builds, you'll have been struck by how beautifully designed they are. Elizabeth's websites really are works of art. But not only do they look great, they are also extremely functional. Follow Elizabeth's session and learn the thought process behind her sites. Watch and learn.
Modern Web Imagery With Greg Barchard. We all know Greg from Chillidog. Chillidog supplies Weavers with Plugins, Stacks and hosting that is aimed especially at RW sites. Greg is also a great source of information for all things regarding servers. Specifically IP Servers. Probably the one thing that slows down the delivery of our websites is image content. Greg takes a look at how to reduce image size and how to deliver your images faster, he also previews a new stack. Watch and learn.
Design Every Element With Marten Claridge. We all know Marten. He provides Weavers with creative stacks and is the man behind StackCentral – a list of all stacks and stack developers – the place to go, if you're looking for something specific. Marten is also a gifted web designer. During his session Marten explains why the attention to detail is so important. The session is slow to take off, because Marten actually builds a complete webpage with you. But hang in there – the resulting page is amazing! Watch and learn.
Forms With MachForms With Dave Hidding. Dave's is a very specialised topic. Forms. Intricate forms. Weavers have a number of options for creating detailed forms, but sometimes those options are just not sufficient. If you need something more complicated, then you'll need an external solution. Dave demonstrates how to use and implement MachForms. Watch and learn.
Building an Online Course With Mathew Mitchell. Mathew's is also a very specialised session. During the session Mathew explains which applications he uses for his educational web content and how he makes his sites available the specific students taking part in the courses. He also goes into detail about how he structures his courses and – most importantly – why he structures them the way he does. Watch and learn.
Common Sense & Pragmatism Andrew Tavernor. Andrew is probably the most pragmatic person that I know. Do you design your website with your user in mind, or do you just open up RW and begin piecing pages together? Andrew's session helps us to understand our visitors, how they approach a web interface (or life in general) and how to cater for said users. If you really want to target your audience, get ready to take notes! Watch and learn.
Managing Project Resources With Paul Russam. Paul's websites will always grab your attention and this is because Paul pays great attention to detail – not only to his websites, but also to his data structure. I have seen a great number of computer users that fill their desktop with files. Some even use the waste basket to store files. Paul gives just as much attention to the structure of his RW projects as he does to their presentation. In this session he demonstrates the tools he uses to manage a project so that each single file may easily be found. Watch and learn.
Professional Client's Areas With Jon Hawkins. Besides its developer, Jon is possibly the person that knows Total CMS better than anyone else on this planet. CMS isn't just about editing a web page's content, it's also about content accessibility. In this session Jon demonstrates how he creates the user interfaces that allow his clients to interact with their sites. Get ready to be amazed. Watch and learn.
Stacks: Pro to Developer With Isaiah Carew. At some point every Weaver has asked her/himself if it's possible to build the stack that does exactly what she/he wants. In this session Isaiah demonstrates just how easy it could be for those that have an even limited understanding of CSS/HTML. Isaiah takes apart an existing stack for us and explains each of its components. He then goes on to change the stack's function and turn it into a completely new stack. Watch and learn.
Email Design With Joe Workman. For years people have wanted to design email newsletters with RapidWeaver. Joe workman's suite of Email stacks now makes the creation of newsletters within RW possible. In this session, Joe takes a look at all of the Email stacks and gives numerous valuable tips for creating the perfect email with your favourite application. A Specialised Topic? Only suitable for Business Mails? Absolutely not! What about those emails that you send out to family and friends at Christmas and Thanksgiving, Dhu'l-Hijjah, or Songkran, etc.? Watch and learn.
Each of the video sessions is around 45 minutes in length and each is guaranteed to give you valuable tips that will either speed up your work process within RapidWeaver, help get your message across to your website visitors more effectively, or give you deeper understanding of what's going on (or what should be going on) behind the scenes.
You've prepared an article that you don't wish to appear until August 25th, or you have a special promotion that is only available between September and November and only during business hours. Or maybe you have student's examination results, or study material that should only be available to a specific student, or group of students…
Advanced Publisher from Stacks4Stacks is a suite of five PHP based stacks which will allow you to publish time sensitive content at specific times, or when a URL query is fulfilled.
Because AP is PHP based your content will never be loaded unnecessarily. It will never appear within your code until it is requested. This means that advanced users and hackers can not view your unpublished content until the defined time range has been reached, or the specific URL query has been requested.
The inclusion of the AP Secret stack gives you the option of supplying unique content to unique visitors. You can also create your own tabbed content using AP Secret, to ensure that your pages load faster.
A single Advanced Publisher Base stack must be present on the page containing your AP content, preferably above the other AP stacks. The AP Base stack allows you to set the time zone that your scheduled data will appear in. The time zone can be set to 'Webserver', 'Predefined' or 'Custom'. Predefined gives you a choice of locations from each time zone around the world – including the half and quarter hour steps of some locations. If you choose custom, you can enter the zone manually, e.g. Asia/Kathmandu.
The AP Base Stack can refresh the pages content every n minutes and also has options to display or hide the preview in RapidWeaver and to display the publishing details so that there will be no surprises if you'd forgotten that a previous promotion, or article was on your page. It's interesting to note that the publishing details also include the server's PHP version.
The AP Days Stack is for stacks that you wish to be displayed on Mondays, Wednesdays and Fridays; Mondays to Fridays, or Fridays to Mondays, for instance. The settings panel contains checkboxes for the days of the week that content is to be published on.
AP Days also has a choice of settings to publish content on Even Days, Odd Days, the First Day of the Month, Last Day of the Month, Month Days (with settings for up to four separate days), Particular Month Days (with settings for the range of days) and, as with all of the Advanced Publisher Content stacks, an option to display alternative content outside of the publishing dates.
The AP Time Stack supplies the options for your publishing timeframe. This can be set to
Full Date. Full Date can be set to Display: Not Until (Start Date), Between and Only Before, With a Date and Time Range for each of those settings.
Repeatable Date has the same settings.
Hours and Minutes also has the above settings, but is restricted to a Time Range
Months also shares the above settings, but is restricted to months.
The AP Weeks Stack will allow you to publish content during different weeks. You may choose Odd Weeks, Even Weeks, Week(s) with options for up to four different weeks, Weeks (Not Until), Weeks (Between) and Weeks (Not Before).
The AP Secret Stack will allow you to publish stacks that are only accessible when a URL query is fulfilled. This means that you may either add a specific link to your page to display your hidden content, or you could give your user a page link to access specific content within your page.
The stack settings allow you to define a Secret Key and a Secret Value. Only when both are contained within the URL e.g. ["?secret_key=secret_value"], will your content be revealed.
Note: AP stacks can be nested to further refine your publishing dates. Hence, if you wish your content to appear during weeks 32 and 33, but only between the hours of 9–5, you can carefully nest your AP stacks to fulfil this wish.
Advanced Publisher 4 has been greatly improved over the previous version. Everything that was missing in version 3 has now been added. As Will himself says: It's like having a personal assistant for your website!
Links to the developers ® All trademarks cited on this page are the property of their respective owners.
Subscribe to Ninja News
or ask a question
Yes, I would like to receive your monthly newsletter.
No thanks, I’m good for now. I have a different issue.
[1-1], thanks for subscribing. If you made a further request, I’ll get back to you – typically within 24 hrs.
[1-1], thanks for contacting me. I’ll review your mail, and get back to you – typically within 24 hrs.
Thanks again for contacting us. Your request was successfully submitted.
Looking for Inspiration?
Looking for Inspiration for a new site, or need a CTA
The Latest & Greatest
Do you have a question regarding RapidWeaver?
Would you like help with your new project?
Would you like us to build your new RapidWeaver website?
265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.
We do not harvest or sell personal information.
© rjh web design 2010—17
Powered by rjh-design
Don’t miss a post!
Sign up for our monthly newsletter.
A monthly digest of all the latest updates from our RapidWeaver blog, keeping you up to date with the hottest new stacks and themes.