1LD Tutorials & Blogs

Blog

Snippets are code that can be saved in the Edit Mode of RapidWeaver and pasted into pages with an easy drag-and-drop functionality. These codes typically include, though are not limited to, HTML, CSS, JavaScript and jQuery. The code can have functionality purposed for a relationship between it and another addon, or the code can work independently regardless of any addon. When snippets are created they are stored as files and double-clicking new snippet files will automatically install them into RapidWeaver.

1LD Snippets

1. Locating Snippets Section

Click the Snippets button (example) at the top center of RapidWeaver’s backend (where you edit page content):

RapidWeaver 6 Snippets

This will open a pop-up menu (example) displaying any existing Snippets you have:

RapidWeaver 6 All Snippets

In this example you can see 2 snippets I have: Google Analytics code and Extra Content, which I use for one of my themes.

2. Adding Snippets

To insert this snippet I can simply drag and drop the code into any available section of my website. The section you drop the code into will at times be specific to the coding. Then drag and drop the code on your page or inside of your custom code section in the Inspector (as shown in the screenshot below).

RapidWeaver 6 JavaScript Section

3. Editing Snippets

In the bottom left corner of the Snippets pop-up menu you will notice 2 icons. The one shaped like a Gear will provide 3 options (example) when clicked on:

RW6 Snippets Gear Drop Down

“Delete Snippet…” is self explanatory. “Edit Snippet…” re-open the menu that appears when you first create a Snippet and can be used to make changes.

“Reveal in Finder…” opens the Folder where the Snippets are saved as files. This is handy to note as you can install Snippets as files as well (simply place the file in this folder, though it must be created as the same format of course).

4. Creating Snippets

The icon next to the gear, the “+” icon, will create a pop-up menu when clicked (example):

RW6 Create New Snippet

Simply name the Snippet, though I recommend creating a name that is semantically easy to identify for later use (such as the basic function and if it is used within any particular addon).

Then insert the code in the code section. After the snippet is saved it will appear in your Snippets list and can be dragged and dropped into any available RapidWeaver sections in the backend.

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

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

Newsletter

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

Subscribe

Popular Links

Free Stacks & Themes
See Order History
Product Tutorials
FAQs

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

RapidWeaver is a trademark of Realmac Software