1. Help Center
  2. Marketplace
  3. Clear Real Estate Templates

Clear Real Estate About Template

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 Clear Real Estate About  Page Template easily.

If you have any Sales or Support related questions, you can anytime reach us at hello@webdew.com or visit this page.

Let's see how it Works:-

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.

about-us1

We have the following options for the Background:-

- Image Background
- Color Background
- Gradient Background
- Image Background
- Video Background

 

                                          Banner1

 

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.

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

Background-height

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.

heading-that

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.

button1

CTA / Button Settings:- With these settings, the user can style the button. First, select the button style options to have Default and Gradient.

buttontype

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.

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

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

cleardredients

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.

Background-height

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.

heading-that

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.

button1

CTA / Button Settings:- With these settings, the user can style the button. First, select the button style options to have Default and Gradient.

buttontype

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.

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

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

videobanner

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.

Background-height

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.

heading-that

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.

button1

CTA / Button Settings:- With these settings, the user can style the button. First, select the button style options to have Default and Gradient.

buttontype

Following Style settings we have:-
- Adjust the font size
- Change the border width
- 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.

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

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

colorone

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.

Background-height

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.

heading-that

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.

button1

CTA / Button Settings:- With these settings, the user can style the button. First, select the button style options to have Default and Gradient.

buttontype

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.

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

the-text

Section Edit - 2

Edit Real Estate - Title:-

With this module, we can add the heading and subheading of the section. Here we have the option to assign the color in particular content or text.

images-o

Edit the section content & image:- 

This section is made with two modules. On the left side, we have used the text module and on the right side, we have used the image module.

print1-secreen

Edit Real Estate - Text-

With this module, we can add the heading and subheading of the section. Here we have the option to assign the color in particular content or text.

text-section

Edit Clear Image Module:- This module is used to display images with different styles and animation.

edit-1

first, we get the options to add the image. With the custom options, we can set the width and height.edit-1

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 shadowgif101

Hover Effects Settings:- In this setting, we have many effective options. We can use different hover effects in different images.

image-one

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.

amster-text

Overlay Color:- With this option, we can add the color overlay on the image and also adjust the overlay percentage.

image-over

Section Edit - 3

Edit Real Estate - Title:-

With this module, we can add the heading and subheading of the section. Here we have the option to assign the color in particular content or text.

text-section1

Row Settings:-

This option is very useful to give spacing from the top bottom. Please add the number in a given field for spacing, also we have the option of range parameter.

text-image

Background Style:- This setting gives us the option to add the background with image, color, and gradient. text-image

Heading display options:- In some sections, we don't want the heading and sub-heading. Where we can use this option to disable the heading content.

                                                     

                                                            testi-box

Team Layout Options:-

This option is used for layout purposes. Here we have two options Layout 1 and Layout 2.
Each option Layout is very useful and builds a simple and unique design.

layout1-secree

Layout 1

In this section first, we get the option to add the heading and the subheading.

layout-1-design

Add the Team Member:-

- First, add the team member image. Here we have the option to set the height and width as per the use.

- Add the name and designation of the member
- Add the member description
- Save

                                     team1

In the Team Style Settings, We can change & update the following:-

- Adjust the heading font size
- Change Heading font color
- Change Text transformation
- Update Text color
- Save  

Item Show Settings:-

With the help of this setting, the user can assign the items to be shown on desktop, tablet, and mobile. We have to just add the number in the given field, it automatically adjusts the layout.

items-show

Layout 2

Add the Team Member:-

- First, add the team member image. Here we have the option to set the height and width as per the use.

- Add the name and designation of the member
- Add the member description
- Save

                                     team1

 

In the Team Style Settings, We can change & update the following:-

- Adjust the heading font size
- Change Heading font color
- Change Text transformation
- Update Text color
- Save

Item Show Settings:-

With the help of this setting, the user can assign the items to be shown on desktop, tablet, and mobile. We have to just add the number in the given field, it automatically adjusts the layout.

clear team desk

Section Edit - 3

Edit Real Estate - Title:-

With this module, we can add the heading and subheading of the section. Here we have the option to assign the color in particular content or text.

get-more

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.

formedit

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.

image 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

Edit Section Image:-

Edit Clear Image Module:- This module is used to display images with different styles and animation.

image-one

first, we get the options to add the image. With the custom options, we can set the width and height.image-one

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 shadowgif101

Hover Effects Settings:- In this setting, we have many effective options. We can use different hover effects in different images.

image-one

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.

amster-text

Overlay Color:- With this option, we can add the color overlay on the image and also adjust the overlay percentage.

image-over

Section Edit - 4

Edit Real Estate - Title:-

With this module, we can add the heading and subheading of the section. Here we have the option to assign the color in particular content or text.

edit-text-section

Heading Options:-

This option is very useful for us. somewhere we don't want the heading. then we can use this option to disable the heading.

                                                 

                                                        testi-box

Heading Content:- Here we get the option to add the heading content and subheading content.

heading-testi

In heading Title Style we can update the following:-

- Change heading color
- Adjust the heading font size
- Adjust the heading space top/bottom
- Change the subheading color and font size

 

                                 heading style testi

Client Testimonial:-

This option provides to add the client testimonial. first, we have to click on the add button, where we get the option to add the author image and we can adjust the height and width of the image.

testimonial

Now add the Client name, Client Review and Client Designation.

                                           

                                                       testi heading content

Row Settings : -

Style settings:- In the style settings, we get different options for the background like color, gradient, and image. So first we have to select anyone from that and apply the given changes.

bakground img

Carousel settings:-

This setting is used for carousel items. Here we can set the slides or items, like how many items and slides display in desktop, tab, and mobile view. Here we have also options for the autoplay. we can also get the options in navigations between dots or nav and set the color.

                           

                                carousel

Style Testimonial:-

In the Style Testimonial, we can update and change followings:-

- Adjust the Test Alignment
- Enable/disable Author Image
- Enable / disable Column Background color
- Adjust the Author Image style like. Circle, square and radius
- Change the Author image size
- Adjust the font size
- Change the font color
- Adjust the line-height

                           carousel123

Image Alignment:- With the help of this option we can align the image Left/ right.

imagealignment