wix tutorial - prof. maría l. moctezuma · • think of famous brands out there, google, for...

Wix Tutorial

10/2/2015

Prof. María L. Moctezuma

i

TABLE OF CONTENTS Free Site Basics .............................................................................................................................................................. 1

Signing Up ...................................................................................................................................................................... 2

Choosing Your Template ................................................................................................................................................ 3

Before You Select a Template .................................................................................................................................... 3 Navigating Through Wix's Template Collection ......................................................................................................... 4 Viewing and Editing a Template ................................................................................................................................ 5

How do I edit a Wix template? ...................................................................................................................................... 6

Managing Your Page Background .................................................................................................................................. 7

Setting Your Page Background ................................................................................................................................... 7 Uploading A Page Background ................................................................................................................................... 9 Customizing Your Page Background ........................................................................................................................ 10 Applying Your Page Background To Other Pages .................................................................................................... 11 Deleting Your Page Background Image .................................................................................................................... 13

Managing Your Pages .................................................................................................................................................. 14

Adding Pages ........................................................................................................................................................... 15 Navigating Between Pages ...................................................................................................................................... 17 Reordering Pages ..................................................................................................................................................... 17 Creating Subpages ................................................................................................................................................... 18 Duplicating Pages ..................................................................................................................................................... 19 Deleting Pages ......................................................................................................................................................... 20

Managing Your Page Settings ...................................................................................................................................... 21

Naming Your Page ................................................................................................................................................... 21 Changing your Page Address ................................................................................................................................... 22 Setting a Page as your Site's Homepage .................................................................................................................. 23 Viewing your Page URL ............................................................................................................................................ 24 Hiding Your Page ...................................................................................................................................................... 25 Changing Your Page Transitions .............................................................................................................................. 26

Adding and Customizing a Landing Page ..................................................................................................................... 27

Adding a Landing Page ............................................................................................................................................. 27 Customizing Your Landing Page Style ...................................................................................................................... 30 Customizing Your Landing Page Background ........................................................................................................... 31 Viewing Your Landing Page ...................................................................................................................................... 32 Linking Your Landing Page Button to Your Home Page ........................................................................................... 34

ii

Password Protecting Your Pages ................................................................................................................................. 36

Adding and Editing Text on Your Site .......................................................................................................................... 37

Adding and Editing Text Content ............................................................................................................................. 38 Deleting a Text Box .................................................................................................................................................. 40

Adding and Deleting Images ........................................................................................................................................ 40

Adding an Image ...................................................................................................................................................... 40 Uploading an Image ................................................................................................................................................. 41 Deleting an Image .................................................................................................................................................... 43

Adding and Customizing Strips .................................................................................................................................... 44

Adding a Strip to Your Site ....................................................................................................................................... 44 Adding a Background Image to Your Strip ............................................................................................................... 45 Customizing Your Strip Style .................................................................................................................................... 47

Adding and Customizing Boxes .................................................................................................................................... 48

Adding a Box ............................................................................................................................................................ 49 Adding an Element to Your Box ............................................................................................................................... 49 Customizing Your Box .............................................................................................................................................. 50

Adding and Customizing Lines ..................................................................................................................................... 52

Adding a Line ........................................................................................................................................................... 53 Customizing Your Line ............................................................................................................................................. 53

Adding and Customizing Shapes .................................................................................................................................. 55

Adding a Shape ........................................................................................................................................................ 55 Customizing Your Shape .......................................................................................................................................... 56

Adding and Changing a Gallery .................................................................................................................................... 58

Adding a Gallery ....................................................................................................................................................... 59 Changing a Gallery Type .......................................................................................................................................... 60

Adding and Deleting Gallery Images ............................................................................................................................ 63

Adding an Image to a Gallery ................................................................................................................................... 64 Uploading an Image to a Gallery ............................................................................................................................. 66 Deleting an Image in a Gallery ................................................................................................................................. 67

Managing Your Gallery Images .................................................................................................................................... 68

Adding a Link to a Gallery Image ............................................................................................................................. 68 Gallery Customization Options .................................................................................................................................... 69

Grid Gallery Options ................................................................................................................................................ 71 Image Scaling – crop your images or fit your images to the height of the gallery. ................................................. 71 Masonry Gallery Options ......................................................................................................................................... 72 Slideshow Gallery Options ....................................................................................................................................... 73 Thumbnails Gallery Options .................................................................................................................................... 74

iii

Strip Slideshow Gallery Options .............................................................................................................................. 75 Strip Showcase Gallery Options ............................................................................................................................... 76 Accordion Gallery Options ....................................................................................................................................... 77 Freestyle Gallery Options ........................................................................................................................................ 78 Collage Gallery Options ........................................................................................................................................... 80 Honeycomb Gallery Options .................................................................................................................................... 82 Impress Gallery Options .......................................................................................................................................... 83 Slider Gallery Options .............................................................................................................................................. 84 3D Slideshow Gallery Options.................................................................................................................................. 85 3D Carousel Gallery Options .................................................................................................................................... 86 Animated Grid Gallery Options ................................................................................................................................ 86

Videos .......................................................................................................................................................................... 87

Adding a Video ......................................................................................................................................................... 87 Customizing Your Video ........................................................................................................................................... 89 Video Options .......................................................................................................................................................... 90

SoundCloud Audio ....................................................................................................................................................... 90

Adding SoundCloud Audio ....................................................................................................................................... 91 Customizing Your SoundCloud Player ...................................................................................................................... 92 Playing Continuous Music on Your Site ................................................................................................................... 92

Documents................................................................................................................................................................... 93

Adding a Document ................................................................................................................................................. 93 Organizing Your Documents .................................................................................................................................... 95 Customizing a Document ......................................................................................................................................... 95 Deleting a Document ............................................................................................................................................... 96

Audio Play Button ........................................................................................................................................................ 96

Adding an Audio Play Button ................................................................................................................................... 97 Customizing Your Audio Play Button ....................................................................................................................... 98

Single Audio Player ...................................................................................................................................................... 99

Adding the Single Audio Player ................................................................................................................................ 99 Changing the Track ................................................................................................................................................ 100 Customizing the Track Settings .............................................................................................................................. 101 Customizing the Style ............................................................................................................................................ 102

iTunes Button ............................................................................................................................................................ 104

Adding an iTunes Button ....................................................................................................................................... 105 Customizing Your iTunes Button ........................................................................................................................... 107 iTunes Button Options ........................................................................................................................................... 108

Spotify Player ............................................................................................................................................................. 108

iv

Adding a Spotify Player by Searching Spotify ........................................................................................................ 109 Adding a Spotify Player by Entering a Spotify URI ................................................................................................. 110 Customizing Your Spotify Player ............................................................................................................................ 111 Spotify Player Options ........................................................................................................................................... 111

