search menu CONTACT

GETTING STARTED (2)

THEME SETTINGS (7)

MODULES (18)

GETTING STARTED

Setting Your Logo

Customizing the theme with your own logo

One of the first steps you will want to take after installing the aStack theme, is setting your own logo. To achieve this, you need to navigate to HubSpot's Settings by clicking the cog icon on the top right of the screen.

Then, navigate to Website > Page, which is the last section of the left menu.

Next, click on the Branding tab to get to your logo settings, where you can upload your own logo. Optionally, we recommend adding a square Favicon.

setting-your-own-logo-astack-hubspot-theme

Note: if you don't see the Website Settings, you may need to check your account access. Ask your administrator to grant you access to this section.

Disabling jQuery in Settings

IMPORTANT: If enabled, this setting must be turned off to prevent potential issues

The aStack theme makes use of the popular jQuery framework for its animations and other interactions to work. The theme includes by default one of the latest versions of this framework, so please make sure to not include the legacy jQuery version from HubSpot's Settings.

To disable this setting and please take the following steps:

  • Go to Settings by clicking the cog icon on the top right of the screen
  • Navigate to Website > Page, which is the last section of the left menu
  • Scroll all the way down, and click to uncheck the Include jQuery option

disable-jquery-astack-hubspot-theme

Note: if you experience erratic behaviours with animations or other interactive components like Carrousels please check that this option is off, as it's likely causing issues otherwise.

THEME SETTINGS

Header & Footer

Header & footer options from the theme settings allow you to switch between built-in modules with drag-and-drop areas.

General style

The general style tab contains the style that will apply throughout the theme.

Editable fields:

  • Body background color
  • Icons color
  • Primary color
  • Secondary color
  • Accent color 1
  • Cards background color
  • General box-shadow
  • General corner radius

Typography

In this section, you can style the typography.

Editable fields:

  • Body
  • Title label
  • Heading one to heading six
  • Links (default and hover)
  • Blockquote
  • Pre
  • Body line height.

Every HTML element mentioned above has options for:

  • font family
  • font size
  • font-weight
  • color

Buttons

In this section, you can style the buttons (primary and secondary) and their states default and hover.

Editable fields:

  • Background, text, and border colors
  • Border width
  • Corner radius
  • Padding
  • Box-shadow
  • Font style (font family, size, and weight)

Alignment and spacing

You can change the space between page sections and the maximum content width in this section.

Forms

In this section, you can style the forms.

Form styles:

  • Background and border colors
  • Border-width
  • Corner radius
  • Padding
  • Box shadow
  • Form title and paragraphs font style (color, font family, size, and weight)

Input styles and their states (default, hover, and focus):

  • Background and border colors
  • Border-width
  • Corner radius
  • Padding
  • Box shadow
  • Text settings: color, font family, size, and weight

Submit button and its states (default and hover):

  • Background and border colors
  • Border-width
  • Corner radius
  • Padding
  • Box shadow
  • Text settings: color, font family, size, and weight

Responsive

You can adapt the typography, spacing, buttons, and forms for mobile resolutions in this section.

MODULES

Banner

Editable fields:

  • Title label
  • Title
  • Heading type (H1 to H6)
  • Subtitle
  • Buttons

Styling options:

  • Spacing (padding and margins) for desktop, tablet, and mobile
  • Border (width, style, and color)
  • Background (color, gradient, or image)
  • Text and content alignment
  • Text colors (label, title, links, and subtitle)
  • Parallax effect

Live examples:

Blog listing header

Editable fields for the blog homepage:

  • Title label
  • Title
  • Subtitle
  • Buttons

Editable fields for the tag and archive pages:

  • Title label
  • Title
  • Subtitle

Styling options:

  • Spacing (padding and margins) for desktop, tablet, and mobile
  • Border (width, style, and color)
  • Background (color, gradient, or image)
  • Text and content alignment
  • Text colors (label, title, links, and subtitle)
  • Parallax effect

Live examples:

Blog post header

Styling options:

  • Spacing (padding and margins) for desktop, tablet, and mobile
  • Border (width, style, and color)
  • Background (color, gradient, or image)
  • Text and content alignment
  • Text colors (label, title, links, and subtitle)
  • Parallax effect

Live examples:

Buttons

Editable fields:

  • Display text
  • Link
  • Style

Live examples:

Carousel

Editable fields:

  • Image position
  • Image
  • Text (rich-text)
  • Rating stars

Live examples:

Content Organized by Categories

Editable fields:

  • Category name
  • Category description
  • Post title
  • Post label
  • Post short description
  • Post images
  • Post details
  • Card link (instead of modal)

Live examples:

Details with Map

Editable fields:

  • Title
  • Description
  • Icon
  • Address for map

Styling options:

  • Spacing (padding and margins)
  • Border (width, style, and color)
  • Background (color, gradient, or image)
  • Text font style (color, font family, font weight, font size)
  • Icon style (font size and color)

In the pro version, you can add multiple tabs with different details.

Live examples:

 

FAQs

Editable fields:

  • Questions
  • Answers

Live examples:

 

Fixed button

Editable fields:

  • Link
  • Icon

Styling options:

  • Style (primary or secondary button)
  • Size
  • Position
  • Text font style (color, font family, font weight, font size)
  • Spacing

Live examples:

Footer

Editable fields:

  • Title
  • Description
  • Icon
  • Map address
  • Social media links

Styling options:

  • Spacing (padding and margins) for desktop, tablet, and mobile
  • Border (width, style, and color)
  • Background (color, gradient, or image)
  • Text and content alignment
  • Text colors (title and subtitle)
  • Icon (size and color)
  • Social media links colors

Live examples:

Full-width Cards

Editable fields:

  • Post title
  • Post label
  • Post description
  • Image
  • Link
  • Text alignment

Live examples:

Images gallery

Editable fields

  • Images
  • Images link
  • Images height

Styling options: 

  • Counter color
  • Navigation color
  • Close button color
  • Spinner color
  • Captions background color
  • Captions text color
  • Overlay background color

Live examples

Menus

Editable fields

  • Category name
  • Category description
  • Subcategory title
  • Subcategory description
  • Item name
  • Item description

Styling options: 

  • Category background (color, gradient, or image)
  • Text colors (category name and description)

Live examples

Navigation

Editable fields

  • Logo
  • Menu
  • Site search
  • CTA (available for PRO)

Styling options for the top menu and sub-menu: 

  • Background (color, gradient, or image)
  • Border (width, style, and color)
  • Box shadow
  • Link font style (default and hover)

Live examples

Social Media Links

Editable fields:

  • Icon
  • Network name
  • Link

Styling options

  • Icon colors (color and background for default and hover)
  • Icon size
  • Space between icons
  • Alignment

Live examples

Social media sharing

Editable fields

  • Facebook
  • Twitter
  • LinkedIn
  • Email

Styling options

  • Icon size
  • Space between icons
  • Alignment

Live examples

Team members

Editable fields: 

  • Team name
  • Team description
  • Team member (profile picture, name, position, description, and social media networks)

Live examples

Text section with buttons

Editable fields

  • Title label
  • Title
  • Heading type (H1 to H6)
  • Subtitle
  • Button

Styling options

  • Text alignment

Live examples

close
phone