The Themify Parallax theme and how I am using it
From the older tutorial originally published 15 July 2014. Updated 9 April 2017.
I might also update this tutorial again.
Understanding the structure. Express version:
Part 1.
Create a section category. For instance Front.
Create a front page/welcome page etc. Scroll to the bottom Select Query Sections tab and then select the Front section category.
Create a few Sections. For instance news, services, about, team, contact us and connect them with the front section category.
Create a Main navigation menu with the Sections you just created.
Test your site. Hopefully you’ll have a parallax effect. With the various sections after each other. (To change the order just change the time they were created or use a plugin.)
Recap: Front scroll to bottom page is built up by various sections connected through the same category and called through the front page.
Part 2.
Create a Highlight Category called Services.
Create Highlights Web, Video and photo, Graphic design etc. Connect these in with the services category. Scroll below the content creation area and modify the highlights. Add a button (Themify Shortcode) OR a regular link with just the # symbol. Link will be added later.
Create a new Section name it Our Services. Then use this shortcode highlight category=”Services” limit=”10″ and include the opening [ and closing ] bracket. The Services section will now call the highlights from the category Services.
Check the page. As you scroll and come to the Services section the highlights should show up.
Part 3.
There are certain steps one needs to take to see more details from each service highlight.
This is somewhat similar to part 1.
Create a new “regular” page. Call it Services we offer. This page will “house” the various more detailed information on services.
Create Sections for each service offered.
Create a new menu and call it Services. Add the various new Service Sections just created and perhaps also a link back to the home page area.
Go to the Services we offer page and scroll to the bottom. Select the tab Page Options -> Custom Menu and then select Services menu.
Last step. Go back to each highlight and remove the # and add a link something like this: /services-we-offer/#web (name of the new Services page and name of each section in their own link).
Btw! If your getting some additional coloring of text. Go to the highlight -> Text and see if an additional color code has happend to get in there. It happened with my highlights.
Part 4.
The blog page. Clicking a post so it jumps to a new screen area makes the menu not work.
Here is an example of a web page with parallax sections:
domainname.com/#blog,
domainname.com/#contact etc
Clicking a post the url becomes simiarl to this:
domainname.com/postname/ (In a new screen area)
Clicking the menu will just add the #blog or #contact after domainname.com/postname/#blog leading no where.
To correct this we have to add the absolute URL meaning the full domain name to the front page menu items.
Go to your front page menu and add the https://domainname.com/ in front of each #contact, #about, etc item. Save the menu and test the site.
Creating the parallax effect by creating sections
To get the parallax effect with this theme one has to create what Themify call sections.
I have already created a few regular WordPress pages (home and blog page and assigned them through the Settings -> Reading to Front and Posts page) and now I am going to create a few sections.
Sections – Independent blocks used to create a parallax effect.
Add New (Sections)
Section Category – Gather the blocks into one category to be called from a regular WordPress page/post.
The following is an example.
Begin by creating a Section Category.
Why? Because sections need to be added into one category that will be called from the home/front page.
Name: main page section
Slug: main page section
Parent: None
Description: A section category to be used on the front page area.
Click Add New Section Category.
Create a new Section. (Click Add New or the Sections area and Add New)
Why? Because we want to use the parallax 1-page effect when a visitor comes to the web site. To do so we create sections.
Title: Contact us
Subtitle: Send us a message
Section Categories: Select the section category you created OR add a new section category.
Create other sections that you want to have seen on the front page in a parallax scrolling way.
For instance a blog page, about us, team, etc. Add all of these to the same category section.
Adding a category section to the home page.
Why? Because the home page is the first page that is seen on a web site and is where we want to add the parallax effect.
I went to my regular home page and below the content area in the Themify Custom Panel -> Query Sections.
I clicked the drop down beside Section Category and selected the main page section Category.
Clicked Update.
Adding sections to the menu.
Why? Because we want our sections in the order we want them in seen in the main menu of the site.
Go to appearance -> Menus
Create a new menu. I called my Main Menu.
If you do not see the Sections area you will need to click Screen Options (located top right of screen) and check Sections.
Add the sections you want to use to the new menu. Be sure to check Theme locations – Main Navigation or Footer Navigation.
Click Save Menu.
– Check the site –
Suggestions on things to adjust.
Sections might not come in the order you want them in.
Either adjust the time when the post was published for each section or download a plugin that adjusts posts in a list.
I use Intuitive Custom Post Order to adjust my page and post list by dragging them up or down to create the order that I want them in. https://wordpress.org/plugins/intuitive-custom-post-order/
Parallax (to go to the framework). Default Layouts. Be sure that Index, Single Post and Page Layout all have a full screen – third option selected to turn off any sidebar area (if you do not plan on having a sidebar that is).
Hide Title in All Pages – Yes –
Page Comments – Disable comments in all Pages-
Click Save.
Theme Settings. I turned off Exclude RSS Link and the Search Form.
Added some text to Footer Text 1.
WordPress Settings -> Permalinks -> Post name.
Adjusting the section
The grey/blackish background behind the sections look pretty ugly but it is easy to go back to each section go to the bottom and look at the modifications options that are present.
Tip!
To change the background image of the top area go to your home page and scroll to the bottom to Themify Custom Panel -> Page Options and add your own image. If you just want one color then create an image with just one color.
Adding members to the Teams post type
Next up I am going to add members to the Teams post type (seen in the sidebar).
I began by adding a Team Category and just called it Team.
Next. I added a member by clicking the Add New (under Teams).
Gave it my own name of Paal Joachim Romdahl.
Some information about myself in the content area.
Inside the Themify Custom Panel:
– I added a Featured Image
– In the Team Member Position I called myself “Designer” (as it is one of my roles).
– Skill Set:
[progress_bar label="WordPress" color="#825ab1" percentage="80"] [progress_bar label="Adobe Programvare" color="#088c72" percentage="80"]
– Social Links:
[team-social label="Facebook" link="https://www.facebook.com/PaalJoachimRomdahl" icon="facebook-square"] [team-social label="LinkedIn" link="https://www.linkedin.com/in/paaljoachimromdahl" icon="linkedin-square"] [team-social label="Youtube" link="https://www.youtube.com/user/paaljoachim" icon="youtube-square"] [team-social label="Twitter" link="https://twitter.com/Paaljoachim" icon="twitter-square"] [team-social label="Google+" link="https://plus.google.com/u/0/102090004847939414307/posts" icon="google-plus-square"]
I looked at the demo content to see how this was done and I also found the Parallax theme documentation page: https://themify.me/docs/parallax-documentation#team-posts . Icons used are from: https://fontawesome.io/icons/ I added another member in the same way as the one above.
Creating a Team member section
(If you have not created a team member section)
Create a new section.
I called mine “team”.
Subtitles I wrote “Our Team”.
One then needs to add a shortcode to have all the individual team member pages show up.
( https://themify.me/docs/parallax-documentation#team-posts ) I just added the [team] to see what it looked like.
Then added the team section to the menu and checked the page. It showed up but needs some work. A background image/color etc.
I can also play with the shortcode code with parameters listed at the above link.
Styling the Blog page
Create some posts that also include a featured image. Then go to the Blog page.
Go to the bottom of your Blog page (not blog section).
Click the Query Posts tab.
In Post Category select a category or All Categories.
Post Layout: Select the layout for your blog posts.
Display Content: Excerpt (none or full)
Make whatever other changes you want.
Click Update to save the page.
Styling the Blog section page
Go to the section blog page. Click the Themify icon inside the TinyMCE menu (The area with various icons).
Select List Posts in the drop down. Select only two things from the list: excerpt and grid2. The code will look like this:
themify_list_posts display=”excerpt” ( Add the beginning bracket [ and the end bracket ] around your code)
Click Update to save the page.
Go to the menu area. (Appearance -> Menus)
Add the blog page to your menu. Be sure that the blog page AND the blog section page are added to the same menu.
Save the menu.
– Check the site –
The tricky error
While checking your site. Hover over the blog page and the blog section page and notice the difference in the URL (in the status area bottom left).
The blog page will have a /blog/ and the blog section page will have (an anchor link) #blog.
Clicking the #blog will move further down on the same one page site.
Clicking /blog will move to the blog page not just further down the same one page site. If you click one of the sections while on the /blog.php page nothing will happen. Because you have actually clicked to go to another page and not further down the same one page site.
Just a bit confusing….
There are some options here:
– One page site: On the main page be sure to only use section pages so it scrolls down to the page section.
– Multiple pages: If you include regular pages it will then go to the page. Not using the parallax at all.
Next up…
I am going to create a new parallax one page screen for Services.
Create a new Section Category: Services.
Create a few Sections. The name of your services. For instance: Web Design and SEO etc. Add content to these. Adjust the colors add an image etc in the Section Options area below the content.
Create a new menu: To only show specific services offered. I called mine Services menu. Add the new sections just created to the menu and add for instance some text with a link back to home or whatever. To give a clear signal on how to go back to the main page.
Create the regular WordPress page: Our Services
Scroll below the content area to the Themify Custom Panel -> Page Options and select the Custom Menu you just created.
Add a new Header image for instance the same image you used for your Services section (used in the front page parallax).
Inside Themify Custom Panel -> Query Sections select the Section Category Services (or whatever you called it).
Update to save the page.
The last bit. Open your Services section. The one used on your main front page parallax. Change the text to create a teaser to get people to click the read more – get more details about your services. Link to Our Services WP page (the name I used).
As this page is associated with the Services Section Category and also is associated with the Services Custom Menu.
Ok this takes a while to get used to.
Highlights
Is a way to create some extra attention to for instance the Services section.
So I decided to try it out.
I first created a Highlights Category. I called mine Services.
Then I created two highlights for both the services that I offer.
For one of them I added an Icon (click Insert Icon). I selected the i (for info). For the other section I selected the highway icon.
Added an Icon Color: 257d45
Bar Percentage: 85. I might change this to 100.
Bar Color: addebf
Copied the highlight id of both highlights into the Services section. Checked how it looked on the front but they came after each other vertically and not next to each other in a nice row.
I need to place the highlights into a grid and the code I found that fits for two highlights is:
highlight style=”grid2″ category=”Services”
( Add the bracket in the beginning [ and the bracket in the end ] to open and close the code.)
They are now nicely placed beside each other.
TIP!
Adding a link. Either add a standard text link at the bottom of each section below the short info about the service OR add a themify shortcode (Themify shortcode icon) and add a button. So people can click the link for more info.
Since I added a new parallax one page section for Services earlier I added the link to each of the services I offer inside the highlights (teaser) section. The links will then look like this: domain name.something/services/#web-design and the other domain name.something/services/#seo. The link wil then go directly to the relating service offered on the services parallax page.
The code will place them next to each other.
Other grid styles are: grid3, grid2, grid2-thumb. Similar to list posts.
From the demo page https://themify.me/demo/themes/parallax/highlight
“Use [ highlight ] posts to display short list items with icon such as feature list or services. You can choose between 4-column, 3-column, 2-column or grid2-thumb. For examples: you can display a 3-column list from “Services” category and a 4-column list from “Features” category.”
An example:
highlight limit=”4″ title=”yes” image_w=”125″ image_h=”125″ category=”services”
( Add the bracket in the beginning [ and the bracket in the end ] to open and close the code)
Suggestions for improvements to the Parallax Theme.
Having the possibility to add posts and pages directly to a section and section category.
Having a simple way to select if clicking sub pages should open in a new parent menu parallax page with sub pages as sections below. OR if these should open in an accordion right below where it was clicked.
Clicking a blog entry. Can open in a new parallax page with entries within the specific category listed as sections below. The one clicked will then be in focus on this new page.
