标签： technical

Grid Column Resizing

For Portfolio and Blog Grid Columns, the amount of columns can be freely selected and range from 1-6 columns. However, the amount of columns that will display depends entirely on the available width of the page. This is general responsive behavior and is completely normal. For example, if you select Portfolio 5 Column and have a site width of 1100px, then you will see 5 columns of images when viewing it on normal size desktop screens, but will see less when viewing it on smaller screen sizes.
The theme will continuously recalculate the size of the columns when you resize the window until it reaches a breakpoint. When it reaches a breakpoint, it will automatically move 1 column to the next row. So 5 columns breaks down to 4 columns, then 3 columns, then 2 columns and all the way down to 1 column on mobile sizes.Grid Framework Responsive BreakpointAs explained above, the theme will continuously recalculate the size of the columns when you resize the window until it reaches a breakpoint. You can manually set a responsive breakpoint for the grid to control when it will start to break into smaller amount of columns. Please take note, however, that further breakpoints are calculated automatically. To learn more about this option, please view our Responsive Breakpoints article.

White Screen After Installing The Theme

If you upload the theme and activate it, and see nothing but a white screen, please read the following information. This is more common than you might think, and it can be frustrating to sort out. First, it is important to understand what the white screen, often referred to as the 「white screen of death,」 actually means. Simply put, there is an error that you can』t see. The reason you can』t see it is because, WordPress is not displaying the error that is causing the problem. When attempting to diagnose a white screen condition consider what you did before the condition occurred:

Did you install an upgraded version of WordPress, and did you check to see if the white screen occurred before you installed and activated your theme?
Did you install any plugins prior to installing the theme?There are several causes for this condition. We will be addressing the ones most likely to occur — Plugins, Theme, System Status and Other Causes.
PluginsNo matter how hard developers try, it is basically impossible to write plugins that will work and play well together with every single theme. The same is true in reverse. If you experience a white screen after activating the theme, the problem could be a plugin that is in conflict with the theme. Try the following:
If you can access the admin area of your site, but get the white screen on the front end, login to your admin section and deactivate all plugins. After doing so, check your front end page again. If you can see it, you have a plugin conflict. Now, start activating each plugin one by one. When you see the white screen again on the front end pages, you will know that the last plugin you activated is the likely culprit. Deactivate it and continue checking all remaining plugins one by one to make sure there are no others.If you are getting the white screen on the front end and the back end admin area, then you will need to access your site via an FTP client. A little known trick is to change the name of your /wp-content/plugins folder to something else temporarily like 「plugins.bak.」 This will make WordPress ignore your plugins. Then check to see if this resolves the problem. If it does, log into your admin section and then change your plugin.bak folder back to plugins . Then deactivate all of your plugins via your admin page.ThemesThe most likely issue associated with a theme being the cause of a white screen condition is when the upload of the theme did not complete the transfer of all files, the transfer resulted in corrupted theme files, or you have PHP configuration memory limits set too low. Try this:

If you can access your admin area, disable all plugins as described above, change the theme to one of the WordPress default themes. Check to see if this resolves the problem. If it does, try reinstalling the theme by completely removing the old copy in /wp-content/themes/ and installing a fresh copy. I recommend using FTP to do this because you less likely to run into errors than when you use HTTP WordPress theme installer. Activate the replacement theme and see if the white screen condition returns.

