YOU ARE: AND THIS IS:

Transcription

1 YOU ARE: AND THIS IS: SoHE CMS Mnul As edited August 4, 015

2 TABLE OF CONTENTS 3 Logging in 4 Pge types within the dshord 5-6 Exploring the toolr 7-8 Adding pge 9 Editing pge 10 Pge templtes: Met Templte 11 Pge templtes: Brnflkes 1 Adding log post 13 Adding n event 14 Deleting n existing pge or post 15 Adding link within the Editor 16 Adding to the medi lirry: imges nd PDFs 17 Adding n imge from the medi lirry to post or pge Linking to PDF in the medi lirry 0-1 Inserting tle -3 Creting photo gllery 4 Inserting sider 5-6 Creting nchor links 7 Adding lock quote

3 LOGGING IN How to log in: Type in this URL: First time user: Contct Lind Zwicker for permissions Therefter Enter usernme Enter pssword Click Log In Note tht there re two log in screens, one for the school nd one for the site. (For security purposes, lwys log out when you re done working in the site. The log out re is in the upper-right hnd corner.) 3

4 PAGE TYPES WITHIN THE DASHBOARD Posts Events Medi Pges Crete nd edit log posts here. Mnge nd dd ll of your events nd event informtion here. Wht you dd will e pulished on the Clendr of Events pge. This section llows you to mnge your imge lirry nd uplod new imges/pdfs from your computer. All of the primry nd secondry pges within the site (these re the pges tht you cn find vi the site nvigtion). Esy Medi Add nd edit your photo glleries here. Photo glleries will pper s thumnils the viewer cn flip through in lightox ( pop-up window). Timelinr Use this plugin in to dd nd edit timelines. Timelines will pper s visul grphs of dtes nd events. TlePress Use this plugin to dd nd edit tles. Appernce, Plugins > ADMINISTRATION ONLY 4

5 EXPLORING THE TOOLBAR (PAGE 1 OF ) When you write text for your wesite in word processing softwre, such s Microsoft Word, don t use Word s formtting options to formt your text (i.c. font, old, centered, etc). The editor is where you should dd styles to your text. Most of the symols will e recognizle from word processing softwre. Below is the key to the unique symols: (A) Add medi llows you to insert medi to the Post WYSIWYG. (B) Esy Medi this plugin llows you to insert previously creted photo glleries. (C) Add Contct Form dds n re for visitors to sumit comment crds. (D)Crete/Brek Link Add or remove link on imges or inline text. (E)Kitchen sink if you only see one line of the tool r, clicking on the kitchen sink utton will expnd the toolr to show the other tools. A B C D E 5

6 EXPLORING THE TOOLBAR (PAGE OF ) When you write text for your wesite in word processing softwre, such s Microsoft Word, don t use Word s formtting options to formt your text (i.c. font, old, centered, etc). The WYSIWYG editor is where you should dd styles to your text. (F) Timelinr this plugin llows you to insert previously creted timelines. (G) TlePress this plugin llows you to insert previously creted tles. (H) Visul/HMTL toggle select the t for the visul (WYSIWYG) vs. the HTML view of the post content. (I)Formt Text styles ll of the font sizes used on the site re coded nd ville vi this drop down menu. (J) Pste from Text or Word Opens window for you to pste text from Notepd, TextEdit or Microsoft Word. This will remove the mjority of the formtting tht could cuse prolems within the post. (K)Insert custom chrcter provides chrcters tht re not used frequently, such s the degree symol in temperture. F H G I J K 6 Presenttion Title

7 ADDING A PAGE VISUAL VIEWAdding Pge e 1 d f c Within the Dshord, select Pges nd Add New. This will open new pge screen within the editor. Add Title within the title field(). Estlish the order of the site s nvigtion y selecting the Prent for your new pge(). This will mke your new pge su-pge of its prent. Select the Templte on the right side of the editor. Add the title, content, nd ny dditionl medi. To trnsform your text into heding(c) or suheding, use the Heding dropdown(c). If it hs Met templte, include top nd ottom tglines if you wish (lern more on Pge 10). Rememer to dd fetured imge. Switch to the Text view(d) to dd ny shortcodes you d like, listed in the toolr (). Preview nd Pulish Select Preview Chnges to view your new post without pulishing to the live site yet(e). Select Updte to pulish the coverge to the live site(f). 7

8 ADDING A PAGE TEXT VIEW Switch to the Text view(d) to dd ny shortcodes you d like, listed in the toolr Preview nd Pulish Select Preview Chnges to view your new post without pulishing to the live site yet(e). Select Updte to pulish the coverge to the live site(f). d 8 Presenttion Title

9 1 EDITING AN EXISTING PAGE Editing pge Within the Dshord (1), select Pges from the left column. Then select the link All Pges. This will open list of the pges ville. Hover over the title for the pge you would like to updte. Select edit from the menu elow the pge(). This will open the pge/post within the WYSIWYG(). Complete your edit. c Once you re finished with the edit, you cn preview your chnges y clicking on the Preview Chnges utton () on the upper right of the WYSIWYG. This will llow you to see your chnges on the pge, ut site visitors will not e le to see these chnges. Once you hve completed the chnges to your stisfction nd nd redy to pulish, select the Updte utton (c). This will pulish your pge to the live site. 9

