---
title: Nexus | Knowledge Base
description: Nexus | Knowledge Base
---

[![DigiHub](https://nexus.digikat.com.au/hs-fs/hubfs/DigiHub/img/logos/DigiHub.png?width=67&height=62&name=DigiHub.png "DigiHub")](https://www-digikat-com-au.sandbox.hs-sites.com/digihub-lite/home)

Open menu

 Sign in  Sign up

[![DigiHub](https://nexus.digikat.com.au/hs-fs/hubfs/DigiHub/img/logos/DigiHub.png?width=67&height=62&name=DigiHub.png "DigiHub")](https://www-digikat-com-au.sandbox.hs-sites.com/digihub-lite/home)

Close menu

 Sign in  Sign up

###### Start Here

###### Nexus Portal + MemberHub

✨ Start Here

---

## 📚 Introduction

[Nexus](https://www.nexustheme.io/) built by [DigiKat](https://www.digikat.com.au)

“Nexus” is a series of HubSpot themes that allows you to build websites on HubSpot CMS.

🥇 Important first steps

---

📚 Start by setting up your theme as a child theme, and add your branding and colours to make it feel more like your brand.

## Creating a Child Theme

### Why create a child theme

Think of a child theme as a clone of an existing theme. It’s the exact duplicate of the parent theme, but we can modify it as we see fit.

We can edit a child theme as desired without changing the original parent theme. Whether we just want to tweak a few details or use an existing theme as a jumping-off point to craft something unique, we can do it all without any damage to the parent theme.

That means that we have free range to edit any of the theme’s code without overwriting the original files. As a result, our parent theme can continue to receive updates from the original creator, which are painlessly inherited by our child theme.

Rather than creating our own forked version of the theme, we are able to selectively modify relevant theme files while still relying on the parent theme. The result is a completely customized appearance backed by the benefits of a pre-packaged and professionally updated theme.

## Creating a Child Theme

### How to create a child theme

In the design manager, you can create a child theme - a copy of a purchased theme - based on a purchased [Asset Marketplace](https://knowledge.hubspot.com/resources/how-to-purchase-a-template) theme or a default HubSpot theme. 

Developers can also [create child themes based on custom themes](https://developers.hubspot.com/docs/cms/building-blocks/themes/child-themes#create-a-child-theme-for-a-non-marketplace-theme-in-the-design-manager) and [create child themes using the CLI](https://developers.hubspot.com/docs/cms/building-blocks/themes/child-themes#create-a-child-theme-with-the-cli) using our developer documentation. Learn more about [working with child themes](https://developers.hubspot.com/docs/cms/building-blocks/themes/child-themes). 

- In your HubSpot account, navigate to **Marketing** > **Files and Templates** > **Design Tools**.
  
  ![](https://lh4.googleusercontent.com/YsYWXdloDFoie7MJoSgrP-gBksq_cCl5eyTtebD0s55aqnvu1OQqDo_fa9p7_rmUJB4xyKLV6GPBOY9de6Sp-RBcVnjT9zsfodmCe77_6sQTXsb3j6BnoL3B1orxtxrXRdjW3G9g)
- In the finder, click the **@marketplace **folder for Asset Marketplace themes or the **@hubspot **folder for default themes.
- Right click a **theme folder**, then select **Create child theme**.
  
  ![](https://lh4.googleusercontent.com/S01lTLdSL9olppORSGrS1cN2V1ah7xRHx4awEHLzdtyDqkEMomtcSlRAP2FOF9eOvIxcpzqQSysXHNWdME25O4iWsI8a6MEZ2v1hIP6aLk3TSQHqonD6weDoPsceX4paTI3CKYns)
- In the dialog box, enter a **name **for the child theme.
- To change where the child theme will be saved, click **Change **in the *File location* section. Click a **folder**, then click **Select**.
- To customize the names of the theme's CSS and JS files, click **Advanced options**, then enter new **file names** in the *CSS *and *JS *fields.

To finish the process, click **Create child theme**.  You can [edit the styling](https://knowledge.hubspot.com/website-pages/edit-your-global-theme-settings) for the child theme in the content editor.

## Theme Updates

### How to update the theme

When you update to the latest version of a template or module, a new version of the template or module will be created in your account. This ensures that any customizations that you've made to the template or module don't get overwritten automatically.

To update to the latest version of a template or module:

- In your HubSpot account, click the **Settings icon** in the main navigation bar.
- In the left sidebar, click **Marketplace Download.  
  ****  
  ****![](https://lh3.googleusercontent.com/N2ZTmO4Qg5ljZTHBTkrgWjdATUjLa99g5rSmfurcAuaMi51jgkexfytTwSaszy5C7C0guWkQBhBXp5ao4LrcsChPrByG5tTbhJmDYK7yeMnkPRUSujdxCA7LFeGsjQZ00wge0Z9R)  
  **
- Hover over your purchased **product** and click **Install update.**

**![](https://lh5.googleusercontent.com/j3L7WcTKvvlbG4hrwmu1UFoPdHVIxksai5ing_yuMvo2w7PGYORF3K1Ba5TQMn3QH493-RB175raZph4aDcVdTlRpULpSdaU8qq-b6y_PfNabyDYtd05rjUuUCiyLpLUNDfxWjDD)**

For themes, HubSpot will overwrite upon update. If you're using a module and it gets updated, your page will pull in the new version. However, if you are using a module and that module doesn't exist in the new version, we do not delete it from your HubSpot account.

🥇 Setting up your theme settings

---

📚 Start by setting up your theme settings including colours, fonts forms and buttons.

## Theme Style Settings

### Global modules and background colours

In the edit themes settings, you can apply a primary, secondary, and background colour to all elements included in the Nexus theme. 

![](https://lh5.googleusercontent.com/ePqNTesoc1TvJOG2B0K60wFz-l60dUuLQG4XuqVcHtZj58iZDG0jWFmUcK_geRPCzZxKI8_4BvkXVxFYSxs89DBZDzpDU5oVDIw4RbsJGmqZKlLIRT6f6LdU-qVh1PaE2UMKH7QZ)

 

To adjust primary and secondary colours of all elements in all Nexus theme-based pages, click on **Global Background Colour.**

 

![](https://lh3.googleusercontent.com/8R7InQiPFG9dvsW-S6fR7baIWy0s2LQumS5wtzhlyL3Snm8Zo5oooxGVlhX0WYejFY2MP5qQH_j5TW_UsWeC-sQru6q6GeL3kCg1pCSqK8Lait4_78_TlcFadOZHQqne353DLlPO)

 

Click the **color bubble **to customize your primary or secondary colors. You can choose a simple color value or click the **Advanced **tab and choose a specific hexadecimal value with a color picker. 

**Please note: **Modules use primary color (like indigo, blue etc.) and secondary color (gray) and numeric scale (where 50 is light and 900 is dark) by default. You can generate colors by using material palette generator or any free [color palette generator online.](https://material.io/inline-tools/color/)

## Theme Style Settings

### Global typography

In your typography settings, you can control the fonts applies to certain elements in your templates. All [Google fonts](https://fonts.google.com/?__hstc=20629287.609caec3676eb9e7bf620f6905ee473b.1636378330424.1650327535572.1650338013040.16&__hssc=20629287.3.1650338013040&__hsfp=2009450727) are supported. You can also select custom colors for certain headings, fonts, or links in your theme.

- **Headings: **you can customize the exact font, color, size, and style for any headings included on your theme.
- **Body: **customize the font, color, or text size of the body of your page only. 
- **Links: **customize the default color of links on your website. You can also customize the color and behavior of links when a visitor hovers over or clicks your link.

![](https://lh6.googleusercontent.com/rvb7HG0AHSYhNHvy3u3vbj6hiqvliBcKoBToXUZzuBRH4joGOuZnziT6WGZQvKEdclyGBTZwQGsVDrPRAkXY4J0WbtQdCyb59XGA-9wL2GDbNAwxaReIYr8LmsDpG-1eOT0uyMGm)

If you need fonts that are not included in the Google fonts, you can enable the use of custom fonts and configure it via page editor > Contents tab > click Custom Font > Open in global content editor.

![](https://lh3.googleusercontent.com/nV4VaqGi4KAIufOqijJqD1H2MyqHbZogsUCth8Gv7u_oavRje1I61JQTuETrkhvdEBiqCC5BKtYhLqT6B2_YOPxXidhSuZ-rznOiY8ddKSywf-PgTvhsAwr9BsN7O7equC4KrXjy)

## Theme Style Settings

### Global forms

Customize the default colors, fonts, and text styles, and buttons styles for your forms.

- **Title: **these are styles applied to the text field that appears above your entire form. This typically includes a greeting and instructions for completing the form. These styles on your form can only be managed here in your theme's settings.
- **Labels: **styles applied to the labels that appear above a form field.
- **Fields: **styles applied to the names of the form fields themselves.
- **Help text: **this is the sample content that appears inside each form field, indicating what type of information your visitor should submit.
- **Submit:** choose which button style and size should be applied to your forms.
- **Background color: **the background color applied to your form.
- **Border: **the border color around the form fields.
- **Padding: **the amount of spacing around the form on your page.

To adjust the global forms in all DigiHub theme-based pages, click **Global Forms.**

![](https://lh3.googleusercontent.com/kMWCEz_ziNpHrhTDh9Ahp05JBWKxp_0Xz5E6hREkQOogSatsT10cRG6Uf7wzdTsHeCn_YhGWJ2NEbpCLBDSnPla2aDDDGr6lsmUTSa5MrzucZb0mgFjZADrin4r6ZYPnI9UX-HUi)

## Theme Style Settings

### Global buttons

You can set custom colors, fonts, and styles for buttons on your pages and blog. Within the page editor for a specific page, you may be able to swap button sizes or types, depending on how your theme was created by your website developer.

- **Size:** specify the dimensions of small, regular, and large buttons on your page. 
- **Primary:** a primary button is for the most important action a visitor takes on your page. This color should stand out and catch your visitor's attention.
- **Secondary:** a secondary button is used for relatively less important actions when there's already one primary button on your page. Secondary buttons are typically applied to pages for lower priority actions. 
- **Simple:** these are the default fonts and styles applied to simple [button modules](https://knowledge.hubspot.com/website-pages/guide-to-common-modules#7-button) in your page.

To adjust the global forms in all DigiHub theme-based pages, click on **Global Buttons.**

![](https://lh6.googleusercontent.com/BCNZTmdkWaxzaO2Jh5Rm85nqnCY5KdMbL5HSfCJOovdYmGMpnxiui5XAer4mZm2rryYPLMbVeV-3Yc2a6C5GezQQDyngHAxPv9MY0u9tCMePuYpAExRptZZ3YFWr3SIKm7pSUv-B)

## Theme Style Settings

### Global scroll animation

Motion helps make your website more compelling. With the Animations on Scroll module, you can animate elements on any of your HubSpot web pages without any knowledge of JavaScript. Work directly in the page editor instead of having to go to the design manager, saving you time and making it easier for anyone to add moving elements to your pages.

To adjust this, go to **Global Scroll Animation.**

![](https://lh3.googleusercontent.com/IxxB93lGRFQ12Gr2FOkL_salUeDq7e4uViDoG90a21OlQJcfZ6biSJfGQUcSHu_FpU7LD8IXahHmIukrxTMaeRO_aCYbyRktmCjmqlTPhkU1TKK1rLnfb-1sLzZKUmySno3cJ31S)

## Theme Style Settings

### Global container

In the container settings, you can set the maximum width of your page content. This will be applied to the theme modules only.

To adjust the global forms in all DigiHub theme-based pages, click on **Global Container.**

![](https://lh3.googleusercontent.com/ajF0OgD2mUIyfbljB5hgGjqEDCvs0Rg0U30qCFq0jYC1WEnW6d9k25We3glmf9bGjUeWVP_48vVydIEQ6iRRij9tRGxuG9agEbxovb7aYmp-bme4Y__2lZ-S9V1C2ILffQBEg6DI)

 

## Global Header

### How to adjust the global header?

Your navigation menus will include the most important pages that your website visitors will want to access quickly or frequently while browsing your site.

In the header settings, you can select which header to use on your website or landing pages.

**Please note: **Landing pages do not have a navigation menu. Several studies reveal that removing links from landing pages increases conversion rates.

**Website pages**

- Hero Section 1: Navigation Without Dropdown

![](https://lh4.googleusercontent.com/IDRZGfW1GHmiPZFwFXuYqLLE-z5FCaMhw6Btd4g7Rpu2syGd0wHFhDFPTavo9ogHQxsM8IL_F3yX86hpvvan8gTKWe6LKURl7seq-6Vd7reboYWI_uXHvb-ZXGYBeMVmT-nrRgP0)

- Hero Section 2: Navigation With Dropdown

![](https://lh6.googleusercontent.com/AfkPCjZNHmqQaFl81ngK11pEWLVq766ioCih145jQGbXPext5EqBBrjDglQbHrDSvFRgAUZDU0aoo63O4hqmmBDDTYujvFwo9ezEt7qZHPCTMqOT2p3fsMYhedb5xP6eMiVe-MP1)

- Hero Section 3: Navigation Without Dropdown

![](https://lh5.googleusercontent.com/f7smBHBqM_n2yGkQBMqM1HO-bRjX0LPPkonkl3vqmGeC_NizHW14VtlNn3GL-AH_jqySictP_vDUlnRl-JMU_Ta_nJw1Ju_4IsiMnJIXbT5geasMmOEsYYPwf_YSRHVykGMysCBO)

 

**Landing Pages**

- Hero Section 1: No Navigation Landing Page

![](https://lh5.googleusercontent.com/_KMcFliIIS3LWvb5j-E5Rh6Tn4NVtxIiEDOPV4wMqOpGwHFTeV01V33CGdqyItimswPolOA-ysXI7HI1L2mM-BPx8YM6KQJuU2ecn-H5_pmB4Zbokd5Xk8ODXKE3Je7Qh-zN7XBk)

- Hero Section 2: No Navigation Landing Page

![](https://lh6.googleusercontent.com/FGgYbdumVdeoxwemkF6SL8OwomEz6PwIAUwKqrybnJiRzklAiEekfP3FA3imKRFyYt8VBZ-po-epSE6q3Hfs15PUaQQ30oWmqLql5Rsudr3AbDbOJPxHr7CqEHC_Qz2zNR9aLwbu)

- Hero Section 3: No Navigation Landing Page

![](https://lh4.googleusercontent.com/Et1zuUIw_oF-oarnIUaYHF1TUoumiWwx9pS68djUHHK9ZG_idV3htdvvmhfNxdidZB_cCKiC0PQK5EM_nLX5JQ0pxNfa64JGBQFnIUFSpefbZrNbhbPOC89cJ1fXRQjLberP6NV1)

## Global Header

### How to customize the global header?

- Navigate to your content:
- Hover over your content, then click **Edit**.

![](https://lh5.googleusercontent.com/78cUkigjDFjS0KyQIkGZBAAQy_DbqVLk1hQgBeEs9udVIvn01cEiT139_bgpMadEPW_P3eEd7vEO6q4Omt6Fw9W4Ml0vmuUdYLopbeQknmifSuud-Ea3Hp_FVmgIHoJ6EbmNEEoe)

- In the content editor, click the **global content**. It will be labeled with a global content icon. 
- In the dialog box, click **Open in global content editor**. 

![](https://lh4.googleusercontent.com/d0P87s-t5zyTRQbZp9QE5YXApLOfd3VN-SZc6O22AN1AIh2utla3WLGq0gXuPY7r-xKml86y_iVvB4-r4_D_rYXyv5do4K8z0Ozsn26jzriTFIufyhSgCLz6BPRFYMVjfdRz2n4r)

- To preview the global content in specific content, click the **View on **dropdown menu at the top of the page and select a **page** **or** **post **where the global content is hosted. To view the global content by itself, select **Group only** instead.
- In the left sidebar under the **Content **tab, you can customize the logo, menu and sub-menus, menu buttons, etc.

![](https://lh4.googleusercontent.com/2Yhy9GF_vcoQbQwbYV9vcfuNdO6RCSJ0Mwup6nBnYunQOzt8Vr4Fybz-nJy_UPxtKQIEQosCjcn-Y1mxgZRsvBrB6FIYjG4tYxvCPlzAC4Xa7eoAqvkaYFcUmrLJh-pRdeRqD6tg)

- In the left sidebar under the Styles tab, you can customize fonts, backgrounds, buttons, etc.

![](https://lh6.googleusercontent.com/xanvl1DSqg-nN2bhzTA3wY1wWdXfYYnw5Hh-aAhYr9WRSodBIUamMq3HGQAKrK1CdSvS6cq0UIqsmKyeviB9_6cvsao88b4o3bgCJmwuEruY7sTYfhbLtngX0aOZn-WnC5MkxX5E)

- When you're done editing global content, click **Publish to [X] assets **in the upper right. These changes will be applied to all pages and blog posts using a template that includes this global content.

## Global Footer

### How to adjust the global footer?

In the footer settings, you can select which footer to use on your website or landing pages. 

**Website pages**

- Footer Section 1: 4-Column With Company Mission

![](https://lh4.googleusercontent.com/GiQO-EvVvCqdDNzWxqz3ovT426IBiYVwIzt_iIpaWwcMdFzxPvTNRQCht66nWPAAAVBRuIfqP-rujz8farxj454d2WRYZdkCeV_wYuHR7z7BvzyL1lcqJPsWGgu2I9weQfzo_ox1)

- Footer Section 2: 4-Column With Newsletter and Localization Dark

![](https://lh4.googleusercontent.com/PzUVTAMnUpT_UvY2MPI4OE1XsfSMteA99l7NGGHQAlt23hYCWwSMeEXKXH6gFlMlo1Ig2qZLMa4dG3CNalkL6LTzyQecG3QrANDdsEw6l3H2ba2qweQDCvFvolcHKwkn_cUUzzih)

- Footer Section 3: 4-Column With Newsletter

![](https://lh6.googleusercontent.com/FaEDAZc9fDdgMrxZPyHt4jpW0Z3SoKPSwicXGIlYsf6JTaBdeOGS5rsdQSg5LnJbRF4q6iuTUaW3bxB2ByNh9oXEb3CL2mV_psqYJ-UgWEpHPPsLSyFOOdo0WRXeicwjOwElv_Zh)

- Footer Section 4: Simple Centered

![](https://lh5.googleusercontent.com/Y-MaKtyz7z_CnEadW7bRBCO9EbU1wzv_7OFfLQAnbgvHaEwOGUDHFUV2nwCDNWldrEUT4mpBGEKmMToksg9crRbpQMnWYSDW_eT1TedBZ2DulOetaYGbnVKPjmTwOhLLcGWu072d)

**Landing Pages**

- Footer Section 1: Landing Page

![](https://lh5.googleusercontent.com/mmTMV4gQQ_zknxlXa3SKMA1MlAJjQDimnVHdMg9Q-9KF4ZO5c9qXzaqRYquVnWDXwQSph_lliOsIEsnpT4XAhViBNFgQARjbtrz55PVWsdQktNYT2suL1TlKSaoBLtxjtB4twKdl)

- Footer Section 2: Landing Page

![](https://lh5.googleusercontent.com/Jc2c4hqu6bc4J2t0OdL0neCVBVpDio3OBw1MxY93zuIGM6QbYeJSZgQ_l0tyEtZMuUASn6XYiJ9txC7P5VpRsgJUi7T_Y-TdNAU-6EMQUTaybUri5vyOtix9coN_8OyScPnCXfkL)

- Footer Section 3: Landing Page

![](https://lh4.googleusercontent.com/fNguW0kH8xYRXupi6NnP_sjbFr-EKL_gZ18EXQhwBtKjHZOH1l2GH9g7w2OUmNQg0OxxWTCGZzqsDT92u8n8n3mZ6JoXTUmsKgjsCa9MhEcaSiS9o-4SBk9Dc46WKYKqTXCIAK2K)

- Footer Section 4: Landing Page

![](https://lh3.googleusercontent.com/rIvb56CM9zLcvx3JZPBEYVkASSIhukL9Gre23NJeNCr4KcXNATmVV1se8zCMKifnMMZvtoihCheAkQFTaJ2iTHWJR6SZC0g6YFP9a4k5aGcbAKpULWEFL4glWF6ZPZUnHBM60bdW)

## Global Footer

### How to customize the global footer?

- Navigate to your content:
- Hover over your content, then click **Edit**.

![](https://lh6.googleusercontent.com/tfwuM7Qpp519RHWtvhThbw6TkUMk5XVTFQBAe1SQYSB3qhEC6XEcgg8GPhQ6__METt3xW_I_TPO-jPsfqjeY6l9TODtoXxYPKNNdJ312KLLgYH0VouLniLd1cb8CkLHvJ3uyy9qy)

- In the content editor, click the **global content**. It will be labeled with a global content icon. 
- In the dialog box, click **Open in global content editor**. 

![](https://lh4.googleusercontent.com/d0P87s-t5zyTRQbZp9QE5YXApLOfd3VN-SZc6O22AN1AIh2utla3WLGq0gXuPY7r-xKml86y_iVvB4-r4_D_rYXyv5do4K8z0Ozsn26jzriTFIufyhSgCLz6BPRFYMVjfdRz2n4r)

- To preview the global content in specific content, click the **View on **dropdown menu at the top of the page and select a **page** **or** **post **where the global content is hosted. To view the global content by itself, select **Group only** instead.
- In the left sidebar under the **Content **tab, you can customize column menus, social links, etc.

![](https://lh4.googleusercontent.com/ozeuDW7vFDQMSStDEvZ3jyEgQrk4nXllNZgrFjtV2zG6uro1vrpsvtB9Cp9IiG4LXL2nhgc_BKVhfVuTN6j6PBeJJ_t_xUanVkH39zVDzMRlSKHoUk1x-FYTl-lZ334JxbKBvQOU)

- In the left sidebar under the **Styles** tab, you can customize styling for menu, backgrounds, social, etc.

![](https://lh6.googleusercontent.com/EdOXskeUxOzvkqeByPS8qgvDv60DGdh7ZMrLpBq5yoJA2D4rAjW5-FPRlxXZ0cizcrztTXkY2lGKmtYFx4jSxATfGA2UmKHMFvVy9fVi7QBdrkeOuvF4E-Yir0AGgCMe9pp09gCz)

When you're done editing global content, click **Publish to [X] assets **in the upper right. These changes will be applied to all pages and blog posts using a template that includes this global content.

## Blog

### How to choose blog templates?

- In your HubSpot account, click the **settings icon** in the main navigation bar.
- In the left sidebar menu, navigate to **Website** > **Blog**.
- In the *Current View* section, click the first **dropdown menu** and select a **blog****  
  **
- On the *Templates *tab, you can view or change the templates applied to your blog posts and blog listing page. You can also customize your listing page set-up and add custom HTML to your templates' header and footer.
- In the *Blog post *section, click the **Actions **dropdown menu to manage your blog post template:

![](https://lh6.googleusercontent.com/SQc2Ca6zPyTfQw1XPkDvNkotDsDylHcQh6d17mwzi3gUFaPIqSPqTJ9yJq9rWfCPhEL9sRHvfXvE6Me_dPMUZYsYKFgVjfR7slxXqTqexl5Bchdh93plCpzV7rDYX2ittKXhrWcg)

- In the *Blog listing page *section, you edit a blog listing page or customize its settings: 

- Click the **Actions **dropdown menu and select **Preview **to [preview the page on different devices](https://knowledge.hubspot.com/website-pages/preview-your-content-on-different-devices). 
- Click the **Actions **dropdown menu and select **Details** to view the listing page's performance data. 
- In the *Number of posts per listing page *field, enter the **number **of posts you want to appear on your listing page. Click **Save **in the bottom left to save your changes.
- To display the content of blog posts up to the [*Read More *separator](https://knowledge.hubspot.com/blog/set-the-length-of-a-blog-post-summary) on your listing page, select the **Show summaries on listing page** checkbox. Click **Save **in the bottom left to save your changes.
- To display the featured images of your blog posts on your listing page, select the **Use featured image in listing summaries **checkbox. Click **Save **in the bottom left to save your changes. 

![](https://lh5.googleusercontent.com/pcexKQkKZS-sMYkvhaW8Kh8mWlwTUBK0cQ0br6u9Iw9Ee2itr0MfKFq-RGuw29_hxPLESxjIwyRoqh17yhoYwRY1c9tN_P5RDqGEjpS9pL26AJsSz4CSyYD5Mj0dLy3wCFFHPa4W)

## System Pages

### How to apply your system templates in your settings?

Select your error and password prompt page templates:

- In your HubSpot account, click the settings **settings icon** in the main navigation bar.
- In the left sidebar menu, navigate to **Website **> **Pages**.
- Click the **System Pages** tab.
- Click the corresponding dropdown menus to select your **404 error page**, **500 error page**, **Password prompt page**, and **Search results page** templates.

![](https://lh3.googleusercontent.com/KLm_63gZM6-mJSqVncKwKaVbbmhhBD5irk1LmX71KSqcgaFhTh2FJHcN6Pg6OikLrG5p9-DnsmDO4zaCR3y54kd0zTN6MdA_k6sAqB6uGgeJtbfC3CgmjxpisAUnTen5piXEGWJ0)

- When you're done, click **Save **in the bottom left. 

Select your email subscription page templates

- In your HubSpot account, click the settings **settings icon** in the main navigation bar.
- In the left sidebar menu, navigate to **Marketing **> **Email **in the left sidebar menu.
- Click the **Subscriptions** tab.
- Click the corresponding dropdown menus to select your **Subscription preference page**, **Unsubscribe backup pages**, and **Subscription update confirmation page** templates.

![](https://lh6.googleusercontent.com/aLwRrUS4zDDAY4S50zFGGyLyNVFd5BOSToKFZnTmA9koEUVM4iYqATnP9lfzNThpNR0OCWbMDFUPAZ32UUsCopmVTmjaovAD9ZlSvO10llHjSTMWt8mo_lGgi6p4dkGIyiX6vtKF)

- When you're done, click **Save **in the bottom left. 

## 💻 Nexus Portal Themes

## Home Screen 1

### Create pages

- Navigate to your content:
  
    - **Website Pages**: In your HubSpot account, navigate to **Marketing** > **Website** > **Website Pages**.
    - **Landing Pages**: In your HubSpot account, navigate to **Marketing** > **Landing Pages**.
- In the upper right, click the **Create** dropdown menu and select **Website page **or **Landing page**.
- In the dialog box, specify a name and domain for the page:   
    - Click the **Website **dropdown menu and select a **domain **for the page's URL. If you don't have any [connected domains](https://knowledge.hubspot.com/domains-and-urls/connect-a-domain-to-hubspot), your account's default domain will be the only option.
    - In the *Page Name* field, enter an internal name for the page. 
    - Click **Create page**.  
      ![](https://nexus.digikat.com.au/hubfs/image-png-Jun-01-2022-07-12-55-43-AM.png)

- On the template selection screen,  templates from your [active theme](https://knowledge.hubspot.com/website-pages/use-themes#use-an-active-theme) will appear at the top of the page, while all other templates will be in the *Other templates* section at the bottom. Click a **template**. If you haven’t selected an active theme, you’ll be prompted to select one or click **Skip to templates** to pick an existing template.
- To create the page with the selected template, click **Select this template** in the top right. To preview the page on mobile or desktop, click **Preview**.   
  [![](https://nexus.digikat.com.au/hubfs/image-png-Jun-01-2022-06-06-26-67-AM.png)](https://nexus.digikat.com.au/hubfs/image-png-Jun-01-2022-06-06-26-67-AM.png)[![](https://nexus.digikat.com.au/hubfs/image-png-Jun-01-2022-06-31-20-85-AM.png)](https://nexus.digikat.com.au/hubfs/image-png-Jun-01-2022-06-31-20-85-AM.png)
- Once you’ve selected a template, you’ll be brought to the content editor. The editing options available depend on the page's template type and modules used. Learn more about editing pages using [starter](https://knowledge.hubspot.com/website-pages/create-a-page-with-a-starter-template?_ga=2.21572019.926249158.1635529017-1508703399.1635529017) or [theme](https://knowledge.hubspot.com/website-pages/use-themes?_ga=2.21572019.926249158.1635529017-1508703399.1635529017) templates, [global content](https://knowledge.hubspot.com/design-manager/use-global-content-across-multiple-templates?_ga=2.255748480.926249158.1635529017-1508703399.1635529017) spanning multiple pages, [drag and drop areas](https://knowledge.hubspot.com/website-pages/edit-page-content-in-a-drag-and-drop-area?_ga=2.26839349.926249158.1635529017-1508703399.1635529017), and [rich text](https://knowledge.hubspot.com/website-pages/edit-content-in-a-rich-text-module) or [image](https://knowledge.hubspot.com/website-pages/use-images-in-hubspot-content) modules.  
  [![](https://nexus.digikat.com.au/hubfs/image-png-Jun-01-2022-06-34-26-67-AM.png)](https://nexus.digikat.com.au/hubfs/image-png-Jun-01-2022-06-34-26-67-AM.png)  
  [![](https://nexus.digikat.com.au/hubfs/image-png-Jun-01-2022-06-35-08-51-AM.png)](https://nexus.digikat.com.au/hubfs/image-png-Jun-01-2022-06-35-08-51-AM.png)  
  [![](https://nexus.digikat.com.au/hubfs/image-png-Jun-01-2022-06-37-44-12-AM.png)](https://nexus.digikat.com.au/hubfs/image-png-Jun-01-2022-06-37-44-12-AM.png)  
  [![](https://nexus.digikat.com.au/hubfs/image-png-Jun-01-2022-06-38-49-37-AM.png)](https://nexus.digikat.com.au/hubfs/image-png-Jun-01-2022-06-38-49-37-AM.png)

## Home Screen 2

### Create page

- Navigate to your content:
  
    - **Website Pages**: In your HubSpot account, navigate to **Marketing** > **Website** > **Website Pages**.
    - **Landing Pages**: In your HubSpot account, navigate to **Marketing** > **Landing Pages**.
- In the upper right, click the **Create** dropdown menu and select **Website page **or **Landing page**.
- In the dialog box, specify a name and domain for the page:   
    - Click the **Website **dropdown menu and select a **domain **for the page's URL. If you don't have any [connected domains](https://knowledge.hubspot.com/domains-and-urls/connect-a-domain-to-hubspot), your account's default domain will be the only option.
    - In the *Page Name* field, enter an internal name for the page. 
    - Click **Create page**.  
      ![](https://nexus.digikat.com.au/hubfs/image-png-Jun-01-2022-08-26-44-06-AM.png)
- On the template selection screen,  templates from your [active theme](https://knowledge.hubspot.com/website-pages/use-themes#use-an-active-theme) will appear at the top of the page, while all other templates will be in the *Other templates* section at the bottom. Click a **template**. If you haven’t selected an active theme, you’ll be prompted to select one or click **Skip to templates** to pick an existing template.
- To create the page with the selected template, click **Select this template** in the top right. To preview the page on mobile or desktop, click **Preview**.   
  [![](https://nexus.digikat.com.au/hubfs/image-png-Jun-01-2022-06-06-26-67-AM.png)](https://nexus.digikat.com.au/hubfs/image-png-Jun-01-2022-06-06-26-67-AM.png)![](https://nexus.digikat.com.au/hubfs/image-png-Jun-01-2022-08-33-14-54-AM.png)
- Once you’ve selected a template, you’ll be brought to the content editor. The editing options available depend on the page's template type and modules used. Learn more about editing pages using [starter](https://knowledge.hubspot.com/website-pages/create-a-page-with-a-starter-template?_ga=2.21572019.926249158.1635529017-1508703399.1635529017) or [theme](https://knowledge.hubspot.com/website-pages/use-themes?_ga=2.21572019.926249158.1635529017-1508703399.1635529017) templates, [global content](https://knowledge.hubspot.com/design-manager/use-global-content-across-multiple-templates?_ga=2.255748480.926249158.1635529017-1508703399.1635529017) spanning multiple pages, [drag and drop areas](https://knowledge.hubspot.com/website-pages/edit-page-content-in-a-drag-and-drop-area?_ga=2.26839349.926249158.1635529017-1508703399.1635529017), and [rich text](https://knowledge.hubspot.com/website-pages/edit-content-in-a-rich-text-module) or [image](https://knowledge.hubspot.com/website-pages/use-images-in-hubspot-content) modules.  
  [![](https://nexus.digikat.com.au/hubfs/image-png-Jun-01-2022-08-35-52-25-AM.png)](https://nexus.digikat.com.au/hubfs/image-png-Jun-01-2022-08-35-52-25-AM.png)[![](https://nexus.digikat.com.au/hubfs/image-png-Jun-01-2022-08-36-40-63-AM.png)](https://nexus.digikat.com.au/hubfs/image-png-Jun-01-2022-08-36-40-63-AM.png)[![](https://nexus.digikat.com.au/hubfs/image-png-Jun-01-2022-08-37-36-88-AM.png)](https://nexus.digikat.com.au/hubfs/image-png-Jun-01-2022-08-37-36-88-AM.png)[![](https://nexus.digikat.com.au/hubfs/image-png-Jun-01-2022-08-39-26-67-AM.png)](https://nexus.digikat.com.au/hubfs/image-png-Jun-01-2022-08-39-26-67-AM.png)[![](https://nexus.digikat.com.au/hubfs/image-png-Jun-01-2022-08-40-40-71-AM.png)](https://nexus.digikat.com.au/hubfs/image-png-Jun-01-2022-08-40-40-71-AM.png)  
  <https://nexus.digikat.com.au/hubfs/image-png-Jun-01-2022-06-37-44-12-AM.png>

## Tips and Tricks

### Understand the drag and drop editor

Drag and drop areas are composed of [modules](https://knowledge.hubspot.com/website-pages/guide-to-common-modules), which are blocks of website content. Modules can be arranged in horizontal rows or vertical columns, which can then be grouped into sections. 

By creating rows, columns, and sections, you can rearrange or apply styling to multiple modules at once. Learn more about [customizing styles](https://knowledge.hubspot.com/website-pages/customize-module-styles-in-the-content-editor) for drag and drop content.  

1. **Module:** an individual block of website content. Some modules, like [rich text modules](https://knowledge.hubspot.com/website-pages/edit-content-in-a-rich-text-module?__hstc=45788219.c661bec4bc1b36babbaca2a16b025e7d.1626459353504.1626459353504.1626459353504.1&__hssc=45788219.1.1626459353505&__hsfp=2410726548&_ga=2.46744039.1527772062.1626459348-1118582493.1626459348), can contain multiple types of content. 
2. **Section: **a group of multiple rows or columns that covers the full width of the page. You can apply styling to an entire section or rearrange its position on a page. Sections can be used on any page that supports drag and drop editing. Saved sections that contain smart rules will use these rules when added to a page. 

![](https://lh3.googleusercontent.com/gcjxOXVQj8cdTxjRtOpNLIlHDL42SMc1o3fcVeFyi-S9nWxePDBJV1KeZEgroBLxk0Rwm-nAlDakssyk7ihxvJiByuP1sPW7_r0VtKCK1TJmNo018a9xXkgmB3ama_Ple399VSla)

## Tips and Tricks

### How to add and edit a section?

- Navigate to your content:
- Hover over a page and click **Edit**.
- In the content editor, hover between two sections and click the **+ plus icon**. 

![](https://lh4.googleusercontent.com/J7QhM-t0A0mcxIo40Jc70zJ2uIq1MMnwAg0GmqxbANouKP0zschkdA2vEdtIcxCIDQEnw5XxYuZHwKNAStjca0Qhl5HCcWZADcJu79nl9cPPhLV73aD2aUTwR3IWEw5ON3PDNdUJ)

- In the right panel, hover over a section and click **Select**. 
    - Sections saved from the drag and drop editor will appear under *Saved sections*, while the purchased theme will appear under *Theme sections*.  

![](https://lh4.googleusercontent.com/nSH4ZhzSGkas7yV2EpMhJNCASqxK5CiwYay0z8pLd53D2istQkSp-oAps6vXBkWlziM8OzxWcCgcaOfgTT4VzDeynhyVji60JHBBcRKNe5SzKz6cdyc8eVDPtb8bztKTHz19bNuv)

- In the page editor, hover over the section, then click the edit **edit**** icon**. 

![](https://nexus.digikat.com.au/hs-fs/hubfs/image-png-4.png?width=1000&name=image-png-4.png)

- To customize padding and margins around the row, column, or section, click **Alignment and spacing** in the sidebar editor.

![](https://nexus.digikat.com.au/hs-fs/hubfs/image-png-Apr-21-2022-11-02-42-72-PM.png?width=1000&name=image-png-Apr-21-2022-11-02-42-72-PM.png)

- To edit an area's background, click **Background** in the sidebar editor and select a **styling option**

**![](https://nexus.digikat.com.au/hs-fs/hubfs/image-png-Apr-21-2022-11-03-09-90-PM.png?width=1000&name=image-png-Apr-21-2022-11-03-09-90-PM.png)**

- To edit the content and styling, hover over and click the section. 

 

## Tips and Tricks

### How to add and edit modules?

- Navigate to your content:
  
    - **Website Pages**: In your HubSpot account, navigate to **Marketing** > **Website** > **Website Paes**.
    - **Landing Pages**: In your HubSpot account, navigate to **Marketing** > **Landing Pages**.

- Hover over a page and click **Edit**.
- In the content editor, click the **module** in the sidebar editor, then drag it into position on the page. 

![](https://nexus.digikat.com.au/hs-fs/hubfs/image-png-1.png?width=1000&name=image-png-1.png)

- To adjust the width of a module, click the **vertical divider** between columns and drag it into position.

![](https://nexus.digikat.com.au/hubfs/image-png-2.png)

- To customize content within a module, hover over the module and click an **icon**:

- 1. **Edit module:** edit the contents of the module
    2. **Clone module:** make a copy of this module on the page.
    3. **Delete module:** remove this module from the page.

![](https://nexus.digikat.com.au/hubfs/image-png-3.png)

 

```json
{
  "@context" : "https://schema.org",
  "@type" : "VideoObject",
  "contentUrl" : "https://4277803.fs1.hubspotusercontent-na1.net/hubfs/4277803/Creating%20a%20Child%20Theme.mp4",
  "dateModified" : "2023-02-05T20:01:42.608Z",
  "duration" : "PT2M53S",
  "height" : 1080,
  "name" : "Creating a Child Theme",
  "thumbnailUrl" : "https://api-na1.hubapi.com/filemanager/api/v3/files/thumbnail-redirect/101268063395?portalId=4277803&size=medium",
  "uploadDate" : "2023-02-05T20:01:15.305Z",
  "width" : 1920
}
```

```json
{
  "@context" : "https://schema.org",
  "@type" : "VideoObject",
  "contentUrl" : "https://4277803.fs1.hubspotusercontent-na1.net/hubfs/4277803/Nexus%20_%20%20Setting%20up%20your%20theme%20settings.mp4",
  "dateModified" : "2023-02-06T04:29:27.638Z",
  "duration" : "PT3M7.527S",
  "height" : 1080,
  "name" : "Nexus _  Setting up your theme settings",
  "thumbnailUrl" : "https://api-na1.hubapi.com/filemanager/api/v3/files/thumbnail-redirect/101300643214?portalId=4277803&size=medium",
  "uploadDate" : "2023-02-06T04:29:03.746Z",
  "width" : 1920
}
```