If you cannot access your admin area, use an FTP client to access your site. Disable your plugins by following step #2 in the plugins instructions above, and delete the theme entirely. This will force WordPress to use the default WordPress theme. See if the problem persists. If it does, then the problem is likely in your WordPress installation. If the problem does not occur, then install a fresh copy of the theme via FTP, activate it and see if the problem reappears.
System Status
You may also be suffering from a web server configuration that is set with PHP memory limits too low. If this is the case, it can cause the white screen condition as well. Check the System Status page for confirmation of this. You can then ask your web hosting service to increase your PHP memory_limit to at least 64 megabytes. 128 megabytes is recommended.
Other CausesThe following is a list of possible other causes for the white screen condition, because they too can cause this error:
Blank space in functions.php – This is easy to do if you』ve been modifying the file. A good way to check is to replace it with the unchanged version of the file and see if the site works. Blank line in wp-config.php – a blank line at the start of this file can bring on the White Death. Check for extra spaces at the end as well. File Permissions – Make sure all the directories are set with permission of 755 and the other files 644. This should not happen because the server should inherit the permissions of the files that get uploaded to the server. But we have seen occurrences where, for example, unpacking a ZIP archive using CPANEL and other interface tools botched permissions. Multiple Plugins – When you』re reactivating your plugins, the first one you find that causes the problem may not be the only one. Sometimes its a combination of two or more. So you may think you have the problem solved, but it may still exist and come back in the future.Tips
Check your error logs. A good amount of the time, server logs will show *exactly* what PHP function is causing the issue, and where.
Run a PHP validator on the code prior to saving. It will catch a lot of simple mistakes.

Prebuilt Website Content Fails

If you attempt to import an Avada prebuilt website and it fails, it is most likely going to be due to low server limits. Please continue reading for more details on how to fix this. If you have duplicate menu items or other duplicate prebuilt website content, please read and follow How To Remove Duplicate Prebuilt Website Content After Import documentation. NOTE: This issue won』t be possible for sites using Avada 5.2 or higher due to changes in the Prebuilt Website Import process.
Likely Causes For Demo Import FailuresYour PHP memory, max file upload size, and/or PHP time limit is set too low.Your webhost uses process watching software that prevents bulk processing on their web servers.You have WP Debug enabled, for information on disabling that, see this post in the WordPress codex.Recommended PHP LimitsIf the import fails there will be a notice in a popup letting you know the demo failed to import. There will also be some initial troubleshooting suggestions letting you know where to look first to resolve the problem. You』ll want to ensure you have at least the below PHP limits for the import to complete. These values can be checked on the System Status page.
max_execution_time 180memory_limit 128Mpost_max_size 32Mupload_max_filesize 32MAvada System Status PageIf you』re using Avada 3.8 or higher, you will be able to check the current server limits set for your WordPress site. When checking the System Status page, you』ll want to look for any red notices on PHP time limit or PHP Memory / WP Memory. In the red notice will be a recommended limit for the value. Contact your hosting provider and request they increase the limit(s) to the recommended value(s), then try the demo import again. You can also see our post for increasing these limits yourself here.
IMPORTANT NOTE: The System Status tab feature is only available in Avada version 3.8 or higher.

Performance Testing using Pingdom

We all want our websites to load quickly, and there are a number of services out there to help us test, evaluate, and fix various issues affecting the loading speed of our pages. In this series of docs, we will be looking at the major players in this area, Google PageSpeed Insights, GTMetrix, Pingdom and WebPageTest, and how they can help you improve the loading speed of your Avada website. Read on!,PingdomPingdom offers a whole suite of website uptime and performance monitoring tools, but this is a subscription service. However, they also offer the Pingdom Website Speed Test for free. Much like the other testing services, this tool can analyze your website for page loading bottlenecks or other performance issues.
Overview
Testing

Results Summary

Improve Page Performance

Response Codes

Content Size & Requests by Content Type

File Requests

Conclusion

