Post Type Builder (PTB) is a WordPress plugin that allows you to create custom post types with custom fields, taxonomies, and post type templates. This is a video tutorial that breaks down everything you need to know on how to create your own custom post types. The tutorial is really simple and easy to follow as we've divided it into 4 different stages:
First, you will need to download the plugin zip file from the Member Area on the Themify site.
Note: Some browsers (e.g. Safari) may auto-extract zip files. Right-clicking on the download link and selecting "Save Linked File As" will allow you to download the ZIP version.
Then go to your WP Admin > Plugins > Add New > Upload Plugin.
Now upload the plugin zip file and click "Install Now".
After the plugin is installed, click "Activate Plugin" to activate the plugin.
FYI: If you can't install the plugin using WordPress plugin installer, you may also use a FTP software to install the plugin. To install plugins with an FTP method: extract the plugin zip on your local computer then upload the plugin folder to your FTP server where you installed WordPress > wp-content > plugins folder. Then login to your WP Admin > Plugins to activate the plugin.
When you are done with the post type and templates, you'll be ready to add custom posts
After custom posts are added, you may use the shortcode generator to display custom posts on any post/page
Post Types
Custom Post Type is the additional post types created in addition to the standard WordPress post types "Posts" and "Pages".
To create a new post type:
Go to WP-admin > Post Type Builder > Post Types > Add New
Singular Label = Singular descriptive name of the post type (eg. Movie).
Plural Label = Plural descriptive name of the custom post type (eg. Movies).
Post Type Slug = Post type slug which is used in permalink (friendly URL structure).
NOTE: Below are a few post type slug restriction.
You cannot use the following slug names: Menu, Posts, Pages, Action, Author, Order, Theme. These are default post types reserved by WordPress. Click here to find the complete list of default reserved post types by WordPress.
Slug names have to be lower case, no space, unique, and written only in English characters
Description = This description will appear on the "Post Types" lister where you see all the post types created with Post Type Builder (PTB).
Supports = These are the standard WordPress post features. Check which one(s) you want to enable the feature support.
Taxonomies = Taxonomies are like groups and types of the custom post type (ie. they are like post categories). For example, if you are creating a "Movie Review" post type, you would need taxonomies like Actors, Directors, Genre, etc.
NOTE: If you are going to assign custom taxonomies with the post type, create the taxonomies first before adding the post type. If you forgot to create the taxonomies, you can always come back and edit this. Read the Taxonomies section for more details.
Custom Labels = In Custom Labels panel, you can enter the label text used in WordPress admin interface. You may leave the labels as default or enter your custom labels.
Advanced Options = In Advanced Options panel, you can specify the advanced options. Generally, it is fine to leave everything as default.
Meta Box Builder (Custom Fields)
WordPress post types only offer the standard fields such as title, content, featured image, etc. Meta Box allows you to insert custom fields that are tailored to the custom post types. The fields you create here will appear in the Meta Box panel when users add/edit a post. For example, if you are creating a "Property Listing" post type, you would need meta data like: price, area, lot size, property taxes, etc.
To add custom fields in Meta Box:
On the Meta Box Builder, hover the "Add Field" button and click on the field type button to insert.
Then enter the field name, description, and options of the field. Refer to "Meta Field Types" below to learn how each field type works.
Meta Field Types:
Text = Allow users to enter text input
Repeatable = Allow users to enter multiple/repeatable text in the same field
Textarea = Allow users to enter a large block of text
Radio Button = Allow users to select only one option in the radio group
Checkbox = Allow users to select multiple options (difference between radio and checkbox is radio only allows one selection whereas checkbox allows multiple selections)
Select = Allow users to select only one option from a dropdown select (if you have a lot of options, it would be better to use select dropdown instead of radio buttons because radio buttons might take a lot of space in the meta box)
Image = Allow users to insert/upload an image
Link Button = Allow users to enter a link button with custom link text
Video = Allow users to insert/upload a video (YouTube, Vimeo, mp4, etc.)
Rating = Allow users to rate/vote posts
Map = Allow users to enter an address to display a Google Map
Date = Allow users to insert a date with date picker
Slider = Allow users to create an image or video slider
Gallery = Allow users to insert a gallery
Progress Bar = Allow users to display a progress bar
Icon = Allow users to display an icons from FontAwesome library
Audio = Allow users to insert/upload an audio (mp3, etc.)
File = Allow users to insert/upload files
Email = Allow users to enter an email address
Accordion = Allow users to display an accordion
Telephone = Allow users to display a phone number
Number = Allow users to enter numbers (numbers only, no text will be allowed in number type)
Templates
Templates are the layouts that your post type will appear on archive or in single view. When you finish adding a new post type, you will be redirected to edit the template for the new post type.
You can also create templates manually at WP-admin > Post Type Builder > Templates > Add New.
Template Name = Enter the name of the template (eg. Movie Template)
Template for = Select the post type which this template should be used for (eg. if you are creating the movie template, then select the "Movie" post type).
NOTE: To avoid template errors, only one post type is allowed to assign in each template. If you see the select option is grayed out, it means there is already a template assigned to that post type. Once the template is created, the template assignment is not editable. You would need to delete the template and redo the template again.
Edit Archive Template = Archive template will be used in archive views of the post type
Example of archive views:
Category/taxonomy views of the post type.
When you use the PTB shortcode to display the posts, archive template will be used.
Additional Archive Templates = Additonal archive templates can be used to display different archive post loop layout using the [ptb] shortcode.
To add additional templates, click "New Archive Template", enter the template name, click edit the new template, build the template and save it.
Archive Template options:
Post Layout = Display the posts in either list-post, 4-column, 3-column, or 2-column
Posts per page = How many posts to display per page
Orderby = How the posts should be ordered/sorted (default is ordered by post publish date)
Order = Whether to display in descending or ascending order
Pagination = Whether to display the pagination
Edit Single Post Template = Single post view of the post type.
Template Builder
The Template Builder loads only the enabled supports (title, content, featured image, etc.) and the associated custom fields and taxonomies that you've created in the meta box.
Using the Template Builder:
To drop in modules: drag the modules to the placeholder grid and then enter the module options.
To set the column grid: hover the column icon located on top-left corner of the row top bar and select the layout as you like.
To new rows: click on "Add Row" button.
To move the modules around, drag and drop the active modules around within the grid.
To collapse/expand the active modules: click on the arrow up/down icon
To delete an active module: click on the X icon
General Module Options:
Text Before = This text will be added before the output (great for using as labels)
Output Tag = The HTML tag that will be used to output
Text After = This text will be added after the output
Display Inline = If Display Inline is checked, the module will have left float, so the next following modules will display next to it (ie. instead of displaying the module in a new line, it will display in one-line).
Note that the other options may vary depending on the field types you created in the meta box.
Displaying Posts with Shortcodes
PTB plugin comes with a shortcode generator which allows you to display the custom post types anywhere by using shortcodes. Note that PTB shortcode generator is only available on the WordPress's Classic Editor. If you are using the new WP Block (Gutenberg) editor, you can write the shortcode manually or install the "Classic Editor" plugin.
To generate shortcodes:
Add any post or page, on the Classic Editor, you should see the PTB Shortcode button
Click on the PTB Shortcode button and click the post type that you want to display
NOTE: if you don't see this PTB Shortcodes button or if certain post type(s) is not on the list, it means the post type does not archive view enabled (you may enable archive view by editing the post type > Advanced Options > Has Archive = Yes) or the post type is missing PTB Template (you may create a PTB Template at Post Type Builder > Templates > Add new)
Shortcode options:
type = Post type slug to query (eg. 'property' is a custom post type created with PTB)
orderby = How the posts should be ordered/sorted (default is ordered by post publish date)
'date', 'id', 'author', 'title', 'name', 'modified', 'random', and the custom fields you've added in the post type.
order = Whether to display in descending or ascending order.
'asc' (ascending) or 'des' (descending)
pagination = Whether to display the pagination
'0' (no) or '1' (yes)
style = Post layout style (display the posts in list-post, 4-column, 3-column, or 2-column)
'list-post', 'grid2', 'grid3', 'grid4'
masonry = Display the posts in masonry layout style (masonry style = posts stacking on top of each other instead of aligning in a grid)
'0' (no) or '1' (yes)
offset = How many posts to offset (eg. offset=5 means it will skip the first 5 posts in the query)
pagination = Whether to display the pagination navigation.
'0' (no) or '1' (yes)
posts_per_page = The number of posts per page (eg. posts_per_page=10 means 10 posts per page in the pagination)
logic = The logic between multiple taxonomies. Example: if you query posts from catA and catB and the logic is 'AND', that means only posts that are assigned in both catA and catB will display (ie. the posts only assigned to catA won't show - if you want it to show as well, set logic to 'OR').
'and' or 'or'
template = Optional: entering the name of the additional archive template will display the posts using that template. Exclude the template attribute if you want to use the default PTB template.
Note that the other shortcode options may vary depending on the taxonomies that you created. Example: if you have a taxonomy 'ptb_tax_property_types' and the term is 'condo', you can query the posts from condo with 'ptb_tax_property_types=condo'.
It will generate a shortcode like below, which will display 10 recent "property" posts from "condo" taxonomy.
To display a single post with the [ptb] shortcode, enter the 'post_id' number and post 'type' name. In the sample shortcode below, it will display the movie post with ID number 820. The 'template' attribute is optional. If you leave 'template' empty, it will display the post using the default PTB single template. Entering the 'template' name (that is the additional PTB archive template name) will use that template to render the post.
[ptb post_id="820" type="movie" template="New Movie Template"]
Taxonomies
Taxonomy is a grouping mechanism for custom post types (ie. taxonomies are like categories). For example: if you creating a Property Listing post type, you would need taxonomies like property types, number of rooms, parking spaces, and baths.
To create a new taxonomy:
Go to WP-admin > Post Type Builder > Taxonomies > Add New
Singular Label = Singular descriptive name of the taxonomy (eg. Property Type).
Plural Label = Plural descriptive name of the custom post type (eg. Property Types).
Taxonomy Slug = Taxonomy slug which is used in permalink (friendly URL structure).
Attach to = Check the post type(s) that you want to assign this taxonomy to (then the taxonomy meta box will appear in the post edit/add screen).
Custom Labels = In Custom Labels panel, you can enter the label text used in WordPress admin interface. You may leave the labels as default or enter your custom labels.
Advanced Options = In Advanced Options panel, you can specify the advanced options. Generally, it is fine to leave everything as default.
Taxonomy Shortcode
You can use the [ptb_taxonomy] shortcode to display a list of taxonomy links. The shortcode below will display the "release_date" taxonomy from "movie" post type.
You may use the PTB import/export tool to transfer post types, taxonomies, and templates to another site that has PTB installed. You may also use this export tool for backup purposes.
To Import Pre-built Samples:
Go to WP-admin > Post Type Builder > Import/Export
Under the "Pre-built Samples" section, hover the banner image of the post type you want to import (Restaurant, Movies, or Properties), select the"Import sample posts too" checkbox if you want to import the sample posts too, and then click "Import" button.
The sample post type along with the associated taxonomies, custom fields, and sample posts will be created on your site.
To Export PTB Post Types:
Go to WP-admin > Post Type Builder > Import/Export
Under the "Export" section:
Export Post Types and its associated Taxonomies & Templates = Post types and associated taxonomies and templates will be exported tegether.
Export separately = All post types, taxonomies, and templates will be exported separately.
Check the post type(s) that you want to export and then click "Export" (then it will prompt you to download a .json file).
To Import PTB Post Types:
Under the "Import" section, you can upload the exported .json and click "Import" button.
Generate PHP
If you are a developer and need to export the post types to a child theme or plugin, you can use Generate PHP feature to export the code. Once you exported the code, you can paste them in a child theme functions.php or as a plugin. This feature is strictly for developers with coding knowledge. If you are not a coder, you should use the PTB import/export tool.
To export the generate PHP code:
Go to WP-admin > Post Type Builder > Import/Export
Under the "Generate PHP" section, select one of the following option, select the checkbox of the post type(s) that you want to export, and click "Generate PHP" button
Export post types and its associated taxonomies = generate the registration code of the selected post type(s) and associated taxonomies
Export only the custom fields = generate the custom fields code of the selected post type(s)
Export both (post types, associated taxonomies, and custom fields) = generate the code of the selected post type(s) and the associated taxonomies and custom fields
PTB Field Shortcode
The [ptb_field] shortcode allows you to display the custom field value in the post. Note that the ptb_field shortcode must be in the post loop in order to show (ie. the shortcode must be present in the content where the post has the custom field value).
To generate ptb_field shortcodes:
If you have the WordPress Classic Editor, you can generate ptb_field shortcodes by clicking on "PTB Fields" button on the editor, then select the post type and the field name.
If you don't have the Classic Editor, you can write the [ptb_field] shortcode and the field name manually like the sample below.
[ptb_field name="field_name"]
PTB Settings
On the Post Type Builder Settings page, you can enable the language(s) for PTB, insert Google Maps API key and custom CSS.
To access PTB Settings:
Go to WP-admin > Post Type Builder > Settings
Then you have the following options:
Enabled Languages = You will see a list the languages that been enabled on your WP Settings > Site Language.
Google Maps = Only need to insert the Google Maps API if you use the map field.
Custom CSS = If you need to add additional CSS, they can be inserted in the Custom CSS tab.
WPML Integration
With the WPML plugin and additional languages enabled, you will be able to create multilingual post types.
To use with WPML:
Install a copy of WPML plugin (WPML is a third party plugin and not included in PTB plugin).
With WPML plugin activated, go to WPML > Languages, click "Add / Remove languages" and check the additional language(s) that you would like to enable
After the languages are added, you will see the additional language flag icons above each input. Click on the flag icon to switch the input to the selected language.
WPML doesn't automatically translate all your content for you. You will have to manually input the translated content on each field where there are flag icons. This includes:
Post Type Singular and Plural labels are mandatory (description is optional)
Meta box labels
Taxonomy Singular and Plural Labels
Text Before and Text After labels on templates
Individual posts
WARNING: Renaming your post type slug after you've added multilingual posts with WPML, it will merge all your multilingual posts to English due to the way WPML handles the posts.
Notes:
If you enable multiple languages in WPML, the post type Builder required fields are required for all languages that you enabled.
If you enable WPML mutliple languages after the post type and meta box is already created, you might see empty labels on WP admin interface and meta box. Simply edit the existing post types and enter the missing language inputs.
WPML Import/Export Issues: When using "WP > Tools > Export" to export the multilingual posts created with WPML, the posts will be merged as English after import. Even if your post is in another language it will sort the post as English.
Introducing Slider Pro - our newest addition to our Builder addon lineup! It is designed to allow you to make stunning sliders with various slide transitions, as well as, individual elements animation for each slide (text, title, action button, content image). This addon will allow you to showcase your promotional campaigns, announcements, or even videos with text on a slider. Built with multiple customization features, such as solid color, background image, or video that autoplays when the slide is in view.
Installing Builder Addons is exactly the same as installing WordPress plugins.
To install the addon:
Firstly, download the addon zip file from the link provided in your Themify Member Area.
NOTE: some browsers (eg. Safari) auto extract zip files automatically. Right-click on the download link and select "Save Linked File As" and it will allow you to download as a zip file.
Login to your site's admin area.
Navigate to WP Admin > Plugins > Add New.
Now, click the "Upload Plugin" link.
Select "Browse" and navigate to the plugin zip file which you downloaded in the first step and then select the "Install Now" button.
This will initiate the plugin installation process, and once finished, you can then activate the plugin.
Importing the addon demo layout
Each addon zip file contains a sample Builder data file which you can import to your site. It helps you to understand how the addon demo is created.
To import the addon demo data:
First, extract addon zip file to your local computer
You should have a folder of the addon. Inside there is a folder named "sample", and inside that folder there is a Builder data file in a zip format (eg. "addon_name_sample-builder-layout.zip").
To import the Builder layout, login to admin and then go to the page frontend where you want to import the Builder layout. From the top admin bar > select Themify Builder > Import / Export > Import, upload the sample zip file.
Slider Overview
To help you get started below is an image where we've highlighted various elements within the slide of the Slider Pro addon.
Using the Slider Pro Addon
Once addon is installed, you will find the Slider Pro addon module in the Themify module panel. The module is available in both backend and frontend edit mode (just like all standard modules).
In the backend: you can find the Slider Pro module in the Themify Custom Panel.
On the frontend: you can see the modules after turning on the Builder from top admin bar > Themify Builder > Turn On Builder.
Drag and drop a Slider Pro module in a row.
Slider Pro Options:
1) Slider Pager = Select the position of the slider pager.
Default (overlap) = Default which has the next/prev and circles overlap in the middle.
Below = Pager will appear below the slider.
No Pager = No pager or circles.
2) Pager Design = Select the design that you would like your pager to appear as.
Circle = Pager will appear as a circle for each slide.
Photo Thumb = Pager will appear as a thumbnail preview of each slide.
Square = Pager will appear as a square for each slide.
3) Auto Advance to next slide = Select the number of seconds that you would like the slider to automatically advance to the next slide.
Show Timer Bar = This gives you the option to either show or hide the "timer bar" that will appear at the top of the slider.
4) Slider Width and Height = Indicate the width and height of your slider (leave empty to have auto width and height).
NOTE: The Slider Pro has auto fullwidth feature, so it displays the slider fullwidth and scales it proportionally. To achieve custom dimension, you must enter the slider width and height. Please try to enter slider width = 1160px (which is the page width) and height = 600px.
5) Slider Row Options = Choose to either duplicate or delete the slide. Scroll down to see an expanded description of the Slider row options.
6) Add New Row = Add as many rows as you would like on your Slider Pro.
Slider Row Options:
A) Slide Layout = Choose a slide layout that indicates where your text/image will be placed on the slide
B) Slider Background Type:
Image:
Slide Image Background = Choose to either use a solid color background or use one from your media library.
Slide Content Image (Only for icon right and left slide layout) = Input the image you would like to appear on the left/right side of the slide
Slide Heading = Heading text of slide
Text Editor = Input any text that you would like using the editor.
Slide Text/Link Color = Input the color for the text and link color.
Video - Similar to the image background type. The only difference is that the Slide Image Background is replaced with the Video URL.
Video URL = Input Youtube, Vimeo, or embed link to your slide
Action Button:
Text = Input text that you would to appear inside the button.
Link = Input the link of the button.
Icon = Input the icon that you would like to appear on the left of the text.
Color = Indicates the text and icon color.
Background = Indicates the background containter of the button.
Animation:
Slide Transition = Is the animation that occurs for each slide.
Duration = Is the number of seconds that you would like the animation to occur.
Slide Title, Text, Action Button, and Content Image = Choose the animation that will occur for each element on the slide.
Start Animation = Is the animation that occurs when the element enters the slide
Duration = Is the number of seconds that you would like the animation to occur as it enters the slide
End Animation = Is the animation that occurs when the element exits the slide
Duration = Is the number of seconds that you would like the animation to occur as it exits the slide
FAQs
1. How to make Slider Pro auto fullwidth without affect the height?
Add the following code in Appearance > Customize > Custom CSS:
2. How to keep content image and text both visible on mobile?
Due to small mobile display, the slide content image is hidden on smaller viewport. You can make them visible by adding the following code in Appearance > Customize > Custom CSS:
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 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.
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 site's WP-Admin > Themify panel > Themify Settings > Click on the "Skins & Demos" tab.
Then select any skin you'd like and click "Save"
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.
If your site is missing the required plugins/addons (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 plugins/addons. If it is a Themify plugin/addon, you can download the missing addons from the Member Area (the other third party plugins are usually free plugins from WordPress.org).
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 all the imported posts/pages. Themify panel settings, widgets, and user's existing content will not be affected.
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.
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
Page Appearance Options
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)
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
Top Widget = Allow you to add widgets at the top of the menu (ie. phone number, emails, social widgets)
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
Slide Out = header is displayed with a toggle menu button when clicked will slide out left the header content/li>
Min Bar = header is displayed in compact mode fixed vertically on the left side with a toggle menu button to expand the header content
Top Bar = header will be fixed at the top as a bar
Boxed Compact = the entire page wrap will be boxed with white background, header will become a bar
Header Overlay = header is displayed with a toggle menu button when clicked full page overlay appears showing header content
Right Pane = header will be in a fixed position on the right side
Split Menu = the menu will be split in half and the logo is placed at the center
Header Stripe = menu will float at the top as a bar
Header Magazine = Logo and widgets will appear at the top and menu will appear as a bar below it
Header Classic = fullwidth menu bar
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)
Sticky Sidebar
When enabled, the sticky sidebar feature will make your sidebar stick when users are scrolling on the page. You can enable the sticky sidebar on general page views (posts, pages, archive, etc.) or on individual pages.
To enable the sticky sidebar feature on general page views:
Go to WP Admin > Themify Ultra > Default Layouts > expand the layout options > check 'Enable Sticky Sidebar'
To enable the sticky sidebar feature on individual pages:
Add or edit a page > scroll down to the Themify Custom Panel > select 'Enable' on the Sticky Sidebar (note: if you select no sidebar layout, the sticky sidebar option will not appear)
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.
Selecting "Yes", you'll see the following options appear:
Keep section scrolling enabled on tablet/mobile - Check this option to enable the section scrolling feature on mobile or tablet.
Scroll Direction - Choose the scroll direction "Vertical" or "Horizontal" scrolling.
Scroll Style - Choose "Snake-style" to allow the rows to continuously scroll. The "Single Direction" scroll style only scrolls until the very last row and won't continue to scroll.
Disable parallax scrolling - By default the parallax scrolling feature is enabled. Selecting this option will disable the parallax scrolling effect.
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
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
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.
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
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"
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"
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
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
Displaying Portfolio Posts using the Builder Portfolio module:
First, create a new Page (go to WP Admin > Pages > Add New), name it "Portfolio" or any page title as you want.
View the page on the frontend, click "Turn On Builder".
Drop in a Portfolio module and configure the options as you like.
If you have already have a page created with the Builder and would like to display the portfolio posts, you can drop in the Portfolio module there as well.
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:
= 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
pagination = display the portfolio pagination (yes or no)
Setting the Default 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)
Single Post Layout
There are four different layouts in single view: fullwidth image, slider, gallery, and split. This single post layout is available in the Post type and Portfolio post type.l
To set the single post layout:
Add or edit any existing post
In the Themify Custom Panel, select the Post Layout icon
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.
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.
FAQs
I've installed Ultra on a fresh site, but don't know how to use the Builder. To use the Builder, you would need to add a page (go to WP Admin > Pages > Add New) and then view the page on the frontend, click "Turn on Builder" to start. For more details, read the Builder documentation.
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".
How to change the theme accent color (eg. all yellow elements in Ultra Restaurant) to another color? To change the accent color, go to Appearance > Customize > Accent Colors, choose the "Theme Accent Color" as you like.
I updated to the latest Ultra version, there are rounded corners on featured images and form inputs/buttons. How do I remove them? To remove the rounded corners on images and buttons, go to Themify > Settings > Theme Settings > Theme Appearance > Rounded Corners, there are options to reset rounded corners for featured image and general form inputs/buttons.
How to insert Google Analytics or Facebook Pixel tracking code? If you need to insert additional Javascripts or tracking code in <head> or end of </body>, you can enter them in Themify > Settings > General > Header Code or Footer Code. For Google Analytics code, you can just enter the "Measurement ID" on Themify > Settings > General > Google Analytics.
How to add content to the header, footer, sidebar, post, etc.? You can use the Hook Content to add content (including advertisement code) on the site without modifying the theme PHP template files.
How to create custom templates for header, footer, blog post, WooCommerce products, etc.? To create custom templates for header, footer, post, page, products, etc., you would need to use Builder Pro. With Builder Pro installed and activated, create a Pro Theme, then create the Pro Templates. For more info, read the Builder Pro documentation.
How to add custom post types with Ultra? To add custom post types and taxonomies, you would need the Post Type Builder (PTB) plugin. Refer to the PTB documentation on how to use it. You can use PTB to create the custom post types and then use Builder Pro to create the templates. Here is a sample tutorial on how to use PTB & Builder Pro to create a dynamic movie review site.
Installing Builder Addons is exactly the same as installing WordPress plugins.
To install the addon:
Firstly, download the addon zip file from the link provided in your Themify Member Area.
NOTE: some browsers (eg. Safari) auto extract zip files automatically. Right-click on the download link and select "Save Linked File As" and it will allow you to download as a zip file.
Login to your site's admin area.
Navigate to WP Admin > Plugins > Add New.
Now, click the "Upload Plugin" link.
Select "Browse" and navigate to the plugin zip file which you downloaded in the first step and then select the "Install Now" button.
This will initiate the plugin installation process, and once finished, you can then activate the plugin.
Importing the addon demo layout
Each addon zip file contains a sample Builder data file which you can import to your site. It helps you to understand how the addon demo is created.
To import the addon demo data:
First, extract addon zip file to your local computer
You should have a folder of the addon. Inside there is a folder named "sample", and inside that folder there is a Builder data file in a zip format (eg. "addon_name_sample-builder-layout.zip").
To import the Builder layout, login to admin and then go to the page frontend where you want to import the Builder layout. From the top admin bar > select Themify Builder > Import / Export > Import, upload the sample zip file.
Using the Pricing Table Addon
Once addon is installed, you will find the Pricing Table addon module in the Themify module panel. The module is available in both backend and frontend edit mode (just like all standard modules).
In the backend: you can find the Pricing Table module in the Themify Custom Panel.
On the frontend: you can see the modules after turning on the Builder from top admin bar > Themify Builder > Turn On Builder.
Drag and drop a Pricing Table module in a row.
Pricing Table Options
1) Appearance = Choose from 14 popular preset colors that'll be used for header, button, and border of the pricing box. Also, choose from 5 styles that you would like to add to the pricing box appearance.
2) Title = Insert any title that you would like. This will appear at the very top of the pricing box
3) Title Icon = Click insert icon and choose from over 300+ icons that will be placed beside the header title
4) Price = Insert currency symbol you would like beside your price
5) Recurring Fee = Indicate the recurring payment for your product/service (i.e. monthly, annual)
6) Description = Input any text you would like to describe the price option
7) Features List = Input the features that come with the product/service price box. Enter one line for each feature, this will create the list effect
8) Unavailable Feature List = Input features that are not included with the product/service price box. Similar to Feature List enter one line for each unavailable feature, this list will appear greyed-out
9) Buy Button Text = Input any text would like to show as the button text.
10) Buy Button Link = Input any link you would like to redirect your users too. Choose to also open a new tab or lightbox when users click on the button
11) Pop-Out Text = Input any pop-out text to appear on your price box. This text will appear at the top with bouncing animation and will point to that particular price box
12) Enlarge this pricing box = Click the check box to enable enlargement of the pricing box
First, you will need to download the plugin zip file from the Member Area on the Themify site.
Note: Some browsers (e.g. Safari) may auto-extract zip files. Right-clicking on the download link and selecting "Save Linked File As" will allow you to download the ZIP version.
Then go to your WP Admin > Plugins > Add New > Upload Plugin.
Now upload the plugin zip file and click "Install Now".
After the plugin is installed, click "Activate Plugin" to activate the plugin.
FYI: If you can't install the plugin using WordPress plugin installer, you may also use a FTP software to install the plugin. To install plugins with an FTP method: extract the plugin zip on your local computer then upload the plugin folder to your FTP server where you installed WordPress > wp-content > plugins folder. Then login to your WP Admin > Plugins to activate the plugin.
Import Sample Data
If you are starting a new site and would like to import the sample content as seen on the demo site, here are the steps:
Go to "WP admin > Tools > Import"
Click WordPress (if you are prompted to install the importer plugin, do so)
Upload the sample-content.xml file (located in the theme folder > sample folder > sample-content.xml file)
You will be asked to map a user to the content and import the file attachments. Check "Download and import file attachments" to import the demo contents.
If the content don't seem to import, try to import again without checking "Download and import file attachments" checkbox.
Now you may edit or delete the content as you like.
Demo Images
The images shown on the demo site are not part of the theme package, nor are they included in the sample content. As such you will see placeholder images for the sample content and, should you wish to, these can be replaced after importing.
Tiles Plugin Demo Video
Using the Tiles Plugin
Once plugin is installed, you will find the Themify Tiles section in the WP Admin panel. Similar to a custom post type you can create your tiles layout with live preview at the backend, and the publish it on any post/page by inserting the shortcode.
Let's start by first creating a new tiles group. You can do this by clicking "Add New".
Click "Add Tile" found at the bottom of the page. A popup window will appear where you can a list of tile options will appear.
Tiles Options
1) Size = There are 4 tile sizes.
Large = large square block
Square = small square block
Landscape = horizontal half block
Portrait = vertical half block
2) Front Tile tab = Click the front tab to edit the front of the tile.
3) Type = Choose from 5 different types of tiles.
A) Text = Display text content in Tile.
Enter "Title" (optional)
Enter text in content editor (shortcodes are supported).
Enter "Action Button Text" this will appear at the bottom left corner of your tile.
Enter "Action Button Link" this link will redirect users when they click the action button text.
Open as a lightbox = Open link in a lightbox
Open in a new tab = Open link in a new tab
Custom Style = Below are some color options that you can customize
Background Color = Use the color picker to pick a color for the background of the tile.
Text Color = Use the color picker to pick a color for all the text on the tile.
Link Color = Use the color picker to pick a color for all text links on the tile.
Add a background image by inserting a image URL from your media folder or upload it directly.
B) Button = Create a clickable button type tile
Enter "Title" (optional)
Enter "Title Link" which will allow your title to open an external link
Image = insert a image URL from your media folder or upload it directly. The image will appear at the center of the tile.
Custom Style = Below are some color options that you can customize
Background Color = Use the color picker to pick a color for the background of the tile.
Text Color = Use the color picker to pick a color for all the text on the tile.
Link Color = Use the color picker to pick a color for all text links on the tile.
Add a background image by inserting a image URL from your media folder or upload it directly.
C) Gallery = Create a gallery type tile
Insert a "Gallery Slider" by clicking "Insert Gallery". Choose images from your media library or upload new images.
Choose the amount of second you would like your gallery to "Auto play" or turn it off by selecting "Off" on the drop down menu.
Choose to hide or display the timer.
Enter "Action Button Text" this will appear at the bottom left corner of your tile.
Enter "Action Button Link" this link will redirect users when they click the action button text.
Open as a lightbox = Open link in a lightbox
Open in a new tab = Open link in a new tab
D) Map = Display where you are with the map type tile.
Enter "Address" as you like.
Choose which map "Type" you would like to display - Road Map, Satellite, Hybrid, or Terrain.
Choose to enable or disable the "Scrollwheel".
Choose to make the map "Draggable" when users drag the click on a certain part of the map.
E) Blank = Display nothing at the front of your tile.
4) Back Tile tab = Click the back tab to edit the back of the tile.
The back tile can be edited just like the Front tile but with some additional features highlighted below:
F) Auto Flip = Disable or choose the amount of second you would your tile to flip automatically.
G) Flip Effect = Choose from 10 different flip effects. We highlight all the flip effects on our Tiles demo page.
Adjust tile sizes
To customize the size of the tiles you can use this custom CSS code (if you're using the Builder plugin you can go to Themify Builder > Custom CSS and paste it in there, otherwise go to Themify > Customize > Custom CSS and paste):
body .tf-tile.size-square-large,
body .tf-tile.size-square-large .map-container {
width: 480px;
height: 480px;
}
body .tf-tile.size-square-small,
body .tf-tile.size-square-small .map-container {
width: 240px;
height: 240px;
}
body .tf-tile.size-landscape,
body .tf-tile.size-landscape .map-container {
width: 480px;
height: 240px;
}
body .tf-tile.size-portrait,
body .tf-tile.size-portrait .map-container {
width: 240px;
height: 480px;
}
IMPORTANT: The tile masonry is based on the small tile dimension where large tile size is 2 times (eg. if the small tile is 240px, then the large tile is 480px). Be sure to match the large and portrait tile size by 2 times the small tile size)
Update Plugin
You will receive notifications of updates to the plugin whenever you are on admin dashboard page for the plugin, these notifications will provide a link that will redirect you to the Update plugin page for the Tiles plugin on your dashboard.
You can find a list of updates and the changes made in each in the Builder changelogs which are also linked in the notification.
You can also manually update by downloading the latest ZIP file from your Themify member area and either deleting the plugin on your site and following the installation instructions above again, or by uploading the contents of the new ZIP via FTP and overwriting the existing plugin folder.
Reinstall Plugin
If the auto plugin update does not work, you may reinstall the Themify plugin by following the steps below. Reinstalling the plugin shouldn't affect the content/data because they are saved separately in the database. To be safe: you should backup your WordPress content (posts, pages, menus, etc.) before reinstalling it. To backup your WordPress content, go to wp-admin > Tools > Export and export all content to a zip file. You may use wp-admin > Tools > Import to import these content in the future if necessary.
Login to Member Area to download the latest themify-builder.zip (keep it as .zip file, do not extract it)
Login to your site wp-admin
Go to Plugins (where WordPress lists all the plugins on your site)
Deactivate the Themify plugin (plugin can not be deleted if it is active)
Now click on the "Delete" button to remove the Themify plugin (the "Delete" link is located under the Themify plugin name)
Remain on the Plugins page, click on the "Add new" button (located at the top of the page), click on the "Upload Plugin" link, upload the latest themify-[plugin-name].zip and activate it (basically the same procedure as you would install a new plugin)
Force responsive tiles on all screen sizes
You can enable or disable this feature in the plugin's settings page.
