Explore the ridiculously easy world of drag and drop website builders

Explore the ridiculously easy world of drag and drop website builders

hile you can learn to code and build a website on your own with the help of what we are going to cover in Chapter 12, let’s face it, getting your hands dirty with code isn’t every- one’s cup of tea. Luckily, there are a few cloud-based web

development platforms like Wix.com, Weebly, Squarespace, Jimdo and uKid that don’t require one to have any prior knowledge of web programming and development. In this chapter, we will demonstrate building a website using Wix. The other drag-and-drop website builders we’ve listed above are pretty similar in terms of functionality but we’ve chosen Wix just for the sake of illustrative purposes.

Getting started with Wix

Wix offers free and easy-to-use website builder that allows one to create remarkable websites without spending much time. As we have mentioned already,  there are no coding or technical skills required when it comes  to building websites using Wix website builder. There are over a hun- dred templates you can choose from, or you can build and design your website from scratch using a blank template. We will talk more about these templates in our subsequent sections. Wix also gives the option to opt for a premium plan, which unlocks many features and benefits that are normally inaccessible with the free version. Some of the advantages include removing Wix ads, connecting a domain name, additional band- width/storage, etc.

Signing up

As we have already figured out some of the basic things about using Wix, let’s proceed further to create an account on the platform and deep dive into the ocean of a stress-free website building. The procedure to sign up with Wix is pretty simple and straightforward. All you need to do is follow on-screen instructions.

In order to sign up with Wix: Go to http://www.wix.com.

Hit “Sign In” at the top right corner.

Click “Sign Up” right beside ‘New to Wix?’ Enter your Email ID.

Choose your password. Hit “Sign Up.”

Editing an existing template/website

Wix has many templates to choose from different categories. Some of the popular categories include Business, E-Commerce, Blog, Music, Photog- raphy, etc. Working on these existing templates mean Wix has already done all or at least most of the essential work on your behalf. Now all you need to do is make some final changes and add things you find necessary. Meaning, all these templates come preloaded with the content inside. For example, a business template may contain the information that may not be suitable for your company website. Hence, you can simply replace the existing information with text, pictures, and logos of your business without worrying about site’s fonts, columns, width, etc. Soon, we will talk about all the fundamental controls that make building or editing site content easier.

There are many features available to add to your site pages

For the sake of a demonstration, we built a sample website based on an existing template. Make sure that you are already signed-in to a Wix accounts. Step 1: As soon you open Wix homepage, you will be redirected to https:// www.wix.com/my-account/sites/. Meaning, all your published and unpublished websites can be found under this URL to manage. First timers will see a blue button – ‘Create Your Website.’ Upon clicking it, you will be given several options to choose from with a message ‘What kind of website do you want to create?’ Some of the options are Business, Designer, Blog, Beauty

& Wellness, Portfolio & CV, Accommodation, and more.

Step 2: How about creating an e-commerce website? Upon  clicking  on the ‘Online Store’ website category, you will come across hundreds of e-commerce site templates. Before finalizing or editing any template, you also get to explore its looks and working as a preview. In the event that you

want to know more, you can find the option ‘Info’ by hovering your mouse cursor over the template.

Step 3: Let’s go with a template called ‘Home Tech Store.’ After hitting the ‘Edit’ option, it took us some 10-15 seconds before we could get inside Wix Website Editor. It may vary depending on your Internet connection. The best part is it will not make you feel like meeting some stranger. As a newbie, if you have worked with WordPress, Joomla, or Drupal, you must be knowing how exhausted it feels even while making some simple changes to menu bar position, text size, or fonts, etc. It is not the case with Wix. Why? Because you will find everything in front of your eyes way before your website goes live. As a result, you will always know how your site looks in the real-time and how will it look like if some changes are made. Isn’t it cool?

Step 4: We are going to create an online Digit store where visitors will get to know about last month’s Digit issue. Not just that, they will also be able to buy the magazine directly on Digit.in. As planned, we replaced the featured product image on the homepage with Digit magazine. All we had to do was open Wix Website Editor > click on the existing image > select ‘Change Image’ > choose ‘Upload Image.’ You can follow this procedure for any picture or logo.

