Scrollin – WordPress Version

Introduction

Firstly, thank you for purchasing Scrollin (WordPress Version). This is the documentation for the WordPress version of this theme.  In this guide, I’ll walk you through the basic set up of the theme and how to use it’s features. If you need more help then please jump onto the support forum at http://simnorlabs.com/support

Initial Installation

You will need to have WordPress already set up, instructions on setting up WordPress can be found here.

Once you have WordPress installed, unzip the files you’ve downloaded from ThemeForest, you’ll find a zip file labelled Scrollin-ThemeToUpload.zip, this is the file you will need to upload to WordPress. A knowledge base article explaining how to get this file and which files you need from ThemeForest can be found here.

In your WordPress admin, navigate to Appearance -> Themes. At the top of this page you should see a tab labelled “Install Themes”, click this tab and then in the little menu beneath the tabs, click the “Upload” link.

Upload the Scrollin-ThemeToUpload.zip file using the upload field on this page, and then click the “Install Now” button.

Once the theme has been installed you should see a screen like this:

install_1a

Click the “Activate” link.

At this point you should be redirected to the theme options page to set up a few of the options, for now just click the Save Changes button to bring in the default logo and settings.

Setting up the Theme Options

This theme has a number of theme options for you to edit. To access the theme options, navigate to Appearance -> Theme Options.

Under the “Header” tab you can set your logo, simply click the “Upload Logo” button and use the WordPress uploader to upload your logo, once you have uploaded it, you can click the “Use this file” button to add it to the options. It’s recommended that you add a retina version of your logo as well, a retina logo is twice the size of the default logo, but will get shrunk to half that size when on retina devices such as iPhones, you don’t have to upload a retina version.

If you do not have a logo you can tick the “Use site title instead of logo” checkbox to show the title instead of a logo.

Under the “Styling” tab you can select the fonts you would like to use for  the headings and paragraph text, there are a selection of Google fonts available as well as normal web safe fonts. You can also set the “Heading and Link Colour” and the “Text Colour” for the site. If you would like to use any custom css then you can add it via the “Custom CSS” field.

The “Home Banner” tab has one setting, this is to set the number of seconds the banner will stay on each slide when auto-rotating, by default this is 8 seconds.

The “Portfolio” tab allows you to set up the portfolio heading and sub heading when in the portfolio section (for example, when viewing a portfolio item). You can also disable the linking to an individual portfolio item if you are just wanting to use the Portfolio section as a lightbox gallery.

Under the “Blog” tab you can set the heading and sub heading for when in the blog section (for example, viewing individual blog posts, on a blog archive page etc.) There is also a section for the “Home Page Section” options, this is for the Blog section you add via the page builder, details on these options can be found in the “Setting up a Blog section” part of this documentation below. This theme creates a special gallery for “Gallery” post format posts, if you would like to disable this, you can do so by ticking the “Disable Slider Gallery” option. If you would like to disable the default WordPress thumbnail gallery instead, then you can do that by ticking the “Disable Thumbnail Gallery” option.

Under the “Contact” tab you can set up the options for the contact page section, full details on this section can be found in the “Setting up a Contact section” part of the documentation below.

Finally, under the “Footer” tab you can set the copyright text and add some social icons. To add a social icon, click the “Add new social link” button and then in the panel that appears, choose your icon by clicking the “Select icon” button, then add your link in the “Link” field.

Setting up the base home page and blog page.

So once you have the theme installed, the next thing you’ll want to do is create a new page for your homepage and a page for your blog section, so in the admin navigate to Pages -> Add New and give the page a title of “Home” (or whatever you would like to call it), then click the “Publish” button. Now go to Pages -> Add New again and create another page for the Blog section.

Once you have these two pages, go to Settings -> Reading in the admin area. Find the “Front page displays” option and click the “A static page…” radio button, the two select fields should then become active, in the “Front page” option select the “Home” page you added, and for the “Posts page” option select the “Blog” page you added, so you should have something like this:

home-1

Finally, click the “Save Changes” button. If you go to the website now, you should have a blank page for your homepage.

Introduction to the Page Builder

The page builder is the way we build the sections on a page, you can access it under the editor whenever you’re adding/editing a page. So if we open the “Home” page that we created above, you should see this button:

page-builder-1

Clicking the button will add a section like this:

page-builder-2

At this point, you’d select the kind of section you would like to add using the select field, once you’ve chosen a type of section you will see some options appear specific to that section. In this example, we’ll choose “Page”, these are the options that would appear.

page-builder-3

You’ll notice there are two sections, the top section are specific options for the “type” you selected, so in this case it’s the option to choose the page and to apply a background image if you want it to have a parallax background. The second section is available in every “type”, these are section specific options.

Section ID, is the ID attribute for that section, because this is a one-page theme, you will want to apply a section ID to each section so that you can click a link and be scrolled down to that section, so for example, if you’re adding an about section, you would give it the ID of about, so that you can create a link in the menu that links to “#about”, and when clicked it would scroll the user down to the about section.

The rest of the options are colour stylings, so you can set a background colour to differentiate each of the sections, as well as a border colour which shows above and below a section. The “accent colour” is the colour that is used for the main heading and the links (by default it’s blue) and the “text colour” is for the normal paragraph text. You can leave these colour sections blank to use the defaults.

To remove a section later you can simply click the “x” button in the top right of the section and save the page. If you would like to re-order a section, simply click and drag the header area of a section and you should be able to move the sections around, you’ll need to save the page for the changes to take effect.

We’ll go through each type of page section below.

Setting up the Home Banner

Firstly, we need to set up the slides for the banner, to do this navigate to the Slides -> Add New page in the admin.

Give your slide a title, this title wont show on the site, so it’s more for reference.

For best results the images you use should be a minimum of 1280 pixels width x 800 pixels height and a maximum of 1920 pixels width x 1000 pixels height. To upload the image, click the “Upload Image” button on the “Background Image” option, this will bring up the WordPress upload window, click the Select Files button and navigate to your image on your computer. You should see the image upload, once it’s finished uploading scroll down the window and select the “Full Size” radio button and click the “Use this file” button.

banner-1

The window should close and your image should appear.

Now fill out the “Heading” and “Sub Heading” fields, these are the two bits of text on the slide.

If you would like a button to show then you can fill out the “Button Label” field with the text you would like the button to show, the “Button Link URL” with the link for the button, and choose a colour if you would like to use a specific colour for the button background (if you leave this blank then it will default to the theme colour). If you would like the link to open in a new window, then add “_blank” to the “Button Target” field.

If you would like to add something else under the text on the slide, for example some social icons or multiple buttons via the shortcodes (more on shortcodes in the Shortcodes section below) you can use the “General Extra Content” editor.

Once you’ve finished adding your options click the “Publish” button to create your slide.

Repeat the process for all the slides you would like to add.

Now that we’ve added some slides, we can add the Banner section to the Home page, so go to the “Pages” section and scroll down to the page builder and click the “Add new page section” button and choose “Banner” from the “Type” select field.

If you just want it to show all slides then that’s all you need to do, just click the “Update” button for the page and if you go to the Homepage you should see the banner section show.

If you would like to show only specific slides (maybe you want to have multiple banner sections across the site), then you can fill out the “Show Specific Slides” field with the ID’s of each slide you would like to show, separated by commas. To get an ID of a slide just edit the slide in the admin and look at the address bar of your browser, you should see something like: http://simnorlabs.com/themeforest/themes/scrollin/wp-admin/post.php?post=13&action=edit, the ID is the number that comes after post=, so in this case it’s 13.

When you view the banner, you may notice that your slides are out of order, this is because WordPress shows the last one you added first, however you can use the free Post Types Order plugin to organise these posts into the order you would like.

Setting up a Blog Section

You may want to add a few posts before setting up the blog section. Blog posts are added via the “Posts” section of the admin area, you’ll need to upload a featured image to each post so that it has a background in the grid view blog section, if you don’t have an image then you can set the background colour for that grid tile by choosing the colour in the “Tile Background Colour” field under the post editor.

This theme has support for the standard, gallery, link, image and quote post formats.

Once you’ve added a selection of blog posts, we can move onto adding the Blog section to the home page. Go to the home page in the admin area and navigate to the page builder and click the “Add new page section” button and choose the “Blog” option from the “Type” select field. Give the section a heading and sub heading.
If you would like to just add posts from a specific category then you can choose that category in the “Category” field.

There are some additional options for the blog section under the “Blog” tab on the Appearance -> Theme Options page, these include:

