Skip to main content
This article explains how to use Blocks in the Publisher Dashboard to customize both the layout and functionality of your Game Portal Pages. It guides you through adding, editing, rearranging, and deleting Blocks so you can build the experience you want. Follow the steps below to create and customize your page layout using Blocks.

​
Add a Block

To add a Block to your Page:
  1. Go to Portal Studio > Pages and create a new Page or edit an existing one.
  2. At the top of the Page, click the Manage Blocks tab. The Blocks editor opens with a couple of default Blocks to help you get started.
  3. Click Add New Block and select the type of Block you want to add from the drop-down menu.
    • Image: Add images to the Page.
    • Video: Add videos to the Page.
    • Contents Preview: Display previews of your News and Articles.
    • CTA: Insert a call-to-action button.
    • HTML: Embed custom design elements using HTML code.
      The HTML Block only supports inline styles.
    • Daily Bonus: Display players’ Daily Bonus panel, allowing them to view their reward directly from the Page.
    • Progress Bar: Display players’ Progress Bar offer, allowing them to track their current progress directly from the Page.
      The Daily Bonus and Progress Bar are only visible to players who are logged in.
  4. The new Block is added to the list of Blocks on the page.

​
Configure a Block

To edit the information in a Block:
  1. Go to Portal Studio > Pages and you’ll see a list of all your Pages.
  2. Click the ellipsis of the Page you want to edit, and select Edit.
  3. Click the Manage Blocks tab.
  4. Click the Block you want to configure to view the fields you can edit.
  5. Complete the required fields for the Blocks you’re using:
  1. In the Image Block, click Item 1 which contains two image fields, Default Image and Mobile Image.
  2. In Default Image, click Upload to open the Upload image window. Add an image using one of these methods:
    • To upload an image from the computer do one of the following:
      • Click the Upload tab and select a file from your computer.
      • Drag and drop a file into the window.
    • To select an existing image from the Asset Library:
      • Click the Media tab.
      • Select an image from the Asset Library and click Save.
      • Click on the image to reopen the Upload Image window and click the Upload tab to complete the remaining fields.
    • To use an online image:
      • Toggle Image URL on.
      • Enter the image URL.
  3. Assign the image an ID Number.
  4. Click the drop-down menu and select an image category such as General or Product.
  5. Click Save. The window closes.
  6. To add a mobile version of the image:
    • In the Mobile Image box, click Upload.
    • Follow the instructions in Step 2.
      Uploading a Mobile Image replaces the Default Image when the page is viewed on a mobile device.
  7. Add a Redirect URL.
  8. Click Add Item to add another image.
  1. In the Video Block, click Item 1 to view the fields.
  2. In the Video URL field, paste the URL of the video.
  3. In the Mobile Video URL field, paste a video URL to display a mobile version of the video.
    Entering a Mobile Video URL replaces the Video URL when the page is viewed on a mobile device.
  4. Enable Autoplay to start the video automatically.
  5. Click Add Item to add another video.
  1. In Content Type, select which content type to display, News or Article.
  2. In Title, enter the title that will appear above the preview.
  3. In Max items, set the number of content items you want displayed in the preview.
  1. In the CTA Block, open Item #1, which contains two asset fields, Default Asset and Mobile Asset.
  2. In Default Asset, click Upload to open the Upload image window. Add an image using one of these methods:
    • To upload an image from the computer do one of the following:
      • Click the Upload tab and select a file from your computer.
      • Drag and drop a file into the window.
    • To select an existing image from the Asset Library:
      • Click the Media tab.
      • Select an image from the Asset Library and click Save.
      • Click on the image to reopen the Upload Image window and click the Upload tab to complete the remaining fields.
  3. To add a movile version of the image:
    • In the Mobile Asset field, click Upload.
    • Follow the instructions in Step 2.
      Uploading a Mobile Asset replaces the Default Asset when the page is viewed on a mobile device.
  4. Add a Redirect URL.
  5. Select External webstore Redirect if the redirect should be treated as an external webstore link.
  6. In Button Text, enter the text that will appear on the CTA button.
  1. Click the HTML Block to view the HTML field.
  2. Click inside the HTML editor box and enter your HTML.
    • Ensure the field is not left empty (it’s required).
    • If you need styling, use inline styles (for example: <div style="...">...</div>).
  1. The Progress Bar Block contains two image fields, Default Background Image and Mobile Background Image.
In Default Background Image, click Upload to open the Upload image window. Add an image using one of these methods:
  • To upload an image from the computer do one of the following:
    • Click the Upload tab and select a file from your computer.
    • Drag and drop a file into the window.
  • To select an existing image from the Asset Library:
    • Click the Media tab.
    • Select an image from the Asset Library and click Save. The image is saved and the Upload Image window closes.
    • Click on the image to reopen the Upload Image window and click the Upload tab to complete the remaining fields.
  • To use an online image:
    • Toggle Image URL on.
    • Enter the image URL.
  1. Assign the image an ID Number.
  2. Click the drop-down menu and select an image category such as General or Product.
  3. Click Save. The window closes.
  4. To add a movile version of the image:
    • In the Mobile Background Image box, click Upload.
    • Follow the instructions in Step 1.
      Uploading a Mobile image replaces the Default image when the page is viewed on a mobile device.
  5. Add a Redirect URL.
  6. Enable External webstore Redirect if the redirect should be treated as an external webstore link.
  1. The Daily Bonus Block contains two image fields, Default Background Image and Mobile Background Image.
In Default Background Image, click Upload to open the Upload image window. Add an image using one of these methods:
  • To upload an image from the computer do one of the following:
    • Click the Upload tab and select a file from your computer.
    • Drag and drop a file into the window.
  • To select an existing image from the Asset Library:
    • Click the Media tab.
    • Select an image from the Asset Library and click Save. The image is saved and the Upload Image window closes.
    • Click on the image to reopen the Upload Image window and click the Upload tab to complete the remaining fields.
  • To use an online image:
    • Toggle Image URL on.
    • Enter the image URL.
  1. Assign the image an ID Number.
  2. Click the drop-down menu and select an image category such as General or Background.
  3. Click Save. The window closes.
  4. To add a mobile version of the background image:
    • In the Mobile Background Image box, click Upload.
    • Follow the instructions in Step 1.
      Uploading a Mobile image replaces the Default image when the page is viewed on a mobile device.
  5. Add a Redirect URL.
  6. Enable External webstore Redirect if the redirect should be treated as an external webstore link.
  1. At the top-right of the page, click Update to save your changes.

​
Reorder the Blocks

To move the Blocks to different spots in the Page layout:
  1. Go to Portal Studio > Pages and you’ll see a list of all your Pages.
  2. Click the ellipsis of the Page you want to edit, and select Edit.
  3. Click the Manage Blocks tab.
  4. Click and hold the left side of a Block
  5. Drag the Block up or down to move it to the spot you want in the layout.

​
Delete a Block

  1. Go to Portal Studio > Pages and you’ll see a list of all your Pages.
  2. Click the ellipsis of the Page you want to edit, and select Edit.
  3. Click the Manage Blocks tab.
  4. Locate the Block you want to delete and click the trash icon on the right side of the Block.

​
Export Blocks to reuse them

To reuse a Block in a different Page:
  1. Click Export to download the Page’s Blocks as a JSON file.
  2. Go to the Page where you want to add the Blocks, and then click Import to upload the downloaded JSON file from your computer. The imported Blocks will appear on your Page.