1.Overview

Petex is a free HubSpot theme specially designed for pet care, pet sitters, pet shop, animal rescuers, pet grooming, animal shelter, or any other pet-related website With the Petex HubSpot theme you get:
  • Complete Design Control
  • Pre-built Pages and Blogs
  • Designed for Conversion
  • Future Feature Updates
  • Clean and Beautiful design
Petex theme offers easy customization. However, if you need any assistance with the installation or setup, connect with us for a free 30 minutes session.

2.What’s Included?

Petex HubSpot theme offers,

  1. Modules – 28
  2. Sections – 8
  3. Templates – 8
  4. Blog – 2
  5. System Pages – 7

If you want us to add any module or curate a template for you, talk to our experts, share your requirements and we’ll get it done as soon as possible. 

3.Edit Theme Settings

To access the theme settings, you first need to create a page > edit page option > theme > edit theme settings   

hubspot webiste footer

From the edit theme setting you will find the following:

hubspot edit theme settings

4.Global Color And Font Setting

Global Colors setting lets you configure primary & secondary color, body background, and heading colors. Similarly, the Global Fonts setting lets you change the Heading font and Body font of the theme.

hubspot global colors & fonts

5.Typography

This setting lets you tweak the headings from H1 to H6 along with the body and links.

Typography

The H1 to body submenu of the typography has options to select desktop font, adjust line height in pixels, alter letter spacing, and text transformation. For mobile devices, you can change the font size, line height, and letter spacing of the theme. You can change the normal and hover color of the links too. 

6.Buttons

hubspot buttons

You’ll find the following settings here:

  • Button: Includes option to edit button text, spacing, corner radius, and enabling animation.
  • Dark: Includes the option to change normal hover and active button font, text color, background color, and border style for the filled and outlined button.
  • Light: Change the light-filled button text background border color for normal, active, and hover cases. 

7.Spacing

hubspot spacing

You can adjust the spacing and maximum content width along with section spacings. Section spacing includes vertical and horizontal spacing for mobile and desktops.  

8.Website Header

hubspot website header

The website has 3 sub-settings:

  • Box shadow: Enable or disable box shadow and change the box shadow color.
  • Background: Change website header background color.
  • Menu: Edit menu text ( desktop font, line height, transform, mobile font size, and line height), hover & active font, change menu drop-down background color, hover text and background color, and active text font color.

10.Forms

hubspot forms

The following sections of the form have these mentioned settings for forms:

  • Titles: Edit text (font, line height, letter spacing, text transformation), background color, spacing, and corner radius. The border radius only alters the top left and top right of the title.
  • Labels: You can edit the text and spacing of the form labels.
  • Help text: Change the font of the help text on forms.
  • Fields: Change the font of the GDPR Text and Rich Text, alter border radius, change border color on focus, border style, spacing, background color, text, and placeholder color of the input fields. 
  • Form: Alter form background color, mobile and desktop spacing, border style, and corner radius of the form.
  • Error Messages: Change font, alter spacing, and border color of the error messages.

11.Tables

hubspot tables

The tables option has a further 4 sub-options.

  • Table Header: Change table header text color and background color
  • Table Body: Change table body text color and background color.
  • Table Footer: Change table footer text color and background color. 
  • Table Cells: Change spacing, padding, and border of table cells.   

12.Blog Settings

hubspot blog settings

You can configure the blog post settings here. There are 2 settings in this section:

  • Sidebar: Enable or disable the sidebar on the blog from here.
  • Blog Post: You can show/hide the author name, image, timestamp, tags, and related posts from here.

13.System Page Setting

system page setting

You can use the system page settings to make changes to system pages. There are 4 settings here,

  • Error Page Setting (404): Enable/disable the error image, and change the error banner image from here.
  • Error Page Setting (500): Enable/disable the error image, and change the error banner image from here.
  • Backup Unsubscribe: Enable/disable the banner image, and change the backup unsubscribe banner image from here.
  • Password Prompt: Enable/disable the password prompt image, and change the password prompt banner from here.

14.Theme Modules

Petex HubSpot theme has the following 28 modules:

14.1.Accordion

Accordion

The accordion module adds the functionality of frequently asked questions on your website in the form of questions and answers. The user can toggle to see the answer to each question. You can add multiple accordions, and choose the icon position.

Accordion

For every accordion, you can update title (as question), and content (as answer). You can also remove or replace the open and close icon.

Accordion

From its style tab, you can edit the accordion background color, border radius, spacing, and box shadow, title font & spacing, content font & spacing, and overwrite icon icon color.

Accordion

14.3.Blog Listing

Blog listing

You can use the blog listings module to add blogs in the listing format with all other important details.
Go to marketing >blog > blog listing pages > select template, Petex Listing Page > Edit

Blog listing
Blog listing

You can display blogs on your website page with the blog listing module.   

  • Blog Meta Information: Toggle to enable the blog meta information like, featured image, tags, title, author, publish date, description, button, and edit the button text.
  • Enable box shadow with the toggle button, and add box shadows.
  • Category page, where you can add it’s sub-title.
  • Blog post & author label: edit text to show the author label.
  • Sidebar: Edit search title & placeholder/button text, category title, popular posts title, and subscription form title.  
  • Edit Pagination text for left and right.  

