NEIGHBORHOOD MARKETING COLLATERAL TEMPLATES USER S GUIDE WEB TEMPLATE

Transcription

1 NEIGHBORHOOD MARKETING COLLATERAL TEMPLATES USER S GUIDE WEB TEMPLATE

2 What is Wix? OVERVIEW Wix is an easy to use online website builder with hosting. The site offers both free accounts, which have ads and use a Wix domain name, and premium paid accounts starting at $9.90/month which are free of ads and allow you to connect to your domain. We have created two templates; both contain the same information and structure, but each has a different design, allowing you to choose one that best suits your organization. Each template is fully customizable so that you can change colors, fonts and even layout according to your needs. You will need to have Internet Explorer 9, Chrome, Firefox, or Safari to use the editing features. ACCOUNT SET-UP Create an account at then the NeighborWorks America Stable Communities Initiative at with your user name so they can transfer the template to you. Once they have transferred the file, you will receive an asking you to click Confirm to accept the transfer of the website template. In the Site Transfer Process window, type a new site name and click Save. It will now show up in your account on Wix where you can select Edit to start customizing your site. GETTING STARTED Wix has an extensive video tutorial library to help you become familiar with the features. You can also use the Wix Support Center to find instructions or type a question. 1

3 Here s a tour of the basics. EDITING IS SO EASY! It is easy to edit anything in the web template by clicking on it to open a window with detailed instructions on how to proceed. The editing functions are designed so you can click, drag and drop whatever you want, wherever you want. You can also use the four-button tool bar to the left to add, move, or rename pages; change overall colors and fonts; add photos and other media, text boxes, buttons, social media links, and more. PREVIEW SAVE PUBLISH UPGRADE HELP The buttons in the upper right top menu bar allow you to Save your work (do this often!) and toggle between Preview mode to experience the site as the end user would and editing mode. When you re ready to go live hit Publish. The basic template and hosting is FREE, but the Upgrade button provides different paid plans that offer more functionality such as your own domain name and premium support from Wix. Click on? to access the Help Center with guides and video tutorials. PAGES Six pages have already been set up for you in the template - the Home page, About the Neighborhood, Businesses, News, Events, and Get Involved. In the editing mode, navigate from page to page using the Page dropdown menu at the top left or Pages in the tool bar where you can also change the page name to match your content. TOOLS PAGE PREVIEW SAVE PUBLISH UPGRADE HELP 2

4 Here are some helpful basic tips... HOW TO MOVE ITEMS Just click on whatever you want to move and the arrow cursor will turn into a four-arrow cursor ( ) that will allow you to click and drag the item. In this example, the logo is in the left corner of the page, but you may want to center it. Simply select it then click and drag it to the desired position. HOW TO RESIZE ITEMS Just click on whatever you want to resize, place your cursor over one of the corners, and when the cursor becomes a double arrow ( ), drag it to the desired size. 1 2 HOW TO DELETE ITEMS Just click on whatever you want to delete and then click on the delete icon that appears in the lower right corner of the command window. In this example, the text box is selected. DELETE 3

5 Customize the look of your template. HOW TO CUSTOMIZE COLOR PALETTE Select Design from the Tool bar, then Colors and Customize Palette. The existing palette will appear. Change each of the colors in the Main Colors palette by selecting the swatch and entering your custom HSL or Hex # in the Color Picker window. Different shades will appear below each of the Main Colors. You can use these shades in addition to the Main Colors to change your site s colors while ensuring that the color scheme is maintained. The More Colors palette at the bottom of the window are colors outside of your Main Color palette that you can use to highlight. ENTER COLOR CODES HOW TO CHANGE COLORS Click on whatever you want to change. In this example, we are changing the color of the buttons. Choose Change Style then Edit Style. In the Advanced Styles window that opens, you can change the colors by clicking on the dropdown which will open your custom color palette in the Color Picker window. Select a color swatch from your palette and all of the buttons will change to the new color - in this case from orange to green. OLD COLOR NEW COLOR 4

