Hero2 Theme by Yuzoolthemes
Thanks for purchasing this awesome Theme. Let's get it setup!
Use the demo Rapidweaver project file - copy and paste juiciness from there into your own project. Never start from scratch.
1. Background Image
To add a background image to one of the extra content areas (instead of a colour or the included wood and concrete settings in the theme options) drag in the Hero Background Image snippet to the Custom CSS of the page inspector. Add your image to the resources section. Make sure the names match up and Robert's your Father's brother.
The recommended image size is at least 1200 x 740 pixels and it’s fun to add gaussian-blur to the image in image editing software like Photoshop or Pixelmator before uploading like in Extra Content 8 of the demo.
The snippet is set for Extra Content 1 (top header) so just add as many as you want to the Custom CSS inspector and change the #extraContent1 to #extraContent2 or 3 or 4 ~ 16; depending on the extra content section you want to add a background too. And then change the name of the background to the corresponding image in the resources unless you want them all to have the same background. Different backgrounds work quite well in this theme.
To switch off that extra content section, just tick it in the Styles panel.
For the big cool Hero header, select "Full Header Hero Image for EC1" in the theme options and add the image to the header like this:
background-position: center center;
Change the URL to your image. Or add an image to RW resources and instead link to it using:
background-position: center center;
Make sure background matches the name of your image in the RW resources section.
<li><div class="per-90">Web Design <span>90%</span></div></li>
<li><div class="per-70">SEO <span>70%</span></div></li>
<li><div class="per-50">App Building <span>50%</span></div></li>
<li><div class="per-20">Beer Tasting <span>20%</span></div></li>
Drop in the Skills snippet.
Edit the "90" to show the % you want to illustrate
Change the SEO to the skill you want to show
The whole bold line - copy and paste or delete this to make more or less skills.
As many or as few as you have :)
3. Responsive Video
Drop in the video snippet.
<iframe src="http://player.vimeo.com/video/49445992?title=0&byline=0&portrait=0" width="960" height="540" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
The bold part is the embed code you get from either Vimeo or YouTube. Copy and paste that in here (keeping the "video" wrapper) and the video will be responsive.
4. CTA Buttons
<a href="http://www.google.com" class="btn">Button Text</a>
Change the Google link to the url you wish and button text too. The button colours can be changed in the page inspector theme options.
5. Testimonial Rotator
<li><blockquote>This company works with style and beauty.<cite>- Paul Mansfield</cite> </blockquote></li>
<li><blockquote>Where else can I find such a quick and easy to work with group of designers?<cite>- Susan Smith</cite></blockquote></li>
The first bold is the first quote's contents. The second is the author of the quote.
To add more copy and paste the whole second line and then edit it to match your customer feedback and testionials.
6. Other General Stuff
Please play around with the colour settings and bear in mind this is a full width theme so if you want to add a little padding to the sides of content (text for exmaple) - please do so in Stacks. Doing this manually is the best way for flexibility so we can do edge to edge images and videos.
Also it's best to select consolidate CSS and common files under RW preferences for the best performance after publishing your site.