For further changes, you also have the style tab. This includes, cards & widgets settings.

Blog listing

You can change card background color, overwrite card hover background color, alter corner radius of card & feature image, overwrite icon style of tags, title, description, button, author and date. You also have option to edit widgets, i.e. overwrite title style, popular post, and category.

Blog listing

14.4.Blog Related Post

Blog related post

Add this module to the blog page so that your users can check out and further read the mentioned blog post. This can be added at the bottom where you can edit section title and read more button text.

Blog related post

14.5.Customizable Button

A button module enables your visitors to take action. You can use attractive buttons on your website to take users to different pages too.

Three layouts are available for a button.
1. Filled Dark

Filled dark

2. Outlined Dark

Outlined Dark

3. Outlined Light

Outlined light

You can select the button layout, edit button text, and add links.

Customizable button

From the style tab, you can change the desktop and mobile button alignment and overwrite button style on active hover and active state.

Customizable button

14.6.Card

Card

You can add titles along with images in the form of cards and display them on your website. This can be used to showcase your services as a pet business.

You have upto four column choices for card display. Additionally, anytime you can enable or disable the icon image, title, and description. There is also an option to choose between icon or image, to add multiple cards, and enable box shadow.

Card

14.7.Counter

You can display the numbers for a particular cause with the counter module. It might be the number of pet owners you have worked with or the number of stray animals you’ve rescued.

Counter

You can choose upto three-column count for this module, enable icon/image display condition, i.e. display of the image in counter component, and enable counter text display condition.

Counter

Furthermore, you can edit the counters by altering the counter value, text, and unit.

Counter

From its style tab, you can edit the counter value & text, and counter desktop & mobile spacing.

Counter

14.9.Custom Form

For adding forms to your website, you can use a custom form module. You can choose any form to display on the website. 

Multiple Field From

Custom form

Single field form (button at bottom)

Single field form

You have the form layout choice, form content, thank you text, enable form automation, enable/disable form box-shadow, and enable/disable input field box shadow.

Custom form

From the style tab, you can edit the color & alignment of form title, add border bottom to form title, enable form background color, enable form max width, desktop form wrapper alignment, desktop & mobile form spacing, input fields, overwrite form corners, button full width, enable button full width & overwrite button styles.

Custom form

14.10.Custom Image

Custom image

You can choose any image to show on your landing page with the custom image module.

Custom image

From the style tab,  you can change the image alignment for desktop and mobile, and alter the corner radius of the image.

Custom image

14.11.Donation Form

Donation form

To collect donations on your website use the donation form module. It is an effective module to raise funds if you’re a nonprofit organization. You can edit the donation form and image on the form.

You’ll have to choose any form from the available forms or create a new one, edit form content by adding or removing the form field, edit the button text, edit thank you text and enable form automation.

Donation form

You also have the option to replace or remove the section image, insert alt text, adjust the image width & height, edit the section heading, and enable or disable the content over the image.

Donation form

From its style tab, you can overwrite style, i.e. override form background color, input fields background color, border color, overwrite & adjust form spacing. From the form settings, you can enable disable max width and enable/disable box shadow and add shadow color.

Donation form
Donation form

14.12.Donation Card

Donation card

A donation card is for showing multiple donation programs that might be running simultaneously or to show the different donation campaigns you’ve carried out in card format.

Donation card

You can add multiple donation cards and edit them by replacing or removing the donation card image, adjusting its size, adding image title, image tag, description content, enabling buttons, and editing the progress bar on each donation card.

From the progress option of each donation card, you can decide the progress percentage, goal reached, completed text, and count value.

Donation card

From its style tab, you can edit the card corner & box shadow, progress radius, background color & overwrite fill color, adjust image radius, and mobile & desktop card spacing. 

Donation card

14.15.Header Controls

Header Controls

The header appears on the topmost section of your website. You can edit the header controls option from the global content editor.

Header Control

You can select the display mode of the language switcher, enable search and edit placeholder text, enable the button on the header, and change button styles.

Header control

From the style tab of header controls, you can change the search background color and icon color.

14.16.Header Toggler

Drag and drop the header above the menu component for best results. You can select an image or an icon for the toggle open and close option.

Header toggler

From the style tab, you can change the icon/image color and spacing of the header toggler.

Header toggler

14.17.Icon Box

Icon box

Add multiple icons and their descriptions on the landing page footer for adding minor yet important information like official phone number, email, etc. You can select the layout between compact and card, select column count, image, or icon, and edit the content on the icon card.  You might also enable or disable the box shadow. The box shadow will be applied by hovering over the icon.

Icon Box

From the style tab, you can change alignment, adjust desktop spacing, and image/icon maximum width.

Icon Box

For the icon box, you can change it’s background color, and corner and overwrite content color, i.e. change the title and description color.

Icon box

14.18.Image Card

Image card module, as the name implies, allows you to add three images in a single row in a card format to your website.

