1LD Tutorials & Blogs


Adding a Banner Image

If you are using RapidWeaver 7, you just need to drag and drop your image into the Site General Settings page “Banner” section.

banner image how to

To use a page specific banner, select the page and navigate to the Page Inspector > General Settings tab and use the “Override Site Banner” section.custom banner on single page

If you are using an older version of RapidWeaver that does not have the “Banner” Setting you can use the snippet below instead. Place the code inside the Page Inspector > CSS tab for the page you want to apply the image to.

.banner {
  background-image: url(%resource(image.jpg)%); 

Then drag and drop your image into the “Resources” Section found in the left menu bar. Replace the text “image.jpg” with the title and extension of your image file (Case sensitive).

old rapidweaver banner image


Adding a Background Image

When the “Banner Toggles” option ‘Full Width’ is disabled, you are able to add an optional image to the background.

To do so, place the code below inside the Page Inspector > CSS tab on the page you want to apply the image to.

.background-image {
  background-image: url(%resource(image.jpg)%); 

Then drag and drop your image into the “Resources” Section found in the left menu bar. Replace the text “image.jpg” with the title and extension of your image file (Case sensitive).

adding a background image

Opening Images in a Lightbox

First we must enable the plugin. Navigate to your Page Inspector > Styles Tab and enable the Lightbox by selecting checking the ‘Enable Lightbox’ checkbox under the “Other Toggles” heading.

enable lightbox


If you are using a “Photo Album” page, all of the images added will automatically be opened in a Lightbox.

If you want to add the Lightbox effect to an image on another page type import or drag and drop an image into that page.

Then 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


Using Font Awesome Icons

Font Awesome’s Icons can just about be used anywhere on your site. Check out the links below to learn more about how to use Font Awesome.

How to Use Font Awesome

See all usable icons

Style Options


Align Right – Aligns the menu navigation page titles to the Right instead of the left.

Show Site Title – Displays the Site Title to the Right of the logo (to the left of the menu navigation page titles).

Show Site Slogan – Displays the Site Slogan centered inside of the Banner area.

Disable Parent Pages – Disables menu navigation page links that have sub-pages. These “parent” pages will not be able to be navigated to and will only be used as titles for the drop down sub-page menus.


Dark Edges – Changes the edges of the glass from a white reflection to a dark shade. This option is useful if you are using a white “Content  Background” color.

Remove Blur – Removes the blur effect of the glass.

Glass Transparency – Adjust how strong the transparency of the glass color is.


Full Width – Makes the Banner image stretch to the the sides of the browser window.

Banner Setting – Adjusts the height of the Banner image.


Remove Padding – Remove padding from the content. This setting is useful when using a Stacks page and you want a Stack to stretch to the edge of the content.

Sidebar – Enable the sidebar and select which side it displays on.

Title Font – Choose a font for the page titles. Some Options also effect the navigation menu page titles.

Content Font – Choose a default font for the content text.

Other Toggles

Enable Lightbox – Turn on the Lightbox plugin on the Album Page or for images with “lightbox” in the file name.

Disable Loading Animation – Removes the sliding animation on page load in and out.

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


Scroll Shift Stack

Scroll Shift Screenshot

Scroll Shift is the ultimate tool for adding seamless scroll-based animations to your web design projects. Create captivating and engaging websites by effortlessly animating elements as the user scrolls through the page. This tool can bring your designs to life with smooth transitions, eye-catching movements, and precise timing.

Create captivating visuals by linking multiple elements together to form a stacked layer effect. These elements can separate and come together to form a unified element, adding depth and dimension to your designs. The possibilities are endless as you craft intricate animations that leave a lasting impression.

Drive attention to essential content by implementing animations that trigger only when the user scrolls past a specific section. By strategically timing the animations, you can ensure that users take notice of crucial information and engage with your content effectively.

Check it out!

Latest News


Join our newsletter to get notified of new releases, updates, and discounts.


Popular Links

Free Stacks & Themes
See Order History
Product Tutorials

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

RapidWeaver is a trademark of Realmac Software