To install themes with the WordPress theme uploader:
Download the "theme.zip" file from the Member Area
Note: some browsers (eg. Safari) auto extract zip files automatically. Right-click on the download link and select "Save Linked File As". This will allow you to download the theme as a zip file.
Login to your site's WP Admin.
Go to Appearance > Themes.
Click on the "Add New" button, then click on the "Upload Theme" button
Upload the theme.zip file (note: it is the theme.zip, not the theme-psd.zip that you just downloaded from the Member Area).
Activate the theme
FYI: You can also install themes with FTP method. Read the Installing Themes tutorial for more info.
Demo Import
If you are starting a fresh site, importing the demo content will help you understand how the theme demo is built. The Demo Import feature will import the contents (posts, pages, comments, etc.), Themify panel settings, menus, and widgets setup from our demo to your site. You can erase the demo content afterward.
To import the demo setup:
Go to WP Admin > Themify > Settings > Demo Import and click "Import Demo" button.
Note that the featured images will be replaced with an image placeholder for copyright reasons.
To erase the demo setup:
On the Demo Import tab, click on the "Erase Demo" button which will then remove the demo content.
FYI: If the Demo Import does not work on your site, you can use the WP Admin > Tools > Import tool to import the demo content manually.
Site Logo & Tagline
To display a logo image instead of the site name text:
Go to WP Admin > Appearance > Customize > Site Logo and Tagline.
Under "Site Logo", select "Logo Image" radio button.
Upload a logo image.
Specify the logo image width and height.
You can also change website Tagline from here:
Go to WP Admin > Appearance > Customize > Site Logo and Tagline.
Scroll down and under "Site Tagline" select "Text" radio button.
Enter your site Tagline.
Click "Save & Publish".
Main Navigation Menu
To create a custom navigation menu:
Go to WP Admin > Appearance > Menus.
Click on "create a new menu" to create a new menu (eg. Main Menu).
Add the menu items from the left panels.
To create a dropdown menu: drag the menu item towards the right (the item(s) will be indented).
When you are done adding the menu items, click "Save Menu".
To assign menu locations:
Scroll down to the bottom where it says "Theme locations" and tick the menu location checkbox.
Main Navigation = main menu on the header
Footer Navigation = footer menu on the footer (Note: some themes might not have Footer Navigation).
TIPS: You can display menus on sidebar widgets, remove the main menu, create empty links, and lightbox links. Read Custom Menus for more detailed tutorial.
Mega Menu
The Mega Menu feature enables you to make the most of the WordPress menu by showcasing featured posts and multi-column dropdowns with various links and widgets.
To use the Mega Menu:
To make use of the Mega Menu feature, you'll first need to set up the menu at WP-Admin > Appearance > Menus.
Once you've created the menu (follow the steps below), you can assign that menu as the 'Main Navigation,' and the mega menu will appear in the primary navigation area of your theme. Note: Mega menu support is available only in the following themes: Ultra, Shoppe, Music, Parallax, Fullpane, Peak, and Magazine. If your theme doesn't support the mega menu feature, you can still use the Builder Menu module to display it.
You can display the mega menu using the Builder's Menu module. Simply drop in a Menu module, choose the menu you've configured with the mega menu feature, and then enable the "Mega Menu" option.
To create Mega Posts on the mega menu dropdown:
Go to WP-Admin > Appearance > Menus, add a new menu or edit any existing menu.
Add a "Pages" or "Custom Links" and select "Mega Posts" on the Mega Menu dropdown option.
Next, include 'Tags' or 'Categories' as link types in the nested menu. For instance, you would set the Blog page link as the parent link and then nest the categories/tags links. When users hover over the Blog link, they will be able to see the recent posts of the corresponding categories/tags within the mega menu dropdown.
Note: The nested items must be Tags or Categories. This will display recent posts associated with the chosen tag/category. If the Tags option is not visible, click on the 'Screen Options' located in the top-right corner, and ensure that the 'Tags' option is checked.
To set Fullwidth Columns:
Add a "Pages" or "Custom Links" and select "Fullwidth Columns" on the Mega Menu dropdown option.
Select the column layout from the preset that appears - Default is set to "Auto",
Then add any link (Pages, Posts, Custom Links, Tags, Categories) or widgets. This will display nested links in multiple columns.
Setting Navigation Titles Above Nested Links:
Utilizing the 'Fullwidth Columns' option, you can also establish header titles that appear above the nested links. To achieve this, simply add an additional layer of nested links beneath the initial set of nested links, as demonstrated in the screenshot below:
To set Dropdown Columns:
Add a "Pages" or "Custom Links", select the "Dropdown Columns" option, and then select the number of columns (2, 3, or 4).
Then add any link (Pages, Posts, Custom Links, Tags, Categories) or widgets. This will display the nested links in the number of columns as you selected.
To add Widgets in the mega menu:
Select the "Widgets" link type and select the widget from the dropdown menu option.
Click "Add to Menu" and customize the widget as you like (eg. you can drop in a Text widget and enter your custom text).
Setting Up the Social Links
Step 1) To set up the social media links:
Go to WP Admin > Themify > Settings > Social Links tab.
The theme comes with some pre-filled social links. Simply enter your social profile URL in the Link input field. For example, enter 'https://twitter.com/themify' for the Twitter link.
You can choose to display either "Icon Font" or "Image".
If "Icon Font" is selected, click on "Insert Icon" to select an icon (over 320+ icons available).
If "Image" is selected, you can upload your own graphic icon by clicking on the Upload button.
To add more links, click on the Add Link button at the bottom.
To remove a link, click on the delete icon.
To arrange the display order, drag and drop the link container.
Step 2) Displaying the Social Links:
Once you have the Social Links setup, go to WP Admin > Appearance > Widgets. Drag and drop the Themify - Social Links from the Available Widgets panel to the Social Widget panel.
Optional: Customize Widget Title - such as "Follow Us". You can also "Show link name" and adjust icon size.
Hiding the RSS Icon
To hide the default RSS icon in the header:
Go to WP Admin > Themify > Settings > Theme Settings.
Under the "Exclude RSS Link", tick the checkbox that says "Check here to exclude RSS icon/button in the header".
Hiding the Search Form
To hide the default search form in the header:
Go to WP Admin > Themify > Settings > Theme Settings.
Under the "Exclude Search Form", tick the checkbox that says "Check here to exclude search form in the header".
Menu Links With Icons
You can add Font Awesome icons next to menu items.
If CSS Classes option is not visible: click on Screen Options on the top right
Tick the checkbox labeled "CSS Classes".
Enter the icon name in CSS Classes option. (i.e. icon-twitter, icon-facebook etc)
Other filters available for advanced developers are:
themify_mega_menu_html: allows to change the markup of each mega menu. Note that this is repeated for each mega menu branch to provide consistency.
themify_mega_columns_html: allows to change the markup of each columns menu. Note that this is repeated for each columns menu branch to provide consistency.
Building Magazine Layouts With Themify Builder
The Magazine demo is built with Themify Builder using Post and Slider - Posts module. Watch the video below to see how the Magazine homepage is built.
Quick Builder Guide:
Create a new Page (eg. Home)
In the page's Themify Custom Panel, you can select the sidebar option and hide page title (optional)
Select Display=Blog Posts video button and select a category
You may customize the slider options as you like
Displaying banner ad:
Drop in a Text module
Insert the ad code (eg. Google Adsense code) in the editor => Text (HTML) mode
Custom Front Page
You may build a custom page with the Builder and then set it as the front page: go to wp-admin > Settings > Reading and select the page as the front page display (read Custom Front Page detailed tutorial).
Breaking News
To enable the Breaking News: go to Themify > Settings > Theme Settings and select a category for the breaking news. The category name will be used in the breaking news graphic tag.
Related Posts
Related posts are displayed in the single post page below the content by default. To disable or change the related post options, go to Themify > Settings > Theme Settings.
Fixed Header
To disable fixed header, go to Themify > Settings > Theme Settings and check "Check to disabled Fixed Header".
Social Share
Social share buttons are displayed in the single post page below the post meta. To disable social share, select "No" from the Post Share dropdown in Themify > Settings > Theme Settings.
Widgetized Banner Areas
To display banner ad/code as shown in our demo:
go to WP > Appearance > Widgets
drop a Text Widget in the widget panel
enter the ad code or HTML banner in the Text widget:
you may also insert Google Adsense or any ad code as you like
The following widgetized areas are designed for banner ads:
Header Widget = for displaying 728x90 banner in the header area
Sidebar Narrow = for displaying 160x600 banner in the narrow sidebar
Sidebar Wide = for displaying 300x250 banner in the wide sidebar
Before Content Widget = for displaying 468x60 banner in the single post page before the content
After Content Widget = for displaying 250x250 banner in the single post page next to the related posts container
Displaying Videos Instead of Featured Images
To display a video instead of featured image in the posts, insert the Video URL in the post's Themify Custom Panel. Read this documentation for more details.
Lightbox Media
To link the featured image with a lightbox popup such as image zoom, video or an iframe window, enter the URL in the Lightbox Link field under the Themify Custom Panel. The Themify Custom Panel can be found in the post edit page.
Sample iframe: https://themify.me?iframe=true&width=100%&height=100% (you need to add ?iframe=true at the end of the URL)
Inserting Gallery to Posts or Pages
The gallery can be inserted in any post or page. To insert a gallery, click on "Add Media" button
It will open a lightbox for you to create and insert gallery. Read this tutorial for more details on how to use WordPress Gallery.
Setting Default Post and Page Layouts
Generally, the theme works out of the box. All the sidebar options and image dimensions are pre-defined in the theme. If you need to change the default sidebar options, featured image dimensions, content/except display, post meta, etc., it can be done in the WP Admin > Themify > Settings > Default Layouts.
There are three default layout options under Themify > Settings > Default Layouts:
Archive Sidebar Option: refers to the default home page, category, search, archive, tag pages, etc.
Default Post Layout: is the post page direct URL (also known as "Single Post").
First, create a new Page (go to WP Admin > Pages > Add New), name it "Blog" or any page title as you want.
View the page on the frontend, click "Turn On Builder".
Drop in a Post module and configure the options as you like.
Setting a Custom Front Page
You can set any page as the front (home) page. This means you can use the Builder to design the page and assign it as the front page. To set the Front Page:
Go to WP Admin > Settings > Reading.
On the Front page displays, select the "A static page (select below)" option and then select a "Front page".
Leave the "Posts page" default. If you want to create a custom Blog page, read this tutorial instead of setting the "Posts page".
Adding Widgets
To add widgets to widgetized areas (eg. sidebar and footer widgets):
Go to WP Admin > Appearance > Widgets.
The big panel on the left side shows all available widgets. The small panels on the right are the widgetized areas.
To add a widget: drag and drop the widget from the left panel to the right panel.
To remove the widget: drag the widget back to the left panel (Available Widgets panel). If you want to keep the widget setting for future use, drag it to the Inactive Widgets instead of the Available Widgets panel. It will save your widget settings. To retrieve the widget, drag the widget from Inactive Widgets panel instead of the Available Widgets panel.
Go to WP Admin > Themify > Skins, select a skin by clicking on the thumbnail and click Save.
Styling The Theme
To style the theme frontend appearance:
Go to WP Admin > Appearance > Customize.
It will take you to the Customize panel with live preview where you can style the appearance of the theme design (ie. color, background, font, spacing, border, etc.).
FYI: Refer to Customize documentation for more info.
Footer Widgets
To set the Footer Widget column layout, go to WP Admin > Themify > Settings > Theme Settings.
To drop the widgets in the Footer Widgets, go to WP Admin > Appearance > Widgets.
Footer Text
To replace the footer credit links:
Go to WP Admin > Themify > Settings > Theme Settings and enter the footer text.
HTML tags are allowed in the Footer Text.
To have empty footer text, tick the hide footer text checkbox.
Since framework v1.8.3, you can customize the theme using the frontend Customize Panel
This documentation will guide you through all the various settings available in the Themify framework's Styling panel, and will cover all the different options available.
We will be using the Basic theme as a base for this documentation, other themes may have different elements, however most will have the following settings available.
Structure
Themes are structured with specific areas which you can customize in the Styling tab, this structure is shown below:
Styling Panel
In the Styling panel you will see the following tabs:
The Body Font tab of the Styling panel is for altering the main body font of the theme, this is the main font style that all other text elements will inherit from. Some of these settings will be overridden in other styling settings, such as post titles, etc.
The above is an example of the body font, however all text elements may inheret attributes set in the Body Font tab.
There are multiple sections under Body Font:
Body Font Styles
These are properties applied to the body font as standard.
Body a:link
These are properties applied to the body font when a link is shown.
Body a:hover
These are properties applied to the body font when a link is hovered over by the user.
The Headings tab of the Styling panel is for applying styling to the various heading text styles in the theme which are used in post/page content and also inherited by elements such as post titles, page titles, etc.
Headings are used when editing a post/page and also within the template wherever a heading tag is used, which means that some elements (such as post titles) will inheret some of the properties of the Headings tab.
There are different sections in the headings section for each type of heading tag from h1 to h6 and each section includes various properties.
The Custom CSS tab of the Styling panel is for adding custom CSS code to the theme.
In the text area provided you can add any CSS code you wish to apply to the theme, and this will be added after any other styling of the theme.
Styling Properties
There are various styling properties available to be customized, and these will vary from tab to tab, however they all fit into the following categories:
Background Image: The background-image property sets an image for the background of an element. Background images can be set by either; selecting one of the already present backgrounds from the list of thumbnails, manually entering an image URL, or uploading an image. Checking "No BG image" will remove the background image.
Background Color: The background-color property sets a color for the background of an element. You can set a background color here as well, you can either manually enter a color code, or alternatively click the box next to the field and a color picker will appear.
Background Repeat: The background-repeat property sets if/how a background image will be repeated.
Repeat = The background image will be repeated both vertically and horizontally.
Repeat X = The background image will be repeated only horizontally
Repeat Y = The background image will be repeated only vertically
Do not repeat = No repeat
Background Position: You can set the position of the background image, this will determine where the background image begins - for example, setting it to right center would start the background image from the right of the element vertically centered.
Fonts
Font Family: The font-family property sets the font for an element. Use the dropdown menu to select a font family for the text element from a list of standard fonts.
Color: The color property sets the color of text for an element. You can specify the color by either by entering a color code manually or clicking the box next to the field to open a color picker.
Font Size: You can set the size of the font in the text element, and select the type of units to use from the dropdown (pixels, em, %)
Font Weight: The font-weight property sets whether text is normal or bold.
Font Style: The font-style property sets whether text is normal or italic.
Font Variant: The font-variant property specifies whether or not a text should be displayed in a small-caps font.
Line Height: You can set the height of each line in the text element, and select the type of units to use from the dropdown (pixels, em, %)
Text Transform: The text-transform property controls the capitalization of text.
Capitalize = Capitalizes the first letter of each word
Uppercase = Makes all words uppercase
Lowercase = Makes all words lowercase
None = No transform
Text Decoration: The text-decoration property specifies the decoration added to text.
Underline = Defines a line below the text
Overline = Defines a line above the text
Line through = Defines a line through the text
None = No decoration
Borders & Spacing
Border: Use the fields to set the color, size and style of the border on each side of an element, you can set color by entering a color code manually or clicking the box next to the field to open a color picker. Select 'Same for all' to reduce options to one setting for all sides.
Margin: Margin defines the space around elements. Use the fields to set the margin amount for each side of an element. Select 'Same for all' to reduce options to one setting for all sides.
Padding: Padding defines the space between the element border and the element content. Use the fields to set the padding amount for each side of an element. Select 'Same for all' to reduce options to one setting for all sides.
Width & Height
Width: You can set the width of an element, and select the type of units to use from the dropdown (pixels, em, %)
Height: You can set the height of an element, and select the type of units to use from the dropdown (pixels, em, %)
Positioning
Position: You can set the position of an element.
Static = Positions the element where it is placed within the normal flow of the layout.
Fixed = Positions the element at a set position, as set below in pixels from a side of the element (top/bottom, left/right), and it will remain here even when the page is scrolled.
Relative = Positions the element at a position relative to its normal position.
Absolute = Positions the element at a position, as set below in pixels from a side of the element (top/bottom, left/right), relative to the first non-static parent element.
Display
Display (Site Logo): The display property under site logo will allow you to select between two modes:
Site Title = This will output the site's title in the site logo element.
Image = This will output an image in the site logo element. You can select "Upload" to upload an image or enter the URL manually, and also set the dimensions of your logo here.
To install themes with the WordPress theme uploader:
Download the "theme.zip" file from the Member Area
Note: some browsers (eg. Safari) auto extract zip files automatically. Right-click on the download link and select "Save Linked File As". This will allow you to download the theme as a zip file.
Login to your site's WP Admin.
Go to Appearance > Themes.
Click on the "Add New" button, then click on the "Upload Theme" button
Upload the theme.zip file (note: it is the theme.zip, not the theme-psd.zip that you just downloaded from the Member Area).
Activate the theme
FYI: You can also install themes with FTP method. Read the Installing Themes tutorial for more info.
Demo Import
If you are starting a fresh site, importing the demo content will help you understand how the theme demo is built. The Demo Import feature will import the contents (posts, pages, comments, etc.), Themify panel settings, menus, and widgets setup from our demo to your site. You can erase the demo content afterward.
To import the demo setup:
Go to WP Admin > Themify > Settings > Demo Import and click "Import Demo" button.
Note that the featured images will be replaced with an image placeholder for copyright reasons.
To erase the demo setup:
On the Demo Import tab, click on the "Erase Demo" button which will then remove the demo content.
FYI: If the Demo Import does not work on your site, you can use the WP Admin > Tools > Import tool to import the demo content manually.
Site Logo & Tagline
To display a logo image instead of the site name text:
Go to WP Admin > Appearance > Customize > Site Logo and Tagline.
Under "Site Logo", select "Logo Image" radio button.
Upload a logo image.
Specify the logo image width and height.
You can also change website Tagline from here:
Go to WP Admin > Appearance > Customize > Site Logo and Tagline.
Scroll down and under "Site Tagline" select "Text" radio button.
Enter your site Tagline.
Click "Save & Publish".
Main Navigation Menu
To create a custom navigation menu:
Go to WP Admin > Appearance > Menus.
Click on "create a new menu" to create a new menu (eg. Main Menu).
Add the menu items from the left panels.
To create a dropdown menu: drag the menu item towards the right (the item(s) will be indented).
When you are done adding the menu items, click "Save Menu".
To assign menu locations:
Scroll down to the bottom where it says "Theme locations" and tick the menu location checkbox.
Main Navigation = main menu on the header
Footer Navigation = footer menu on the footer (Note: some themes might not have Footer Navigation).
TIPS: You can display menus on sidebar widgets, remove the main menu, create empty links, and lightbox links. Read Custom Menus for more detailed tutorial.
Setting Up the Social Links
Step 1) To set up the social media links:
Go to WP Admin > Themify > Settings > Social Links tab.
The theme comes with some pre-filled social links. Simply enter your social profile URL in the Link input field. For example, enter 'https://twitter.com/themify' for the Twitter link.
You can choose to display either "Icon Font" or "Image".
If "Icon Font" is selected, click on "Insert Icon" to select an icon (over 320+ icons available).
If "Image" is selected, you can upload your own graphic icon by clicking on the Upload button.
To add more links, click on the Add Link button at the bottom.
To remove a link, click on the delete icon.
To arrange the display order, drag and drop the link container.
Step 2) Displaying the Social Links:
Once you have the Social Links setup, go to WP Admin > Appearance > Widgets. Drag and drop the Themify - Social Links from the Available Widgets panel to the Social Widget panel.
Optional: Customize Widget Title - such as "Follow Us". You can also "Show link name" and adjust icon size.
Hiding the RSS Icon
To hide the default RSS icon in the header:
Go to WP Admin > Themify > Settings > Theme Settings.
Under the "Exclude RSS Link", tick the checkbox that says "Check here to exclude RSS icon/button in the header".
Hiding the Search Form
To hide the default search form in the header:
Go to WP Admin > Themify > Settings > Theme Settings.
Under the "Exclude Search Form", tick the checkbox that says "Check here to exclude search form in the header".
Designing Pages with the Builder
Step 1) To create the demo pages using our Builder as shown on our demo:
In WP Admin, go to Pages > Add New
Enter page title
On Themify Custom Panel:
Sidebar Option = No Sidebar
Content Width = Fullwidth
Hide Page Title = Yes
On Discussion panel, uncheck "Allow comments" to disable comments on this page
Publish the page and click "View Page" to view the page on frontend
Step 2) Using the Builder to construct the page content and layout:
From top WP Admin bar: select Themify Builder > Turn On Builder
Note: If you're not sure where or what a row or module is, refer here for details and to see a screenshot
Now you can drop any module on the page to construct the layout
Here are some basic Builder tips:
To start, drag & drop a module on the Builder grid.
Working with rows/columns:
To split the fullwidth row to multiple columns: hover on the right edge of the row (you will see a blue vertical bar) and drag towards the left to create different number of columns (ie. dragging to the most left will create 4-column).
Dragging the column dividers left/right can rearrange the column span/width.
Dragging the top bar of the row up/down can reposition the row
Each row can be styled differently:
To style the row: hover on the row menu icon (located on the upper left corner of the row) and select "Options"
Row background can be customized with background color, background image (either repeat, parallax scrolling, or fullcover), image slider, or a background video loop
Use padding or margin to control the spacing between rows (padding = spacing inside the row and margin = spacing outside the row)
When specifying the font, color, and link color in row styling, it will effect the appearance of all modules dropped in the row
Each module can be styled individually as well:
To style the module: double-click on the module to bring up the module option lightbox, then click on "Styling" tab
When specifying module styling, it will effect the individual module
You can export the Builder layout from the top Admin bar > Themify Builder > Import/Export > Export (it will prompt you to download a zip file which you may import to any post/page using the Import option)
The video below shows how to use the Builder such as dropping modules, controlling the grid, etc.:
FYI: There are more features available in the Builder. Please refer to the Builder documentation for more info.
ScrollTo Row Anchor
To achieve scrollTo row anchor:
First enter the Row Anchor name in Builder > Row > Options (e.g. "portfolio")
Then in the WordPress menu link (WP Admin > Appearance > Menu), insert the anchor name as link URL = "#portfolio" (basically add # in front of the anchor name)
When the #portfolio link is clicked or when users go the URL with the #portfolio anchor (eg. http://yoursite.com#portfolio), it will scroll to the row where it specified Row Anchor = "portfolio"
Full Height Builder Row
Full height row will set the height of the row in 100% viewport height and the row content will automatically align in the middle vertically.
You can set any page as the front (home) page. This means you can use the Builder to design the page and assign it as the front page. To set the Front Page:
Go to WP Admin > Settings > Reading
Select the "A static page (select below)" option and then select a "Front page"
Leave the "Posts page" default. If you want to create a custom Blog page, read this tutorial instead of setting the "Posts page".
Custom Page Menu
This theme allows you to assign a custom menu in the Main Navigation Menu of each individual page. Remember that this custom menu option is only available in Pages (not Posts).
To set custom Page menu:
First, make sure you have created the menu in Appearance > Menus
Then add or edit any page where you want to have a custom menu
In the Themify Custom Panel, under the "Custom Menu", select a menu from the dropdown
Portfolio Post Type
Adding Portfolio Posts:
Portfolio posts are designed to show multimedia work on your site.
To create a Portfolio post, select "Add New" under the Portfolios admin menu.
You can provide a title and description content using the standard WordPress edit page, and further customization options are available in the Themify Custom Panel.
Featured Image This option is used to set the featured image for the portfolio post. You can upload or use an image from the media library.
Slider Gallery This option is used to create an image gallery that will be displayed in a slider for the portfolio post. You can manually enter a gallery shortcode or use the "Insert Gallery" link to use WordPress' media panel.
Show Media This option is used to set how the media in the gallery will be displayed in the portfolio post.
Slider Gallery images will be output as a slider.
Image Gallery images will be output as images.
Image Dimensions This option is used to set the dimensions the portfolio images will be displayed at.
Hide Post Title This option is used to set whether the post title will be displayed.
Unlink Post Title This option is used to set whether the post title will operate as a link.
Hide Post Date This option is used to set whether the post date will be displayed.
Hide Post Meta This option is used to set whether the post meta will be displayed.
Hide Featured Image This option is used to set whether the featured image will be displayed.
Unlink Featured Image This option is used to set whether the featured image will operate as a link.
External Link This option is used to link the post featured image and title to a custom URL.
Lightbox Link This option is used to link the post featured image and title to open a URL in a lightbox. This defaults to expecting an image URL.
iFrame URL If checked, this will open the URL as an iFrame within the lightbox and can be used to open external URLs such as other pages or sites.
Add zoom icon on lightbox link This option sets whether a zoom icon will be shown on the featured image when set to a lightbox link.
Shortcode ID This will list the shortcode which can be used to display this portfolio post.
Displaying Portfolio Posts on Pages:
To display portfolio posts you can use either the "Query Portfolio" tab on pages or the [portfolio] shortcode elsewhere.
When creating or editing pages, you can use the "Query Portfolio" tab in the Themify Custom Panel to output a list of portfolio posts.
Portfolio Category This option is used to set which categories will be included or excluded in the post list.
Order This option is used to set whether posts will be ordered in ascending or descending order.
Order By This option is used to set the attribute that the order of the post will be based on.
Portfolio Layout This option is used to set the layout of portfolio posts, such as grid columns, list posts, etc.
Portfolios per page This option is used to set the number of portfolio posts shown per page.
Display This option is used to set what content is output for each portfolio post (None, Excerpt, or Full Content).
Image Dimensions This option is used to set the dimensions the portfolio images will be displayed at.
Hide Portfolio Title This option is used to set whether the post title will be displayed.
Unlink Portfolio Title This option is used to set whether the post title will operate as a link.
Hide Portfolio Date This option is used to set whether the post date will be displayed.
Hide Portfolio Meta This option is used to set whether the post meta will be displayed.
Hide Featured Image This option is used to set whether the featured image will be displayed.
Unlink Featured Image This option is used to set whether the featured image will operate as a link.
Hide Page Navigation This option is used to set whether the page navigation for portfolio posts will be displayed.
Displaying Portfolio Posts using Shortcodes:
If you are not using pages, you can use the [portfolio] shortcode to display Portfolio posts.
There are various parameters you can use with the [portfolio] shortcode to customise output, such as the following examples:
Display latest 8 Portfolio posts from Portfolio Category ID 13 in grid2 layout.
[portfolio category="web-design,illustration"]
Display latest Portfolio posts from portfolio categories Web Design and Illustration, given that their text slugs are "web-design" and "illustration".
Highlight Post Type
Adding Highlight Posts:
Highlight posts are designed to showcase features or services of your organization or team.
To create a new Highlight post, select "Add New" under the Highlights admin menu.
You can provide a title and description content using the standard WordPress edit page, and further customization options - such as providing an animated circular progress bar around the Highlight's image, and the color and percentage of the bar to fill - can be set in the Themify Custom Panel.
Featured Image This option is used to set the featured image for the highlight post. You can upload or use an image from the media library.
Image Dimensions This option is used to set the dimensions the highlight post featured image will be displayed at.
Bar Percentage This will set the percentage of the circular progress bar to be filled when animated.
Bar Color This will set the color of the circular bar around the highlight post icon.
External Link This option is used to link the post featured image and title to a custom URL.
Lightbox Link This option is used to link the post featured image and title to open a URL in a lightbox. This defaults to expecting an image URL.
iFrame URL If checked, this will open the URL as an iFrame within the lightbox and can be used to open external URLs such as other pages or sites.
Add zoom icon on lightbox link This option sets whether a zoom icon will be shown on the featured image when set to a lightbox link.
Shortcode ID This will list the shortcode which can be used to display this highlight post.
You can set an image or icon for the Highlight post using the standard featured image options and you can categorize the Highlight posts by selecting or adding new categories in the Highlight Categories panel.
Chart Bar Color
The default color for the chart bar can be set at Styling > Backgrounds > Chart Bar Color.
If there's a color set in the highlight, it will be used;
else it will use the color in theme settings if it's available;
else it will use #22d9e5 as last fall back.
The result is filtered using themify_chart_bar_color.
JS Plugin Vars Filter & Default Values (for developer)
The filter themify_chart_init_vars can be used to modify parameters passed to easyPieChart
To display the Highlight posts, simply enter the shortcode in the post/page content box. You can configure the result by adding various parameters such as the following examples:
= display latest Highlight posts from 'features' (slug) category
Available parameters:
style = grid4, grid3, grid2, full
limit = number of post to query (e.g. enter limit="4" will query 4 posts, enter -1 to query all posts)
category = category ID number or text slug (default = all categories). To find category ID number or text slug, click on "Highlight Category" link located under the Highlight admin menu
image = show featured image or not (yes, no, default = yes)
more_link = display a custom more link after the posts
more_text = text that will appear in more_link
Team Post Type
Adding Team Posts:
Team posts are designed to show the various members of your organization or team.
To create a new Team post, select "Add New" under the Teams admin menu.
You can provide a title and description content using the standard WordPress edit page, and further customization options - such as providing the Team member a position, skill set and social links - can be set in the Themify Custom Panel.
Featured Image This option is used to set the featured image for the team post. You can upload or use an image from the media library.
Image Dimensions This option is used to set the dimensions the team post featured image will be displayed at.
Team Member Position This option is used to set the position listed for this team member when outputted.
Skill Set This option field can be used to output content describing the team member's skills. You can use the progress bar shortcode in this field.
Social Links This option field can be used to output content providing links to the team member's various social networks. You can use the team social shortcode in this field.
Shortcode ID This will list the shortcode which can be used to display this team post.
Team members can be given images using the standard featured image options and you can categorize the Team posts by selecting or adding new categories in the Team Categories panel.
Team Social Link Shortcode
You can use the team social links shortcode to output various social links for team members. To display the social links, you can simply enter the shortcode in the post/page content box. You can configure the result by adding various parameters such as the following examples:
= display a link to the Facebook social network for the team member using the given label and image
Available parameters:
label = sets a label for the social link when output
link = sets the URL to be used for the social link
image = sets the URL to the image to be used as the social link icon
Displaying Team Posts:
To display the Team posts, simply enter the shortcode in the post/page content box. You can configure the result by adding various parameters such as the following examples:
= display the category 14 of Team entries up to a limit of 10 posts and using original dimensions for those entries that have width and height specified in Custom Panel
limit = number of post to query (e.g. enter limit="4" will query 4 posts, enter -1 to query all posts)
category = category ID number or text slug (default = all categories). To find category ID number or text slug, click on "Team Category" link located under the Team admin menu
image = show featured image or not (yes, no, default = yes)
more_link = display a custom more link after the posts
more_text = text that will appear in more_link
use_original_dimensions = use image width and height specified in the Team Entry Custom Panel
unlink_image = remove the link on featured image (yes, no, default=no)
unlink_title = remove the link on the post title (yes, no, default=no)
Progress Bar Shortcode
You can use the animated progress bars included with the Fullpane theme to display animated colored bars which will fill to customizable amounts and display labels when output.
Displaying Progress Bars:
To display the progress bars, you can simply enter the shortcode in the post/page content box. You can configure the result by adding various parameters, such as the following examples:
= display a progress bar labelled "Site Construction" with the bar being the hex color '2b99ee' and filled to 60%
Available parameters:
label = sets a label for the bar when output
color = sets the color the bar should be filled with
percentage = defines the percentage of the bar to be filled when animated
Timeline Post Type
Adding Timeline Posts:
Timeline posts are designed to show a chronological sequence of posts such as a company history or other sequence of events which can then be output in a timeline view on your site.
To create a new Timeline post, select "Add New" under the Timelines admin menu.
You can provide a title and description content using the standard WordPress edit page and set a featured image in the Themify Custom Panel.
Featured Image This option is used to set the featured image for the timeline post. You can upload or use an image from the media library.
Image Dimensions This option is used to set the dimensions the timeline post featured image will be displayed at.
Timeline posts can be given images using the standard featured image options and you can categorize the Timeline posts by selecting or adding new categories in the Timeline Categories panel. These categories will then be used to organize posts into a timeline.
Displaying Timeline Posts:
To display the Timeline posts simply enter the shortcode in the post/page content box. You can configure the result by adding various parameters such as the following examples:
= display the "Company Timeline" category of Timeline posts in ascending order up to a limit of 10 posts and using original dimensions.
Available parameters:
category = category ID number or text slug. Will output all Timeline posts in this category. To find category ID number or text slug, click on "Timeline Category" link located under the Timeline admin menu.
limit = number of posts to query (e.g. enter limit="4" will query 4 posts)
order = order to display timeline in (e.g. enter order="ASC" to list Timeline posts in ascending order, or order="desc" to list in descending order)
use_original_dimensions = use image width and height specified in the Timeline post custom panel
order = specifies ascending or descending order (ASC, DESC, default = DESC)
Testimonial Post Type
Adding Testimonial Posts:
Testimonial posts are designed to be used to show various forms of customer feedback such as user testimonials, customer reviews, client feedback, etc.
To create a new Testimonial post, select "Add New" under the Testimonials admin menu.
You can provide a title and description content using the standard WordPress edit page and set a featured image in the Themify Custom Panel, along with other information for the customer testimonial, such as author name and title.
Featured Image This option is used to set the featured image for the testimonial post. You can upload or use an image from the media library.
Image Dimensions This option is used to set the dimensions the testimonial post featured image will be displayed at.
Author Name Used to set the name of the author of the testimonial.
Title Used to set the title of the author of the testimonial such as their position at the company they represent.
External Link This option is used to link the post featured image and title to a custom URL.
Lightbox Link This option is used to link the post featured image and title to open a URL in a lightbox. This defaults to expecting an image URL.
iFrame URL If checked, this will open the URL as an iFrame within the lightbox and can be used to open external URLs such as other pages or sites.
Add zoom icon on lightbox link This option sets whether a zoom icon will be shown on the featured image when set to a lightbox link.
Shortcode ID This will list the shortcode which can be used to display this highlight post.
Testimonial posts can be given images using the standard featured image options and you can categorize the Testimonial posts by selecting or adding new categories in the Testimonial Categories panel.
Displaying Testimonial Posts:
To display the Testimonial posts simply enter the shortcode in the post/page content box. You can configure the result by adding various parameters such as the following examples:
[testimonial]
= display the Testimonial posts with default settings
= display latest Testimonial posts from 'client' (slug) category
Available parameters:
style = grid4, grid3, grid2, full, slider
limit = number of post to query (e.g. enter limit="4" will query 4 posts, enter -1 to query all posts)
category = category ID number or text slug (default = all categories). To find category ID number or text slug, click on "Testimonial Category" link located under the Testimonial admin menu
image = show featured image or not (yes, no, default = yes)
more_link = display a custom more link after the posts
more_text = text that will appear in more_link
Query Posts (Blog Page)
Query Posts allows you to query posts from any specified categor(ies). For example, you can create a page called "Blog" and query all posts from the blog category. To query posts on any page:
Add a new Page (e.g. Blog)
In the Themify Custom Panel, click "Query Posts" tab and select a Post Category
Then set the following options or leave them as default:
Order = display order of the posts (ascending or descending). Descending means newer posts show first.
Order By = sort queried posts by parameter: date, random, author, post title, comments number, modified date, post slug or post ID number.
Post Layout = pre-set layout of the posts.
Posts per page = number of posts to show per page.
Display Content = post content, excerpt, or none.
Image Width = featured image width.
Image Height = featured image height.
Hide Post Title = default post title is on. Select Yes to hide it.
Unlink Post Title = select Yes will remove the link on post title.
Hide Post Date = default post date is on. Select Yes to hide it.
Hide Post Meta = default post meta is on. You can select Hide All or hide individual meta: Author, Category, Comment, and Tag.
Media Position = position of the media container. Default media container appears below the post title.
Hide Featured Image = default featured image is on. Select Yes to hide it.
Unlink Featured Image = select Yes will remove the link on the featured image.
Hide Page Navigation = the page navigation of the query pages. Default page navigation is on. Select Yes to hide it.
Progress Bar Shortcode
You can use the animated progress bars included with the Flat theme to display animated colored bars which will fill to customizable amounts and display labels when output.
Displaying Progress Bars:
To display the progress bars, you can simply enter the shortcode in the post/page content box. You can configure the result by adding various parameters such as the following examples:
= display a progress bar labelled "Site Construction" with the bar being the hex color '2b99ee' and filled to 60%
Available parameters:
label = sets a label for the bar when output
color = sets the color the bar should be filled with
percentage = defines the percentage of the bar to be filled when animated
Inserting Gallery to Posts or Pages
The gallery can be inserted in any post or page. To insert a gallery, click on "Add Media" button
It will open a lightbox for you to create and insert gallery. Read this tutorial for more details on how to use WordPress Gallery.
Footer Widgets
To set the Footer Widget column layout, go to Themify > Settings > Theme Settings. To drop the widgets in the Footer_Widgets, go to WP Admin > Appearance > Widgets.
Footer Text
To replace the default footer text, go to Themify > Settings > Theme Settings and enter the footer text.
Section Post Type Removal
Note: since Flat 2.1.8, the Section post type has been removed. To provide backward compatibility, the Section posts and the Query Sections pages will remain functional if your site has existing Section posts. It is now easier to build the fullwidth section layouts with the Builder by following this tutorial.
Setting Default Post and Page Layouts
Generally, the theme works out of the box. All the sidebar options and image dimensions are pre-defined in the theme. If you need to change the default sidebar options, featured image dimensions, content/except display, post meta, etc., it can be done in the WP Admin > Themify > Settings > Default Layouts.
There are three default layout options under Themify > Settings > Default Layouts:
Archive Sidebar Option: refers to the default home page, category, search, archive, tag pages, etc.
Default Post Layout: is the post page direct URL (also known as "Single Post").
First, create a new Page (go to WP Admin > Pages > Add New), name it "Blog" or any page title as you want.
View the page on the frontend, click "Turn On Builder".
Drop in a Post module and configure the options as you like.
Setting a Custom Front Page
You can set any page as the front (home) page. This means you can use the Builder to design the page and assign it as the front page. To set the Front Page:
Go to WP Admin > Settings > Reading.
On the Front page displays, select the "A static page (select below)" option and then select a "Front page".
Leave the "Posts page" default. If you want to create a custom Blog page, read this tutorial instead of setting the "Posts page".
Adding Widgets
To add widgets to widgetized areas (eg. sidebar and footer widgets):
Go to WP Admin > Appearance > Widgets.
The big panel on the left side shows all available widgets. The small panels on the right are the widgetized areas.
To add a widget: drag and drop the widget from the left panel to the right panel.
To remove the widget: drag the widget back to the left panel (Available Widgets panel). If you want to keep the widget setting for future use, drag it to the Inactive Widgets instead of the Available Widgets panel. It will save your widget settings. To retrieve the widget, drag the widget from Inactive Widgets panel instead of the Available Widgets panel.
Go to WP Admin > Themify > Skins, select a skin by clicking on the thumbnail and click Save.
Styling The Theme
To style the theme frontend appearance:
Go to WP Admin > Appearance > Customize.
It will take you to the Customize panel with live preview where you can style the appearance of the theme design (ie. color, background, font, spacing, border, etc.).
FYI: Refer to Customize documentation for more info.
Footer Widgets
To set the Footer Widget column layout, go to WP Admin > Themify > Settings > Theme Settings.
To drop the widgets in the Footer Widgets, go to WP Admin > Appearance > Widgets.
Footer Text
To replace the footer credit links:
Go to WP Admin > Themify > Settings > Theme Settings and enter the footer text.
HTML tags are allowed in the Footer Text.
To have empty footer text, tick the hide footer text checkbox.
After several months of hard work, Themify is very excited to annouce our new drag & drop framework, Themify Builder. Unlike other drag & drop frameworks, Themify Builder provides easy to use user interface which allows you to arrange the content blocks on the frontend by dragging and dropping. In other words, what you see is what you get. The content blocks can be built using various modules: Text, Slider, Video, Image, Post, Gallery, Tab, Accordion, Menu, etc. It works on all post types such as post, page, and any custom post types registered by plugins such as WooCommerce. Also, shortcodes are supported within the Builder modules. Not to mention that Themify Builder is completely responsive and works on desktop and mobile devices. Watch the video below to see how it works and check this demo site built with the Builder.
Get It Now With Discounted Price!
To celebrate this awesome release, we are offering a 30% discount off all themes and club memberships. Use 'builder' coupon code on the sign up form to redeem the discount. Promotion ends on July 14, 2013. Here is the good time to join our club memberships because Themify Builder is included in all themes.
To install themes with the WordPress theme uploader:
Download the "theme.zip" file from the Member Area
Note: some browsers (eg. Safari) auto extract zip files automatically. Right-click on the download link and select "Save Linked File As". This will allow you to download the theme as a zip file.
Login to your site's WP Admin.
Go to Appearance > Themes.
Click on the "Add New" button, then click on the "Upload Theme" button
Upload the theme.zip file (note: it is the theme.zip, not the theme-psd.zip that you just downloaded from the Member Area).
Activate the theme
FYI: You can also install themes with FTP method. Read the Installing Themes tutorial for more info.
Demo Import
If you are starting a fresh site, importing the demo content will help you understand how the theme demo is built. The Demo Import feature will import the contents (posts, pages, comments, etc.), Themify panel settings, menus, and widgets setup from our demo to your site. You can erase the demo content afterward.
To import the demo setup:
Go to WP Admin > Themify > Settings > Demo Import and click "Import Demo" button.
Note that the featured images will be replaced with an image placeholder for copyright reasons.
To erase the demo setup:
On the Demo Import tab, click on the "Erase Demo" button which will then remove the demo content.
FYI: If the Demo Import does not work on your site, you can use the WP Admin > Tools > Import tool to import the demo content manually.
Site Logo & Tagline
To display a logo image instead of the site name text:
Go to WP Admin > Appearance > Customize > Site Logo and Tagline.
Under "Site Logo", select "Logo Image" radio button.
Upload a logo image.
Specify the logo image width and height.
You can also change website Tagline from here:
Go to WP Admin > Appearance > Customize > Site Logo and Tagline.
Scroll down and under "Site Tagline" select "Text" radio button.
Enter your site Tagline.
Click "Save & Publish".
Main Navigation Menu
To create a custom navigation menu:
Go to WP Admin > Appearance > Menus.
Click on "create a new menu" to create a new menu (eg. Main Menu).
Add the menu items from the left panels.
To create a dropdown menu: drag the menu item towards the right (the item(s) will be indented).
When you are done adding the menu items, click "Save Menu".
To assign menu locations:
Scroll down to the bottom where it says "Theme locations" and tick the menu location checkbox.
Main Navigation = main menu on the header
Footer Navigation = footer menu on the footer (Note: some themes might not have Footer Navigation).
TIPS: You can display menus on sidebar widgets, remove the main menu, create empty links, and lightbox links. Read Custom Menus for more detailed tutorial.
Setting Up the Social Links
Step 1) To set up the social media links:
Go to WP Admin > Themify > Settings > Social Links tab.
The theme comes with some pre-filled social links. Simply enter your social profile URL in the Link input field. For example, enter 'https://twitter.com/themify' for the Twitter link.
You can choose to display either "Icon Font" or "Image".
If "Icon Font" is selected, click on "Insert Icon" to select an icon (over 320+ icons available).
If "Image" is selected, you can upload your own graphic icon by clicking on the Upload button.
To add more links, click on the Add Link button at the bottom.
To remove a link, click on the delete icon.
To arrange the display order, drag and drop the link container.
Step 2) Displaying the Social Links:
Once you have the Social Links setup, go to WP Admin > Appearance > Widgets. Drag and drop the Themify - Social Links from the Available Widgets panel to the Social Widget panel.
Optional: Customize Widget Title - such as "Follow Us". You can also "Show link name" and adjust icon size.
Hiding the RSS Icon
To hide the default RSS icon in the header:
Go to WP Admin > Themify > Settings > Theme Settings.
Under the "Exclude RSS Link", tick the checkbox that says "Check here to exclude RSS icon/button in the header".
Hiding the Search Form
To hide the default search form in the header:
Go to WP Admin > Themify > Settings > Theme Settings.
Under the "Exclude Search Form", tick the checkbox that says "Check here to exclude search form in the header".
Theme Appearance & Page Appearance
Parallax is a versatile theme which allows you to configure the layout either globally or per-page basis. Understanding the difference between global and per-page basis will avoid confusions. This section will explain the difference with Theme & Page Appearance, and how it works.
Theme Appearance v.s. Page Appearance:
Theme Appearance = means the settings will apply to the entire site (i.e. on every page)
To set global Theme Appearance, go to Themify > Settings > Theme Settings (scroll down to Theme Appearance). All changes made here will be applied to your entire site (global)
Page Appearance = means the settings in the individual post/page that override the settings in the Themify panel. This overrides the customization you've done on the global Theme Appearance section for this particular page.
The Page Appearance can be set in the post/page edit > Themify Custom Panel > Page Appearance tab. Refer to the section below to see the various options that come with it
This means you would use the Themify panel to set the Theme Appearance for the entire site. If you want to have different Page Appearance in the individual post/page, then you would use the post/page's Themify Custom Panel > Page Appearance tab
Page Appearance Options
Under the Page Appearance, you will see the following options:
Header Design = header and page layout
Default = theme default (which is the Header Block)
Header Block = all header elements will be displayed in the center (this is the theme default)
Header Horizontal = header is displayed in compact mode horizontally, header elements (logo, menu, social icons, etc.) will be floated on the sides, header widgets will be hidden with a pull down button
Boxed Layout = the entire page wrap will be boxed with white background, header background retains
Left Pane = header will be in a fixed position on the left side
Right Pane = header will be in a fixed position on the right side
Min Bar = header is displayed in compact mode fixed vertically on the left side with a toggle menu button to expand the header content
Slide Out = header is displayed with a toggle menu button when clicked will slide out left the header content
Boxed Content = header background will be transparent, the content area will be boxed with a white background
Header Overlay = header is displayed with a toggle menu button when clicked full page overlay appears showing header content
Menu Bar = header is displayed in compact mode horizontally, only showing the menu
None = the entire header will be excluded
Sticky Header = header will be stuck at the top when scrolling down
Header Elements = select show/hide the header elements:
select "Hide" will hide the element
select "Show" will show the element
select "Theme default" will take settings from Themify > Settings > Theme Settings => Theme Appearance (i.e. if you want to have "Theme default", you don't have to select anything)
Header Background
Solid Background = allows you to pick background color and upload background image for the header
Transparent Background = header background will be transparent (note: the content container will push to the top of the page to achieve transparent header effect)
Slider = allows you insert an image slider in the header
Video = allows you to upload a mp4 video as the header background (note: video background does not play on mobile, background image will be used as fallback)
Header Text Color = color for the text in the header
Header Link Color = color for the links in the header
Footer Design = layout for the footer arrangement
Default = theme default (which is same as the Footer Block)
Footer Block = all footer elements (logo, menu, footer text, and footer-widgets) will be displayed in the center
Footer Left Column = footer elements will be on the left column with footer-widgets on the right column
Footer Right Column = footer elements on the right column with footer-widgets on the left column
Footer Horizontal Left = footer-logo on the left, footer-menu and footer-text on the right, with footer-widgets below
Footer Horizontal Right = footer-logo on the right, footer-menu and footer-text on the left, with footer-widgets below
None = the entire footer will be excluded
Site-wide Header Background
You can change the blog header image to any image or color that you'd like through the theme customization panel. To do, this go to your WP Admin > Appearance > Customize > Themify Options > Header > Under the header wrap option upload any image you'd like to replace the default blog header image with.
Page's Header Image, Slider, or Video Background
The general Header Background Image can be replaced at Appearance > Customize > Themify Options > Header > Header Wrap. The header background can also be applied differently per page basis. It can display either a background image, slider, or video background.
To insert a header image in the Page:
In WP Admin, add or edit any existing page
On the Themify Custom Panel > Page Options tab, select Header Type = "Image" and click "Upload" or "Browse Library"
Header Image Repeat:
Repeat = the image will be tiled (repeated)
Fullcover = the image will scale to fill completely in the header area
To insert an image slider:
Select Header Type = "Slider" and click "Insert Gallery" (then upload or select the images from library)
To insert a video background:
Select Header Type = "Video" and click "Upload" or "Browse Library" (video format should be in .mp4)
Image Filters
There are 3 different image filters built in the theme: Grayscale, Blur, and Sepia. Note that image filters only apply to the actual images on the page, not background images or videos.
To set global Image Filters:
Go to WP Admin > Themify > Settings > Theme Settings, under the Image Filter options, select:
Image Filter = will apply the filter to the image (default is none)
Image Hover Filter = will apply the filter when the cursor hovers on the image only
Apply to:
Featured Images Only = will apply to the post featured images only
All Images = will apply the filter to all images on the entire page
For example: if you want to have grayscale images and show the Sepia image filter on hover, you would select Image Filter = Grayscale and Image Hover Filter = Sepia.
To set the Image Filter per post/page individually:
To add or edit a post/page, in the Themify Custom Panel, select the Image Filter and Image Hover Filter
To set the Image Filter in Builder rows and modules:
To set the Image Filter in the Builder rows and modules, you would enter the image filter class name in the "Additional CSS Class" of the row or module options > Styling tab. Read more about Additional CSS Class.
Image Filter class names:
filter-grayscale
filter-blur
filter-sepia
Image Hover Filter class names:
filter-hover-grayscale
filter-hover-blur
filter-hover-sepia
filter-hover-none = will restore to original (i.e. no filter on hover)
Examples:
If you want to have grayscale image filter, you would enter 'filter-grayscale' in the "Additional CSS Class"
If you want to have sepia filter and hover to grayscale, you would enter 'filter-sepia filter-hover-grayscale' in the "Additional CSS Class"
How to Import Builder layouts
To import a pre-designed Builder layout:
Add a new Page.
On the page's Themify Custom Panel > Page Options,
select the options as you like
We recommend setting to fullwidth, no sidebar, and hide page title
Optional: on the Themify Custom Panel, click on "Page Appearance" tab to set the design appearance of this particular page.
On the Discussion panel, uncheck "Allow discussion" checkbox (this will disable the comments on the page).
Publish and view the page frontend.
Turn on the Builder on frontend, on the top admin bar, select Themify Builder > Layouts > Load Layouts.
A lightbox window will appear where you'll be able to toggle between Pre-designed, Parallax, Custom Builder, or Theme layouts. Click on "Theme" tab and click on a thumbnail image to import.
Pre-design tab consists of all Layouts in the Builder.
Parallax tab consists of all Layouts that have parallax scrolling effect.
Custom tab is where you find your own custom Layouts.
Theme tab consists of the layouts built specifically for this theme.
When it asks to replace or append the layout, click "Replace Existing Layout".
Now you may replace the images and text as you like.
Designing Pages with the Builder
The video below shows how to create the Parallax demo homepage using the Builder. Follow the step-by-step and the video to learn it.
Step 1) To create the demo pages using our Builder as shown on our demo:
In admin, go to Pages > Add New
Enter page title
On Themify Custom Panel:
Sidebar Option = No Sidebar
Content Width = Fullwidth
Hide Page Title = Yes
Header Type = select "Slider" and click "Insert Gallery" to insert the slider images (refer to the "Header Image, Slider, or Video Background" documentation on how to add your custom slider)
On Discussion panel, uncheck "Allow comments" to disable comments on this page
Publish the page and click "View Page" to view the page on frontend
Step 2) Using the Builder to construct the page content and layout:
From top admin bar, select Themify Builder > Turn On Builder
First row:
To start, drop in a Text module on the first row and enter your text. In our demo, we have two line of text: first line says "Services" is heading 2 and second line is heading 3.
Select 4 columns on the row layouts then drag and drop a Feature module:
Feature Title: Input any text you would like to appear at the bottom of the circle. On our demo we inserted the "Game Development" text.
Text Editor: Insert any text you would like to appear at the bottom of the feature title.
Layout: Choose the layout you would like your features module to appear. We chose the third layout.
Circle: Input the percentage that you would like the circle animation to be fill to. Stroke is the thickness of the circle animation. Choose the color that you would like on the color picker. There are 3 sizes: small, medium, and large.
To copy our demo here are the parameters we used.
Percentage: 80
Stroke: 2px
Color: #E8511C
Size: Medium
Icon Type: Choose to upload an icon or image. For the demo, we used the "fa-gamepad" icon and the #E8511C color for the background icon color.
Repeat these steps for the remaining 3 other columns. Below are the icon types and colors that we used for the following feature modules:
Column 2: Icon - "fa-video-camera"; Color - #7BB737; Size - Medium
Column 3: Icon - "fa-shopping-cart"; Color - #0FB3EC; Size - Medium
Column 4: Icon - "fa-mobile"; Color - #F346E8; Size - Medium
Hover the row menu icon and select Options and enter the following options:
Row Height: Fullheight (100% viewport height)
Background Image: Choose any image that you would like.
Background Mode: Parallax Scrolling
Font Color: White (#ffffff)
Second row:
Now drop another Text module on the second row and enter the text as you like. For this row we showed our Portfolio posts
Then drop in another text module and insert this Portfolio shortcode: [themify_portfolio_posts category="photos" limit="8" style="grid4" title="yes" post_meta="no" post_date="no"] - Refer to the Portfolio Post Type section to see how set-up your Portfolios.
If you would like to insert a button that's similar to the button we used on our demo press the smiley on the toolbar, choose "Button" and customize style as you like.(i.e.[button style="large rounded orange" link="https://themify.org/parallax/portfolio/" ]More Work[/button])
To customize the row: hover the menu icon located on top-left of the row > select Options
In the row options, enter the following options:
Background Color: Choose a background color.
Font: Pick a font color (we have white color #ffffff)
Padding: Enter 4% top padding and 4% bottom padding (padding means the spacing within the row container)
Third row:
On the third row drop a Text module and enter the text as you like. For the demo, we used this row to showcase our Social pages with title as heading 2 and subtitle heading 3
Then drop in another Text module. We separated our three social account into three columns. To do this insert the following shortcode:
Instagram: [col grid="3-1 second"]<h4 style="text-align: center;">Instagram</h4>[simply_instagram endpoints="users" type="recent-media" size="standard_resolution" display="9"][/col]Note: we use the Simply Instagram plugin from our demo to display the Instagram photos.
Again, hover the row menu icon and select Options and enter the following options:
Background: Pick a background image by browsing your media library (i.e. https://themify.org/parallax/files/2013/05/nightsky.jpg) and make sure for background mode to choose "Parallax Scrolling".
Font: Pick a font color (we have white color #ffffff)
Padding: Enter 4% top padding and 4% bottom padding (padding means the spacing within the row container)
Fourth row:
On the fourth row: drop in a Text module and insert the heading 2 and heading 3 text like the previous step (e.g. enter "Wanna Talk?" in heading 2 format)
Drop in another Text module below and insert the following shortcode to show contact form and google map: [col grid="3-2 first"][contact-form-7 id="22" title="Contact"][/col][col grid="3-1 last"]{insert Themify map shortcode}[/col]
Note: Make sure to download the Contact Form 7 plugin first to get the shortcode to work.
You can insert map shortcode by simply clicking the toolbar smiley and choosing maps
Go to the fourth row > Options and enter the following:
Background: Pick a background image by browsing your media library (i.e. https://themify.org/parallax/files/2013/05/contact.jpg) and make sure for background mode to choose "Parallax Scrolling".
Font: Pick a font color (we have Black color #00000)
Padding: Enter 4% top padding and 4% bottom padding (padding means the spacing within the row container)
Fifth row:
Similar to the above step: drop in a Text module and insert the heading 2 and heading 3 text (e.g. enter "Animated Bars" in heading 2 format)
Then drop in another Text module below the first Text module and insert Progress Bar shortcode (refer to our Progress Bar Shortcode in this documentation for more info on how to create a portfolio post). For our example we used:
Again, hover the row menu icon and select Options, enter the following options:
Background: Pick light blue background color (#4AB7FF) or any color as you like
Font: Pick a font color (we have white color #ffffff)
Padding: Enter 4% top padding and 4% bottom padding (you can enter any top and bottom padding as you like)
Sixth row:
Drop in a Text module and insert the heading 2 and heading 3 text (e.g. enter "Our Team" in heading 2 format)
Drop in another Text module below and insert the Testimonial shortcode (refer to the Testimonial Post Type in this documentation for more info about the Testimonial shortcode):[themify_team_posts style="grid4" display="none" limit="4" image_w="150" image_h="150"]Note: make sure you have added Team posts first, otherwise this themify_team_posts shortcode won't show anything.
Go to row > Options and enter the following:
Background: Pick a background image by browsing your media library (i.e. https://themify.org/parallax/files/2013/05/team.jpg) and make sure for background mode to choose "Parallax Scrolling".
Font: Pick a font color (we have Black color #00000)
Padding: Enter 4% top padding and 4% bottom padding (padding means the spacing within the row container)
Seventh row:
Drop in a Text module and insert the heading 2 and heading 3 text (e.g. enter "Call to Action" in heading 2 format)
For the buttons, we use the Themify Button shortcode:
[button style="rounded large white flat" link="https://themify.me/themes/parallax"]Buy Parallax[/button]
[button style="rounded large white flat" link="https://themify.org/parallax/home/home-2"]Demo 2[/button]
[button style="rounded large white flat" link="https://themify.org/parallax/home/home-3"]Demo 3[/button]
To insert a Themify Button shortcode: click on the Themify Smiley icon on the editor > select "Button" and enter the desired parameters
Again, hover the row menu icon and select Options and enter the following options:
Background: Pick light blue background color (#4AB7FF) or any color as you like
Font: Pick a font color (we have white color #ffffff)
Padding: Enter 4% top padding and 4% bottom padding (you can enter any top and bottom padding as you like)
Save: don't forget to save the Builder when you are done with each step.
FYI: There are more features available in the Builder. Please refer to the Builder documentation for more info.
ScrollTo Row Anchor
To achieve scrollTo row anchor:
First enter the Row Anchor name in Builder > Row > Options (e.g. "portfolio")
Place the text that you would like to appear on the menu navigation for this particular page
Then in the WordPress menu link, insert the anchor name as link URL = "#portfolio" (basically add # in front of the anchor name)
The WordPress menu link can be found in WP Admin > Appearance > Menu.
Press "Create a new menu" to create a new menu for your new page.
Input any menu name you would like (i.e. Homepage New Menu). Note: No one will see the menu name except you. Then save this menu.
On the left dropdown menu, choose "Links"
On the URL input the number sign (#) with the text that you used for the row on that page. Do not include any spaces.
On the Navigation Label, input the label you would like to appear. Then click Add Menu..
Repeat this for all the rows that you created.
After this go back to your page. Edit it.
Scroll down to the Themify Custom Panel > Page Options > Custom Menu. Choose the new one you just made.
After, update the page.
When the #portfolio link is clicked or when users go the URL with the #portfolio anchor (e.g. http://yoursite.com#portfolio), it will scroll to the row where it specified Row Anchor = "portfolio"
Full Height Builder Row
Full height row will set the height of the row in 100% viewport height and the row content will automatically align in the middle vertically.
Portfolio posts are designed to show multimedia work on your site.
To create a Portfolio post, select "Add New" under the Portfolios admin menu.
You can provide a title and description content using the standard WordPress edit page, and further customization options are available in the Themify Custom Panel.
Featured Image This option is used to set the featured image for the portfolio post. You can upload or use an image from the media library.
Gallery This option is used to create an image gallery that will be displayed in a slider for the portfolio post. You can manually enter a gallery shortcode or use the "Insert Gallery" link to use WordPress' media panel.
Image Dimensions This option is used to set the dimensions the portfolio images will be displayed at.
Hide Post Title This option is used to set whether the post title will be displayed.
Hide Post Meta This option is used to set whether the post meta will be displayed.
Hide Featured Image This option is used to set whether the featured image will be displayed.
Unlink Featured Image This option is used to set whether the featured image will operate as a link.
Video URL This option is used to use a video in place of the featured image. More information on video embeds is documented here.
External Link This option is used to link the post featured image and title to a custom URL.
Lightbox Link This option is used to link the post featured image and title to open a URL in a lightbox. This defaults to expecting an image URL.
iFrame URL If checked this will open the URL as an iFrame within the lightbox and can be used to open external URLs such as other pages or sites.
Add zoom icon on lightbox link This option sets whether a zoom icon will be shown on the featured image when set to a lightbox link.
Displaying Portfolio Posts
To display Portfolio posts in a Page:
create a new Page, click on "Query Portfolios" tab in the Themify Custom Panel
select a Portfolio category (other options are optional)
Portfolio Category This option is used to set which categories will be included or excluded in the post list.
Order This option is used to set whether posts will be ordered in ascending or descending order.
Order By This option is used to set the attribute that the order of the post will be based on.
Portfolio Layout This option is used to set the layout of portfolio posts, such as grid columns, list posts, etc.
Portfolios per page This option is used to set the number of portfolio posts shown per page.
Display This option is used to set what content is output for each portfolio post (None, Excerpt, or Full Content).
Image Dimensions This option is used to set the dimensions the portfolio images will be displayed at.
Hide Portfolio Title This option is used to set whether the post title will be displayed.
Unlink Portfolio Title This option is used to set whether the post title will operate as a link.
Hide Portfolio Date This option is used to set whether the post date will be displayed.
Hide Portfolio Meta This option is used to set whether the post meta will be displayed.
Hide Featured Image This option is used to set whether the featured image will be displayed.
Unlink Featured Image This option is used to set whether the featured image will operate as a link.
Hide Page Navigation This option is used to set whether the page navigation for portfolio posts will be displayed.
Feature This option controls what to show as the featured image. If you set it to "Gallery" and the portfolio item has the Gallery option set, a slider will be displayed in the listing page. The alternative (the "Image" option) is to always show the featured image.
Enable Portfolio Expander Enable or disable the portfolio expander.
Portfolio Shortcode
If you are not using pages, you can use the [themify_portfolio_posts] shortcode to display Portfolio posts. Paste the shortcode anywhere in the post/page content box or Text widget.
There are various parameters you can use with the [themify_portfolio_posts] shortcode to customize output, such as the following examples:
Display latest Portfolio posts from portfolio categories Web Design and Illustration, given that their text slugs are "web-design" and "illustration".
Additionally, you can use feature="image" parameter to disable the Gallery option for the portfolios (this will disable the portfolio slider and instead shows the featured image), and also use portfolio_expander="no" option to disable the portfolio expander (enabled by default).
Changing the portfolio permalink slug
To change the portfolio post base slug, go to Themify > Settings > Portfolio Settings. The default portfolio base slug is 'project' (e.g. it would be http://yoursite.com/project/portfolio-name). You may change it to anything (only lowercase letters, numbers, dash and underscore allowed). After you changed the base slug, go to WP admin > Permalinks and click on "Save changes" button to refresh the setting.
Team Post Type
Team posts are designed to show the various members of your organization or team.
Adding Team Posts:
To create a new Team post, select "Add New" under the Teams admin menu.
You can provide a title and description content using the standard WordPress edit page, and further customization options - such as providing the team member a position, skill set and social links - can be set in the Themify Custom Panel.
Featured Image = This option is used to set the featured image for the team post. You can upload or use an image from the media library.
Image Dimensions = This option is used to set the dimensions the team post featured image will be displayed at.
Team Member Position = This option is used to set the position listed for this team member when output.
Skill Set = This option field can be used to output content describing the team member's skills. You can use the progress bar shortcode in this field.
Social Links = This option field can be used to output content providing links to the team member's various social networks. You can use the team social shortcode in this field.
Shortcode ID = This will list the shortcode which can be used to display this team post
Team members can be given images using the standard featured image options, and you can categorize the Team posts by selecting or adding new categories in the Team Categories panel.
Team Social Link Shortcode
You can use the team social links shortcode to output various social links for team members. To display the social links, simply enter the shortcode in the post/page content box. You can configure the result by adding various parameters, such as the following examples:
To display the Team posts, simply enter the shortcode in the post/page content box. You can configure the result by adding various parameters such as the following examples:
= display latest (first) 8 Team posts from Team Category ID 13 in grid2 layout
Available parameters:
style = grid4, grid3, grid2, grid2-thumb, full
limit = number of post to query (e.g. enter limit="4" will query 4 posts, enter -1 to query all posts)
category = category ID number or text slug (default = all categories). To find category ID number or text slug: click on "Team Category" link located under the Team admin menu
image = show featured image or not (yes, no, default = yes)
more_link = display a custom more link after the posts
more_text = text that will appear in more_link
use_original_dimensions = use image width and height specified in the Team Entry Custom Panel
unlink_image = remove the link on featured image (yes, no, default=no)
unlink_title = remove the link on the post title (yes, no, default=no)
Progress Bar Shortcode
You can use the animated progress bars included with the Fullpane theme to display animated colored bars which will fill to customizable amounts and display labels when output.
Displaying Progress Bars:
To display the progress bars, you can simply enter the shortcode in the post/page content box. You can configure the result by adding various parameters, such as the following examples:
= display a progress bar labelled "Site Construction" with the bar being the hex color '2b99ee' and filled to 60%
Available parameters:
label = sets a label for the bar when output
color = sets the color the bar should be filled with
percentage = defines the percentage of the bar to be filled when animated
Query Posts (Blog Page)
Query Posts allows you to query posts from any specified categor(ies). For example, you can create a page called "Blog" and query all posts from the blog category. To query posts on any page:
Add a new Page (e.g. Blog)
In the Themify Custom Panel, click "Query Posts" tab and select a Post Category
Then set the following options or leave them as default:
Order = display order of the posts (ascending or descending). Descending means newer posts show first.
Order By = sort queried posts by parameter: date, random, author, post title, comments number, modified date, post slug or post ID number.
Post Layout = pre-set layout of the posts.
Posts per page = number of posts to show per page.
Display Content = post content, excerpt, or none.
Image Width = featured image width.
Image Height = featured image height.
Hide Post Title = default post title is on. Select Yes to hide it.
Unlink Post Title = select Yes will remove the link on post title.
Hide Post Date = default post date is on. Select Yes to hide it.
Hide Post Meta = default post meta is on. You can select Hide All or hide individual meta: Author, Category, Comment, and Tag.
Media Position = position of the media container. Default media container appears below the post title.
Hide Featured Image = default featured image is on. Select Yes to hide it.
Unlink Featured Image = select Yes will remove the link on the featured image.
Hide Page Navigation = the page navigation of the query pages. Default page navigation is on. Select Yes to hide it.
Infinite Scroll / Pagination Navigation
To set the pagination option, go to Themify > Settings > Theme Settings.
Infinite scroll means the posts are automatically loaded when it hits to the bottom of the page. If "Disable automatic infinite scroll" is checked, it will display a Load More button instead of auto loading.
Numbered page navigation will display the navigation in page number 1, 2, 3, etc.
Inserting Gallery to Posts or Pages
The gallery can be inserted in any post or page. To insert a gallery, click on "Add Media" button
It will open a lightbox for you to create and insert gallery. Read this tutorial for more details on how to use WordPress Gallery.
Section Post Type Removal
Note: since Parallax 1.6.6, the Section post type has been removed. To provide backward compatibility, the Section posts and the Query Sections pages will remain functional if your site has existing Section posts. It is now easier to build the parallax scrolling pages with the Builder by following this tutorial.
To install themes with the WordPress theme uploader:
Download the "theme.zip" file from the Member Area
Note: some browsers (eg. Safari) auto extract zip files automatically. Right-click on the download link and select "Save Linked File As". This will allow you to download the theme as a zip file.
Login to your site's WP Admin.
Go to Appearance > Themes.
Click on the "Add New" button, then click on the "Upload Theme" button
Upload the theme.zip file (note: it is the theme.zip, not the theme-psd.zip that you just downloaded from the Member Area).
Activate the theme
FYI: You can also install themes with FTP method. Read the Installing Themes tutorial for more info.
Demo Import
If you are starting a fresh site, importing the demo content will help you understand how the theme demo is built. The Demo Import feature will import the contents (posts, pages, comments, etc.), Themify panel settings, menus, and widgets setup from our demo to your site. You can erase the demo content afterward.
To import the demo setup:
Go to WP Admin > Themify > Settings > Demo Import and click "Import Demo" button.
Note that the featured images will be replaced with an image placeholder for copyright reasons.
To erase the demo setup:
On the Demo Import tab, click on the "Erase Demo" button which will then remove the demo content.
FYI: If the Demo Import does not work on your site, you can use the WP Admin > Tools > Import tool to import the demo content manually.
Site Logo & Tagline
To display a logo image instead of the site name text:
Go to WP Admin > Appearance > Customize > Site Logo and Tagline.
Under "Site Logo", select "Logo Image" radio button.
Upload a logo image.
Specify the logo image width and height.
You can also change website Tagline from here:
Go to WP Admin > Appearance > Customize > Site Logo and Tagline.
Scroll down and under "Site Tagline" select "Text" radio button.
Enter your site Tagline.
Click "Save & Publish".
Main Navigation Menu
To create a custom navigation menu:
Go to WP Admin > Appearance > Menus.
Click on "create a new menu" to create a new menu (eg. Main Menu).
Add the menu items from the left panels.
To create a dropdown menu: drag the menu item towards the right (the item(s) will be indented).
When you are done adding the menu items, click "Save Menu".
To assign menu locations:
Scroll down to the bottom where it says "Theme locations" and tick the menu location checkbox.
Main Navigation = main menu on the header
Footer Navigation = footer menu on the footer (Note: some themes might not have Footer Navigation).
TIPS: You can display menus on sidebar widgets, remove the main menu, create empty links, and lightbox links. Read Custom Menus for more detailed tutorial.
Setting Up the Social Links
Step 1) To set up the social media links:
Go to WP Admin > Themify > Settings > Social Links tab.
The theme comes with some pre-filled social links. Simply enter your social profile URL in the Link input field. For example, enter 'https://twitter.com/themify' for the Twitter link.
You can choose to display either "Icon Font" or "Image".
If "Icon Font" is selected, click on "Insert Icon" to select an icon (over 320+ icons available).
If "Image" is selected, you can upload your own graphic icon by clicking on the Upload button.
To add more links, click on the Add Link button at the bottom.
To remove a link, click on the delete icon.
To arrange the display order, drag and drop the link container.
Step 2) Displaying the Social Links:
Once you have the Social Links setup, go to WP Admin > Appearance > Widgets. Drag and drop the Themify - Social Links from the Available Widgets panel to the Social Widget panel.
Optional: Customize Widget Title - such as "Follow Us". You can also "Show link name" and adjust icon size.
Hiding the RSS Icon
To hide the default RSS icon in the header:
Go to WP Admin > Themify > Settings > Theme Settings.
Under the "Exclude RSS Link", tick the checkbox that says "Check here to exclude RSS icon/button in the header".
Hiding the Search Form
To hide the default search form in the header:
Go to WP Admin > Themify > Settings > Theme Settings.
Under the "Exclude Search Form", tick the checkbox that says "Check here to exclude search form in the header".
Welcome Message
To display a welcome text, go to Themify > Theme Settings and enter the html content in the Welcome Text box. You may also enter shortcodes in the welcome text box. Below is a sample welcome text in HTML format with two button shortcodes:
<h2>Welcome <em>to</em> Themify</h2>
<p>Curabitur vel risus eros, sed eleifend arcu.</p>
[button link="https://themify.me"]Learn More[/button] [button link="https://themify.me/themes"]Sign Up[/button]
Writing Posts
This theme supports a number of custom options for each post, allowing you to select between media type shown, the post background color and other styling options.
When writing or editing a post, you should see the Themify Custom Panel (see image above).
You can select a layout for the post, choosing between media being shown on the left, in full, or on the right.
The following fields are required for the different media types and should appear based on your selection:
Image: Featured Image, Image dimensions
Video: Video URL (youtube, vimeo embed url). Examples: "http://vimeo.com/22391248" or "//www.youtube.com/watch?v=Abjx1JJO1i8"
When adding the gallery, you can set the number of columns to display in the gallery by selecting the Columns parameter. For exmples: columns=3 means 3 images in each row. Selecting columns=1 will display all gallery images inline without any column.
The 'columns' parameter will output something like this:
This theme allows you to customise various styling options on a per post basis.
These include styling options such as the font family, size, color as well as background color and images. You can leave these empty to keep the default styles from the theme. If you want to override the default styles, then select the presets or enter your own custom options.
Lightbox Media
To link the featured image and post title with a lightbox popup such as image zoom, video or an iframe window, enter the URL in the Lightbox Link field under the Themify Custom Panel. The Themify Custom Panel can be found in the post edit page.
Check "Add zoom icon on lightbox link" will add an overlay zoom icon on the featured image
Query Posts (Blog Page)
Query Posts allows you to query posts from any specified categor(ies). For example, you can create a page called "Blog" and query all posts from the blog category. To query posts on any page:
Add a new Page (eg. Blog)
In the Themify Custom Panel, click "Query Posts" tab and select a Post Category
Then set the following options or leave them as default:
Order = display order of the posts (Ascending or Descending). Descending means newer posts show first.
Order By = sort queried posts by parameter: date, random, author, post title, comments number, modified date, post slug or post ID number.
Post Layout = preset layout of the posts.
Posts per page = number of posts to show per page.
Display Content = post content, excerpt, or none.
Image Width = featured image width.
Image Height = featured image height.
Hide Post Title = default post title is on. Select Yes to hide it.
Unlink Post Title = select Yes will remove the link on post title.
Hide Post Date = default post date is on. Select Yes to hide it.
Hide Post Meta = default post meta is on. You can select Hide All or hide individual meta: Author, Category, Comment, and Tag.
Media Position = position of the media container. Default media container appears below the post title.
Hide Featured Image = default featured image is on. Select Yes to hide it.
Unlink Featured Image = select Yes will remove the link on the featured image.
Hide Page Navigation = the page navigation of the query pages. Default page navigation is on. Select Yes to hide it.
Portfolio Post Type
The Portfolio post type is very much like Post. The purpose of Portfolio post type is to showcase your work that is separate from the blog posts.
To add Portfolio posts:
Click "Add New" under the Portfolio admin menu.
Enter the title and content.
Upload a featured image.
Select a post colour and media type for the portfolio item.
To display multiple images instead of a single featured image you can use either the Slider or Gallery media type, and add the IDs for a number of images into the "Gallery" option section, or alternatively use the "Insert Gallery" link.
You can categorize the Portfolio posts by adding new portfolio categories in the Portfolio Categories panel (eg. you can categorize them as: Illustration, Web, Photos, etc.)
Portfolio Layout Options
To set the layouts of portfolio index and portfolio single page, go to Themify > Settings > Portfolio Layouts.
Default Index Portfolio Layout = applies to the Portfolio category pages
Default Single Portfolio Layout = applies to the Portfolio single post page
Changing the portfolio permalink slug
To change the portfolio post base slug, go to Themify > Settings > Portfolio Settings. The default portfolio base slug is 'project' (eg. it would be http://yoursite.com/project/portfolio-name). You may change it to anything (only lowercase letters, numbers, dash and underscore allowed). After you changed the base slug, go to WP admin > Permalinks and click on "Save changes" button to refresh the setting.
Query Portfolios (Portfolio Page)
Similar to Query Posts, you can query Portfolio posts from any specified categor(ies).
To create a Portfolio page:
Add a new Page (eg. Blog)
In the Themify Custom Panel, click "Query Portfolios" tab and select a Portfolio Category
The other options such as title, meta, featured image, etc. can be left blank or default (refer to Query Posts above to learn more about these options)
Infinite Scroll / Pagination Navigation
To set the pagination option, go to Themify > Settings > Theme Settings.
Infinite scroll means the posts are automatically loaded when it hits to the bottom of the page. If "Disable automatic infinite scroll" is checked, it will display a Load More button instead of auto loading.
Numbered page navigation will display the navigation in page number 1, 2, 3, etc.
Inserting Gallery to Posts or Pages
The gallery can be inserted in any post or page. To insert a gallery, click on "Add Media" button
It will open a lightbox for you to create and insert gallery. Read this tutorial for more details on how to use WordPress Gallery.
Setting Default Post and Page Layouts
Generally, the theme works out of the box. All the sidebar options and image dimensions are pre-defined in the theme. If you need to change the default sidebar options, featured image dimensions, content/except display, post meta, etc., it can be done in the WP Admin > Themify > Settings > Default Layouts.
There are three default layout options under Themify > Settings > Default Layouts:
Archive Sidebar Option: refers to the default home page, category, search, archive, tag pages, etc.
Default Post Layout: is the post page direct URL (also known as "Single Post").
First, create a new Page (go to WP Admin > Pages > Add New), name it "Blog" or any page title as you want.
View the page on the frontend, click "Turn On Builder".
Drop in a Post module and configure the options as you like.
Setting a Custom Front Page
You can set any page as the front (home) page. This means you can use the Builder to design the page and assign it as the front page. To set the Front Page:
Go to WP Admin > Settings > Reading.
On the Front page displays, select the "A static page (select below)" option and then select a "Front page".
Leave the "Posts page" default. If you want to create a custom Blog page, read this tutorial instead of setting the "Posts page".
Adding Widgets
To add widgets to widgetized areas (eg. sidebar and footer widgets):
Go to WP Admin > Appearance > Widgets.
The big panel on the left side shows all available widgets. The small panels on the right are the widgetized areas.
To add a widget: drag and drop the widget from the left panel to the right panel.
To remove the widget: drag the widget back to the left panel (Available Widgets panel). If you want to keep the widget setting for future use, drag it to the Inactive Widgets instead of the Available Widgets panel. It will save your widget settings. To retrieve the widget, drag the widget from Inactive Widgets panel instead of the Available Widgets panel.
Go to WP Admin > Themify > Skins, select a skin by clicking on the thumbnail and click Save.
Styling The Theme
To style the theme frontend appearance:
Go to WP Admin > Appearance > Customize.
It will take you to the Customize panel with live preview where you can style the appearance of the theme design (ie. color, background, font, spacing, border, etc.).
FYI: Refer to Customize documentation for more info.
Footer Widgets
To set the Footer Widget column layout, go to WP Admin > Themify > Settings > Theme Settings.
To drop the widgets in the Footer Widgets, go to WP Admin > Appearance > Widgets.
Footer Text
To replace the footer credit links:
Go to WP Admin > Themify > Settings > Theme Settings and enter the footer text.
HTML tags are allowed in the Footer Text.
To have empty footer text, tick the hide footer text checkbox.
