AdaptoSphere Pro | Documentation

AdaptoSphere Pro Documentation.

Learn how to use the theme

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" (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.

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 and flexible columns.

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:

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. Once created, 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.

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

In the right panel, click the Layouts tab and select a layout for your section.

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

Hover over the section and click the downCarat down icon, then select Save section.

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

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 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

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.

Learn how to copy a section's HubL markup.

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.
- 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.

To make a copy of an existing element, hover over the element and click the duplicate ccclone 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.