10 PAGE TEMPLATES: MEAT As you egin to crete nd edit pges(1), you will notice tht the Met nd Brnflkes templtes re the most commonly used. 1 Met 3 This templte is est used s lnding pge, inviting visitors to explore the site further through links to su-pges. The Met templte includes optionl fields for top nd ottom tgline. It lso llows you to crete three columns consisting of fetured imge, description, nd utton which links to the pge of your choice. To mke column, select the Met templte from the Pge Attriutes dropdown(1). Next, scroll down to the Columns section() nd estlish: Wht your column will link to. Choose etween n Internl Link, Externl Link, or No Link. When you click the (+) utton in the right hnd corner() to crete your column, you will e prompted with this initil choice efore you cn proceed. Fetured Imge Title An Excerpt: short description of the linked pge. Button Lel: wht you d like the utton to sy. Ex: Red More. Button Link: once gin, choose etween n Internl Link ( pge within the SoHE site), n Externl Link (ny pge outside of the SoHE site), or No Link. When you re finished, click Updte. Your chnges will pper s three columns(3). 10

11 PAGE TEMPLATES: BRANFLAKES Brnflkes 1 This templte is est used for lrge pges with lot of text nd imge content(1). While using this templte, you re le to select Heder Imge() which will pper etween the site s heder nd the pge s content(). Lrge, high-qulity, nd horizontlly-oriented imges re recommended. (1475px width x 756px height) 11

12 ADDING A BLOG POST Adding Blog Post Within the Dshord, select Posts nd Add New. This will open new post screen within the WYSIWYG(1). e d Add Title within the title field (). 1 f c Check the pproprite Ctegories for your new post on the right side of the WYSIWYG (). Below Ctegories, dd dditionl Tgs (g) nd seprte with comm. Add the title, content, nd ny dditionl medi (c). Switch to the Text view(d) to dd ny tgs to your text (). g Rememer to dd fetured imge (600px x 600px)(h). Preview nd Pulish Select Preview Chnges to view your new post without pulishing to the live site yet (e). h Select Updte to pulish the coverge to the live site (f). 1

13 1 ADDING AN EVENT Adding n Event Within the Dshord( 1), select Events nd Add New (). This will open new event screen within the WYSIWYG( ). Add the title, content, nd ny dditionl informtion or medi. This includes the dte, time, loction, contct informtion, nd link to the event (). Rememer to dd fetured imge (64px x 64px). If you d like to dd piece of informtion out your event ut don t see field for it, select Custom Fields (c) for list of more options. Preview nd Pulish Select Preview Chnges to view your new post without pulishing to the live site yet. c Select Updte to pulish the coverge to the live site. 13

14 DELETING AN EXISTING PAGE OR POST 1 c d e From the dshord(1), click Pges () or Posts. Hover over the pge you would like to delete nd select Trsh next to it(). A window will pop up sking if you re sure you wnt to delete the pge. If you re sure, select OK. If you wnt to remove pge from the live site, ut not delete it, click edit (c) insted of trsh. Within the WYSIWYG(), chnge the pge sttus from Pulished to Drft(d). Be sure to Updte (e) the pge to sve the sttus chnge. 14

15 1 ADDING A LINK WITHIN THE EDITOR Adding n inline text link Within the editor, highlight the text tht will comprise your link(). Select the link icon in the top row of the formtting tools (). This will pop open the Insert/edit link tool(). Adding link to nother site Pste the URL of the site pge you would like to link to in the destintion URL field(c). Click Add Link(d). c e Adding link to SoHE.wisc.edu pge: select it from the existing content list t the ottom of the tool(e). Click Add Link (d) Adding link to PDF within the Medi Lirry Pste the File URL of the PDF you would like to link to in the destintion URL field(c). Click Add Link (d). d 15

16 ADDING TO THE MEDIA LIBRARY: IMAGES AND PDFS Adding Imges nd PDFs to the Medi Lirry Within the dshord, select Medi. This will open your Medi Lirry(1). To dd new item, select Add New t the top of the pge (). Note tht you should serch for photo efore you dd one in, it might lredy e there. This will open the Uplod New Medi tool (). From this screen, you cn drg & drop files or click Select Files to choose file on your computer to uplod the medi lirry (). Once you hve selected the correct file, the newly dded item will now pper t the top of your medi lirry list. Now tht the item hs een uploded into the medi lirry, you will e le to ccess it for use on ny pge you re updting or dding. 1 16

17 ADDING AN IMAGE FROM THE MEDIA LIBRARY TO A POST OR PAGE Within the post tht you would like to dd the imge to(1), plce your cursor in the re tht you would like the imge to pper (). Click on the Add Medi icon t the top of the tool r (). 1 This will ring up the Insert Medi window (): select the Medi Lirry t(c). Find the imge you wish to use (d). c Within the extended file informtion(3): 3 Mke sure tht the title is user friendly. No underlines or internl lnguge. This title will pper when people hover over n imge on the site. Alternte text - use this re to descrie the imge. Need to do this for ccessiility resons. d Cption This text will pper elow the imge on the site. Link To cn e used to link to n imge. You hve 3 options elow. If you re inserting the imge into pge, select NONE. Alignment determines where on the pge your photo will pper. Size determines the size of the imge tht will pper on your pge. e 17 When you hve finished formtting the imge, select Insert into pge (e).