Using Buttons ............................................................................................................................................................ 112

Adding a Button ..................................................................................................................................................... 112 Button Options ...................................................................................................................................................... 113 Linking Your Buttons .............................................................................................................................................. 113 Linking Your Button to an External Web Address .................................................................................................. 114 Linking Your Button to a Page ............................................................................................................................... 115 Linking Your Button to an Email Address............................................................................................................... 116 Linking Your Button to a Document ...................................................................................................................... 117 Linking Your Button to an Anchor .......................................................................................................................... 119

Adding and Customizing an Image Button ................................................................................................................ 119

Adding an Image Button ........................................................................................................................................ 120 Customizing Your Image Button ............................................................................................................................ 122

Previewing Your Site .................................................................................................................................................. 123

Saving Your Site ......................................................................................................................................................... 123

Publishing Your Site ................................................................................................................................................... 124

Get Feedback on Your Site......................................................................................................................................... 127

Sharing your Site For Feedback ............................................................................................................................. 127 Viewing Your Feedback.......................................................................................................................................... 129 Deleting Feedback ................................................................................................................................................. 131

HTML5 Keyboard Shortcuts ....................................................................................................................................... 131

Anchors ...................................................................................................................................................................... 133

Adding an Anchor .................................................................................................................................................. 133 Anchor Name ......................................................................................................................................................... 134 Positioning an Anchor ............................................................................................................................................ 135 Linking an Anchor to an Element ........................................................................................................................... 136 Linking a Menu Button to an Anchor ..................................................................................................................... 137

Adding and Customizing a Menu ............................................................................................................................... 140

Adding a Menu ...................................................................................................................................................... 140 Customizing Your Menu ........................................................................................................................................ 140 Menu Options ........................................................................................................................................................ 142

Creating Subpages for Drop-Down Menus ................................................................................................................ 142

Managing a Menu Dropdown .................................................................................................................................... 143

Adding a Menu Dropdown .................................................................................................................................... 143

v

Organizing the Pages in your Menu Dropdown ..................................................................................................... 144 Deleting a Menu Dropdown .................................................................................................................................. 146

Adding and Customizing a Vertical Menu .................................................................................................................. 148

Adding a Vertical Menu ......................................................................................................................................... 148 Customizing a Vertical Menu ................................................................................................................................. 149

Adding a Link to your Menu ...................................................................................................................................... 150

Adding a Link to your Menu .................................................................................................................................. 150 Viewing and Editing your Menu Links .................................................................................................................... 151 Deleting a Link from your Menu ............................................................................................................................ 152

Creating a Site From a Blank Template ...................................................................................................................... 154

Using a Blank Template ......................................................................................................................................... 154 Editing Your Blank Template.................................................................................................................................. 155

Creating a Multilingual Site ....................................................................................................................................... 156

Create Your Main Language Site ............................................................................................................................ 157 Translate Your Site to the Secondary Language .................................................................................................... 159 Adding Language Icons (Flags) ............................................................................................................................... 160

Adding a Blog to Your Site ......................................................................................................................................... 164

Adding a Blog to Your Site ..................................................................................................................................... 164 Hidden Page ........................................................................................................................................................... 166

Intro to My Sites Page ............................................................................................................................................... 166

Essential Wix Tools to Use With Your Business Site .................................................................................................. 169

Custom Domain Name ........................................................................................................................................... 170 Every Wix site gets it's own unique site address in the following format: username.wix.com/sitename. ........... 170 Google Apps Mailbox ............................................................................................................................................. 170 The Wix App Market .............................................................................................................................................. 171 Site Contacts .......................................................................................................................................................... 172 Wix ShoutOut ........................................................................................................................................................ 172

How can I back up or duplicate my Wix SITE? ........................................................................................................... 173

Managing Your Site History ....................................................................................................................................... 174

Accessing Your Site History .............................................................................................................................. 174 Viewing a Previous Version of Your Site ................................................................................................................ 176 Marking a Version as Important ............................................................................................................................ 177 Renaming a Version in Your Site History ............................................................................................................... 179 Restoring a Version of Your Site ............................................................................................................................ 180

How do I delete an old site from my Wix account? ................................................................................................... 182

1

SIGNING UP FOR A WIX FREE ACCOUNT Wix provides you with all the tools and features you need to build an amazing site for free, without using any code!

Once you sign up for a free Wix account, you can create and publish as many sites as you wish!

Don't wait! sign up today and start creating your stunning site.

FREE SITE BASICS As a free Wix user, you get unlimited use of our advanced design platform. Make your free site as unique as you are.

Using our user-friendly drag n' drop site builder take our designs and change anything - pictures, backgrounds, colors, fonts and text with the click of a button.

Key features available to all users:

1. Access to our extensive collection of images, clipart and icons. Use as many as you want, all fully customizable and 100% FREE to use on your Wix site.

2. An optimized mobile version of your site is automatically created with just one click, letting your site visitors view the same design and content on all devices.

3. We provide all of our users with top industry site hosting that keeps your site safe and secure.

4. A free site includes 500MB of storage and up to 500MB bandwidth.

5. All Free Wix sites display Wix's logo.

6. Published free Wix sites are assigned a URL made of: username.wix.com/sitename

7. The Wix App Market is available to all users! You can find there hundreds of incredible apps to help you take your site to the next level! You can easily find our Free apps here.

8. Free Wix users have unlimited access to all of the Wix Support step-by-step tutorials, FAQs, video tutorials, and more, via the Wix Help Center.

http://www.wix.com/app-market/mainhttp://www.wix.com/app-market/free-2http://www.wix.com/support/html5/

2

SIGNING UP To sign up for a free account:

1. Go to Wix.com.

2. In the top right corner, click Sign In.

3. From the Sign In screen, choose if you would like to use your social account (Facebook or Google+) or create a new account.

4. To create a new account, type your email in the Email field and mark the dial next to I'm a new user.

5. Type a password in the password field and click Go.

6. From Sign Up, type your email again in the second email field.

http://www.wix.com/

3

7. Under Enter a new password, type your password again in the second password field.

8. Click Sign Up.

CHOOSING YOUR TEMPLATE Creating a site is easy with Wix!

We offers hundreds of fully customizable templates for every category, from business sites to wedding sites to designers' portfolio.

You can change the background image on any Wix site, add and remove pages, play around with the colors and choose from many different apps and features to suit your needs.

Keep in mind that you can't switch a template midway through the editing process so choose your template wisely.

BEFORE YOU SELECT A TEMPLATE

http://www.wix.com/website/templates

4

Prior to selecting a template, we suggest that you consider the following:

• What is the purpose of your site? Are you looking to create a blog site, an online resume, sell products, build a site for a school project, etc.?

• Its incredibly important to define your site's purpose because different sites have different needs.

• What is your style? Once you determine what kind of website you need, you should consider it's style. Are you looking to create a minimalist site? A colorful site? It's best to make this decision in the early stages.

• Finding a designer-made template that matches your site's vision will save you time.

• Do you have a vision for your brand in mind or an already established brand?

• It's wise to select a template that compliments your brand identity (how you would like your customers to perceive you). Your site's design can help you express this vision to the public.

• Think of famous brands out there, Google, for example, is using a minimalistic design that conveys simplicity and supports their techie image. Ben & Jerry's, on the other hand, are great at creating a playful and witty identity that relies on wild color schemes, childlike icons and eccentric copyrighting.

• How much time can you dedicate to creating your site? • Are you on a tight deadline or simply do not want to dedicate many hours to designing

your site? • If you've answered yes, then be sure to select a template that includes a layout and

features you are looking to include in your site. This will minimize the time you will have to spend on customizing your site.

NAVIGATING THROUGH WIX'S TEMPLATE COLLECTION Whether you have a clear vision of your future site, or simply wish to browse our gallery for inspiration, our extensive template collection offers something for everyone.

At the top left corner of the Templates page you will find a search bar.

Enter a keyword to search for a specific template, and browse through the results.

http://www.wix.com/website/templates

5

1. Below the search bar, click NEW to see our latest templates.

2. Clicking on Most Popular will take you to a gallery showcasing our most popular available templates.

3. Our Blank Templates collection offers several different options for those that want create a site from scratch or with minimal pre-design.

4. You can also easily browse through our templates by category. Under Categories, you'll find our templates categorized by the most popular themes.

VIEWING AND EDITING A TEMPLATE 1. On the top right corner of every template you'll find a clickable information icon that

includes a description of the template, as well as what kind of site it is recommended for.

2. Click View to see the template as a live site. Click the Mobile View icon at the top left corner to see what the template looks like in it's mobile version.

3. When viewing the template, go through each page and try to understand the flow of the entire template. One of the most important things in a website is simple and intuitive navigation, so it's

6

important that you familiarize yourself with the navigation of the template you decide to work with.

4. Once you find the perfect template for you, click Edit from the Templates page, or Edit this site from the template viewer.

5. From the moment you enter your site's editor, you can start transforming your chosen

template into a stunning one-of-a-kind site.

6. Click here to explore our editor related tutorials and learn more about our incredible editor features and elements.

HOW DO I EDIT A WIX TEMPLATE? 1. The templates available on the Wix Templates page are 100% customizable! Simply select a

template to make it your own.

2. To edit a template from the Templates page: Find the template that you'd like to use > under the template preview, click Edit.

3. The Wix Editor will open and you will be able to edit the template according to your requirements.

http://www.wix.com/support/html5/editor/http://www.wix.com/website/templates

7

4. You're welcome to view the template first by clicking the View button. You can move

directly from View mode to Edit mode by clicking Edit this site from the toolbar at the top of the page.

5. If you are unable to open a template, please disable your browser's pop-up blocker.

MANAGING YOUR PAGE BACKGROUND

• Setting Your Page Background

• Uploading A Page Background

• Customizing Your Page Background

• Applying Your Page Background To Other Pages

• Deleting Your Page Background Image

Set and customize a background for a single page on your site. Easily apply the background to multiple pages or all pages on your site.

SETTING YOUR PAGE BACKGROUND To set your page background:

http://www.wix.com/support/html5/technical-difficulties/troubleshooting-tools/tutorial/disabling-your-pop-up-blockerhttp://www.wix.com/support/html5/editor/design/tutorial/managing-your-page-background#anchor-setting-your-page-backgrohttp://www.wix.com/support/html5/editor/design/tutorial/managing-your-page-background#anchor-uploading-a-page-backgrohttp://www.wix.com/support/html5/editor/design/tutorial/managing-your-page-background#anchor-customizing-your-page-bachttp://www.wix.com/support/html5/editor/design/tutorial/managing-your-page-background#anchor-applying-your-page-backgrhttp://www.wix.com/support/html5/editor/design/tutorial/managing-your-page-background#anchor-deleting-your-background-

8

1. From the left side of the Editor, click the Design icon. 2. From Design, click Background.

3. From Page Background, click on any of the preset styles.

4.

9

UPLOADING A PAGE BACKGROUND To upload an image as your page background:

1. From Page Background, click Customize Background.

2. From Customize Background, click Add Image.

10

3. From Change Background, select an image to add as your page background or clickUpload Images to upload an image from your computer. When you are done, clickChange Background.

CUSTOMIZING YOUR PAGE BACKGROUND Customize your background by changing the image scaling, position, background color and scroll function of your background.


11

2. From Customize Background, set the Image Scaling and Position on the page.

Full Screen Background image is resized to fit to the size of the screen size

Fit Background image will maintain its proportional relationship between width and height

Tile Background image will display in a tile formation across the screen

Tile Vertically Background image will display in a tile formation across the vertical axis of your site

Tile Horizontally

Background image will display in a tile formation across the horizontal axis of your site

Normal Background image will maintain its original dimensions

4. Check the box next to Scroll background with site to enable the scroll background option.

5. Click Change Color, to open the Color Picker and change your page background color.

If you have added an image as your background, the color you select will only be visible using some image scaling options.

APPLYING YOUR PAGE BACKGROUND TO OTHER PAGES Easily apply your page background to multiple pages or all pages on your site.

1. From Page Background, click Apply to Other Pages if you would like to apply the background to other pages on your site.

12

2. From Apply to Other Pages, check the box next to All Pages to add the background to all pages on your site, or check the box next to individual pages from your page list. To confirm your selection, click OK.

13

DELETING YOUR PAGE BACKGROUND IMAGE If you have uploaded your own image as your page background, you can easily delete it.

To delete your background image:


2. From Customize Background, under Change Image, click Remove Image

14

3.

Removing your page background image will only remove it from the page you are currently editing. To remove it from another page on your site, repeat the steps above.

MANAGING YOUR PAGES • Adding Pages

• Navigating Between Pages

• Reordering Pages

• Creating Subpages

• Duplicating Pages

• Deleting Pages

Add as many blank or pre-made, pages to your site as you wish, and reorder, duplicate and delete them from Pages.

You can also create subpages, which will appear in a dropdown menu on your site's menu.

