Web Development Tutorials Web Design: WiX. Tutorial 1-3a

Transcription

1 Web Development Tutorials Web Design: WiX Tutorial 1-3a

2 Agenda Schedule 1 Introduction Creating an Account Editing the Template Upgrading the Account Conclusion 2

3 Introduction What is WiX? Web development platform that allows users to create professional HTML5 websites and mobile sites. Easy to use with no coding skills necessary. WiX provides hundreds of website templates and drag and drop options. No technical or design experience needed to create a beautiful online website. 3

4 Setting Up Your WiX Steps Away from Launching Your WiX Starting Out Editing the Template Upgrading Account Creating an Account Step 1: View the Tours Step 1: Create a Domain Name Step 2: Add Pages Step 2: Upgrade your Account (Optional) Step 3: Design the Website Step 3: Set Up Payments Step 4: Include Add-Ons 4

5 Starting Out: Creating an Account Step 1: Access the WiX Website Start Now Click this button to get started STEP 2 Click Start Now on the home screen in order to start designing your website. 5

6 Starting Out: Creating an Account Step 2: Create an Account STEP 3 - Fill out You the will required be asked information to sign with to an create existing an account. or create a new account in order to begin designing your business's website. 6

7 Starting Out: Creating an Account Step 3: Select a Category - Select a category that reflects your business the best. 7

8 Starting Out: Creating an Account Step 4: Select a Template - Choose a template you love and click edit. Paid Templates are available It s recommended that you buy a paid template since it will help differentiate your business from your competitors. 8

9 Editing the Template Step 1: View the Tours (1/2) - Click the Quick Start button to view tours. Quick Start These interactive tours will help you navigate through the editing process 9

10 Editing the Template Step 1: View the Tours (2/2) - Use the toolbar and the website builder to edit your website. Toolbar Click on each icon to understand what they do. Website Builder Use these functions to customize your website. 10

11 Editing the Template: Page Step 2: Add Pages Add Page Click this button to add pages to your website. - Use this function to navigate through the pages in your website. - You can add, delete, and reorder pages 11

12 Editing the Template: Design Step 3: Design your Website (1/2) Background Function If you do not like the default options, click this button to upload your own background. Design This function focuses on the aesthetics of your website. Click each heading to explore their options. 12

13 Editing the Template: Design Step 3: Design your Website (2/2) Colours Pick a colour palette for your website. Fonts Choose a font scheme for your entire website or for separate text boxes. 13

14 Editing the Template: Add-Ons Step 4: Include Add-Ons (1/13) - The Add function has 11 Add-Ons: text, image, gallery, media, shape and lines, buttons and media, blog, online store, social, apps, and list builder. - The Add-Ons provide you with the opportunity to easily attach additional features and enhance your website. Learn More Click this button if you want to learn more about the different elements. Add elements are optional Only use these features if they benefit your website. 14

15 Editing the Template: Add-Ons (Text & Image) Step 4: Include Add-Ons (2/13) - Text function lets you add text to your website. - Image function allows you add images and clipart. 15

16 Editing the Template: Add-Ons (Gallery) Step 4: Include Add-Ons (3/13) Grid Click here to display your images in Grid Style. - Gallery function lets you choose how you want your pictures to be organized - Above is an example of a Grid Style gallery 16

17 Editing the Template: Add-Ons (Gallery) Step 4: Include Add-Ons (4/13) - Click on the image to view the option menu. STEP 2 Click Start Now on the home screen in order to start designing your website. Grid Gallery Use this menu to organize your images. 17

18 Editing the Template: Add-Ons (Media) Step 4: Include Add-Ons (5/13) Embed link Video Click on this button to add a video to your website. Include the code for your SoundCloud playlist here. The same applies for a YouTube video. - You can share YouTube videos or embed a SoundCloud player on your website - Above shows you how to add music and videos 18

19 Editing the Template: Add-Ons (Media) Step 4: Include Add-Ons (6/13) - Once you include the YouTube link, customize the appearance of the video. STEP 2 Click Start Now on the home screen in order to start designing your website. Video Menu Click on Change Style button to personalize the design of the video i.e. choose how you want video to appear in your website. 19

20 Editing the Template: Add-Ons (Media) Step 4: Include Add-Ons (7/13) - If you want to add music to your website, you need to create a SoundCloud account. STEP 2 Click Start Now on the home screen in order to start designing your website. Settings Click the Settings option to add music to your site. 20

21 Editing the Template: Add-Ons (Shapes & Lines) Step 4: Include Add-Ons (8/13) Strip Click on this button to change the style. You can also change the skin in advanced settings. - Shape and lines function allows you to add shapes and lines to design your website or company logo. - Above shows you how to edit your shapes and lines. 21

22 Editing the Template: Add-Ons (Buttons & Menus) Step 4: Include Add-Ons (9/13) Link To Click on this option to link the button to either a third-party website or an address. - Buttons and menus function lets you add buttons and menus to your website. - Above shows you how to add a button. 22

23 Editing the Template: Add-Ons (Blog Elements & Online Store) Step 4: Include Add-Ons (10/13) Click here This link teaches you how to create an online store on WiX. Visit Tutorial 2-2 for more information regarding building an E- commerce Website. Blog If you add a blog to your website, it will help you communicate with your consumers through a different medium. - You can create a blog or build your own online store. 23

24 Editing the Template: Add-Ons (Social & Apps) Step 4: Include Add-Ons (11/13) Apps Free and premium apps are available. Only use these apps if they add value to your website. Social Media Accounts Share your social media accounts on your website so your consumers can follow and Like you. 24

25 Editing the Template: Add-Ons (Apps) Step 4: Include Add-Ons (12/13) - Use the list builder to create detailed lists for your websites.. List Builder Do not use text boxes to create lists because it is not efficient nor will it look good. Apps You can find the List Builder in the Apps function. 25

26 Editing the Template: Add-Ons (WiX App Market) Step 4: Include Add-Ons (13/13) - You can download paid and free apps like YouTube or Site Search. 26

27 Upgrading Account Step 1: Settings Domain Names See Tutorial 1-1 for information regarding creating an effective domain name. Site Address Click here create a domain name for your site. Done After you create the domain name, your account is ready to be published; click done to publish. 27

28 Upgrading Account Step 2: Upgrade Account (1/2) - After customizing your website, click the Upgrade button to receive additional benefits. Upgrade Upgrade your free account to a paid account. This step is optional. 28

29 Upgrading Account Step 2: Upgrade Account (2/2) - Here is a breakdown of each paid account: 29

30 Upgrading Account Step 3: Set up Payments - Fill in the necessary billing information. Payment Provide your payment information to process your account. Review your information before you click Submit Purchase. 30

31 In Summary Steps Away from Launching Your WiX Starting Out Editing the Template Upgrading Account Creating an Account Step 1: View the Tours Step 1: Create a Domain Name Step 2: Add Pages Step 2: Upgrade your Account (Optional) Step 3: Design the Website Step 3: Set Up Payments Step 4: Include Add-Ons 31