Basic (Landing) Pages and Blocks

Introduction

Basic Pages are the most general and versatile content type. Other content types are mostly used to support Basic Pages. Basic Pages can look a wide variety of ways as shown in the following examples: 

  1. Physics Support uses nearly all of the blocks and display a wide variety of content. 

  1. The Leadership page uses almost exclusively the Leadership block which give the page a “directory” look. 

  1. The Detector page uses only a Hero Image and Description giving a straightforward and look to the page. 

  1. The home page is technically a Basic Page, but there are a few additional blocks included that are not typically used when making a standard Basic Page. 

Basic Pages are built from 10 blocks which we will walk through and give basic information, usage, and examples for. A block is a smaller bundle of information that builds up the more complex content item. The 10 blocks used on Basic Pages are the following: 

  1. Hero Image 

  1. Description (Body) 

  1. Cards 

  1. Links (Resources) 

  1. Button Cards (Applications) 

  1. Events 

  1. Alternating Content (Content) 

  1. Profiles (Leadership) 

  1. Form 

  1. Side Menu 

In addition to the 10 blocks, a title is required to create a Basic Page and it is not considered a block. 

While Basic Page can be used for practically anything, there are two main uses to be aware of: 

  1. General content pages/articles – This is the most general use of the Basic Page. These tend to be focused on one topic and typically will not use too many of the blocks. At a minimum they should include a hero image, a title, and some content. The “Detector” page is an example of a general content page.  

  1. Division page – This is where all information pertaining to a group or division within the collaboration should be contained. “Physics Support” is an example of this type of page. At a minimum, division pages should include a hero image, a title, a description, leadership in the Profiles block, and a contact us form. 

Once you know the purpose of Basic Page you are creating, you can now consider which blocks you would like to use. 

 

How to populate a Basic (Landing) Page content item with content

 

Title 

The title is the only required piece of information in creating a Basic Page. It also is used to autogenerate the Basic Page’s URL which will be important for navigation and ensuring other pages can link to the page created (however this can be overwritten if necessary). 

 

Hero Image 

The hero image is the image displayed as a banner at the top of the Basic Page. While all image sizes and dimensions can be used, it is best to use an image that is about 1350x260 to ensure a high enough resolution and that it is properly cropped. If an image is uploaded as a hero image and the cropping is not how you envisioned it, simply reupload a cropped version of the image to fix the problem. 

 

Body (description) 

The body of the page is a text box that is found under the title of the Basic Page. Text boxes in Drupal can implement basic HTML so the text can be anything and include anything an HTML text can include (media, documents, tables, etc.). Despite this, there is plenty of functionality that can be achieved by using the tool bar at the top of the box: hyperlinks, multiple header types, bold and italics, and even some media. Typically, this block is used to give a broad overview of what is the purpose of the page. 

The body is also one of the most flexible blocks we can use. Typically, if you wish to upload media that doesn’t clearly fit in another block, it most likely fits in the body. For example, documents, audio, and video are rarely used in other blocks, and therefore the body is the ideal location for these types of media. Media can be added through the toolbar within the textbox. To expand the toolbox for more options (i.e to add tables, horizontal lines, see more text options, etc.), switch the text format to "Full HTML" at the bottom of the text box.

As we can see on the “Detector” page, there are cases where the body block is all you need for general Basic pages. Bodies are simple and make it easy to relay information in a straightforward way. They can be used in practically any setting and are ideal for “About” and general content pages. They are not as dynamic as some other blocks like “Cards” and “Alternating Content” but that can be an asset when providing context for other blocks or relaying information simply and efficiently. 

 

Cards 

An individual card has four (not always necessary) components: title, image, text, and link. They are small blocks and not ideal for relaying large amounts of information. Instead, they are great for teasing information and leading visitors to other pages (especially when a link is provided – In that case, a visitor just clicks the card and will be redirected elsewhere). Multiple cards can be put together in a single Cards block. 

It is recommended to keep text in cards to about 125-150 characters. The goal of this text is to provide visitors with enough context to decide if they wish to interact with the card (either by clicking the card if a link is provided or simply noting the information in the card). This small size is ideal for many uses: announcements, accomplishments, highlighting new programs and opportunities, and practically anything else. It can also act as a more dynamic link, which can be more eye catching then just a URL. Cards are very prominent on the Basic Page, placed just beneath the body, making them ideal for highlighting quick information relevant to visitors. Cards also can feel slightly disjoint from the Basic Page. This makes them also great for expressing information that will either be frequently updated or serve a distinct purpose unique from any other block on the page. 

The “Get Involved” section of “Physics Support” is an example of the Cards block and they highlight opportunities for students to participate in activities with A.T.L.A.S. This is a great example of utilizing the disjoint nature of the Cards block: While the “Get Involved” section is related to Physics Support, it has a unique function that differs from any other block of content on the page. It feels natural for this information to be included in cards. 

 

Links (Resources)

Links are a block containing URLs that may also include a link text. There are no images or description texts. They are easy to find and navigate but do not call attention to themselves. This makes the Links block ideal for resources as resources need to be easily found but shouldn’t distract from the content of the page. In particular, if a link only provides new information as opposed to urging the visitor to take action, it is an ideal link for this block. Because links do not contain much information, be sure to give the Links block a clear title (i.e. “Resources”, “Related Pages”, “Other Work”, etc.) so the visitor knows the purpose of the links. 

