Author: EWS

 
Facebooktwitterredditpinterestlinkedintumblrgoogle_plusmail
 



 

What is Wix?

Wix is an easy to use online website builder with over 90 million users. Although you can use it to create stunning websites, it has a few major downsides..

 

Why don’t we recommend it?

AJAX Centered.

Most websites use a combination of HTML, PHP, and CSS to lay out their pages. Although Wix is no different at its core, it does have one quirk that could cost you.. All of it’s code is loaded through AJAX.

Wix Javascript code
Wix AJAX code

To the less savvy, this may not mean a lot. Those with a background in web design know that you should use the least amount of JavaScript possible in your webpage. As AJAX is a combination of both JavaScript and XML, it too should see limited use. Let me explain:

 

JavaScript is used to program the behavior of web pages. It can be found in any animated aspect of a web page. If a lot of scripts are ran on the same page, your users may begin to have declining performance resulting in increased load times. This increase in load time will result in a decrease of site visitors. Especially those who may be using a mobile device.

More importantly, for those users who may have JavaScript disabled, this means your website will be completely invisible! Dont believe me? Here’s an experiment you can try:

  1. Visit any Wix site.
  2. Disable JavaScript in your browser.
  3. Reload the page.

You will be met with a blank – white screen.

 


 

Mobile Friendliness?

Alongside simply needing your site to load, your site must be mobile friendly. As of April 21, 2015, mobile friendliness is now a major Google ranking factor.

In the USA, 94% of people with smartphones search for local information on their phones. Interestingly, 77% of mobile searches occur at home or at work, places where desktop computers are likely to be present. -Google

Although Wix boasts about having great features for their desktop site, their mobile setup is lacking. Many users have stated that, alongside having issues with layout, their mobile sites tend to look nothing like their desktop sites – a common issue with WYSIWYG editors.

One of the more commented on issues states that font styles sometimes fail to carry over to the mobile site. Although seemingly minor, a site’s font says a lot about its purpose.

 

Summary

For DIY, Wix is a reasonably easy to use platform and a viable solution. It can help you to quickly set yourself up with a face for your business or organization. However, remember the issues we discussed above.

Although most people don’t mess with disabling JavaScript in their browser, you will always have those people who do. Remember, when building a site through Wix, you risk loosing those visitors who may have JavaScript disabled.

“In the USA, 94% of people with smartphones search for local information on their phones.” Remember, if this 94% is browsing the web on their smart phone, they want that browsing experience to be best suited to their device. If your mobile website represents something you might find in the bottom of a blender, your visitors probably won’t approve.

Why loose those visitors when, ultimately, you could prevent it from the start.

 


Facebooktwitterredditpinterestlinkedintumblrgoogle_plusmail



The Scenario:

You have just spent your hard-earned cash on the AwesomeOne Pro WordPress theme by FlyThemes. You’re excited to get started on your new web project of awesomeness, however the ultimate nightmare happens. You discover that the Full-Width page template, which you were hoping to use, is a bit wacky.

FlyThemes AwesomeOne Pro theme Full-Page template issue where only left-inner 60% of the page is editable
FlyThemes AwesomeOne Pro theme: Full-Page template issue where only left-inner 60% of the page is editable.

This was exactly my situation just days ago. I was attempting to use the popular Beaver Builder plugin to construct my new website, but the Full-Width page template was only allowing me to place new sections on the inner-left 50-60% of the page. This just wouldn’t do. After searching the internet for anyone reporting a similar issue, I caved and put in a request for help on their support forum.

After a few days of no response and time running short, I decided it was best to take matters into my own hands..



Fixing the Issue:

To fix the issue, first we need to understand what’s wrong. To someone who may not be very familiar with WordPress, or coding in general, this issue may seem quite intimidating. Even so, take a deep breath, we’re here to help after all!

The issue is simple. A width attribute has been set at a fixed width (in pixels) instead of “auto.” To fix this issue, we will first need to locate the selector names of the div tags in question in the appropriate PHP file.

Navigating to the WordPress Editor page via the appearance tab
Navigating to the WordPress Editor page via the Appearance tab.
  1. Navigate to the Admin panel of your WordPress website.
  2. On the left sidebar, hover over the “Appearance” tab and select “Editor.”
  3. On the right, find and select the file named “Full Width Page Template (full-width.php)”

The Code

Now that we’ve done that, look at the first 3 opening div tags. They should read: <div class=”content-area“>, <div class=”middle-align”>, and <div class=”site-main” id=”sitefull”>. 

To ensure we wont have any unnecessary conflicts, we need to rename these two selectors. Copy the code out of your full-width.php file and save it to a safe location as a backup. Once you have done that, copy the following code into place and save the file:

<?php /** Template name: Full Width * The template for displaying all pages. * * This is the template that displays all pages by default. * Please note that this is the WordPress construct of pages * and that other 'pages' on your WordPress site will use a * different template. * * @package Awesome One */ get_header(); ?>
 
 

<div class="content-area-full">
 

<div class="middle-align">
 

<div class="site-main-full" id="sitefull">
 <?php while ( have_posts() ) : the_post(); ?>
 <?php get_template_part( 'content', 'page' ); ?>
 <?php //If comments are open or we have at least one comment, load up the comment template if ( comments_open() || '0' != get_comments_number() ) comments_template(); ?>
 <?php endwhile; // end of the loop. ?>
 </div>

 
 

<div class="clear"></div>

 
 </div>

 
</div>

 
 
<?php get_footer(); ?>

Notice that content-area is now called content-area-full and that site-main is now called site-main-full. These name changes will only affect your full-width template.

Once again, on your WordPress admin sidebar, hover over Appearance. This time, select Theme Options. Select Basic Settings at the top, if it is not already selected, and scroll down until you see the Custom CSS styles input box. Copy and paste in the following code:

.content-area-full {width:auto; margin:0 auto; padding:0;}
.site-main-full {width:auto; margin:0; padding:0; float:none;}

Scroll to the bottom and hit Save Options. The AwesomeOne Pro Full-Width page template should now work as intended! If for some reason you still see the Full-Width template as broken, clear your browser cache.

 

FlyThemes AwesomeOne Pro theme Full-Width template fixed.
FlyThemes AwesomeOne Pro theme Full-Width template fixed.