Morpheus – Ultimate Parallax WordPress Theme
By Collision
A how-to guide that helps you out in customizing your new theme.
First, we would like to thank you for purchasing this theme!
This document covers the installation and use of this theme and often reveals answers to common problems and issues - We encourage you to read this document thoroughly if you are experiencing any difficulties.
TABLE OF CONTENTS
1.2 Setting up the homepage. Meet Page Sections
1.2.1 Getting deeper into the Page Sections Features & Functions
1.4 Setting up your Portfolio page section
1.6 Setting up a Team page section
1.7 Setting up a Clients page section
1.8 Setting up a Pricing tables page section
1.9 Sliders. Flex slider and Layer slider
2.4.8 Pricing tables shortcode
2.4.18 Tabs and Accordions shortcodes
To instal this theme you must have a working version of Wordpress already installed (3.8+). For further information on how to instal Wordpress please visit http://codex.wordpress.org/Installing_WordPress
You must first upload the theme files and then activate the theme itself. The theme files can be uploaded in two ways:
Once the theme is uploaded, you need to activate it. Go to Appearance → Themes and activate Morpheus.
Alright! This theme functions by adding one or several Page Sections to a simple Page. So let’s create some Page Sections first!
Go to wp-admin → Page Sections → Add new and name it Intro (for ex). Then create some more Page Sections like Contact, Clients, etc. We will talk later about Page sections features and functions. Right now you need to understand how this website works.
After we created some page sections, let’s create a Page that will display them in a specific order (go to wp-admin → Pages → Add new) and name it “Home” (for example). This Home page will be your actual website.
Now check out the right side panel under Page Attributes. Click the Template drop down menu and select Page with sections. Now under your page title(name) a drop-down menu appears from where you can select what Page sections, this home page will contain. Arrange them in whatever order you like by dragging and dropping them and click Publish. There is one last thing you need to do : go to wp-admin → Settings → Reading and select "A static page". Then from the "front page" dropdown below, select your newly created page. Click "save changes". You've got your parallax website up and running now!
Alright! Each Page section has the following features:
Each parallax background can be an image, a video, a slider or a pattern.
Read the next section inside this documentation for further info about parallax backgrounds.
The rest is very intuitive so we won’t talk about those here...
Ok! The cool part of this theme are those nice parallax backgrounds that you can set for each page section. Let’s get deeper into understanding how they work.
Inside the wp-admin page there’s a menu called Parallax. Let’s go there and select Add new background.
Let’s say we want to add a full-screen video background on our Intro page section (we created that in 1.2).
Set it’s name to “fs-yt-video-bg” - from full screen youtube video background. Then select the video checkbox and enter it’s embed code inside the background video content area. Check the Mute video to mute it when it automatically plays. Also you can display a mute/unmute icon over it for your users by checking the Mute button option.
We also added the image replacement option for mobile devices because there’s a small glitch with the parallax videos on mobile devices.
Just select an image for your background to get that cool fullscreen background image with parallax scroll effect.
Add a cool pattern image background.
Ok! Here, you can choose one of those two sliders that we integrated in this theme. The layer slider or the flex slider. Also before that don’t forget to create these sliders. We’ll talk about that later inside the Sliders section of this documentation.
To set up your portfolio you must follow two simple steps:
Go to wp-admin and select Portfolio → Add new. Each portfolio item has several options and features. Let’s check them out:
2. Create the Portfolio Page Section
After you created your actual portfolio, you need to display it somewhere right? So let’s go to the admin panel, select Page Sections → Add new, name it Portfolio and fill it with your portfolio by using our built-in shortcode manager. Press the Insert shortcode button and select Portfolio.
! IMPORTANT
Press the insert shortcode button and that’s all! Don’t forget to assign this page section to your homepage or whatever page. Also don’t forget to customize this page section. We’ve talked about that in the previous sections of this documentation.
This is easy! Go to the admin panel under Pages → Add new, set the title to Blog (for ex) and from the right side panel under Page Attributes → Template, select the Default Template. Also set a featured image to achieve that cool background image parallax effect on top. There is one last thing you need to do : go to wp-admin → Settings → Reading and select your newly created page as the "posts page". Click "save changes". That’s all! You've got a fresh new blog page now. Just add some posts to it!
Additionally, you got some more cool options here also. Let’s say you want to display your latest posts on your Home page. In order to do that, we gotta create a new Page Section called Our Blog (maybe) and by using our shortcodes generator select Blog.
A pop-up window will appear with some cool features to this shortcode. Let’s analyze them:
! IMPORTANT
Again! To display this, don’t forget to attach this new Page Section to an actual Page (homepage for ex.) We’ve talked about customizing page sections and display them on Pages in the previous chapters of this documentation. You need to read that in order to make it work ;)
Again! You have to follow two easy steps in order to do that. First, you gotta create a team and add some members to it and then you gotta create the page section that displays this team or several teams.
Go to wp-admin panel and select Team → Teams from the left side menu. Name your team and select the Add new button. Let’s give it the “My team” name for example. Now we gotta add some members to this team. Go to Team → Add new member, set your team member’s name, insert some description - maybe add some social buttons by using our Social Icon shortcode, set a featured image - like it’s face or something and don’t forget to assign this new member to the team that we’ve just created (My team) -under right side panel called Teams.
Ok! We’ve created a new team full of awesome members, but now we need to display it somewhere right?
We gotta create a new Page Section - admin panel → Page Sections → Add new, give it the “Our team” title and inside it’s content, let’s use again our shortcode generator! Press the insert shortcode button and select Team.
A pop-up appears again! Let’s check it out:
That should do it!
! IMPORTANT
Again! Don’t forget to attach this new Page section to an actual Page to display it. We’ve talked about customizing page sections and attach them to a Page in the previous chapters of this documentation. You need to read that in order to make it work ;)
And again! You have to follow two easy steps in order to do that. First, you gotta create a group of clients and add some logo images to it and then you gotta create the page section that displays them.
Go to wp-admin panel and select Clients → Groups from the left side menu. Name your group and select the Add new button. Let’s give it the “Clients list” name for example. Now we gotta populate this group with some logos. Go to Clients → Add new client. Set it’s name (Adidas for example) and it’s featured image (like it’s logo).
Don’t forget to assign this new client to the group that we’ve just created (Client list) -under right side panel called Group.
Ok! We’ve created a new group full of awesome clients, but now we need to display it somewhere right?
We gotta create a new Page Section - admin panel → Page Sections → Add new, give it the “Our clients” title and inside it’s content, let’s use again our shortcode generator! Press the insert shortcode button and select Clients.
A pop-up appears again! Let’s check it out:
That should do it!
! IMPORTANT
Again! Don’t forget to attach this new Page section to an actual page (home page for ex). We’ve talked about customizing page sections and display them on Pages in the previous chapters of this documentation. You need to read that in order to make it work ;)
You have to follow two easy steps in order to do that. First, you gotta create a group of pricing tables and add some options to it and then you gotta create the page section that displays that group.
Go to wp-admin panel and select Pricing Table → Tables from the left side menu. Name your group and select the Add new button. Let’s give it the “Pricing tables” name for example. Now we gotta populate this group with some pricing options. Go to Pricing Table → Add new option. Set it’s name (“Professional” for example) and add some content. We used this:
<ul>
<li>10,000 messages</li>
<li><strong>unlimited</strong>data</li>
<li><strong>unlimited</strong>users</li>
<li>first 10 day free</li>
</ul>
Don’t forget to assign this new table to the group that we’ve just created (Pricing tables) - under right side panel called Tables.
Ok! We’ve created a new group full of awesome pricing options, but now we need to display it somewhere right?
We gotta create a new Page Section - Page Sections → Add new, give it the “Our prices” title and inside it’s content, let’s use again our shortcode generator! Press the insert shortcode button and select Pricing table.
A pop-up appears again! Let’s check it out:
That should do it!
! IMPORTANT
Again! Don’t forget to attach this new Page section to a Page in order to view it. We’ve talked about customizing page sections and attach them to Pages in the previous chapters of this documentation. You need to read that in order to make it work ;)
This theme comes equipped with two cool sliders for you to use. Let’s see how we can set them up:
The Flex slider is your simple option as a slider. In order to set it up, you need to create first a slider by going to wp-admin Flex slider → Add new. Then set a name (flex slider for example) and add some image assets.
Now, we’ve created a new flex slider but we didn’t use it yet. Again you got two options:
Don’t forget that this only sets up a parallax background with a flex slider inside. In order to display it on a page, you need to create a new Page section with a flex slider background (select that under Parallax background dropdown).
For further info on creating Page sections and it’s features read previous chapters of this documentation.
This is the complex option of creating a cool slider. It’s kinda the same process as in creating a flex slider but with more options. Check out wp-admin → LayerSlider WP menu button.
The advantage of this slider is that you can create Slides with layers. You can animate these layers, add texts, or even shortcodes and animate them all. Also a really nice option of this slider is that cool parallax effect on layers when you move the mouse. Check it out! It’s really awesome.
You’re right! We bought this slider for you, so you saved some money! :)
We've also added a skin called "Morpheus" to it, check it out
This theme comes packed with some cool features that control and extend the functionality of WordPress. This section will document those features and how to use them successfully.
Ok! Let’s go to the admin panel and select Appearance → Menus. We can create a new menu or edit the existing ones (that come with the demos). In the demo content we used two menus: the main menu and the footer menu.
After you create your menus, you can add those Pages and Page Sections that we’ve created in the previous chapter of this documentation. If you don't see the page sections to the left of the menu, click on "Screen Options" (top right of the page) and check the "page sections" checkbox. The interface is intuitive so you shouldn't encounter many problems…
Also, if you want to change the way your menu looks like, you will find some cool options under Appearance → Theme Options → Header tab.
This theme comes equipped with some cool options that will help you out in customizing it fast and easy without editing any css code.
Under wp-admin panel go to Appearance → Theme Options. You will find several tabs here. Let’s check them out a bit:
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
This will add those fonts to those font dropdown menus that you find inside the next tab called Typography.
Change fonts for titles or content fast and easy. Find this option under → wp-admin → Appearance → Theme Options → Typography tab.
Also we’ve carefully selected some google fonts and created some nice typografy with them. Find them under short-code manager → Text Types.
Yes! This is the smart part of this theme. There are several built-in shortcodes that will help you out in creating beautiful pages. Insert them by using our shortcode-manager. Let’s see them:
Any content can be split into multiple columns. This shortcode will help you to split your content into half, thirds, etc.
Just like in columns, any content can be split into multiple rows.
Use this shortcode to create and save button styles. You can set colors, borders, radiuses, etc. Safe your buttons as button templates and reuse them wherever you want.
Your page doesn’t look right? Would you like some smart padding? No problem! Use this shortcode to define smart paddings and center your content correctly.
We’ve created a beautiful slider called Flex Slider for you to use in your pages. Just add the Flex slider shortcode and there you go!
This shortcode displays the team members inside a team group that you have to create.
Displaying your portfolio works has never been more easier. Display specific categories, split the content into columns, set the number of works you want to display, etc.
Display your pricing tables in a cool way using this shortcode. Don’t forget that you have to create your group of price tables before!
You’ve worked for many clients and you want to display them in a cooler way? No problem! Use this shortcode to show their logos on a page.
Generate a really cool minimalistic contact form just by adding this shortcode. You can also set some colors in order to make it work with the rest of the page. Yeah! You don’t have to edit any CSS.
Show your visitors where your business is located by using one of those cool google maps. Set saturation, latitude/longitude, zoom, size, etc. You will also need a google maps api key in order to make the maps work
Don’t be afraid, getting an API key (and integrating it) is really fast and simple:
Step 1. Follow this link and click on Get a key:
Step 2. Agree with the service Terms of Service:
Step 3. Choose a name for your new key and specify the websites on which the key usage will be allowed. If you don’t need any website restriction, just put an * in that field (but don’t leave it blank, unless you are having issues with *! See comments for further information). Then click on Create:
Step 4. Write down your brand new API key, and click OK
Got some skills? Why not display them to your users.
Getting social is really important these days so use this shortcode to set-up some cool social icons. Attach them to anything you like (team members, contact forms, etc)
If you want to display your latest blog posts on any other page, you can easily do that by using this shortcode. Set columns, text colors, etc.
Useful for product launch time remaining or events/festivals.
A more complex slider that we bought for you. Create slides with animated layers on top of them.
Helpful for displaying your latest tweets.
Organize your content under tabs and accordions.
Uselful for creating cool typographic effects.
Useful for centering your content inside the page section.
There are two page templates that you can choose from:
First make sure you have layer slider installed and activated!
Ok! Let’s go to the admin panel and select Appearance → Install Demo . Choose one of the demos, and click the install button. Do not navigate away from the page until u see the success confirmation!
If you have already installed a demo and want to try another one, you will have to bring your wordpress installation to its default state first. This basically means deleting everything, so think twice about this and make backups of your content if necessary. Here are the steps:
That's it, if you go to admin/appearance/install demo, you will see all the demos and can choose to install one.
Thank you again for purchasing this theme! Enjoy!
If you like it and have a few moments to spare, pls give it a rating on themeforest