This is a sponsored article and was made possible by Wix. The actual contents and opinions are the sole views of the author who maintains editorial independence, even when a post is sponsored.
When it comes to creating a website, if you are a developer, you can use the DIY approach and code and host everything yourself. If you are an end-user/consumer just like most of us, you can use a web builder software to create beautiful websites with mere clicks.
Wix belongs to the latter, as it is a web builder that allows you to create free beautiful websites with just a few mouse clicks. But with the introduction of Wix Code, it has blurred the lines between doing it yourself and using a web builder. You can now do both.
In the example below we will create a simple Make Tech Easier blog and add dynamic features to it from Wix Code.
Setting up a new site with Wix
Assuming that you are new to Wix, you can get started by signing up for an account with Wix. Once you have created an account, you will be prompted to create your website.
Next it will ask you to select the type of website you want to create. Since I am replicating a Make Tech Easier blog, I selected the “Blog” option.
The next screen will ask how you want to create your website.
Wix ADI makes use of artificial intelligence to create a site automatically for you. If you prefer to go manual, select the Wix Editor method. (To access Wix Code you have to use the latter. If you have chosen Wix ADI, you can still switch to the Editor mode later on.)
For this example I used the Wix Editor as I wanted to have full control over the site’s look and feel. From there you can start with a template. (There are thousands of them.)
To keep it simple, I started with a blank template with a classic layout. The following image is what it looks like.
Accessing Wix Code
To access Wix Code go to “Tools” and check the “Developer Tools” option.
You will now see a new “Site Structure” column. This is where you can access all Wix Code features.
Creating databases to store posts
One of the great features of Wix Code is the Database function that allows you to create databases (aka Collection) and store data in it. For a blog we will need to create a database to store all our posts. In the Database section click “Add new collection.” Give your collection a name and specify its purpose. There are several database types that you can choose from, ranging from user generated content, member submission, private data, etc.
Once the collection is created, you can start adding fields and data into it.
What we have created is a Posts database containing the title, content, published date and various aspects of a blog post. Next, we need to populate the database content to the main site.
Dynamic pages are more like a template page where you can create one design and connect it to the database, and it will auto-populate all the items in your database to the front page under their own URLs. For example, we have six posts in the database. With one single dynamic page, we can get it to display all the posts in the main site. This saves you the effort to manually create a single page for each post. There are two main kinds of dynamic pages in Wix Code – one is for displaying a single item, while the other is for Category (a collection of similar items in a list).
The following shows how to create dynamic pages and link them to the site.
1. On the floating toolbar click on the first icon and select “Dynamic Pages.” Click the “Add to site” button.
2. Select “Item Page” from the popup.
3. In the URL select the field (in the database) that you want it to use for the URL. In this case I set the “title” to be the URL.
4. Next, design the page and add in fields from the database. With every element you drag to the page, you can click the “Connect to Data” button to link it with the field from the database. For example, I dragged a “Header 1” element to the page and linked it to the “Title” field in the Posts database.
And I did the same for the featured image, post content, etc.
5. Once you are done with the design, you can preview it and see how it looks on the front end.
6. The next step is to link the dynamic page from the Home page. Load the Home page and add a Repeater widget from the “Lists and Grids” section. Connect the widget to the Posts database and link each element in the widget with the fields in the database. Under the “Link connects to” section, scroll down and select “Posts” in the Dynamic Pages section.
What you can see is that we have only created one dynamic page, and it will automatically generate all the pages for each item in the database. You can do the same thing to add a Category dynamic page too.
1. We have created a simple form that will collect the First Name, Last Name and Email address from the user. For this form we want to validate the email address and make sure the “Confirm email” field is the same as the “Email” field.
2. Add the following code to the “Page Code” section:
This will validate the email address and show the error message if the email is invalid.
This is the only step where it could get more complicated. Wix Code now integrates with external API, so you can easily connect to third-party services like Amazon, Dropbox, Google Drive, Twitter, IFTTT, Zapier, etc. I won’t go into details here, but if you are interested, you can check out their API documentation.
If you are not technically savvy or a developer, building your own website can be a tedious task. Wix has done a good job of making website creation a breeze. With Wix Code it goes a notch further and gives you plenty of control over your site. You now have access to complicated web developer tools and complete control of how your site should work, all done with a simple click, drag and drop with no coding experience required.
Kudos to Wix for creating such an easy-to-use tool that will solve many problems.
Try out Wix Code and let us know what you think of it.