{"id":20616,"date":"2020-05-04T14:10:31","date_gmt":"2020-05-04T14:10:31","guid":{"rendered":"https:\/\/websiteghana.com\/?p=20616"},"modified":"2020-05-04T14:10:31","modified_gmt":"2020-05-04T14:10:31","slug":"how-to-use-wix","status":"publish","type":"post","link":"https:\/\/websiteghana.com\/blog\/how-to-use-wix\/","title":{"rendered":"How to Use Wix – Easy, Step-by-Step Tutorial (2020)"},"content":{"rendered":"
\n

Wix is easy to use, powerful, and quite affordable website builder that can be used to create business\/personal websites, online stores and portfolios.<\/p>\n

This easy, step-by-step tutorial helps you to learn basics of Wix website builder.<\/p>\n

We\u2019ll show you how to build a website using Wix from scratch on your own. This includes choosing a template, customizing your site, adding pages, products and more.<\/p>\n

Ready? Let\u2019s get started\u2026<\/p>\n

Full disclosure<\/strong>: This tutorial includes Wix affiliate links. If you decide to purchase Wix through our referral links, we earn a commission. Thanks for your support.<\/p>\n

1) Go to www.Wix.com<\/a> And Click \u201cGet Started\u201d<\/h2>\n

Wix lets you jump right into building your site without having to think about any technical details of the setup. However, it\u2019s still worth taking a minute to explain the whole process:<\/p>\n

The first thing to know about working with Wix is that you get to build your site first, and only then have to decide whether to pay for additional features or stay with completely free setup.<\/p>\n

All you need to do to begin is navigate to the main Wix website<\/a>, click on the big Get Started<\/strong> button, and then on Sign Up<\/strong>.<\/p>\n

\"wix.com\"<\/a><\/p>\n

Input your contact info and click on the main Sign Up<\/strong> button. After doing so, you\u2019ll be taken straight to what\u2019s called the Wix ADI \u2013 Artificial Intelligence Designer.<\/em><\/p>\n

\"wix<\/p>\n

Click on Let\u2019s Do It<\/strong> to begin.<\/p>\n

In these initial steps, Wix will ask you a series of questions and then set your site up with specific optimizations in place \u2013 based on your answers.<\/p>\n

The first question is very simple:<\/p>\n

\"wix<\/p>\n

The thing you most likely want to choose there is \u201cmyself.\u201d<\/p>\n

The second question asks you about the type of site that you want to build:<\/p>\n

\"wix<\/p>\n

As you can see, there are multiple options available. You shouldn\u2019t neglect this step because Wix will take your input and use it to pre-optimize your website for you.<\/p>\n

For this guide, we\u2019ll choose \u201ca business\u201d since it\u2019s the most common type of website that people build.<\/p>\n

The next questions follow suit and lead you to a nice, one-sentence definition of your website and its purpose.<\/p>\n

2) Pick The Type of Website That You Want to Build<\/h2>\n

With the initial questions out of the way, Wix will ask you if you trust the ADI enough to let it build an example website for you, or if you want to build everything by hand. Going with the ADI is a much more efficient approach, especially since you can come back later on and customize every little detail of your site. You\u2019re not stuck with the initial suggestions that Wix gives you.<\/p>\n

\"launch<\/p>\n

Click on Start Now<\/strong>.<\/p>\n

Depending on the answers you gave a minute ago, Wix will have some follow-up questions to pin-point the exact type of design and site structure that\u2019s the most likely to work in your scenario.<\/p>\n

The first question is about the type of business that you want to build the website for.<\/p>\n

\"website<\/p>\n

\u26a0\ufe0f Note; if you selected a different option in the previous step \u2013 not a \u201cbusiness site,\u201d but perhaps an \u201conline store\u201d \u2013 then Wix will show you a different selection of options.<\/em><\/p>\n

As soon as you start typing in your business definition, Wix will have a range of suggestions lined up. For example, as we enter \u201cmassage,\u201d Wix has these suggestions:<\/p>\n

\"massage<\/p>\n

We\u2019re showing you this just to convey how many different business types Wix supports and has pre-made designs and site structures for. Ultimately, for the example website we\u2019re building, we\u2019ve selected \u201cMassage Therapist\u201d<\/em> from the list.<\/p>\n

Click on Next<\/strong> when you find the type of business\/website that suits you best.<\/p>\n

Based on everything you\u2019ve selected up until this point, Wix will suggest a set of features for your site.<\/p>\n

\"pick<\/p>\n

In our case, Wix suggests a module for online bookings, chat, a blog, and a handful of other things. What you will see on this screen can vary based on your answers. Go through this list and tick the features that seem like they make sense for your site.<\/p>\n

