The list of available Components and Helpers will likely be continually refined, but right now you can see them when you add or edit a Page content type. We’ll get experience with that in this next exercise. The Page type allows you to build special pages when the layout needs to be customized.

Please note: these exercises, to be performed in staging, are based on Tyto's "Drupal Training for Emory University Content Administrators."

Exercise: Add an Page

Go to Content >> Add content
Choose Page from the list of available types. Notice the description “An unstructured content type that provides unique landing pages - e.g., a home page, or marketing event landing page.”
Fill in the form as follows:
1. Title: Your first name followed by the word Page (ie. Rod’s Page)
2. Search Description: Testing out the page builder on our new site.
In the Layout Canvas click the blue + button to open the Components side tray.
1. Double-click to add Feature Section: Hero
2. Double-click to add Basic Components: Heading
3. Double-click to add Basic Components: Video
4. Double click to add Basic Components: Block Quote
5. Drag elements within Layout Canvas to get them in order describedabove.
6. Close the side tray.
Fill in the form as follows:
1. Language: English
2. Image: Skip for now
3. Taxonomy:
  1. Categories: Skip for now
  2. Tags: News
Select a Location (Locations are important for the URL structure)
Click the Save as dropdown and select Published.
Click the blue Save button.
Observe the preview of your new published content.

—--- Pause and enjoy —---
Click the Edit button in the gray toolbar above the Hero and return to the Layout Canvas to customize the Components:
1. Click the Hero ellipses to edit the Element (or double click the box)
  1. In Content tab, edit the following fields:
    1. Heading: Emory University Libraries Launches a New Website
    2. Optional CTA Button Text: Find Out More
  2. In Layout and style tab, edit the following fields:
    1. Background Image: Click on Image to change, select woodruff-hero.jpg from Library and click the Insert selected button.
  3. Change the Hero Height to Short
  4. Change Text and drop zone layout to Text right - Drop zone left
  5. Change Image overlay: Dark overlay
  6. Scroll to bottom and click blue Apply button
2. Click the Heading ellipses to edit the Element
  1. In Content tab, edit the following fields:
  2. - Heading: Learn More About Emory Libraries New Site
  3. Scroll to bottom and click blue Apply button
3. Click the Video ellipses to edit the Element
  1. Click the Browse button, select a video and click Insert Selected. Scroll to bottom and click the blue Apply button.
4. Click the Save button and view your page.
  (Optionally - click and drag the Video block inside the Hero block (watch your instructor))
  
  Example of video within hero, with text and drop zone layout set for Text left - drop zone right:
Add a Helper to the Page
1. Click the Edit button in the tabs.
2. Click the + symbol in the Layout Canvas
3. At the top, click the triangle and select Helpers. Helpers are pre-built combinations of Components that will save you a LOT of time.
4. Double click the Text and card grid (under Card sections).
5. Double click on the resulting Helper to display Layout and Background options.
6. Click Cancel and then click on the expand icon.
7. Each of the Components that make up this Helper are now configurable.
  1. Edit the Heading, Text and Button Components adding any text you choose.
  2. Expand one of the Column Components and edit one of the the Linked Feature Card Component, changing the heading and text.
8. By default on your site, every edit will be recorded as a revision. It is essential that you add a log message before saving each edit. In the right column, find the Revision log message field and type customized Components.
Scroll to the bottom of the form and click Save.
Observe the preview of your customized page.
Click the Revisions button in the editor’s toolbar above the hero image.
Observe the revisions available. You can View and Compare previous revisions of the content.
Observe how much easier it is to manage a previous version when it contains a descriptive log message.

Exercise: Edit a Component

Now that you’ve added a Page and managed Components and Helpers, you can understand how to edit elements on existing Pages.

Click the Edit button on your landing page.
Select a Component to edit.
Make some changes and click apply.
Click Save and view your work.

Exercise: The WYSIWYG Editor

The “What You See Is What You Get” editor in text editor fields is really powerful too.

Like any other WYSIWYG editor, you can make text bold, italic, underlined; left, center, right or fully justified; add internal and external links; ordered and unordered lists; insert media from the media manager; insert block quotes and more.

As well, the website’s style guide is built in, so you can format text with all the approvedelement and inline styles.

Browser not supported