blog-tutorial-post-template

Tutorials

Sweep is a unique RapidWeaver theme that allows you to build one page websites. In order to make this possible we have created simple to use stacks that you can use to make the different sections of your one page website.

Note:  Sweep requires that you have the Stacks Plugin. More info about stacks here.

Adding Sweep Page Stacks

After you have created a new Stacks page. Open the Stacks library and locate the “Sweep Page” stack.

sweep in the library

Drag and drop the “Sweep Page” stack into the Stacks editor to add a new section to your one page website.

sweep page

Once the stack is in the editor you will see a section at the top that reads “Page Title”. Double click this section to change the title. This title is what will display in the navigation menu.

Screen Shot 2015-11-30 at 9.49.51 AM

 

In the “Drop stacks here” section located under the title add any other stacks (text, images, other 3rd-party stack, etc) to build and add content to your Sweep section. Then repeat these steps to add more sections to your website. Each “Sweep Page” stack has additional settings (found in the sidebar) that you can customize.

settings

 

Background Image Settings

Image Fit – Adjust how the background image fits into the browser window.

Tile Image – This option will set the background image to repeat which is useful for texture images. Note: You will want to set the “Image Fit” option to “Actual Size” if you enable this option.

Animation Settings

Animation – This option will let you choose between 17 animations that will effect how the current page will animate out when the next page is navigated to.

Easing – This  option allows you to adjust how quickly/slowly the beginning/end of the animation runs.

Speed – This sets the width of the caption content (in pixels) if you have added any.

Scroll Arrow Settings

Add Scroll Arrow – Enabling this option will force a navigation arrow to appear on the page. By default, the scroll arrow is automatically be added to pages who’s content needs a scroll bar. This is to prevent visitors from accidentally going to the next page when scrolling to the bottom of the current page.

Arrow Position – This option allows you to place the arrow on the bottom, left, or right of the window. This option also effects the automatically added scroll arrow.

Color – This will adjust the color of the scroll arrow. This option also effects the automatically added scroll arrow.

Adding An Image Slider or Slideshow

Open the Stacks library and locate the “Sweep Slider” stack.

sweep slider stack

Drag and drop the “Sweep Slider” stack into a “Drop stacks here” section found inside of a “Sweep Page” stack.

Screen Shot 2015-11-30 at 9.49.51 AM

sweep slider added

 

In the settings menu on the left select the number of slides you would like to display. Then simply drag and drop your images into the “Drop an image here” sections. You can optionally add text stacks to the “Drop stacks here” sections to add captions to each slide.

There are some additional settings that you can use to customize your slider.

sweep slider settings

Autoplay – Enabling this option will make the slider automatically transition between the slides.

Transition Speed – This option sets how fast (in milliseconds) the transition animation will play.

Enable Bullets – Enabling this will display a navigation dot for every slide at the bottom of the slider. If a user clicks on one of these dots the slider will navigate to the corresponding slide.

Enable Arrows – Enabling this will display navigational arrows to the left and right of the slider.

Max-width – This sets the width of the caption content (in pixels) if you have added any.

 

Adding Extra External or Internal Links to the Navigation Menu

Open the Stacks library and locate the “Sweep External Link” stack.

external link stack

Drag and drop the “Sweep External Link” stack either at the very top or very bottom of your stack editor.

external link

Click the “Set Link” button in the sidebar settings to set where you would like the external link to navigate to.

set link

Using Font-Awesome Icons in the Navigation Menu

If you would like to use Icons instead of text or bullets in your navigation menu just place the Font Awesome code in-place of the page title. For example if I wanted to use a home icon instead of the word “Home” in my menu I would replace the title with the code below.

1
<i class="fa fa-home"></i>

I would then highlight that code and select “Ignore Formatting” from the Format drop-down menu. For more information on Font Awesome’s Icons and for a complete list of icons vist: http://fontawesome.io/examples/

NOTE: Sometimes the editor will change your ” straight quotation marks into ” curly quotation marks. The curly quotation marks will cause the menu to not work. To change them from curly to straight just delete the quotes and retype them.

How To Enable Lightbox on an Image

Step 1: Navigate to your Page Inspector > Styles Menu and enable the Lightbox by selecting checking the ‘Lightbox On’ checkbox under the Toggles heading.

inspector -> iehjfdjg -> aehagchc

Step 2: View your project in Edit mode by clicking the edit button.

fhcjhjgg

Step 3: Import or drag and drop an image into your editor.

Step 4: Double click the image and in the popup menu change the Filename to something that includes the word ‘lightbox’. You can also change the Alt Tag to set what will display as a caption for the image.

Light Box


How To Add A Button

Step 1: Type in your desired button text into your editor and highlight the text.

ButtonText

 

Step 2: click the Add link button.

cechgeed

 

Step 3: Add a link to where you would like the button to navigate to and then add a ‘class’ with the value ‘button’.

ebejjeeg

 

Step 4: Click ‘Set Link’ and you are done.

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