Tutorial: Changing the front page of your Developer Portal

You can create and arrange content in your Developer Portal to provide a front page that aligns with your brand, and helps your users discover your APIs.

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.

About this tutorial

In this tutorial, you create some content for a page, and then change the front page to be your new page.

This tutorial takes you through the following steps:
  1. Creating some custom blocks.
  2. Create and configure a page.
  3. Adding the custom blocks to the page.
  4. Changing the front page to be your new page.

The front page displays like this before the changes are made. A screenshot of the original front page

Creating some custom blocks

  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 Block 1 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>

    view of adding block 1

  6. Check what the block looks like by clicking Source again.

    View of rendered block 1

    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 created Block 1, repeat steps 3 to 7 to create Block 2, Block 3, and Block 4.

  8. Enter Block 2 in the Block description. In the body area, click Source, then enter this HTML: 
    <div class="tutorial_block_2 tutorial_block_frontpage">
<p class="text-align-center">Explore and subscribe to our APIs.<br />
See what you come up with!</p>

<p class="text-align-center">&nbsp;</p>

<div class="bannerButtonRow text-align-center"><a class="button cta-btns--white__btn" href="product">Explore API Documentation</a></div>
</div>
  9. Enter Block 3 in the Block description. In the body area, click Source, then enter this HTML: 
    <div class="tutorial_block_3">
<p class="text-align-center"><a href="user/register">Create a new account</a> and get started with our APIs. It's free to join.</p>
</div>
  10. Enter Block 4 in the Block description.In the body area, click Source, then enter this HTML: 
    <div class="block-get-help">
<div class="get_help">
<div class="column col1">
<h3>Getting Help</h3>

<div>Be sure to check out these extra help resources.</div>
</div>

<div class="column col2">
<h4>Get Started</h4>

<div>Get started with our APIs by creating an account and exploring the documentation to find what's right for you.</div>

<div><a href="user/register"><svg height="24" id="Layer_1" space="preserve" version="1.1" viewbox="0 0 32 32" width="24" x="0px" xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" y="0px"> <g> <polygon points="15.293,10.707 19.586,15 8,15 8,17 19.586,17 15.293,21.293 16.707,22.707 23.414,16 16.707,9.293"></polygon> <path d="M16,2C8.269,2,2,8.269,2,16s6.269,14,14,14c7.731,0,14-6.269,14-14S23.731,2,16,2z M16,28C9.383,28,4,22.617,4,16S9.383,4,16,4c6.617,0,12,5.383,12,12S22.617,28,16,28z"></path> </g> </svg>Create an Account</a></div>
</div>

<div class="column col3">
<h4>Forum</h4>

<div>Ask a question in the forums or search to forum history to see if it's been asked before.</div>

<div><a href="forum"><svg height="24" id="Layer_1" space="preserve" version="1.1" viewbox="0 0 32 32" width="24" x="0px" xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" y="0px"> <g> <polygon points="15.293,10.707 19.586,15 8,15 8,17 19.586,17 15.293,21.293 16.707,22.707 23.414,16 16.707,9.293"></polygon> <path d="M16,2C8.269,2,2,8.269,2,16s6.269,14,14,14c7.731,0,14-6.269,14-14S23.731,2,16,2z M16,28C9.383,28,4,22.617,4,16S9.383,4,16,4c6.617,0,12,5.383,12,12S22.617,28,16,28z"></path> </g> </svg>Join the discussion</a></div>
</div>

<div class="column col4">
<h4>Contact Us</h4>

<div>Can't find the answer to your question? Need more help? Have some feedback? Let us know!</div>

<div><a href="contact"><svg height="24" id="Layer_1" space="preserve" version="1.1" viewbox="0 0 32 32" width="24" x="0px" xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" y="0px"> <g> <polygon points="15.293,10.707 19.586,15 8,15 8,17 19.586,17 15.293,21.293 16.707,22.707 23.414,16 16.707,9.293"></polygon> <path d="M16,2C8.269,2,2,8.269,2,16s6.269,14,14,14c7.731,0,14-6.269,14-14S23.731,2,16,2z M16,28C9.383,28,4,22.617,4,16S9.383,4,16,4c6.617,0,12,5.383,12,12S22.617,28,16,28z"></path> </g> </svg>Email us</a></div>
</div>
</div>
</div>
  11. Navigate to Structure > Block layout > Custom block library to see the new blocks.

    view of custom blocks showing the 4 new ones

Create and configure a page

  1. If the administrator dashboard isn’t displayed, click Manage to display it.
  2. Navigate to Structure > Pages, click + Add page.

    Before view of add page

  3. Enter Portal home in the Administrative title field.
  4. Enter newhome in the Path field.
  5. Select Panels in the Variant type drop-down.
  6. Leave other fields clear.
  7. Click Next.
  8. Accept the defaults of Panels for Label, and Standard for Builder, click Next.

    view of configure panel page

  9. Select Two column bricks from Layout drop-down. Click Next.
  10. Keep all settings except for the following:
    • Top Left, set Classes to Small:9
    • Top Right, set Classes to Small:3
    • Bottom Left, set Classes to Small:4
    • Bottom Right, set Classes to Small:8

    view showing region top left

  11. Click Next.

Adding the custom blocks to the page

  1. Leaving Page title blank, click + Add new block.
  2. Select Block 1 from the Custom block list.

    Select a block screen

  3. Clear Display title, select Top Left from the Region drop down, then click Add block.

    Add a block screen

    You added Block 1, repeat steps 1 to 3 to add Block 2, Block 3, and Block 4.

  4. For Block 2 select region Top Right.
  5. For Block 3 select region Bottom left.
  6. For Block 4 select region Bottom Right.
  7. Click Finish.
  8. Click Update and save.

Changing the front page to be your new page

Note: In this tutorial, you create a new page and swap it with the default. If errors are made, the default page is still available as a backup.
  1. Navigate to Structure > Pages.
  2. Click the newhome URL link for your new Portal home page, check that your page looks as designed.

    View of your new front page

  3. Navigate to Configuration > System > Basic site settings
  4. In Front Page region set Default front page field to newhome.
  5. Click Save configuration.

What you did in this tutorial

The front page of your Developer Portal is now changed and laid out with the blocks of content that you specified.

What to do next

You can add further branding by adding content to your custom blocks such as images, or try to use one of the provided custom blocks such as the Featured Content Block. By default this block is English, you might want to consider adding versions in other languages.

view of an example alternative front page