Image card

You can replace or remove the images in the image card, along with settings like image loading, image title, alt text, and size. Additionally, edit the content on each card and change the background color.

Image card

From the style tab, you can alter the image tab border-radius and overwrite content settings like changing title color and description color.

Image card

14.19.Logo

Logo

Add your custom logo with a logo module anywhere on your website pages. You can enable or disable your custom logo anytime. Replace or remove the custom logo, insert alt text, adjust size & maximum size, and link. 

Logo

14.20.Map

Map

The map module will add a virtual map to your website. If you have a physical office where you carry on your daily activities or ask people to come over for an event, you can definitely add this module. The map settings include:

  • Content: Edit title, subtitle, and container content and value 
  • Map: Insert map API, edit pointer details, Map JSON, map zoom level, center latitude and longitude.
  • Slider navigation: Remove or replace the previous and next slider navigation image alt text and image loading.
Map

14.22.Progress Bar

Progress bar

Visitors can observe the progress of activity with the progress bar. It is a horizontal progress bar. You can edit the style and content of the same.

Progress bar

You can edit the progress label and percentage, enable/disable progress count, and enable/disable the start and end labels too.

Progress bar

From the style tab you can edit the corner radius background color and overwrote fill color of the progress bar.

Progress bar

You can also change the color of box-shadow, alter the corner radius, and overwrite the text color of the progress bar label.

14.23.Social Follow

Social follow

The social follow module allows you to add your social platforms like Twitter, Instagram, Facebook, and LinkedIn on your website pages, header, or footer.

Social follow

You can remove or replace the icon, adjust icon size and add social links for each platform.

Social follow

From the style tab, you can overwrite icon fill color, background color, corner radius, and alignment.

Social follow

14.24.Spacer

The spacer module adds white space to the website and landing pages. With the spacer module, you can add vertical spaces between sections and modules as and when required.

Spacer

You can alter the height of desktop, tablet, and mobile, along with the spacer background color of the spacer.

14.25.Team

Team

The team module allows you to display your team members along with their images, title, and text. However, you may use it in many other creative ways too! For example, to show different pets up for adoption and details related to them.

Team

You have the card column choice where you can select a maximum of four columns to display on your landing pages. Toggle to enable a button for every team member. You can add multiple members and edit each.

For each member, you can edit settings like, replacing or removing the member image, changing the button type, altering the width and height of the image, members name, image loading, adding a profile link, and editing the button text.

Team

From the style tab, you can set the image alignment, alter desktop & mobile card spacing, and overwrite the color by enabling the title and subtitle colors.

14.26.Testimonial

Testimonial

The testimonial module can be used to display various testimonials on your landing page. It has settings to add testimonials where you can edit the opening quote and closing quote image, and write text in paragraphs for a customer testimonials.

Testimonial

Similarly, from the testimonial clients detail option you can replace or remove the client image, add alt text, replace/remove the client image, and client job profile!

Testimonial

From its style tab, you can change the desktop and mobile alignment, enable color, overwrite testimonial text color, member name color, job profile color, and enable max-width.

Testimonial

14.27.Title Content

Title content

As the name suggests, the title content module allows you to add content anywhere on the website page.

Title content

With this module, you can enable & edit a mini title, edit insert description, and enable primary and secondary buttons. You can also set the type of buttons you want to use, edit the button text and insert link.

Title content

From the style tab, you can change the container and content style. The container allows you to edit it’s background color, adjust container corner, enable max width and adjust desktop and mobile spacing.

Title content

Content settings allow you to set the content desktop and mobile alignment, and overwrite the style of mini title, title, and descriptio

14.28.Video Popup

Video Popup

The video module allows you to update any video content on your website or blog or landing page. It has the following options: 

Video poster: You can remove or replace the video poster, add alt text, and adjust maximum size and image loading.

Icon: Remove or replace the play icon on the video and select it’s alignment from left, right or centre. The left corner position is only for desktop.

Finally, you can add the link of the video you want to display in the provided video link box.

Video Popup

From the style tab, you have the options to change mobile and desktop alignment for the video, enable overlay, overwrite icon color, add box shadows, video corner border radius, etc. 

Video Popup

15.Theme Sections

Petex has the following 8 sections: 

  • Contact Us
contact-us
  • Counter
hubspot counter
  • Donation  card
hubspot donation-card
  • Donation Form
hubspot donation-form
  • Get In Touch
get-in-touch
  • Testimonial
testimonial
  • Two Columns With Image And Content
two-col-img-content
  • Two Columns With Video And Content
two-col-video-content

16.Theme Templates

Petex has 8 theme templates.

  1. Home
  2. About Us
  3. Contact Us
  4. Adopt A Pet
  5. Blog Listing
  6. Blog Detail
  7. Our Team
  8. Support Us(Landing Page) 

17.System Pages

Petex theme offers you 7 different system pages that are as follows,

  1. 404 Error
  2. 500 Error
  3. Password Prompt
  4. Search Results
  5. Backup Unsubscribe
  6. Subscription Preferences
  7. Subscription Confirmation
Suggest Edit