Links
TestingThe Pingdom Website Speed Test is a no frills affair, with the only options being the url to test, and the location from which to test. There are 7 locations from which to choose: Tokyo, Frankfurt, London, Washington D.C., San Francisco, Sydney or São Paulo. Simply select one from the drop down menu to choose where to run the test from. Then click Start Test.
Results SummaryWhen the test has completed you are presented with a Results Summary. This ranks your website url with a grade (based on the YSlow test), lists the  total amount of data transferred, the median load time and the total number of requests made. You can also download a HAR file (The HTTP Archive format, or HAR, is a JSON-formatted archive file format for logging of a web browser』s interaction with a site) or share your results via Social Media.
Of all the tests we cover in this series, Pingdom is by far the simplest in terms of results and information. The free service is bare bones, with no documentation. But it is hugely popular, and this is probably because it is the easiest speed testing tool to use! Not everyone is a web performance expert, and so for the typical WordPress user, some of the other alternative tools out there can be quite overwhelming. Sometimes, less is more. Pingdom focuses on the two most important things: how fast your website is and how you can make it faster.
Improve Page PerformancePreviously called Performance Insights, and found below the main Results Summary, comes the Improve Page Performance section. This lists individual grades, and a specific score, for the bottom scoring 7 areas that the Pingdom Website Speed Test reports for.  Each website may have different suggestions, based on what can be improved.
Next to each suggestion is a drop down arrow which shows further information about that specific issue with suggestions as to how to improve the score.
Response CodesThe next section is the Response Codes. This section lists the response codes, also referred to as HTTP status codes, for the page tested. This can show you if the page is OK, (200), has permanent redirects (301) or links to content that can』t be found (404).
Content Size / Requests by Content TypeThe next sections are the Content Size by Content Type and the Requests by Content Type. Each of these is useful to quickly see what is taking up the most resources on your web page, both in terms of size and requests.
File RequestsThis section is a waterfall chart of all the individual requests on your web page. Pingdom』s tests measure TTFB (Time to First Byte). You can sort the waterfall data in many ways, as well as options for changing the order and filtering the information. At the top right, there is Legend, with a color coded system indicating the different stages of a request, and at the left of each request, icons to indicate the different content types of the request. There are also color coded server response codes, showing the various codes. At the bottom of the dialog, you can choose how many entries show per page, which can be useful for sites with a large number of requests.
If you want more details, you can drill down into any specific request to see a whole raft of specific details for that individual requested item.
ConclusionPingdom Website Speed test is a relatively basic, but very easy to use, tool to help detect and remedy issues that may be affecting your website』s load time. While not providing as much information as the other analysis tools, it』s simplicity and interface might make it more accessible for beginners.
Remember, due to hosting and content variables, website optimization is a very complex, technical area, and falls well outside of the support we can provide for Avada.
Apart from our many documentation resources, the Facebook Avada User』s Group has a large and very active membership, and this topic is regularly discussed on the Group. You can also ask questions on the Community Forum.
Useful Links & Resources

Performance Testing using GTMetrix

Performance Testing using WebPageTest

Performance Testing using Google PageSpeed Insights

Pingdom vs GTmetrix vs WebPageTest

Avada Speed and Performance

How To Speed Up Your Site Using Plugins

CSS & JS Compilers

A Comprehensive Guide to WordPress Image Optimization

General Cache information

Page Title Bar Global Setting vs Page Setting

The Page Title Bar has an option found at Avada > Options > Page Title Bar > for enabling or disabling the Page Title Bar globally. You can choose Show Bar and Content, Show Content Only, or Hide. As well, this can be overridden on every single page/post/portfolio item via the Avada Page Options.
There you have the same options as the Global Options, as well as 「Default」, which means the global options setting will take precedence.
If you have many pages, all with different PTB settings, and you would like to change them all at once, please follow these instructions:
Step 1 – Install Custom Field Bulk Editor plugin: Download here
Step 2 – After installation, you will have an additional menu entry in the page/post/portfolio tabs in WP admin area. Go to it and check all your pages/posts/portfolio items you want to change.
Step 3 – In the editor fields below enter pyre_page_title as name and default as value.
IMPORTANT NOTE: This document only applies to the Global Options method of creating Page Title Bars.Important Note About LimitationsThere is a limit on how many pages you can edit at once, it is set to 200. If you have more than 200 pages, you need to edit them in sections. The search bar on top allows you to search for date ranges as well as words. So for example: 2014-01-01..2014-02-01 will give you all pages created in January this year. Date separation is done with 「..」 This way you can change multiple pages at once, but won』t run into the overall 200 pages at once issue

Is Your Slider Not Showing On Mobile Devices?

If you have noticed that your slider is not responsive on mobile devices, then chances are you have either a 「fallback image」 inserted in page options, or you have a missing image in one of your sliders.
A fallback image is used to override the slider to show a single static image, and a missing image can prohibit some sliders from running correctly.
If a self-hosted or YouTube video is added to the Fusion Slide and the preview URL/fallback image is missing, the slide can also not show.
1. Make sure you do not have ANY missing images in the slider, all sublayers/backgrounds that have images must have correct URL』s.
2. Check for a fallback image inserted in the page options, it will override a responsive slider. See the image below for a visual representation.

