This Template is designed to allow you to easily build a page. Apply changes to your entire site. This Template Pack provides you with everything you need to create a website on HubSpot that represent your brand well and help you grow your business.
Watch the video below, where you can learn how to customize and edit the template easily.
If you have any Sales or Support related questions, you can any time reach us at hello@webdew.com or visit this page.
Let's see how its Work:
Section Edit - 1
Banner Settings:-
In this module, First, we have to add the Given Backgrounds. Here we have the Many Option to make an Amazing Background.
We have the following options for the Background:-
- Image Background
- Color Background
- Gradient Background
- Image Background
- Video Background
Image Background: - Select the Required image for the background. We can set the height and width of the banner image and also get the options for the overlay on the image.
Banner Height Adjustment:-
In this option, we get the two options Fullscreen all the way and set the height.
Full Screen:- This option adjusts the height automatically according to the height of the image.
Set the height:- This option is used to set the height as per your use.
Banner content:- This option is used to add the content in the banner section. The first setting is for content alignment. then add the heading, subheading, and Description in the banner. If we don't want the subheading. we can easily disable the subheading from the button.
CTA Button:- To add the CTA, first enable the CTA button Option. Now Click on the add button. In the end, Add the Button text and link.
CTA / Button Settings:- With these settings, the user can style the button. First, select the button style options to have Default and Gradient.
Following Style settings we have:-
- Adjust the font size
- Change the border wdth
- Choose the text transformation
- Add the border Radius
- Change the button color, text color, background color, and hover color.
Select the layout: - In this option, the user gets the two layouts first is the standard layout. The second is left content with Table.
Standard Setting:- This Option has followed the same layout.
Left Content With Table:- This option provides the text with the table. The user can easily change the content of this section.
Follow these steps to anything in hours Table:-
- First, add the background-color
- Add the table heading
- Set the margin as per the use
- Update the divider gradient color
- Add the office timing
- Update the text color
- Update the border-color
- Change the text size in phone
- Set the phone number
- Add the color in the phone number text.
Gradient background:-
To add the Gradient color in the banner section. first, select the Gradient as the background option. Now select the background color for your banner.
Banner Height Adjustment:-
In this option, we get the two options Fullscreen all the way and set the height.
Full Screen:- This option adjusts the height automatically according to the height of the image.
Set the height:- This option is used to set the height as per your use.
Banner content:- This option is used to add the content in the banner section. The first setting is for content alignment. then add the heading, subheading, and Description in the banner. If we don't want the subheading. we can easily disable the subheading from the button.
CTA Button:- To add the CTA, first enable the CTA button Option. Now Click on the add button. In the end, Add the Button text and link.
CTA / Button Settings:- With these settings, the user can style the button. First, select the button style options to have Default and Gradient.
Following Style settings we have:-
- Adjust the font size
- Change the border wdth
- Choose the text transformation
- Add the border Radius
- Change the button color, text color, background color, and hover color.
Select the layout: - In this option, the user gets the two layouts first is the standard layout. The second is left content with Table.
Standard Setting:- This Option has followed the same layout.
Left Content With Table:- This option provides the text with the table. The user can easily change the content of this section.
Follow these steps to anything in hours Table:-
- First, add the background-color
- Add the table heading
- Set the margin as per the use
- Update the divider gradient color
- Add the office timing
- Update the text color
- Update the border-color
- Change the text size in phone
- Set the phone number
- Add the color in the phone number text.
Video background : -
To add the Video in the banner section. first, select the Video as the background option. Now select the background Video for your banner.
Banner Height Adjustment:-
In this option, we get the two options Fullscreen all the way and set the height.
Full Screen:- This option adjusts the height automatically according to the height of the image.
Set the height:- This option is used to set the height as per your use.
Banner content:- This option is used to add the content in the banner section. The first setting is for content alignment. then add the heading, subheading, and Description in the banner. If we don't want the subheading. we can easily disable the subheading from the button.
CTA Button:- To add the CTA, first enable the CTA button Option. Now Click on the add button. In the end, Add the Button text and link.
CTA / Button Settings:- With these settings, the user can style the button. First, select the button style options to have Default and Gradient.
Following Style settings we have:-
- Adjust the font size
- Change the border wdth
- Choose the text transformation
- Add the border Radius
- Change the button color, text color, background color, and hover color.
Select the layout: - In this option, the user gets the two layouts first is the standard layout. The second is left content with Table.
Standard Setting:- This Option has followed the same layout.
Left Content With Table:- This option provides the text with the table. The user can easily change the content of this section.
Follow these steps to anything in hours Table:-
- First, add the background-color
- Add the table heading
- Set the margin as per the use
- Update the divider gradient color
- Add the office timing
- Update the text color
- Update the border-color
- Change the text size in phone
- Set the phone number
- Add the color in the phone number text.
Color Background:-
To add the color in the banner section. first, select the color as the background option. Now select the background color for your banner.
Banner Height Adjustment:-
In this option, we get the two options Fullscreen all the way and set the height.
Full Screen:- This option adjusts the height automatically according to the height of the image.
Set the height:- This option is used to set the height as per your use.
Banner content:- This option is used to add the content in the banner section. The first setting is for content alignment. then add the heading, subheading, and Description in the banner. If we don't want the subheading. we can easily disable the subheading from the button.
CTA Button:- To add the CTA, first enable the CTA button Option. Now Click on the add button. In the end, Add the Button text and link.
CTA / Button Settings:- With these settings, the user can style the button. First, select the button style options to have Default and Gradient.
Following Style settings we have:-
- Adjust the font size
- Change the border wdth
- Choose the text transformation
- Add the border Radius
- Change the button color, text color, background color, and hover color.
Select the layout: - In this option, the user gets the two layouts first is the standard layout. The second is left content with Table.
Standard Setting:- This Option has followed the same layout.
Left Content With Table:- This option provides the text with the table. The user can easily change the content of this section.
Follow these steps to anything in hours Table:-
- First, add the background-color
- Add the table heading
- Set the margin as per the use
- Update the divider gradient color
- Add the office timing
- Update the text color
- Update the border-color
- Change the text size in phone
- Set the phone number
- Add the color in the phone number text.
Section Edit - 2
Content Settings:-
In this setting the first option, we get the content alignment. Which is helpful to align the content. Then add the heading content. Assign the heading type like <H1>,<H2>,<H3>.
Heading Style:-
In this setting, we get the option to color the font, assign the font size, font weight, text transformation, font style, and line-height.
Advanced Options:-
In the advanced option, we get the settings to align the heading and provide the top, bottom spacing according to use. We Have also the option to add animations in these settings.
Now add the description content. Here we can disable the description when we don't want the description content. Also here we have the options to add the description color.
Grid Control:-
The grid control setting is used to assign the column. We can easily change the column from the given option.
Content Box Controls:-
This option provides the user to add the content and images in the content box. Here we have the option to add, remove and delete the boxes.
To add the Box please add the followings:-
- Add the image or icons
- Set the height and width
- Add the heading and subheading
- Add the description content
- Add the button if you want
Button Style:-
This option is used to add Style the button. We get many options to design the button like background color, text color font color, etc.
Add Social links: - This option is used to add social links.
To add the Social icons please add the followings:-
- Add the icon or image
- Set the height and width
- Add the Social links
Box Style:-
With this option, we can change the background of the box. Here we get the Two options, First is Background color and second is background gradient. Also, we get the option to change the hover color.
Text Style Setting:-
With this setting, the user can change the font style also they have the option to change the color and text transformation.
Section Edit - 3
Clear Image Module:- This module is used to display images with different styles and animation.
first, we get the options to add the image. With the custom options, we can set the width and height.
Edit following in Advance Setting:-
- Select the entrance Animation
- Add the Delay
- Add the border style
- Adjust the border width
- Add the border-color
- Adjust the border Radius
- Adjust the Box shadow
Hover Effects Settings:- In this setting, we have many effective options. We can use different hover effects in different images.
Content Settings:-
In the last, we get the option to add the content to the image. So first we get the fields to add the heading content. then add sub-content in the given fields. here also we get the option to add the link also.
Overlay Color:- With this option, we can add the color overlay on the image and also adjust the overlay percentage.
Grid Control:-
The grid control setting is used to assign the column. We can easily change the column from the given option.
Content Box Controls:-
This option provides the user to add the content and images in the content box. Here we have the option to add, remove and delete the boxes.
To add the Box please add the followings:-
- Add the image or icons
- Set the height and width
- Add the heading and subheading
- Add the description content
- Add the button if you want
Button Style:-
This option is used to add Style the button. We get many options to design the button like background color, text color font color, etc.
Add Social links: - This option is used to add social links.
To add the Social icons please add the followings:-
- Add the icon or image
- Set the height and width
- Add the Social links
Box Style:-
With this option, we can change the background of the box. Here we get the Two options, First is Background color and second is background gradient. Also, we get the option to change the hover color.
Text Style Setting:-
With this setting, the user can change the font style also they have the option to change the color and text transformation.
Section Edit - 4
Clear Image Module:- This module is used to display images with different styles and animation.
first, we get the options to add the image. With the custom options, we can set the width and height.
Edit following in Advance Setting:-
- Select the entrance Animation
- Add the Delay
- Add the border style
- Adjust the border width
- Add the border-color
- Adjust the border Radius
- Adjust the Box shadow
Hover Effects Settings:- In this setting, we have many effective options. We can use different hover effects in different images.
Content Settings:-
In the last, we get the option to add the content to the image. So first we get the fields to add the heading content. then add sub-content in the given fields. here also we get the option to add the link also.
Overlay Color:- With this option, we can add the color overlay on the image and also adjust the overlay percentage.
Grid Control:-
The grid control setting is used to assign the column. We can easily change the column from the given option.
Content Box Controls:-
This option provides the user to add the content and images in the content box. Here we have the option to add, remove and delete the boxes.
To add the Box please add the followings:-
- Add the image or icons
- Set the height and width
- Add the heading and subheading
- Add the description content
- Add the button if you want
Button Style:-
This option is used to add Style the button. We get many options to design the button like background color, text color font color, etc.
Add Social links: - This option is used to add social links.
To add the Social icons please add the followings:-
- Add the icon or image
- Set the height and width
- Add the Social links
Box Style:-
With this option, we can change the background of the box. Here we get the Two options, First is Background color and second is background gradient. Also, we get the option to change the hover color.
Text Style Setting:-
With this setting, the user can change the font style also they have the option to change the color and text transformation.
Section Edit - 5
Add Video:-
This option is used to add the video link. Here we have to add the embedded link of any video.
Row Height:- With this setting, we can adjust the height of the background image as per the use.
Set Background:- With this option, we can change the background Style. Here we have the choice between Color, Gradient and background image.
Background Color:- When we select the color as the background option. We get the option to select the color which we want to use in the background and image for the play button.
Add content:- Here we get the option to add the content. Also, We can select the content option.
Typography Style: - This setting is used to style the text color and font size also.
We can change/update the following things:-
- Change the font color
- Update the text Transformation
- Change the heading Color
- Select the font-weight
- Adjust the Spacing
Grid Control:-
The grid control setting is used to assign the column. We can easily change the column from the given option.
Content Box Controls:-
This option provides the user to add the content and images in the content box. Here we have the option to add, remove and delete the boxes.
To add the Box please add the followings:-
- Add the image or icons
- Set the height and width
- Add the heading and subheading
- Add the description content
- Add the button if you want
Button Style:-
This option is used to add Style the button. We get many options to design the button like background color, text color font color, etc.
Add Social links: - This option is used to add social links.
To add the Social icons please add the followings:-
- Add the icon or image
- Set the height and width
- Add the Social links
Box Style:-
With this option, we can change the background of the box. Here we get the Two options, First is Background color and second is background gradient. Also, we get the option to change the hover color.
Text Style Setting:-
With this setting, the user can change the font style also they have the option to change the color and text transformation.
Section Edit - 6
Content Settings:-
In this setting the first option, we get the content alignment. Which is helpful to align the content. Then add the heading content. Assign the heading type like <H1>,<H2>,<H3>.
Heading Style:-
In this setting, we get the option to color the font, assign the font size, font weight, text transformation, font style, and line-height.
Advanced Options:-
In the advanced option, we get the settings to align the heading and provide the top, bottom spacing according to use. We Have also the option to add animations in these settings.
Now add the description content. Here we can disable the description when we don't want the description content. Also here we have the options to add the description color.
Clear Custom Form:-
This custom form is very useful to use. Users can update the form as per the use. All the settings we need to a style a form is available in this module.
Row Setting:-
This option is used to add the background in the form background. the user can easily pick any of the backgrounds for form. And Update the required changes in the from the background.
Please update following for form setting:-
- Adjust the form settings
- Apply form Radius
- Choose the input style
- Use margin-bottom for bottom space
- Use Border bottom option for borders style
- Select the button size
- Add the background-color
- Add the hover color
- Save
Row Settings:- These settings have the option to design the Row Here we get the many options to style Rows with the Different Ways.
We have the following setting and changes in Row setting:-
- Select the background and set the color images
- Select the section width
- Set the spacing top/bottom
Add the heading content:- In this module, we have the option to add the heading and description. Also when we don't want to add the content. So we can disable the heading option.
Add the logo Slider: - This setting is used to add the logos. Please click on the add button. And we get the option to add the image.
Disable Slider dots:- Here user gets the option to add or remove the slider dots.
Logo Settings:- In this module, we get the many options to style the logos.
We have the following option to style the logo settings:-
- Set the background color
- Set the height of the logo
- Adjust the spacing
- Set the logo width
- Set the logo effect
- Save and Apply