18 LINKING TO A PDF IN THE MEDIA LIBRARY - PAGE 1 OF 1 3 c Adding PDF to pge: Within the post tht you would like to dd the pdf to, click on the Add Medi icon t the top of the tool r (1). This will ring up the Insert Medi window (), select the Medi Lirry t (). Find the PDF you wish to use. Within the extended file informtion (3), highlight the full URL Link () nd copy it. Close the Insert Medi Window. Highlight the text tht you would like to e the PDF downlod link(4). Select the link tool from the tool r (c) which will open the link tool(5). Pste the URL Link into the URL re(d). Click Add Link (e). You will now see the highlighted text hs turned lue nd n underline will pper when you hover over the text. If you need to remove link, highlight the linked text nd use the Unlink utton within the toolr (f). 18

19 LINKING TO A PDF IN THE MEDIA LIBRARY (PAGE OF ) c f 4 d 5 e 19

20 1 INSERTING A TABLE (PAGE 1 OF ) c 3 Inserting tle To include tle in your pge or post, you must crete the tle seprtely using the TlePress () plugin. In the dropdown menu, select Add New Tle. On the tle customiztion pge(): Nme your tle. Enter description (if needed). Determine the numer of rows nd columns. Select Add Tle (c). Use the next pge to enter your tle s content(3). The Text Mnipultion(d) section llows you to insert links nd imges into the tle cells. The Fetures of the DtTles Jvscript Lirry(4) section is where you will check two oxes: Use DtTles(e) nd Enle Horizontl Scrolling(f). Click Sve Chnges when you re finished. To dd the tle, return to your pge s WYSIWYG(5) nd select Insert Tle from Tlepress from the toolr(g). This will insert shortcode(h) nd your tle will pper fter sving. 0

21 INSERTING A TABLE (PAGE OF ) 3 d e 4 f e g 5 h 1

22 1 CREATING A PHOTO GALLERY (PAGE 1 OF ) Creting Photo Gllery To crete new photo gllery, use the Esy Medi plugin y selecting Esy Medi>Add New Medi () from the dshord(1). 3 c While customizing your gllery, give it title nd check its pproprite ctegories. Under the Medi Type drop-down menu, select Multiple Imges (Slider) (c). Under Gllery Options(3), egin selecting the imges you wnt y clicking on them from your medi lirry. When you re finished, click Sve Medi.

23 CREATING A PHOTO GALLERY (PAGE OF ) 1 Next, return to the pge in which you d like your photo gllery to pper(1). In the toolr, select the lue icon for Esy Medi Shortcodes(). When you select your new medi, shortcode will e dded to the WYSIWYG(). 3 Preview your work to rowse the imge gllery on your pge(3). 3

24 INSERTING A SIDEBAR 1 Inserting Sider Siders re useful for short snippets of informtion nd links. Add shortcodes() in the Text toggle of the WYSIWYG (1) to turn your text into sider. Highlight your chosen text nd select either sider-left or sider-right() on the toolr menu. In this exmple, the sider-right utton ws chosen. Click preview to view your sider(3). 3 4

25 CREATING ANCHOR LINKS 1 Anchor links re used to jump to specific portion of pge (either the sme pge or nother). To dd n nchor link: Use the Text toggle() in the WYSIWYG(1) to dd the following code() efore your nchor link text: d c <div clss="well well-lg"> <div clss="row"> <div clss="col-md-4"> (Add this specific row of text efore ech nchor link.) ANCHOR LINK ANCHOR LINK </div> Use the Text toggle() in the WYSIWYG(1) to dd the following code() round the text you d like to mke into link: < href= #TAG >TEXT</> Use the following code(c) efore the text you d like to link to: < id= TAG nme= TAG ></> Note: tgs of the sme nchor link must e identicl, or the nchor link will not work. They cnnot e used for more thn one nchor link. Use the Visul toggle() to see smll nchor icon to indicte tht the link hs een creted. Click Preview to view your nchor link(). 5

26 ANCHOR LINK CODE EXAMPLE Exmple: Adding nchor link Add the following code round the text you d like to mke into link: < href= #TAG ><>TEXT</> < href="#atkins"><>cthy Gilford Atkins</></> Use this code efore the text you d like to link to: < id= TEXT nme= TAG ></> < id="cthy Gilford Atkins" nme="atkins"></> 6 Presenttion Title

27 ADDING A BLOCK QUOTE 1 3 Adding lock quotes Within the WYSIWYG(1), highlight the text you would like to e mde into quote(). On the toolr, select the quottion mrk utton(). Your text will pper slightly lrger with light gry r to the left() in the Visul toggle, indicting the lock quote hs een pplied. In the Preview window, you will see your lock quote the wy it will pper in the live site(3). 7