--- title: AdaptoSphere Pro | Documentation description: This is the AdaptoSphere HubSpot CMS theme documentation --- [![LOGO](https://marketplace.capital-fox.com/hubfs/LOGO.svg "LOGO")](https://marketplace.capital-fox.com/?hsLang=en) - Homes - [Professional Home](https://marketplace.capital-fox.com/adaptosphere-pro/home) - [Home Page B2B](https://marketplace.capital-fox.com/adaptosphere-pro/home-b2b) - [Home Page B2C](https://marketplace.capital-fox.com/adaptosphere-pro/home-b2c) - Landing Pages - [Landing Page](https://marketplace.capital-fox.com/adaptopspehere-pro/lp-one) - Templates - [About Us](https://marketplace.capital-fox.com/adaptosphere-pro/about-us) - [About Us Two](https://marketplace.capital-fox.com/adaptosphere-pro/about-us-two) - [Contact Page](https://marketplace.capital-fox.com/adaptosphere-pro/contact-page) - [Informational Page](https://marketplace.capital-fox.com/adaptosphere-pro/informational-page) - Blog - [Blog Listings](https://marketplace.capital-fox.com/adaptosphere-pro/blog) - [Blog Article Sample](https://marketplace.capital-fox.com/blog/a-deep-dive-into-hubspot-cmss-impact-on-our-work-routine) [Get Started](https://ecosystem.hubspot.com/marketplace/website/adaptosphere-pro-theme-by-nicolas-mendes) ## AdaptoSphere Pro Documentation. #### Learn how to use the theme   ![Listings - Thumbnail3](https://marketplace.capital-fox.com/hs-fs/hubfs/Listings%20-%20Thumbnail3.png?width=1920&height=1440&name=Listings%20-%20Thumbnail3.png)   AdaptoSphere Pro is a free HubSpot CMS theme to create astonishing small Business and Ecommerce solutions, this theme is completely modular and frequently updated. You can use this theme to create various websites for small business, ecommerce companies, professional services, and non-profit associations. ### Available Templates In total there are 8 base templates that can be used to make several other pages. In addition to the 8 templates, there are templates for system pages as well (which include errors like 404, 500, etc...) The 8 available templates are: - Homepage B2B - Homepage B2C - Contact Page - About Us - Products Page - Blog Listings - Blog Article/Post - System Pages To create a page and select a template: - Just navigate to the menu ["Marketing" -> "Website" -> "Website Pages"](https://app.hubspot.com/l/website)(or "Landing Pages") - Then click on "create" - Define the domain and give a name of which will just be an internal administrative name - Choose the AdaptoSphere Pro theme, then choose one of the templates within the theme (which were listed above) From that moment, you will enter a visual editor of the CMS, here you can manipulate modules, sections, content and internal information for SEO and administration. ![Listings - Thumbnail](https://marketplace.capital-fox.com/hs-fs/hubfs/Listings%20-%20Thumbnail.png?width=1200&height=900&name=Listings%20-%20Thumbnail.png) First of all, click on the "Settings" tab on the top bar of the editor. Here you need to give a name, which will be publicly displayed to users once the page is published, and also the address where this page will be located. The address is optional if the page is the homepage, in which case the domain itself must be the page. After giving the name and domain, you can publish the page. Below is a quick video showing the whole process:       ### Theme Modules Understanding modules is key to understanding the HubSpot CMS and its power. Modules are reusable components that can be used in templates or added to pages through [drag and drop areas](https://developers.hubspot.com/docs/cms/guides/creating-a-drag-and-drop-area) and [flexible columns](https://developers.hubspot.com/docs/cms/hubl/tags#flexible-column). To better understand what a module is, let's take a look at a simple "Team Member" module. The module consists of a photo, the team member's name, their title, and a short bio and when part of a CMS web page looks like: ![team-member-editor](https://www.remotish.agency/hs-fs/hubfs/team-member-editor.png?width=1017&height=810&name=team-member-editor.png)   When a content creator edits a module, the UI is constructed based on the fields that the developer has added to the module and how each field is configured.       ### Drag-and-drop Sections   In the drag and drop editor, you can create reusable page sections by dragging modules onto a blank section layout. Developers can also create these sections using our [developer documentation](https://developers.hubspot.com/docs/cms/building-blocks/templates/drag-and-drop-areas/sections). Once created, sections can be used on any page that supports drag and drop editing. Saved sections that contain [smart rules](https://tools.hubteam.com/launch/feature-rollouts/57889/info) will use these rules when added to a 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**. - Hover over a page and click **Edit**. - In the content editor, hover between two sections and click the **+ **plus icon.  ![add-a-page-section](https://knowledge.hubspot.com/hs-fs/hubfs/Knowledge_Base_2021/add-a-page-section.png?width=760&height=113&name=add-a-page-section.png) - In the right panel, click the **Layouts **tab and select a **layout** for your section.  ![add-blank-layout-to-page](https://knowledge.hubspot.com/hs-fs/hubfs/Knowledge_Base_2021/add-blank-layout-to-page.png?width=543&height=242&name=add-blank-layout-to-page.png) - In the content editor, drag a **module** over the layout and drop it into position. Repeat for each module of your section.  ![drag-and-drop-onto-layout](https://knowledge.hubspot.com/hs-fs/hubfs/Knowledge_Base_2021/drag-and-drop-onto-layout.gif?width=1394&height=291&name=drag-and-drop-onto-layout.gif) - Hover over the section and click the downCarat **down icon**, then select **Save section**.  ## ![save-a-section](https://knowledge.hubspot.com/hs-fs/hubfs/Knowledge_Base_2021/save-a-section.png?width=1017&height=280&name=save-a-section.png) **Please note: **existing page sections and those created without a layout can also be saved as reusable sections.   - In the right panel, enter a **name** and **description **for your section, then click **Save**.  ##### Add a section - 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**. - Hover over a page and click **Edit**. - In the content editor, hover between two sections and click the **+ **plus icon.  ![add-a-page-section](https://knowledge.hubspot.com/hs-fs/hubfs/Knowledge_Base_2021/add-a-page-section.png?width=760&height=113&name=add-a-page-section.png) - 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 those created by developers will appear under *Theme sections*.   - Adding a saved section that contains [smart rules ](https://knowledge.hubspot.com/website-pages/create-and-manage-smart-content-rules)will apply those rules to the newly added section. These sections will be labeled as *Smart. * - To delete a section, click the **+ **plus icon for adding a section, then hover over the section and click the delete **delete icon**. In the dialog box, click **Delete**.  ![add-smart-section](https://knowledge.hubspot.com/hs-fs/hubfs/Knowledge_Base_2021/add-smart-section.png?width=568&height=394&name=add-smart-section.png) ##### Copy section HubL In the page editor, you can copy the HubL markup for a section to reuse the code as needed. This can be helpful when wanting to recreate a drag and drop section in a coded file. ![copy-section-hubl-menu](https://knowledge.hubspot.com/hs-fs/hubfs/Knowledge_Base_2021/Developer/copy-section-hubl-menu.png?width=698&height=248&name=copy-section-hubl-menu.png) Learn how to [copy a section's HubL markup.](https://knowledge.hubspot.com/docs/cms/building-blocks/templates/drag-and-drop-areas/sections#copy-section-hubl) ##### Edit rows, columns, or sections - In the page editor, hover over the row, column, or section, then click the edit **edit**** icon**.  - To customize padding and margins around the row, column, or section, click **Alignment and spacing** in the sidebar editor. - To edit an area's background, click **Background** in the sidebar editor and select a **styling option: **  - **None: **remove any background colors or images. - **Color:** set a single color as the background. Enter a **hex value, **or click the **color picker **and select a **color, **then enter a **transparency value. ** - **Image**: set an image as the background. To add a new image, click **Upload** to add an image from your computer, or click **Browse images** to select an image from your [files](https://knowledge.hubspot.com/articles/kcs_article/cos-general/organize-edit-and-delete-files).  - **Gradient:** set two colors fading together as the background. Click the **Direction **dropdown menu and select a **gradient direction**. For each color, enter a **hex value, **or click the **color picker **and select a **color, **then enter a **transparency value. ** **![edit-background-for-a-page-section](https://knowledge.hubspot.com/hs-fs/hubfs/Knowledge_Base_2021/edit-background-for-a-page-section.png?width=375&height=197&name=edit-background-for-a-page-section.png)** - To make a copy of an existing element, hover over the element and click the duplicate cc**clone icon**. - To remove an element from the page, hover over the element and click the delete **delete icon**.    ### Header and Footer Globals   Before learning how the Header and Footer works, you need to understand how Global Modules. Global modules, also known as global content, allows you to repeat a section of content across multiple pages of your website, such as a footer. You can edit global content from the content editor or design manager. Changes made to global content will be applied to all content using a template that contains the same global content. To make things simple to visualize, here are two video showing how global modules works in practice:   For the Header For the Footer   As you can see, when you hover the mouse over a global module, it turns orange, and a pop-up will appear. These are the main indicators that these are global modules. [![LOGO](https://marketplace.capital-fox.com/hubfs/LOGO.svg "LOGO")](https://marketplace.capital-fox.com/?hsLang=en) Accounting for better businesses General - About Us - Career - Press - Privacy policy and Opt Out Blog - Blog content Follow us [Facebook](https://www.facebook.com/) [Instagram](https://www.instagram.com/) [LinkedIn](https://www.linkedin.com/) [YouTube](https://www.youtube.com/) @2024