Is Your Site Running Slow?

If your site is not running as fast as you』d like, there could be a few different issues. Our live demo is a representation of how fast your site could be. Results will vary though, depending on the items below. This post will outline the common issues that can slow down your site, and some of the steps you can take to speed it up.
PluginsPlugins are one of the awesome aspects of WordPress. We can find a plugin that does a specific job, install it, and have that functionality out of the box. But plugins do add to the number of requests the site makes when loading a page, so it』s best to be prudent when adding new plugins.
There is no specific number of plugins that will affect the speed of your site. It』s usually not too many plugins that cause problems on your website, but instead poorly coded ones. Poorly coded plugins can cause websites to crash, affect page speed, and introduce security risks, so they can often be the weakest link. Don』t just add plugins randomly without careful evaluation of their quality.
The basic rule of thumb when adding plugins to your site is only to add a plugin if you really need that functionality. And then, choose wisely from the repository. There is a great review system to help you, so it makes sense to choose plugins from well respected plugin authors and ones that get 5 stars and great reviews.
Finally, make sure you review your site regularly, removing any plugins you are not using, including inactive ones and keep all plugins updated at all times.
Use A Caching PluginOne plugin that should be high on your list is a caching plugin. Caching plugins are created to help speed up your site. Your site』s loading time will certainly decrease when you use one. They can be difficult to configure, but a well configured caching plugin will definitely shave some time off your page loading times.
There are many different caching plugins on the market; many are free and some are premium. In addition, your host may or may not allowed certain ones due to their own caching system. So there is not one solution for all. For more details on cache plugins please follow the link below.
Learn How To Use Caching PluginsImages / ContentIt is very critical that your images be optimized for the web. This is one of the most common reasons for slow websites. Having images larger than they need to be in file size, can drastically slow down your site speed. Also, it is equally important not to upload larger images than what is needed. For example, if you have an image that needs to be a featured blog image that will have a sidebar, then the image area is only about 670px wide. Determine the required size of your images based on the width of your site, as set in the Theme Options. We also recommend using an image editing tool like Photoshop to 「Save For Web」 to optimize images and reduce the overall file size.
A great tool to compress JPEGs and PNGs files is Compressor.io, it allows you to easily upload a file and then will auto compress it for you. There are also Image Optimization plugins such as ShortPixel and reSmush.it which can further optimize your images.
Read Our Comprehensive Guide On Image OptimizationServer / HostingSometimes slow speed can be a result of your hosting service. Some shared hosting services can be overcrowded and have a direct effect on speed. This is a very broad topic, but it is a simple fact, that some hosts are better than others. If you have checked the above two items and the site is still slow, the most likely it is a server/hosting issue. Contact your host and discuss it with them.
Enable / Disable Avada FeaturesWe include several options to disable theme features in the Avada > Theme Options > Advanced > Theme Features tab. If you know you won』t be using certain features on a website, then disabling them can have a small effect on load times.
With Avada 5.8, we have also implemented a range of new performance features. For a full rundown of the update, see What』s New in Avada 5.8. Many are behind the scenes, like Lazy Load, but there are also a few direct new performance features you can enable, like the new PWA plugin, which provides enhanced caching strategies, Font Face rendering, Emojis script disabling, and the existing feature, Dynamic CSS & JS.
Consider a CDNYour site may benefit from a CDN (Content Delivery Network), like Cloudflare. CDNs utilize their own servers which are located in between the origin infrastructure (server where the content is actually located) and the end users. CDNs cache content in servers that are located closer to the end user, which means faster access as the distance to traverse is shorter.
Consult A Performance Testing WebsiteThere are a range of website performance testing services available. These sites can analyse your site』s loading time and pinpoint the specific issues you need to address to speed up your loading time. We have recently published a series of documents on the leading Performance Testing websites. For specific information on each one, please see our Performance Testing Using Google PageSpeed Insights, Performance Testing Using Pingdom, Performance Testing Using GTmetrix, and Performance Testing Using WebPageTest documents.

