How to Enable Gzip on Nginx Servers

Themify themes come with Gzip version of all CSS and Javascripts to reduce file size. You can enable Gzip scripts at Themify > Settings > Performance. If you are using Nginx server and the Gzip option is greyed out, follow the steps below to enable Gzip on Nginx.

Step 1) IMPORTANT: Before you start, please ask your host provider to check if the ngx_http_gzip_static_module installed. If it is not installed, ask them to install it, else it can cause errors if you enable gzip without that module.

Step 2) Then you need to locate the nginx.conf file.

Normally the nginx.conf file is located at:

/etc/nginx/nginx.conf

If you can't find it there, try the following location:

/usr/local/nginx/conf/nginx.conf 

or

/usr/local/etc/nginx/nginx.conf

Step 3) Once you locate nginx.conf, edit it, add gzip_static on; on the http block.

nginx.conf gzip enable

Step 4) Once you save the nginx.conf file, restart the server.

Read More

How to Enable WebP on Nginx & Litespeed Servers

Enable WebP on Nginx Servers

WebP is an image format developed by Google that can optimize image file size by 60-80% without losing the image quality. All Themify themes come with the WebP image feature. To enable WebP image, go to Themify > Settings > Performance. If you are using Nginx server, the WebP image option might be greyed out. Follow the steps below to enable WebP on Nginx.

Step 1) Make sure mime.types includes webp support.

The mime.types file is normally located at:

/etc/nginx/mime.types

Open mime.types and check if it includes image/webp webp;

If you don't see it, add it.

mime.types webp support

Step 2) Download and extract the webp-nginx.zip, you should have 2 folders: 'conf.d' and 'snippets'. Upload 'conf.d' and 'snippets' folders to '/etc/nginx' folder.

Step 3) Check if nginx.conf file has include /etc/nginx/conf.d/*.conf;

Normally the nginx.conf file is located at:

/etc/nginx/nginx.conf

If you can't find it there, try the following location:

/usr/local/nginx/conf/nginx.conf 

or

/usr/local/etc/nginx/nginx.conf

Open nginx.conf file and check if it has this line:

include /etc/nginx/conf.d/*.conf;

If it doesn't have it, add it.

nginx.conf - include conf

Step 4) Then you need to insert the following in the server context of your configuration file (usually found in /etc/nginx/sites-available/ folder). 

/etc/nginx/site-availables/xxx.conf (where xxx is the application name on your server).

Example: if your application name is wordpress, you would see something like the screenshot below. If you are not sure which one is your application name, go to /etc/nginx/sites-enabled/ folder, there should be a .conf file with your application name. If you can't find your site .conf file in the 'sites-available' folder, try to edit the 'default' file.

site available config

Edit the conf file in sites-available folder and add this line:

include snippets/tf-server-webp.conf;

site available config - include webp

Step 5) Restart server.

Enable WebP on Litespeed Servers

To enable WebP on Litespeed, please follow this guide: https://docs.litespeedtech.com/lscache/lscwp/imageopt/

Read More

Extending Builder Layouts & Blocks

Disabling Pre-Designed Layouts in the Builder

Themify Builder comes with a wide variety of pre-designed layouts that can speed up the process of designing pages on the frontend. However you may wish your clients to not have access to this feature in the Builder, just in case. If so, you can use this snippet of code to eliminate access to the pre-designed layouts:


<?php

add_filter( 'themify_builder_active_vars', function( $vars ) {
	unset( $vars['paths']['predesigned'] );

	return $vars;
} );

Similarly you can replace the predesigned layouts with your own, to do that:


<?php

add_filter( 'themify_builder_active_vars', function( $vars ) {
	$vars['paths']['predesigned'] = array(
		'title'=>__( 'Pre-designed', 'themify' ),
		/* URL to the file containing a list of layouts */
		'url' => 'https://themify.me/public-api/builder-layouts/index.json',
		/* URL to file containing Builder data for layout {SLUG} */
		'single' => 'https://themify.me/public-api/builder-layouts/{SLUG}.txt',
	);

	return $vars;
} );

And change the values for "url" and "single". The values above are the default used by Builder. You can download the "index.json" file from the above snippet, make it your own and then upload it to your own site. Note that for the "single" URL, the string "{SLUG}" is dynamically replaced with the slug of the selected layout user chooses to import.

Pre-Designed Rows

Themify Builder also offers "Pre-Designed rows", also called "Blocks", which you can mix & match to quickly put together the design you have in mind.
If you wish, you can supply your client with a custom list of pre-designed blocks. For that first download: "https://themify.me/public-api/predesigned-rows/index.json". This is the file Builder loads to display the Blocks list.

Public API

This is a JSON file where each member contains the following data:

  • id Something unique.
  • slug Must be unique. This is used later on when Builder wants to load this specific Block template.
  • title A name for this Block.
  • url URL to where the demo of this Block can be seen.
  • thumbnail URL to a thumbnail image.
  • category A comma-separated list of categories. Blocks that share the same categories will be displayed together.

Now to tell the Builder to load a custom version of this file:


<?php

function custom_themify_builder_script_vars( $vars ) {
	$vars['paths']['rows_index'] = 'https://themify.me/public-api/predesigned-rows/index.json';
	$vars['paths']['row_template'] = 'https://themify.me/public-api/predesigned-rows/{SLUG}.txt';

	return $vars;
}
add_filter( 'themify_builder_active_vars', 'custom_themify_builder_script_vars' );

Of course, you must update the URLs in the snippet.

Note the second line ("row_template"), that tells Builder where to load a Block when user selects one. So for example, if a user decides to use the "E-commerce - Hero Banner" block (the first item in above screenshot), the Builder will attempt to load the template from this URL: "https://themify.me/public-api/predesigned-rows/e-commerce-hero-banner.txt".

