Content Management System User Guide
Contents
1. Content Management System User Guide Version 1 0 CreativeWeb Tech Email john creativewebtech co uk Web www creativewebtech co uk Tel 01264 783474 Mob 07766 946331 Guide to using your CMS Admin Dashboard Purpose of This User Manual This manual is intended to be a simple guide to using your CMS Dashboard It covers the common tasks of writing and managing content and basic site maintenance It does not cover how to customize the website look or feel or any advanced coding It covers these topics Page 1 Understand the Dashboard Layout 3 2 Working with Content Using the Editor 4 3 Formatting Content in the CMS Editor 5 4 Creating Posts News Items 8 5 Creating Pages 12 6 Working with Images 15 7 Search Engine Optimisation SEO 17 8 Managing User Comments and Pings 18 9 Working with the Menus 19 9 ElegantBuilder 22 The CreativeWebTech CMS package gives you as a business owner the ability to update your own website without the need for any technical web skills We plan to keep the CMS Dashboard user guide as simple as we can If you have any questions at all please contact us at CreativeWebTech using the contact details found in the Welcome Panel on your Admin Dashboard 1 Understanding the Dashboard Layout CreativeWebTech New Once you enter the CMS Dashboard fi Dashboard you will find all the options you need to Crecitveweetech Dash modify existing or add new content to P Posts 32. it helps to _ think of each menu item as a heading in a formal report document In a formal report main section headings Level 1 headings are the nearest to the left of the page sub section headings Level 2 headings are indented rm slightly further to the right any other subordinate ann headings Level 3 4 etc within the same section are indented even further to the right The CMS menu editor allows you to create multi level menus using a simple drag and drop interface Drag menu items up or down to change their order of appearance in the menu Drag menu items left or right in order to create sub levels within your menu To make one menu item a subordinate of another you need to position the child underneath its parent and then drag it slightly to the right Position the mouse over the child menu item Whilst holding the left mouse button drag it to the right Release the mouse button Repeat these steps for each sub menu item Click the Save Menu button in the Menu Editor to save your changes 10 Elegant Builder to create Posts and Pages An alternative to using the Post and Page standard editor we have loaded your CMS system with ElegantBuilder The ElegantBuilder is found directly below the standard editor Note Using Elegant Builder will cancel out any information in the standard editor ElegantBuilder comes powered by our intuitive drag and drop page builder This module based system allows to you bu
3. you will see a number of options available to you P Posts addNew All Published Trash Bulk Actions x Apply Show all dates x View all categories Filter Title Author Categories Tag LA Date QUICK EDIT Categories more ie Title New Client Blake amp Davis website launched new client blake davis website launched fa 10 Oct w 24 2012 15 49 Author Chris Newman Cancel on Here you may open a post to accept user comments or keep it closed to comments by selecting and un selecting the check boxes The ping feature will display links to other blogs that had linked to your post If pings are selected then links to their posts where they had referenced you will automatically appear in your list of comments once their site has pinged yours Password Protect this Post This is also found in the Quick edit view accessed from the All Posts page You may make a post password protected using this option 9 Working with the Menus This section will show you how to manage your site menus add new pages and organise them Dashboard a01 Menus 2 w Posts sn Primary Media Theme Locations Menu Name Primary Automatically add new top level pages E L Pages Your theme supports 1 menu Select which Delete Menu EXD NT menu vou would like to use j menu YOU WOuld HKE tO USE Comments 3 1 Primary Menu Es Appearance Primary X Menus Computer Repairs Webs
4. your page content in the main text editor box see image below amp Links All Pages Add New Comments Add New Page A Very Awesome Page Permalink ftp la simpleywpguide com a vern awesome pagel Edit Uploadinsert ish Visual Bia 486 Fa a Paragraph US Ay Gwg O Fs 5 ce Once I finish writing this page it is going to be very awesome Your title will appear at the top of your published page as the headline It also becomes the default file name for the page URL unless you use the Permalink editing feature just below the title box to specify a specific perhaps shorter file name in the URL path See post permalink details for full information Permalink http fu simplewpguide com awesome padge I OF Cancel Page Options Page Attributes Parent no parent w Template Default Template Order 0 Meed help Use the Help tab in the upper right of your screen On the right side of the text editor below the publishing section are a number of options Pages have some different options to choose from than posts with some the same too We highlight the main ones you would be using by adding a screenshot image of that feature Page Parent Your website is not set to automatically add new pages to your primary navigation bar giving you better control of your page navigation via the Appearance Tab so this feature will not be used Page Template your website has a number of differ
5. your website Eh Media 4 CreativeWebTech Dashboard E Pages 5 Welcome to your Website Dashboard 1 Site Button This button will switch 2 Comments 6 From here you can upload Media via the Medi between the dashboard view and the i Aena F using the Posts tab live website view Ifyou require assistance please contact 2 Dashboard This tab will return you to the initial dashboard page hr John Francis at CreativeyWebTech Tel 07766 946331 8 Email johndcreativewebtech co uk 3 Posts his tab will open a sub menu allowing you to view All posts Add New Posts Manage Categories and Tags 4 Media This tab gives you access to your media library Here you can also add new media 5 Pages This Tab will allow you to access all Pages on the site You can modify the content of any page You also have the option to add new pages 6 Comments This Tab will allow you to access the comments section for your website Here you will moderate all comments left by visitors to your site 7 Appearance The appearance tab gives you access to the Menu section Here you can add pages to any of the menus created on your site primary menu or footer menus 8 Welcome Panel Here you will find contact details for CreativeWebTech together with a link to this manual 2 Working with Content This manual will give new users the ability to write edit publish and manage all your website content We cover writing posts and pages
6. View All link to bring up a list of all the currently published Pages on your site Select the Pages that you want to add by clicking the checkbox next to each Page s title Click the Add to Menu button located at the bottom of this pane to add your selection s to the menu Click the Save Menu button Your menu has now been saved with the modifications Deleting a Menu Item Another ew Page Locate the menu item Page that you want to remove in e Hite the menu editor window Click on the arrow icon in the top right hand corner of the menu item box to expand it Click on the Remove link The menu item box will be immediately removed from the menu Note this action does not delete pages only removes them from the selected menu Click the Save Menu button to save your changes Customising Menu Items nnother ew Page The Navigation Label This field specifies the title of the item on your This is what your visitors will see when they visit your website The Title Attribute This field specifies the Alternative Alt text for the menu item This text will be displayed when a user s mouse hovers over a menu item Click on the arrow in the top right hand corner of the menu item Page to expand it Enter the values for the Navigation Label and Title Attribute that you want to assign to the item Click the Save Menu button to save your changes Creating Multi level Menus ne When planning the structure of your menu
7. a new window or new tab So you can easily jump back to the write Publish immediately Edit post page When you click the Publish button you will then be redirected to a new Write Post page The little calendar option just below the Save and above the Publish buttons will allow you to post date your news posts They will remain unpublished and then later go live on the site at your preset date and time Click the edit link and those options will appear for you Your drafts will not be published live onto the website until you select the Publish button To edit draft posts you ve not yet completed or published click on the Posts tab Here will be the full list of your posts It will indicate which are published and un published Click the Title link of your draft post to continue editing 5 Writing Pages Pages are different from posts in that they are static pages outside the flow of chronologically organized posts Pages form the main navigation to sections of your site that tend not to change Writing a page in the CMS editor is similar to writing a post After Clicking the Page tab see above image click on the Add New link to begin writing a new page or the All Pages link to view and manage your current list of pages Dashboard w Posts Sh Media You write your page content inside the text editor Use the graphic editing icons to format your text Again like writing a post you give your page a title Then write
8. e will link _ to itself in the Link URI field however you can choose to have the image link to something else by changing You can set the alignment of the image and how text will wrap around it or not wrap around it This can also be done after inserting the image into the post or page Once inserted click the image and 2 icons will appear One is a picture frame clicking this will re open the above image options window The other red icon will delete the image from the post or page You may also set some size constraints here too When you upload an image using the image uploader through the CMS it automatically creates a small thumbnail file of the image So you may choose to display just the thumbnail in the post and have it link to the normal image Or a medium sized version or the full sized file Now click the Insert Into Post button 7 Search Engine Optimisation SEO Allin One SEO Pack Upgrade to Allin One SEO Pack Pro Version Title Description Keywords comma separated Blake and Davis Conservatories website launched by Creative 66 characters Most search engines use a maximum of 60 chars for the title Andover website design company launch a new client website for Blake and Davis Conservatories The website is fully interactive with social media platforms 156 characters Most search engines use a maximum of 160 chars for the description blake and davis conservatories andover website desi
9. ent templates for pages and you can select the desired page template here Experiment with the different templates in draft and preview mode Page Order You will not need to use this Saving and Publishing your Pages Publish Save Draft Preview Status Draft Edit visibility Public Edit Publish immediately Edit Move to Trash Publish As you write your pages the CMS will begin to auto save your page as a draft Use the Save or Publish buttons when you are ready Before publishing the page you can use the Preview button to see how it will look first Right click on the Preview button then open it in a new window or new tab SO you can easily jump back to the write page When you click the Publish button the new page will go live and you will then be redirected to a new Write Page page The little calendar option will allow you to post date your page for later publication on the site They will remain unpublished and then go live on the site at your preset date and time Click the edit link and those options will appear for you This feature is typically more useful for blog posts than it is static pages Your drafts will not be published live onto the website until you select the Publish button To edit the draft pages you ve not completed and published click on the All Pages link Here will be the full list of your pages It will indicate which are published and un published Click the Title link of your draft pa
10. ge to go to the edit screen and continue writing and then publish it 6 Working with Images Adding images is relatively easy using the image upload feature in the post or page editor A Note on Image Sizes Images on your computer are sized in pixels The space you have to place an image inside a post or page is limited to the width in pixels the content area your website allows If the size of your image extends beyond the width of the content area it can mess up the layout of your site and possibly force your sidebar down to the bottom of the page For images to be used in posts the maximum image width should not exceed 600px For images being used for pages you have a couple of options as follows If the Default Page Template is used the image width should not exceed 600px When using the Full Width Page Template the image has a max width of 960px Adding Images to Posts amp Pages First have your cursor set at the spot in your post or page where you want the image to appear Following the steps below will paste the image code at that spot in your editor Click the Upload Insert icon found at the top of the editor Uploadinsert Sh Visual Es E w M ll ll el El This will open the upload From Computer From URL Media Library window giving you a few choices as follows Add media files from your computer From Computer With this tab highlighted browse you computer and select the image yo
11. gn web Disable on this page post your website Your Site has a built in SEO function which is found at the bottom of all post and page editor views Here you would enter your title tag and description meta tags for the post or page you are creating This will make sure all search engines index your content correctly when spidering s Working with Comments and Pings P Posts add new All Published Trash Bulk Actions Apply Show all dates View all categories Filter Title Author Categories Tags e Date New Chris Newman Bespoke Website No Tags 201241 0 24 Client Design Blake amp Davis Published Blake amp Conservatories Davis CreativeWebTech website Website Design Website launched Stuff Edit Quick Edit amp Trash View SEO Title Blake and Davis Conservato ries website launched by Creativewe bTech Search Posts 1 of2 gt SEO PRE terrori Descripti c on blake and Andover davis bsite conservator design ies company andover launch a website new client design website for web desin Blake and andover Davis website Conservato design in ries The Ann heita Comments and Pings In the All Posts view you will see a list of all Published and Draft Posts you are working on Prior to publishing your post save it as a draft and go to the All Posts view Hover over the Title of the post and some options will appear Click on the Quick edit option and
12. ild your page visually Drag your modules onto the canvas and re size and rearrange them quickly and easily with your mouse You can create advanced layouts using columns and nested elements ElegantBuilder gives you a completely new set of tools for creating and managing your content Adding Modules to Your Page add a Module AddaCalumn amp Sampletay Adding modules to your page is as simple as drag and drop To manage your landing page oe log into the CMS Dashboard and edit one of Mi your posts Below the standard text editor you will see the new visual builder To add a module click the Add a Module link to reveal alist of available elements To add one to your page simple click and drag the module button onto the canvas and release your mouse You will notice that a large blue box has been added to your canvas that represents your newly selected module When you drag a new module Drag a Modi onto the canvas it will be added below the Pata Wasi modules you have already added Configuring Each Module Once you have added a module to the canvas you can configure the module by clicking the white settings icon Once clicked a list of configuration fields for the module will appear Simply fill out these fields and click save Each module needs to be configured via the settings window Settings vary with each module If you use a text block module this will open the standard editor inside the b
13. ite Design ze 3 Custom Links Domains amp Hosting URL http Contact Us Label Add to Menu Pages Most Recent View All Search 4 Packages l Contact Us Terms of Service Privacy Policy Domains amp Hosting l VWelcome to CreativeebTech VWebsite Design Coarmpnittar Danaire 1 This Panel is where the Primary navigation menu generally found at the top of all pages on your website is selected In the above instance the Primary menu is being used 2 This Tabbed area is the Menu selection area for all the Menus on your website Your website can have additional menus to the primary navigation menu You can select the additional footer menus here by clicking on the appropriate Tab 3 This Panel is the actual menu area showing which pages appear in the selected menu 4 This Panel shows all the pages you have created on the site By ticking the page boxes you can add them to the selected menu Adding Items to a Menu SETAE The pages panel allows you to choose which items you can use to add to a menu Hott Recent View AH Search Hehe About Using the menu selection Tab number 2 in the above See image select the menu you wish to modify Currently Child page 2 assigned pages in that menu will appear in section 3 of pe the above image Level 3 Lists Locate the panel entitled Pages on the left hand side Lorem Ipsum i section 4 in the above image Select All Aaa LE Harij Within this panel select the
14. iting feature just below the title box to specify a specific perhaps shorter file name in the URL path OK got a little bit code geeky there The Permalink is the actual address on the internet for your post or page i e as in the example the URL would be http Awww yourdomain co uk site news best blog post The Permalink or online address is automatically created when you enter the Post title and add a category This URL contains your address www yourdomain co uk Followed by the selected category Site News www yourdomain co uk site news followed by the post name Best Blog Post www yourdomain co uk site news best blog post Permalink ftp M simplewpguide com site news bestblog post I OK You would use the permalink editor to give the URL file name a shorter version than the title of the post If your post is titled This is the Best Blog Post Ever the default URL to that page would be something like www domain com site news this is the best blog post ever which is rather long By editing the permalink name you could enter best blog post and the URL would then become www domain com site news best blog post Write your content into the Text Editor area Use the graphic editing icons to format your text Note If you previously wrote your text using a word processor like Microsoft Word you will transfer lots of background MS Word formatting when copying and pasting the text from Word into your CMS editor To avoid this firs
15. lock Re sizing and Rearranging Modules Each module that you add to your canvas can be easily resized by click on the right right side Of the blue module box and dragged it to the left As you change the size of your module box the element on your page that this module represents also changes accordingly A blue module box that has been resized to 50 will result in an element that space half way across your page gliale Adda Column Semple Leyout You can also rearrange modules by dragging and dropping them around the canvas Simply pick them up and place them in the order that you would like them to appear Building Advanced Layouts with Columns eee m Pp arerrrrl Wheres hel Team Iocan tfe mogo Siler tP In addition to modules columns can also be Oel Drm p Tase mesier 0 added to your canvas To add a column simply Sa click the Add a Column button to reveal a list of available columns Drag and drop a column onto your canvas to add it to your page You can then drag new modules inside the columns to nest them Columns are useful for creating advanced grid based layouts
16. n minutes You don t want them to index the post at one URL only to republish it again under another URL because you changed a category meanwhile the old URL will throw a page not found error to the search engine the next time they go to crawl it Add New Category Tags assign tags to your Post Tags Tags are another form of categorization of your posts You may wish to use keywords related to the post in the Tags ac box Separate them by comma s Separate fags with commas add tags here Wordpress writing posts Choose from the most used tags Custom Fields this is also found in the Post editor page however this is an advanced option we wont cover here You likely won t need it Set Featured Image Use this option to Featured Image add a thumbnail image to your post This will also add the small thumbnail image to Set featured image the post descriptions on your news pages Saving and Publishing your Posts As you write your posts the CMS will Er blis begin to autosave your post as a draft Use the Save button to save the Post as Save Draft Preview a draft so you can work on it again at a later date or use the Publish button Status Draft Edit when you are ready to add the post live ne to your website visibility Public Edit Before publishing the post you can use the Preview button to see how it will look first Right click on the Preview button Move to Trash a then open it in
17. ph U Using the Editing Icons For most of these icons you would select highlight the text by clicking and dragging with your mouse the block of text you wish to apply it to then click the icon to apply the formatting Other tools like inserting images requires that you just click on the area of the content you wish to place the image Put your cursor there then click the icon and enter the information in the pop up It s generally pretty basic like using any word processor Experiment with the option and preview your work as you go Below we summarize the main Icons E Bold select an area of text and click the bold icon f Italics select a block of text and click the italic icon Strike Through Adds a line ever yourtext through your text Unordered List creates bullet lists i Ordered Lists instead of bullets it will auto number your list Outdent undo an indent WEI MI Indent indent a section of text to create block quotes Align Left aligns text to the left Align Center centers your text Align Right aligns text to the right Add Hyperlink select the area of text you wish to be the link and click the link icon Add the link URL choose if you want it to open in a new window or the same window Then give the link a Title to describe what it s linking to Remove Hyperlink use this to remove a link l 1 Split Post inserts the lt more gt tag to split yo
18. t change Redo redo your last undo Help This does not offer much help But it does include a list of hotkeys in place of using the icons We have added further icons on a third row in the editor icon block These add more functionality and options to your styling Please experiment with these Hover over the icons for a description We have not listed these here as they are different for each client 4 Creating Posts Enter the CMS Dashboard Admin Panel and Click the Posts tab fi Dashboard Posts Th Medi edia This will open up a list of option within the Post section To write a new blog post click on the Add New link Dashboard wm All Posts d Add New Fai Categories All Post Tags Writing Your Post Below is an image of the Dashboard Editor The Editor is the same for both Posts and Pages 7 Add New Post Best Post Ever Permalink hip lu simplewp guide com site newsibestbhlog post Edit Lpload insert Visual ATMEL ABC BI we i ee MAMIE This is where you would write the best post ever When tinished click on the Publish button and the entire interweb can read what they have always been wanting Yes it will bethe best ever Give the Post a descriptive Title This title will appear at the top of your post and will become the linked text that links to this post in other pages It also becomes the default file name for the post unless you use the Permalink ed
19. t paste your text into a simple text editor like Notepad all Microsoft operating systems include the Notepad program This will strip all the formatting from Word into pure text Then copy and paste from Notepad into CMS Editor You will now need to add your formatting inside the CMS Editor such as bold text underlines paragraphs headlines or bullets using the format icons There is a button in the text editor options for pasting text from MS Word but it is fickle and does not reformat everything Best to just turn it into plain text with Notepad then reformat with the icon editor buttons Post Options Below the text editor and on the right sidebar are a number of features and advanced options for your posts Here you assign your post page categories or tags Below are images and instructions on how to use these features Categories attach your post to a Categories Category You can add new Categories All Categories Most Used here on the fly using the Add New Category link at the bottom of that box site news Categories can be also managed from C Uncategorized the Categories link under the Post tab If Cl we Ugrades you neglect to assign the post to a category it will be assigned to your default category Categories are important so be sure to select the correct category before publishing your post Try to avoid publishing then changing your category and re publishing Search engines index new posts very fast sometimes withi
20. u wish to use This TETEE allows you to upload multiple images at one to create galleries You are using the multi file uploader Problems Try the browser uploader instead From URL _ This option will Maximum upload file size 64MB After a file has been uploaded you can add titles and descriptions not be used From Media Select this tab and your media window will open Find the image you wish to use and click on the show link Note you cannot create 1 click galleries when inserting from your media folder bai Edit Image Title Alternate Text Caption Description Link URL Alignment Size this field File name CVVTGlossylconMasterS6 png File type image png Upload date 03 11 2012 Dimensions 96 x 96 CVWTGlossylconMasterg6 A y Then httpicreativewebtech co ukinew client blake davis website launched cwtglossyico None File URL Attachment Post URL Enter a link URL or click above for presets None Left Center Right Thumbnail Medium Large Full Size 96 x 96 Insert into Post Use as featured image Delete By selecting your image from either of the From Computer or Media options you will be presented with the image informatiion and additional setting options Give the Image a title By default it will use the file name you can change it You may add a caption that will appear below the image _ Description too if you like but not really needed By default the imag
21. ur post This shows just a brief intro on your main blog page with a link to the full post where they can read the rest Spell Check spell checks your text For on the fly spell checking we recommend using FireFox as your web browser It has built in spell checking for any text you enter into forms online Underlines misspelled words in red as you type think some of them should be in the main toolbar but these are newer tools more recently added to the text editor EE a Formatting Use this drop down to select your heading levels No need to use the paragraph one as the editor will make all your basic text into paragraphs automatically U Underline underline text with this icon A Font Colour change colour of a selection of your text i Paste as Plain Text to paste text copied from another source so as to strip all formatting from the copied source Better to paste from Notepad as described in Section2 dl Paste from Word to paste from a word doc amp remove the unneeded formatting codes that Word will try to add Better to paste from Notepad as described in Section2 Remove formatting to remove formatting for a selection of text perhaps cut and pasted from another source Pl Insert Embedded Media insert multi media files such as video clips lt 2 Insert Character for adding special characters not available on your keyboard Things like this AE or Undo undo your las
22. using the text editor how to format text content in the editor working with images to be displayed in posts and pages managing your media library how to manage all your content and submitted user comments and pings managing the navigation menus managing the SEO and finally using the drag and drop ElegantBuilder to create new content Speaking of comments we welcome yours about this Manual Tell us what can be added or even removed to make it more helpful And by all means point out our bad grammar so we can improve our content and make this guide more usable 3 Formatting Content in the CMS Editor This section covers formatting text content in the Post and Pages Editor When writing a post or a page in the text editor you simply type your text The basic paragraph formatting will create itself as you hit the enter key automatically creating a new paragraph for you For more formatting of your text use the graphic editing icons at the top of the text editor as seen in the images below Uploadinsert Sh Visual Mm ll ll i fl HE B JT ae s 3 66 These icons will cover many of the basic formatting functions you would need to use More functions are available by clicking the advanced toolbar icon on the far right also Known as the kitchen sink You can see that icon where the arrow is pointing in the image below Uploadinsert LE Visual B I ae s i 66 LIL Le 4 Hi ll El Le lil Paragra
Download Pdf Manuals
Related Search