Accessing Your Website

Let’s take a step-by-step tour through your Drupal site and see how the different functions work and how to make your new site your own. 

Logging Into Your Website

Begin by logging into the administration area or the back end of your website. Visit your site’s login page by placing “user” after your domain name.

If for whatever reason you do not remember your username and password, you can recover this information by clicking the Reset your password tab in the login prompt screen.

Thumbnail

Style Guide

The Style Guide is a directory of commonly used elements for the website.

User Management

An Administrator can add, remove, or edit any user on the site by clicking the People link the admin toolbar. On this page the Admin should see a filterable and sortable list of users as well as a button labeled Add User.

Adding a User

  • Click the Add User button.
  • Fill out the login information (all of this can be changed by the user once they have logged into the site).
  • The User will also be able to reset their password on the login page so there is no need to send the password the admin has created to the User.
  • Ensure the User's status is Active
  • To notify the User of their account's creation, check the box labeled Notify user of new account.

To view the menus, go to Structure > Menus. The navigations used for the website are the Utility Navigation and the Main Navigation. The footer navigation menu is located in a Custom Block. View the Custom Block section for information on how to edit the footer. 

Menus

  • To edit a Menu, click on the dot navigation icon. 
  • To add a new Menu Item, click on the Add Link button. 
    • Add a Menu Link Title. This is the text that will display in the Menu for visitors. 
    • Add a Link. To add an internal link, start typing the name of the page in the autocomplete box to narrow the selections. To add an external link, type in the URL. 
    • If the link should open in a new tab, click on the Attributes accordion and change the Target to New Window
    • If the Menu Item should be nested under another page, select the correct parent page under Parent Link

To rearrange Menu Items, click on the horizontal line icon before the Menu Item title and drag the Menu Item to the correct place. To delete or edit Menu Items, click on the dot navigation icon. 

Managing Content

Any content type can be created by hovering over the Content link in the toolbar, hovering over Add Content, and picking the content type you'd like to create.

Each content type can be saved as a draft and previewed before publishing. To save content as a draft, uncheck the Published checkbox. 

Full Page

The Full Page content type comes equipped with a Paragraphs section. Please reference the Paragraphs Guidelines section on this page for any further instruction.

  • Header Options can be used to customize the pages hero section, which includes the Header, Header Sub Header Text, and the Background Image around the content.
  • Featured Content allows you to control what shows up in the featured content section of the page.
  • The Featured Image is used for card/feed displays as well as Social Sharing. Social Driver has provided a default placeholder image which you will see if the field is empty.
  • Add any Tags associated with the post.

Updating PDFs or Links on Pages

To update documents or links on pages, follow the instructions below.

  • Edit the paragraph where the link is located.
  • in the Content box, click on the link to select it and then click on the link icon in the Content toolbar.
  • Click on Open File Browser to upload the updated document or search for the document. Click save to update the link.
  • To start a file download when a document is linked, click on Source and find the anchor (a) tag for the link. Add the following attribute: download="FILE NAME". Example: "<a href="link-goes-here" download="FileName.pdf">Link Text Here</a>".

Publication

  • Add any Body content and a Teaser for card displays and SEO.
  • Give the Publication an associated Program.
  • Add any Topics, Regions, or Authors associated with the post. Multiple items can be entered or selected. To add new items, enter the title of the item in the text box and separate each selection with a comma.
  • The Featured Category checkboxes dictate whether the post should show in the main navigation.
  • The Publishing Date can be modified in the right sidebar
  • The Featured Image is used for card/feed displays as well as Social Sharing. Social Driver has provided a default placeholder image which you will see if the field is empty.
  • Add any Tags associated with the post.

Program

This content type is built similar to the Full Page content type in that it uses Page Builder Options to build the majority of the page.

  • The Header, Sub Header Text, and Background Image fields are used to build the hero section of the front end. 
  • Please reference the paragraphs section of the Owner's Manual to learn more about Page Builder Options.
  • The Featured Content field is used to populate the featured content view on the front end. Add 5 different pieces of content here.
  • Add any Topics or Regions associated with the page. Multiple items can be entered or selected. To add new items, enter the title of the item in the text box and separate each selection with a comma.
  • The Publishing Date can be modified in the right sidebar.
  • The Featured Image is used for card/feed displays as well as Social Sharing. Social Driver has provided a default placeholder image which you will see if the field is empty.
  • Add any Tags associated with the post.

