Gravity takes an entirely different approach to designing a website. Many RapidWeaver users want to showcase, or "feature", certain content at the top of the page. Up until now, the best general workaround to do this was to use ExtraContent. Gravity makes this much easier, by taking the content you add to the Sidebar area in the Page Inspector, and displaying it at the top of the page.

Feature content is distinctly separated from the main content area. As such, it stands out more, and you can more easily control the layout using standard RapidWeaver controls - like aligning an image to one side or the other, changing fonts & colors, creating headings, etc.

This functionality is free and built right in - no need for any fancy 3rd party plugins!

Gravity comes with easy, column-based layout support built right into the theme. Just add your content to the relevant ExtraContent area, and choose the column layout you want in Gravity's theme options.

Take the Sub-Feature Content area, for example. This area is between the Feature Content and main content areas, and supports a "regular" single column-based layout, but you can also choose to display two or three columns as well!

As mentioned in the "Using Feature Content" section above, Gravity displays any content entered in the Sidebar area of the Page Inspector in the Feature Content section.

But what if you want to create a sidebar in the main content area? Good question, and we've got you covered!

Gravity has two ExtraContent areas in the main content section. Want to display a left sidebar? Just add your content to ExtraContent area 6, and choose the sidebar width you want in theme options. For a right sidebar, just add your content to ExtraContent area 7.

Even better, you can display a 3 column-based layout in the main content section! You can even choose differing widths for the sidebars, making it even easier to create content-rich websites with a professional layout.

The beauty in Gravity is its flexibility. There's no "specific" header image area, but adding a header image is as simple as drag and drop. Just add your header image to the Sidebar area in the Page Inspector, and voila - instant header image. If you want to add some flair to your header image, just add a couple of HTML tags at the beginning and end, like so:

<div id="headerImage">
...your image here...
</div>

Once you've done that, you can add some custom css code to the Page Inspector --> Header --> CSS --> Custom CSS field, to add a drop shadow, border, etc. Here's the CSS code for adding a drop shadow:

#headerImage { -webkit-box-shadow: 0 0 5px black; -moz-box-shadow: 0 0 5px black; box-shadow: 0 0 5px black; }

If you're interested in more CSS code to make customizations like this, be sure to watch the free video tutorials we've created at the RapidWeaver.pro website.

Creating header slideshows are just as easy, since Gravity comes with two built-in javascript slideshow plugins, CrossSlide and Cycle.

If you wanted to use Cycle to create a slideshow, just install the code snippet (included with your purchase for free), restart RapidWeaver, then drag and drop the code snippet into the sidebar. Finally, just make sure your images are added to the Resources section, adjust the snippet (if necessary), and turn on Cycle in Gravity's Advanced Options section. Presto! You just created an awesome header slideshow.

For a more detailed tutorial on creating a slideshow with the built-in Cycle plugin, visit our Online Documentation.