1LD Tutorials & Blogs


HTML Element Settings

html settings

Element Tag – This field is where you will declare what type of HTML element to use. Accepts any valid HTML element (div, section, article, a, input, img, etc). Note: The element that is created will not be wrapped in Stacks’ standard div elements.

Classes – Optionally declare an unlimited amount of CSS classes. Each class should be separated by a space. This field does not accept special characters (# ” ? $ . etc) and is case sensitive.

ID – Optionally declare a single ID for the element. Your ID should be unique and not contain any spaces. This field does not accept special characters (# ” ? $ . etc) and is case sensitive.

Href/Src – Use RapidWeaver’s link window to set a link to a page or resource. This field is only visible if the element has been set to “a” or “img” element.

Attributes – Optionally add any custom attribute. The attribute should be added in the following format with the equal sign and quotation marks added: attribute-name=”attribute-value”

Content Type – “Wrap” will allow you to nest other HTML elements and stacks inside this element. “HTML text” will allow you to type in text, which is useful if your element is a header or paragraph tag. In the image below, the top element is set to “Wrap” while the bottom is set to “HTML text”. The element type will display in the Stacks’ editor as well as the assigned class names to help with organization.



CSS Settings

CSS Only / Remove Element – Enable this option if you do not wish to create a new HTML element but declare a CSS Rule instead. Once enabled the HTML element will be removed and the CSS Selector Title will display in the Stacks’ editor. This title will only display in edit mode and wont add anything to the actual published HTML. All of the declared CSS will be added the the current page’s Stacks CSS file.

Element Selector – By default this field is set to “[this]”. This value will automatically apply a random generic classname to the element and apply all of the non-default CSS to this element only. To apply the non-default CSS to elements with a specific class you can create a unique classname.

To create a classname type a period ( . ) into the “Element Selector” field, this period stands for “class”. Follow the period by typing any unique name. The name must begin with a letter (a–z) and accepts more letters, numbers, hyphens ( – ), and underscores ( _ ) with no spaces in-between. The name must also be at least 2 characters long.

Good Examples:


Incorrect Examples:

.my class (has a space)
.2myClass (begins with a number)
.&my-class (contains unsupported "&" character)

You can then add this classname to any HTML element’s “Classes” field to have the CSS apply to it. Since this field is specific to classnames you will not need to add the class symbol (or period symbol) to the name when entering it into this field. Each classname you add should be separated by a space.

Note: If you leave the “Element Selector” field blank none of the CSS rules will be applied.

Single class example:



An advanced selector example with IDs and element selectors:

detailed name

CSS Rules – An explanation of every CSS rule will not be detailed in this tutorial. We recommend checking out w3schools for a property by property explanation.

CSS Properties

Custom Rules and Media Queries

custom feilds

If there is a rare CSS rule that is not listed in the settings panel you can add it to the “Custom Rules” fields. Additionally if you need to add an “!important” tag to a specific field you can declare it here as well. To do so, list the rule title followed by a colon (:) and then the value. You will not need to add a semi-colon(;) to the end unless you wish to declare a second rule in the same field (good for copy and pasting large amounts of CSS rules).

Media queries can be declared for responsive purposes. To add a media query size declaration first type in “and” followed by the rule encased in parenthesis. You can add multiple size declarations in a single field as long as each is prefixed by the word “and”. For example, “and (max-width: 1000px) and (min-width: 600px)” can be typed into the same field as opposed to one in each of the two fields.

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