In the next step, Wix will ask about your business name, which will become the name of your website.<\/p>\n

\"business<\/p>\n

If it\u2019s a website for a personal brand that you\u2019re building, you can enter your own name there.<\/p>\n

Next, Wix will ask you if you already have some content on the web that you\u2019d like to import to your new Wix website. Wix allows imports from other websites and also from Google Places listings. In practice, importing content from other websites can be troublesome, so it\u2019s best to leave this out. Just click on Next<\/strong>.<\/p>\n

\"import<\/p>\n

With this done, Wix will now let you pick a design for your website.<\/p>\n

3) Choose a Template (Design)<\/h2>\n

Wix tries to make the design selection process as straightforward as possible, so instead of showing you a wall of hundreds of templates to choose from, it begins by asking just about the style of design that you prefer.<\/p>\n

\"pick<\/p>\n

There\u2019s a couple of options, and, based on your answers, Wix will present you with a filtered list of templates that are in tune with your previous selections.<\/p>\n

We feel that the style called \u201cBreeze\u201d<\/em> will be okay for a massage therapist, but you\u2019re free to make your own selection.<\/p>\n

As soon as you make a choice, you\u2019ll see that Wix puts together pretty accurate homepage alternatives to pick from. Based on your previous selections, these homepages will be pre-filled with relevant graphics and adhere to a given design style. Here\u2019s what it suggests to us:<\/p>\n

\"wix<\/p>\n

You\u2019ll notice that there are many massage-related images on these homepages. You should know that we didn\u2019t put them there. It\u2019s all effort of the Wix ADI trying to predict what will work for me and my business. Great!<\/p>\n

Pick the homepage you like best, and proceed.<\/p>\n

4) Customize the Site<\/h2>\n

After picking the homepage you like, you\u2019ll be thrown right into the Wix ADI editor where you can customize every little detail about how the website appears and what elements it features.<\/p>\n

To start with, you\u2019ll see an interface like this:<\/p>\n

\"wix<\/p>\n

This is all very intuitive, so pretty much every element on the page behaves like you\u2019d expect it to.<\/p>\n

For instance, if you want to edit any of the texts on the page, just click on a given piece of text. A new sidebar will appear where you\u2019ll be able to do your modifications.<\/p>\n

For example, below, we clicked on the main block in the center (saying \u201cWyatt Collier\u201d). A sidebar appeared letting me edit the name and also add a subtitle and description.<\/p>\n

\"main<\/p>\n

Clicking on any of the other blocks on the homepage will have the same effect \u2013 letting you into an editing interface where you can change the contents of that given block.<\/p>\n

Here\u2019s an example of us working on the \u201cMy Treatments\u201d block. We can edit each piece of text individually and also work on the list of treatments.<\/p>\n

\"my<\/p>\n

\u26a0\ufe0f Note; the Wix ADI editor works with auto-save, so you don\u2019t have to worry about losing your progress.<\/em><\/p>\n

But there\u2019s more to customizing your design than just changing texts here and there:<\/p>\n

Realigning the Sections<\/h3>\n

The Wix ADI editor lets you drag and drop individual elements around the page and also change the order of the sections.<\/p>\n

If you look at any of the sections, you\u2019ll see two arrow icons in the top right corner of the section:<\/p>\n

\"block<\/p>\n

These arrows let you move a given section up and down. Just click on them, and you\u2019ll see your section shifting places in a matter of seconds.<\/p>\n

Switching the Design Styles of The Sections<\/h3>\n

Apart from editing what\u2019s inside your content sections, you can also change the overall designs of the sections themselves. For instance, when we hover the mouse cursor over the \u201cMy Treatments\u201d section, a small button pops up in the top left corner labeled \u201cDesign.\u201d After clicking on it, a whole new panel shows up with some alternative design styles to choose from:<\/p>\n

\"switch<\/p>\n

Just pick the one you like best, and, with one click, it\u2019s going to be put in place of the old one.<\/p>\n

Adding New Sections<\/h3>\n

Customizing the sections that are already on the page is one thing, but you can also add new ones.\u00a0To do so, click on the Add<\/strong> button that\u2019s in the top menu, and then click on \u201cSection to Page.\u201d<\/strong><\/p>\n

\"add<\/p>\n

You\u2019ll see that there\u2019s really a lot of different content sections to pick from. Luckily, to make this easier, sections come pre-categorized:<\/p>\n

\"section<\/p>\n

You can grab any section from the sidebar and drag-and-drop it onto the canvas to the right.<\/p>\n

For example, here\u2019s what a testimonial<\/em> section looks like when added to the page:<\/p>\n

