Stacks Image 691

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.

The scope of the stack is endless, but we've added a few demos to this page in the shape of the sections that slice through this page, including the top section which has the full screen option switched on.

Instant download.

Version : 1.0.0

Responsive : Yes

First released : 1/9/2016

Last Updated : n/a

Stacks V 3.0 or greater.

Live demos throughout this page.

You can see a few live examples of the stack in action throughout this page, in the shape of the sections that slice right through the page, with background images. The top hero banner is also a demo of Eternity in action.

There's a host of new features in this version.

Height Presets
Height Management
Overlays
Alpha colour pickers
Automatic Vertical Align
Content Fading
Full Screen Mode
Scroll Down

All of these new features and more are documented in the stacks settings section below.

Content fade.

This section has the option to fade out the content of the stack as it leaves the top of the window when the page is scrolled. Subtle, but reenforces professionalism.

Optional height presets.

Or choose your own custom size, and or margin, padding, top above and below your content.

Stacks Image 1115
FULL SCREEN HEIGHT
Stacks Image 1120
PROPORTIONAL HEIGHT
Stacks Image 1125
ASPECT RATIO

Stacks settings.

In this section we have provided a comprehensive list of available settings, and a full description of what each of the settings does for the stack.

Stacks Image 243
Background Image
Add any image you like, to become the background of the stack here.
Mode
There are 2 modes to choose from.

1: Background is fixed
The background image will not scroll as the page scrolls. Your content will scroll with the page and appear to skim over the background image (like the demos here).

Note: IOS does not support this, so it will fall back gracefully to option 2 on an IOS device.

2: Background scrolls with page
The background image scrolls just the same as the rest of the page and it's contents.
Scaling
There are 2 options here:

1: Background covers the stack
The background image will always cover the entire stack without being distorted, regardless of screen size or aspect ratio.

2: No scaling
No scaling is applied to your image at all (best for tiling images).
Now you have extra options to:

Tile the image in X.
Tile the image in Y
Tile the image in both X and Y


Also options to:

Offset the background position in the X and Y axis independently from 0 to 100%.

So you could for example add an image of a down arrow @50px and have that tile all the way down the background in the Y axis only, and always be 10% from the left edge of the stack.
Height
There are 6 options here:

1: Custom height
You specify the height in pixels.This height will be maintained when ever the content you add allows. If your content gets taller at any screen size, then so does the stack to accommodate it.

2: Full screen height
T height from the top of the stack to the bottom of the screen, to fill the screen exactly. If your content gets taller on any type of screen like a mobile device, so does the stack to accommodate it.

3, 4, 5: Partial screen heights
Options for 1/3, 1/2, 2/3 the height of the actual screen size the stack is being displayed on. This height will be maintained when ever the content you add allows. If your content gets taller at any screen size, then so does the stack to accommodate it.

6: Aspect ratio
Aspect ratio give you another list to choose aspects such as 16:9, 4:3 etc. The aspect will be maintained when ever the content you add allows. If your content gets taller at any screen size, then so does the stack to accommodate it.
Arrow
If you have selected the full screen height option, you are given this arrow option, to display an arrow the user can click to scroll down to the main contents of the page. You also have an option to have the arrow animate or not for added user attraction.
Overlay
Often the content you add inside the stack will not really pop against the background image you have added. Selecting an overlay can really help here. There are multiple options to lighten or darken the background image, and 4 grid styles that place a fine grid overlay between your content and the image. This really makes the text pop and much more readable by the user.
Content Width
This is the maximum width the content you add can ever be, and will always be centralised horizontally within the current window.

If you wish to go full 100% width, just set this to something huge like 50,000. We are a few years of screen resolutions that large :-)
Center All Content
When selected all the contents you add to the stack will be centered horizontally.
Uses Default Padding
When selected there is some default padding applied between your content and the bounds of the stack. Deselect when nesting eternity stacks for added effects.
Content Fades As leaves Top
When selected, as the contents you have added leave the top of the page as the user scrolls, the content starts to softly fade out for added effect.
Colours
Simple colour picker for everything you need. These colour pickers will override the colours of text, and headers etc that you add into the contents of the stack.
Scroll Fix
Needed only sometimes when using full screen mode, and the arrow to scroll.

In some themes the navigation if fixed to the top of the page, and when the user clicks the arrow to scroll down, then the page scrolls to far, by the height of the themes navigation bar.

To correct, just set this to the height of the navigation bar, to counteract the issue.

Stacks edit mode.

We pay great attention to how we approach the editing interface of every stack, to ensure intuitive ease of use.

Stacks Image 297

Super simple to use in edit mode. You just add your background image in the stacks settings image drop zone. Then add anything you like to that drop zone you see in the image above, to become the contents of the stack, displayed over the top of your background image.

Stacks FAQ.

Important information that is pertinent to this stack. Please read, as there may well be something here that is essential to the deployment of this stack.

Browser support

This stack is supported in all modern browsers. Any exception to this rule will be listed below.

Safari

Chrome

Firefox

Explorer

What size images should I use?

Try to use images that are no larger than the stack will ever be displayed. The stack will accommodate any size of image, but the quick fact below is very relevant to this type of stack.

Image

Quick Fact : Adding huge images to your page will slow down your page load speed. We recommend restraint when adding very large images. Never use images larger than around 2500px. When using large images, always optimise them. We recommend JPEG Mini as a handy application for optimising (reducing the file size) of your images, thus improving your page load speed.

Known compatibility issues

There are no known compatibility issues with this stack.

Stack installation

Download.

After purchase, you will be sent an email containing a download link for the stack.
Download the zip file from the link, and unzip it to reveal the stack inside.
You should now see the stack as a logo style icon.

Normal installation.

Double click the un-zipped stack file (the one that looks like a piece of lego).
This will launch Rapidweaver if it was not already running, to automatically install the stack.
Rapidweaver handles the install process from here. Guiding you through a couple of simple clicks to complete the installation.
Re-start Rapidweaver to ensure the installation is complete.
You will now see the new stack in the Stacks plugin library.

Installation where more than one version of Rapidweaver is installed.

Sometimes if there is more than one version of Rapidweaver installed on your system, the double click method launches the wrong version of Rapidweaver to install the stack. To ensure the it is installed into the version you want to install to, you can, instead of double clicking the stack, just drag and drop it onto the appropriate Rapidweaver app icon in your dock at the bottom of your screen.

This will launch Rapidweaver if it was not already running, to automatically install the stack.
Rapidweaver handles the install process from here. Guiding you through a couple of simple clicks to complete the installation.
Re-start Rapidweaver to ensure the installation is complete.
You will now see the new stack in the Stacks plugin library.

Secure checkout.

We trust PayPal as our secure checkout provider.

Don't have a PayPal account? No worries. PayPal allows you to pay with your credit card if you do not have an account set-up.

Instant download.

Stacks Image 589

Nested Eternity Stacks

You can nest the stack inside each other to achieve backgrounds over backgrounds.
Here we just added a second Eternity stack as the content of the first, and tiled this image in the background.
Stacks Image 786
The option for creativity by nesting Eternity stacks inside each other, with partial transparent areas, is endless.

© 2018 Doobox Software. Building premium Software Mac & RapidWeaver™

Eternity 2 Stack