Event

  • Add any Body content and a Teaser for card displays and SEO.
  • The Registration Options section uses the Registration Status field to tell the front end whether or not the Registration URL should be shown, or if Registration is Closed show the Registration Closed Message.
  • Fill out the Event Options portion to give the Event a date and a location. The Event Speakers fields are used to list the speakers in the sidebar of the event page.
  • Give the Event an associated Program.
  • Add any Topics, Regions, or Experts associated with the post. Multiple items can be entered or selected. To add new items, enter the title of the item in the text box and separate each selection with a comma.
  • The Featured Category checkboxes dictate whether the post should show in the main navigation.
  • The Publishing Date can be modified in the sidebar to the right.
  • The Featured Image is used for card/feed displays as well as Social Sharing. Social Driver has provided a default placeholder image which you will see if the field is empty.
  • Add any Tags associated with the post.

Podcast

  • Add a Description.
  • Add the Libsyn ID. This is used to populate the embed code on the front end.
  • Give the Podcast an associated Program.
  • Add any Regions, Related Topics, Issues (?) associated with the post. Multiple items can be entered or selected. To add new items, enter the title of the item in the text box and separate each selection with a comma.
  • The Featured Category checkboxes dictate whether the post should show in the main navigation.
  • The Publishing Date can be modified in the right sidebar.
  • The Featured Image is used for card/feed displays as well as Social Sharing. Social Driver has provided a default placeholder image which you will see if the field is empty.
  • Add any Tags associated with the post.

Video

  • Add any Description content and a Teaser for card displays and SEO.
  • Add the YouTube Video ID which will populate the embed code on the front end.
  • Give the Video an associated Program.
  • Add any Regions, Topics, and Issues (?) associated with the post. Multiple items can be entered or selected. To add new items, enter the title of the item in the text box and separate each selection with a comma.
  • The Featured Category checkboxes dictate whether the post should show in the main navigation.
  • The Publishing Date can be modified in the right sidebar.
  • The Featured Image is used for card/feed displays as well as Social Sharing. Social Driver has provided a default placeholder image which you will see if the field is empty.
  • Add any Tags associated with the post.

Regions

Regions are a taxonomy and can be found by going to Structure->Taxonomy->Region. There you will see the full list of Regions that are used. This list is also used to tag other pieces of content.

  • Header Options can be used to customize the pages hero section, which includes the Header, Header Sub Text, and the Background Image around the content.
  • Featured Content allows you to control what shows up in the featured content section of the Region's page.
  • The Featured Image is used for card/feed displays as well as Social Sharing. Social Driver has provided a default placeholder image which you will see if the field is empty.

Paragraphs

This will allow the user to easily create design “elements” for any page. Elements can be thought of as building blocks - stack and customize them how it fits your needs.

