1LD Tutorials & Blogs

Tutorials

Adding Images to the Slider

Step 1: Add the images you wish to use to the “Resources” section.

Adding an image to your resources

Step 2: Navigate to your Page Inspector > HTML tab > Header Tab.

Page Inspector - HTML - Header

Step 3: Copy and Paste the code below into the text area.

<img src="%resource(paisley.png)%" alt="example" title="Caption text here" />

Step 4: Change name_of_resource.jpg to match the name of your resource & be sure to make sure the extension matches as well (png, jpeg, or jpg). The names are case sensitive so slide-1.jpg in the code and slide-1.JPG in the resource section would not work.

Step 5: Change the value of ‘title’ to your desired caption or delete title if you don’t wish to display a caption.

Step 6: Repeat steps until you have as many photos you want to display in the slider, preview and you are complete. Your finished code in the Header-Header section should be similar to the screen shot below.

Slider images in the header

Adding Content to the Promotional Boxes

Step 1: Navigate to the Sidebar Tab of the Page Inspector > Sidebar.

Page inspector sidebar tab

Step 2: Copy and Paste the code below into the Sidebar text area.

<div id="myExtraContent1"> 
Promo Box 1 Content Here 
</div> 
<div id="myExtraContent2"> 
Promo Box 2 Content Here 
</div> 
<div id="myExtraContent3"> 
Promo Box 3 Content Here 
</div> 
<div id="myExtraContent4"> 
Promo Box 4 Content Here 
</div>

Step 3: Highlight the code & select Ignore Formatting from the Format Drop down menu (or press ? . ).

ignore formatting

Step 4: Add your desired content to each section replacing the text “Promo Box # Content Here”. Then Highlight everything between

<div id="myExtraContent#">
and
</div>

& select Ignore Formatting from the Format Drop down menu again (or press ? . ). The content will now not be highlighted in pink anymore and only the HTML code will be highlighted as code.

Step 5: Preview and you are complete. Your finished code in the Sidebar should be similar to the screen shot below.

Promo Boxes

Social Media Icons

Step 1: Social Media Icons can be placed in the Main Content area, Sidebar, and Site Slogan. Copy and paste the code below into your desired location.

<div id="socialMedia"> 

</div>

Step 2: Copy the code below and paste it between <div id=”socialMedia”> & </div>.

<a href="http://www.webaddresshere.com"><span>#</span></a>

Step 3: Find the Social Media Icon you wish you use from the Glyph Chart below.

Just Vector Glyph Chart

Step 4: Type the corresponding letter in-between <span> & </span>.

Step 5: Replace http://www.webaddresshere.com with the address to your social media site.

Step 6: Repeat steps 3 – 5 untill you have all the icons you wish to use.

Step 7: Highlight the code & select Ignore Formatting from the Format Drop down menu (or press ? . ). Your finished results should resemble the screen shot below.

Social Media links HTML

Navigation Subtitles

Step 1: After creating a page, double click the title to begin renaming the page.

Step 2: Type in <p> & then your desired subtitle followed by </p>. Your finished title should resemble the screenshot below.

subtitle

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

Vivid Titles

Create stunning, uniquely-shaped content effortlessly with Vivid Tiles. Tailor your website’s appearance with customizable top and bottom edges, and arrange these elements seamlessly in rows.

Vivid Titles RapidWeaver Stack

Robust Customization

  • Create rows of uniquely-shaped content elements.
  • Customize each one independently.
  • Add almost any type of content.

Diverse Edge Options

  • Edges support 9 shape options with 4 layouts.
  • Mix and match edge shapes and layouts on top and bottom.
  • Incorporate images, icons, or text inside edge design.

Effortless Setup

  • Minimal setup required for immediate results.
  • Customizable style options to fit any website design.
  • Control element size and colors with ease.

Simply Responsive

  • Tiles automatically adapt to browser and device width.
  • Full control over tile horizontal and vertical alignment.
  • Automatically make all tiles in a single row the same height.

Eye-Catching Styles

  • Each edge shape has two unique background layers.
  • Adjust edge layer visibility, placement, and offset.
  • Apply subtle, attention-grabbing in-view animations.

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