blog-tutorial-post-template

Tutorials

Setup

Add Focus Panels:

Start by adding Focus Panels to the editor where you want it to display. Three panels will be visible in the editor by default.

Add Content to Panels:

Populate the panels with your desired content. If you only need two panels, don’t worry about the third one; you can disable it later.

Adjust General Settings:

Click on the Focus Panels element and open the settings panel.

Here’s what you’ll find:

Settings

Focus Speed: Set how quickly panels shift into focus.

Mouse Focus: Choose how panels come into focus.

“On hover” will enable the ability to automatically bring a panel into focus when hovering over it with the mouse cursor.

“On hover with a timed delay” will bring a panel into focus only after hovering a panel for a definable length in time.

“Off” will disable mouse hover focusing all together, panels can only be brought into focus by click.

Focus Sensitivity: Available when Mouse Focus is set to “On hover”. Adjust how sensitive panel focus is to mouse movements.

“Low” will ensure that only intentional mouse movements from the page visitor activate shifting a panel into focus.

“Moderate” will also try ignore unintentional mouse movements but increases the responsiveness by executing a shift of focus the moment the mouse cursor stops moving during a hover.

“High” will maximize the responsiveness by shifting the focus the moment the mouse cursor hovers the panel.

Hover Delay: Available when Mouse Focus is set to “On hover with a timed delay”. Set the time in milliseconds before a panel shifts into focus on hover.

Delay Animation: Available when Mouse Focus is set to “On hover with a timed delay”. Define the color of the cursor animation when hovering over a panel.

Mouse scroll focuses panels: Enable to allow mouse wheel and trackpad scrolling to shift the panel focus.

Panel Layout

Demo layout in edit mode: Enable this to reorganize the panels in the editor to mimic how they would display in preview or when published. This setting is provided to assist with visualizing the effect of the remaining settings in this section.

Display Type: Choose how panels are displayed.

“Default” keeps all three panels in view inside the available horizontal content area. This option is ideal for themes that have a visual separation between the content area  and the rest of the webpage design.

“Sliced” also keeps all three panels in view but adds a slice visual to give the appearance that the panels are piercing through the background of the website.

“Visible overflow” will allow the panels to be visible outside of the horizontal content area all the way to the edges of the browser window.

Panel Opacity: Available when Display Type is set to “Default”. Adjust the opacity of the panels that are not currently in focus.

Slice Opacity: Available when Display Type is set to “Sliced”. Adjust the opacity of the slice visual.

Focus Panel: Choose which of the panels is in focus when first when the page loads.

Panel V. Align: Choose how the panels align vertically in relation to each other. The “Stretch” option will force each panel to be the same height.

Panel Overlap: Available when Display Type is set to “Default” or “Sliced. Define in pixels the overlap of the panels that are not currently in focus into the available horizontal content area.

Panel Gap: Define in pixels the space between each of the panels.

Define panel min-height: Enable to define in pixels the minimum height for each of the panels.

Center align focused panel: Enable to force a panel to be horizontally aligned to the center when in focus.

Show two panels only: Opt to remove the third panel if necessary.

Adjust Individual Panel Settings:

Click on one of the panels in the editor and open the settings panel. Here’s what you’ll find:

Panel Layout

Content V. Align: Choose how the content inside the panel aligns vertically.

Define content width: Enable to define in pixels the width of the content inside the panel.

Content H. Align: Available when ”Define content width” is enabled. Choose how the content inside the panel aligns horizontally.

Define panel max-width: Enable to define in pixels the maximum width for the selected panel. By default each panel fills the entire available horizontal content area. This setting allows you to define varying widths for each of the panels.

Panel Styles

The settings found in this section are rather straightforward. Refer to the provided image for a clear understanding of each setting’s effect.

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