http://www.wix.com/support/html5/editor/pages/tutorial/managing-your-pages-5482919#anchor-adding-pageshttp://www.wix.com/support/html5/editor/pages/tutorial/managing-your-pages-5482919#anchor-navigating-between-pageshttp://www.wix.com/support/html5/editor/pages/tutorial/managing-your-pages-5482919#anchor-reordering-pageshttp://www.wix.com/support/html5/editor/pages/tutorial/managing-your-pages-5482919#anchor-creating-subpageshttp://www.wix.com/support/html5/editor/pages/tutorial/managing-your-pages-5482919#anchor-duplicating-pageshttp://www.wix.com/support/html5/editor/pages/tutorial/managing-your-pages-5482919#anchor-deleting-pages

15

ADDING PAGES To add pages:

1. From the left side of the Editor, click the Pages icon. 2. From the bottom right of Pages, click Add.

3. Click Page.

4. From the left side of Add Page, under Page Layouts, select a layout for your new page. You can click the page layouts to view a preview.

16

. 5. Under Name your page, type a title for your page.

6. Optional: Checkmark the box next to Add as a sub page if you want this page to be a sub

page on your site.

17

7. Click OK.

NAVIGATING BETWEEN PAGES You can navigate between your pages in the Editor by clicking the page icon on the left side of the Editor.

From Pages, click on a page name in the list to navigate to it.

You can also navigate your pages from the drop down menu next to Page at the top left of your Editor.

REORDERING PAGES From Pages, change the order of your pages quickly and easily.

To reorder your pages:

1. From the left side of the Editor, click the Pages icon.

2. From Pages, click the icon to the left of a page name and drag the page up or down the list.

18

CREATING SUBPAGES Create subpages and turn your menu into a dropdown menu. Any page can be turned into a subpage from Pages in your Editor.

To create a subpage:


2. From Pages, click the drag icon to the left of a page name and drag the page to the right. The page will become a subpage to the page above it in the list.

19

You will only be able to see your the dropdown menu functionality by clicking Previewfrom the top right menu of your Editor. If your menu does not turn into a drop down menu, you may have to delete your old menu and add a new menu to your site.

DUPLICATING PAGES You can easily duplicate any page on your site.

To duplicate a page:


2. From Pages, hover over the page you want to duplicate and click the settings icon.

3. From Settings and SEO, click Duplicate.

20

4. From the pop-up window, type the new page name and click OK.

DELETING PAGES

To delete a page:


2. From Pages, hover over the relevant page and click the settings icon.

3. From Settings and SEO, click Delete.

21

4. From the pop-up window, click Delete.

MANAGING YOUR PAGE SETTINGS • Naming Your Page

• Changing your Page Address

• Setting a Page as your Site's Homepage

• Viewing your Page URL

• Hiding Your Page

• Changing Your Page Transitions

From Settings and SEO you can customize the settings for each page. You can rename your page, hide it from your menu, make it the home page and update the page's title, description, keywords and URL.

From Pages you can select the transition between pages.

NAMING YOUR PAGE

From Settings and SEO, you can change the name of your page which appears in your site's menu.

To name your page:


http://www.wix.com/support/html5/editor/pages/tutorial/managing-your-page-settings#anchor-naming-your-pagehttp://www.wix.com/support/html5/editor/pages/tutorial/managing-your-page-settings#anchor-changing-your-page-addres1http://www.wix.com/support/html5/editor/pages/tutorial/managing-your-page-settings#anchor-changing-your-page-addres2http://www.wix.com/support/html5/editor/pages/tutorial/managing-your-page-settings#anchor-changing-your-page-addreshttp://www.wix.com/support/html5/editor/pages/tutorial/managing-your-page-settings#anchor-hiding-your-pagehttp://www.wix.com/support/html5/editor/pages/tutorial/managing-your-page-settings#anchor-changing-your-page-transi

22


3. From Settings and SEO, under Page Name, type a name for your page.

4. Click Done.

CHANGING YOUR PAGE ADDRESS

To change your page address:



23

3. From Settings and SEO, under Page Address, type the address you want for the page.

Keep the address short and relevant to the page.

4. Click Done.

SETTING A PAGE AS YOUR SITE'S HOMEPAGE You can set any of your site's pages as the homepage of your site.

To set a page as your site's homepage:



24

3. From Settings and SEO, check the box next to Set as homepage.

4. Click Done.