The “Blog Spans” field, if you would like to specify a certain grid structure for the blog section you can add it here. The options you have are quarter, third, half, twothirds, so if you would like the first row to have two sets of half sized items, the second row to have three sets of third sized items, then you’d add “half,half,third,third,third”. The structure will just keep repeating for the number of blog posts that get shown.

By default the number of posts that will show is 6, if you would like a different number of posts to show then add the number in the “Number of posts to show” field in the “Blog” tab of the theme options. Finally, if you want the “View more link”, then you can add the link to the page you made earlier in the theme options.

Once you’re happy with your options, click the “Update” button for the page and you should see the Blog section appear on your home page.

Setting up the Call to action bar

The call to action bar is the bar with the heading and button that shows under the banner area, you can add this anywhere on a page. On the page builder, add a new section and choose the “Call to action bar” option. Add the text you would like to add in the “Heading” field. If you would like a button then fill out the “Button Label” and “Button Link URL” fields.

This theme uses the Font Awesome icon set for the icons, this means that at any point you can add icons by simply creating an <i> element with a class from the cheatsheet here (eg, <i class=”icon-trophy”></i> would show the trophy icon).

You will probably want to set the background colour for this section, you can do this by choosing the colour your would like using the “Background Colour” field.

Setting up the Contact section

To set up the contact section create a new page section and choose the “Contact” type and add the heading and sub heading you would like to use.

If you would like a Google Map in your contact section then fill out the “Map Latitude”, “Map Longitude” and “Map Info Window Text” fields under the “Contact” tab of the Appearance -> Theme Options page. To get the latitude and longitude values go to this site, in the “Address” field at the top of the site, add your address and click the “Go” button, on the map below a bubble will show with two values separated by a comma, the first value is the latitude and the second value is the longitude, add these values to the two fields in the theme options.

To set the contact details that appear to the left of the form, fill out the “Address”, “Phone” and “Email” fields in the theme options page, if you would like to show other contact details then you can do so in the “Extra Contact Information” field, you’ll need to add HTML code, so for example if you would like to show a skype ID, you would add this code:

<p><i class="icon-skype"></i> myskypeid</p>

This theme uses the Font Awesome icon set for the icons, this means that at any point you can add icons by simply creating an <i> element with a class from the cheatsheet here (eg, <i class=”icon-skype”></i> would show the skype icon).

For the contact form, we recommend the Contact Form 7 plugin, this is the plugin that is used in the demo. To add a contact form simply add the contact form shortcode into the “Contact Form Shortcode” field under the “Contact” tab of the theme options. To have it align in the same way as in the demo this is what you need to do:

Once you’ve installed the contact form 7 plugin, go to the “Contact” section of your admin, there should already be a contact form, edit this form. In the “Form” textarea you should see this:


<p>Your Name (required)<br />
[ text* your-name] </p>

<p>Your Email (required)<br />
[ email* your-email] </p>

<p>Subject<br />
[ text your-subject] </p>

<p>Your Message<br />
[ textarea your-message] </p>

<p>[ submit "Send"]</p>

You need to wrap the first three fields in a “.left” div element and the last two fields in a “.right” div element, so you would have something like this:


<div class="left"><p>Your Name (required)<br />
[ text* your-name] </p>

<p>Your Email (required)<br />
[ email* your-email] </p>

<p>Subject<br />
[ text your-subject] </p></div>

<div class="right"><p>Your Message<br />
[ textarea your-message] </p>

<p>[ submit "Send"]</p></div>

You should now have a form which has the three text fields on the left and the textarea and submit button on the right.

Setting up the Client Logos section

The client logos are added via the “Client Logos” section of the admin. Navigate to the Client Logos -> Add New page, give your logo a title for reference and add the client website in the “Client URL” field and then on the right side of the page, you should see a link labelled “Set client logo”, click this link and upload the client logo as you would a normal picture in WordPress, then click the “Set Featured Image” button. Click the “Publish” button and repeat the process for all the logos you would like to add.

Now go back to editing the home page and add a new section in the page builder, set the “Type” to “Client Logos”, add a heading and sub heading and then save the page.

If you would like to re-order your client logos you can use the free Post Types Order plugin to organise the logos into the order you would like.

Setting up a Page section

