blog-tutorial-post-template

Tutorials

Setup

1. Add the Page Flux stack to any part of your stacks page and it will automatically be enabled for that page.

2. Adjust the options in the settings panel till you get the animation and colors you want to use. While in edit mode, Page Flux will show examples of the selected in and out animations as well as display the currently selected loader and styles. Selecting a new animation option will cause the examples to reanimate, giving you a general idea of what the animations will look like.

3. Add a single Page Flux to each of your websites pages to ensure the animation is fluid between all pages.

Importing Page Flux into a non-stacks page

You can add Page Flux to non-stacks pages by importing it using the PlusKit plugin.

1. Add the PlusKit plugin to your RapidWeaver project. This will allow you to import Stack pages into non-stack pages.

add pluskit

2. Now you will need to add a new stacks page to import into your preferred non-stacks page.

add new stacks page

3. Give a unique title to this new stacks page, in this example we will be simply calling it “Page Flux”.

page flux page title

4. Add the Page Flux stack to this blank stacks page and style it how you would like it to animate. Be sure to open the Page Inspector > General Settings and disable “Show in navigation” so that this page does not show up on your site as it’s own standalone page.

disable show in navigation

5. Navigate to the non-stacks page you wish to import Page Flux into and open the Page Inspector > Sidebar. Add the code below into the sidebar and replace “PageNameHere” with the title you created in step 3.

@import((PageNameHere))

For our example the import code would be “@import((Page Flux))”. Note: The page name is case and space sensitive.

 

 

import page flux

 

6. Highlight the  import code and select “Ignore Formatting” from the “Format” dropdown menu.

ignore formatting

Options

Animation Settings

In Animation – Sets how the page will animate in when it is loaded.

In Duration – Controls the speed of the In Animation.

Out Animation – Sets how the page will animate out when a new page is loading in.

Out Duration – Controls the speed of the Out Animation.

Use Overlay Animations – Enable this option to replace the animation in and out options with overlay animations. Note: If using Overlay animations it is recommended that you use them in every page of your website. If one page does not have the overlay the effect can be lost.

Loading Settings

Loader  – Choose an loading icon animation. You can also use a custom image that display while the page is loading.

Size – Controls the size of the loader

Speed – Sets the speed at which the loader rotates or animates.

Override Theme Body Color – Enable this option to set the color of the background. This will keep the background from flashing white in-between page loads.

 

RapidWeaver Stack Tutorials

RapidWeaver Theme Tutorials

RapidWeaver Project Documentation

Tutorials and documentation for all 1LD Project files can be found at the link below.

See Documentation

Get the power of a framework, for the price of a theme, in the convenience of a prebuilt RapidWeaver project file

Blog

Movable Windows

Move beyond the confines of static content layouts! Movable Windows allows your page visitors to effortlessly drag and reposition custom content windows anywhere in the browser viewport. Windows can be minimized to free up space and stay fixed to the browser viewport so they are always accessible.

Resize & Minimize

Windows can be resized to take up more or less space, or maximized to fill the entire screen. But that’s not all – these windows are like handy sidekicks, always ready to assist. Need quick reference? No problem! Windows can be minimized when not in use, saving precious screen space for what really matters – your page content.

Inline

Open windows stay fixed on screen so they are always accessible. Minimized windows have three modes to choose from. “Inline” keeps it in line with other content, “Fixed” is always on screen, and “Draggable” lets you move it around while minimized.

Customizable

It’s not just about functionality; it’s about style too. Customize your windows by size, position, and color. Add in text, images, forms, links – you name it! Want a little more flair? Allow window resizing, choose whether they start minimized or open, change the toggle icon, or hide the window title when minimized.

Check it out!

 

 

© 2011 One Little Designer, 1 Little Designer (1LD)

RapidWeaver is a trademark of Realmac Software