An example of a Links block is the “Resources” on the “High Luminosity” page. 

 

Button Cards (Applications)

A button card has a title, content, a possible deadline, and a button that will open a URL to a different page. Links to elections, nominations, and applications are ideal for this block because it gives the visitor context for the site they are about to visit. Besides providing context, this block has more weight to it than a link and therefore commands more attention. This makes it ideal for links that urge visitors to take some sort of action such as applying, nominating, or voting. The deadline feature allows you to emphasize when the action should be completed by. 

The “Open Applications” section of Physics support provides an example of this block. 

 

Events 

The Events block allows events relevant to the Basic Page to be naturally included. This block utilizes the Events content type and therefore an event can only be included in this block if it exists as a content item (see Events content type). This allows information about the Event to only be inputted once and then used on multiple Basic Pages if necessary. An event is added to this block simply by typing the name of the event. 

The “Events/Meetings” section of “Physics Support” is an example of this block. 

 

Alternating Content (Content)

Alternating content blocks are built from a title, image, text, and link and can be quite large. A typical alternating content block can have about 600 characters of text and the pictures are larger than the thumbnails used in other blocks. Alternating content blocks are very easy to recognize on a page as the images and texts of the blocks alternate from one side of the page from to the other. Besides the body, this is where the bulk of the text of a Basic Page will be found. Alternating content blocks are great for elaborating on the body. If the body is mostly used as a general overview, each tile in the Alternating Content block can expand on a different element from the body.  

Content blocks can be found on the “Software & Computing” page with titles like “Data Processing”, “Storage”, and “Trigger Algorithm.” 

 

Profiles (Leadership)

The Profiles block allows for Profile content items to easily be incorporated into Basic Pages (see Profiles content type). By simply typing in the name of the profile, a person’s name, picture, title, institution, and email can be included on the Basic Page. It is typically used to show the leadership of a certain division of the organization. The Profiles block is divided into “Groups” where each group functions like a container for multiple profiles. For example, if you want to include both faculty and student information on a Basic Page but want to make sure faculty and students are clearly divided, you can create a Group titled “Faculty” and only include faculty in it. Then you can create a Group titled “Students” for students. Everyone will still be featured on the page, but the differentiation between faculty and students is clear. 

The “Leadership” section of “Physics Support” is an example of this block in relation to traditional Basic Page. On the other hand, the “Leadership” page uses the Profiles block almost exclusively which makes the page look more like a Listing Page than a Basic Page, despite being a Basic Page. This shows just how flexible the Basic Page content type is. 

 

Form 

A Form is the bottom-most block on the Basic Page if it is included. It allows visitors to directly send information into the website. The most common use for a Form block is to include a “Contact Us” feature. You can add a webform by typing the name of it in the “Form” section of content item editor. You will also have options to make the webform Open, Closed, or Scheduled. You can also provide default responses in the fields of the webform. 

 

To see which webforms can be used in the Form block, click “Structure” in the administration menu and then click “Webforms.” This will lead you to a table containing all active webforms on the site. You can see responses to the webforms by clicking the number in the “Results” column. If you would like to add a new webform, there will be an “Add Webform” button at the top of this page. There is also a video you can watch explaining how to put together a webform on this page. 

At the bottom of “Physics Support” is a “Contact Physics Support” webform in the Form block. 

 

Side Menu 

If there are a group of pages on the website that are related, are in the same category, exist in a main navigation menu together, or for any reason should have easy access between themselves, consider adding a Side Menu to the page that links to the other pages.  

 

It is best practice to ensure that every page in a side menu has an identical side menu to the other pages in the side menu. This means ensuring that each side menu of each page on the menu has the same URLs, link text, and order as every other side menu of every other page. This also means including the URL of the page with the side menu in it’s own side menu. If the pages are all part of the same menu in the main navigation, be sure that the side menu matches the main navigation menu (see the pages in the Activities -> Operations menu). Note: Just because pages exist in the same navigation menu, does not mean they necessarily need a side menu; use your discretion. 

 

See the pages in the Activities -> Operations menu (Physics Support, Software & Computing, Maintenance & Operations pages) for Side Menus that follow the best practices. 

 

Container Blocks and Ordering 

Many of the blocks listed can be thought of as containers holding smaller pieces of information. These blocks include: Cards, Links, Button Cards, Events, Alternating Content, Profiles, and the Side Menu. Each of these blocks contain smaller sub-blocks such as a singular card, link, button card, event, alternating content tile, or profile/profile group. There are two ways to edit the order of these sub-blocks in the container blocks: 

  1. When row weights are hidden, there will be an icon next to each sub-block that looks like four perpendicular arrows. Simply click and hold the icon and you will be able to drag the icon and sub-block to any position. 

  1. When row weights are shown, you can use the row weights to manually change the order of the sub-blocks; lower weights will appear earlier within the block. Weights can even be negative if necessary. 

There is a button on the top right of each of these blocks on the editing form that says either “Hide row weights” or “Show row weights.” This is used to toggle between methodologies.