TUTORIAL

BANNER IMAGE

To utilize the built-in banner area for display of your images, please follow the instructions below.

1. Click and drag your image into the Resources area of the project file (banner images used on the preview site measured 1100x x 650px. Images with small dimensions may not display properly due to the size of the banner area on larger viewing devices). The Resources area can be found on the left hand column of RapidWeaver just below your webpages. (Please note that the Resources area is limited to RapidWeaver 5 and above).

2. Insert the following code in the Custom CSS box within RapidWeaver (The Custom CSS area can be found by clicking on the Page Info icon at the top-right side of your project file. A panel will appear -- please click on the Header label. The Custom CSS box is located towards the center of the panel and labeled CSS):
#feature {background-image: url(%resource(my-image.jpg)%);}

3. Replace the "my-image" with the name of the image. (Please ensure that the name of your image is all lowercase and does not contain any spaces, characters, or symbols. Failure to do so may prevent the image from displaying upon publishing your site).

4. Your banner image will now appear in preview mode.
TITLE, SLOGAN, MENU BUTTON FEATURES


Ebb & Flow offers multiple options for the placement and display of your Title, Slogan and Navigation. For actual examples of the different layouts please visit the Layout 1-3 example pages.

1. The title and slogan can be placed in the center of your banner by choosing the Title/Slogan In Banner toggle option in the Styles section of the theme. An opacity bar will automatically display behind your menu button unless you choose the Hide Navigation Background Color Toggle option. The opacity bar is completely color customizable, and can be given an opacity between 10-90%. The color and degree of opacity you choose for the menu bar will also display behind your navigation links when the menu button is clicked. If you would like your title and slogan to move into the menu bar when scrolling down the page, you must choose Title/Slogan Banner Scroll in the Styles section. See Layout 3 example page to view these features in action.

2. If you would like to recreate the layout as displayed on the main page of this preview site, and would like an opacity bar to fade in behind your menu button and title/slogan upon scrolling, you must check the following Toggle options: Title/Slogan in Banner, Menu Bar Opacity Fade In On Scroll, and Title/Slogan Banner Scroll. Leave the Hide Navigation Background Color Toggle option UNCHECKED.

3. If you would like to have your title and slogan at the top of your banner, leave the Title/Slogan in Banner Toggle option UNCHECKED. If you do not want an opacity bar to exist behind your menu button, title and slogan, choose the Hide Navigation Background Color toggle option. However, if you want an opacity bar to fade in upon scrolling, choose Menu Bar Opacity Fade In On Scroll toggle option and leave Hide Navigation Background Color toggle option UNCHECKED. See Layout 2 example page to view these features in action.

4. If you would like to have your title and slogan at the top of your banner, and have an opacity bar present behind your menu button, title and slogan, all of the Toggle options related to the title and slogan should be unchecked in the Style Options area. See Layout 1 example page to view these features in action.

5. If you would prefer to not have your menu button, navigation and title/slogan scroll, you can check the Toggle option entitled Navigation Scroll Off.
BUILT-IN-SLIDESHOW

To utilize the built-in responsive slideshow for any page, please follow the instructions below.

1. Click and drag your images into the Resources area of the project file. The Resources area can be found on the left hand column of RapidWeaver just below your webpages. For proper display, please ensure slideshow images have a width of at least 960px. The height does not require a set measurement, however the height of the actual image will determine the height of the slideshow. All slideshow images should share the same dimensions for proper display).

(Please ensure that the name of your image is all lowercase and does not contain any spaces, characters, or symbols. Failure to do so may prevent the image from displaying upon publishing your site).

2. Please insert the following code in the sidebar area:

<div id="myExtraContent1">
<div class="flexslider">
<ul class="slides">

<li>
<img src="%resource(my-image.jpg)%" />
</li>

</ul>
</div>
</div>


3. Replace the word my-image within the code to the name of the image you would like to have as the first image for your slideshow. You have now just completed your slideshow with 1 image.