\"testimonial<\/p>\n

As you would expect, you can fine-tune any little detail about that testimonial section and the texts inside of it.<\/p>\n

Setting Fonts And Colors<\/h3>\n

When you get started with the Wix ADI editor, you\u2019ll get a pre-defined color scheme and font settings right out the gate. Those are good enough in most cases, but you can change them easily to get a more fine-tuned look.<\/p>\n

To do so, click on the Design<\/strong> button in the top menu and then on Colors<\/strong>.<\/p>\n

\"change<\/p>\n

This is yet another place where Wix will do whatever it can to make your work easier. Instead of showing you thousands of color options, it just asks you about the main preferred color that you\u2019d like to build your design around, and then it\u2019ll suggest specific color schemes based on that.<\/p>\n

\"colors<\/p>\n

    \n
  1. Pick your main seed color.<\/li>\n
  2. Pick a color mode (tinted<\/em>, colorful<\/em>, vibrant<\/em>, light<\/em>, dark<\/em>, mix<\/em>).<\/li>\n
  3. Pick from a range of recommended color palettes.<\/li>\n<\/ol>\n

    Overall, changing the entire color scheme will take only a couple of minutes.<\/p>\n

    The same thing goes for your fonts. Start with the same Design<\/strong> button in the top menu, and select Fonts<\/strong>.<\/p>\n

    \"change<\/p>\n

    Again, Wix will have a range of suggestions for you.<\/p>\n

    \"fonts<\/p>\n

    It\u2019s best to just switch between the options back and forth until you find something you enjoy. You should also experiment with the font size tool to make sure that all texts on your site are readable.<\/p>\n

    Adding Images, Slideshows, And Other Visual Features<\/h3>\n

    Wix is ready to welcome any type of visual content on your website. Be it images, videos, slideshows, galleries, even Instagram feeds; Wix can handle it all!<\/p>\n

    Let\u2019s start with the basics; adding images to your site or changing the existing ones.<\/p>\n

    Just click on a section containing an image that you want to replace, and then from the sidebar, click on Edit & Replace<\/strong>.<\/p>\n

    \"replace<\/p>\n

    When you click on that button, Wix will show you another panel where you\u2019ll be able to perform further customizations to the image.<\/p>\n

    \"replace<\/p>\n

    If you want to replace the image, simply click on the Replace<\/strong> button. You\u2019ll see that Wix has a range of recommended images following the same theme. These are images that you can use on your site freely without having to worry about any copyright issues.<\/p>\n

    \"images<\/p>\n

    If you want to upload your own image, click on the + Upload Media<\/strong> button that\u2019s in the top left corner.\u00a0After the upload finishes, you\u2019ll be able to modify the image if needed.<\/p>\n

    \"image<\/p>\n

    When done, click on Apply<\/strong> to have the image included on the page.<\/p>\n

    To add other types of media, click on the main Add<\/strong> button that\u2019s in the top menu, and then, from the list of available sections, go into the category that you want:<\/p>\n

    \"add<\/p>\n

    The procedure is very similar to adding or replacing images. Just click into the block the same way, then click on Edit & Replace<\/strong>, and organize your media accordingly.<\/p>\n

    5) Tune-Up Your Site For Mobile Devices<\/h2>\n

    These days, mobile phones are often people\u2019s primary devices for accessing the web. In fact, more people use mobiles than desktops and laptops combined (data<\/a>). What this means in practice is really simple, you absolutely must make sure that your website looks properly on mobile! If you fail at that, people will leave and probably never come back.<\/p>\n

    Moreover, if you happen to be running a local business, the impact of mobile is even bigger. Various \u201cnear me\u201d searches make up a big chunk of the overall local traffic on Google (data<\/a>), and being able to serve those users quickly is of utmost importance if you want to earn their business.<\/p>\n

    For instance, imagine you running the aforementioned massage parlor. If someone searches \u201cmassage near me\u201d<\/em> and your site comes up but it fails to load on their phone, then that would-be customer will not come to you.<\/p>\n

    Luckily, getting your site mobile-optimized with Wix is easy. To begin, click on the view switcher button that\u2019s in the top bar. This one:<\/p>\n

    \"switch<\/p>\n

    This will reload the page and show you how it\u2019s going to appear on mobile devices.<\/p>\n

    \"site<\/p>\n

    In most cases, your website is going to look just fine out the gate, but you can make some minor adjustments to highlight the more important elements and hide the not so important ones.<\/p>\n

    Most crucially, any changes you make here won\u2019t affect the way your site looks on desktop. This is for mobile-only!<\/p>\n

    Here\u2019s what you can do that\u2019s generally going to make your site better on mobile:<\/p>\n