Vertical List

A vertical list is a row of content with a photo on the left or the right of a headline, which can be linked to additional content on other webpage or websites.

Add Vertical List

To create a vertical list, you will need to click on the template icon in the editor toolbar.

the Drupal content editor toolbar with a red rectangle around the templates icon

Choose the "Vertical List" option from the templates. Then, click "Select Vertical List Options."

screenshot showing how to add a vertical list

Select the verticle list style option you want (listing with the photo on the left or listing with the photo on the right). Then click the "Insert Template" button.

screenshot of how to choose a vertical list style

Highlight all of the existing "Listing Title" text and type in your new text. You can also make this a link to link to information on another page.

screenshot of a vertical list example

To add your photo, click on the placeholder image (you will know your image is selected when you see a blue line outlining the placeholder image). Click the Insert Media icon from the WYSIWYG editor bar (outlined in red in the image below). That icon will bring up the media browser popup box that you see when you add new images and will function exactly the same, except you are replacing the existing placeholder image with a new one. Follow the same steps as adding a new image and the old image will be replaced by a new one.

screenshot showing how to update an image in a vertical list

Add List Items

To add additional listing items, right-click below the text section of the vertical list and select "Edit Vertical List."

screenshot showing how to edit the style of a vertical list

Select "Add," then "Vertical List." From here, you can select "Add Item" to add a brand new list item, or select "Clone Item" to clone an existing list item. 

screenshot showing how to add vertical list items

List Styles

There are two styles for lists—photo left and photo right. To change the location of the photo, right-click below the text section of the vertical list and select "Edit Vertical List."

screenshot showing how to edit the style of a vertical list

Select "Styles," then "Vertical List" from the sidebar menu. Select "Photo Left" or "Photo Right" to change the location of the photo and text in your vertical list. Click the "X" at the top of the sidebar menu to exit out of the menu.

screenshot showing how to change the arrangement of vertical lists

Rearrange List Items

To rearrange listing items, right-click directly below the text section of the vertical list and select "Edit Vertical List."

screenshot showing how to edit the style of a vertical list

Select "Move Items" from the sidebar menu. Click on the item you want to move and then click on the item you want to move it to. For keyboard users, press tab to highlight the item you want to move, press the left or right key to shift it over, and press enter again to drop it into place.

screenshot showing how to rearrange list items

Delete List Items

To remove a listing item, right-click directly below the text section of the vertical list and select "Edit Vertical List."

screenshot showing how to edit the style of a vertical list

From the sidebar menu, click "Delete Items." Click on the items you want to delete (the item will appear red when you hover over it). For keyboard users, press tab to highlight the item you want to delete and press enter to delete it.

screenshot showing how to delete a vertical list item

Delete List

To remove the entire list, right-click directly below the text section of the vertical list and select "Edit Vertical List."

screenshot showing how to edit the style of a vertical list

Select "Delete All" from the sidebar menu then select "Vertical List." Click the "Delete All" button and the entire listing will be deleted.

screenshot showing how to delete an entire vertical list

Add a Space Before or After a Vertical List

To add a space or start a new paragraph before or after your vertical list, right-click directly below the text section of the vertical list and select "Edit Vertical List."

screenshot showing how to edit the style of a vertical list

From the sidebar menu, click the "Insert Paragraph" option then click "Vertical List." Click "Insert Para Before" if you want to insert a space or new paragraph above the vertical list. Click "Insert Para After" if you want to insert a space or new paragraph below the vertical list.

screenshot showing how to insert a screenshot after a vertical list