4. For each additional image you would like to add to your slideshow, you will need to add the following line of code for each image:
<li>
<img src="%resource(my-image.jpg)%" />
</li>


The code below shows the additional line of code should be placed after the first li sequence, and what your sidebar area should look for a slideshow with two images. You may continue to add images to your slideshow as needed. Please note that images will appear in corresponding order.

<div id="myExtraContent1">
<div class="flexslider">
<ul class="slides">

<li>
<img src="%resource(my-image.jpg)%" />
</li>

<li>
<img src="%resource(my-image.jpg)%" />
</li>

</ul>
</div>
</div>


5. Highlight the entire code in the sidebar area and click Clear Formatting, then Ignore Formatting under Format at the top left of your screen. If this is done correctly, the entire code will have a pink highlight.

6. Check the Display On under Built-In-Slideshow in the Styles section of RapidWeaver.

(There is also an option to choose between a slideshow that will transition images with a fade-in, fade-out feature, or slider effect under Slideshow Transition in the Style Options section.)
MAIN CONTENT/EXTRA CONTENT BACKGROUND IMAGE

To utilize the option of displaying a background image of your choosing for either the main content area, or the 7 Extra Content Areas, please follow the instructions below.

1. Click and drag your image into the Resources area of the project file. (Please ensure that your images are large, high quality images. Smaller images will not display clear or crisp). The Resources area can be found on the left hand column of RapidWeaver just below your webpages. (Please note that the Resources area is limited to RapidWeaver 5).

2. Insert the following code that corresponds to the background area you are targeting in the Custom CSS box within RapidWeaver (The Custom CSS area can be found by clicking on the Page Info icon at the top-right side of your project file. A panel will appear -- please click on the Header label. The Custom CSS box is located towards the center of the panel and labeled CSS):

MAIN CONTENT AREA ONLY
section #padding {background-image: url(%resource(my-image.jpg)%);}

SIDEBAR AREA ONLY
aside {background-image: url(%resource(my-image.jpg)%);}

EXTRA CONTENT AREA ONLY
#extraContainer? {background-image: url(%resource(my-image.jpg)%);}

3. Replace the "my-image" with the name of the image AND if utilizing the Extra Content Area, replace the ? with the appropriate Extra Content numbered area. ONLY Extra Content Areas 2-8 are useable options for this feature. (Please ensure that the name of your image is all lowercase and does not contain any spaces, characters, or symbols. Failure to do so may prevent the image from displaying upon publishing your site).

4. If utilizing an extra content area, you must select the corresponding extra content area in the Toggle category to display the area.

Please note that content background images may switch from a switched position to one that scrolls on tablet and handheld devices. This has nothing to do with the theme and everything to do with the functionality and limitations of those devices.

Internet Explorer 8 also has limitation with processing background images. As a result, when viewed in Internet Explorer 8, background images will convert to the solid color selected for the corresponding background area.
EXTRA CONTENT AREAS

Ebb & Flow contains many Extra Content Areas to expand your design choices and options. The Extra Content Areas are limited to using the Extra Content Stack with Stacks 2 and therefore can only be used on pages built using Stacks 2 with the exception of Extra Content area 9. You can download the Extra Content stack for free under Extra Content Stacks Plugin at the following link: Extra Content Stack.

When using the Extra Content stack, it is important to target the content within the stack if using margin or padding. Margin and padding should not be applied to the actual Extra Content stack that contains the content.

Please note that the Extra Content Areas begin with Extra Content #2 and end in Extra Content #8. Do not use any other Extra Content Areas as they are being utilized for other functions related to the theme with the exception of Extra Content area 9. The Built-In Style options of theme include the ability to utilize your own custom background image or any solid color.
MAIN CONTENT HEADER/EXTRA CONTENT #9

The EXTRA CONTENT #9 area is located above the main content and is used for a main content header area for those pages that may be limited with having a dedicated header area (i.e. Blog and Contact pages). You can certainly use Extra Content #9 in other pages as well, as this page is utilizing this feature with the word TUTORIAL. To utilize this built-in extra content area, please use the following instructions for proper implementation.