Step 5: Replacing the image was not enough as we also had to put in an appropriate product description. Hence, our next job was to change the text to something we could easily relate to Digit’s August 2016 edition. All we had to do was click on the existing text > choose ‘Edit Text’ > Enter the new text. We also had to hyperlink the ‘Preview’ and ‘Buy Now’ button. We followed this process that you need repeat: Click on the text or button you want to hyperlink > click on the ‘Change Link’ icon, which is next to the ‘Change Text’ option > insert the URL where you want to send your audience. We followed the similar processes for all other objects and content we edited. We will look at what more we can do in the next section where we will design a website from scratch with the help of a blank template. If you want to visit the website we created, go to http://techtsp.wixsite.com/buy-digit.

You can, of course, connect your sites to your domain names. However, that option unlocks if you prefer to go with a premium plan.

Making a website from scratch

In this section, we are going to build a website from scratch by making use of a blank template. We must remind you, a blank template on Wix resembles a lot to an empty haunted house, and you just cannot let yourself settle down before filling it out with all exciting and essential controls that we are going to talk about.

Step 1: Let’s go to http://www.wix.com. As we already have a Digit store e-commerce website in our account, we will longer see a message ‘Create Your Website’ on display. Rather, as we had mentioned earlier, we get to see our previous website listed over here. At the top right, there is an icon that lets one create a new website. Upon clicking the option, we landed on a template selec- tion page. This time, however, we don’t need to worry about any category as we are building awebsite from scratch with no ready-made content present inside. Step 2: In order to start designing a website from scratch, go to Blank Templates. Despite choosing this option, some of the templates present inside are not completely blank. Wix has done it a lot easier with pre-determined layouts and other essential things. However, as we are aimed at making a website without any help offered by Wix, we are going to choose the template called ‘Start from Scratch.’ Do remember that it’s darn scary!

Step 3: As soon as you get inside, the Wix Website  Editor will prompt  you to set a site name as well as the URL. Whatever name you select in a   free version, it will appear at the end of the URL. In our case, we  decided     to go with the name ‘techtsp.’ Hence, the website URL becomes this: http:// techtsp.wixsite.com/techtsp. You can anytime change the wesbite URL. All you have to do is go to http://wix.com > select your Website > click on ‘Manage Site’

Go to ‘Manage’ in the ‘Site Address’ > makes the changes.

Step 4: If you pay close attention to this blank template, you will figure out that the template is basically separated into three parts – Header, Page, and Footer. It makes it a lot easier to prioritize where your content is going to be positioned comfortably. The header will be comprised of site logo and menu bar. The page will act as a body. In the end, the footer will contain a short bio and logo with a link to your about or contact page.

Step 5: Enough said! Now it’s time to

explore what we can add to our website, which is literally blank at this moment. There are different controls located on the left. Our first job was to add a decent background to our site so that we could get rid of that scary white background. In order to change the site background, click on the ‘Background’ icon at the left > select ‘Image’ > choose ‘Upload Images’ > select the uploaded image > hit ‘Change Background.’

Step 6: Later on, we added a site title in the header. As we have already seen earlier, all you have to do is go to ‘Add’  option on the left >   select ‘Text’

choose ‘Site Title’ > position the text in the header. However, playing with

the site background and title is not going to be enough. Hence, we added a couple more pages. If you want to add a new page, click on the ‘Pages’ at the top left > select ‘Add Page’ from the drop-down list > rename the page to be added to a menu bar. You can add any of your favorite videos and enable autoplay as soon as the page loads

Step 7: Similarly, you can make background and design changes to your newly created pages. We created two pages – ‘About’ as well as ‘Contact’. When it comes to adding content to the contact page, the most important thing is to have a contact form. However, it’s not something tedious when it comes to adding a contact form in Wix. Go to ‘Add’ option on the left > select ‘Contact’ > Choose your contact layout. All you have to do is simply input your email address where you want to receive messages sent through this contact form.

In addition, there are many more exciting things that you can add to your website. For example, we added a YouTube video to our homepage by going to ‘App Market’ > searching YouTube in the search box > add ‘Video Payer’ > Insert a video URL. There are so many things that you can explore. However, as the matter of fact, whatever we have mentioned in this Fast- Track is just never going to be enough.

Loading

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.