WEBSITE USER GUIDE This is it — you’re ready to learn the ins and outs of your new website! We hope this manual helps, but don’t hesitate to ask questions if you need further instruction. Logging In 1. Browse to ​http://ames.k12.ia.us.dev.juiceboxint.com/jb-login 2. Log in with username ​siteadmin ​and password ​ames!2015$ The main URL for the site is ​http://ames.k12.ia.us.dev.juiceboxint.com​. Creating User Accounts 1. Hover over ​Users ​in the sidebar and click ​Add New​. 2. Type a username. This can be anything you want, just keep in mind that usernames cannot be changed. 3. Type your email, first name, last name, and password. 4. Change the role to ​Site Administrator ​and click ​Add New User​. Managing Content Pages Creating and editing pages 1. To add a new page, click ​Pages ​in the menu on the left and then click ​Add New​. (Note that many of the pages have already been created, so be sure that a page doesn’t exist before creating it.) 2. Give the page a title. 3. Fill out page content. The bar at the top allows for rich-text editing like you would see in Microsoft Word, including bold, italic, and bulleted lists. Note:​ After you’ve logged in, you now have a black administrative toolbar at the top of every page when browsing the main website. From here, you can click ​Edit Page ​to switch to the editor for the current page or post. This is a convenient way of editing pages since you do not have to browse through the list in the backend admin. 1 Formatting text ● Subheadings ​(level 2, level 3, etc.) can be used by clicking the ​Paragraph dropdown on the second row of the toolbar and selecting the appropriate heading. (Note that heading 1 is reserved for page title, so it is not available in the editor.) ● Intro text ​(large-format paragraph text) can be used at the top of a page. Click inside a paragraph and select ​Formats > Intro Text ​to use this. ● Links ​to both internal and external content can be included in your pages. Just highlight the text you would like to link, and click the link icon in the top menu. You will be prompted with a box with options for external (top) and internal (bottom) links. ● Additional emphasis can be given to links by adding either the ​Orange ​or ​Grey Callout Link ​formats. Click inside a link that has already been created and select Formats > Orange/Grey Callout Link​. ● Horizontal rules ​can be used to divide sections. Click the horizontal bar icon in the top row of the toolbar to add a section divider. Using Tables 1. To add a table to a content region, click the ​Table ​icon in the top row of the toolbar, hover over ​Insert Table ​and select the number of rows and columns. (You can always add more later.) 2. To create row or column headings, select the cells you want to modify (click and drag) and then click ​Table > Cell > Table Cell Properties. ​Change ​Cell Type ​to Header cell ​and then ​Scope ​to either ​Column ​or ​Row ​depending on whether the header cells describe the cells below them or the cells beside them. 3. Fill out the table content. The columns will automatically adjust based on the width of the content inside the cells, but if you need to fix the width of a cell (for instance, if one cell has a lot of text and is throwing off the width of the entire column), you can set this in ​Table Cell Properties. 4. To add additional rows or columns, put your cursor inside a cell and go to ​Table > Row > Insert Row After ​(or ​Column​, or ​Insert Before​, depending on what you’re trying to do). 5. To delete a table, put your cursor anywhere inside your table and go to ​Table > Delete Table. 2 Adding images to pages 1. To add images, click the ​Add Media ​button above the toolbar. 2. On newer browsers, you can drag-and-drop a file from your hard drive into the large upload region, and it will begin uploading automatically. Otherwise, click the Select Files ​button to choose a file from your hard drive. 3. The image will begin uploading. Once it’s complete, find the ​Attachment Display Settings ​section in the bottom-right corner of the panel. Choose your ​Alignment with the text (left, right, or center). 4. Under ​Link To,​ keep it set to ​None ​if it’s a decorative image that should not be clickable. If it’s a thumbnail of a larger version, choose ​Media File ​to link it to the full-size photo. 5. When you’re finished, click ​Insert into page ​to put it in line with the text. Note: ​Uploaded images are automatically resized to a maximum of 1280x1024px. This will keep the server from unnecessarily storing full-size camera photos when they will only be displayed at screen resolution. Embedding videos and other media The editor allows easy embedding of videos from YouTube or Vimeo photos from Flickr or Instagram, tweets from Twitter, and even slideshows from SlideShare or Scribd. To embed one of these, just ​create a new line ​inside the text box and ​paste the URL ​of the content you’re embedding, such as: ● https://www.youtube.com/watch?v=Fo2-sl0R1I0 ● https://twitter.com/ACSD_News/status/559097853218258944 The embedded content will load and display inside the editor. This is the same as it will look once the page or post is published. A full list of supported embeddable content can be found here: http://codex.wordpress.org/Embeds Setting header images Header images are optional images that can be included at the top of a standard page to add personality and break apart the monotony while browsing. If no header image is included on a page, the content will just appear directly under the breadcrumb menu. 3 1. Prepare your header image. Header images should be at ​676 pixels wide ​and 208 pixels tall. ​The image you upload can be bigger than this, but it’s best to keep it around this size to avoid unwanted cropping. 2. When the image is ready, on the page edit screen, scroll down and find the Featured Image ​box on the bottom right. Click ​Set featured image. 3. Upload a new image via drag-and-drop, or select an existing image from the media library if you’ld like to reuse the same photo across multiple pages. 4. Click ​Set featured image. ​You’ll be returned to the edit screen, and the image will display in the box. Publishing the page In order to appear in the site navigation automatically, a page must be created underneath of an existing page. 1. Before publishing a new page, look in the sidebar on the right and find the ​Page Attributes ​section. 2. Under the ​Parent ​dropdown, select a top-level page to place this new page underneath. 3. Once the page has been given a position in the hierarchy, click the blue ​Publish Page ​button. Adding right sidebar content A right column can be added to standard pages to allow for additional or ancillary content to be displayed. 1. To enable the right sidebar, in the ​Page Attributes ​box, select ​2-column page from the ​Template ​dropdown. 2. From here, either publish the page, or save it as a draft and reload. Below the content region, you’ll have a new text box called ​Sidebar Content. 3. Add content to this box as necessary and either save the page as a draft or publish it to save your changes. Setting the page order 1. By default, pages will be ordered alphabetically. However, if you want to put them in a specific order, click ​Pages ​in the left sidebar menu. 2. Find your page in the listing. (They display hierarchically, so it may be indented underneath its parent page.) 3. Hover to the right of the page title. Your cursor will change to a “move” icon. 4 4. Click and drag either up or down to reposition the page order. The new order will be saved automatically. Managing news articles News articles share a lot in common with standard pages - the interface is similar, and all of the content formatting described above in Pages also applies to articles. The news engine is a blog at its core: articles are displayed chronologically with the latest posts at the top, and they are categorized by school to allow for easier browsing. Creating a new post News articles are managed in the ​Posts ​section of the admin. To create a new post, click Posts > Add New ​in the left menu. The content editor is the same as what you’d see on a standard page, and all of the same features are supported. The one thing that’s different is the use of the ​Read More divider. We’ve designed this news section so that it looks best with article summaries, so for longer articles the user will click through to read the full text. To use the Read More divider, put the cursor on its own line where you want the break to occur and click the icon on the right side of the bottom row, called the ​Insert Read More tag. ​When this post is displayed on the news listing page, a Read More button will appear. The full text will only display when a visitor clicks through to the article itself.