The homepage will have a symbol in Pages (

VIEWING YOUR PAGE URL From Settings and SEO you can view your page's URL's. This is useful if you want to share a page, or see how the URL address looks on the web.

To view your page URL:



25

3. From Settings and SEO, click Go to page URL. The live page will open in a new window.

HIDING YOUR PAGE You can hide your pages from Settings and SEO. Your site visitors will be unable to access hidden pages without a direct link.

To hide your page:



26

4. In Settings and SEO, checkmark the box next to Hide from menu.

5. Click Done.

The pages are hidden from the site but they will still appear in search engines. To hide them from search results simply check the "Hide page from search results" box underSEO Page Settings. You can also use the password-protect feature. Click here for more information.

CHANGING YOUR PAGE TRANSITIONS The page transition determines how your pages will shift and what your visitors will see when they navigate from page to page.

To change your page transitions:


http://www.wix.com/support/html5/editor/pages/tutorial/password-protecting-your-pages

27

2. From Pages, under Page Transitions, click the drop-down menu and select a transition.

None Pages will transition with no special effect

Swipe Horizontal Pages will glide along the horizontal axis

Swipe Vertical Pages will glide along the vertical axis

Cross Fade Pages will fade into view

Out-In The current page will disappear before a new page appears in its place

ADDING AND CUSTOMIZING A LANDING PAGE • Adding a Landing Page

• Customizing Your Landing Page Style

• Customizing Your Landing Page Background

• Viewing Your Landing Page

• Linking Your Landing Page Button to Your Home Page

Collect leads, lower your site's bounce rate or create a simple Coming Soon page with the landing page feature.

The main aim of a landing page is to capture your visitor's attention and in most cases, to get them to perform a certain action, whether it's clicking a button or entering their contact details.

Simply select the page layout that best suits your needs and customize it as you wish!

ADDING A LANDING PAGE To add a landing page to your site:


http://www.wix.com/support/html5/editor/pages/tutorial/adding-and-customizing-a-landing-page#anchor-adding-a-landing-page-to-http://www.wix.com/support/html5/editor/pages/tutorial/adding-and-customizing-a-landing-page#anchor-customizing-your-landing-http://www.wix.com/support/html5/editor/pages/tutorial/adding-and-customizing-a-landing-page#anchor-changing-your-landing-paghttp://www.wix.com/support/html5/editor/pages/tutorial/adding-and-customizing-a-landing-page#anchor-viewing-your-landing-pagehttp://www.wix.com/support/html5/editor/pages/tutorial/adding-and-customizing-a-landing-page#anchor-linking-your-landing-page

28

2. From the bottom right of Pages, click Add.

3. Click Page.

4. From the left side of Add Page, under Page Layout, click on a landing page layout to preview it.

29

5. Once you have chosen your layout, in the field under Name your page, type a title for your page.

6. Click OK.

7. A pop-up window will appear informing you that you have added a landing page to your site. To confirm this, click OK.

30

CUSTOMIZING YOUR LANDING PAGE STYLE

To customize your landing page:

1. Click the landing page.

2. From the pop-up menu click Change Style.

3. Click Personalize this Page or click a preset style. Some of the options allow you to

change the background color.

31

4. When you are done, click OK from the Advanced Styles window and then OK again from the Change Style window.

CUSTOMIZING YOUR LANDING PAGE BACKGROUND To customize the background of your landing page:

1. Click the landing page.

2. From the pop-up window, click Change Background.

3. Click Change Image to open the media manager. You can choose an image from Wix or

upload your own background image.

32

4. Once you have selected your background image, click Change Background.

To learn more about editing your page elements, click here.

VIEWING YOUR LANDING PAGE Your landing page does not appear in your site menu and therefore, in order for your visitors to view it, you have two options:

• Make the landing page your site's home page.

• Retrieve the page's URL and send it to your visitors directly via ShoutOut or social media.

To set your landing page as your home page:


2. Click the settings icon next to your landing page.

http://www.wix.com/support/html5/editor/element-editing-tools/tutorial/editing-your-elementhttp://www.wix.com/support/html5/wix-shoutout/

33

3. From Settings and SEO, check the box next to Set as homepage.

4. Click Done.

Make sure that the box next to Hide from menu is also checked.

To retrieve your landing page's URL:


2. Click the settings icon next to your landing page.

34

3. From Settings and SEO, under Page Address, click Go to page URL.

To retrieve your page's URL, you must first publish your site.

LINKING YOUR LANDING PAGE BUTTON TO YOUR HOME PAGE Keep in mind that your landing page does not have a header or footer, this also means that it does not have a menu. Therefore, if you want your visitors to be able to navigate to the rest of your site, make sure to link a button to your site's main page.

To link your button to your main page:

1. From the landing page, click your button.

2. From the pop-up window, click Link to.

35

4. From Link, click Page.

5. From Link to Page, under Select Page, click the drop-down menu and select your main

page.

6. Click OK.

36

To add a header and footer to your landing page, from the left side of the Editor, click the pages icon> click the settings icon next to your landing page > from Settings and SEO, uncheck the box next to Hide Header and Footer.

PASSWORD PROTECTING YOUR PAGES You can password protect individual pages from Page Settings.

To password protect your page:


2. From Pages, to the right of the page name, click the settings icon.

3. From Settings and SEO, checkmark the box next to Protect Page.

4. From Protect Page, click Add Password Protection.

37

5. Under Choose password, type your page password and select the language from the

drop-down menu.

6. Click OK and then Done.

ADDING AND EDITING TEXT ON YOUR SITE

38

1. Adding text to your site will likely be one of the first steps you will take when creating your site.

2. Before you add any content to your site, keep in mind that content is valued above all else by search engines!

3. Search engines assign higher value to sites with high-quality, original content. Meaning, both quantity and quality are important.

4. Preparing your text in advance will help you stay organized and speed up the process of adding it to your site.

5. If you have prepared your text in another document, first copy and paste it into a Notepad, another .txt program, or into a blank "plain text" email. This cleans up unnecessary codes and information that are added automatically to text by some programs.

6. Copy the text from the plain text document into your Wix Editor.

ADDING AND EDITING TEXT CONTENT To add and edit text:

1. From the left side of the Editor, click the plus sign to open Add.

2. From Add, click Text.

39

3. Click Title or Paragraph. A text box appears.

4. From Text, click Edit Text or double-click the text box.

5. Type your text into the text box and format your text from the text editor bar.

40

The maximum number of characters (including spaces) that can be added to one text box is 75,000.

6. Click outside of the text box to close the text editor bar or edit the text as you wish.

Click here to learn how to link your text.

DELETING A TEXT BOX To delete a text box:

1. Click the text box to select it.

2. Press Delete on your keyboard or click the trash can icon

ADDING AND DELETING IMAGES Adding, uploading, and deleting images has never been easier! Choose from our extensive collection of free and fully customizable images, or upload your own images.

ADDING AN IMAGE To add an image:

1. From the left side of the Editor, click the Add icon.

2. From Add, click Image.

3. From Image, choose Image, Image without Frame or Clip Art.

http://www.wix.com/support/html5/editor/text/tutorial/customizing-text#anchor-linking-text

41

4. From Add Images, click an image or multiple images and then click Add Images.

UPLOADING AN IMAGE To upload an image from your computer:

1. From the left side of the Editor, click Add icon.

2. From Add, click Image.

3. From Image, choose Image, Image without Frame or Clip Art.

42

4. From the Add Images window, click Upload Images.

5. Browse your folders and select your image. Click Open to upload your image.

To select more than one image, hold down the CTRL key and click several images.

6. From Add Images, click your images and then click Add Images.

43

You can upload .jpg, .png, and .gif files up to 15MB each. Click here for tips on how to improve the quality of your uploaded images.

DELETING AN IMAGE To delete an image:

1. Click the image to select it.

2. From the pop-up menu, click the trash can icon, or simply press Delete on your keyboard.

http://www.wix.com/support/html5/editor/media-images-and-galleries/tutorial/improving-image-quality

44

ADDING AND CUSTOMIZING STRIPS

• Adding a Strip to Your Site

• Adding a Background Image to Your Strip

• Customizing Your Strip Style

Strips allow you to break your site up into horizontal sections and help you to layout and design the look and feel of your site. Add strips to your site, customize their style and add your content to them!

ADDING A STRIP TO YOUR SITE To add a strip:


2. From Add, click Shapes & Lines, then click Strip.

http://www.wix.com/support/html5/editor/shapes-lines-and-boxes/tutorial/adding-and-customizing-strips#anchor-adding-a-striphttp://www.wix.com/support/html5/editor/shapes-lines-and-boxes/tutorial/adding-and-customizing-strips#anchor-adding-a-background-imagehttp://www.wix.com/support/html5/editor/shapes-lines-and-boxes/tutorial/adding-and-customizing-strips#anchor-customizing-your-strip-st

45

ADDING A BACKGROUND IMAGE TO YOUR STRIP To add a background image to your strip:

1. Click the strip and from the pop-up menu, click Settings.

2. Click Add Image.

46

3. Click an image and select Change Background.

4. Under Image Scaling, choose Crop, Actual Size, or Fit.

47

5. Under Tiling, select an option.

6. Under Alignment, select an option.

CUSTOMIZING YOUR STRIP STYLE To customize your strip style:

1. Click the strip and from the pop-up menu, click Change Style.

2. From Change Style, click a style, followed by OK. If you want to edit an existing style, clickEdit Style, or create a of your own from scratch by clicking Personalize this Strip.

3. From Advanced Styles, change the Skin, Colors, Corners, Shadow and Border widthof your strip. Click OK.

48

4. From Change Style, click OK.

ADDING AND CUSTOMIZING BOXES

• Adding a Box

• Adding an Element to Your Box

• Customizing Your Box

http://www.wix.com/support/html5/editor/shapes-lines-and-boxes/tutorial/adding-and-customizing-boxes#anchor-adding-a-boxhttp://www.wix.com/support/html5/editor/shapes-lines-and-boxes/tutorial/adding-and-customizing-boxes#anchor-adding-an-element-to-yourhttp://www.wix.com/support/html5/editor/shapes-lines-and-boxes/tutorial/adding-and-customizing-boxes#anchor-editing-a-box

49

Boxes allow you to break your site up into boxed sections and help you to layout and design the look and feel of your site. Add boxes to your site, customize their style, and add your content to them!

ADDING A BOX Add a box to your site from the Shapes & Lines section of Add.

To add a box:


2. From Add, click Shapes & Lines, then click Box.

ADDING AN ELEMENT TO YOUR BOX You can attach any elements to your box including images, text, videos and galleries. Moving your box will also move all of the elements within it.

To add an element to your box:

1. Resize your box or the element so that your element will fit completely inside your box. 2. Drag and drop your element onto the box.

50

Be sure to place the element within the box borders!

CUSTOMIZING YOUR BOX To customize your box:

1. Click the box to select it and from the pop-up menu, click Change Style.

2. From Change Style, click a style, followed by OK. If you want to edit an existing style, clickEdit Style, or create a of your own from scratch by clicking Personalize this Box.

51

3. From Advanced Styles, change the Skin, Colors, Corners, Shadow and Border widthof your box. Click OK.

52

4. From Change Style, click OK.

ADDING AND CUSTOMIZING LINES

• Adding a Line

• Customizing Your Line

http://www.wix.com/support/html5/editor/shapes-lines-and-boxes/tutorial/adding-and-customizing-lines#anchor-adding-a-linehttp://www.wix.com/support/html5/editor/shapes-lines-and-boxes/tutorial/adding-and-customizing-lines#anchor-editing-a-line

53

Add lines to your site design to help define and plot the different parts of your site. Change the style of your lines to match the style of the rest of your site.

ADDING A LINE Add vertical and horizontal lines to your site from the Shapes & Lines section of Add.

To add a line:

1. From the left side of the Editor, click Add icon.

2. From Add, click Shapes & Lines. Click Vertical Line, Horizontal Line, or Full Width Line.

CUSTOMIZING YOUR LINE To edit a line:

1. Click the line to select it and from the pop-up window, click Change Style.

54

2. From Change Style, click a style, followed by OK. If you want to edit an existing style, clickEdit Style, or create a of your own from scratch by clicking Personalize this Line.

3. From Advanced Styles, change the Skin, Colors and Width of your line. Click OK.

55

From Change Style, click OK.

ADDING AND CUSTOMIZING SHAPES

• Adding a Shape

• Customizing Your Shape

You can select from hundreds of free shapes to add to your site.

ADDING A SHAPE To add a shape:


2. From Add, click Shapes & Lines, then click Shape.

http://www.wix.com/support/html5/editor/shapes-lines-and-boxes/tutorial/adding-and-customizing-shapes#anchor-adding-a-shapehttp://www.wix.com/support/html5/editor/shapes-lines-and-boxes/tutorial/adding-and-customizing-shapes#anchor-editing-a-shape

56

CUSTOMIZING YOUR SHAPE To customize your shape:

1. Click the shape to select it and from the pop-up menu, click Settings.

2. From Shape Settings, click Choose Shape.

57

3. From Choose Shape, select a shape, and then click Choose Shape.

4. Check the box next to Maintain Aspect Ratio if you wish to maintain equal height/width shape ratio.

58

5. Next to Fill Color, select a fill color.

6. Next to Stroke, select a border color.

7. Under Stroke Width, drag the scroll to change the border width.

Click on Add Animation to add animation to your shape.

ADDING AND CHANGING A GALLERY

• Adding a Gallery

• Changing a Gallery Type

Add any one of our stunning galleries to your site and instantly showcase your images. Wix offers a variety of galleries to choose from, along with the ability to change your gallery type at any time.

http://www.wix.com/support/html5/editor/galleries-1679966/tutorial/adding-and-changing-a-gallery#anchor-adding-a-galleryhttp://www.wix.com/support/html5/editor/galleries-1679966/tutorial/adding-and-changing-a-gallery#anchor-changing-a-gallery-type

59

ADDING A GALLERY To add a gallery:

1. From the left side of the Editor, click the plus sign to open Add.

2. From Add, click Gallery and then click a gallery type.

60

You can also find the Wix Galleries in the Wix App Market under Galleries.

CHANGING A GALLERY TYPE If you are looking to update your site's look, or simply wish to explore what gallery will look best with your images, you can do so using our Change Gallery Type feature. All the images in your gallery will be transferred over, so there is no need to add them manually.

61

To change your gallery type:

1. Click the gallery to select it

2. From the pop-up menu, click Change Gallery Type

3. select the new gallery type that you'd like to use, and click Ok.

62

Your gallery has now changed as seen below:

63

You can change any of your galleries as many times as you wish via the gallery pop up window, which appears when clicking on the gallery, or using the gallery settings tab.

ADDING AND DELETING GALLERY IMAGES

• Adding an Image to a Gallery

• Uploading an Image to a Gallery

• Deleting an Image in a Gallery

Create a stunning gallery by adding and deleting gallery images to your liking. To learn more about managing your gallery images, see here.

http://www.wix.com/support/html5/editor/galleries-1679966/tutorial/adding-and-deleting-gallery-images#anchor-adding-an-image-to-a-gallhttp://www.wix.com/support/html5/editor/galleries-1679966/tutorial/adding-and-deleting-gallery-images#anchor-uploading-an-image-to-a-ghttp://www.wix.com/support/html5/editor/galleries-1679966/tutorial/adding-and-deleting-gallery-images#anchor-deleting-an-image-in-a-gahttp://www.wix.com/support/html5/editor/galleries-1679966/tutorial/managing-your-gallery-images

64

ADDING AN IMAGE TO A GALLERY To add an image to a gallery:

1. Click the gallery and from the pop-up menu, click Organize Images.

2. From Organize Your Gallery Images, click Add Images.

3. From the Add Images window, click an image or several and then click Add Images.

65

You can select more than one image by clicking on the images you want to add.

4. From Organize Your Gallery Images, click Done.

Currently there is no limit as to how many images you can add to a gallery. However, we recommend that you don't add too many images to a gallery as to not slow down your site's loading time.

66

UPLOADING AN IMAGE TO A GALLERY To upload an image to a gallery:

1. Click the gallery and from the pop-up menu, click Settings.

2. From Gallery Settings, click Organize Images.

3. From Organize Your Gallery Images, click Add Images.

4. From the Add Images window, click Upload Images.

5. Browse your folders and select your image. Click Open to upload your image. You can select more than one image by clicking on the images you want to add.

6. From the Add Images window, click your images and then click Add Images.

67

7. From Organize Your Gallery Images, click Done.

Currently there is no limit as to how many images you can add to a gallery. However, we recommend that you don't add too many images to a gallery as it slow your site's loading time.

DELETING AN IMAGE IN A GALLERY To delete an image in a gallery:


2. From Organize Your Gallery Images, roll over the image you wish to delete and click the trash can icon.

68

MANAGING YOUR GALLERY IMAGES

• Adding a Link to a Gallery Image

• Adding Details to Images in a Gallery

• Replacing an Image in a Gallery

• Reordering Images in a Gallery

Manage your gallery images as you wish!

Link the images in your gallery to external websites, pages within your site, email addresses, documents, an anchor, the top or bottom of a page. Add a title and description to any of your images, then select via the settings tab whether to display them or not. You can also reorder and replace gallery images as needed.

ADDING A LINK TO A GALLERY IMAGE To add a link to an image in your gallery:


2. From Organize Your Gallery Images, click an image to select it.

http://www.wix.com/support/html5/editor/galleries-1679966/tutorial/managing-your-gallery-images#anchor-adding-a-linkhttp://www.wix.com/support/html5/editor/galleries-1679966/tutorial/managing-your-gallery-images#anchor-adding-details-to-images-http://www.wix.com/support/html5/editor/galleries-1679966/tutorial/managing-your-gallery-images#anchor-replacing-an-image-in-a-ghttp://www.wix.com/support/html5/editor/galleries-1679966/tutorial/managing-your-gallery-images#anchor-reordering-images-in-a-ga

69

GALLERY CUSTOMIZATION OPTIONS

• Grid Gallery Options

• Masonry Gallery Options

• Slideshow Gallery Options

• Thumbnails Gallery Options

• Strip Slideshow Gallery Options

• Strip Showcase Gallery Options

• Accordion Gallery Options

• Freestyle Gallery Options

• Collage Gallery Options

• Honeycomb Gallery Options

• Impress Gallery Options

• Slider Gallery Options

• 3D Slideshow Gallery Options

• 3D Carousel Gallery Options

• Animated Grid Gallery Options

You can easily customize your galleries to look exactly as you want.

Once you have added a gallery, in order to customize it, click the gallery and then Settings:

Clicking Organize Images opens the media manager where you can add, upload, replace, delete and reorder your images as well as add descriptions and links:

http://www.wix.com/support/html5/editor/galleries-1679966/tutorial/gallery-customization-options#anchor-grid-gallery-optionshttp://www.wix.com/support/html5/editor/galleries-1679966/tutorial/gallery-customization-options#anchor-masonry-gallery-optionshttp://www.wix.com/support/html5/editor/galleries-1679966/tutorial/gallery-customization-options#anchor-slideshow-gallery-optionshttp://www.wix.com/support/html5/editor/galleries-1679966/tutorial/gallery-customization-options#anchor-thumbnails-gallery-optionhttp://www.wix.com/support/html5/editor/galleries-1679966/tutorial/gallery-customization-options#anchor-strip-slideshow-gallery-ohttp://www.wix.com/support/html5/editor/galleries-1679966/tutorial/gallery-customization-options#anchor-slider-gallery-options5http://www.wix.com/support/html5/editor/galleries-1679966/tutorial/gallery-customization-options#anchor-accordionhttp://www.wix.com/support/html5/editor/galleries-1679966/tutorial/gallery-customization-options#anchor-freestyle-gallery-optionshttp://www.wix.com/support/html5/editor/galleries-1679966/tutorial/gallery-customization-options#anchor-collage-gallery-optionshttp://www.wix.com/support/html5/editor/galleries-1679966/tutorial/gallery-customization-options#anchor-honeycomb-gallery-optionshttp://www.wix.com/support/html5/editor/galleries-1679966/tutorial/gallery-customization-options#anchor-impress-gallery-optionshttp://www.wix.com/support/html5/editor/galleries-1679966/tutorial/gallery-customization-options#anchor-slider-gallery-optionshttp://www.wix.com/support/html5/editor/galleries-1679966/tutorial/gallery-customization-options#anchor-3d-slideshow-gallery-optihttp://www.wix.com/support/html5/editor/galleries-1679966/tutorial/gallery-customization-options#anchor-3d-carousel-gallery-optiohttp://www.wix.com/support/html5/editor/galleries-1679966/tutorial/gallery-customization-options#anchor-animated-grid-gallery-opt

70

You can change your gallery at any time by clicking Change Gallery Type:

71

GRID GALLERY OPTIONS

IMAGE SCALING – CROP YOUR IMAGES OR FIT YOUR IMAGES TO THE HEIGHT OF THE GALLERY.

Columns – set the number of images to display on the horizontal axis.

Rows – set the number of images to display on the vertical axis.

Show More – display more rows in your grid.

Margin – set the distance between your images.

Change Style – add, remove or create your own frames for your images.

Clicking on Image – set your images to do nothing, expand or go to a link when your visitors click on them.

This gallery displays the image titles and descriptions by default. To remove the text, simply delete the title and description from each image in the media manager.

72

MASONRY GALLERY OPTIONS



Font – set the font for the textual elements of your gallery

Text Display – set which elements of text to show in your gallery.

Text Alignment – align your text to the left, center or right.


Enable Shadow – add a shadow effect to your gallery.

Colors – customize the title, description, background and rollover colors of your gallery.


73

SLIDESHOW GALLERY OPTIONS

Image Scaling – crop your images or fit your images to the width of the gallery.

Transitions – set the transition style between slides.

Autoplay – set the slideshow gallery to start playing automatically.

Navigation Buttons - show or hide the control buttons for your gallery.



This gallery displays the image titles and descriptions by default. To remove the text, simply delete the title and description from each image in the media manager. To remove the text box, click the gallery > Change Style > Edit Style, set the background opacity to 0:

74

THUMBNAILS GALLERY OPTIONS

Image Scaling – crop your images or fit your images to the height of the gallery.

Transitions – set the transition style between images.

75

Thumbnail Display – set the proportion and margin of your thumbnail menu.

Autoplay – set your gallery to start playing automatically.

Text Display – set which elements of text to show in your gallery and customize their font, colors and alignment.


STRIP SLIDESHOW GALLERY OPTIONS

Transitions – set the transition style between images.


Text Display – set which elements of text to show in your gallery and customize their font, colors and alignment.

It is recommended that the images' width will be the same width of the screen that you are optimizing for so that the images will not appear stretched.

This gallery displays the image titles and descriptions by default. You can change which text is displayed from Text Display:

76

To remove the text, simply select No Text under Text Display.

Please note that you can not set an action for clicking the images in this gallery. If you want to add links to the gallery images, click the gallery, select Change Gallery Type and choose a different gallery.

STRIP SHOWCASE GALLERY OPTIONS

77




Thumbnail Display – set the proportion and margin of your thumbnail menu.

Autoplay – set the Strip Showcase slideshow gallery to start playing automatically.


This gallery only displays image titles and descriptions when the image is set to expand upon clicking. To remove the text, simply delete the title and description from each image in the media manager.

ACCORDION GALLERY OPTIONS

Font – set the font for the textual elements of your gallery.

Text Display – set which elements of text to show in your gallery.

Text Alignment – align your text to the left, center or right.

Border Width- set the width of the image borders.

78


Colors – customize the title, background and border colors of your gallery.

This gallery displays the image titles by default. To remove the titles, under Text Display, clickNo Text.

FREESTYLE GALLERY OPTIONS

79

Orientations- choose if the images are displayed in a stack or spread style.


Rotation- align or rotate the images

Randomize Layout- click this button to change the layout of the images. Can be clicked several times. Image Decoration- set the image styles.

Border Width- set the width of the image borders.

Border Color- set the border color.


This gallery displays the image titles and descriptions by default when the image is set to expand upon clicking. To remove the text, simply delete the title and description from each image in the media manager.

80

COLLAGE GALLERY OPTIONS

Clicking on Image- set your images to do nothing, expand or go to a link when your visitors click on them.

Orientation- set the orientation of the gallery.

Fit to Screen- set the gallery to fit across the screen.

Columns- set the number of columns

Maximum Image Width- set the maximum width for your images

Margin– set the distance between your images.

Randomize Layout- click this button to change the layout of the images. Can be clicked several times. Font- set the font for the textual elements of your gallery.

Text Display- set which elements of text to show in your gallery.

Text Alignment- align your text to the left, center or right.

Colors-customize the title, description, and rollover colors of your gallery.

81

This gallery displays the image titles and descriptions by default. To remove the text, under Text Display, click No Text:

82

HONEYCOMB GALLERY OPTIONS


Image Shape- set the shape of the images

Columns- set the number of columns

Margin– set the distance between your images.

Colors- customize rollover and border colors of your gallery.


83

IMPRESS GALLERY OPTIONS




Slide Color – choose the color of your slides.


Show Pagination – check the Show Pagination box to show the pagination on the gallery.

Font- set the font for the textual elements of your gallery.

Text Display– set which elements of text to show in your gallery and customize their font, colors and alignment.

Text Alignment- align your text to the left, center or right.

Colors- customize the title, description and pagination colors of your gallery.

This gallery displays the image title and descriptions by default. Please note that in the main view only the first line of the description is displayed, and when the image is expanded, all of the description is displayed.

To remove the text, under Text Display, click No Text:

84

SLIDER GALLERY OPTIONS



85

Speed – set the speed of your slider.




3D SLIDESHOW GALLERY OPTIONS

Autoplay – set the 3D slideshow gallery to start playing automatically.



86

3D CAROUSEL GALLERY OPTIONS

Autoplay – set the 3D carousel gallery to start playing automatically.



ANIMATED GRID GALLERY OPTIONS

87


Rows – set the number of images to display on the vertical axis.








VIDEOS

• Adding a Video

• Customizing Your Video

• Video Options

Easily add a YouTube or Vimeo video to your site using the Video feature within your site's editor.

If you are adding a video from YouTube, make sure that your video is set to Public and that theAllow Embedding box is checked (in Advanced Settings) in your YouTube video's settings. In addition, make sure not to use the video's full screen link as it will not work in Wix's video player.

Are you looking to add a video that is is not hosted at YouTube or Vimeo? If so, you can add such a video by embedding the HTML code of the video into your site using our HTML app.

We also have a number of video apps in the Wix App Market. Check out the following apps:TubePress and iPlayerHD.

ADDING A VIDEO To add a video:


2. From Add, click Media, and then click Video.

http://www.wix.com/support/html5/editor/media/tutorial/videos#anchor-adding-a-videohttp://www.wix.com/support/html5/editor/media/tutorial/videos#anchor-customizing-your-videohttp://www.wix.com/support/html5/editor/media/tutorial/videos#anchor-video-optionshttp://www.wix.com/support/html5/wix-app-market/apps-made-by-wix/faq/what-is-the-html-add-onhttp://www.wix.com/app-market/tubepress/overviewhttp://www.wix.com/app-market/iplayerhd-video-hosting/overview

88

3. From Video, if you know your video's (Vimeo or YouTube) URL, enter it in the provided space and click Update to add it to your site.

Alternatively, you can search for a YouTube video to add to your site by clicking Search Videos.

4. From Search Videos, enter your search phrase in the provided space, and click Search.

5. Browse through the videos, preview a video by clicking the play button in the video thumbnail, and add a video by clicking on it, followed by Add.

89

CUSTOMIZING YOUR VIDEO To customize your video:

1. Click the video.

2. From the Video settings window, change your Video URL, choose to show or hide the player controls, and checkmark the box next to the relevant customization options: Autoplay,Loop, Show title bar and Light control bar.

3. Click Change Style to change the of the video element.

90

4. Click outside of the video to close the Video settings window.

VIDEO OPTIONS Once you have added a video to your site, customize it from the Video settings window:

Video URL – the URL of the YouTube or Vimeo video that you have uploaded.

Control Bar– show or hide the video player controls.

Autoplay– set the video to play automatically when a visitor opens the page.

Loop– set the video to repeat continuously.

Show title bar– display the title of the video.

Light control bar– display the video player controls in a lighter color.

Note that Apple blocks autoplay on iOS devices (i.e., iPhones and iPads). Excerpt fromSafari Developer Library: "In Safari on iOS (for all devices, including iPad), when the user is on a cellular network they may be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it".

SOUNDCLOUD AUDIO

• Adding SoundCloud Audio

http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/uid/TP40009523-CH5-SW1http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/uid/TP40009523-CH5-SW1http://www.wix.com/support/html5/editor/media/tutori