The page section can be used for free content sections such as the about section in the demo. You can also apply a parallax background image to this section so you can use it for a call out style section if you wish.

Firstly you need to create a page, you can check out the Shortcodes section below for instructions on how to use columns etc. to these pages. Once you’ve added a page, go to page builder on the Home page and add a new section with the type “Page”. You can then select the page you would like from the “Page” select field.

If you would like a parallax background image then you can upload it to the “Background Image for Parallax” field, the ideal image size should be the same size as you’ve used in the home banner section.

Save the page and you should see the page appear as a section on the home page. The heading and sub heading are taken from the actual page, so for example if the page you added was the “About” page, then the heading for the section would be “About” and the sub heading would be the text you added to the “Sub Heading” field on the actual about page.

Setting up a Portfolio section

You can add portfolio items via the “Portfolio Items” section of the admin. Navigate to Portfolio Items -> Add New. Give your portfolio item a title and some content like you would a normal post, and set the “Featured Image”, this is the image that shows on the Portfolio section of the home page.

The filtering in the Portfolio section uses the Portfolio Categories, you can add these whilst in a post by clicking the “+ Add New Portfolio Category” link in the right hand sidebar:

portfolio-1

In the text field that appears, give your category a name and click the “Add New Portfolio Category” button. The category will appear ticked in the box above, this category will now show on all future portfolio items you add. To assign a portfolio item to that category, you just need to tick the tickbox next to the category name.

If you would like a portfolio item to not show in the portfolio grid on the home page, you can simply tick the “Hide from the portfolio section on the home page” checkbox in the options under the editor.

Each portfolio item can have a widget appear in the sidebar of the portfolio item, this is great for listing the skills you used in a project or a general piece of information, you can leave these fields blank if you would rather not have a widget show.

Finally, you can add some Portfolio Images, these images will display in a gallery above the portfolio item, the user can then navigate through the images. To add a new image, click the “Add new image” button, then upload an image to the “Image” field and set a caption in the “Caption” field if you would like some text to appear on top of the image.

Once you’ve added some portfolio items we can add the Portfolio section to the home page. Go back to editing the home page and add a new section in the page builder, choose the “Portfolio” type, and give the section a heading. Save the page and you should see the portfolio section on your home page.

If you don’t want to have a link to the actual portfolio item (so the portfolio is simply the gallery with the lightbox on the home page) then you can tick the “Hide the link icon” option under the “Portfolio” tab of the Appearance -> Theme Options page.

If you would like to re-order your portfolio items you can use the free Post Types Order plugin to organise the portfolio items into the order you would like.

Setting up a Services section

The services are added via the “Services” section of the admin, so navigate to Service -> Add New to add a new service. Give your service a title and some content, and select the icon you would like to use by clicking the “Select Icon” button under the editor. If you would prefer to use an image as the icon then you can upload it to the “or upload an icon” field.

Once you’ve added your services you can add a service section to the home page. In the page builder, add a new section and choose the “Services” type, add a heading and sub heading and save the page. Your services section should appear on the home page.

If you would like to re-order your services you can use the free Post Types Order plugin to organise the services into the order you would like.

Setting up a Team section

The team members are added via the “Team Members” section of the admin. To add a team member navigate to Team Members -> Add New. Add their name to the title field and add a small paragraph of text to the post editor, this text is what shows when you hover over a team member so keep it quite short so it can fit on. Set the featured image to the team members photo, image size should be 400 x 400 pixels for best results.

Under the post editor you can add the position in the company (eg, Design Intern) and add some social links. To add social links, click the “Add new social link” button, a new panel should appear, click the “Select Icon” button to choose the social media icon you want to use, and then add a link in the “Link” field.

Once you’ve added all your team members we can add a Team section to the home page, so go back to editing the home page and add a new page section. Choose the type “Team Members” and add a heading and sub heading and save the page. The team members section should now appear on the home page.

If you would like to re-order your team members you can use the free Post Types Order plugin to organise the team members into the order you would like.

Setting up a Testimonials section

You can add testimonials via the “Testimonials” section of the admin area. To add a new testimonial, navigate to Testimonials -> Add New. Give your testimonial a title for reference purposes, then add the testimonial text to the content editor. You don’t need to apply the blockquote styling, just add the text with the normal paragraph style. Under the editor you can add the “Credit Person Name”, this is the name of the person (eg, Joe Bloggs), the “Credit Company Name”, this is the company name (eg, ABC Company) and finally the “Credit Company Link”, this will link the company name to an external site. Click the “Publish” button to save your testimonial and continue to add as many testimonials as you wish.

