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

Live Search 2

Live Search 2 has been updated with new features, improvements, and important bug fixes – all designed to make your site’s search experience even faster and more precise.

This update is free and automatic for all existing customers.

Don’t own it yet? Now’s the perfect time to jump in — Live Search 2 is 30% off for a limited time! No code needed — your discount is automatically applied at checkout.

New Features:

  • Added support for exact match searches using quotation marks around parts of a search phrase.
  • New option to show a “Clear Input” button.
  • Added Replace Character feature.
  • Now supports two separately defined search bars on the same page.
  • New option to adjust z-index.

Improvements:

  • Index file generation now detects and ignores duplicate content, such as text found in every page header and footer.
  • If any pages are missing from the index file, they will now still be searched dynamically.
  • Index file data is now compressed to reduce file size.
  • Pages at https://website/folder/index.(php|html) and https://website/folder/ are now treated as duplicates and will not be indexed separately.
  • Search results container height now only stays fixed during pagination — it will shrink dynamically for new searches.
  • When searching custom sitemaps, the default sitemap will now be ignored.
  • The popout search results container will now automatically hide when the search input is empty.

Bug Fixes:

  • Fixed an issue that prevented custom text/language settings from applying correctly.
  • Fixed a bug where result descriptions could fail to display a local section title.
  • Fixed a bug that could trigger an error if suggestions were enabled but the stack was not published to the page.
  • Prevents form submission before the page is fully loaded, avoiding unwanted page refreshes on slow-loading pages. A loading indicator is shown until the page is ready.

Check it out in action!

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

RapidWeaver is a trademark of Realmac Software