Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Website now guide client edition


Published on


Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

Website now guide client edition

  1. 1. User Guide:Designers’Edition GWebMoneyMakerAll the basics you need in order to edit your first (and second, third,fourth - even seventeenth) site can be found over these next severalpages. Take a few minutes to read this guide and you’ll be an expert inabout an hours’ time.
  2. 2. WebSite Now Guide: Client EditionIntroductionWebSite Now is the easiest way to edit your own website. But that doesn’t mean you can’t usesome help getting to know your way around.All the basics you need in order to put together your first (and second, third, fourth - evenseventeenth) site can be found over these next several pages. Take a few minutes to read thisguide and you’ll be an expert in about an hours’ time.Lets get to it and build a site!Site Title / LogoEvery site has a Title by default (yours was chosen by you) and this can be changed at anytime. You have the option to simply alter the text or upload an image logo. Lets look at bothoptions.Scroll over the Title area to make a change.You can choose to keep a Text Title, Upload a Logo or simply turn the Title area off to make itdisappear from the theme.If you choose to stick with a Text title, simply type whatever you want. It should be fairly short andto the point (no more than six or seven words). Like the title of a book or a newspaper headline. 2012©All rights reserved
  3. 3. WebSite Now Guide: Client EditionIf you prefer to upload a Logo image, scroll over the title and select the clearly labeled Logobutton. This will open a dialog box prompting you to upload an image from your computer. Theimage must be a JPEG (JPG), GIF or PNG. If you dont know the difference, dont worry: mostimages are JPGs so this is not something youll likely have to give much thought.After you upload the image, you can edit it, delete it (to upload a different image) or switch backto text. 2012©All rights reserved
  4. 4. WebSite Now Guide: Client EditionKeep in mind that every theme has a set amount space available for a logo image. And the logowill be automatically resized to fit in this area. Aside from altering the CSS to provide more space(which you should only do if youre experienced with HTML), there is no way to change theamount of space an individual theme provides for a logo image.Multiple HeadersYou dont have to use the same header image on every page of the site. You can use one headerfor the Home, another header for your Contact page and another for several other pages. How doyou do that?When you go to save a header youve created on a certain page, click the arrow next to the Savebutton to pull up different options. You can save this header to all the pages of your site, to onlythe page youve been working on or to pages that you select. 2012©All rights reserved
  5. 5. WebSite Now Guide: Client EditionIf you go with the "Only selected pages" option, youll see a dialog box where you can select thepages to which you want to save this header.All you have to do is select the pages you want and click Save. The exact header youve createdwill then show up on each of those pages. 2012©All rights reserved
  6. 6. WebSite Now Guide: Client EditionYoure now ready to start building your site. In the process of building your site (and reading thisguide) youll be working with:ElementsElements are the basic building blocks of your site. All of your site content, be it text, pictures,videos or what have you, is added via an element.PagesYour site can have main pages and sub-pages. We’ll be adding several pages (including a blog) toour test site in this guide.Themes / DesignYou can select from any one of a number of themes and switch to a different theme at any time.This affects the look of your site. All of your pages and elements remain in place, no matter whattheme you choose. We’ll switch themes and take a close look at the theme options (like changingfonts) towards the end of the guide.With the basics done, the next step is to learn how to Add Your First Elements to a site.First Elements: Add Text Your SiteAs noted on the previous page, elements are the building blocks of your site. All of your content(aside from a few exceptions like the header image, which we have already covered) is added viaan element. Let’s explore some of these elements and add them to the first page of our examplesite.Text ElementsAdding an element to a site is as simple as clicking on that element and dragging it to the contentarea of a page. Lets drag the most basic element -- the paragraph element -- to this sample site. 2012©All rights reserved
  7. 7. WebSite Now Guide: Client EditionThe paragraph element is exactly what it sounds like -- an element for writing text. You can write aword, a sentence or multiple paragraphs in a single element. Just click within the element to startediting.As you write your text, take notice of the blue toolbar at the top of the editor. Every element hasits own toolbar with functions specific to that element.The text toolbar enables you to (from left to right) Bold, Italicize, Underline, change the color,increase the size and decrease the size of selected text. You can also create a link (well take a closer lookat this a bit later) to another site, a page within your own site, an email address or an uploaded file. 2012©All rights reserved
  8. 8. WebSite Now Guide: Client EditionBeyond that you can align all the text in an element to the left, center or right, create both bulletedlists and numbered lists, and also undo / redo changes.One thing you may notice you cant do is change fonts. Thats because the font is controlledthrough the sites theme and not within individual elements. You can change the default font fordifferent areas of your site via the Design tab, and well take a closer look at this a bit later in theguide.Lets add some text to our example site:To add more text we could keep writing in this same element, add another paragraph element tothe page, or use one of the three other text elements:  Title - Used for adding titles / headers to a page.  Paragraph w/ Title - A paragraph element with a spot for title already built in.  Paragraph w/ Picture - A paragraph element with a spot for both a title and an image built in.Each of these elements use the same text editing toolbar we looked at above and you can stack asmany of them as you want on a page.Now, how do you add images to the site? Move on to our First Elements: Adding Pictures.First Elements: Add Pictures Your SiteThere are four elements that can be used to add images to a site:  The above mentioned paragraph with picture element.  The picture element -- upload one image per element.  The picture gallery element -- upload as many pictures as you like to create a gallery of clickable images. 2012©All rights reserved
  9. 9. WebSite Now Guide: Client Edition  The slideshow element -- upload as many pictures as you like to create a slideshow of images.Adding any image element to your site works the same way as adding a text element - just drag itto the page.Uploading an image to a picture element is as simple as clicking the big blue Sample Image.This opens a dialog box where you select how you want to upload your image. You can:  Upload an image from your computer.  Select one from Flickrs free, searchable library of creative commons licensed images. Using this option will add a small copyright attribution to the footer of your site linking to the photographer who took the image.  Enter the address of an image from out on the internet. You should only use this third option if you already own the image youre embedding.In this example Ive selected the My Computer option and then clicked Choose File. Doing soopens a file browser on the computer through which an image can be selected. 2012©All rights reserved
  10. 10. WebSite Now Guide: Client EditionThere are a number of different ways to change and edit an uploaded image. The first youll noticeis the little pop-over menu that appears above the image when you scroll over it. Using this youcan:  Link the image to site, page, email address or file.  Add a caption to the image.  Remove the image.The second is the blue toolbar that appears at the top of the screen when you click directly on theimage. Use this toolbar (from left-to-right) to: 2012©All rights reserved
  11. 11. WebSite Now Guide: Client Edition  Replace the current image with a new one.  Set a border size (or no border at all).  Select a gray or black border  Position the image to the left / center / right of the element (you can also drag the image within the element to do this).  Use the Advanced option to set the margins around the image and enter Alt Text if needed (if you dont know what Alt Text is then dont worry about using it).The third is the Edit button that appears in the upper left of the image when you roll over it.This brings up our ImagePerfect editor. You can use this to crop, rotate and add effects to theimage. You can also add more images to this picture element, but this is much more limiting thanusing our Slideshow or Gallery options.Re-size images by clicking and dragging the box found on the lower-right-corner of each.And thats the basics of working with an image. 2012©All rights reserved
  12. 12. WebSite Now Guide: Client EditionOur site now looks like this:As you can see, each element weve added is stacked above or beneath another element like acolumn of building blocks. Elements stack on top of one another by default within the editor.But what if we want to place two or more elements side-by-side? To do that, move on to the nextstep and learn how to Alter Your Layout. 2012©All rights reserved
  13. 13. WebSite Now Guide: Client EditionAlter the Layout of a Page with the 2 ColumnElementBy default, the content area of a page allows you only to stack elements one on top ofanother. No matter how many times you try to drag an element alongside another element, it willalways end up above or below that element. This works great, unless you want to line up some ofyour elements side-by-side in multiple columns. Thats where the Two Column Layout comes in.The Two Column Layout Element works like any other element: just drag it to a page. It will stackabove or beneath any other elements youve already placed on that page and is quite literallymade up of two empty columns separated by a blue bar.This blue bar can be clicked and dragged to the right or left to increase / decrease the size of acolumn. Note that this bar does not appear on your published site, so your beautiful content willnot be marred by a blue bar running down the middle.Adding content to one of the columns is as simple as dragging that content into the column. 2012©All rights reserved
  14. 14. WebSite Now Guide: Client EditionMoving an element is as simple clicking and then dragging on the blue bar at the top of theelement.The text and image content we uploaded earlier has now been placed into the two columnelement.A column can contain more than just one element -- you can put as many elements as you like ineach column. You can also place other elements above or below the two-column layout. Give it atry!Now that weve setup a basic home page, lets make some changes to our theme.Switch Themes and Edit FontsNow that our site is coming along, this seems like a good time to decide which theme to use forthe design. A theme can be selected at any time (whether at the beginning, middle or end of theprocess of creating the site) and selecting a new theme does not delete or alter the content ofyour site.To change your theme, go to the Design tab: 2012©All rights reserved
  15. 15. WebSite Now Guide: Client EditionThe first thing you see here is the "Favorites" section, where we display a number of our favoritethemes. This is also where your own favorite themes will appear when you select them.If you scroll over a theme in the favorites area, youll see how your own site will look if you selectthat theme. If you scroll off of the theme, youll see the original theme again. To select a theme,click on it.If you go to the All Themes section of the Design tab, youll see all the themes. These can beviewed as one big group or by looking through different categories like Business orWedding. Dont feel constrained by the categories - any theme can be used by any person orbusiness to create a nice looking site. 2012©All rights reserved
  16. 16. WebSite Now Guide: Client EditionWhen you see a theme you like, scroll over it and click the Preview button to see how your ownsite looks with this theme.Heres how our example site looks with the theme weve selected to preview. 2012©All rights reserved
  17. 17. WebSite Now Guide: Client EditionClick Use Theme to use the theme for your site, click Favorite to add it to your Favorites list or clickCancel to look through more themes.After you select a theme, use the Design Options section to set the default fonts for that theme.You can alter the fonts for your Site Title, Paragraph Titles, Paragraph Text (this is most of the texton your site) and for your Links.We have roughly one hundred different fonts to choose from. Lets use Josefin Sans Std for thissite. 2012©All rights reserved
  18. 18. WebSite Now Guide: Client EditionWith a new theme and font chosen, lets look at how to Edit a Themes Header Image.Edit the HeaderA lot of our themes include an area for a header image (youll know your theme includes this iftheres a default image at the top of theme). As its doubtful youll want to use the default imageon any of your pages, weve built an easy to use header creation tool called ImagePerfect so youcan make your own header.Note that if your theme does not have a default header image, you wont be able to use thisfeature unless you select another theme.To get started, scroll over the header image and click the Edit Image button: 2012©All rights reserved
  19. 19. WebSite Now Guide: Client EditionAfter you do this, youll probably want to go ahead and delete the default image. Click the imageand then click the red X in the corner to do so.To add an image to the header, click the Add Image button in the upper right.This gives you the option to select your own image... 2012©All rights reserved
  20. 20. WebSite Now Guide: Client EditionOr to choose a Creative Commons licensed photo from Flickr. You can use the provided field tosearch for an appropriate image for your site.Once you upload or select an image, you can edit it. This image is too big for the header of thepage. 2012©All rights reserved
  21. 21. WebSite Now Guide: Client EditionImages can be re-sized using the little bubbles at each corner and side of the image.And an image can be dragged by clicking anywhere on it and dragging it.Use the provided tools at the top of the page to edit and add text / effects to the image asneeded. 2012©All rights reserved
  22. 22. WebSite Now Guide: Client EditionWhen youre happy with an image, select the Save button to Save it. You can use the arrow to theright of the Save button to choose whether to save the image to every page of the site, just thispage or to select only certain pages to save it to. In that way you can have different headers ondifferent pages if you want.And heres how the page looks with the Saved image. You can scroll back over a Saved header toedit it some more. 2012©All rights reserved
  23. 23. WebSite Now Guide: Client EditionKeep in mind that multiple images can be added to the same header just by continuing to addimages using the Add Image button.With this done, lets move on and Add More Pages to the site.Create More Pages for Your SiteWhether youre one of our certified designers or a client, your site can have as many pages andsub-pages as needed. We place no limits whatsoever on the number of pages that can be addedto a site. Creating a new page is as simple as going to the Pages tab and clicking the Add Pagebutton.There is an option to Add a Page or Add a Blog. For now lets focus on just creating New Pages.Clicking the Add Page button adds a new page to your list. 2012©All rights reserved
  24. 24. WebSite Now Guide: Client EditionWorking from top-to-bottom you can:  Edit the Page (which will take you back to the elements area of the editor that weve previously been looking at)  Copy the Page to use as the basis for a new page  Delete the Page  Change the Pages name  Hide the Page from the Navigation Menu. If this is unchecked the page is accessible via the sites navigation. If the box is checked then the page is hidden from the navigation (though you can easily create your own links to hidden pages)  Password Protect this Page.  Link Page to an External Site (creating a navigation link that leads to another site entirely).  Adjust the Advanced Settings.The Advanced Settings for each page are useful for improving your sites Search EngineOptimization. If you dont know what this is, just ignore it for now.Lets add several new pages to the example site (clicking Add Page again will add another pageand save the changes to the page you were working on): a page for Sweet baked goods, a pagefor Savory bakes, an about Our Chefs a page, a Write Us page for a contact form, a Visit Our Shoppage to provide the address, directions and a map. 2012©All rights reserved
  25. 25. WebSite Now Guide: Client EditionYou can re-arrange the order of the pages by clicking and dragging them up and down thelist. Dragging a page to the top of the list will make that page your Home, which is indicated bythe house icon to the far right of the page name. The Home page can have whatever name youwant it to have -- the name for this sites Home has been changed to Welcome.Lets create a sub-page by dragging the Write Us page underneath and to the right of the Visit OurShop page. Sub-pages appear in the site navigation menu as part of a drop-down menu forwhatever page theyre connected to (well see how this looks in a moment). 2012©All rights reserved
  26. 26. WebSite Now Guide: Client EditionTo create a sub-pages, just drag one page underneath another page and then drag it to the rightuntil you see each one connected to the main page via a dotted line. You can have as many sub-pages of a main page as you want.Now the navigation menu for our sample site (which previously just showed a link to Home)includes links to all the pages we created.And if we scroll over the Portfolio link with the mouse pointer, a drop-down menu appears with alink to each of the sub-pages we created.To edit the content of a page just click on its link from the navigation menu or go to the Pages tab,select the page from the list and click the Edit Page button.Now lets take a look at how to Add a Blog to a site. 2012©All rights reserved
  27. 27. WebSite Now Guide: Client EditionStart a New BlogTo create a blog, go to the Pages tab of the editor and click the New Blog button.This will add the blog to your list of pages.Give the blog a name and then click Edit Page to start adding content. 2012©All rights reserved
  28. 28. WebSite Now Guide: Client EditionA new blog starts with a sample post (that you can either edit or delete) and a sidebar with somedefault content that you can easily change.To create a new post for your blog, use the New Post button at the top of the blog itself.Your blog post has a title and a content area. The title should generally be short - no more than asentence long or so. The content area includes a basic paragraph element which you can eitheredit or delete. 2012©All rights reserved
  29. 29. WebSite Now Guide: Client EditionAdding content to a blog post works the same way as adding content to a regular page - just dragelements into the post and edit them to add content.Once youve added your content you can categorize the post - these categories will appear onyour sidebar, making it easier for visitors to your blog to find posts that cover certaintopics. Categories can be whatever you like and it isnt necessary to use them. 2012©All rights reserved
  30. 30. WebSite Now Guide: Client EditionNow you can Publish the post to your live site (which will make it instantly available) or Save toDrafts to edit / publish it later.If you save the post as a draft, itll be accessible to you through a drafts area at the top of the blogpage from within the editor (along with any other drafts youve saved). Just click the link to thepost from this drafts area to edit it further and Save / Publish. 2012©All rights reserved
  31. 31. WebSite Now Guide: Client EditionEvery new post you Publish will appear at the very top of the page, pushing older posts furtherdown the page. After youve added seven or eight posts to the page, older posts will be movedoff the main page to still accessible archive pages.Now that youve learned the basics, lets look at the next steps. 2012©All rights reserved