---
schema_version: "1"
id: 1c02b24078455ca83a6d3aaa43b8b4cb30c8d10ab5b4dac5e180a6c29080dccf
title: Customizing the Portal Look-and-Feel
collection: mulesoft
version: current
locale: en-us
portal_url: https://docs.salesforce.com/mulesoft/current/en-us/api-experience-hub/look-and-feel-customization.md
canonical_url: https://docs.mulesoft.com/api-experience-hub/look-and-feel-customization
source_site: docs.mulesoft.com
content_type: documentation
content_hash: eefb0a1eddb1f3e6ded879f2b389fff53543f61f23d2119fd7264e9ba7d40f4d
description: MuleSoft Documentation Site
latest: true
---
---
product: API Experience Hub
---

# Customizing the Portal Look-and-Feel

> For the full documentation index, see: https://docs.mulesoft.com/llms.txt

The Builder creates a Salesforce Experience Cloud site with your desired brand identity, look and
feel, and site structure by providing control over the site’s components, themes, and pages, and its
settings for general properties, themes, and SEO.

The Builder link opens your site for editing. You can edit each page in your portal, create new
pages, and add and edit the components on each page.

The Builder interface contains the pages list, component palette, theme menu, page structure menu,
and settings menu.

API Experience Hub isn’t certified for use on mobile devices. Some functionality works on mobile
devices, but some functionality such as the API Console does not.

## Pages List

The Pages list shows the pages included with API Experience Hub and the pages you have added and
enables you to select and edit each page. The included page Home is selected by default.

The Pages list enables you to create new pages by using the New Page option. A new page can be an
object page or a standard page. Object pages are used only with Salesforce objects, so a custom
community page starts as a standard page. A standard page can start from one of the preconfigured
pages or as a new blank page.

Make a new blank page by selecting the layout and then entering the new page’s name and URL. Use
that URL to make links to the new page, including links in menus. The new page displays placeholders
for content based on the layout.

Fill in a new page by adding components from the Components menu, such as a Headline component in
the page header, or an API Experience Hub component such as an API Version Carousel.

The Pages list shows the editable configuration properties for each page, which are described in
[Manage Your Community’s Pages and Their Properties in Experience Builder](https://help.salesforce.com/s/articleView?id=experience.community_builder_manage_pages_overview.htm&type=5).

## Components

Clicking the Components lightning bolt icon displays the component palette, which includes
Salesforce Experience Cloud components, such as Headline or Featured Topics, and components specific
to API Experience Hub, such as API Carousel or API Console. You can drag any component from the
component palette to the current page. Select the component on the page to show the component’s
configuration options.

API Experience Hub has the following Lightning components:

- API Console

- Asset Detail Header

- Asset Documentation Viewer

- Assets Carousel

- Assets Catalog

- Search Box

- Search Result

Detailed component information is available from the page and the Salesforce Experience Cloud
[Components](https://help.salesforce.com/s/articleView?id=experience.rss_component_reference_table.htm&type=5)
documentation. See
[API Experience Hub Lightning Components](https://docs.mulesoft.com/api-experience-hub/api-experience-hub-lightning-components) for a description
of each component.

## Theme

Clicking the Theme paintbrush icon offers these general branding parameters:

- Colors

  Sets the site’s general color scheme, including paragraph, heading, and button text.

- Images

  Specifies the site’s company logo and the login page’s background Image.

- Fonts

  Specifies the site’s fonts, which include a primary font and header fonts, and specifies the
  site’s text case.

- Theme Settings

  You can adjust community styling by editing the CSS rules. Next to the Theme title, click the
  Theme list, and click Edit CSS. Refer to
  [Customize Your Experience Site Theme](https://help.salesforce.com/s/articleView?id=experience.community_builder_theme_customize.htm&type=5).

  Brand multiple portals using branding sets. For more information, see
  [Use Branding Sets in Experience Builder](https://help.salesforce.com/s/articleView?id=sf.community_designer_brandsets.htm&type=5).

## Page Structure

Clicking the Page Structure icon, which resembles a bulleted list, shows the components in the
current page and enables you to select and remove them. Selecting a component displays its
configuration menu.

## Settings

Clicking the Settings gear icon offers these parameters:

- [General](https://help.salesforce.com/s/articleView?language=en_US&id=community_builder_general_settings.htm&type=5)

- [Theme](https://help.salesforce.com/s/articleView?language=en_US&id=community_builder_theme.htm&type=5)

- SEO

  Search Engine Optimization (SEO) features define what information can be indexed by external
  services and discovered through online searches, and can increase traffic to your public
  community.

Refer to the
[Experience Builder Settings](https://help.salesforce.com/s/articleView?id=sf.community_builder_general_settings.htm&type=5)
help topic for more information.

## See Also

[API Experience Hub Lightning Components](https://docs.mulesoft.com/api-experience-hub/api-experience-hub-lightning-components)
