Your Guide to Recreating Elements of the Alerion theme for WordPress
Setting the text you wish to appear as the headline and subheading for each section in a widget is a fairly simple process. You only need to do the following steps.
icon-list-alt
(pictured below). This icon will also appear on the QuickNav.QuickNav adds a scrolling menu that follows your viewport as you scroll. Instructions for how to set this up to match the demo are detailed below.
icon-bullhorn
.Parallax is apparent motion of a 3D object depending on your perspective. This effect has been transposed into the theme, allowing configurable areas to move based on scroll position.
IMPORTANT NOTE: For demo purpose we load the background for Showcase, Feature, and Footer section in themes/rt_alerion/less/demo-styles.less as the following. If you wish to use your own image and use the image picker, please remove this part from your demo-styles.less (EDIT: demo-parallax-bg.less in later releases of the theme).
// Parallax Background Images (Please remove the following if you wish to use your own images)
.contentstyle-preset1 {
#rt-top-surround {
background-image: url(../../../rockettheme/rt_alerion_wp/frontpage/showcase/showcase-bg-p1.jpg);
}
#rt-feature {
background-image: url(../../../rockettheme/rt_alerion_wp/frontpage/feature/feature-bg-p1.png);
}
#rt-footer {
background-image: url(../../../rockettheme/rt_alerion_wp/frontpage/footer/footer-bg-p1.jpg);
}
}
.contentstyle-preset2 {
#rt-top-surround {
background-image: url(../../../rockettheme/rt_alerion_wp/frontpage/showcase/showcase-bg-p2.jpg);
}
#rt-feature {
background-image: url(../../../rockettheme/rt_alerion_wp/frontpage/feature/feature-bg-p2.png);
}
#rt-footer {
background-image: url(../../../rockettheme/rt_alerion_wp/frontpage/footer/footer-bg-p2.jpg);
}
}
.contentstyle-preset3 {
#rt-top-surround {
background-image: url(../../../rockettheme/rt_alerion_wp/frontpage/showcase/showcase-bg-p3.jpg);
}
#rt-feature {
background-image: url(../../../rockettheme/rt_alerion_wp/frontpage/feature/feature-bg-p3.png);
}
#rt-footer {
background-image: url(../../../rockettheme/rt_alerion_wp/frontpage/footer/footer-bg-p3.jpg);
}
}
.contentstyle-preset4 {
#rt-top-surround {
background-image: url(../../../rockettheme/rt_alerion_wp/frontpage/showcase/showcase-bg-p4.jpg);
}
#rt-feature {
background-image: url(../../../rockettheme/rt_alerion_wp/frontpage/feature/feature-bg-p4.png);
}
#rt-footer {
background-image: url(../../../rockettheme/rt_alerion_wp/frontpage/footer/footer-bg-p4.jpg);
}
}
.contentstyle-preset5 {
#rt-top-surround {
background-image: url(../../../rockettheme/rt_alerion_wp/frontpage/showcase/showcase-bg-p5.jpg);
}
#rt-feature {
background-image: url(../../../rockettheme/rt_alerion_wp/frontpage/feature/feature-bg-p5.png);
}
#rt-footer {
background-image: url(../../../rockettheme/rt_alerion_wp/frontpage/footer/footer-bg-p5.jpg);
}
}
.contentstyle-preset6 {
#rt-top-surround {
background-image: url(../../../rockettheme/rt_alerion_wp/frontpage/showcase/showcase-bg-p6.jpg);
}
#rt-feature {
background-image: url(../../../rockettheme/rt_alerion_wp/frontpage/feature/feature-bg-p6.png);
}
#rt-footer {
background-image: url(../../../rockettheme/rt_alerion_wp/frontpage/footer/footer-bg-p6.jpg);
}
}
// End of Parallax Background Images
Instructions for setting these features up in Administrator are detailed below.