Ultra Documentation

Complete Video Guide

The video below is a complete guide on how to install and use Themify Ultra.

Table of Content:
- How to install the Themify Ultra theme - 0:33
- How to install the Portfolio Post plugin - 1:46
- Ultra Skin & Demos - 2:20
- Mega Menu - 5:48
- How to add widgets on the menu - 9:50
- Setting up social links - 12:20
- Theme appearance (site wide) - 14:52
- Theme appearance (per post/page) - 18:09
- Themify Builder - 23:53
- How to import Builder Layouts - 26:32
- Post/Page layouts (site wide) - 30:10
- Per post/page layouts - 32:49
- Customization Panel (Themify Options) - 35:21
- Other options on the Customization panel - 42:01

Installing the Theme

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 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

how to properly install your theme

FYI: You can also install themes with FTP method. Read the Installing Themes tutorial for more info.

Skins and Demo Import

Skins and pre-made demo sites not only transforms the site's design appearance, but can also help setup a real sample site within minutes. With just a single click, you can import the demo setup that includes the theme settings, content, menus, widgets, etc., exactly like our theme demos. This is a time saver for creating client sites. This tutorial shows you how you can access the skins/demos.

To select a skin:

  • Go to your WP-Admin > Themify panel > Themify Settings > Click on the "Skins & Demos" tab.
  • Then select any skin you'd like and click "Save"

Themify settings option panel on where to access the skins and demos

To import demo content:

  • Click a skin thumbnail and click on the "Import" button.
  • If you have all the required addons and plugins, it will import the demo content data and theme settings.
    demo import addon button
  • If your site is missing the required addons/plugins (either not installed or activated), a lightbox will appear notifying you to install and activate them. You can click on the plugin title to redirect to where you can obtain the addon. If you have an active membership, you can download the missing addons from the Member Area.
    demo import addon notification

To erase demo content:

  • After you import the demo content, you can erase the demo content by clicking the "Erase" link.
  • Erase demo will delete only the imported posts/pages. Themify panel settings, widgets, existing and modified imported posts/pages will not be affected.

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.

How to add your own site logo on your site

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".

How to add a tagline on your site

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.

create custom menus for each page on your site

Mega Menu

The Mega Menu feature allows you to modify the regular WordPress menu by adding mega posts, multi-column and fullwidth column menus with any links or widgets.

To set Mega Posts:

  • Add a page, category, or custom link and select "Mega Posts" on the Mega Menu dropdown option
  • Add a Tag or Category link in nested menu
    • Note: Must be Tag or Category. This will display recent posts from the tag/category. If the Tag option is not available, click the "Screen Options" found on the top right corner and make sure that the "Tag" option is checked

mega menu mega post

To set Fullwidth Columns:

  • Add a page, category, or custom link and select "Fullwidth Columns" on the Mega Menu dropdown option
  • Select the column layout from the preset that appears - Default is set to "Auto"
  • Add any link (page, post, custom links, tags, category) or widgets. This will display nested links in multiple columns

mega menu fullwidth columns

Setting Navigation Titles Above Nested Links:

  • With Fullwidth columns you can also set header titles that appears above nested links. To do this add another level of nested links under the initial nested links. See image below to do this:

setting naviations titles above nested links

To set Multi-Column:

  • Add a page, category, or custom link. On the "Dropdown Column" option panel select the number of column to set (2, 3, or 4)
  • Add any link (page, post, custom links, tags, category) or widgets. This will display nested links in number of columns set

mega menu mutli-column

To add Widgets:

  1. Select the Widget option
  2. Select any widget from the dropdown menu option
  3. Click "Add to Menu" and customize the widget on the menu as you like

adding a widget on a mega menu

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 'http://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.

How to setup your social links

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.

drag & drop the widget to where you'd like it to appear

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

Ultra 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

screenshot

Page Appearance Options

this is ultra page appearance custom panel screenshot

