Drupal 8 User Guide

DRUPAL 8 U S E R G U I D E ETV Endowment Etvendowment.org Copyright 2020 Cyberwoven, LLC, all rights reserved. All information contained within is confidential. LOGGING IN To log into Drupal, visit http://www.etvendowment.org/user and enter your Username and Password. Once logged in, click Manage in the upper left corner. ADDING AND EDITING CONTENT To add new content to the website, navigate to the Content Menu and click Add Content. This will display a list of all the manageable content types on your website. Details about creating each type of content are included below. For all content types: • If an image field has a required alt-text field, fill it in with descriptive text (do not use the file name). If the alt-text is not required, fill in descriptive text if the image contributes to fully understanding the content. If the image is purely decorative, leave the alt-text field blank. • Clicking Save will immediately publish the content to the live site. To save content without publishing, navigate to the Publishing Options tab, unselect the Published checkbox, and then click Save. The Kitchen Sink page is a hidden page that shows all the different layers and offers a visual explanation of how they can be used. • Test site Kitchen Sink page: https://www.etvendowment.org.test.cyberwoven.net/kitchen-sink • Live site Kitchen Sink page: https://www.etvendowment.org/kitchen-sink View a specific content type: • Page • Event • Article • Webform • Layers 1 Adding a Page On the Create Page screen: • Enter the page Title. This will display on the page and determine the page’s URL path. • Select Page Header type: o Extended Titlebar: Select your background image. Must be at least 1600p x 600p Open the Crop Image dropdown and move the crop around to select the portion of the image you want to show. Note: because the title and description text show bottom-left aligned, it’s best to make sure the focus of your image is in the center or on the righthand side. Enter description text if desired. 2 o Main Marketing Area Header The Main Marketing Area Header, or MMA, is used on the homepage of the site and landing pages. Enter your Headline Select your background image. Must be at least 1620p x 720p Open the Crop Image dropdown and move the crop around to select the portion of the image you want to show. Create link buttons (up to 2) if desired. Once the header is complete, click on the Content Layers tab and add the desired layers to your page. Learn how to enter layer content on page 8. To place this page within one of the existing menu structures, navigate to the Menu Settings 3 section and select the Provide a Menu Link checkbox. The Menu Link Title will automatically populate with the page Title. Next, select the parent item. 4 Adding an Event On the Create Event screen: • Enter the Event Title. This will display as the page title. • Select the event date and start time. • Enter an event Location. • Select the appropriate Event Type. If you select Virtual Town Hall, that will display as a subhead to the Event Title. If you don’t, then this text will not show. Layer view: • Expand the Edit summary area next to Body. This is for the short description that will display in the Events list view. • Enter the Body. This will display in the Event detail view. • Upload a featured Image and add a video link. Please note that the image must be 900 x 600 pixels. The image is required and will show with a play button on top if a video link is also added. The image will display in the Events list and detail views. When clicked on either the Events list and detail view, the video will open and autoplay in a lightbox. Adding an Article Layer view: 5 On the Create Article screen: • Enter the news article Title. This will display as the page title. • Enter the author’s name, if desired. • Select the date. • On the Article Content tab, expand the Edit summary area next to Body. This will display in the Article list view. If you do not add a Summary, the Article list view will display a cropped version of the detailed article text. • Enter the Body. This will display on the Article detail view. • On the Images & Media tab, upload a featured Image and add a video link. Please note that the image must be 900 x 600 pixels. The image is required and will show with a play button on top if a video link is also added. The image will display in the Article list and detail views. When clicked on either the Article list and detail view, the video will open and autoplay in a lightbox. Adding a Webform (this is located under Structure instead of Content) 6 After clicking Add Webform, enter the Title and an administrative description for your Webform. On the next screen, add the desired form elements. Once selected, you can enter each element’s Title (descriptive label when displaying the element, ex: First Name), as well as optional details like Description and Default Value. Under Form Validation, choose to make the field required (if desired). Click Save Component. Repeat for remaining form fields. • Radio buttons allow a user to make a single selection from a list of options. To add radio buttons to a webform, choose Select Options for the field Type and click Add. On the Edit Component page, expand the Options section and fill in the Values. Click Save Component. • A checkbox list allows a user to make multiple selections from a list of options. To add a checkbox list to a webform, choose Select Options for the field Type and click Add. On the Edit Component page, expand the Options section and fill in the Values. Select the Multiple checkbox under Option Settings. Click Save Component. o To display a single checkbox option, enter just one Value. • A select list allows a user to make a selection from a list of options. To add a select list to a webform, choose Select Options for the field Type and click Add. On the Edit Component page, expand the Options section and fill in the Values. In the Display section, check the Listbox option. Click Save Component. o To enable multiple selections, select the Multiple checkbox under Option Settings. When creating a webform, avoid using fields that have the same label. This can be confusing to someone using a screen reader. If fields with the same label must be used, create logical groupings using a fieldset that has a descriptive name. For example: 7 If you’d like to have form submission notifications automatically emailed, navigate to the Emails subtab, enter the email address that should receive the notifications, and click Add. On the Edit E-mail Settings screen, add any additional customizations to the notification email and click Save e-mail settings. To view webform submission data, click the Structure link in the top toolbar and select the Webforms tab. Under Operations, click Submissions to view all, Download, or Clear submission data. Adding Layers Layers are used throughout the website to provide consistent, flexible content structures. On some pages, layers are included by default and on others content managers can select which layers they want to use. To add a new layer to a page, find the Layers dropdown field and choose which layer you’d like to add. Each layer and its options are detailed below. 8 WYSIWYG Layer view: • Enter content using 1 or 2 WYSIWYG. • If 2 WYSIWYGs are used: o Select a Layout to customize how the content is split across columns o Select the “Vertically center content” checkbox to vertically align the content on both sides. o Cyberwoven recommends distributing content as equally as possible across columns when possible. Accordion Layer view: 9 • Enter Headline and Description, depending on what best introduces the content. • On the Accordion Items tab, add Accordion Item Headline and Body text. • Click “Add Accordion Item” to continue adding items. • On the Layer Settings tab, select Layer Background Color. Block Layer view: • Select the preset Layer Block that you want to show on the page. 10 Call to Action Layer view: • Enter Headline and text, depending on what best introduces the content. • Add URL and Link text for up to two Link Buttons. • Select a Layer Color Scheme. Icon Layer view: • Enter Headline and Description, depending on what best introduces the content. • Select Icon for Icon Layer Item and enter Headline and Text. • Click “Add Icon Layer Item” button to continue adding items. 11 Launchpad Layer view: • Enter Headline and Description, depending on what best introduces the content. • Select Launchpad Icon and enter Headline, Text and Launchpad Link. • Click “Add Launchpad” button to continue adding Launchpads. Link List Layer view: • Enter Headline and Description, depending on what best introduces the content. • Expand Link List Items section and add Link List Files. 12 Membership Levels Layer view: • Enter Headline, Description and Link Button, depending on what best introduces the content. • On the Membership Levels tab, enter Membership Levels with Level Name, Contribution amount, and Description, if desired. Number Grid Layer view: • Enter Headline and Description, based on what best introduces the content. • Enter Number Grid items with Headline, Description and Link, if desired. 13 Spotlight Layer view: Content right, no eyebrow, image, no background color, no background image. • Enter eyebrow text, headline, body text, and a link, depending on what best supports the content.

Load more