1. Place the following code in a stacks container or the content area of the page. (For the Blog page the code can be placed in any blog entry. For the Contact page the code can be placed in the customizable text area of the the page).


<div id="myExtraContent9">Sample Content</div>

2. Simply replace Sample Content with your own content.

3. Highlight the entire code and click Clear Formatting, then Ignore Formatting under Format at the top left of your screen. The code will have a pink background if successful.

4. Under the Toggle Style Option, select Extra Content #9 On and your content will display.
NAVIGATION


The design of Ebb & Flow allows for a maximum of 12 main navigation links depending on the length of the navigation links, and a second level of sub-navigation links. Additional main navigation links are possible, but we don't recommend more than 12. Due to the number of potential navigation links and sub-links with this theme, a toggle option labeled Disable Navigation Scroll On Mobile Devices has been provided as an option. This will allow customers to build a site that allows for the fixed navigation scroll feature to remain intact on a desktop, but disables this feature on mobile devices to ensure visitors to the site can access all navigation links.
LOGO

Ebb & Flow has the capacity to accommodate a logo and will display above the title. If the site title is not utilized, the logo will display where the title is placed. There are no set width or height requirements for the logo, however, smaller logos are ideally suited for this theme.
RETINA READY

Ebb & Flow will ensure the images you use will look good on all retina devices. Simply follow the instructions below.

1. You will need two to make two copies of your image: one image at the normal size you desire, and a second copy that is twice the size of the image. Please ensure that the name of your images are all lowercase and does not contain any spaces, characters, or symbols. Failure to do so may prevent the image from displaying upon publishing your site.

2. Both images must have the same name, however, the image that is twice the size must end in @2x. Below is an example of the two images needed for proper retina display if the name of the image being used was boat.

Image 1(normal size): boat.jpg
Image 2(twice the size): boat@2x.jpg

3. Place both images in the resources area of RapidWeaver and place the smaller/original sized image in the area of the theme you desire.

4. Under the Toggle Style Option, select Enable Retina Images. The theme will take care of the rest and ensure retina devices use the images provided to display a high quality, clear picture.

*Please note that for most banner images, background images, and any other large images, it is not only unnecessary to utilize this built-in feature, but it may significantly slow down the load time of pages due to the size of large image files. This feature should be used for smaller images that may not appear as clear on retina devices. This feature will not work for standard image stacks as stacks automatically generates a new name for images placed in an image container.
FLUID VIDEO

Ebb & Flow will ensure your videos adjust appropriately no matter how small or large the device is being used. Ebb & Flow supports embedded video from the following sites:

1. You Tube
2. Vimeo
3. KickStarter
4. Viddler
5. Blip

Once you have embedded your video from any of the compatible media sites listed above, highlight the code used for embedding and click on "Ignore Formatting" under Format. Your video is now set-up and ready to display appropriately on multiple devices.

(Please note that embedded video is not the actual link to the video but a string of generated code. Please ensure that the embed code includes http in the web address portion).
RESPONSIVE STACKS

Ebb & Flow is a responsive theme. As a result, it is imperative to ensure that any stacks used with Stacks 2, or any 3rd party products are responsive as well. While it is not necessary to build a website with Ebb & Flow using Stacks 2, it is a wonderful product that offers additional options to building your site, including hundreds of third party-products. If you choose to use Stacks 2, please ensure the stacks you are using are responsive.
SOCIAL ICONS

To utilize Ebb & Flow's built-in social icons, please follow the instructions below.

1. Insert the following code in the Sidebar area within RapidWeaver:
<a href='#' class= 'symbol' title = '?;'></a>
2. Replace the # with the page URL of your social icon.
3. Replace the ? with the corresponding symbols of the social icon of your choice using the chart below.
4. Highlight the entire code and click Clear Formatting, then Ignore Formatting under Format at the top left of your screen.
(For multiple social icons, repeat the above steps for each desired icon.)
Stacks Image 1710