blog-tutorial-post-template

Tutorials

Set up

  1. First drag and drop the Cinema Slider Stack into the Stacks editor. It should appear like the screenshot below.Screen Shot 2015-05-28 at 10.20.44 AM
  2. Then drag and drop the Cinema Slide Stack into the “Drop stacks here.” section located underneath the heading “Add Slide Stacks Below”. Repeat this step until you have as many slides as you want to use. Your finished result should appear like the screen shot below.Screen Shot 2015-05-28 at 10.24.15 AM
  3. Now select the first Cinema Slide stack and in the panel on the right side of RapidWeaver click the browse button underneath the section labeled “Slide Settings”. Locate the first image you wish to use. Repeat this step for all of the slides you have added.

For additional help on styling your slider refer to the Slider Settings guide below.

How to Add Captions

All you need to do is drag and drop a text stack inside the Cinema Slide‘s “Drop stacks here” section to add captions to your slides. For additional help on styling your captions refer to the Slide Settings guide  below.

How to Create a YouTube Video Slide

  1. After adding your slide stack to the editor, select the stack and in the panel on the right side of RapidWeaver underneath Slide Settings select the YouTube Video slide type.
  2. Locate the video you want to use on YouTube.com and place the video code into the Video Code input. You can find the video code in the address bar at the end of the URL string (after “?v=”) Screen Shot 2015-05-28 at 11.14.23 AMor found in the share tab for the video after the last slashScreen Shot 2015-05-28 at 11.12.20 AM
  3. Next you need to add a screenshot (of the video itself or of some other image) so that the transition effect will work. Click on the browse button to add your screenshot and you are done.

How to Create a Vimeo Video Slide

  1. After adding your slide stack to the editor, select the stack and in the panel on the right side of RapidWeaver underneath Slide Settings select the URL Video slide type.
  2. Locate the video you want to use on Vimeo and place the video code into the Video Code input. You can find the video code in the address bar at the end of the URL string after the last slashScreen Shot 2015-05-28 at 1.59.17 PM
  3. Next you need to add a screenshot (of the video itself or of some other image) so that the transition effect will work. Click on the browse button to add your screenshot and you are done.

Slider Settings Guide

Settings

Image Alignment – This sets what area of the image the slider will focus on if the image is too large to fit the aspect ratio. Note: The images will still scale to fit the slider, cropping will only happen if the images have a different aspect ratio than what the slider has.

Height Type – There are three options for height type: Aspect Ratio, Percentage, and Static Pixel Height.

  • Aspect Ratio – If you know what aspect ratio your images are use this option. This will keep the slider fully responsive and ensures a great fit for most photos and videos.
  • Percentage – Use this option if you want to adjust the height till you get a good fit for your non-standard sized images. The percentage is in relation to the slider’s width (I.E. 50% means one half the size of the width or 2:1 ratio) This option will also keep the slider fully responsive.
  • Static Height – This option will keep the slider at a specific height no mater what size the browser window is. This option is not fully responsive for images and videos.

Slider Max Width –  This option is for when you don’t want your slider to fill the entire width of where you place it. Set a max value and the slider will not stretch to fill the width.

Slide Hang Time – This sets the time between the end of the last sliding effect and the start of the next one.

Transition Time – This sets the length of the transition effect.

Autoplay – Enabling this will set the slider to automatically start playing when the page is loaded.

Navigation Hover – If this is enabled the navigation buttons (prev, next and play/stop buttons) will be visible on the mouse hover state only, if this is disabled they will be visible always.

Frame Settings

Detailed Size – Use this option to set specific values for the frames top, bottom, left, and right widths.

Size – This sets the size of the frame on all sides.

Style – These are different templates to add shadows to the frame (for sliders with frames) or to the slider (for sliders that use the frame as a background instead). To use the frame as a background be sure to set you slider’s max-width and the slider will automatically center inside the frame.

Texture – Add a colorable texture to the frame or background.

Advanced Settings

Slider Min-Height – Set the minimum value height the slider can be regardless of the aspect ratio. This is useful only for mobile sized screens, when the slider becomes too small. increase this value to enlarge the slider.

Secondary Slider – Enable this option if there is already another Cinema Slider on the page. This will reduce load time by removing unnecessary code as it can “borrow” the code from the first slider you placed.

Don’t Crop Images – This will disable cropping on the image. Useful if you want to use portrait style images.

Hide Prev/Next Buttons – Enable this to hide the prev/next buttons.

Hide Play/Stop Button – Enable this to hide the play/stop button.

Show Thumbnails – This will display the thumbnail images you have set inside each Slide Stack below the slider so that users can navigate through the slider by clicking on them. If you also enable “Show Pagination”, the thumbnails will display when the pagination bullets are hovered instead of below the slider. Note: This option only works if you have set thumbnail images for each of the slides in your slider. See the Slide Settings Guide below to learn about adding those thumbnail images.

Disable Pause On Hover – By default the slider will pause whenever the mouse is over it. Enable this option to turn that feature off.

Show Pagination – Enable this to show a bullet style navigation in the bottom right corner of the slider. As mentioned above, if you enable “Show Thumbnails” with this option also enabled, thumbnail images will display above the bullets when hovered.

Show Loader –  Enable this to show a circular loader while the slide hangs. The slider will transition to the next slide when the bar fills the entire circle.

Loader Position – Choose where the loader will display.

Loader Opacity – Set how transparent the loader will be. 10% is barely visible and 100% is opaque.

Loader Diameter – This controls the size of the loader.

Loader Stroke – This controls the thickness of the loader bar.

Slide Settings Guide

Slide Settings

Slide Type – You are able to choose either an image, YouTube video, or other video (I.E. Vimeo). There is also an option titled “No Image (Caption Only)”, use this option when you do not want to add and image but are going to use Stacks content instead.

Image – Browse for the image you want to use for the slide.

Transition – This sets what animation the slide transition will use.

Caption Settings

Text – This sets the color of your captions text, this can be overwritten by the stacks you place inside of the caption area.

Background Style – Set a color as a background for the caption so that it can be more easily read.

Transparency – Change the opacity of the captions background.

Advanced Settings

Thumbnail – Add a thumbnail of your image. This is only useful if you are using the “Enable Thumbnails” advanced setting in the Cinema Slider.

Add Link – Optionally add a link to your slide, so that when it is clicked, it will navigate to there.

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