CMS Tutorial

TOC

CMS Overview

  • The open-source content management system used to create your website is called Drupal.
  • Depending on the login you were provided you either have full access to the entire functionality of the content management system or a subset of the features available.
  • Being an open-source, community-driven CMS, there is a plethora of help available online. If you are ever in doubt of something feel free to email us (bret@relishstudio.com) and we'll gladly help answer any questions you have.
  • Since every website is different, the following guide just covers general topics about using your CMS. Again, if you have any questions, let us know.

How to Login

  • Go to: /user
  • Enter the username and password you were provided
  • Click the "Log in" button
  • Once logged in, you should have an administrative menu bar at the top of every page. From there you can access the administrative sections of the CMS.
  • Additionally, you can go to: /admin to access the administrative dashboard.
  • While logged in, you should also see "Edit" and "View" Tabs at the top of the main content for most pages. Click the "Edit" tab when you want to edit a page's content.
  • You can use the home icon in the upper left of the black administrative menu to return to your site's home page.

How to View Your Site's Content

  • To view the pages of content in your website browse to /admin/content/node/overview
  • You can optionally filter down the list of content using the drop-down lists and "Refine" button at the top of this content list.

How to Edit Your Site's Content

  • You can edit most any page of the website from the content overview page by clicking the "edit" link to the right of each page.
  • Or, when you're logged in to the CMS and are browsing a page you can click on the "Edit" tab that appears above the main content area of the page; this will take you to the edit screen for that page.
  • Special pages that don't have the "View / Edit" tabs:
    • Certain pages of the website are not editable as described above. These pages are typically a site's home page, or a page that dynamically lists a grouping of pages such as a listing of blog posts or news articles. These pages are assembled in a special way and do not have the typical "View / Edit" tabs at the top of them.
    • Some of these pages or parts of pages are built using blocks which are little pieces of content assembled together into different regions of a web page.
    • Other pages or parts of pages, those that look like lists of links, are typically created from views, which is a specialized module that allows one to aggregate many pieces of content in the CMS and tailor it for viewing.
    • If you need help editing pieces of the website that don't appear with a "View / Edit" tab as regular pages do, please let us know and we can show you how to do so.

How to Create a Page

  • The following describes the general content type of a "page" and what's entailed in creating it. Your CMS installation may have one or many "content types" but below should be applicable to help you get an idea of various options that can be configured for a page of your website.
  • Go to the add content section of your website.
  • Here lists the available content types you have to create content for your website. Choose one that's applicable to the type of content you wish to create.
  • Enter a "Title", which is required. Keep it unique from any other Page. In most cases, this will be displayed in a header font style above the body content, as well as be used to help construct the unique URL for this page.
  • Select the "SiteSection" this page is a part of from the select list (if applicable). This is used to help organize content of the website.
  • If you would like to make this page part of an existing menu, expand the "Menu settings" region.
    • Enter a "Menu link title" that will be displayed to the user.
    • For "Parent Item", choose the parent menu item for where this page will live in the menu hierarchy.
  • The "Body" section will be the main content for the page.
    • Enter and format text as you would in a Word document, or other such word processor.
    • If you would like to insert a link to an external site, highlight the text that'll become the link, and select the "chain" icon. Enter the URL of the link, if it should open in a new window (the "Target"), and an optional "Title" that'll appear when a mouse is hovered over it.
    • If you want to link to an internal page:
      • While logged in, open a new browser window and browse to the page you want to link to.
      • Put your mouse over the "Edit" tab
      • In the bottom part of your browser window, known as the Status Bar, you should see something like "node/23/edit". Make note of the number in that URL.
      • Go back to the "Body" section of the Page you are editing. Highlight the text you want as an internal link, and click the "chain" icon. Then, for the "Link URL" add: internal:node/[id] , where "[id]" would be the number of the page you want to link to.
    • If you would like to insert an image, click the icon that looks like a picture. For "Image URL", enter the path and filename to that image.
      • You can optionally enter an "Image Description" which appears in place of the image for browsers that don't render images, as well as screen readers.
      • "Alignment" can be set to force the image to display to the left, right, or center.
      • You can override the image's default dimensions if you choose
      • To opptionally apply a "Border" to it, enter a number for the border thickness.
      • "Vertical space" and "Horizontal space" adds padding to the image for when text is wrapping around it.
  • The "Input format" section lets you switch between a WYSIWYG (what you see is what you get) editor for the body content, to using pure HTML for creating body content.
  • If you have the "Nodewords" module configured, and permissions to manage them, you notice a "Nodewords" section. This allows you to manage your meta-keywords and meta-description for this page, which helps in search engine optimization of your website.
  • The "Revision information" section allows you create "versions" of a page. For example, if you're editing a page but want to create a backup of what currently exists for this page, you would expand this section, click the "Create new revision" checkbox, and give it "Log message" describing this revision. When the page is saved, you'll notice a new "Revisions" tab, in addition to the "Edit" and "View" tabs at the top of the page.
  • The "File attachments" section is a way you can upload and add files / images / media to your content. To do so, expand that section and:
    • Browse to the file you would like to attach, and then click the "Attach" button. The file will get uploaded and you'll see it listed above the "Attach new file" field. A couple of things to note:
      • To delete the file, simply check the "Delete" checkbox next to the attached file, and when you save the page, it will get deleted.
      • To have the file listed at the bottom of the page in it's own area, leave the "List" checkbox checked. Otherwise, uncheck this value.
      • To link to this file inline in body content, copy the URL below the description field and either create a link using the "chain" icon, or paste the URL into the "Image URL" field in the insert image icon popup.
  • The "URL path settings" field should remain untouched unless you know what you are doing. It's usually configured to create unique, search-engine-friendly URLs based on the "Title" you gave the page.
  • "Authoring information" allows you to change who authored the page as well as the published date and time. Usually you will not need to edit this.
  • "Publishing options" allows you to set set if the page is published or not. If you want to turn a page "off" but not delete it, uncheck the "Published" checkbox. The other two checkboxes are unused in most cases, so you can ignore those.
  • To save your page, scroll to the bottom and click "Save"

