> For the complete documentation index, see [llms.txt](https://docs.bixgrow.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.bixgrow.com/affiliate-portal/affiliate-landing-page/modern-template.md).

# Modern template

A section-based landing page built, allowing you customize each section (Hero, Benefits, FAQ, and more) individually for full control over content and style.

👉 Take a look at our [demo landing page](https://bixgrow-demo-store.bixgrow.com/).

<figure><img src="https://1262132294-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8I1FvDPwi1VP7QixsjAS%2Fuploads%2Fe02cqZKyZRrfU1cVsQbq%2Fimage.png?alt=media&amp;token=fc74a04f-2c28-471f-96f3-da85f5a1a5b2" alt=""><figcaption></figcaption></figure>

## Build page content

You can customize the content and layout of your landing page, section by section under the **Page content** section.

By default, a landing page includes the following sections:

<figure><img src="https://1262132294-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8I1FvDPwi1VP7QixsjAS%2Fuploads%2FONYBfqKcqvJsN2pmQxlB%2Fimage.png?alt=media&amp;token=bf1606aa-abe4-4bb0-a048-c5112fbcd4df" alt=""><figcaption></figcaption></figure>

You can drag a section using its handle to reorder it, remove a section using the delete icon, or click **Add section** to add a new one.

### Page & SEO

Set the SEO metadata for your landing page.

* **Document title**: the title of the page.
* **Meta description**: a short description of the page, used by search engines.

<figure><img src="https://1262132294-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8I1FvDPwi1VP7QixsjAS%2Fuploads%2FfYUACjnG9orlnhLdd5Bf%2Fimage.png?alt=media&amp;token=69f23e1c-847d-4258-ae19-c5e4e286832a" alt=""><figcaption></figcaption></figure>

### Theme

Under the Theme section, you can set the overall look of your landing page, including colors, fonts, and layout.

* **Start from a look**: apply a preset theme to quickly set colors and fonts.
* **Palette**: fine-tune individual colors for brand, text, surfaces, and interface elements.
* **Heading font** and **Body font**: choose a Google font, or use a custom font.
* **Layout & corners**:  adjust spacing and shape, such as font size, button/card radius, section spacing, and content width.

<figure><img src="https://1262132294-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8I1FvDPwi1VP7QixsjAS%2Fuploads%2F1p9Y4A0ngLGj2ZJQSoBe%2Fimage.png?alt=media&amp;token=56a27e33-b5ba-4241-b4ea-d99266d8347b" alt=""><figcaption></figcaption></figure>

### Header

Customize the page header, including the logo and navigation links.

<figure><img src="https://1262132294-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8I1FvDPwi1VP7QixsjAS%2Fuploads%2FWk4jfo8SbAk04quW2RTp%2Fimage.png?alt=media&amp;token=4a074888-568c-4992-9021-2878e4314f00" alt=""><figcaption></figcaption></figure>

### Hero

Customize the hero section, typically the first section visitors see on your landing page, by setting up its content and style.

<figure><img src="https://1262132294-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8I1FvDPwi1VP7QixsjAS%2Fuploads%2FwByDZNAFaq6CH9mX8r0b%2Fimage.png?alt=media&amp;token=e2da35e2-c4ad-4597-8ce5-b031e87de8ef" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1262132294-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8I1FvDPwi1VP7QixsjAS%2Fuploads%2FbvXgecDbUywdoUljU2T8%2Fimage.png?alt=media&amp;token=c4fa6a7c-5cc7-4c58-bc70-ac73daa7904e" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
The remaining customizable sections **(Benefits, How it works, Social proof, FAQ, Final CTA)** follow the same pattern as Hero.
{% endhint %}

Each customizable section comes with several templates, so you can choose the layout that fits your landing page.

<figure><img src="https://1262132294-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8I1FvDPwi1VP7QixsjAS%2Fuploads%2F4oEg8SIP2nIBGxqzQfUB%2FUntitled%20design%20(12).gif?alt=media&amp;token=9438e83a-db35-4b29-8b78-27f5c49e1ab7" alt=""><figcaption></figcaption></figure>

### Footer

Customize the footer, including branding, extra links, and contact details. You can click the **Add link** button to add any link with a custom label to the footer.

<figure><img src="https://1262132294-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8I1FvDPwi1VP7QixsjAS%2Fuploads%2F0m9UMaVna111hSjucHUh%2Fimage.png?alt=media&amp;token=9dd6849d-db22-4ce8-9555-6d416b261472" alt=""><figcaption></figcaption></figure>

### Custom CSS

Add custom CSS to further style your landing page beyond the built-in Theme and section options.

<figure><img src="https://1262132294-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8I1FvDPwi1VP7QixsjAS%2Fuploads%2FqOFVgKdhIAVIUbkTnqxS%2Fimage.png?alt=media&amp;token=22c4ec34-bbce-480a-a49b-09a7553d590f" alt=""><figcaption></figcaption></figure>

### Custom HTML

You can click **Add section** > **Custom HTML** to add your custom HTML code.

<figure><img src="https://1262132294-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8I1FvDPwi1VP7QixsjAS%2Fuploads%2F5N2doljYFkbLKXXIOWJo%2Fimage.png?alt=media&amp;token=b857881d-0576-42df-8abf-302f1369e291" alt=""><figcaption></figcaption></figure>

### Commission calculator

Commission calculator is a template option in the **Benefits** section. Add it to your landing page so potential affiliates can see how much they could earn by joining your program.

<figure><img src="https://1262132294-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8I1FvDPwi1VP7QixsjAS%2Fuploads%2FAfJ6tfjqMuHl5vYBnu8K%2FUntitled%20design%20(6).gif?alt=media&amp;token=ab32bacb-40a7-4d36-b93b-665f8346d4ad" alt=""><figcaption></figcaption></figure>