Basic Block

  • The Basic Block Paragraph Type is used for content that doesn't require any functionality.
  • To add a gradient background to the block, enter a list of hex codes separated by a comma (i.e. #4876BD,#5448BD) to define the gradient using the Data gradient bg field.
  • Custom HTML code can be added to the Basic Block. To add custom code, click on the Source button in the WYSIWYG
  • Refer to the Style Guide to view examples of elements that can be utilized in the block.

Image Edge Block

  • This Paragraph Type is used to place an image on one side of a block of content using the Image Position field. 
  • Images can be positioned to the Left or to the Right

Tabs

This Paragraph Type can be used to add a vertical or horizontal tabbed menu to a page.

  • For each Tab, a Title and an Image can be added, which will appear inside of the Tab that the user clicks to view information. The body text of the Tab should be added to the Content section.
  • You can also add more Paragraph Types on a specific Tab Item using the Tab Paragraph field.

Image Bg Block

To add an Image or Gradient background to a block of content use this Paragraph Type.

  • Add a Background Image.

  • Check Content Vertical Center if you'd like the content to be centered vertically within the box.
  • Change the Data Overlay field to adjust how transparent a dark overlay is on the background image.
  • To add a gradient background to the block, enter a list of hex codes separated by a comma (i.e. #4876BD,#5448BD) to define the gradient using the Data gradient bg field.

Fullwidth Block

A Fullwidth Block should be used to add content that needs to break out of it's containers width. This Paragraph Type comes with a Views Reference (see the Views Reference section below for more information) as well. (The Views Reference should only be used by developers and experienced content admin.)

Cover Block

Similar to a Fullwidth Block the Cover Block allows you to add a background image that spans the entire width of the page but leaves the comment within the normal container.

  • Add a Background Image.

  • Check Content Vertical Center if you'd like the content to be centered vertically within the box.
  • Change the Data Overlay field to adjust how transparent a dark overlay is on the background image.
  • To add a gradient background to the block, enter a list of hex codes separated by a comma (i.e. #4876BD,#5448BD) to define the gradient using the Data gradient bg field.

Sliders Block

The Sliders Block is used to add a Slideshow or Carousel to a page and comes equipped with some very useful features.

  • Check whether the Slider should have Display Arrows, Display Pager, or whether the Slider should span the full width of the page or be contained.
  • Add a Title and Content for the Slider. This will appear above any Slider Items.  
  • Slider Item, you can add an Image and Content.
  • To add additional Slider Items, click on the file icon at the bottom of the paragraph. 

Video Bg Block

If the user would like to add a Video as a background to a block of content, the Video Bg Block should be used.

  • In the Youtube Video ID field, enter the Youtube video id here, for example, if the full link is https://www.youtube.com/watch?v=4g4w0kipyNs, the ID will be 4g4w0kipyNs
  • The Youtube Video StartAt field allows the user to enter the time in seconds for the video to start.
  • Add a Background Image as a fallback in case the video doesn't load for the user.
  • Change the Data Overlay field to adjust how transparent a dark overlay is on the background image.
  • Add text to Content. This text will overlay on top of the video background. 

Editing and Removing Paragraphs

To edit or remove paragraphs from a page, click on the file icon located in the paragraph row. A dropdown will appear with Edit and Remove options.

When removing a paragraph, the deleted paragraph will remain on the page until the user confirms removal.

To confirm, click on the file icon again and a dropdown will appear with Confirm Removal and Restore options.

Views Reference

This Paragraph Type can be used to add a view to a page. Views function as feeds to display specific types of content. This should only be used by developers and experienced content administrators. Please contact Social Driver to edit or add new Views to the website. Use this block to add an existing view to a page.

Custom Blocks

Custom blocks are used when the same content needs to be displayed in multiple locations. Please contact Social Driver for assistance in creating additional custom blocks or configuring custom block locations on the site.

Entityqueue

Entityqueues are used to feature content in certain areas of the site. As an example, we will use the Political Analysis Featured Content view at the top of the page. 

  • To see a list of Entityqueues click here
  • Click "Edit Items" of the Policy Analysis Featured Content
  • Here you will see a list of different entities that are currently being featured 
  • Please add or remove or reorder the entities to adjust how the content is viewed on the frontend. 
  • If the frontend looks incorrect, there may be an issue with the view that is using the Entityqueue. If this occurs, please contact a developer.

Redirects

Redirects can be added and removed using the Redirect module. The redirects page can be found by using the Menu Search feature in the admin toolbar, or by using the path "/admin/config/search/redirect" (Ex: https://drupal.socialdriver.com/admin/config/search/redirect). Here you will find all your current redirects.

To add a new one, click "+ add redirect" at the top. Fill out the Path field with the url you want to redirect and fill out the To field with the new url you want that old url to go to. 

SEO

Metatag

The Metatag module allows you to automatically provide structured metadata, aka "meta tags", to a website. In the context of search engine optimization, when people refer to meta tags they are usually referring to the meta description tag and the meta keywords tag that may help improve the rankings and display of a site in search engine results. In addition, the module provides support for meta tags (Open Graph Protocol from Facebook, Twitter Cards from Twitter) that allow control of how content appears when shared on social networks.

  • For more information please watch this tutorial on the basic functionality that metatag gives the user.

Tracking Code Management

The Asset Injector module gives users the ability to add js snippets to specific pages, content type, user roles, and webforms. 

  • Click JS Injector.
  • Click Add JS Injector or Edit one of the Injectors in the list.
  • Give the Injector a Label.
  • Add your code snippet in the required Code field.
  • Make sure Preprocess JS and Load the script in the header of the page are checked.
  • Use the conditions section to add the injector to the desired page, role, content type, theme, or webform.
  • Click Save.