Under the Page Appearance, you will see the following options:

  • Body Background = applied to the main body background
  • Accent Color = applied to the headerwrap, footerwrap, buttons, etc.
    • Presets = click on the color icon to select pre-set color from the theme
    • Custom = allows you to pick your own colors
  • Typography = overall font face
    • Presets:
      • Default = default is a mixture of serif with sans-serif fonts
      • Sans Serif = headings and body text both have sans-serif font
      • Serif = headings and body text both have serif font
      • Slab Sans = slab headings with sans-serif body font
      • Slab = headings and body text both have slab font
    • Custom = pick your own font
  • Header Design = header and page layout
    • Default = theme default (which is the Header Block)
    • Split Menu = the menu will be split in half and the logo is placed at the center
    • 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 Content = header background will be transparent, the content area will be boxed with a white background
    • 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
    • Min Bar = header is displayed in compact mode fixed vertically on the left side with a toggle menu button to expand the header content
    • None = the entire header will be excluded
  • Sticky Header = header will be stuck at the top when scrolling down
  • Full Height Header = header will display in 100% viewport height
  • 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)
    • Animating Colors = will animate a sequence of background colors in the header (the colors can be set in Themify > Settings > Theme Settings => Animating Colors)
  • 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
  • Footer Elements = select show/hide the footer 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)

How to Import Builder Layouts

The theme comes with 60+ Builder layouts which you can import via the Builder.

To import a sample Builder layout:

  • Add a new Page
  • On the page's Themify Custom Panel > Page Options, select:
    • Sidebar Option = sidebar-none icon
    • Content Width = fullwidth icon
    • Hide Page Title = Yes
  • On the Themify Custom Panel, click on "Theme Appearance" tab to set the design appearance of this particular page (read Theme Appearance section below for more details)
  • On the Discussion panel, uncheck "Allow discussion" checkbox (this will disable the comments on the page)
  • Publish and view the page frontend
  • On the frontend top admin bar, select Themify Builder > Layouts > Load Layouts
  • A lightbox window will appear with thumbnail images of various Builder layouts that you can use for your page. Select a sample page that you would like to use
  • Click "Ok" when told that it will replace your current Builder layouts, and then reload the page

this is builder layouts screenshots

Section Scrolling

Ultra comes with the section scrolling functionality. This allows you to scroll through your page one row at a time. You can enable this feature on each page by editing your page and scrolling down to your Themify Custom panel > Under the Page Option tab. Enabling the Section Scrolling will automatically set to hide the page title, "No Sidebar", and set the page to "Fullwidth" and "Fullheight" for each row.
full section scrolling

You can also, customize the section scroll loading screen. To do this, go to your WP Admin > Themify theme > Themify Settings > Scroll down to the Section-scroll Loading Screen. There you will find the following options:

  • Loading screen color = This will set the loading screen color for all the pages you've enabled in the section scrolling feature
  • Loader Icon = This is the icon (box) that rotates in the middle of the page as it loads. You can add your own custom image or choose from our icon theme pack built into the theme

full section scrolling loading screen options

Infinite Scroll

Ultra theme comes with the default infinite scroll feature for archive view.

To configure infinite scroll:

  • Go to your WP Admin > Themify Setting > Theme Settings, the options are under "Pagination Option"
  • Check the option "Disable automatic infinite scroll" will disable auto infinite scroll (a "Load More" button will show)
  • Select "Standard Pagination" option will disable infinite scroll and have the number pagination

Quick Skin Styling

Normally Themify theme skins are in the Themify panel > Skins tab. But in Ultra theme, it gives you the ability to style your own theme color scheme easier and faster. We call it "Skin Styles". The Skin Styles is intended for quick overall styling without having to go through each accordion in the Customize panel.

To access Skin Styles:

  • Go to WP Admin > Appearance > Customize => Skin Styles, then you will see the following options:
    • Body Background = main body
    • Accent Color = background and color in header and footer area
    • Typography = font selection for body, link, and heading
  • Note: if the Customize panel preview is not reflecting your selections, it is most likely because the page was built with the Builder so the styling from the Builder is overriding. This is normal because the Builder is intended to have its own styling capability. Click to navigate to another page in the preview by clicking on the menu links (do not reload the Customize page).

screenshot

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 nor 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
  • 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.

screenshot

To set the Image Filter per post/page individually:

  • Add or edit a post/page, in the Themify Custom Panel, select the Image Filter and Image Hover Filter

screenshot

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"

