Creating Custom Blocks

Custom Blocks provide you with a flexible content feature that can be used for a variety of purposes. Once created, these blocks can then be added to any of the landing pages you have on your Stacks site. This article will explain to process to create custom blocks and how to add them to your homepage or any other landing page.

Custom blocks can be created by users with the Contributor, Editor, Moderator, or Administrator role; however, only Moderators and Administrators can publish custom blocks to your Stacks site.

Creating Custom Blocks

1. From the Dashboard, click the Custom Blocks tile
2. Click Add custom block
   
   1. Title - enter a title for the block
      1. Note, this title can be made visible to your users/patrons when adding the block to a landing page
   2. Lanugage -  if applicable, select the appropriate Language
   3. JavaScript code - add JS code here if you are adding a widget or other content via javascript for the block
      1. Be sure to only use JS code from trusted sources
   4. Body - enter the content you wish to display in the block, this could include text, images, videos, and more
      1. See the WYSIWYG editor article for more information on formatting options and field functionality  
3. Review and adjust any settings in the Publishing workflow if needed
4. Click Save

Adding a Custom Block to a Landing Page

To add a custom block to a landing page:

1. Navigate to the page you wish to add the block to
2. Click the Layout tab just below the header
3. If needed, add a new section to the landing page, otherwise go to step 4
   1. To add a new section
      1. Click + Add section
         1. A window will open with 3 layout options
            1. 1 column, the section will be the full width of the content area
            2. 2 column, the section will be split into two columns both 50% of the content area
            3. 3 column, the section will be split into three columns, with an additional option to choose between either a 33%/34%/33% split OR a 25%/50%/25% split, select the appropriate option
         2. Administrative label, once the column configuration is selected, you will have the option to add this label
            1. This will only be visible to administrators when in this layout builder view and may be helpful in identifying the type of content being added to the section, especially if you have multiple administrators who manage the site
         3. Click Add Section
4. In the desired section, click + Add block
   1. A window will open on the right listing the content that can be added to the section
      1. Content will be organized by feature type, scroll to the Custom Block section or filter by the block's name in the filter field at the top
   2. Once found, click the block's Title
      1. A window will open displaying the current Heading
         1. By default this will be the Title value entered when the custom block was created, you have 3 options
            1. Leave the heading as is, by default this will be visible to your users/patrons
            2. Change the heading name, click into the field and type in a new heading name
            3. Hide the heading, if you do not wish to show any heading, click the eyeball icon to the right
               1. The field (and helper text field below) will then be "greyed-out" and cannot be edited
         2. Helper Text, if applicable, enter a short description or instructions to provide guidance to the user/patron
            1. This will appear as an 'i' icon to the right of the heading, users/patrons can click or hover over the icon to view the helper text
         3. Subheading, if applicable, enter a value to display as a subheading
            1. Sub-Title URL, if applicable, enter the full URL to the page you wish to direct users/patrons to when they click the displayed subheading
            2. Open in new tab/window, if adding a Sub-Title URL, check this box to open that page in a new browser tab/window
      2. Click Add Block
5. Scroll to the top of the page, then click Save Layout to save your changes