...
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:
- Title: Your first name followed by the word Page (ie. Rod’s Page)
- 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.
- Double-click to add Feature Section: Hero
- Double-click to add Basic Components: Heading
- Double-click to add Basic Components: Video
- Double click to add Basic Components: Block Quote
- Drag elements within Layout Canvas to get them in order describedabove.
- Close the side tray.
- Fill in the form as follows:
- Language: English
- Image: Skip for now
- Taxonomy:
- Categories: Skip for now
- 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:
- Click the Hero ellipses to edit the Element (or double click the box)
- In Content tab, edit the following fields:
- Heading: Emory University Libraries Launches a New Website
- Optional CTA Button Text: Find Out More
- In Layout and style tab, edit the following fields:
- Background Image: Click on Image to change, select woodruff-hero.jpg from Library and click the Insert selected button.
- Change the Hero Height to Short
- Change Text and drop zone layout to Text right - Drop zone left
- Change Image overlay: Dark overlay
- Scroll to bottom and click blue Apply button
- In Content tab, edit the following fields:
- Click the Heading ellipses to edit the Element
- In Content tab, edit the following fields:
- - Heading: Learn More About Emory Libraries New Site
- Scroll to bottom and click blue Apply button
- Click the Video ellipses to edit the Element
- Click the Browse button, select a video and click Insert Selected. Scroll to bottom and click the blue Apply button.
- Click the Save button and view your page.
(Optionally - click and drag the Video block inside the Hero block (watch yourinstructor)
- Click the Hero ellipses to edit the Element (or double click the box)
- Add a Helper to the Page
- Click the Edit button in the tabs.
- Click the + symbol in the Layout Canvas
- At the top, click the triangle and select Helpers. Helpers are pre-built combinations of Components that will save you a LOT of time.
- Double click the Text and card grid (under Card sections).
- Double click on the resulting Helper to display Layout and Background options.
- Click Cancel and then click on the expand icon.
- Each of the Components that make up this Helper are now configurable.
- Edit the Heading, Text and Button Components adding any text you choose.
- Expand one of the Column Components and edit one of the the Linked Feature Card Component, changing the heading and text.
- 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.
...