6 Customize your text and links. HOW TO CUSTOMIZE FONT Select Design from the Tool bar, then Fonts and Customize Fonts. There is an existing hierarchy for the different styles (i.e. Title, Menu, Page Title, Heading, etc). Click on each one and change the font to one of your custom fonts, but keep the character size to maintain the hierarchy. It is suggested you use no more than two different fonts to keep the design clear and legible. HOW TO CHANGE TEXT Double click on the text to type over the existing text and edit. The text box will automatically expand as you add more text. When you double click the text box a tool bar will appear above it. Use this to change the font style, color, bold, italics, underline, justification, indents, and add bullet points. You can also add a hyperlink by highlighting text and clicking on the Link button at the far right of the text editing tool bar. In the example below, hyperlinks appear as blue underlined text and the word HERE is linked to the Homes for Sale page in the website. More on Links below. TEXT EDITING TOOLS HOW TO CREATE LINKS You can link anything: to another WEB ADDRESS, to another PAGE on your website, to a DOCUMENT you have uploaded, or to an address. For buttons and images, just click on them and choose the Link to option in the command window that appears. The Newsletter and Brochure buttons on the Home Page can be linked to PDFs of documents that you upload from your computer. In the Recent News section on the Home page you can link to news stories on the News page of your site as well as to stories on other websites. In the example below, first highlight the read more>> text and click on the Link button that appears on the far right of the text editing tool bar. LINK HIGHLIGHT 5

7 Personalize links. LINK TO YOUR OTHER ACCOUNTS SOCIAL MEDIA Click on the social media icons at the top of the page and select Organize Icons to link to your account. Facebook, Flickr, and Twitter are the default icons but you can delete them or swap them out for other accounts. In the Organize Icons window simply click on the delete icon that appears when you mouse over an icon or click on Add Social Icon to add a new icon. Don t forget to enter a contact address in the Contact Form on the Home page and Get Involved page. GOOGLE CALENDAR On the Events page you can link to your Google calendar to keep track of events by clicking on the calendar and selecting App Settings. If you do not have a Google account, you can delete the calendar. GOOGLE MAPS On the Get Involved page click on the map and enter your address. 6

8 Customize your images. HOW TO CHANGE IMAGES There are two main options for images: a single IMAGE or a GALLERY consisting of several images. These have already been set up in the template but you can change them by deleting the existing photo array and clicking on the Add (+) button in the far left tool bar. You can choose to add a single Image or a Gallery in the form of a grid or slideshow. SINGLE IMAGE You can change single images by clicking on the image and selecting Change Images. You will prompted to upload images from your computer to a Image Gallery. Once you have uploaded all your images, you can choose from this Image Gallery any time you want to change an image. Before uploading, read this detailed information on Image Quality. GALLERY: GRID CAPTION WHEN YOU MOUSE OVER IMAGE GALLERY: SLIDESHOW You can change the photos, captions, and display mode by clicking on the photo gallery and selecting Settings which will allow you to control things such as autoplay scrolling for the slideshow, or whether images expand or take you to a link when the user clicks on it. Select Organize Images to change the images and you will be taken to the Image Gallery to choose an image or upload new images from your computer. You can also add photo captions, brief descriptions, and links in this window. You can add or delete images from your grid or slideshow by clicking on the delete icon that appears when you hover over the image. 7

9 Line everything up. HOW TO ALIGN AND ARRANGE ELEMENTS Select the first element you want to work with, then select the other elements while holding down the <Ctrl> key and the Align and Arrange window will open. In this example, we want to make the two images the same size and aligned with one another. In the Align and Arrange window, click on one of the Match Size options (in this case match to both width and height) and one of the Align options (in this case align to the tops). In this example, we align the text box and image by selecting the align left option in the Align and Arrange window. 8

10 You re ready for the final touches. FOOTER Make sure you change the information in the footer at the bottom of the page and delete what you don t need. PREVIEW Click on Preview in the upper right menu bar to experience the site as a user would and make sure the navigation through the site works as you want it to. Check each page and each link to make sure they work, and scroll through photos and slideshows to make sure your photos and captions are correct. LAST SWEEP Check every page to make sure there isn t any left over stock imagery or text that should be replaced or deleted. You don t want your users to read something like Title. Double click on text to edit. in place of an actual title and story. PUBLISH This is the last step once you re sure everything is correct, hit Publish in the upper right hand corner. 9