Petex HubSpot Theme

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.

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. 

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

From the edit theme setting you will find the following:

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.

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

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. 

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. 

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

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.

You can edit the website footer with the following options:

• Background: Change the background color of the website footer.

• Heading: Change mobile font size, line height, desktop font, line height, and text transformation.

• Text: Change website footer text for desktop (font, line height, and text transformation) and mobile ( font size & line height) 
• Menu: Change footer menu text and hover color. 

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.

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.   

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.

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.

Petex HubSpot theme has the following 28 modules:

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.

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

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.

Generally, a banner is the first element that a user notices when they land on your website. It is a common module for the about us page, product landing page, or homepage.

The petex theme has three banner layouts:

1. Banner with Image

2. Background Image

3. Background Color
The banner settings include:

• Banner Layout: Select layout from available three layouts, banner with image, background image, and background color.
• Button/Breadcrumb Choice: Select navigation between the breadcrumb and button on the banner.
• Content: Edit content on the banner. You can enable subtitles, add content, and change the breadcrumb navigation.

• Change Background Image: Select any image you want to display as background and edit it’s settings accordingly.

From its style tab, you can edit the background image overlay, spacing, content, mini title font, breadcrumb font, etc

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

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.

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.

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.

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

2. Outlined Dark

3. Outlined Light

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

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

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.

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.

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.

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

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

To add a copyright on the footer along with the terms and conditions, you can use the copyright module. You can edit the copyright text, each privacy policy & terms and conditions text & links.

From its style tab, you can edit the spacing & padding of the copyright module.

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

Single field form (button at bottom)

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.

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.

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

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

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.

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.

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.

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.

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.

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. 

The Footer navigation module helps you to add all the quick links to other website pages on the website footer.

You can select the menu and maximum levels of the menu on your footer.

Add multiple images in the gallery format such that the user can swipe for the next image or use a slider with this module.
You can add multiple images in the gallery. You have the option to remove or replace every image in the gallery. You can also add an alt text, adjust the width and height of the image, and change image loading, and description content. 

From the icon box, you can remove or replace the location icon and edit text on the gallery images.

From the style tab, you can adjust the image corner & navigation image corner radius, overwrite icon color style, enable/disable the overlay, change content card image background color on the desktop view, slider arrow icon color, desktop icon text box color & mobile color, and change desktop & mobile title text color.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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. 

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.

Add a menu bar on your webpage using the menu module. Create a new menu or use an old one on your landing pages.

Select the maximum levels of the menu. It determines the number of menu tree children that can be expanded in the menu.

From the style tab, you can overwrite menu style by changing menu text color, and drop down settings. You can change drop down text color, background color, and border color.

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.

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

From the style tab you can edit the corner radius background color and overwrote fill color of the 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.

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

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

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

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.

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

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.

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.

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.

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.

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!

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.

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

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.

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.

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

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.

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. 

Petex has the following 8 sections: 

• Contact Us

• Counter

• Donation  card

• Donation Form

• Get In Touch

• Testimonial

• Two Columns With Image And Content

• Two Columns With Video And Content

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) 

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