Once you’ve added your testimonials, you can add the page section to the home page using the type “Testimonials”, give your section a heading and sub heading and save the page. Your testimonials should appear on the home page.

If you would like to re-order your testimonials you can use the free Post Types Order plugin to organise the testimonials into the order you would like.

Finalising the Home Page and adding the Menu.

Now that you’ve added the sections we need to bring it all together and create the menu and scrolling functionality.

Firstly, if you want to re-order the section on the home page, then edit the home page and scroll down to the page builder. To re-order the sections, all you need to do is hover over a section, press your mouse button down and drag the section into the position you would like, then release the mouse button. Once you’ve re-ordered, click the “Update” button to save the page and you should see the order of the sections change on your home page.

The next step is to give ID’s to each section, so click on the arrow button of each section to display the section’s options. Scroll to the “Section Styling and Settings” heading and underneath that you should see an option labelled “Section ID”, give the section an ID (it should be lowercase and not contain spaces or symbols). For example in the about section you should give it the ID or “about”, in the services section you should give it an ID of “services” and so on. For details on the colour options, read over the “Introduction to the Page Builder” section above.

Now that each section has a section ID, we can create the menu. So navigate to Appearance -> Menus. In the “Menu Name” field, add “Main Menu” and click the “Create Menu” button.

menu-1

The page will reload. On the left side of the page you will see a select field labelled “Main Menu”, choose the menu you just created and click the “Save” button.

Now we can add the items to the menu. As the menu will be linking to the sections on the home page you will want to use the “Custom Links” section. So let’s create a link to the About section. Under “Custom Links” add “#about” to the “URL” field and “About” to the “Label” field and click the “Add to Menu” button.

menu-2

You should see an item appear on the right side of the page, continue to add these links for each of the sections you would like to link to.

To add a home link, click the “View All” tab of the “Pages” box (it should be underneath the “Custom Links” box), and then tick the “Home: Home” option and click the “Add to Menu” button.

Once you’ve added all your links, click the “Save Menu” button.

For more detailed instructions on setting up menus you can follow the guide here.

You should now have a fully functioning menu which scrolls between the sections on the home page.

Introduction to using the Shortcodes plugin

This theme uses my “Simnor Shortcodes” plugin which can be found here.

In your WordPress admin area, navigate to Plugins -> Add New.

In the “Search” field type “Simnor Shortcodes” and click the “Search Plugins” button.

shortcodes_1

Click the “Install Now” link.

shortcodes_2

You should then get a message alert appear, click “OK”.

It will then download and install the plugin for you, once completed click the “Activate Plugin” link. You will then have Simnor Shortcodes fully installed. When you next go to add/edit a page or post you should see a new button on the toolbar that looks like this:

shortcodes_3

In the editor place your cursor where you would like the shortcode to appear and then click the toolbar button, this will open an inline window. Clicking a tab on the left of this window will give you the options for each individual shortcode, fill out the options and then click the “Insert Shortcode” button and the shortcode will appear in your editor.

Adding Column Shortcodes

To add a column, make sure you have the shortcodes plugin installed by following the section above. To add the columns click on the shortcodes button:

shortcodes_3

Choose the columns tab from the left and then choose a column structure you would like to use:

shortcodes-1

Under the column structure images you will see a number of textareas, add some text into each one, this can just be basic text like “Column 1″ and “Column 2″ for now and then click the “Insert Shortcode” button, you should see something like this appear in the editor:

shortcodes-2

You can now replace the “Column 1″ and “Column 2″ bits of text with normal content (headings, paragraphs, images etc.) just make sure you keep it in between the shortcode dividers, for example:

….on=”a”]

KEEP YOUR LEFT COLUMN CONTENT HERE

[/simnor_col]

Using the Sidebars

The site comes with two widget ready sidebars, one for the blog section (blog posts, archive pages etc.) and one for the individual portfolio items. You can add widgets to these sidebars via the Appearance -> Widgets section.

Additional Help

If you require additional help, then please visit the support area at http://simnorlabs.com/support