Instal Error: Destination Folder Already Exists

If you are seeing this error message when installing your theme, you have 3 options to choose from:
Option 1: Delete the old theme from Appearance > Themes in WordPress, then upload the new zip.
Option 2: Access your site via FTP. Rename the old Avada folder in wp-content/themes to something like AvadaOld, then upload the new version either as a zip through your Dashboard or unzipped into the themes folder through FTP. This option lets you keep the old theme version as a backup on your installation in case you want to switch back. Note: It is always recommended that the version you will finally use is in a folder called Avada.
Option 3: Access your site through FTP and navigate to wp-content > Themes. Delete the old theme folder, upload the new version either as a zip through your Dashboard or unzipped into the themes folder through FTP.

I Lost My Widgets And Menu During Update!

WordPress stores menus and widget settings and some other settings by folder path. So if you change the name of the theme folder, then the path is no longer valid. You need to rename your theme folder back to what it was before, and your settings, menus, widgets will be restored. If you need to keep your previous theme folder, then, simply make a copy of it before you upload the new theme.

Google Maps Not Working?

There are a several reasons why your google maps may not be working, the most common issue being no Google Map API key set or set incorrectly. To use the Google Maps JavaScript API, you must register your app project on the Google Cloud Platform Console and get a Google API key which you can add to your app.
OverviewInvalid or No Google API Key SetCheck The Address FormatCopyright Text FormattingPotential 3rd Party Plugin ConflictInvalid or No Google API Key SetA typical example of what you will see in place of the Google map option does not have a registered API key or the key has been implemented incorrectly:
Use The Chrome Browser DevTools To DiagnoseYou will need the Chrome browser for this, download here. Once installed, navigate to the page that displays the Google Map and follow the instructions below:

Open the Google Chrome browser and navigate to the page/Google map that you want to inspect.
Right-click anywhere on the webpage. Near the bottom of the menu that pops up, you will see 『Inspect』, click that to open the Chrome DevTools console.Click on the 『Console』 tab to check for any JavaScript errors. See an example below:Google Maps API Error ExplanationBelow is a description of that the API error entails, or click here to read detailed information on https://developers.google.com/

MissingKeyMapError The script element that loads the API is missing the required authentication parameter. If you are using the standard Maps JavaScript API, you must use a key parameter with a valid API key. If you are a Premium Plan customer, you must use either a client parameter with your client ID or a key parameter with a valid API key.
Setup Your Google Maps API KeyTo set up your Google Map API key please do follow their detailed instructions in the 『Get API Key』 article.
Here are some important articles to read with regard to recent changes implemented by Google for Google Maps usage:
Get Your Google API KeyProduct and pricing changes, guide for existing users (effective starting July 16, 2018).The API key allows you to monitor your application』s API usage in the Google Cloud Platform Console. See Google Cloud Platform Console help for more information.If you are a Standard Plan customer, with an API key you have access to generous free daily quota, as well as the option to increase your daily quota by enabling pay-as-you-go billing.Important Note: Google announced that from June 11th it is launching pricing plan for it』s Maps service. Each generated map API key will get $200 free usage per month so in most cases users will be able to continue using maps without a problem. Continue reading below to know more about this.Users will need to add their billing info to Google Maps, although they won』t be charged unless they are over $200 per month. Google already sent an email to users which use it』s Maps service. That email also includes their assessment for currently used API keys, so it should be clear if user would need to pay for Maps service in future or not. View Google』s email notification.
Google Maps Platform Pricing PlanCheck The Address FormatUse a correct address and not google map embed code, or longitude/latitude. It has to be a written address, example below:
775 New York Ave, Brooklyn, Kings, New York 11203
Copyright Text FormattingThe copyright text has to have complete, valid HTML markup. Valid HTML is required for theme to function properly. Please make sure to format the HTML correctly anywhere so that issues like this don』t happen.
Potential 3rd Party Plugin ConflictThird party plugins may be conflicting with the map feature. Please disable any plugins that were not included with Avada to see it if fixes the issue. If it does, enable the plugins one by one to find the culprit.