Adding Images to the Slider

Step 1: Add all the images you want to use to the Resources section by clicking on the Add Resource button in the top left of the Rapidweaver window.

Add Resource

Step 2: Navigate to the Header-Header Section of the Page Inspector.

Page Info - Page Inspector

Page Info - Header

Header Header

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

1
<img title="Caption text here" alt="Slider Image" src="%resource(name_of_resource.jpg)%" />

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 untill 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 simular to the screen shot below.

Carpe Diem Custom Header Sliders

Adding Content to the Promotional Boxes

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

Page Info - Page Inspector

Sidebar

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

1
2
3
4
5
6
7
8
9
10
11
12
<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 command + . ).

Step 4: Add your desired content to each section. Highlight everything between

and

& select Ignore Formatting from the Format Drop down menu (or press command + . ).

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

Carpe Diem Extra Content

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.

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

1
2
3
4
5
<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.

Cabernet 2 Glyph Chart

Step 4: Type the corresponding letter in-between & .

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 command + . ). Your finished results should resemble the screen shot below.

Carpe Diem Social Media Sidebar

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.

Carpe Diem Subtitles