Chat with Ava - Your AI Business Consultant
Hi I'm Ava, your AI guide to supercharging your business!
Whether you're already running a business or dreaming of starting one, I'm here to help turn your vision into reality using AI powered freelancers. Share your business goals, and together, we'll create a project that our talented freelancers can bid on. Let's make your vision a reality!
Wix templates are more customizable than you think. We'll show you how to reach into its DNA and reconstruct it to represent your unique business.
Jun 17, 2020 • 7 minute read
Closed User

If you want to be noticed in a crowd, you need to do something unique. Wave your arms, walk in the opposite direction, do something different to everyone else. Designing a Wix website is no different, if you want to stand out, you can't use the same template design everyone else is using.
Even if you modify your Wix template with its drag and drop builder, a competitor is only a few element arrangements away from outshining your design. To prevent this, you need to make your Wix template design almost impossible to emulate with a deeper level of customization.
To learn how to modify your Wix template beyond its drag and drop capabilities, read on.
Wrong.
Like most drag and drop builders, Wix has limitations, and if you have audacious design aspirations, you'll eventually hit a brick wall.
But Wix offers a portal to a deeper level of customization.The only catch is that you need Javascript, HTML and CSS knowledge to venture through it, a problem that's easily solved with a web developer by your side.
There are three different ways you can customize your Wix template beyond its drag and drop limitations.
iFrames allows you to embed content from other websites on your web page with some fancy HTML coding, Some examples include documents, videos and interactive media.
If an element you need in your template design is not available in Wix's element library you can create your own via custom elements. WIth a little HTML and CSS knowledge, you can create things like custom animations, scroll interactions, charts and more.
To use custom elements, you'll need to upgrade to Wix's Premium plan, connect your own Domain and remove all Wix ads.
Wix Corvid offers the most advanced customization options, it's a complete open development platform integrated into the Wix editor. With Wix Corvid you can transform your ordinary Wix website into a powerful web application.
With Wix Corvid, you drag user interface elements into place like you would via its conventional editor, but you have the ability to specify element behaviors and interactions with custom Javascript coding.
If you plan to work with web developers or web designers, they'll most likely be editing your Wix website through Wix Corvid.
You can even access specific databases from your Wix website to create dynamic web pages that represent the specific information you want to display to visitors. Wix Corvid also offers a range of APIs that integrate third party apps such as Zapier, Facebook, Google drive etc. Wix Corvid removes the common customization limits of most drag and drop builders and empowers web developers to build highly complex web apps from the seemingly simplistic Wix platform.
Here is a nice summary of Wix Corvid and its capabilities
Here are some examples of functions you can create with Wix Corvid:
Notify visitors via email when an item is back in stock
Real time notifications when a product is added to a store or sold
Create a mega menu with multi-level dropdowns
Animate images and text
Allow customers to search a database of your site's content.
And much more!
Wix Corvid cannot be activated on websites built with Wix ADI (Wix's AI builder), it can only be enabled via the Wix Editor. You are given the option of getting set up on the Wix Editor when you create a new website

If your website was created with Wix ADI, you should convert it to the classic editor.
To activate Wix Corvid, navigate to 'Dev Mode' in the top menu and then click 'Turn on Dev mode'

Once activated, a side bar will appear listing all of your web pages. This makes navigating to the pages you want to modify much easier.
The IDE, or the window you code in, is located at the bottom.

Source: websiteplanet.com
If you'll be working with Web developers to customize your Wix template, you need to grant them access to your Wix portal. Here's how you do it.
Form the top menu, navigate to settings > roles and permissions.

Then, input their email address, choose their role and hit 'Send Invite'. Web Developers and Web designers will need the highest permission level, so they need to be Admins.

Web developer and web designers are two separate professions, although sometimes their capabilities intersect.
Web designers focus on how a website looks. This includes how all of the functions are presented. The best web designers don't just aim to make a website look pretty, they strategize their designs to make website navigation intuitive, and therefore enjoyable. This is also known as UX design (user experience design) and its effective engineering, alongside a
Web developers, on the other hand, focus on functionality. So web designers focus how a website 'looks' and a web developer focus on what a website 'does'
They both code in different languages. Web designers code in CSS and web developers code in HTML and Javascript.
That being said, there are plenty of web designers and web developers that are skilled in both ends of the web development spectrum. Perusing their skill sets and portfolio of completed work will reveal whether this is the case (more on that shortly).
You have three primary options to choose from when hiring a web developer and web designer.
The
The
The price of a simple
Complicated custom website design pricing ranges from $20,000 - $40,000
The average web design project on Freelancer is completed for $220.94 USD
The average web development project on Freelancer is completed for $294.06 USD.
Hiring freelancers is by far the cheapest option. You're also not obligated to keep them on board for the entire year, simply hire them when you need them, for however long you need them.
As mentioned designers and developers are two separate skill sets but sometimes their capabilities intersect. Below is a summary of the key skills each should possess to effectively customize your Wix template.
If a prospective candidate is skilled in all of these areas, they could potentially complete the role of both a developer and a designer.
Key web designer skills
Wix corid development
CSS
UX design
A competent web developer should have the following list of skills
Wix corid development
Javascript
HTML
The other benefit to hiring freelancers is that you get to view a portfolio of their completed work on their profile, this will justify their listed skills and give you a clear indication of what they're capable of.
The smooth completion of your Wix template project depends on how effectively you communicate your requirements, but to communicate your requirements effectively you first need a crystal clear understanding of them.
This begins with thorough research. Create a spreadsheet titled 'Functions'. In that spreadsheet create 3 columns each titled 'Essential', Desirable' and 'Examples' respectively.
In the first column list all of the essential functions your Wix template needs to have. These are the non-negotiable basic functions you need implemented. In the next column list all of the functions that are not necessary but would be nice to have. In the final column insert the URLs of websites that exemplify any of your listed functions.
Follow the same process with a new sheet titled 'Design'. By separating your features into 'Essential' and 'Desirable' columns like this, you'll avoid accidentally overlooking any important features that might get eclipsed by fancy, non essential, additions.
Once you're done, you can then provide your web designer and / or web developer with the sheet to support your project brief.
But you'll need to deliver more than that to communicate your design requirements. Graphics are best communicated with graphics.
Web page design requirements are represented via a series of wireframes. Wireframes indicate the position of all the elements on a web page.
Here is an example of a low-fidelity wireframe design,

As you can see, it's incredibly basic. All of the elements are represented by simple symbols. The key is to communicate how a website should be structured and not the details of its aesthetics.
Once the structure of your website is understood, you web designer can either jump straight into coding it up, or create a high-fidelity wireframe for your approval first. This is a HD upgrade of your low-fidelity wireframe that represents exactly how your Wix template will look. The emphasis with this wireframe is to communicate the finer details of each of the design elements.

By working with multiple freelancers, you can leverage the talents of experts across a wide spectrum of industries to give your website an unprecedented advantage over your competitors.
And unlike the logistical nightmare of working with multiple businesses, you can manage your numerous projects and their associated payments under the one convenient platform,
Here are some ways uniquely skilled freelancers can help you:
A
A
An
An
A
Anyone can choose a template from Wix's library and modify it with its drag and drop builder, but only a few can modify its DNA to create functions and aesthetics that will blow visitors away. In a world where you can be anything, be different.
Related Stories

Our ultimate guide will help you write a business plan investors will be ripping out of your hands. Learn how to expertly craft each section of it.
22 min read

Remote work is becoming the norm for companies globally, especially in the wake of Coronavirus. Learn how to get the most out of remote workers
6 min read

The secret to a winning website design is a winning brand identity. We show you how to create one
9 min read

Artificial Intelligence technology is nothing to be afraid of. We'll show you how to use it to transform your startup
7 min read