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. Navigate to Content > Blocks and click +Add content block.
  3. Enter Block 1 in the Block description.
  4. 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

  5. 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.
  6. Click Save.

    You have created Block 1.

  7. Repeat steps 3 to 7 to create Block 2, Block 3, and Block 4.
    1. 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>
    2. 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>
    3. 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>
  8. You can see the new blocks on the Content blocks page. If you are not on the Content blocks page, navigate to Content > Blocks to see the new blocks.

    content blocks page displaying all the blocks created

Create and configure a page

  1. Navigate to Structure > Pages, click Add page.

    add page before view

  2. In the Administrative title field, enter Portal home.
  3. In the Path field, enter newhome.
  4. From Variant type, select Panels.
  5. Ensure all other checkboxes are clear.
  6. Click Next.
  7. Accept the defaults of Panels for Labels, and Standard for Builder, click Next.

    view of configure variant page

  8. From Layout, select Two column bricks and click Next.
  9. 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

  10. Click Next.

Adding the custom blocks to the page

  1. Leaving Page title blank, click Add new block.
  2. Under the Content block section, select Block 1.

    Page to select the content block

  3. Clear the Display title checkbox, select Top Left from the Region list, 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:

    1. For Block 2, select Top Right from the Region list.
    2. For Block 3, select Bottom Left from the Region list.
    3. For Block 4, select Bottom Right from the Region list.
  4. Click Finish.
  5. 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 label. Confirm that your page looks as designed.

    View of your new front page

  3. Navigate to Configuration > System > Basic site settings
  4. In the Front Page section, enter /newhome in the Default front page field.
  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.