Read More

Reinstalling Themes

Sometimes when the theme has issues such as corrupted or missing files, reinstalling it might resolves the issue. If you didn't edit any core theme file or add any custom files in the theme folder, it is safe to reinstall the theme without losing the theme settings and content. It is recommended to backup your Themify panel settings before re-installing the theme. To backup the Themify panel settings: on the Themify panel, click Transfer tab, then click "Export" button.

Method 1) Re-installing with Themify Panel

Using the Themify panel is the most fastest way to reinstall the theme.

  • Go to WP-Admin > Themify panel > Update, click "Re-install Theme" button.
    • NOTE: It requires Themify Updater and a valid membership to reinstall or update the premium Themify themes. If you don't have it installed, install it and enter your Themify username and license key.
  • You may reinstall to the previous version by selecting the version number from the version dropdown and then click "Re-install Theme" button.

Themify reinstall theme

Method 2) Re-installing with Themify Updater

  • If you have Themify Updater installed with your username and license key entered on Themify License setting page (a valid license key is required to reinstall premium Themify themes), go to "Themify License > Themes", then on the theme that you want to reinstall, click "Re-install" and select the version that you want to reinstall.

Reinstall Themes and Plugins

Method 3) Re-installing with WordPress Theme Installer

  • Login to Member Dashboard to download the latest theme zip.
  • Login to WP Admin.
  • Go to Appearance > Themes > Add new
  • Click "Upload Theme" link, upload the latest theme zip and activate it (see tutorial on Installing Themes).
  • Then click on "Replace current with uploaded" button
    • NOTE: If you using WordPress version below 5.5, you would need to temporarily activate a different theme (theme cannot be deleted if it is active), delete it and then reinstall it.

Replace current theme

Method 4) Re-installing a Specific Theme Version

If you want to reinstall to a specific theme version, you may do that with the WordPress theme installer.

  • First you need to login to Member Dashboard (so you can have access to the old version downloads)
  • Go to changelogs to find the theme's version history.
  • All our theme changelogs are structured as this:
  • Once you find the version number that you want to reinstall, you would need to download the theme zip manually. All our themes are structured as this:
    • https://themify.me/files/[theme-folder-name]/[theme-folder-name]-x.x.x.zip
    • Example: Themify Ultra 2.8.3 would be: https://themify.me/files/themify-ultra/themify-ultra-2.8.3.zip
  • After you download the theme zip, go to WP Admin > Appearance > Themes > Add New, upload the theme zip and click "Repace current with uploaded" (refer to "Re-installing with WordPress Theme Installer" for more details).

Read More

How Row Background Image Works

Good BG Image

The image below illustrates how background image displays on different devices/resolution. By default, the parallax and fullcover background image is displayed in the center so you can see that the image is fine because the subject (which is the girl model in this example) is in the center of the image. For fullscreen background image, we recommend to have 1400px x 800px which works with most desktop, tablet, and mobile resolutions.

a good example of how images varies in different devices

Bad BG Image

However, if the image subject is on the side like the example below. You will see how the face of the model is being covered on certain resolutions because the image is positioned in the center.

a bad example of how images varies in different devices

How to Fix Bad BG Image

To resolve this problem, we've added the “Background Position” option in the Builder row background options. To access this, you'll need to turn on the Builder > Click on the Styling (Paintbrush Icon). There you will find the "Background Position" option where you can select where you would like to position or center the image as it's viewed in various devices.

how the Builder Background Position can help fix this issue

By selecting the background position (for this example, we will select "right bottom"), you can keep the image subject in the visible area.

a fixed example of how images varies in different devices

Read More

ScrollTo Row Anchor (Single Page Menu)

This tutorial shows you how to create menu links that scrollTo Builder row anchors. It is often used for single page design (e.g. on the page's custom menu, it links to row anchors) so it is sometimes referred to as single page menu.

To achieve scrollTo row anchor:

  • Step 1) First, enter the Row Anchor name in Builder > Row > Options (e.g. "portfolio") where to add the anchor text on the Builder
  • Step 2) Then in the WordPress menu link, insert the anchor name as link URL = "#portfolio" (basically add # in front of the anchor name)scroll to row anchor menu
  • Result: When the #portfolio link is clicked or when users go the URL with the #portfolio anchor (e.g. http://yoursite.com#portfolio), it will scroll to the row where it specified Row Anchor = "portfolio"

NOTE: If you would like to redirect to one particular page with the anchor, you can do so by inserting the entire URL with the anchor on the Custom Links > URL (i.e. www.example.com#portfolio).

Linking From Inner Pages

If you need to have scrollTo menu on inner pages (i.e. linking to the homepage row anchor on inner pages), then you would need to create two separate menus:

  • Menu #1:
    • Create a menu (e.g. "Main Menu")
    • Assign it in the "Main Navigation" menu location
    • In the link anchor, it should be full URL path plus the anchor name (e.g. http://yousite.com/#anchor_name)
    • This will allow users to go back to home anchor from all inner pages
  • Menu #2:
    • Create another similar menu (e.g. "Custom Page Menu")
    • Assign it as the "Custom Menu" in the page's Themify Custom Panel > Page Options
    • In this menu, the link anchor should be just the anchor name with a number sign (#) added in front (e.g. #anchor_name)
    • Basically, this menu should have identical menu links as the main menu, expect the anchor links are not full URLs

Adjust ScrollTo Row Speed

To adjust the scroll speed, you'll need to create a child theme functions.php in the root of the theme and add the code below.


<?php 

add_filter('themify_builder_scroll_highlight_vars','custom_scroll_vars');

function custom_scroll_vars($vars){
$vars['speed'] = 400;
return $vars;
}

NOTE: Don't forget to change the speed as you want. By default it is 900.

Read More