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.

Before the changes are made, the front page displays like the following screen capture. 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 the following 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 content block pop-up with the source view

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

    add content block pop-up displaying the UI content

    Note: This block uses 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 the following 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 the following 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 the following 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.

    content blocks page displaying all the blocks created

Create and configure a page

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

    add page before view

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

    view of configure variant 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 top-left region

  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 block options

  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 configuratoin.

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.