Web Publishing

3. Basic page

  1. Home
  2. Drupal 7 fundamentals

Basic pages and structured pages will form the majority of general content pages on your site.

The basic page offers the simplest type of page and is suitable for:

  • a single topic
  • content that can be displayed to the user in a single view.

    Learning outcomes

    At the end of the topic, you will be able to:

    1. Create a basic page
    2. Insert content
    3. Insert links
    4. Insert in-line images
    5. Apply best practice to edit content
    6. Use the WYSIWYG editor
    7. Publish content.

    Essential guides

    Check the guides before completing each task:

    • Basic pages
    • Headings – learn how to write good headings and ensure you follow the correct hierarchy
    • Links – how to write good link text, and the difference between relative and absolute links

    Basic page guide

    In the administration menu, go to Content > Add content > Basic page.

    Basic page menu selection

    The edit screen displays.

    1. Title – page title.
    2. Summary – optional. Displays in teaser and card views where the page is referenced in a list. Doesn't appear on the page.
    3. Body – the main content on the page.

    Basic page fields 1 to 3

    1. Teaser image – Optional. Displays in card and teaser views. Advice on images.
    2. Hero image – Optional. Replaces the default page header with a hero banner header.

    Basic page image fields

    1. Aside – Optional. Used for content that is tangentially related to the Body content, such reminders or contact details. Click Add new paragraph to create an Aside.

    Basic page aside

    The Aside field displays.

    aside rich-text paragraph

    1. Related content – Optional. Allows other pages on the site to be referenced in a short list. The relationship is manually created, not inferred from any data such as tags. Click Add new paragraph to create a related content group.

    click add new paragraph

    The Related Content fields display.

    Title – Optional. Heading to label the related pages. e.g. "Associated research", or "See also".

    Related content – Reference to other pages on the site. Type the first few letters of a page title to look-up the desired page. Multiple related pages can be added.

    related content

    1. Tags – Click the dropdown arrow to select a tag from the list of vocabularies and their terms to categorise the content.

    Basic page tags

    1. Menu Settings  – Tick provide a menu link to display the menu settings options. Adding a page to the menu ensures it will appear in the site map.

    Tick provide a menu link

    Enter the menu settings fields.

    Menu link title – The menu link title is automatically populated from the basic page title. The menu link title can be edited.

    Description – Content entered in the description field will be displayed when hovering the cursor over the menu link.

    Parent item – Selection of a parent item ensures improved website navigation by displaying a breadcrumb trail at the top of the page.

    Weight – Select a weight to determine the order of the menu link in the Parent Item. Menu links with smaller weights are displayed before links with larger weights.  Tip: easier to drag the links into position to change the order. 

    Basic page menu

    1. URL path settings – a friendly URL is generated automatically if the tick box remains ticked.

    URL path settings

    1. Revision information – if 'create new revision' remains ticked, a new version of the basic page is saved each time after it is published. The versions are accessible from the revisions tab.

    revision information

    1. Authoring information – The information of the author is recorded. After the basic page is saved, the "Authored on" field is updated.

    authoring information

    1. Publishing options – Click the tab Publishing options to finalise the publishing settings.
      To publish – The published field is automatically ticked. Keep it ticked to publish.
       To create a draft – untick published to save as a draft.

    publishing options

    1. Save – Click Save to update the basic page. 

    Finding basic pages in your site

    To view unpublished and published pages in your sandbox site, click content in the administration menu.

    list of content in the sandbox

    Tasks to complete

    For the basic page topic, there are 3 tasks, each of which require the following:

    1. Create a basic page.
    2. Complete the instructions for each basic page
    3. Publish the basic page

    After completing each basic page, there is a review stage that consists of the following:

    1. Compare your published basic page with the Review associated with the task. 
    2. Review Training page 2 on your training website where a view has been inserted to display basic pages that have the tag, sample basic page, added.
    1. Task: format content
    2. Review: format content
    3. Task: insert links
    1. Review: insert links
    2. Task: add in-line images
    3. Review: in-line images

    4. Review: insert links

    Compare your basic page with the following:

    1. Published basic page
    2. Display of information in a component on Training page 2 - view: vertical content list:teaser

    Published basic page

    The numbered information that follows refers to the image below.

    1. The page title is styled as heading 1 (H1) and the headings in the body field can range from H2 to H6.
    2. Breadcrumb - the breadcrumb appears because the menu link was added to the basic page via the Menu options when creating the basic page.
    3. Page tabs
    • View - displays the published page
    • Edit - editable version of the page.
    • Revisions - list of saved versions of the page at different times.

    Links 

    • Descriptive link text that provides context for the link is critical.  Individuals who use screen readers may scan links by tabbing from link to link and therefore the link text must make sense out of context.
    • The default behaviour when a user clicks a link is that the link location opens in the same page. The benefit of maintaining this default behaviour is that:
      • if the link opens in the same page, the functionality of the back button is maintained and the user is able to return to their original location by clicking back.
      • the user is able to decide whether to open the link in a new tab or new window when they right-click a link. If you change the default behaviour forcing the link to open in a new tab, the user loses the choice about where the link will open.
    1. Link to an external website. When inserting external links, insert the class: link--external
      See the video, Add external link class.
    2. Link to a document
    3. Link to an internal path
    4. Button linking to an online accessibility checklist
    5. Link to an email message.
    6. Menu links to sibling and children pages.
    7. Related content -  hyperlinks to internal content. 

    completed basic page

    Component display on Training page 2- view: vertical content list: teaser

    Purpose:  to show you what happens if you tag your content. This view has been configured to display the teasers of basic pages where the tag - sample basic page has been added.

    If you add a teaser image to your basic page, the teaser image will be displayed along with the hyperlinked title and summary for your basic page.

    number 1The basic page, World wide web consortium, was published.

    • the teaser for the basic page appears in the vertical content list: teaser because the tag - sample basic page was added to the basic page.
    • image displays because a teaser image was added to the basic page. 

    teaser

    Avoid using Microsoft Edge or Internet Explorer for Drupal training.

    Images and documents for tasks