Drupal Lite: Add a Folwell Component to a Page

This article applies to Drupal Lite.

Folwell Components can be added to a page either from the Edit form, or from Layout Builder. They have the same functionality, but slightly different interfaces. To see examples of the different Folwell Components, see the article Folwell Components Examples.

Add a Folwell Component using the Edit form

1. Log in to the site.
2. Create a new page.
    --- OR ---
3. Find the page.
   1. Use the Content menu item in the admin menu.
4. Scroll down to the Folwell Components section.
   
   1. Select one of the components from the drop-down menu.
   2. Enter the necessary information (see below).
5. Select Save at the bottom of the form.

Add a Folwell Component using the Layout Builder

1. Log in to the site.
2. Select Content in the administrative menu at the top of the page.
3. Find the content in the list.
4. Select Edit in the Operations column.
5. Select the Layout tab.
6. Select +Add Block in the region where the Folwell Component will be placed. The Choose a Block sidebar is displayed.
7. Select +Create Custom Block at the top of the sidebar.
8. Select Folwell Component from the list of inline blocks. The Configure Block palette is displayed.
9. Enter a Title for the block.
   1. If you do not want the title to appear above the block, uncheck Display Title
10. Select the Folwell Component from the drop down list. The configure block palette expands showing options for the type of folwell component selected.
    1. Enter the necessary information (see below)
11. Select Add Block. The configure block palette closes and layout builder is displayed.
12. Select Save Layout at the top of the layout builder. Layout builder closes and the page is displayed.

Add Folwell Tabs Wrapper

1. Select Add Folwell Tabs Panel.
2. Enter the optional Tabs Section Title. This will appear above the tabs section.
3. Select the Add Folwell Tabs Panel. The palette expands and displays the Tab Title field and a Add Folwell Tab Content button.
   1. Add the required Tab Title. This will appear on the tab.
   2. Select the Add Folwell Tabs Content. This will be the content of the tab. The palette expands and displays a Text Area and a Add Another Item button.
      • Enter the tab content in the Text Area.
        • Multiple tab contents can be added to the tab panel. Select Add another item or Add Folwell Tab Content. These two buttons both add another text area to the current tab.
4. Select Add Folwell Tabs Panel to add another tab to the layout.
5. When finished, select the Save button.

Add Folwell Accordion

1. Select Add Folwell Accordion. The Folwell Accordion section expands.
2. Select Add Accordion Item. The Accordion Items section expands.
3. Enter an Accordion Item Header.
   1. Best practice is to keep the header text relatively short.
4. Select the type of Accordion Item content to add: Table, Text with optional header, Accordion.
   1. Table
      • Selecting Table will expand the Table section. Enter a Table Title, Table Caption, and the contents of the table.
      • The default table is 5 columns and 5 rows. Select Change number of rows/columns to increase or decrease the number of rows/columns in the table.
   2. Text With Optional Header
      • Selecting text with optional header will expand a new section of the form. Enter the Text Item Header, and Text Item Body.
   3. Accordion
      • Selecting accordion will expand a new section. Enter the necessary information.
      • Note: as of August 2019, a nested Accordion will not display properly on the published page.
5. Select Add Block when finished adding content to the accordion.

Add Folwell Callout

1. Select Add Folwell Callout. The Folwell Callout section expands.
2. Select Add Media (optional). The Add Media module is displayed.
   1. Select an image from the image files on your site, or upload a new image using the Add File at the top of the module.
3. Enter the Callout Text.
4. Select a Callout Style. The callout style is applied to the callout text box
   1. The Horizontal style should always be used with an image.
   2. The Overlay style should always be used with an image.
5. When finished, select the Save button

Add Folwell Image

1. Select Add Folwell Image. The Folwell Image section expands.
2. Use the selector to add an image.
   1. The options are 100%, 50%, 33%, 25%
   2. The percentages are not in relation to the actual size of the image, but of the size of the region on the page. A 33% image will be 1/3 of the region
3.  Select Add Media.
   1. Select or upload an image.
4.  Enter an Image Caption.
   1. The image caption will appear below the image and will be italicized.
5. Enter a Photo Credit.
   1. The photo credit will appear below the image caption

Add Folwell Overlay Slideshow

1. Select Add Folwell Overlay Slideshow. The slideshow section expands.
2. Select Add Media in the slide image section. The Add Media dialog box is displayed.
   1. Select an image from the library, or upload a new image.
   2. Select Insert Selected. The add media box is closed.
3. Enter the Overlay Content.
4. Select the position of the Overlay Content.
5. Select Add Overlay Slide to add another slide to the slideshow.
6. When finished adding slides, select Save.

Add Folwell Slideshow

1. Select Add Folwell Slideshow. The folwell slideshow section expands.
2. Enter a Slideshow Header. This will be displayed above the slideshow. It is optional.
3. Select Add Slide. The slide item section expands.
4. Select Add Media. The add media palette is displayed.
   1. Select an image from the library, or upload a new image.
   2. Select Place at the bottom of the add media palette.
5. Enter the Slide Content (optional). This will be displayed over the image.
6. Enter a Slide Link URL.
7. Enter Link Text. This text will be displayed when the cursor is over the slide.
8. Add additional slides.
9. Select Save when finished.

Add Folwell Link List

1. Select Add Folwell Link List. The link list section expands.
2. Enter a URL and Link Text.
3. Select Add another item to add another link to the list.
4. Select Save when finished.

Add Folwell Transparent Overlay Callout

1. Select Add Folwell Transparent Overlay Callout. The transparent overlay section expands.
2. Select Add Media. The add media palette is displayed.
   1. Select an image from the library, or upload a new image.
   2. Select Place or Insert Selected at the bottom of the add media palette. The media palette is closed and the Folwell configure palette is displayed.
3. Enter the Callout Text.
4. Select the Background Color for the callout box that contains the text.
5. Select the Overlay Placement for the callout box that contains the text.
6. Select Add Block (if adding from the Layout editor)