A Note on URLs

  • The CMS is typically configured to create automatic, SEO-friendly web addresses based on the title of the page.
  • For example, if you create a page titled "I am the greatest content creator in the universe", the web address of that page would be http://your-domain.com/i-am-greatest-content-creator-universe. And if all is good with the Internet, that page is crawled and indexed by a search engine based on that web address.
  • Now, if you change the title of that page, the web address will change because the CMS is setup to create SEO-friendly URLs based on a page's title. And now the web address the search engine indexed is no longer valid: It becomes a "404 Page Not Found" if a user clicks on it from a search engine results page. Also, any internal links you created from other pages on the website to this page will also stop working if those links were created with the "/i-am-greatest-content-creator-universe" address.
  • You can override this default behavior on a per-page basis by adjusting the "URL path settings" when you're editing a page.
  • For advanced users and those with permission to do so, you can edit and control how URLs are created, and even create / edit your own from within the CMS, typically under the "URL aliases" section of the administrative area of the website. If you'd like further information, let us know.

A Note on External Editing Software Such as MS Word

  • If you use Microsoft Word or another piece of office software to compose content for your website be VERY CAREFUL about transferring it to the CMS, or just don't compose content for your website in an external editor.
  • If you do use an external editor to compose your content and you copy from that external editor (such as MS Word) directly into the CMS WYSIWYG text area, you are copying over not only text, but a lot of additional formatting / styling that most likely will ruin how the web page looks when published. It doesn't matter how pretty it looks in MS Word; the styling the external editor creates that gets carried over via copy-paste into the CMS will ruin the web page.
  • If you must use an external editor to compose your content, please follow the below steps before transfering it to a page in the CMS (following example for MS Windows users):
    • Compose your content in an external editor.
    • Open up a plain-text editor such as "Notepad" ("WordPad" will even create issues).
    • Copy the content from the external editor to Notepad.
    • Copy the plain text from Notepad into the CMS WYSIWYG text area.
    • Re-format the text and re-add all necessary hyperlinks and images.

How to Create / Edit Menus

