Tutorial: Adding a custom block to the front page

You can customize the appearance of the front page of your Developer Portal by adding a custom block. Blocks are boxes of content that are rendered into an area, or region, of a web page such as the Products page or Apps page that can be displayed in regions, such as footer or sidebar, on your page.

Before you begin

You must have a Developer Portal enabled, and you must have administrator access to complete this tutorial. The tutorial Creating the Portal explains how to enable the portal if you have not already done so. The tutorial Adding a custom block to a page other than the front page explains how to add a custom block to any other page.

About this tutorial

In this tutorial, you create a block that contains a marketing announcement and add it to the front page of your Developer Portal.

This tutorial takes you through the following steps:
  1. Creating a custom block.
  2. Adding the custom block to the front page.

The front page displays like this before the block is added. A screenshot of the original front page

Creating a custom block

  1. Log in to your Developer Portal as an administrator.
  2. If the administrator dashboard isn’t displayed, click Manage to display it.
  3. Navigate to Structure > Block layout > Add custom block.
  4. Enter Marketing Info in the Block description.
  5. In the body area, click Source, then enter this HTML:
    <div class="tutorial_block_1 tutorial_block_frontpage">
<h1><span>Create with our APIs</span></h1>
<p><span>Welcome to our Developer Portal where you will find APIs to create your awesome app.</span></p>
</div>

    Add custom block page

  6. To see a preview of the block click Source again.

    Showing new block

    Note: This block uses almost no inline-styling, instead it allows your theme to decide how it is rendered. The advantage of this set up is that you can easily change the rendering without modifying existing content in the database. Any styling that is required can be added to a custom theme. For more information, see Tutorial: Creating a custom theme for the Developer Portal.
  7. Click Save.

You have now created the custom block.

Adding the custom block to the front page

  1. If the administrator dashboard isn’t displayed, click Manage to display it.
  2. Navigate to Structure > Pages.
  3. Click Edit on the Welcome page label.
  4. Click Panels in the Variants section.
  5. Click Content on the expanded menu.
  6. Click + Add new block.
  7. Click Marketing Info in the Custom list.
  8. Clear Display title, keep Content in the drop-down list, and click Add block.

    Page to uncheck display title

  9. Drag Marketing Info to the order you want, in this example before the Welcome banner content.
  10. Click Update and save.

What you did in this tutorial

The front page now has the new block with a marketing message.

Portal front page showing new custom block

What to do next

You can add further branding by adding content to your custom blocks such as images, or try using one of the provided custom blocks such as the Featured Content Block. Instead of using inline styling like that provided in the html, adopt best practice by adding class selectors and developing a custom theme. By default this block is English, you might want to consider adding translated versions.