Wix Website Builder Guide
Wix is a great website that allows you to build your own website without requiring any working knowledge of HTML. With an intuitive interface and a variety of tools, Wix is great for anyone looking to create a personal or professional website.
In addition to the free plan, there are five possible premium plans on Wix. In the free plan, you get hundreds of templates and unlimited pages, as well as hosting. When you go premium, you get domain connection, Google analytics, and premium support. In addition, each plan offers a variety of different features.
For the most part, the more you pay, the more bandwidth and storage you have. The exception is the unlimited plan, which, as its name implies, has unlimited bandwidth. The prices are $4.08, $9.75, $12.92, $16.58, or $24.92 a month. The cheapest option allows you to connect your domain, but you must purchase the domain separately. If you do not have the connect plan, your website URL is username.wix.com/sitename, which can be a bit difficult for visitors to type in (and thus gives you an incentive for purchasing a domain). For all plans higher than the most basic, you get a domain included and the removal of Wix ads. You also get the site booster app and form builder app, as well as $300 worth of ads on Google and Bing. The “eCommerce” plan allows you to have your own online store. The “VIP plan allows an online store, as well as professional researches like priority call back, instant response, and professional site review.
For most of these features (both apps, the free domain, and the ad vouchers), you need to pay for a full year instead of paying month to month. You can switch your premium subscription from one Wix site to another, as well.
Once you’ve made a decision about which plan fits best with what you wish to accomplish, it’s time to create your site!
To begin creating a website, head over to Wix.com and choose “Start Now”. First, it will want you to create a Wix account. You can sign up through email, Facebook, or Google.
Next, it will ask you to choose what kind of website you’d like to create. There are several category options. When you mouse over one of these categories, there are several subcategories, as well as an “all” option if you don’t wish to choose a subcategory.
When you make a selection, you are taken to a page to choose a template. The page that comes up will give you the recommended templates for the type of site you’ve chosen. You can also use the search bar to look for all templates associated with a specific key word, you can choose to view them all (sorted by “NEW!”, “Most Popular”, or “Blank Templates”), or you can choose a different category. At the bottom will be the option to move between pages. You can either choose a premade themed template, or you can choose a blank template.
Choosing a Template
Themed template options are helpful when you don’t know what sort of shape you want your website to take, and prefer to follow an example. When you mouse over a template you like, you see the price in the top left corner, as well as options “edit”, “view”, and “info”. “Info” shows you the types of websites this template is good for, and a description of the template. “View” shows you the sample template in full screen, with the ability to choose between desktop and mobile view. “Edit” takes you to the Wix editor page.
If you don’t want previous designers influencing your website, You can start from scratch with either a blank palette, a classic layout (with some guidance on what things would look good in different locations), a minimal layout (which does the same thing but to a lesser extent), a layout that only includes one web page, a layout that is good for showcasing a portfolio, a layout for a gallery of photos, or a strip header layout. Again, you get the same “edit”, “view”, and “info” options.
Once you decide whether you want a preset or blank template, choose edit to learn how to use the Wix editor.
Editing Your Page
This page displays the layout of a page on your site, and then gives you different editing options.
- Zoom out and re-order. This takes you to a zoomed out version of your current page, which you can exit out of, or edit from there.
- Undo last change.
- Redo last change.
- Switch editor views. You can switch to edit how your site appears on mobile devices. You can also turn off the “make mobile friendly” option here.
- Save the work you’ve done so far. If you haven’t chosen a domain yet, it will ask you to do so before saving.
- Preview your site. You can view it as desktop or mobile. You can choose to go back to the editor at any time from the top banner.
- Publish your web page.
- Choose any feature on the page to edit it. Each item will have an individualised menu above it once you add it or click on it, as well as offering a series of common options to the right (options 9-22).
- Brings up a help menu for this editor toolbar. The editor toolbar is for modifying your element relative to the overall page, instead of just focusing on editing the element itself. You can choose multiple elements by holding down the control key and clicking on another element while one is selected.
- Closes the editor toolbar.
- Copies the selected element. (shortcut ctrl + c)
- Pastes the selected element. (shortcut ctrl + p)
- Duplicates the selected element. (shortcut ctrl + d)
- Deletes the selected element.
- Arranges the element relative to other elements nearby it on the page. You can place it forward (shortcut ctrl + →), backward (shortcut ctrl + ←), to the front (shortcut ctrl + shift + →), or to the back (shortcut ctrl + shift + ←).
- Aligns this element on the page. Options are left, centre, right, top, middle, and bottom.
- Distributes elements on your page. Multiple elements must be selected for this option to become available. You can distribute horizontally, vertically, or stepwise (from top left to bottom right)
- Match element sizes. Multiple elements must be selected for this option to appear. You can match the widths, heights, or both. If multiple elements are selected, you can also choose to align, distribute, or match the elements from a “layouts” menu that appears in the centr of the page.
- Set the element’s rotation.
- Set the element’s width and height (in pixels).
- Set the elements x and y coordinates on the page (in pixels).
- Show on all pages. When this is turned on, the selected element will appear on all of your pages, not just the current one. This is always switched on for footer elements.
- Opens up the Page Background menu.
- Add an element to your page.
- Add an app from the Wix app market.
- Upload media.
- Turn your site into a blog with the blog manager tool.
- Change which page you are currently editing. This is also the location of the page menu.
- Brings up the site menu. This lets you:
- Save the edits you’ve made.
- Preview your page with the edits you’ve made.
- Get feedback about your site. You are given a specific link that, when visited, gives the individual a link to your site that has an “Add Comment” option in the top right corner. Only you can see comments that others have left for you.
- Publish your site.
- View your published site.
- Connect a domain. You can choose to either get a new domain name, or connect a domain you already own so that it links to this site.
- Mobile editor. This lets you edit the mobile view of your site.
- Image sharpening. This adds an “unsharp” mask to make your images appear better on your page. Your options are: None, Mild, Classic (on by default), Moderate, Strong, and Max. Mild is recommended for natural, soft scenes. Classic is recommended for most situations. Moderate is recommended for products, interiors, or landscapes. Strong is recommended for out of focus images or industrial scenes. Max is recommended for images with text. This will modify your entire page. Be careful not to over sharpen your images, because it can result in pixelated images. Feel free to play around with these settings to determine what looks best for your site.
- My dashboard. This takes you to your main menu page in a new menu.
- Site manager. This takes you to your settings page.
- Site history. This allows you to view or restore any old version of your site that has been saved or published. This opens in a new page, where you can select previous versions to view at the right. Here, you can re-name these versions, star them as favourites, or set them as your present page.
- Exit editor.
- Brings up the tools menu. Here, you can select or unselect the toolbar (editor shown on the right of the image), gridlines (building inside the lines allows the site to be tablet and mobile friendly), and snap to objects (which help you easily align your page by showing coloured lines).
- Brings up the help menu. This brings up the:
- Editor help centre. You can select from topics listed, or type in your question to search for a possible answer.
- Keyboard shortcuts. Note that all shortcuts that say “ctrl” will use “cmd” on Macs.
- Connecting a Domain.
- Getting Found Online (SEO). Although Wix already makes sure your site is searchable on Google, getting a higher ranking takes a lot of optimisation. Therefore, this section gives tips on how to make your site easily located by various search engines.
- Give Feedback. This lets you give Wix feedback on how you think their site is performing, as well as make suggestions.
- Upgrade your Wix plan. This presents you, again, with the paid options for your site. Based on the type of website you’ve chosen, you may see different prices than listed above. This is because they will try to package together different improvement apps. For example, if you choose a restaurant site, you will get menu builders offered for your page, the possibility to take orders online, and the ability to send out email campaigns. If you want to see the most basic options, be sure to choose an empty template before choosing your plan (you can always go back and add templates later).
Once you publish, you’ll also get an option promote your page (under the blog menu). This brings you to a menu to create a “ShoutOut email”, which will be described later on.
It is clear by simply looking at the menu that Wix allows you to create a wide variety of content for your page. Let’s look at some of the editing menus now to see what kind content you can create.
As you can see, this presents you with the option to add colour, image, or video as the background to your current page. When you choose colour, you can either choose from the site’s current palette of colours, a selection of “My Colours”, or add your own colour using “+ Add Colour”. If you choose to add your own colour, it will bring up a menu where you can use a colour bar or enter a HEX, RGB, or HSB value for your colour. When you’re done, choose add, and it will add this colour to your list of “My Colours”. Next to your site’s colours, you choose a new colour palette to represent your page, and you can click on the circles shown to create your own palette. You can also choose to upload an image or video as your page’s background. The process for uploading media will be covered later on. At the bottom, you’ll also see some stock images and videos from Wix that you can choose as your site’s background. If you choose a video, you get a variety of video editing options. You can choose to overlay a pattern, overlay a colour, the opacity of the colour, and the playback speed (0.25x to 2.00x are possible) When you’re done, you can select “apply to other pages”, which lets you choose which pages you want to have this same background. Once you’ve clicked on a choice, it automatically changes your background for you; no need to choose select or save.
Each selection of the menu will give you a general overview of what this addition can do, and then will tell you apps that are related to this option. To scroll within each menu, use the blue scrollbar.
This option lets you choose a text box to add to your site. Whichever sample text you click on will become the text box. You can also click and drag your text of choice to the location on the page that you want it to appear in. The first group will be text that fits your template. Then, you’ll get all of the possible font choices for titles and paragraphs. The paragraph selection is nice because it gives you a description of the best times to use each of those font choices.
Once you’ve inserted this element, if you click on it you can drag it around. You also get the option to edit the text, animate the text, or use the drag handle.
Edit the Text:
- Choose a preset theme text (this is the same as seen in the original text options).
- Choose a font. From here, you can also choose “add languages”. This choice is for languages that use different characters than the standard English alphabet, like Japanese and Arabic.
- Choose the font size in pixels by sliding the cursor left and right.
- Bold the selected text (shortcut ctrl+b).
- Italicise the selected text (shortcut ctrl+i).
- Underline the selected text (shortcut ctrl+u).
- Change the colour of the text using the colour picker.
- Choose a highlight colour for the text using the colour picker.
- Add a link (you must highlight text first). You can choose the type of link from this menu. You can choose a page on your site, an anchor location on your page (for example, if you want the link to automatically scroll halfway down the page, you’d place an anchor at that spot and link to the anchor here), a URL (that either opens in the same or in a new window), an email (with the automatic subject line), a document file, or the top or bottom of the page.
- Alignment (left, right, center, or justified).
- Create a bulleted or numbered list.
- Decrease the indent by one “tab” value.
- Increase the indent by one “tab” value.
- Change the text’s direction (aligns it to the opposite side of the box).
- Effects. These include various shadow effects, which can be examined by selecting them and viewing their effects on your text.
- Spacing. This allows you to choose spacing between characters by sliding the bar left and right, as well as line spacing.
This allows your text to enter your site in a creative way. There are a variety of pre-set options, as well as an option to customize your animation once you’ve selected one. You can choose the direction from which it appears, the duration, the delay (from opening your site), and the decision whether or not to only have it animate the first time it appears.
This allows you to move the text box up and down the page without affecting the overall layout of your page.
This option lets you add an image to your site. You can choose between “My Uploads”, “Image Collections”, or “My Social Images”. You can select these from the main “Add an Image” menu, or you can switch at any time once in the “Choose Images” menu.
You can either choose an image from your files by selecting “Upload Images”, or you can drag and drop your photo of interest into the square. You can choose which folder you wish to upload the image to (you begin with “All Media” or “Unsorted”, but can also choose to “Add New Folder”). You can also choose which method you would like to use to sort the photos in your selected folder (A-Z, Z-A, newest, or oldest), or you can use a search bar to find any photo you wish. You can also choose if you want to view your images as small tiles, large tiles, or a list with the name displayed. Once you’ve uploaded an image, you can modify it by placing your cursor over it at any time (or, if you have it on “list” mode, these options will appear to the right).
- View an enlarged version of your image with details about the file name, size, and folder location.
- Rename your image.
- Delete your image.
- Crop and edit your image. This brings up the “Photo Editor”.
|Figure 7: Uploaded image view.|
- Download your image. This brings up your image in a new window where you can choose to download it by right clinking on it and selecting “Save image as…”.
If you click on an uploaded image, you can choose to delete it (via the red trash can on top) or add it to your page (via the blue button in the bottom right corner).
The photo editor has a lot of neat features, which are all well-labeled. Whenever you choose an option, you can either apply your current changes by choosing the button on the right, or cancel the changes you’ve made and return to the editor using the button on the left. These image options are:
- Orientation (rotate or mirror the image)
- Enhance (hi-def, illuminate, or color fix)
- Effects (similar to filters on Instagram, you can apply a general hue to your entire image)
- Frames (choose a frame to place around your image)
- Focus (you can choose a shape, and that area stands out while the rest of the image is blurred; you rotate the circle on the shape to choose the focus area’s size)
- Draw (you can choose a color with the color picker, remove your drawing with the eraser tool, and choose from three different brush sizes)
- Stickers (to place over the image; once you’ve selected one, you can change its size or remove it)
- Text (you can choose a color and the font; when you’ve typed what you want in the box, choose “add text”)
When you’re done, you can select “Save” to keep your progress.
You can choose from free Wix images, free Wix clip art, or Big Stock images. Once in choose images, these are separated into Wix and Big Stock tabs. If you choose clip art, it will only give you that selection of items. The more you scroll down, the more images you’ll see. When you choose the Wix options, there are a variety of categories to choose from, as well as an “All” option. If you hover over the magnifying glass in the corner, you’ll see a larger view of the image, as well as its name and its size. Once you’ve found one or more images you like, you can choose “Add to Page” in the bottom right corner. Big Stock images are not free, but are high quality stock images. Again, they come in a variety of categories. When you hover over them, you’ll see the magnifying glass again and the price of the image. Once you’ve selected one or more images, you can choose “Buy Images” to purchase them for your page.
My Social Images:
You can choose from Facebook, Instagram, Picasa, or Flickr. If you select one, it will take you to the log-in page for that site. Your photos and/or albums from that site will be displayed, and you can choose any of them to add to your site with “Add to Page”.
Once you’ve inserted the “Image” element, you have a variety of options:
Figure 8: Image settings menu.
- Rotate the image.
- Change the image (brings back the “Choose Images” menu).
- You can choose to change the image from here as well. You can also choose what happens when the image is clicked (a link opens which you then choose, it opens a popup, or it can be magnified). You can choose “Image Resizing”, which makes the typical drag and adjust tools appear. You can also reset the image back to its original proportions.
- Here, you can choose a frame for your image that fits with your theme. You can also scroll past your theme frames to see all available frames. Additionally, you can choose “Customize Design”. From here, you can see a simplified form of each frame. You can decide on the opacity (with a slider or by typing a custom value into the percentage box) and the fill color (by clicking on the square with the current color in it). You can also do this for the border, as well as choose the width. You can also choose the radius of the corners, which means how rounded they are (where a value of 0 means squared). If the box in the center is blue, it means that you will change all four at once. If you want to choose the radii individually, deselect this box. Finally, you can choose a shadow. You can select whether a shadow is enabled, the angle of the shadow, and the distance of the shadow from the frame. Not all of these options will be available for all of the frames, and some will not be customizable at all.
- Moving the slider indicates how much you wish to zoom in on the image. You can then drag the image around the crop area to determine which parts get chopped off. You can also choose to make it a “crop square” to make all sides equal, as well as reset back to how the image was before you started.
- Image Filters. These let you color your image in an artistic way. You can also do things like make it black and white, or all shades of one color, as well as blur the image. Clicking on the filter automatically applies it to your image. Click on the filter again to deselect it.
- Similar to the text, choose ti have your image appear in a unique way when the page loads the image. You can customize the direction, duration, delay, as well as whether or not to only animate it the first time it appears.
- You can choose what you wish to link to (page on your site, an anchor on your site, a URL, an email, a document, or the top or bottom of the page).
- Get help on how to use the image editor.
There are several types of galleries you can use to display multiple photos on your page. There are grid galleries, which arrange them in a grid or collage. There are full width galleries, which arrange them to the width of your web page, either as cycle-able images, or as another, longer type of grid. There are slider galleries, which give you different means to cycle through various photos. And there are 3D galleries, which display your images on top of one another. Each one, when you hover over it with your cursor, will show the types of cycling it will do (if any). Once you place the element, you get an Image Editor menu. If you choose “Change Images”, you get a menu to organize the gallery images. When you select one of the images in your gallery, you can replace the image with something from your uploads, change the title, and/or change the description. You can also drag them to rearrange the order they’re displayed in, as well as delete them at any time. You can also add more to the gallery by choosing “Add Images”. There are settings that determine where new images get added, and whether or not they get added with their current titles. Next, you get a variety of settings followed by layouts, which both depend on the type of gallery you have chosen. Although it’s different for every layout, it includes things like changing images and choosing the text displayed. It also can decide things like vertical or horizontal orientation, whether slide shows automatically start playing upon page loading, and the types of transitions between images. At any time, you can choose “Design” in the Image Editor to switch between any of the gallery types. You can also customize the gallery options through this menu (things like text, borders, or navigation arrows).
There are also many types of slideshows to show multiple slides on your page. You can choose between full-width and box slide shows (which just mean less than the full website width). The different kinds of slideshows are really just preset options for different recommended purposes, but all can be completely re-mastered, so in the end it doesn’t really matter which one you choose.
Once inserted, you get a variety of Slideshow options. You can drag and drop anything you want from the “Add” menu onto slides. You can also cycle between slides. In “Manage Slides”, you can drag to rearrange the slides. You can also rename, duplicate, or delete a selected slide. At the bottom, you can add a new slide. When you go to “Change Background”, the “Settings” option lets you choose the image opacity, the color behind the image (and its opacity), the scaling (original, to fill, or tile), and where the image is positioned on the background. In addition, from this menu you can also change what the background is. At the bottom are “pre-selected” backgrounds, some of which are animated. You can also choose a color with the “Color Picker”, an image from your uploads, or a video from your uploads. You can also choose whether or not you apply the newly changed background to your other slides. From “Settings”, you can get to the “Manage Slides” menu again. You can also choose if the slideshow autoplays on loading, the seconds between slides, and whether or not it stops when you hover over it. You can also choose the transitions between slides, how long these transitions last (in seconds), and if they start from the left or from the right. You can also choose to hide content outside of the frame. In “Layouts”, you can choose whether or not to show navigation arrows, their size, and their offset. You can also choose if you want to show the slide buttons (the circles located at the bottom), as well as their size, offset, and spacing. Design lets you choose between different presentations (mainly differences in arrows and the circles at the bottom). From here you can also modify the color and opacity of the slide buttons, selected buttons, arrows background, and navigation arrows. For the “box” option, you can also choose the border opacity, color, and width, as well as if you want a shadow, the angle, and the distance. The “box” option can also be animated as your page loads, and you can choose the direction, duration, delay, and whether or not to animate it the first time only.
This allows you to add a button to your page. You can choose between themed buttons, which are ones that fit best with your template, text buttons, which are a variety of premade buttons that have text labels, and icon buttons, which are a variety of premade buttons with icons on them.
Once you place a button, you get a button settings menu with the following options:
Figure 9: Button settings menu.
- Rotate the button.
- Resize the button.
- Stretch handle to move the button without changing the page layout.
- Change text (or icon). You write what the button says, and add a link to what the button links to. If this is an icon button, you will get “change icon” instead. Here, you can decide the icon for “regular”, “hover”, and “clicked”. With “Change”, you can choose a new image for the icon through your image uploads. Choosing “Edit” brings up the photo editor, discussed above in the image section. You can choose if there are transition effects when the button loads, and where the button links to. You can choose whether there is a tooltip (instructions for what the button is for, like “click here” or “buy now”), and you can choose to scale the images to the original size.
- Brings up the link selection menu.
- Choose how the text is aligned. This option is not present in the “icon” button.
- For text buttons: Choose from one of the premade buttons in the same category. You can also “Customize Design”. From here, you have the option to choose different settings for “Regular” and “Hover”. You can also choose a variety of simplified button choices. You can choose fill color and opacity. You can also choose the border opacity, color, and width. You can select the corner radii (and, if the middle button is selected, you will change all at once). Next, you can select if there is a shadow, the angle, and the distance. Finally, you can change the text color, the style, the font, the size, and if it is bold or italicized. For icon buttons: choose a different premade icon image.
- Choose the animation type for when the page loads, and customize its direction, duration, delay, and whether or not to only animate it the first time.
- Help with buttons.
You can choose between My Boxes (which you have previously created), Themed Boxes (which fit your template), and Container Boxes (a variety of premade boxes). You can attach other “Add” elements to these boxes as well, making a group of content you can move about together.
Once you’ve inserted a box, you can resize it. You can choose “Change Design” or “Design” to select a different preset option. You can also customize the box design from here. You can choose from different preset buttons, and choose the background color and opacity. Next, you can change the border opacity, color, and width. There are also options to change the corner radii and to add a shadow. Similar to the other features on the page, you can animate the box to appear when the page loads.
These are full width strips, to which you can add any other “Add” items. You can choose between classic, parallax, and a variety of presets (things that demonstrate what a strip would be for). These are welcome, about, service, clients, team, testimonial, and contacts. Some of these contain items already within, like buttons, text, or shapes. It’s a very aesthetically appealing way to quickly set up a section of your page.
Once you’ve chosen a strip, you can change the background. The background settings let you change the opacity and color of your current background, and whether or not you have a scroll effect. If you have an image, you select the image opacity and the color and opacity behind the image. Color brings up the “Color Picker), while image and video let you choose a background for your strip from “My Uploads”. There are also preset selected backgrounds, some of which are animated.
This allows you to add a variety of shapes to your page. Your shape choices are: my lines, themed lines, basic shapes, arrows, icons, banners & badges, decorative shapes, animals & nature, horizontal lines, and vertical lines. At the end of each section is a “More” button to view more shapes in this category. Once you insert a shape, you can rotate it or change the size.
Lines and shapes have different menus. For lines:
Figure 10: Line Menu.
- Change design. This allows you to choose a different line from the premade selections. You can also choose to customize your line’s design. It gives you a list of preset designs. From this, you can choose the color, opacity, and width (if there are two lines, you can set the widths separately, as well as the spacing between them). Not all lines will have all of these options.
- Brings up same menu as above.
- Option to stretch to full width of the page.
Figure 11: Shape Settings.
- Change Shape. Lets you view all possible shapes you can pick that are free from Wix. Select one and hit apply to choose it as your new shape.
- Set the image to be a link.
- From here you can change shape, choose how the shape gets resized, and if it has a link.
- From here you can choose the opacity and fill color, as well as the border opacity and fill color. You can also choose the border width (with 0 causing no border to be present).
From here, you can add a video to your page. You choose if it is from YouTube or Vimeo.
Once it is inserted, you get a variety of video options. When you choose to “Change Video”, you can either search videos or directly enter its web address. You can decide if it autoplays upon loading, and if it plays in a loop. You can also decide if the controls for the video are shown always, never, or on hover. Settings brings up this same menu. Layouts lets you choose how the video is displayed. You can choose if the title shows, and whether the controls are light or dark. Finally, you can choose “Design” for the frame. You then can pick one of the premade frames, or choose to customize its design. From here, you can choose preset designs, and pick the border color, opacity, and width, as well as the corner radii, and whether or not to have a shadow.
This addition lets you choose from different music players. You can choose themed players, Wix music, SoundCloud Player, Spotify Player, Mini Players and the iTunes Button. Now, Wix music is actually an App, so we’re not going to cover that here. The theme, track, and mini players work the same, so we’ll cover those together. When you pick a player, it will ask you to choose a music track you’ve uploaded, or to upload one now. You can only use MP3 files up to 50MB. You can pick a player that’s as simple as a “play” button, or you can choose one that shows the track name, artist name, play button, time in song, and volume. Once it’s placed on your page, your first option is to change the track that plays. Settings also lets you change the track. You can choose if it autoplays on loading, and if it plays in a loop. You can also choose its default volume. If you have the player that displays artist and track name, you can insert this here. Design lets you choose from the various mini-players or track players, depending on which you have displayed. For the play button only, you can choose what it looks like normally vs when you hover over it. Otherwise, the customization options are fill color and opacity (as well as play/pause button color), border color, opacity, and width, corner radii, and whether or not to display a shadow. Additionally, the track player will let you choose the text color (under text), progress bar colors (under fill color), and the volume control color (under fill color).
For SoundCloud, you’ll need to grab and add the “embed” code listed for that song on that page, which you will paste under the “Embed Code” option. Settings also gives you this same option. For layouts, you can choose to show or hide the cover art.
For Spotify, you can use Wix to search the website and find a song, an album, or a playlist to have on your page. Under settings, you can also choose to search Spotify, or directly paste in the Spotify URL for your song/album/playlist of choice. Layouts gives you a variety of preset Spotify options, which are not modifiable. Some just show the currently playing song, while others show all upcoming tracks. Some also make the album artwork appear larger.
The iTunes button gives the user a link to download some item on iTunes. You choose a link with “Enter Link”, or you can search iTunes for the song of interest. Settings also gives you this choice. This option will not play music on your web page; it only requests the visitor to purchase them.
And, additionally, all of these music players can be animated for when your page loads.
These allow it to make it easy for people to find you on social media. This also can help you link up your page in a way that attracts more visitors. The options provided are popular social tools and social bar choices. Then, you can see items specifically for Facebook, Twitter, Pinterest, YouTube, Google +, VK, and Spotify. Under popular social tools, you can also change your social settings. For the social bar, you can choose from a variety of icon choices. You can then decide which social page each of those icons links to by selecting “Set Social Links”. You can remove an icon by hovering over it and choosing the trash can. You can also add an icon using “Add icon”, which will take you to Wix’s “Social Icons” page. You can also choose to upload your own image as an icon. Click “Add to Gallery” once you’ve chosen an icon. You can also modify any of the icons shown by looking on the right and choosing “Replace Icon”. There is also a settings button to determine where to add new images, and what to name them. Layout lets you decide what icon size you want, what spacing you desire, and if you want it to be displayed horizontally or vertically. And you can animate it if you prefer.
In addition, each social page’s section has a variety of buttons and features you can display on your page. Each of these has a variety of settings and layouts, but the one thing they all have in common are that you need to let Wix know which user or page you want the feature associated with. Facebook has “Like” (which shows how many people currently like that item) and “Share” buttons. You can also display your new feed, a mini version of your profile, and a comments section. Twitter has a “Follow”, a fancier “Follow (which displays the username and current number of followers), and a “Tweet” button. Pinterest has a “Pin” button, a “Pinterest follow” button, and a “Share from Pinterest” area. YouTube has a “Subscribe” button that shows the current number of subscribers for your channel. Google + 1 has a share button, and one that also has text explaining it. VK has a share button, and one with text. Spotify has a follow button, and a follow button that shows the artist name and a follow counter. Typically, you can’t really change the appearance of most of these buttons, as they’re logos for those social media sites, but there are usually a variety of layout options for each of the buttons.
These allow you to add contact tools to your site. Your options are themed contact tools, get subscribers, contact forms, google maps, and Skype call. In “Get Subscribers”, Wix allows you to build a mailing list by creating a simple “Subscribe Now” area, and then organizes it for you on your Dashboard. The settings for this are quite extensive. You first can choose your language. Then, you can choose if you want a popup subscriber form to also appear when users enter your site for the first time. Next, you choose what fields appear on this form (Name, Phone, and/or Email) and whether or not these areas are required. You can choose whether or not you get an alert if there are new subscribers. In the “signup form” tab, you can choose the title of the form, the subtitle, the button, and the thank you title and subtitle. You also can decide if you want this laid out horizontally or vertically. For the Popup tab, if it’s on, you can choose how long after the user has been on your site before it appears, whether it shows up on every visit if they are not subscribed, and if you will hide the form for users who are already signed up. You can also customize this popup text the same as how you customized the form. The design tab lets you choose from five different signup form styles (classic, strip, postcard, elegant, headline). You can choose the color of the background and its opacity. For the header and body, you can choose their alignment, as well as the color of the text areas, the style, the font, the size, and whether it is bolded, underlined, or italicized. You can also modify the button background color and opacity and its text. Finally, you can modify the popup background color and opacity. Finally, you can set up your Welcome Email using ShoutOut by choosing “Create Now”.
This allows you to add a menu to your page. You can choose themed, horizontal, vertical, and anchor menus. Anchor menus function very differently, so we’ll cover those separately. When you decide on a horizontal or vertical menu type and choose to add it, it automatically places each of your page names on the menu bar (minus the page you’re adding the menu to). It then brings up the menu settings:
Figure 12: Menu Settings
- Manage Menu. This button does the same thing as navigate.
- This takes you to the pages menu. You can also drag them to reorder how they appear on the menu bar.
- From here, if it is a horizontal menu you can choose how the text is aligned, if all tabs are the same size, if the tabs fill the whole menu, and what order to display the pages in (1 to 3 or 3 to 1). If it is a vertical menu, you can choose how the menu tabs are aligned, and if the submenus open to the right or to the left.
- From here, you can choose different menus of the same category (horizontal or vertical). You can also choose to “Customize Design”. At the top you can view different basic designs. You can change how it looks regularly, when it’s hovered over, and when it’s clicked on. You can change the fill color and opacity of the background and drop down, the border color, opacity, and width, and the text color, font, and size. You can also choose the overall menu’s radii and whether or not there is a shadow present.
- Stretch to full width of the page. This is not an option for vertical menus.
Anchor menus let you create different points on your page that can be automatically scrolled to. Then, if you click at different points in the menu, you can automatically go to that portion of the page. So if your page has three sections, you can use an anchor menu to let the user quickly navigate to those sections. As they scroll up and down the page, the menu will move with them. Which anchor is filled in will change depending on where on the page they are (if they are below a certain anchor line). The menu will automatically include all anchors on that particular page.
Figure 13: Anchor Menu.
- This is what your anchor point looks like.
- Menu Manager. From here, you can choose to add a new anchor. This gives you an anchor line, which you can drag around the page to position where you’d like. If you click on a dropped anchor, you can rename it (so it shows on your anchor menu where you currently are).
- This lets you match the anchor menu background to the page background (or choose not to).
- This lets you choose how the text is aligned for your menu.
- This lets you change your anchor menu to a different option. You can also customize the design you have chosen from here. You can choose how it looks regularly, and how it looks when it is clicked (or when the user has scrolled to that section). For both, you can choose the fill color and opacity of the button and text. For the regular section, you can also choose the text font and size, and choose the text offset from the menu.
- Pin to screen. You can select which edge of the screen gets the anchor menu, as well as the horizontal and vertical offset. You can also choose to unpin the element (which would be unwise for this type of menu.).
Lists are used to organize information. You can take any premade option and add whatever content you wish. The options are: events, testimonials, products & services, team, and “more”. These are simply suggestions on types of lists you can create, and are completely modifiable. Once you’ve made a selection on a basic list design, you can modify what’s on the list with “Add & Manage Items”. You can drag and rearrange these items. For each item, if you hover over it, you can create a copy, delete it, hide it from view, or edit it. Clicking on the item itself also opens the editing menu. From the edit menu, you can change the title of the item (and if it links to somewhere), the date of the item (which you can also use as a link), the description, and the button (and what that button is linked to). If you select “Add Item”, the same options will appear, and it will add another item to your list. There is also a settings menu, which lets you change the list name, the item spacing, and if it is a multi-page list. If you choose design, you can select a different premade design, as well as customize how your design looks. You can select which items are displayed (title, subtitle, date, description, price, image, video, button, item separators), as well as edit any of the options you’ve turned on by hovering over them and choosing “Customize”. Each of these items has its own unique editing page. These will let you choose text color, font, size, and highlight color. You can also choose things like the date format and button design.
These allow you to add a variety of blog options to your web page. We’ll go over this more with the “Blog Manager” feature. If you don’t plan on making your page a blog, this feature is not recommended.
This allows you to create an online store. Once you’ve added a store, you get a “Store Manager” page. Once you’ve chosen to implement a store, you’ll also get a “My Store” option on your side bar.
When you choose to “Manage Store”, your options are: products, collections, orders, coupons, payments, shipping & tax, and store settings. When you click on one of the listed products, you can change the name, price, description, and whether or not it is currently visible. You can also add images from my uploads, rearrange the images, or delete images. Beneath, you can specify if there is a discount, if there is a “ribbon” around the item (like “Sale” or “Best Seller”), the SKU (to manage the inventory), the weight, and which collection it’s in. You can also choose whether or not the inventory gets tracked, if it is in or out of stock, and whether or not it is customizable. If there are product options (like color, or something else), you can name them, and add them to the current list of choice. You can choose if you customize these settings for every product combination as well (like the inventory status, visibility status, surcharge for each option, and SKU). You can also add an option from here. Finally, you can add or edit information sections at the bottom like product detail, return & refund policy, and shipping info. Once you’re happy with how you’ve modified the product, select “Save”, or you can “Cancel” the changes you’ve made. You can also choose to duplicate the item on the top of the area. From your products page, you can select several products and then choose to collectively add them to a collection, set a discount, change the visibility, change the information section, or delete the item. You can also duplicate them or delete them by hovering over the item and choosing one of these options on the right hand side.
The Collections tab lets you create a new collection. All items will be added to the “All Products” collection, but you can also create a new collection like sale items or female vs male clothing. To do this, pick “Add a collection”. Here, you can rename the collection or delete the collection. You can also add products to the collection directly (there is a search bar to make this easier).
The orders tab is only available if you upgrade your plan to accept online orders.
In the Coupons tab, you can add a coupon. You can have it be a price discount, a percent discount, free shipping, a sales price, or a “buy x get y” (like buy 2 get 1 free). You can choose the coupon name, the code, the discount amount, what it applies to (all products, specific products, specific collections, or a minimum order subtotal), the start date of the coupon, the end date of the coupon (if any), and if you want to limit the number of uses of this coupon. For buy x get y, you can also choose what x and y are.
In the Payments tab, you can choose how your shop will accept payments. This includes credit cards, PayPal, or offline payments. The credit card processors are Stripe, Moolah, and WireCard. Stripe can be set up in minutes, takes 2-7 days to deposit the funds in your account, and charges a 30 cent plus 2.9% fee per transaction. Moolah can be set up within 1-2 days, and charges a 29 cent plus 2.69% fee per transaction. WireCard takes 3-5 business days to set up, is a fully licensed bank, and charges 2% plus 0.25 Euro per transaction. PayPal has you connect an account to accept payments, where it will charge you 30 cents plus 2.9% per transaction. When you choose an offline payment, you simply show in the checkout process an instruction message on how they’ll pay you for the item. This option is for things like cash, money order, or wire transfer.
In Shipping & Tax, you can create or edit store regions, and then choose shipping method and tax rates to apply to these regions. Default rules are domestic and international. When you add or edit a rule, you choose destinations, decide the name of the region (such as domestic), choose a shipping method, (free shipping, flat rate, by order weight, or by order price), name the shipping option, give an estimated delivery time, and choose a price (if you didn’t choose free shipping). If you choose by weight or price, you can choose different ranges that have different shipping values. You can also add ranges. Then, you can choose to add a handling fee to every order. Then, you can choose if there is no tax, the same tax for the entire region, or a different tax rate within the region (for each subregion within your region). You can also choose to calculate tax after the shipping cost has been added with the “advanced” option.
Here, you can view your different store pages. These pages will also appear in your pages menu at the top. You just click on your “Shop” Page, and it will pull up all the different pages associated with your shop. The default pages are shop, product page, cart and thank you page. You can also choose to add another store page. For your shop page, you can rename, hide or delete the page. For all pages including the shop page, you can bring up the page’s settings. For each one, you can choose the Page info. This determines the page’s name, if it is hidden from your menu, if it’s set as your homepage, and if you want to delete it. For layouts, you can choose standard, or no header or footer. For permissions, you can choose if the page has no restrictions, is password protected, or is members only. Finally, for search engine optimization, you can choose the page’s title on search engines, what the page is about, the page’s keywords, if you want to hide this page from search results, what the page’s URL is, and a preview of how this page will appear on Google. You can only have one of the “Cart” “Product” and “Thank You” Pages. If you click on these pages, you’ll bring up that page. Then, the settings icon will appear if you click on it, and you can choose how the page appears.
You can choose a layout from here (classic, sleek, stunning, spotlight, or simple). You can also choose which components are displayed (price, add to cart, SKU, details & specs, quantity, and social). You can also choose the background color and opacity. On the display settings, you can choose to modify the product images (how they appear), name/price/sku/description (color/font/alignment), the product options and quantity (the text color and type), the button (how it looks and what it says), the info sections (their color and appearance), and the social media (what channels appear). You can change things like the color, font, and alignment, as well as how the image appears, the
From here, you can change the text (Title, empty cart display, note link to send something to the seller, instructions, and button text). You change also change the style and colors (background, titles, page text, dividers, and links). You can also change the button’s appearance in a separate menu.
From here you can change the text (title, subtitle, summary title, order number label, total cost label, and shipping address label). You can also modify the styles and colors of the background, page text, icons, and dividers.
Add Store Elements
From here, you can customize your store’s appearance. You can choose to have a grid product gallery, a slider product gallery, a product widget, and/or a shopping cart. Each of these can be editing by their own settings as well.
HTML and Flash
You can choose to embed a site within your page (you will be prompted to enter the website address), HTML code (you will be prompted to enter the coding), or Flash (you will be prompted to add a flash file, a fallback image through settings, and/or a link from the flash item).
Site Login Buttons
You can choose a webmaster login button so co-workers can also work on your site, or a member login. With the webmaster button, you can choose to grant administrative permissions (therefore bypassing the Wix login) and to edit the text on the button’s appearance. You can also animate the button. For the member login page, you can choose to restrict pages for only members using the pages menu. You can also modify the text on the button by using the “Design” option.
You can add a “Buy Now” or “Donate” button for PayPal. When you add the button, it gives you the option to add your PayPal information (your email for the account), as well as to set the button for “Selling” or “Donating” yet again. You can also add the product/organization name, an ID number, the price or donation amount, the currency, and if PayPal opens in the current or a new menu. The layout lets you change from several different button appearances. You can also animate the button.
Anchors & Anchor Menus
These let you create the anchors and anchor menus discussed previously under the “Menu” section.
This allows you to add the logo of various documents. When you choose the button, it will also ask you to upload or select from your uploads the document associated with the button. Once you’ve added the button, you can choose the change the file associated with it. You can also change the icon in “Settings”, and the title of it. You can also animate this button.
One of the most unique features about Wix is that there is always new content being added through their App market. Some are free, some offer premium plans as well as a free option, some offer free trials, and some are paid options only. For each app, if you hover over it you can choose to “Add to Site” or get “More Info”. Each app will offer an overview of what the app does (something to demonstrate how it functions), the different features and pricing for different packages, the reviews of the app (where you can add another review if you so choose), and the developer information. The app categories are: all, analytics, blog, bookings, business tools, chat, design tools, forms, free apps, hotels & travel, made by Wix, marketing tools, music, must-have apps, newest apps, online store, photography, restaurants, social, and video. There is also a search bar on the right if you have an idea of something you’d like to add but don’t know the name of an app that does it. There is also an option on the main market page to “get the best apps for your site”. You can choose your site type (business, online store, photography, music, designer, restaurants, accommodation, events, blog, portfolio & CV, or other), and it will give you a list of apps that work best for those types of sites. When you’ve found one you like, you can choose “Add to Site”, and then move and change its settings the same way you’ve done for all of the other items thus far.
From this menu, you can choose images, videos, single tracks, or docs. All of these take you to the similar uploading menu discussed already.
From here, you can choose to create a blog, and how that blog is presented to your readers. This menu has several components.
This allows you to add a new blog post, or to manage your blog. When you go to add a post, you get a lot of options to make your blog look very polished.
Figure 14: Add a post.
- Title of your post.
- (Not Shown): Date and Author name.
- Post area. Highlight text to get the menu for 4-19.
- Font size
- Text color
- Insert link
- Bulleted list
- Increase indent
- Decrease indent
- Line spacing
- Character spacing
- Change text direction
- Remove formatting
- Add Image. Brings up your uploads menu. For the image, you can choose alt text, alignment, using it as a link, change image, or delete.
- For this option, you add images to all be inserted. You can choose to display it as a grid or slideshow, choose the number of columns, choose the spacing between the images, and determine if there is a fixed size. You can also change the images and delete the gallery.
- Add a video. You can insert the video link, or search YouTube for a video of choice. You can also choose the alignment, or to delete the video. You can also drag it to resize on the page (at the corners)
- Add GIF. You can search for a GIF of choice on “Giphy”, and then add it to your page. Once added, you can choose the alt text, the alignment, if it is a link, change the GIF, or if you want to delete it. You can also drag it to resize it on your page (at the corners).
- Add a divider. You can choose from a variety of selections, choose the width, the height, the color, and whether or not to delete it.
- Add HTML. Here, you can insert HTML and embed the code in your page. You can also choose to align it, resize it, or trash it.
- Publish the post you’ve made.
- Save the post as a draft for viewing and publishing later on.
- Schedule the post for publication at a certain date and time.
- Make this a featured post.
- Choose tags for your post.
- Choose categories for your post.
From blog manager, you can also choose to “Manage Your Blog”. Here, it shows you all of your posts and drafts. On the left, you can navigate between all posts, published, drafts, scheduled, featured, unpublished changes, or trash. Beneath, it also lets you choose to view your categories and tags. At the top, you can also choose to only view certain categories or tags. You can also search through your posts by title. Finally, if you select a post, you can feature it, change its tags and categories, or trash it. Hovering over your post will also give you the option to duplicate the post, trash it, preview it, or edit it.
From here, you can view the different pages currently on your blog. If you click on an ellipse next to one of the pages, you can choose to change its settings, rename it, hide it, or delete it. There is also always a “Single Post” page, which is what appears when a visitor clicks on a blog post. Any changes will affect all post pages, but each post will have its own page. They will also appear in your Pages menu under “Blog”.
Add Blog Elements
From here, you can add various blog elements. These are: recent posts, featured posts, archive, categories, tag cloud, RSS button, custom feed, ticker, posts gallery, posts list, Facebook comments, and Disqus comments. Recent and featured posts allow you to display within your page a summary of one of these items. Choosing to make a post “featured” will display it in this box wherever it is located on your site. For any ticker type items (recent posts, featured posts, custom feed, posts list, or tickers), you can choose to filter posts by tag or category, only show featured posts, decide the maximum number of posts, how many characters to show in the title, the post’s date format, and the image size. From layouts, you can change the layout, the alignment, the space between posts, and the post’s date alignment. You can also choose to display (and to design) the title, image, date, and post dividers. Archives lets you choose the date format, the months displayed (all, last 12, or last 24), the layout, the space between list items, and if it contains a counter, date, and post dividers (was well as the ability to design them). You can manage the categories, change the alignment of the categories, and design the categories, subcategories, and/or counter. The tag cloud layouts also let you change alignment and design the tags look. The RSS button allows users with an RSS reader easily keep up with your blog. You can change the icon for the feed, or change the alt text. Posts gallery lets you filter the posts by tag, category and featured posts. You can also choose the maximum number of posts. You can decide if it autoplays on loading, the scrolling speed, the transition effect, the post title maximum characters, and the post date. You can also modify the layout, alignment, columns, and rows, as well as the post’s date alignment. You can choose if you display the title, image, and/or date and design these accordingly. You can also choose to stretch it to fit the width of the page. Finally, the comments plugins just let you set up a comments page plugin for either Facebook or Disqus by adding your user name.
From here, you can view a list of all your pages. Click on any of them to visit that page. You can rearrange your pages in any order you wish. In addition, an ellipse will appear when you hover over the pages. Page info lets you change the page’s name, if you want to hide it from menus, and if you want to make it your home page. Layouts lets you choose whether or not you want a header and footer on the page. Permissions lets you determine if the page is public and open to all, if it is password protected, or if it is members only. SEO lets you change how the page’s title and description looks on search engines, the page’s keywords, and the ability to preview how it is on Google. Settings brings up the same options just mentioned. Rename lets you modify the page’s name. Hide lets you hide the page. Subpage lets you make that page a subpage of one of your other pages. And delete lets you get rid of that page. In addition, for blog and shop pages, you can see all of the pages associated with that category when you hover over it and choose “Pages”. The bottom lets you choose which kind of page transition you want, if any. You can also add a page from this menu. When you choose add a page, you can add a new page, add a link to your menu, or pack pages and links under a header (which then gets added to your menu as well).
Footer & Header
If you want to add something to your footer, drag it to the dashed line toward the bottom of your site, under which the footer appears. Once something has been added to the footer, it will appear on each page of your site. You can also click on the footer to change its design. You can choose from preset or customize. You can change the fill color and opacity, border color, opacity, and width, corner radii, and shadow presence. You can also click on settings to freeze the footer in place so it appears the same on every page. These same features are also available for your header.
To create a ShoutOut, you would click the chat bubble icon located underneath your blog or shop symbol (depending on which you have created for your site) after you’ve already published your site at least once. You would then choose “New ShoutOut”. From here, you can choose to use a template (promote your site, send a newsletter, announce a special sale, promote an event, new collection, blog post, promote your business, daily specials, offer a coupon, share photos) or start a new ShoutOut from scratch.
Figure 15: ShoutOut Menu
- Header for your newsletter.
- Main message for your newsletter.
- Text editing options (for header and main message). These appear when you click on the header or main message. You can choose the font type, size, whether it has any effects, the font color, the highlight color , the alignment, add a link, remove a link, add an emoticon, add a numbered or bulleted list, add or remove an indent, change the line spacing, change the character spacing, change the text direction, remove formatting, or change formatting. You can also delete them with the trashcan.
- Add something to your newsletter. You can add a logo, a mix, a link, a video, a signup, or music. If you add a logo, you will choose the image, size, alignment, link, and background presence/color. A “Mix” adds a layout with text, buttons, and/or images. The link adds a link to any site you choose. Video prompts you to paste a YouTube link. Event lets you create a new event or add an EventBrite event. You can choose the venue, address, event time and date, contact details, and event details. When it adds it to your newsletter, you it will add a link for whether or not the person will attend. The signup form adds a title, button text, and subscription success message. Finally, you can choose or add an album to your email, which will play the music on your email and give a link to an album of your choice.
- Style lets you choose an overall newsletter appearance (basic, onyx, minimal, classic, tech, decorative, elegant, craft, fun, and natural).
- From here, you can choose a color or image from your background. You can also choose to customize the inner background (its fill color and opacity, the border width and color, and whether or not to have a shadow.
In addition, if you click on the footer at the bottom, you can modify what is present with the sliders. You can add the address, phone number, what social media to share on, the site link, the link text, and the Wix brand ads (if you have a premium plan).
You can preview and test it at any time. It shows how it will look like on desktop or phone, and you can choose to send out a test email to yourself.
If you choose “next”, you can add the email addresses of people you want to email this news letter to. You can also import contacts for future emailing.
“Next” will allow you to publish your newsletter as well.
When you visit wix.com, it will show you your main menu page.
|Figure 16: Main Page|
- Manage domain.
- Upgrade to a different plan.
- Get or manage your mailbox for website-specific emails.
- A list of the apps on your page appear here for management. You can also add an app from here.
- Manage your site. Takes you to the site manager page.
Site Manager Page
Figure 17: Site Manager
- Takes you to the Wix Editor
From here, you can choose to edit your site as well. You can also view the site, connect the domain, rename site, duplicate site, transfer site, or delete site. Beneath, it tells you your name (which you can edit), and site address (which you can manage), as well as see the publication status. Then, you can view your plans or manage your site’s domain. You can also manage your SEO or mobile optimization. Finally, you can modify your preferences (business info, language and region, social sharing preferences, or analytics). Most of what this page does is take you to the other pages on your site manager menu bar.
- Domain & Hosting
At the top, it lists your current domain. Here, you can choose to rename it. It also tells you your hosting and storage amounts. And, you can choose a “favicon” to show up in the web address bar next to your site name (if you have a premium plan). The default one is the Wix icon.
Search Engine Optimization makes your site easier to locate using “Google” or other search engines. It provides a link to the SEO wizard to improve your website’s SEO. It also provides information on using “Meta Tags”, which should only be used by professional HTML coders. Finally, it allows you to send traffic from your old website to the new one by providing a source link and your current page to redirect it to.
This provides a link to edit your mobile view.
- Language & Region
This section lets you choose your language, region, and time zone.
- Business Info
From here, you can choose your website’s category and subcategory. You can also select the main goal of your website (promote my business online, get more customers, sell my products online, create a blog, showcase my work, create an online resume, create a site for my event, or other). Below, you can provide your business name, email, country code, phone, and logo. Then, you can change your business’s address (if any), as well as a description of the location (for example, “next to the park” or “on the corner”).
This allows you to manage connected social media accounts. For Facebook, you can change the image on Facebook when your site is shared, as well as the Facebook username (which verifies likes on your web page).
This will give you information on Google Analytics, which is only available with premium accounts. It tells you things like who’s visiting your site, where they’re from, how long they stay on your page, and more.
This lets you add a contributor to your page. They can make site changes just like you can. The difference is that as the owner of the site, only you can transfer, delete, or access billing information on the page. Everything else will be open for the contributor once you invite them via email.
Overall, Wix is an amazing website builder that lets you quickly create a very professional-looking website. The main downside is that free sites tend to look rather unprofessional because of the Wix logo and ads. But if you’re choosing to create a new web page and plan on paying something for it, Wix would be an amazing choice (especially due to the monthly payment options).