screenshot

How to Create Your Own Builder Layouts

This section will show you how to create a unique page layout with the Builder as shown on our demo.

Step 1) To create a page layout from scratch:

  • Add a new Page
  • On the page's Themify Custom Panel > Page Options, choose the following options to replicate the sample page layout:
    • Sidebar Option = sidebar-none icon
    • Content Width = fullwidth icon
    • Hide Page Title = Yes
    • Custom Menu = Leave blank will have the default Main Navigation set in WP Admin > Appearance > Menus. Otherwise select a menu of your choice. Read ScrollTo Row Anchor on how to create a one-page ScrollTo row anchor menu
    • On the Discussion panel, uncheck "Allow discussion" checkbox (this will disable the comments on the page)

For this demo we will be recreating the Agency Page. Below are the options we used for the header and design:

  • On the page's Themify Custom Panel > Theme Appearance, change the following options to recreate the sample page layout:
    • Header Options
      • Accent Color = Leave the default accent color
      • Typography = Leave the default typography
      • Header Design = Choose the header horizontal header design
      • Header Element = Hide the (1) Site Tagline, (2) Search Form, (3) RSS Link, (4) Header Widget, and (5) Social Widget. Leave everything else as is
      • Header Background = Choose the Transparent Background option
      • Header Text and Link Color = Choose the color white (#ffffff) for both these options
      • Footer Design = Choose the footer horizontal right
      • Footer Elements = Leave it as default which will show all the elements
  • Save or publish the page

screenshot

Step 2) To construct the page layout with Builder (Don't forget to save the Builder when you are done with each step):

  • From the top admin bar: select Themify Builder > Turn on Builder
  • First Row:
    • Drop in a Text module and enter your text.
      • Demo = "Red Agency" in heading 1 and "We focus on UX, Design, and Apps" in heading 3. At the bottom we inserted a button shortcode with the following parameters - [themify_button style="xlarge red flat rounded" link="#connect" ]Contact Us[/themify_button]. After we centered it.
    • 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:
      • Row Height: Fullheight
      • Background Type: Background Image
      • Background Image:Upload or choose an image from your library
      • Background Mode: Parallax Scrolling
      • Background Color: b82c2c
      • Font Color: White (#ffffff)
      • Link Color: White (#ffffff)
      • Padding: Top = 10%, Bottom = 6%
  • Second Row:
    • Drop in another Text module and enter your text
      • Demo = "Demo Reel" in heading 2
      • On the Styling Tab:
        • Font Color: Bright Red (#f03030)
        • Padding: Top = 5%
    • Beneath the Text module insert a video module
      • Video Style = We chose the video top option
      • Video URL = Insert any video URL you would like to appear. We used the following vimeo link = http://vimeo.com/71934862
      • On the Styling Tab:
        • Margin: Right & Left = 10%
    • In the row options, enter the following options:
      • Background Color: #000000
      • Padding: Top & Bottom = 6%
  • Third Row:
    • Drop in another Text module and enter your text.
      • Demo = "Services" in heading 2
    • Insert a sub-row beneath the Text module by first inserting any module that you would like. For the demo, we inserted a Feature module below the Text module. With the following parameters:
      • Feature Title: Input any title you would like. Demo = "Writing"
      • Text Editor: Input any text you would like to appear at the bottom of the title.
      • Layout: Icon Top (third layout option)
      • Circle:
        • Percentage = 100, Stroke = 2px, Color = Black (#000000), Size = Medium
      • Icon Type: Icon
        • Icon = fa-newspaper-o, Color = Red (#F03030)
    • After setting up your sub-row, hover your cursor at the top left corner of the sub-row and choose a sub-column layout. Demo = 3-column layout
    • We duplicated the first Feature module and changed only the following options for each of them:
      • Feature Module 2:
        • Feature Title: Input any title you would like. Demo = "Apps"
        • Icon Type: Icon
          • Icon = fa-flask, Color = Red (#F03030)
      • Feature Module 3:
        • Feature Title: Input any title you would like. Demo = "Games"
        • Icon Type: Icon
          • Icon = fa-gamepad, Color = Red (#F03030)
    • In the row options, enter the following options:
      • Background Color: #fafafa
      • Padding: Top = 6%, Bottom = 2%
  • Fourth Row:
      • Change the row into 3 columns. To do this, hover your cursor at the top left corner of the row and choose the third option layout on the second row

    this is row column screenshot

    • Leave the first and the third column empty. We will only fill the middle column with content
      • Drag and drop a Divider module. Enter the following parameters:
        • Divider Style: Solid (The first option)
        • Stroke Thickness: 3px
        • Divider Color: Black (#000000)
        • Top Margin: 30px
        • Bottom Margin: 50px
      • Drag and drop a Text module underneath the Divider module. Enter any content you would like to the content editor, center and italicize it
        • On the Styling Tab change the Font Color to red (#f03030)
      • Drag and drop another Text module underneath the Text module. Enter any content you would like to the content editor and center it. The last sentence below we used heading 3, and then added 2 button shortcodes
        • Demo Button Shortcode = [themify_button style="large flat red rect" link="https://themify.me/themes/ultra"]Buy Now[/themify_button] [themify_button style="large flat red rect" link="https://themify.me/docs/ultra-documentation"]Documentation[/themify_button]
    • In the row options, enter the following options:
      • Background Color: #fafafa
      • Padding: Bottom = 5%
  • Fifth Row:
    • Choose a 2 column layout for this row.
      • On the left insert a Text module and insert any content you would like to the content editor, then center and italicize it
        • To get same semicolon icon before your text, insert a shortcode where you would like it to appear on the content editor. Below is what we did for the demo:
          • [themify_icon icon="fa-quote-left" style="large" icon_color="#f03030" ] Create a testimonial section on your page. Simply insert an icon and an image on the row to copy the same look as this layout.
      • On the right insert an Image module. Input the following options:
        • Image Style: Centered Image
        • Image URL: Upload or choose any image you would like.
        • Image Appearance: Rounded and Circle
        • Width & Height: 400px
    • In the row options, enter the following options:
      • Background Color: Black (#000000)
      • Font Color: White (#ffffff)
      • Link Color: White (#ffffff)
      • Padding: Top & Bottom = 6%
  • Sixth Row:
    • Drag and drop a Text module and enter your text
      • Demo = "Connect with us" in heading 2
    • Insert a sub-row beneath the Text module by first inserting any module that you would like. For the demo, we inserted a Feature module below the Text module. With the following parameters:
      • Layout: Icon Top (third layout option)
      • Circle: Size = Medium
      • Icon Type: Icon
        • Icon = fa-envelope, Color = White (#000000), Background = Red (#f03030)
      • Link: Insert any link you would like to redirect users to when the icon is pressed
        • Choose if you would like to open the link in a new tab or in a lightbox. We chose in a new tab
    • After setting up your sub-row, hover your cursor at the top left corner of the sub-row and choose a sub-column layout. Demo = 4-column layout
    • We duplicated the first Feature module and changed only the following options for each of them:
      • Feature Module 2: Icon Type: Icon = fa-facebook
      • Feature Module 3: Icon Type: Icon = fa-twitter
      • Feature Module 3: Icon Type: Icon = fa-google-plus
    • In the row options, enter the following options:
      • Padding: Top & Bottom = 6%

Step 3) Save and close the Builder

Animated Background Colors

The animated background colors can be inserted in any Builder row as well as enabled in the header and footer wrap.

To define or enable the Animated Background Colors:

  • Go to Themify > Settings > Theme Settings => Animating Background Colors
  • You can enable it separately in the header or footer
  • You can enter the "Animation Speed" (larger number means slower animation)
  • You can pick up to 7 colors which will animate in sequence (leave blank to have default colors)

To set Animated background colors in Builder rows:

  • With the Builder turned on > Row > Options
  • Insert "animated-bg" in the row "Additional CSS Class"

animated background color screenshot

Portfolio Post Type

The theme comes with Portfolio post type as an optional plugin (you don't need to install the Portfolio plugin if you don't intend to have a portfolio on your site).

To install the Portfolio Posts plugin:

  • Go to your WP Admin > Themify theme
  • On the Themify panel, click "Begin installing plugin"
  • Then on the "Install Required Plugins" page, click "Install" under the "Themify Portfolio Posts"
  • Once the plugin is installed, click "Return to Required Plugins Installer"
  • Now click "Activate" to activate the installed plugin

screenshot

Adding Portfolio Posts:

  • To create a Portfolio post, select "Add New" under the "Portfolios" admin menu
  • Enter the Portfolio title and content
  • In the Themify Custom Panel, enter the options as you like:
    • Featured Image = Upload or select an image from the media library for the project
    • Image Dimensions = This image dimensions will be used for the featured image in the single post view (leaving it blank will have the default dimensions)
    • Hide Post Title = This option is used to set whether the post title will be displayed in the single post view
    • Unlink Post Title = This option is used to set whether the post title will be linked in the single post view
    • Hide Post Date = This option is used to set whether the post date will be displayed in the single post view
    • Hide Post Meta = This option is used to set whether the post meta will be displayed in the single post view
    • Hide Featured Image = This option is used to set whether the featured image will be displayed in the single post view
    • Unlink Featured Image = This option is used to set whether the featured image will be linked in the single post view
    • 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. This 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 = Use the shortcode provided here to show this individual post.
    • Header Wrap Background = Customize the header background and text color. "Transparent Header" will make the entire header wrap transparent and overlap with the content area.
    • Top Featured Area in Single View = "Top Featured Area" is where the background area will be

screenshot

Displaying Portfolio Posts on Pages:

  • First, create a new Page (in admin, select "Add New" under the "Pages" admin menu)
  • In Themify Custom Panel, click "Query Portfolios" tab, select either "All Categories" or a Portfolio category, and select the other options as you like:
    • 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 posts will be ordered
    • 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 Content = 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

this is portfolio post type query panel screenshot

Displaying Portfolio Posts using shortcodes:

You can use the [themify_portfolio_posts] shortcode to display the Portfolio posts anywhere in the content editor, Text widget, and the Builder Text module. Below are some sample portfolio shortcodes using different parameters:

  • [themify_portfolio_posts]
    • = display Portfolio posts with default settings
  • [themify_portfolio_posts style="grid3" limit="3" post_date="yes" image_w="306" image_h="180"]
    • = display latest 3 Portfolio posts in grid3 layout, set image dimensions and show postdate
  • [themify_portfolio_posts category="13" style="grid2" limit="8" image_w="474" image_h="250"]
    • = display latest 8 Portfolio posts from Portfolio Category ID 13 in grid2 layout
  • [themify_portfolio_posts 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"

Available parameters:

  • limit = number of post to query/show
  • category = category ID number or category name (default = all categories)
  • image = show post image or not (yes or no)
  • image_w = featured image width
  • image_h = featured image height
  • title = show post title (yes or no)
  • display = display whether full content, excerpt or none (content, excerpt, or none)
  • post_meta = display post meta (yes or no)
  • post_date = display postdate (yes or no)
  • style = layout style (grid4, grid3, grid2). You may also add custom css class in here (eg. style="grid4 custom-class"). Custom CSS class is only required for developers to apply styling.
  • order = specifies ascendant or descendant order (ASC or DESC)
  • orderby = criteria used to order posts (author, comment_count, date, menu_order, and title)
  • unlink_image = remove the link on featured image (yes or no)
  • unlink_title = remove the link on the post title (yes or no)
  • more_link = display a custom more link after the posts
  • more_text = text that will appear in more_link

Designing Portfolio with the Builder

You can use the Builder to design any page and post including the custom post type like Portfolio on the demo. The Builder helps you to make rich media layouts easier by drag and drop elements on the page. Below is a sample portfolio single we designed.

To create a Portfolio single with the Builder:

  • In admin, select "Add New" under the "Portfolios" admin menu
  • In the Themify Custom Panel:
    • Featured Image = Upload or select an image from the library
    • Hide Post Title = Yes
    • Hide Post Date = Yes
    • The above will hide the elements in the Portfolio single because we will use the Builder to layout the content
      screenshot
  • Then publish and view the portfolio post on the frontend
  • From the top admin bar, select Themify Builder > Turn On Builder
  • Now you can use the Builder to add modules on the page (this process is very similar like above on how to build pages with the Builder)

Setting the Portfolio Layouts

  • To set the portfolio layout options, go to WP Admin > Themify > Settings > Portfolio Settings
  • Default Index Portfolio Layout = refers to the Portfolio archive view (i.e. Portfolio posts queried with shortcodes, Query Portfolio pages, Portfolio category pages, etc.)
  • Default Single Portfolio Layout = refers to the single post view of the Portfolio (project)

screenshot

Post Style Classes

If you are using themify_list_posts or themify_portfolio_posts to display the posts, you may use the "style" parameter to specify the post styles. For example, this shortcode will display the blog posts in grid4 with overlay layout: [themify_list_posts style="grid4 overlay"]

Available Post Style Classes:

  • polaroid = will show partial post content overlay, slide up on hover
  • overlay = post content overlay is hidden, then slide up on hover
  • masonry = posts will display in masonry layout (stacking on top of each other rather than aligning per row)
    • FYI: if Image Script is enabled, you can enter image height=0 to disable the vertical cropping so the masonry will have better result
  • slider = posts will display in a slider
    • FYI: there are parameters available for slider such as: visible, scroll, auto, speed, slider_nav (read the shortcode parameters under Post Slider for more details)
  • no-gutter = no spacing between the posts

Sample Usages:

You can combine the post styles and image filter classes to produce different results. Below are some examples used on the demo page:

  • [themify_list_posts style="grid4 overlay" limit="8" post_date="yes" image_w="290" image_h="290"]
  • [themify_list_posts style="grid3 polaroid" limit="3" post_date="yes" image_w="365" image_h="250"]
  • [themify_list_posts style="grid2 filter-grayscale filter-hover-none" limit="2" post_date="yes" image_w="560" image_h="380"]
  • [themify_list_posts style="grid4 masonry filter-grayscale filter-hover-none" limit="8" post_date="yes" image_w="265" image_h="0"]
  • [themify_list_posts style="grid4 no-gutter overlay filter-sepia filter-hover-none" limit="8" post_date="yes" image_w="290" image_h="290"]
  • [themify_list_posts style="grid3 masonry overlay no-gutter filter-grayscale filter-hover-none" limit="10" post_date="yes" image_w="365" image_h="0"]

Single Post Layout

There are four different layouts in single view: fullwidth image, slider, gallery, and split.

To set the single post layout:

  • Add or edit any existing post
  • In the Themify Custom Panel, select the Post Layout icon

Ultra theme single post layout

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").
    • Note: Some themes may only have 4 layouts.
  • Default Static Page Layout: is the static page.

FYI: Read Default Layouts documentation for more info.

default post and page layout

Displaying/Querying Posts on Pages (eg. Blog Page)

To display/query posts on a page:

  • First, create a new Page (in admin, select "Add New" under the "Pages" admin menu).
  • In Themify Custom Panel, click "Query Posts" tab, select either "All Categories" or a Post category and select the other options as you like:
    • 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.
    • Query Post Layout = This option is used to set the layout of posts such as grid columns, list posts, etc.
    • Post Per Page = This option is used to set the number of posts shown per page.
    • Display Content = This option is used to set what content is output for each post (None, Excerpt, or Full Content).
    • Image Dimensions = This option is used to set the dimensions the posts 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.
    • Hide Page Navigation = This option is used to set whether the page navigation for posts will be displayed.

how to query post on a page

Setting 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".

how to set custom front page on your site

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.

TIPS: You can also add widgets in Appearance > Customize panel.

how to add a custom menu on your sidebar

  • To set the Footer Widget column layout, go to WP Admin > Themify > Settings > Theme Settings.
    screenshot
  • To drop the widgets in the Footer_Widgets, go to WP Admin > Appearance > Widgets.

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, enter a blank space in Footer Text.

screenshot

FAQs

How to display the circle post date as regular text?

That circle postdate only applies in list-post view. If you select a grid layout, it won't appear. You can change it to regular text by going to Themify panel > Settings > Default Layouts > Default Archive Layouts, and checking "Display postdate as inline text instead of circle style".

Father's Day Sale: Get up to 30% off code: SUPERDAD & $100 off Lifetime Club with code: DAD4LIFE