Wizzaro

Contents

1. AJAX loading and WPBakery

2. How do I upgrade the theme? Will I lose all my changes?

3. My fullscreen parallax image is not responsive and does not scale well

4. How to optimise the speed of my website?

5. How can I add my own custom icons/fonts to the theme?

6. Map is not displayed properly

7. What should be the 'standard size' for images?

1. AJAX loading and WPBakery

WPBakery row's properties and some of the elements are not compatible with AJAX loading

1. There is a simple way to set the properties with AJAX loading of the rows you have set in WPBakery:

- load the page directly in your browser.

- right click and select View page source

- look for <style type="text/css" data-type="vc_shortcodes-custom-css">

- copy everything (including) between 

<style type="text/css" data-type="vc_shortcodes-custom-css">...</style>

- add a raw html element at the bottom pf the page and paste it there.

Is recommended to create your own CSS classes in appearance -> customizer -> additional CSS and add them to Extra class name attribute of the current row. This works great with AJAX loading.

We have some predefined classes that may help you:

row_padding_top - adds a top padding of 120px

row_padding_bottom - adds a botom padding of 100px

has-animation - adds a fading animation effect

small – small row width.

full – makes the row full width.

text-align-center – center aligns the text within the row.

has-animation – adds an animation effect

one_half – First 1/2 Column

one_half last – Last 1/2 Column

one_third – 1/3 Columns

two_third last – 2/3 Column

2. Use the child theme we prepared for using WPBakery Page builder and that can be found in the main archive. This enqueues basic WPBakery libraries and styles and initializes common elements for use in every page. However we do not claim it will work with all WPBakery elements and add ons

3. Add a specific page as custom link in the primary menu. This way the page will load normally and you do not have to disable AJAX throughout the entire site.

2. How do I upgrade the theme? Will I lose all my changes?

To upgrade the theme:

Download the latest version from envato (installable Wordpress file)

In admin dashboard: 

remove the old theme and install the new version

using FTP remove the theme folder from /wp-content/themes/ and then copy the new version

You will not lose the changes if you added content, uploaded media or changed theme/page options.

if you haven't modified the theme files you should be fine.

3. My fullscreen parallax image is not responsive and does not scale well

When the browser displays a fullscreen image will do so taking three factors in account:

- display resolution (width and height)

- display mode (portrait or landscape)

- image aspect ratio (width vs height)

So to display using the current resolution and display mode and preserving the aspect ratio, the browser will crop the image: in portrait will preserve the height whereas in landscape mode will preserve the width, cropping the rest that does not fit in current res.

The attached images visually explains the cropping process.


4. How to optimise the speed of my website?

One of the main reasons the site is slow is that you may have lots of images which are not optimised for web.

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization?hl=en

To check which images slow down the site. If you go to chrome, and right click and the 'Inspect' you will see a 'Network' tab which helps you monitor the loading time for all elements.

Click on the 'time' column to sort the entries.

Second you can use one of the WordPress cache plugins to deliver cached content:

https://premium.wpmudev.org/blog/top-wordpress-caching-plugins/

Third, compress your images  using a plugin such as WP Smush

Fourth, optimize your WordPress installation using a plugin like WP-Optimize.

Fifth, use a CDN (Content Delivery Network) to deliver your content over the web. 

5. How can I add my own custom icons/fonts to the theme?

Try uploading the files somewhere as a subfolder of the theme and then use @font-face to create a font family.

And then simply add the font-family style for each element you want to have that font.

See here for a description of the process:

http://premium.wpmudev.org/blog/custom-fonts-css/

You can edit style.css or use customizer -> Additional CSS

6. Map is not displayed properly

if there is an error in browser's console stating:

Google Maps API error: MissingKeyMapError

you need to create a google maps api key as described in this article:

https://developers.google.com/maps/documentation/javascript/get-api-key

Make sure you authorize the contact page url containing the map when you create the key.

then go to theme options -> map options -> google maps api key and paste it there

7. What should be the 'standard size' for images?

The standard we use is to have 1600px width for full-width images and 800px width for thumbnails

If you are using Adobe Photoshop, save images with 60% quality.