Introduction
Thank you for buying Uplift! We have spent a very long time developing this theme and the framework which it is built upon. We’ve done our very best to make it as extensive and feature-rich as possible, while also keeping it incredibly easy and slick to use.
Support
All support is provided through our support forum.
Register for support Find your purchase codeVideo Tutorials
To help you better understand the theme, and for walkthroughs of certain aspects of Uplift, please check out our tutorial videos:
Uplift Inc.WordPress Installation
This theme requires a working version of WordPress to already be installed on your server. If you need to install WordPress then please visit: http://wordpress.org/download/.
Step by Step
Here is a brief step by step on how to install WordPress:
- Download and unzip the WordPress package if you haven’t already.
- Create a database for WordPress on your web server, as well as a MySQL user who has all privileges for accessing and modifying it.
- Upload the WordPress files in the desired location on your web server:
- If you want to integrate WordPress into the root of your domain (e.g. http://example.com/), move or upload all contents of the unzipped WordPress directory (but excluding the directory itself) into the root directory of your web server.
- If you want to have your WordPress installation in its own subdirectory on your web site (e.g. http://example.com/blog/), create the blog directory on your server and upload WordPress to the directory via FTP.
Note: If your FTP client has an option to convert file names to lower case, make sure it’s disabled.
- Run the WordPress installation script by accessing wp-admin/install.php in a web browser.
- If you installed WordPress in the root directory, you should visit: http://example.com/wp-admin/install.php
- If you installed WordPress in its own subdirectory called blog, for example, you should visit: http://example.com/blog/wp-admin/install.php
Uplift Inc.Theme Installation
1) Uploading Uplift
The theme files need to be uploaded before you can activate the theme for use. There are two ways you can do this, FTP upload or WordPress upload.
- If you are uploading via FTP upload, then you need to upload the unzipped folder “uplift” to the /wp-content/themes folder of your WordPress installation. You can find this folder within the main download after you have unzipped it, it will be within the “Theme Files” folder
- If you are uploading via WordPress upload, then navigate within the WordPress admin area to Appearance > Add New Themes > Upload. Select the zipped file “uplift.zip” and then hit Install Now.
If you get an error saying that the stylesheet is missing, then you have uploaded the wrong folder. Please check that you are uploading the uplift/uplift.zip within the Theme Files folder. You may have to unzip the file that you download from ThemeForest to find this.
2) Activating Uplift
Once you have uploaded the theme, you need to activate it by going to Appearance > Themes, and activate “Uplift”.
Downloading From Themeforest
Uplift Inc.Setting Up
1) Install Recommended/Premium Plugins
Now that you have activated Uplift, you will see a yellow notice at the top of the screen. This notice is to let you know about the plugins that we recommend you install for use with the theme. Click ‘Begin installing plugins’ and install/activate the plugins one by one. You can also access this page by going to Appearance > Install Plugins.
NOTE: Installing the Swift Framework plugin is required, in order to use the Page Builder, Swift Slider, and have access to the Custom Post Types
2) WooCommerce Image Settings
You will need to set the WooCommerce image settings in order for the quality to be as high as expected. You can set these settings by going to WooCommerce > Settings > Products, and scroll down until you see “Image Options”.
See the screenshots on the right, which are the image settings which we use for our demo. We recommend you follow the same width, but you can choose your desired width/height ratio.
NOTE: If you’re installing the theme on existing content, then you may need to use the Regenerate Thumbnails plugin to regenerate the images to use your newly set image sizes
Uplift Inc.Demo Content Import
NOTE: Before importing the demo content, make sure you have installed & activated any plugins that you need which are recommended within Appearance > Install Plugins. Especially make sure WooCommerce is installed & activated if you wish for the demo shop content to be imported.
To make the Demo Content Import process as simple as it could possibly be for you, we’ve created a plugin to handle the entire process for you. You have the option to choose from any of the example sites we’ve created, and options to choose the specific items you import.
Install the Uplift Importer Plugin
You will first need to install the plugin, which can be found in Appearance > Install Plugins, titled “Uplift Demo Content“.
Once you’ve installed and activated it, you will see the “Uplift Demos” option in the left WordPress Admin Menu.
Using the Demo Content Importer
When you access the Uplift Demo Content Importer, you’ll be presented with the option of 5+ example sites to choose from. Each item has a preview image which links through to the example demo site, and specific import options.
You can choose to import just the demo content, just the colour scheme, or any combination of the provided options. Simply select what you’d like to import from your chosen demo, and then click “Import”.
The plugin will do the rest, and will let you know once the process is completed. The page may refresh a few times in the process, but this is completely normal – just make sure you leave it and that the process is not interrupted.
Uplift Inc.Header & Logo
1) Header Setup
There are a wide array of header layouts that are possible for you to use within Uplift. You can choose these options in Theme Options > Header Options, see screenshot on the right.
Once you’ve chosen the header layout you desire, you can also set various different aspects, to configure it even further. Please check these options out, as if you’re looking to change the way the header is displayed, or it’s contents, then it will be found here!
2) Logo Setup
You can change the theme’s logo by accessing the Theme Options and uploading your logo with the uploader under the “Header Options” section.
You’ll want to upload an image to use for the retina logo too, to make your logo high quality on retina displays. The retina logo should be double the size in pixels, of your standard logo. If you do provide a retina logo, then please provide the logo width in the field below. This allows the theme to set the size, and enable the retina functionality to work perfectly.
The max height for the logo area is 42px as standard, but you can override this in the Theme Options panel. If you upload an image with a bigger height than this, it will automatically be scaled to fit. The logo area has a maximum size, as to keep the menu items correctly placed. If you upload an image with a smaller height than this, you may need to add top spacing to get it vertically centered.
NOTE – You can optionally set a specific mobile logo in the Mobile Header Options panel.
3) Mobile Header Setup
Uplift allows you to control how your mobile header looks, independent from the main header options. You can set at what responsive size the mobile menu shows, the display configuration, and what is displayed. You can see a preview of the options to the right.
The colours for the mobile header can be set in the colour customizer.
4) Global Header Banner Setup
The global header banner can be enabled in the Theme Options > Global Header Banner Options, as seen on the right. You can choose to enable/disable it, and also set the number of columns/configuration you wish to show.
Once you have set this, you will need to set the content in Appearance > Widgets. You can see the content we’ve used on the demo set in the screenshot to the far right.
The colours for this banner can be set in the color customizer.
Uplift Inc.Menus
Uplift features 6 menu areas; the main navigation in the header, the overlay menu, the mobile menu, the menu in the top header, the aux slideout menu and the optional menu in the footer copyright bar.
Creating Menus
By selecting the Appearance > Menus option from the left WordPress admin sidebar, you can manage & create your sites menus and menu items, and select where certain menus are shown.
To create a menu:
- Click the “create a new menu” link
- Enter a name for the menu, this can be anything e.g “Header Menu”, “Footer Menu”, “Mobile Menu”.
- Click the “Create Menu” button
Menu Locations
Once you’ve created your menu, you need to assign it to the menu location which you would like to use it for. You can do so by setting it under the Manage Locations tab, once you’ve navigated to Appearance > Menus from the WordPress admin sidebar menu.
You can also set the top header menu, and footer menu here, so if you would like to use both make sure you create a menu for each area.
Mega Menu
Mega Menu functionality is added to the theme by using the Max Mega Menu plugin. We have built-in compatibility for this plugin, but have overridden their frontend css/js to better implement directly with the theme.
You can find the documentation for the mega menu here: https://www.maxmegamenu.com/documentation/getting-started/installation/
As of yet – only the default settings are supported when enabling a max mega menu – Event: Hover, Effect: None, Theme: Default.
Uplift Inc.App Header Style
The App Header functionality allows you to replicate app style headers on your website. The functionality behind it is that the header takes the top part of the background of the hero header on scroll, giving your page(s) a unique look.
To enable the app header on your desired page, simply follow the steps below:
- Edit the page, and in the Meta Options > Page Title panel, ensure that you have the Page Title Style set to “Hero”, and also that you have provided an image.
- Under Meta Options > Page Header, enable the App Style Header option.
NOTE: The hero heading height will be restricted to the height of the image as it resizes, to ensure that the image is not duplicated. We recommend that you use an optimised image of around 1920×1080 for the optimum quality across all browsers.
Uplift Inc.Footer
Setting the Footer layout
There are various footer layouts that are possible within Uplift. You can choose multiple column layouts, with different splits, or have a single column if you wish. You can choose these options in Theme Options > Footer Options, see screenshot on the right.
Adding Footer Widgets
Once you’ve chosen your desired footer layout, you then will want to add content to it. You add this content by navigating to Appearance > Widgets. There you will find a number of Footer Column widget areas, which correspond to the columns for which you’ve set as your layout.
You can then drag any of the provided widgets to the footer columns, give them titles, organise as you like and customise the settings.
If you’d like to use shortcodes or HTML within the Footer widget area, then you’ll want to use the “Text” widget.
Uplift Inc.Blog & Posts
Creating A Post
Once you’re on the Add New Post screen, you will then be able to set a title for the blog post, add the body content, and also provide all the meta information such as extra details and media. In the blog meta you can set the image for the thumbnail, and also the media type for the detail page.
You can use the Swift Page Builder to create the content of the item, which effectively allows you to have limitless possibilities for what you can display, and also how you can display it. If you do use the Page Builder to create the content, you will want to provide a custom excerpt (can be found in the item meta).
The item meta also contains post slider options, allowing you to set the image for the slide that will show if the item appears in a posts slider, and also the display for the caption.
Creating A Blog Page
To display your blog posts, you will then need to create a page that includes the “Blog” or “Recent Posts” page builder assets, you can see these shown to the right.
The blog asset includes options such as the following, allowing you to customise the output to your liking, which you should adjust to suit your needs, as you can change what is outputted in a wide variety of looks.
NOTE: DO NOT set the posts page in Settings > Reading, as this will force your page to show the archive layout, and not follow your created page.
Blog Asset Settings
The Blog asset is the main asset for displaying blog posts. This asset can display all blog posts in various display types such as Masonry, Timeline, etc, and also display with different pagination styles inlcuding Infinite Scroll and Load More via AJAX.
Recent Post Asset Settings
The Recent Post asset is ideal for displaying a small number of posts, such as the latest from all, or from a certain category. The asset has various display types and options, including a carousel option. You can see some of the options available on the right.
Uplift Inc.Portfolio
Adding a Portfolio Item
The Portfolio menu option on the left is where you add portfolio items. To add a new portfolio item, select the Portfolio > Add New option from the left hand WordPress menu. There are lots of portfolio options that you can set on a per-item basis, these include meta information such as client/sub-title/external link, and also display options for the main detail. You can set both thumbnail and detail media independently.
Once you’ve added your portfolio, you can display them on any page using any of the Portfolio Page Builder assets.
Creating A Portfolio Page
To display your portfolio items, you will then need to create a page that includes the “Portfolio“, “Portfolio Carousel” or “Portfolio Showcase” page builder assets, you can see these shown to the right.
The Portfolio asset includes options such as the following, allowing you to customise the output to your liking, which you should adjust to suit your needs, as you can change what is outputted in a wide variety of looks.
NOTE: DO NOT set the posts page in Settings > Reading, as this will force your page to show the archive layout, and not follow your created page.
Portfolio Asset Settings
The Portfolio asset is the main asset for displaying portfolio items. This asset can display all portfolio items in various display types such as Masonry, Multi-size Masonry, Gallery, etc. The image to the right shows the edit screen for the portfolio asset.
Portfolio Carousel Asset Settings
The Portfolio Carousel asset is ideal for displaying a single line of portfolio items, looped to save space – ideal for a small section of the page to allow users to get a preview, or to view your latest portfolio items, for example. You can view the asset settings in the image on the right.
Portfolio Showcase Asset Settings
The Portfolio Showcase asset is designed to as the name states “showcase” either 4 or 5 of your portfolio items. These are shown in a single line, with dynamic hover overs to increase the view of the hovered item, and show details. You can view the asset settings in the image on the right.
Uplift Inc.Shop & Products
Setting the Shop page
To display your products, you will want to create a page, leave the content blank, and then set the “Product Archive / Shop Page” in WooCommerce > Settings > Products. Here you can select the page, choose whether you show categories or products on the main shop page, the default sorting, and more.
If you would like to add products within a page that you create using the page builder, you can also use the Products & Products (Mini) assets.
Adding a product
To add a product, you need to go to Products > Add New from the left WordPress admin menu.
Once you’re on the Add New Product screen, you will then be able to set a title for the product item, add the description, and also provide all the data information such as price, stock status, attributes, etc.
You can add a featured image in the right column box, and above that set any other gallery images. Any images you add here will be used for the product slider images.
If you would like to create a product where you can select the size/colour of a product for example, and for setting categories/attributes then please check out the following guides:
Product Variations Product Categories & AttributesQuickview Functionality
The excellent “WooCommerce Quickview” plugin is included with Uplift as standard, this will allow you & your customers to quickly preview items from the shop list, and navigate between them, without having to navigate to the product pages. If you haven’t installed the plugin, then please go to Appearance > Install Plugins, and then install & activate “WooCommerce Quickview“.
Once you’ve activated this plugin, you will have a new menu item under the WordPress menu, titled “Quickview“. For the tigger settings, we recommend the settings which we’ve detailed in the screenshot on the right.
Note that as standard, there is a theme option set which shows the Quickview button only on hover. You can enable/disable this in Theme Options > WooCommerce Options > Shop Options.
Product Zoom Functionality
Product image zoom functionality is built into the theme as standard, no plugin required. To enable the zoom functionality, simply turn on the option in Theme Options > WooCommerce Options > Product Options. The option is titled: Enable image zoom on product images.
Wishlist Functionality
The “YITH WooCommerce Wishlist” plugin is recommended with Uplift, as this will allow you & your customers to add products to a “wishlist”, which you can then save and share if you like. If you haven’t installed the plugin, then please go to Appearance > Install Plugins, and then install & activate “YITH WooCommerce Wishlist“.
Once you’ve activated this plugin, you will have a new tab item under the WordPress > Settings menu, where you can set various options.
Be sure to check Theme Options > Header Options, as there is a toggle here to enable/disable the wishlist menu item & dropdown in the header.
Mobile Filters
The theme provides the ability to add mobile filters, which will show on mobile viewports, for filtering products above the product display.
To set the mobile filters, we have provided a specific sidebar “Mobile WooCommerce Filters“. You can set these as you would any other widget area, in Appearance > Widgets
Uplift Inc.Color Customisation
The color customizer can be accessed by pressing the “Color Customizer” button within the WordPress admin bar, or through the Appearance > Themes menu.
The customizer is used to control all colours within the theme. It’s also used to set the design style, and other design aspects such as border styles for menus/headers etc. All changes you make can be seen live on the preview window to the right, allowing you to test the changes before you make them live & visible on your site. Note that hover colours won’t be previewed due to not being able to modify them via the customizer JS.
Uplift Inc.Swift Slider
The Swift Slider is our very own slider solution, which allows you to quickly create sliders for use anywhere on your site, with incredible ease. You don’t need to install any plugins to use it, it’s ready as standard, and you can setup/edit sliders using the Swift Slider section on the left WordPress menu.
Creating a slide
The Swift Slider is our very own slider solution, which allows you to quickly create sliders for use anywhere on your site, with incredible ease. You don’t need to install any plugins to use it, it’s ready as standard, and you can setup/edit sliders using the Swift Slider section on the left WordPress menu.
Setting up multiple sliders using categories
In order to set up multiple sliders, you need to use the provided “Slide Categories” taxonomy. Slide categories are used to group together slides, which you can these choose to display a single or all categories of slide when you display a slider. Slides can belong to more than one category, incase you want to display a slide on all sliders for example.
Displaying a Swift Slider
There are two ways in which you can display a swift slider on a page.
- You can use the page meta options, which can be found below the content editor when creating/editing a page. Using the page meta options, the slider will always be at the top of the page, above or below the header, and it will be the full width of the container. The options here allow you to configure the display of the swift slider. The Page Header Type option will affect where the slider is shown. See the image to the right for a screenshot of the page meta options for displaying a Swift Slider.
- You can use the page builder asset, which can be set anywhere in the page content, be used at variable widths, and also all configurable options.
Uplift Inc.Page Builder
The Swift Page Builder (SPB) allows you to create unique and amazing pages, exactly the way you want them! The SPB is powered by shortcodes, which are embedded when you select the content elements you want, and edit them. You can see the source by going back to the classic editor, although you shouldn’t ever need to do this and you should only make changes to this if you know what you’re doing.
Please visit the following link to view our full page builder documentation:
Page Builder DocumentationUplift Inc.Galleries
Creating A Gallery
To create a gallery, you first need to navigate to Galleries > Add New. Once you’re on the Add New Gallery screen, you will then be able to set a title for the gallery, add your images, and set the page heading options.
Displaying list of Galleries
The Galleries asset is the asset you’ll want to use if you are looking to display a selection of your galleries for users to navigate. This asset can display all galleries in various display types such as Masonry, Gallery etc, and also other options such as linking, full width, column counts.
Displaying individual Gallery
The Gallery asset is the asset you would want to use if you wanted to display a single gallery in a page. The asset has various display types and options, which can see a selection of the options available on the right.
Uplift Inc.Team
Adding a Team Member
The Team menu option on the left is where you add team members. To add a new client, select the Team > Add New option from the left hand WordPress menu. You will then be able to provide an image for the team member, and various info if you’d like through the team meta box, see the image on the right.
To display your team members, you will then need to create a page that includes the “Team” page builder asset. This asset features various options for you to change the way the team members are displayed.
Uplift Inc.Clients
Adding a Client
The Clients menu option on the left is where you add clients. To add a new client, select the Clients > Add New option from the left hand WordPress menu. You will then be able to provide an image for the client, and a link if you’d like through the client meta box, see the image on the right.
To display your clients, you will then need to create a page that includes the “Clients” page builder asset. This asset features various options for you to change the way the clients are displayed.
Uplift Inc.Testimonials
Adding a Testimonial
The Testimonials menu option on the left is where you add testimonials. To add a new testimonial, select the Testimonials > Add New option from the left hand WordPress menu. You can write the testimonial text in the post content, and then the testimonial cite in the testimonial meta box.
Once you’ve added your Testimonials, you can display them on any page using the “Testminals” Page Builder asset.
Uplift Inc.Widgets
Widget Areas
As standard there are 10 sidebars that are included for your convenience. These are Sidebar 1-8, WooCommerce Sidebar, and CrowdFunding Sidebar. You also have the option to create your own sidebars, using the included Widget Area creator found in Appearance > Widgets – shown right. Simply write a name for the widget area, click the button, and a new widget area will be created for you.
Custom Widgets
We include 9 widgets with our framework, which you can use in any widget areas.
Swift Framework Advert Grid Widget – A custom widget to show an advert grid of up to 8 125 x 125 adverts in a single block.
Swift Framework Flickr Widget – This flickr widget displays a set number of your flickr photos. You can get the required Flickr ID from here http://idgettr.com/.
Swift Framework InFocus Widget – A custom widget to show a focus of a single post.
Swift Framework Portfolio Grid – A custom widget to show recent portfolio items in a grid with an image and title tooltip.
Swift Framework Recent Comments – A custom widget to show recent comments.
Swift Framework Recent Portfolio – A custom widget to show recent portfolio items with an image.
Swift Framework Recent Posts – A custom widget to show recent posts with an image.
Swift Framework Tweets – A custom widget to show the latest tweets from a Twitter account.
Swift Framework Video Widget – The Video widget embeds a video from a url that you enter into the input field within the widget options. You can find out what type of video you can embed here.
Uplift Inc.One Page Navigation
You can enable the One Page Navigation option in the Meta Options > Page Meta panel within the page edit screen. (See Right).
When enabling the One Page Navigation option, the page will be checked and anchors will be added to the navigation based on the Row elements used within the page.
The Row element has an ID, and Name field that both need to be completed for the one page nav to work. You can see these fields in the image to the right.
You can also link menu items in the main navigation to your page sections, and have the smooth scroll functionality enabled. All you need to do is add a “Custom Link” menu item, and then set the URL to be the ID of your row, see right.
Uplift Inc.Smart Sidebar
The Smart Sidebar is a sidebar which animates as you scroll down the page. This uses the same functionality as the One Page Navigation functionality of Rows for sections (ID + Name), and is enabled in the meta options, see right:
Uplift Inc.Midnight Header Transitions
In Uplift, we have implemented functionality that allows the header to transition between light and dark naked modes, based on the content you have on the page. Note, this does require the naked header to be active on the page you are trying to set this up on.
It is very easy to set this up, simply add your page content within rows, and then you can edit the row, and set the Header Style for the row under the “Display” tab. See right.
“Light” means that the naked header will go into “Light” mode when the header overlaps the row on the page.
Uplift Inc.Super Search
The Super Search functionality is a clever way to invite your customers to find specific search results based on their needs. In a few clicks they can easily select a few different parameters to search for such as category, or price, and then hit the submit button to be taken to the results.
To enable this functionality, you first need to set up the text & options in Theme Options > Super Search Options. There you can add as many options as you like, as well as the various text and labels to go with it.
Once you have set this up, then you can use the “Super Search” asset in the Page Builder, to show this on your page.
You can also use the Super Search as an Aux option, in one of the header aux areas (set in Theme Options > Header Options).
Uplift Inc.Shortcode Generator
Uplift includes the Swift Framework Shortcode Generator, which is a custom built feature for our themes. The generator allows you to embed shortcodes within your content quickly without having to remember the syntax. The generator allows you to select the type from the list, and provide parameters (if needed).
The shortcodes found within the generator are mainly for simple content based output, such as typography details, buttons, and social options.
You can find the shortcode generator within the WordPress WYSIWYG editor. See right for a visual indication.
Uplift Inc.WPML Currency Switcher
Uplift provides support for displaying a currency switcher in the header aux items, when used in combination with WooCommerce + WPML.
In order to configure the plugins to add the currencies, you will need to follow this guide: https://wpml.org/documentation/related-projects/woocommerce-multilingual/multi-currency-support-woocommerce/
Once you have set that up, you can then add the Currency Switcher aux item to either the header left or right aux areas, in Theme Options > Header Options.
Uplift Inc.Included Premium Plugins
There are a few premium plugins which we’ve hand picked for you, which are included within Uplift and free for you to use. You can find these plugins within the main download folder, under the “Premium Plugins” folder. You can also install them from within the theme, by going to Appearance > Install Plugins.
Each plugin that is included is detailed below.
Revolution Slider
Create a responsive(mobile friendly) or fullwidth slider with must-see-effects and meanwhile keep or build your SEO optimization (all content always readable for search engines). See the heaps of custom transitions/animations for each object on the page! Customize this slider with our convenient drag&drop backend to your very needs.
This plugin features tons of unique transition effects, an image preloader, video embedding, autoplay that stops on user interaction and lots of easy to set options to create your own effects.
WooCommerce Quickview
This plugin allows you to quickly view any product in your WooCommerce catalog whilst browsing a category or product listing page.
By clicking the new Quickview icon, subtly placed over each product in the listing, a modal box will open with important product information and imagery, giving your customer the chance to add to cart there and then.
View Plugin SiteUplift Inc.Gravity Forms
Gravity Forms is by far the best form plugin available for WordPress. It features advanced form creation with a very slick, easy to use admin panel. Best of all, Uplift supports it as standard – even providing a page builder asset for you to easily add a form to any page!
Get Gravity Forms here:
Uplift Inc.- Uplift Inc.
Translation
Uplift is 100% translation and multi-lingual ready, and we recommend that you use the very popular WPML plugin, you can buy it here:
To translate the static strings, if you aren’t using WPML then I recommend downloading PO Edit, from http://www.poedit.net/. Once you have installed please follow the steps below:
- Open the /uplift/languages/ folder and duplicate the en_US.po file, then rename it to your desired language code. For example; for German you need to re-name it as de_DE.po for Spanish es_ES.po for Turkish tr_TR.po etc. You can find all the codes from this link http://codex.wordpress.org/WordPress_in_Your_Language
- Then you will need to open the .po file in PO Edit. Once opened, you will see all strings that needs to be translated. Type the translation of a string into the “Translation” column. Do not delete or edit “Original string” part.
- When you finish translating, save the file. This will create an .mo file in the same directory.
- Upload the new files into the languages folder of the theme /wp-content/themes/uplift/languages/ and then follow this guide:http://codex.wordpress.org/Installing_WordPress_in_Your_Language#Single-Site_Installations
Using WPML Localisation
If you would prefer to use WPML to translate the theme strings, rather than translating the po file, please see this guide: https://wpml.org/documentation/getting-started-guide/theme-localization/
Theme Options/String Translation
Anything that doesn’t fall inside posts, pages or taxonomy goes into String Translation. This includes the site’s tagline, general texts in Admin screens, widget titles and many other texts. – https://wpml.org/documentation/getting-started-guide/string-translation/
Custom Post Type Translation
All of Uplift’s custom post types are translatable. Please ensure you check the following link to set up translation for those – https://wpml.org/documentation/getting-started-guide/translating-page-slugs/
Uplift Inc.Speed & Performance
We’ve done our absolute upmost to make Uplift as quick & efficient as possible out of the box. We guarantee you’ll be incredibly impressed with the speed as standard, but we know that squeezing as much performance out of your site as possible is a very key factor. That’s why we’ve added built-in performance options, that you can enable with a single click.
Swift SmartScript & Pre-minfied scripts + styles
If you navigate to Theme Options > Performance Options (Under General), you will then find the included performance options in the theme.
The Swift SmartScript option is a unique technology which we have developed in order to make your pages load faster. By default, all plugin scripts will load on each page, no matter if they are needed or not. With Swift SmartScript, everytime you save a page, it checks the page content and updates the page meta based on the content – if a plugin is not used, then it’s scripts & styles are removed from loading. In our tests this has reduced the number of styles & scripts loading on the page a huge percentage. This will be very very crucial in achieving maximum page speed ratings.
There are two options for loading pre-minified scripts & styles. Enabling these option will reduce the number of theme scripts + styles loaded, and also the file size of the scripts.
Note: if you have made any changes to the CSS/JS files included with the theme, then these won’t be included in the minified versions.
Autoptimize Plugin
As a step further to improving the load speed of your site, we’d highly recommend you try out the Autoptimize plugin. On the demo site, we use the following settings:
Optimize HTML Code? – Disabled
Optimize JavaScript Code? – Enabled
Optimize CSS Code? – Enabled
We have included some filters in the theme to adjust the advanced options so that you don’t need to change them, however you may need to add some files to the exclude list if you use 3rd party plugins which aren’t compatible.
Further Performance Improvements
There are a few things that you can do to further increase performance, and while these may require a bit of configuration to get working 100%, they are likely worth the time it takes.
1) Caching – This involves storing cached versions of your pages & files for quicker serving. We’d recommend either WP Super Cache, or W3 Total Cache plugins. WP Super Cache is a much simpler option, whilst W3TC offers a lot more control if you are technically capable to configure it.
2) CDN – A content delivery network (CDN) comprises of multiple data centres, usually around the world, to serve content to the end-user as quick as possible. There are a large number of options that you can utilise here, but from our experience we would highly recommend CloudFlare. They offer free & premium plans, and we’ve seen great results. With the paid plans, they also offer extra tools to speed up image loading, and they also offer very good threat detection and prevention functionality.
Uplift Inc.Content Image Sizes
Below are a list of the image sizes that the theme uses based on the different assets/locations within the theme:
Portfolio
- 5 Column (Standard) – 400px x 300px, (Retina) – 800px x 600px
- 4 Column (Standard) – 400px x 300px, (Retina) – 800px x 600px
- 3 Column (Standard) – 600px x 450px, (Retina) – 1200px x 900px
- 2 Column (Standard) – 800px x 600px, (Retina) – 1600px x 1200px
- 1 Column (Standard) – 1200px x 900px, (Retina) – 2400px x 1800px
Multi-Masonry
- 4/3 – Wide Tall – 1000px x 750px, (Retina) – 2000px x 1500px
- 4/3 – Tall – 375px x 750px, (Retina) – 750px x 1500px
- 4/3 – Wide – 1000px x 375px, (Retina) – 2000px x 750px
- 4/3 – Standard – 500px x 375px, (Retina) – 1000px x 750px
- 1/1 – Wide Tall – 900px x 900px, (Retina) – 1800px x 1800px
- 1/1 Tall – 450px x 900px, (Retina) – 900px x 1800px
- 1/1 Wide – 900px x 450px, (Retina) – 1800px x 900px
- 1/1 Standard – 450px x 450px, (Retina) – 900px x 900px
If you are using the Gutters option, then please add 50px height (100px for retina) for Tall size, and 15px (30px retina) for Wide Tall.
Portfolio Detail
- Full Width (Standard) – 2000px x ANY, (Retina) – 4000px x ANY
- Standard Width (Standard) – 850px x ANY, (Retina) – 1700px x ANY
Blog
- Mini (Standard) – 446px x 335px, (Retina) – 892px x 670px
- Mini with sidebar (Standard) – 370px x 260px, (Retina) – 740px x 520px
- Masonry (Standard) – 480px x 360px, (Retina) – 960px x 720px
- Timeline (Standard) – 970px x 728px, (Retina) – 1940px x 1456px
Blog Post
- Detail (Standard) – 1170px x ANY, (Retina) – 2340px x ANY
- Detail with sidebar (Standard) – 770px x ANY, (Retina) – 1540px x ANY
Widget Images
- Recent Portfolio / Recent Posts (Standard) – 94px x 70px, (Retina) – 188px x 140px
WooCommerce
Shop Index
You can set any size for the shop height, but please note that as Uplift uses a CSS grid, the width of the product image will be determined by the browser width and how many columns you have to display.
Product Page
The product page image defaults to 50% width as standard, although you can resize this with custom css. The image height/width can be whatever you like, but we’d recommend the width to be at least 50% of your site’s max-width.
Recommended
You can see the image sizes that we use on the demo to the right. If you aren’t sure what to set, then we recommend you use our settings.
Uplift Inc.