Custom blocks are pieces of content that are created independently of a page. Think of them as building block components, or elements, that enhance the pages of a website. Once created, custom blocks will reside in the Custom Block Library. A single custom block can be placed on multiple pages. All custom blocks can be edited after creation. When an editor of the site updates a custom block, it updates on all pages the block is placed.
Why are custom blocks created separately from a page?
These blocks are typically more dynamic in function and have a unique design. A simple editing toolbar (WYSIWYG editor) would not cover the complexity of adding things like accordions or tabs. Many of these blocks have multiple form fields or the ability to add additional items that then transform using code into a nice "block" of content. Keeping these components as blocks allows editors to reuse this content on multiple pages and give them the ability to move the content around on a basic page.
Where do I find my custom blocks?
All custom blocks are located in a site's Custom Block Library. Editors and builders can navigate to Structure -> Block Layout -> Custom Block Library. This is where blocks can be edited and new custom blocks can be created.
How do I add a custom block to a page?
On a Basic Page, within the Layout tab, clicking any of the "Add block" options will reveal a sidebar. This sidebar will list all custom blocks by their block description name. Additionally, builders have permissions to utilize Block Layout (under Structure) to add blocks to multiple pages at once and in different regions of the site.
Creating Custom Blocks
To create a custom block, editors will use the admin toolbar to navigate to the custom block library. Once the custom block is created, it will be located in the site's Custom Block Library and will be available to place on any page.
- Navigate to Structure -> Block Layout -> Custom block library
- Click on the "Add custom block" button
- Select the custom block type you would like to create
*When hovering over Block Layout, editors may also see the option to "Add custom block" within the dropdown. This should only be utilized by Site Builders if the block that will be created needs to reside on many pages and will not be in the primary content area of the site. For more information please see Using the Block Layout.
Custom Block Types
For more information on each Custom Block type available, and exactly how to create one, select the Custom Block you are interested in creating from the list below.
Accordions are expanders and will open to show additional content. Accordions prevent pages from getting too lengthy by dividing long sections of information. Instead of scrolling through all the content, viewers can click to open a specific section of information.
Article previews, or teasers, are blocks that will display specific articles in a grid or snippet list view. There are a variety of display types including a slideshow and minimalist view.
The Basic Block provides a space for content using a WYSIWYG editor. This allows additional content from the body content of a page to be placed anywhere on the page and allows for background color.
Using a Bubble Grid will turn images into circles with text overlaid, typically serving as visually appealing links to other content. These images will be displayed in a grid.
Need multiple buttons to display horizontally and be equal in width? A Button Bar displays links as buttons in a grid format.
Call to Action
There are many use cases for a Call to Action. The goal is to link visitors to other content, whether it is a Youtube video, pdf, another page, or external website. Five different styles are available!
More often used as a hero image or hero slider at the top of a page, Carousel Sliders allow for multiple sliding images with options for overlaid text and buttons.
Content can be displayed within an alert box. There are options for emergency, warnings, success messages, and other styling that indicates some kind of callout message.
Custom Header & Title
Originally created so that auto generated pages such as listing, category, and tag views can display a header image. The Header and Title custom block is unique from a simple page header in its options and display.
Align content in up to 12 columns. The number of columns displayed can be varied based on viewport.
Expanding Card Grid
Enables a grid like card interface that can reveal more information once clicked. There is a body field for both the revealed content and the expander content. A good use for an expanding card grid is a service catalog or training courses.
RSS Feeds can be imported and displayed similarly to the internal events and articles preview blocks. You can display more than one feed on a page, however, you cannot combine them into one block.
Info Card Grid
This is a component that displays content on "cards" in a grid format. The cards can link to other pages and use a background color.
Local Galleria Preview
If using the Local Galleria content type, a highlight of a few of those images can be set as a teaser on another page, such as the home page.
Do you use the Events Calendar at events.ucr.edu? If so, you can embed a widget and have it display a certain way.
Similar to an info card but made specifically for statistics or short phrases that needs to be highlighted.
A component allowing for tabbed content. The tabs can be displayed vertically or horizontally. These are often used if you have quite a bit of content that can be sectioned.
Need important information to stand out? A teaser callout is meant to display brief text atop an image, optional button links to get the visitor to go where they need to.
A block that displays a list of Categories or Tags from the Article Content Type.