To add, remove, edit links that appear in various menu sections in the website, please follow the below steps:

  • Depending on your CMS version you can access the menu administrative section from:
  • A couple of things to note:
    • The "Navigation" menu is the menu that contains administrative items. In most cases you will not need to edit this menu.
    • The "Primary links" menu, in most cases, is a site-wide menu that contains the first-tier links for your website and generally are displayed as a horizontal menu list at the top of every page.
    • "Secondary links" menu is usually a site-wide menu containing second-tier links for your website.
    • All other menus are custom, and should be self-explanatory.
  • To add a custom menu, click the "Add Menu" tab.
    • Provide a "Menu name", that will contain only lowercase letters, numbers and hyphens, and must be unique.
    • Give the menu a unique title as a quick reference to what the menu contains.
    • Optionally provide a description of what the menu contains, where it is placed on the site, or any other pertinent information.
    • Click save.
    • To configure where the new menu shows up on the website, please refer to the "How to Create / Manage Blocks" tutorial, and reference the bottom of the page referring to assigning a "block" (which is your new menu) to a region.
  • To edit a specific menu, from the "List menus" tab, select the menu you wish to modify.
    • This screen default to listing all links contained in the menu you selected to edit.
    • The "Enabled" column checkboxes define if the menu link is shown to the user or not.
    • The "Expanded" column checkboxes defined if links defined under the parent menu item should be shown by default or not.
    • The "Operations" column let you edit a specific menu link, or delete it all together.
    • The "crosshair" icon to the far left of each menu item lets you click on, drag, and move menu items around to sort them how you would like.
    • The "Edit menu" tab allows you to modify the menu's title and description.
    • The "Add item" tab allows you to add a new link to the menu
      • The "Path" is either the internal or external link to a page. For external links, enter the full path, such as http://www.google.com.
      • For internal links, follow the below steps
        • Open a new browser window and browse to the page you wish to link to.
        • Put your mouse over the "Edit" tab.
        • In the bottom part of your browser window, known as the Status Bar, you should see something like "node/23/edit". Make note of the number in that URL.
        • Your "Path" would then be: node/[id] , where "[id]" is the number of the page you want to link to.
      • The "Menu link title" is the text displayed to the user in the menu.
      • The optional "Description" is displayed when the mouse hovers over the menu link.
      • You can mark the link as "Enabled" or not. Usually this remains checked.
      • You can optionally mark the link as "Expanded". Only useful if the link has child menu links below it and you want them to show up by default.
      • "Parent item" is where this link resides in the menu hierarchy.
      • "Weight" you can ignore, as you can sort the menu items by dragging the "crosshair" icon described above.
      • Click "Save" and your new menu link has been updated.

How to Create / Edit Blocks

Think of "Blocks" as pieces of content that one can create and assign to certain regions of the website, as well as to only show in certain sections of the website. A "Block" could be a menu, a chunk of HTML, or other pieces of content. A region of the website could be "the left column", or "the footer", or "content top", which would be the top of main body content. A section of the website could be something like "blog", or just the "products" area, or simply the "home page".

To create and manage "Blocks", please follow the steps below:

  • Depending on your CMS version you can access the blocks administrative section from:
  • You will be defaulted to the block "List" tab, and should immediately notice the available "regions" where you can assign and order blocks, plus the "disabled" blocks at the bottom of this listing; those that aren't assigned to any region.
    • All available blocks will be listed, including blocks that have not been assigned to any region; the "Disabled" ones.
  • To add a block, click the "Add Block" tab.
    • Enter a unique, yet descriptive "Block description" which will be displayed on the block isting page.
    • Optionally, enter a "Block title" which will be displayed to the user above the "Block content". Sometimes useful, sometimes not so much.
    • The "Block body" is the custom content you want the block to contain. Follow the steps as you would for creating a Page, but note that a block is usually displayed in a space-limited region of the website. So don't put a 600x600 pixel image into the block body, if the block is going to live in a column that's only 200 pixels wide, for example.
    • In most cases  you can ignore the "User specific visibility settings" section.
    • If you want only anonymous or authenticated users to see the block of content you can optionally check those checkboxs in the "Role specific visibility settings" section. Otherwise you can ignore this section.
    • The "Page specific visibility settings" section, allows you define if the block of content is displayed in only a specific area of the website. If you want the block to appear throughout the whole website, leave this section unchanged. If, for example, you want the block to show up only in the "contact" section of the website you would check the "Show on only the listed pages" radio button and then specify the following in the "Pages" text area:

      contact
      contact/*
    • The click "Save block" to save it.
  • Once you've saved / configured your block, it will show up in the "Disabled" area unless it's already been assigned to a region.
    • To assign it to a region, simply choose that region from the select list
    • Then click the "Save blocks" button at the bottom of the page.
  • To remove a block from a region, just select the "<none>" option from the select list and click the "Save blocks" button at the bottom of the page.