Doobox Stacks: Align through Grid
Align
The most intuitive way to align text and images responsively.
This javascript free stack, makes it possible for you to horizontally align your images and text in a responsive way, based on the current width of the device screen. With two separate modes for images, and text. Apart from the responsive alignment options the stack affords you, it is exactly the same to use as the default image, and the default text stack that ships with the Stacks plugin.
New : You can now drop any other stack inside Align, to responsively align its contents. Note, we can not guarantee this feature will work with every stack in existence, as some stacks will not allow a parent to override their own alignment settings.
Anchor
Scroll to anchor sections in this or any other Stacks page in your website.
You can create anchor locations on your page that are scrolled to when a link is clicked.
You can also scroll to anchor locations on another page when a link is clicked.
This is a multi mode stack, that contains everything you need to create both the page anchors and the links to scroll to them when clicked.
Bellboy (May not Work - Doesn't work in demo page)
Bell Boy will take your visitors back to the top of your page at any time. He can if you wish entertain them on the way.
So you have a webpage that is quite long from top to bottom, and want to offer the user a way to effortlessly get back to the top at any time. Bell Boy is always on hand to do just that.
Bell boy can optionally entertain your visitor during the journey back to the page top. The music and arrival bell are both controlled by a single on off setting.
The Bell boy has many different presentation styles built in to choose from (check out the settings section below for all the options).
Boom (Missing)
Button Press 2
These power filled buttons are all about speed, responsiveness, and subtle stylish designs.
Built with absolute simplicity of use firmly in mind. It could not be easier or faster to create website buttons.
- There are four carefully crafted button styles, are both subtle in design and bang on trend.
- Buttons can be set to realign in the parent container at different device sizes.
- You see a split view in edit mode shows both normal and hover state.
- Each button has 4 preset sizes to aid deployment speed and ease.
- This is a javascript free stack, and only the required optimised CSS exported for a minimum footprint.
Cocco
Display syntax highlighted code snippets directly in your page.
Overview: Cocco is designed for those that wish to display code snippets on there webpages with syntax highlighting. Cocco provides a quick and easy way of highlighting source code passages in HTML documents, without the need to first encode your source code.
Comment (with Facebook)
This is the one and only responsive comments stack harnessing the power of the social media giant Facebook.
Overview: When someone comments in your stack, not only does the comment display on your page, it is also displayed on the commenter's Facebook page. Their friends will all see a post in their Facebook feed saying "[Their Name] just commented on a link" and a link to your webpage is displayed together with an image grabbed from your page. Their comment has the potential to go viral in no time at all with this system.
Compare
Compare after and before images on the fly. Info Link
Compare is a fully responsive, interactive, A / B image comparison stack.
You can display pairs of images, of the before and after type, for example, before and after Photoshop retouching, or before and after a home remodelling project. Anything really. If you want to show differences between two images, this is a great interactive way to present that to your visitor.
The stack will accept images of any size or aspect ratio. The only prerequisite is that both images have been made equal size.
The stack is filly responsive, and works equally as well where ever you place it, at any screen size. It's nice and simple to use, with a well thought out user interface in Stacks edit mode, with just enough options to make the stack fit into your page design, offering the ability to colour the various elements of the presentation to your taste.
Count Up
Display an animated number, counting from zero to anything. The stack is simply unmissable to the visitor.
A couple of simple examples how how you might use the stack below. How and where you place the number is entirely up to you. You can also optionally add a pre and post text, inline before and after the number.
Dealer
Present random images from a remote folder of images. Super simple to setup, with no special image naming required. You simply link the stack to any image in a folder on your server containing a selection of images.
Dribbble
Finally a stack to display your latest Dribbble shots on your web page.
Overview: Built with a subtle default style, and discrete pagination. This stack is able to show up to 30 shots at any given time, and load further shots via a pagination option, all without reloading the page.
There are a multitude of options for the stacks behaviour. You can show an overlay on hover, containing optional shot info. On click, you can show the larger version of the shot, or direct the user to that shot on the Dribbble website. (All optional).
Every aspect of the Thumbnail gallery can be styled to fit perfectly into your own webpage design.
Eternity 2
The second generation of the legendary background image wrangler.
Overview: Eternity allows you to add background images being content in the stack, in unique ways. You have enormous control over the backgrounds, while the settings are still simple and intuitive.
You may add any type of content inside the stack, and it will never bleed out or be cropped, at any screen size. Eternity gives you a heap of options to control the height of the stack, but content rules, and vertical space will always be provided for that content on awkward screen sizes.
Explicit
Generates customizeable Explicit Software Ahead Warning Info Box. Allows branding and boxes to click on to proceed or stop. Big WARNING dialog box/
FAQ2 - Accordian
An accordion type stack with a responsive ace up the sleeve. We use this stack on most pages in the Doobox website.
You have probably already seen and interacted with FAQ 2 stack. We use it widely throughout the Doobox website, to condense information into a smaller space. Every "FAQ" section, and "Stacks settings" section on the stacks demo pages employ FAQ 2 to present the information.
Final Word 2
Final word allows you to present a final message, offer, or any other content you choose, to your visitor just at the moment they are about to leave your page for good.
Be sure you made that point you really don't want anyone to miss.
The modal containing your final word, is triggered by your visitor moving their mouse pointer out of the area containing your page. Your visitor must move the mouse pointer out of the area that contains your page in order to leave your website, thus triggering your final word to catch their attention and hopefully re-engage them.
Fit My Video
Embed videos from your favourite providers, and rest assured, they will always fit their space. A beautifully simple way to add responsive video to your page.
Gif Player
Loads animated Gif images only on demand.
You may be aware, you can now add animated GIF images directly to your pages like any other image. But animated GIF's that load automatically at page load time have a few downsides. They are much larger than regular images so slow the page load time down dramatically. Also having a lot of GIF's animating at the same time after the page has loaded can be very distracting for your visitor.
Gradient
Gradient is limitless in its configuration. How you display your gradient background is limited only by your imagination.
Gradient creates gradient colour backgrounds inside its self. You can place any content inside a gradient stack, so Gradient stack is to all intents and purposes behaving exactly like a default 1 column stack in use. The header section above is created with Gradient stack, and you can see lots of other examples below.
Create gradients with up to 4 stops of colour, any of which may be self transparent revealing what ever is behind the stack.
You can choose to add an image background into the stack, and have that image partially revealed through the portions of the gradient you set to be semi transparent.
Grid
Our proprietary grid system has extremely concise settings, yet is still the most advanced grid layout system to date.
We made it as fast as possible to set-up, by simply adding 4 dropdown select controls in the settings, one for each device size. Simply select the number of columns you’d like the grid to have on each device size.