Blend Tutorials

What is Responsive Design?
Responsive Web Design (RWD) essentially indicates that a web site is crafted to use Cascading Style Sheets 3 media queries, an extension of the @media rule, with fluid proportion-based grids (which use percentages and EMs instead of pixels) , to adapt the layout to the viewing environment, and probably also use flexible images. As a result, users across a broad range of devices and browsers will have access to a single source of content, laid out so as to be easy to read and navigate with a minimum of resizing, panning, and scrolling.

Give it a try for yourself »
Implementing Social Icons Links in your project.

The following steps describe how to utilize the Social Icons within your project.

  1. Insert the following code in the Sidebar or Footer area within RapidWeaver: 
    
<ul class="icons">
	<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
	<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
	<li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
	<li><a href="#" class="icon fa-github"><span class="label">Github</span></a></li>
	<li><a href="#" class="icon fa-dribbble"><span class="label">Dribbble</span></a></li>
	<li><a href="#" class="icon fa-tumblr"><span class="label">Tumblr</span></a></li>
</ul>
  2. Replace the # with the page URL of your social icon.
  3. Replace the class value with the corresponding social nerwork name of the social icon of your choice.
  4. Highlight the entire code and click Clear Formatting, then Ignore Formatting under Format at the top left of your screen.
How to use the Responsive Lightbox in the Photo Album Page?

To enable the Responsive Lightbox on the Photo Album Pages you need to go to your Page Inspector > Styles, once there you need to enable the Responsive Lightbox Options.

Stacks Image 1422
How to replace the default Banner image for your own!

The following steps describe how to add a banner image by utilizing the Resources section (requires RapidWeaver 7+) within RapidWeaver.

  1. Drag and drop your image in the Override SIte Banner area of the project file.
  2. Done!
How to use slide Effects triggered by Scroll events.

One more nice and cool effect built-in, the ability to use slide effects triggered by scroll events.
To do that you will need to add some class's to the element you want to animate, one simple example would be something like this:

  1. Insert the following code in an HTML stack or anywhere that allows HTML: 
    
<div>
	<div class="align-center wow fadeIn">
		<a href="#main" class="button big scrolly">Learn More</a>
	</div>
</div>
  2. You can see that I've added the class's named "wow" and "fadeIn" in the element above.
  3. The other options you can use are here. Just pick the one you want and your done.
How to Link & smooth Scroll through sections.

Union Theme as some nice and cool effects built-in, an example is the ability to scroll when clicking on a link. The following steps describe how to scroll through sections, as an example we will be using the ExtraContent 1 in the banner.

  1. Insert the following code in an HTML stack or anywhere that allows HTML: 
    
<div>
	<div class="align-center wow fadeIn">
		<a href="#main" class="button big scrolly">Learn More</a>
	</div>
</div>
  2. Replace the ID value "#main" in the link href above with the name of the ID you need to scroll to and use the class name "scrolly" to enable the scroll effect on you page.
Credits and Thanks!
This page is using the Toggle Stack by Will Woodgate
You can get the Toggle Stack for free: here, Thanks Will.