# Websites Overview > Learn how to use GHL Customer Care Websites (Site Builder) to create pages with sections, rows, and elements, manage navigation, and publish a complete website. - Source: https://docs.ghlcustomercare.com/docs/sites/funnels-and-websites/websites-overview - Section: Sites / Funnels and Websites - Reading time: 20 min - Images: 34, each explained below --- Ready to create that amazing GHL Customer Care site for your viewers to visit? Well in this article, we will walk through our Site Builder, Settings, and much more. It’s time to LevelUp your business! --- **TABLE OF CONTENTS** - [What are Sites?](#what-are-sites) - [Should I Use Funnels or Websites?](#should-i-use-funnels-or-websites) - [Getting Started with Site Templates](#getting-started-with-site-templates) - [Getting Started with Funnel AI](#getting-started-with-funnel-ai) - [Site Builder Overview](#site-builder-overview) - [Adding a New Element](#adding-a-new-element) - [Padding and Margin](#padding-and-margin) - [Moving an Element](#moving-an-element) - [Reordering Columns (Quick Steps)](#reordering-columns-quick-steps) - [Cloning an Element](#cloning-an-element) - [Pop Up Settings](#pop-up-settings) - [SEO Meta Data](#seo-meta-data) - [Preview Custom Code](#preview-custom-code) - [2 Column Mode Versus Auto Mode](#2-column-mode-versus-auto-mode) - [Undo/Redo](#undo-redo) - [Versions, Preview, Save, and Publish](#versions-preview-save-and-publish) - [Editing the Mobile View of Your Site](#editing-the-mobile-view-of-your-site) - [Mobile Mode](#mobile-mode) - [Changing Object Visibility to Mobile/Desktop Only](#changing-object-visibility-to-mobile-desktop-only) - [Mobile Responsiveness Settings](#mobile-responsiveness-settings) - [Site Settings & Publishing](#site-settings-and-publishing) - [Attaching a Product to Your Site Page (Order Forms)](#attaching-a-product-to-your-site-page-order-forms) - [Site Stats](#site-stats) - [Site Sales](#site-sales) - [Site Settings](#site-settings) - [Publishing/Page Settings](#publishing-page-settings) - [Frequently Asked Questions](#frequently-asked-questions) --- # **What are Sites?** Sites give you the ability to create client-facing websites within GHL Customer Care. Create that perfect home page for your business. Whip up a landing page to capture more leads. The possibilities are endless. Within GHL Customer Care, we have two types of Site Builders; while they are similar they do have different functionality.  Let’s review each type of Site. - **Funnels:** In general, funnels have a very direct sequence of pages, which is why we offer split testing on funnels only. Funnels are a step-by-step series of web pages, generally used for a specific purpose like capturing leads or booking appointments. [](#What-Are-Funnels?)[](#What-Are-Funnels?)[](#What-Are-Funnels?) - **Websites:** A place to build web pages for any use case, such as a homepage for your business. There is generally no path of progression that contacts are led through, which is why we do not offer split testing on websites.  Though you can use websites for much the same reasons as funnels, websites are different in some small ways. --- ## **Should I Use Funnels or Websites?**[](#getting-started-with-site-templates) In all but a few ways, Funnels and Websites are the same. They both house a group of webpages and they can be used for various purposes despite which one you choose. What matters is if you want to use a Split Testing feature on a web page and the page views UI. The main differences between funnels and websites: - [](https://docs.ghlcustomercare.com/docs/sites/funnels-and-websites/split-testing-in-funnels)[](https://docs.ghlcustomercare.com/docs/sites/funnels-and-websites/split-testing-in-funnels)[Split Testing in Funnels](https://docs.ghlcustomercare.com/docs/sites/funnels-and-websites/split-testing-in-funnels) - You can only split test on Funnels. Split Testing in funnels is when you create a variation of a page to see which is better. - [](https://docs.ghlcustomercare.com/docs/e-commerce-store/e-commerce-store/how-to-set-up-an-e-commerce-online-store-websites)[](https://docs.ghlcustomercare.com/docs/e-commerce-store/e-commerce-store/how-to-set-up-an-e-commerce-online-store-websites)[eCommerce (Online Store)](https://docs.ghlcustomercare.com/docs/e-commerce-store/e-commerce-store/how-to-set-up-an-e-commerce-online-store-websites) - Only websites can create and utilize the eCommerce (Online Store) feature. - Page View UI - There are different page view UI depending on if you are in the funnel or website views.  [](https://jumpshare.com/v/EYj1rhiKilai8dJ5DxzU) ![Should I Use Funnels or Websites? (image 1 of 34)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037847868/original/CAuF9LotWoqox385UOXQgWQWMlAiJ515PA.png) **Should I Use Funnels or Websites? (image 1 of 34)** This screenshot appears in the "Should I Use Funnels or Websites?" section of "Websites Overview". The text alongside this image reads: Split Testing in Funnels - You can only split test on Funnels. Split Testing in funnels is when you create a variation of a page to see which is better. eCommerce (Online Store) - Only websites can create and utilize the eCommerce (Online Store) feature. Page View UI - There are different page…. Immediately after, the guide continues: When you go to create a new site, you will have the option to choose from hundreds of templates. Once you have selected a template, you can edit any or all of the parts when you have selected it. We encourage you to check out them all! - What this covers: Split Testing in Funnels - You can only split test on Funnels. Split Testing in funnels is when you create a variation of a page to see which is better. eCommerce (Online Store) - Only websites can create and utilize the eCommerce (Online Store) feature. Page View UI - There are different page view UI depending on if you are in the funnel or website views. - Next: When you go to create a new site, you will have the option to choose from hundreds of templates. Once you have selected a template, you can edit any or all of the parts when you have selected it. We encourage you to check out them all! Full procedure: 1. Split Testing in Funnels - You can only split test on Funnels. Split Testing in funnels is when you create a variation of a page to see which is better. 2. eCommerce (Online Store) - Only websites can create and utilize the eCommerce (Online Store) feature. 3. Page View UI - There are different page view UI depending on if you are in the funnel or website views. --- ## **Getting Started with Site Templates** When you go to create a new site, you will have the option to choose from hundreds of templates. Once you have selected a template, you can edit any or all of the parts when you have selected it. We encourage you to check out them all!  After selecting the template it will load the template. If you aren’t already, navigate into one of the pages by clicking “Edit” page to open up the site builder to edit a specific page. ![Getting Started with Site Templates (image 2 of 34)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037848015/original/yg-l6vmXyYdQr3w8ja3d4w33rG9w-l7NzQ.png) **Getting Started with Site Templates (image 2 of 34)** This screenshot appears in the "Getting Started with Site Templates" section of "Websites Overview". The text alongside this image reads: After selecting the template it will load the template. If you aren’t already, navigate into one of the pages by clicking “Edit” page to open up the site builder to edit a specific page. Immediately after, the guide continues: When you go to create a new funnel, we have a new feature of creating a funnel using AI. Once you select funnel AI, you can select your desired domain/industry which suits the best according to your requirements. - What this covers: After selecting the template it will load the template. If you aren’t already, navigate into one of the pages by clicking “Edit” page to open up the site builder to edit a specific page. - Next: When you go to create a new funnel, we have a new feature of creating a funnel using AI. Once you select funnel AI, you can select your desired domain/industry which suits the best according to your requirements. --- ## **Getting Started with Funnel AI** When you go to create a new funnel, we have a new feature of creating a funnel using AI. Once you select funnel AI, you can select your desired domain/industry which suits the best according to your requirements. ![Getting Started with Funnel AI (image 3 of 34)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037848309/original/sO-FbiUvERb6d0YnvkndribWb71Lli59lw.gif) **Getting Started with Funnel AI (image 3 of 34)** This animation appears in the "Getting Started with Funnel AI" section of "Websites Overview". The text alongside this image reads: When you go to create a new funnel, we have a new feature of creating a funnel using AI. Once you select funnel AI, you can select your desired domain/industry which suits the best according to your requirements. Immediately after, the guide continues: Please Note: You'll be charged $0.99 after 5 free generations. - What to choose: When you go to create a new funnel, we have a new feature of creating a funnel using AI. Once you select funnel AI, you can select your desired domain/industry which suits the best according to your requirements. - Next: Please Note: You'll be charged $0.99 after 5 free generations. **Please Note:** You'll be charged $0.99 after 5 free generations. After proceeding we can now select our own design preferences, based on design preferences and content preferences too. Allow the AI a few moments and your design template is ready! --- ## **Site Builder Overview** The same functionality and hierarchy of elements exist in both the Funnel and Site Builder. Let's hop in and check out our Site Builder and how you use it to create sites. **Site Builder Navigation Bar** The site builder navigation bar lives at the top of the builder and allows you to toggle between all of the various features. We will review each of these tabs below. ![Site Builder Overview (image 4 of 34)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037892421/original/kOQUF5bxpP2UpxrOWkP2KWui9UhXoHwlQg.png) **Site Builder Overview (image 4 of 34)** This screenshot appears in the "Site Builder Overview" section of "Websites Overview". The text alongside this image reads: The site builder navigation bar lives at the top of the builder and allows you to toggle between all of the various features. We will review each of these tabs below. Immediately after, the guide continues: Rows and columns are the building blocks of your site and are used to house elements. To add an element, like an image, you need at least one section, one row, and one column. Then you will be prompted to add an element. There are many…. - What to choose: The site builder navigation bar lives at the top of the builder and allows you to toggle between all of the various features. We will review each of these tabs below. - Controls: Site Builder Navigation Bar - Next: Rows and columns are the building blocks of your site and are used to house elements. To add an element, like an image, you need at least one section, one row, and one column. Then you will be prompted to add an element. There are many elements, each element is unique. --- ## **Adding a New Element** Rows and columns are the building blocks of your site and are used to house elements. To add an element, like an image, you need at least one section, one row, and one column. Then you will be prompted to add an element. There are many elements, each element is unique. **Note:** Page Builder elements now use refreshed default styling (updated typography, placeholder images/content, and default colors) so new pages look more modern out of the box. You can still override styles using the right sidebar settings, the Color Picker, or your Brand Board. Now let’s add an element to your site. In the top right of your site editor, select Add Element to view what you can add. To find elements faster, use the Quick Add Search. You can search with common or related keywords, even if you do not know the exact element name. For example, headline or title to find Heading, booking or schedule to find Calendar, or slider to find Image Slider. Once you find the element you want, click and drag it to the area you prefer. When you choose images or files while editing Funnels or Sites, the media picker opens in a modal and supports on-the-fly uploads via drag-and-drop. ![Adding a New Element (image 5 of 34)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037892771/original/hSF08VfaaSAKddbMW1YdH7_ekjx_TC3eOQ.gif) **Adding a New Element (image 5 of 34)** This animation appears in the "Adding a New Element" section of "Websites Overview". The text alongside this image reads: When you choose images or files while editing Funnels or Sites, the media picker opens in a modal and supports on-the-fly uploads via drag-and-drop. Immediately after, the guide continues: Every element on a webpage requires a section. Within this section, you need to have at least one row. This row needs to have at least one column. Adding all three of these (Section > Column > Row) we are then able to add an element from…. - What to choose: When you choose images or files while editing Funnels or Sites, the media picker opens in a modal and supports on-the-fly uploads via drag-and-drop. - Next: Every element on a webpage requires a section. Within this section, you need to have at least one row. This row needs to have at least one column. Adding all three of these (Section > Column > Row) we are then able to add an element from the + Add Element bar. ### **Understanding Element Nesting** Every element on a webpage requires a section. Within this section, you need to have at least one row. This row needs to have at least one column. Adding all three of these (Section > Column > Row) we are then able to add an element from the **\+ Add Element** bar. From largest to smallest, we have: Sections (Green) > Rows (Blue) > Columns (Pink) > Elements (Orange) **Note:** The hierarchy still exists (Sections → Rows → Columns → Elements), but with Enhanced Drag & Drop, the builder can auto-create the structure when you drop elements onto the canvas ![Understanding Element Nesting (image 6 of 34)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155016416833/original/DnfQCyv0NrNZdsKFMrKXJu3e2uRQu8KhCg.png) **Understanding Element Nesting (image 6 of 34)** This screenshot appears in the "Understanding Element Nesting" section of "Websites Overview". The text alongside this image reads: Note: The hierarchy still exists (Sections → Rows → Columns → Elements), but with Enhanced Drag & Drop, the builder can auto-create the structure when you drop elements onto the canvas. Immediately after, the guide continues: About sections, rows, and columns... - What this covers: Note: The hierarchy still exists (Sections → Rows → Columns → Elements), but with Enhanced Drag & Drop, the builder can auto-create the structure when you drop elements onto the canvas - Controls: + Add Element - Next: About sections, rows, and columns... Full procedure: 1. You cannot add a section within a section. Nor can you add a Row within a row or a column within a column. You also cannot add an element within an element. 2. You can add multiple rows into a section. Within a row, you can add multiple columns. Within a column, you can add multiple elements. 3. You must have at least one section, one row, and one column to add an element. About sections, rows, and columns... 1. You cannot add a section within a section. Nor can you add a Row within a row or a column within a column. You also cannot add an element within an element. 2. You can add multiple rows into a section. Within a row, you can add multiple columns. Within a column, you can add multiple elements. 3. You must have at least one section, one row, and one column to add an element. --- ### **Element Settings** To edit a specific section, row, column, or element, hover over the element then click on the gear setting icon that appears. In addition, clicking on any part of the element will also automatically open the pop-out settings menu on the right.  ![Element Settings (image 7 of 34)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037895259/original/KOlM0cCLvHriHUm6DSl-Kd7ipW6PMWAETA.png) **Element Settings (image 7 of 34)** This screenshot appears in the "Element Settings" section of "Websites Overview". The text alongside this image reads: To edit a specific section, row, column, or element, hover over the element then click on the gear setting icon that appears. In addition, clicking on any part of the element will also automatically open the pop-out settings menu on the right. Immediately after, the guide continues: Within these settings, you can add padding, margin, change visibility, and much more. Also, note the "General" and Advanced Tabs which offer more settings you can use to make your site great. - What to click: To edit a specific section, row, column, or element, hover over the element then click on the gear setting icon that appears. In addition, clicking on any part of the element will also automatically open the pop-out settings menu on the right. - Next: Within these settings, you can add padding, margin, change visibility, and much more. Also, note the "General" and Advanced Tabs which offer more settings you can use to make your site great. Within these settings, you can add padding, margin, change visibility, and much more. Also, note the "General" and Advanced Tabs which offer more settings you can use to make your site great. --- ## **Padding and Margin** When you want to move or put space between an element on your webpage - you are going to be adjusting the Padding or Margin. This is done within the object settings, clicking on the object will pop out this settings menu on the right. **Padding** \- This will add space WITHIN a section, row, column, or element. Padding will add space from the outside of the object inward.  **Margin** - This will add distance OUTSIDE of a section, row, column, or element. Giving space between other objects. --- ## **Moving an Element** You can move an object by using the up or down arrows seen when hovering over the object. This will shift the element up or down based on the elements around it. In addition, you can move an object by hovering over the object, and then clicking and holding the move icon. This will let you move the object. Release the held click to drop it into its new place. ![Moving an Element (image 8 of 34)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037895757/original/be6Ukb483TviZIsk_FOVE_kwSkT5R6dH3A.png) **Moving an Element (image 8 of 34)** This screenshot appears in the "Moving an Element" section of "Websites Overview". The text alongside this image reads: You can move an object by using the up or down arrows seen when hovering over the object. This will shift the element up or down based on the elements around it. In addition, you can move an object by hovering over the object, and then clicking and holding the move icon. This will let you move the…. Immediately after, the guide continues: You can move an object in two ways. - What to click: You can move an object by using the up or down arrows seen when hovering over the object. This will shift the element up or down based on the elements around it. In addition, you can move an object by hovering over the object, and then clicking and holding the move icon. This will let you move the object. Release the held click to drop it into its new place. - Controls: Enhanced Drag & Drop, Agency View → Labs - Next: You can move an object in two ways: Full procedure: 1. Option 1: Up/Down arrows (when available) move the object up or down based on nearby elements. 2. Option 2: Drag-and-drop: Grab anywhere on the object and drag it to a new location, then release to drop (no move icon/handle required). You can move an object in two ways: - **Option 1:** Up/Down arrows (when available) move the object up or down based on nearby elements. - **Option 2:** Drag-and-drop: Grab anywhere on the object and drag it to a new location, then release to drop (no move icon/handle required).  When **Enhanced Drag & Drop** is enabled in **Agency View → Labs**, you can also move elements by dragging from anywhere on the element. ## **Reordering Columns (Quick Steps)** ### 1. Hover over the row to reveal column boundaries and drop zones. 2. Drag the column left or right within the same row. 3. Drop when the placement indicator shows the new position. 4. Review tablet/mobile views to confirm the responsive order still looks correct. **Note:** Reordering is currently scoped to the same row. (Needs Confirmation: whether cross-row moves are supported.) --- ## **Cloning an Element** Hovering over any object will give you the ability to clone that object and everything within it. All settings and objects within the cloned section will be duplicated and then added below. This is great when you have a format or object that you want to use again or somewhere else on the site page. ![Cloning an Element (image 9 of 34)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037896447/original/NAeJWJHwNk3MZ5LVYtq37yXfLHt1csFdOQ.png) **Cloning an Element (image 9 of 34)** This screenshot appears in the "Cloning an Element" section of "Websites Overview". The text alongside this image reads: Hovering over any object will give you the ability to clone that object and everything within it. All settings and objects within the cloned section will be duplicated and then added below. This is great when you have a format or object that you want to use again or somewhere else on the site page. Immediately after, the guide continues: If you need to delete or remove an object, hover over the object then select the trash can symbol. This will delete the object. You can use the Undo/Redo to add it back if you need to. - What this covers: Hovering over any object will give you the ability to clone that object and everything within it. All settings and objects within the cloned section will be duplicated and then added below. This is great when you have a format or object that you want to use again or somewhere else on the site page. - Next: If you need to delete or remove an object, hover over the object then select the trash can symbol. This will delete the object. You can use the Undo/Redo to add it back if you need to. ### **Deleting an Element** If you need to delete or remove an object, hover over the object then select the trash can symbol. This will delete the object. You can use the Undo/Redo to add it back if you need to. ![Deleting an Element (image 10 of 34)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037896603/original/rLLWqKRHu9JlmdAxVlZpp29PAdyYDmA6ew.png) **Deleting an Element (image 10 of 34)** This screenshot appears in the "Deleting an Element" section of "Websites Overview". The text alongside this image reads: If you need to delete or remove an object, hover over the object then select the trash can symbol. This will delete the object. You can use the Undo/Redo to add it back if you need to. Immediately after, the guide continues: Layers help you view all of the various objects and how they are nested within the Website Object Hierarchy. Helpful when you have misplaced an object or hidden it from both mobile and desktop view. - What to choose: If you need to delete or remove an object, hover over the object then select the trash can symbol. This will delete the object. You can use the Undo/Redo to add it back if you need to. - Next: Layers help you view all of the various objects and how they are nested within the Website Object Hierarchy. Helpful when you have misplaced an object or hidden it from both mobile and desktop view. ### **Layers** Layers help you view all of the various objects and how they are nested within the Website Object Hierarchy. Helpful when you have misplaced an object or hidden it from both mobile and desktop view. ![Layers (image 11 of 34)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037896897/original/q5g_wuAj9elgIDCrHXCDc1c2Z-Lj4V3_wg.png) **Layers (image 11 of 34)** This screenshot appears in the "Layers" section of "Websites Overview". The text alongside this image reads: Layers help you view all of the various objects and how they are nested within the Website Object Hierarchy. Helpful when you have misplaced an object or hidden it from both mobile and desktop view. Immediately after, the guide continues: View and navigate to other web pages within your Funnel or Website from the pages tab. Giving you the ability to quickly move between web pages when editing multiple web pages. You can access this tab from both the right and middle site…. - What this covers: Layers help you view all of the various objects and how they are nested within the Website Object Hierarchy. Helpful when you have misplaced an object or hidden it from both mobile and desktop view. - Next: View and navigate to other web pages within your Funnel or Website from the pages tab. Giving you the ability to quickly move between web pages when editing multiple web pages. You can access this tab from both the right and middle site builder navigation bar. ### **Pages** View and navigate to other web pages within your Funnel or Website from the pages tab. Giving you the ability to quickly move between web pages when editing multiple web pages. You can access this tab from both the right and middle site builder navigation bar. ![Pages (image 12 of 34)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037897228/original/v2L-D28zl_JgZ516_FI48vyZIIa698cjJA.png) **Pages (image 12 of 34)** This screenshot appears in the "Pages" section of "Websites Overview". The text alongside this image reads: View and navigate to other web pages within your Funnel or Website from the pages tab. Giving you the ability to quickly move between web pages when editing multiple web pages. You can access this tab from both the right and middle site builder navigation bar. Immediately after, the guide continues: In the event you would like to add a tracking code to the header or footer of your webpage, you can do so from this Tracking Code page. - What this covers: View and navigate to other web pages within your Funnel or Website from the pages tab. Giving you the ability to quickly move between web pages when editing multiple web pages. You can access this tab from both the right and middle site builder navigation bar. - Next: In the event you would like to add a tracking code to the header or footer of your webpage, you can do so from this Tracking Code page. ### **Tracking Code** In the event you would like to add a tracking code to the header or footer of your webpage, you can do so from this Tracking Code page. ![Tracking Code (image 13 of 34)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037897973/original/MzfHqtqyAIE_lB5kP4qgrzyGvfvzBmeOZQ.png) **Tracking Code (image 13 of 34)** This screenshot appears in the "Tracking Code" section of "Websites Overview". The text alongside this image reads: In the event you would like to add a tracking code to the header or footer of your webpage, you can do so from this Tracking Code page. Immediately after, the guide continues: When you want to add custom CSS to your website to your website, you can from the custom CSS tab. You can consult a developer for how to use and create a code for your unique needs. - What this covers: In the event you would like to add a tracking code to the header or footer of your webpage, you can do so from this Tracking Code page. - Next: When you want to add custom CSS to your website to your website, you can from the custom CSS tab. You can consult a developer for how to use and create a code for your unique needs. ### **Custom CSS** When you want to add custom CSS to your website to your website, you can from the custom CSS tab. You can consult a developer for how to use and create a code for your unique needs. ![Custom CSS (image 14 of 34)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037897799/original/CekQXF8ZeS7yReGWnQ2q0Cys8OXixvCW3w.png) **Custom CSS (image 14 of 34)** This screenshot appears in the "Custom CSS" section of "Websites Overview". The text alongside this image reads: When you want to add custom CSS to your website to your website, you can from the custom CSS tab. You can consult a developer for how to use and create a code for your unique needs. Immediately after, the guide continues: You can change the default font for your webpage headlines and content as well as your text and link colors within the typography. - What this covers: When you want to add custom CSS to your website to your website, you can from the custom CSS tab. You can consult a developer for how to use and create a code for your unique needs. - Next: You can change the default font for your webpage headlines and content as well as your text and link colors within the typography. ### **Typography** You can change the default font for your webpage headlines and content as well as your text and link colors within the typography. ![Typography (image 15 of 34)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037898093/original/3MYjaiNHJ9_IAlVpMCXkwd9UWaNupUxD9g.png) **Typography (image 15 of 34)** This screenshot appears in the "Typography" section of "Websites Overview". The text alongside this image reads: You can change the default font for your webpage headlines and content as well as your text and link colors within the typography. Immediately after, the guide continues: To change the default background image or background color of your webpage you can select the Background tab. This will add a background behind your sections. If you have a background image or color set on a section, row, column, or…. - What this covers: You can change the default font for your webpage headlines and content as well as your text and link colors within the typography. - Next: To change the default background image or background color of your webpage you can select the Background tab. This will add a background behind your sections. If you have a background image or color set on a section, row, column, or element, it will be behind this. ### **Background ** To change the default background image or background color of your webpage you can select the Background tab. This will add a background behind your sections. If you have a background image or color set on a section, row, column, or element, it will be behind this. ![Background (image 16 of 34)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037898231/original/Xy0T7GQvISncWbZ1NrHrYVWgZA02xeN4Lw.png) **Background (image 16 of 34)** This screenshot appears in the "Background" section of "Websites Overview". The text alongside this image reads: To change the default background image or background color of your webpage you can select the Background tab. This will add a background behind your sections. If you have a background image or color set on a section, row, column, or element, it will be behind this. Immediately after, the guide continues: Want to set a video background for a Section? Learn how here: Video Background. - What to choose: To change the default background image or background color of your webpage you can select the Background tab. This will add a background behind your sections. If you have a background image or color set on a section, row, column, or element, it will be behind this. - Next: Want to set a video background for a Section? Learn how here: Video Background Want to set a video background for a Section? Learn how here: _[Video Background](https://docs.ghlcustomercare.com/docs/sites/funnels-and-websites/video-background)_ --- ## **Pop Up Settings** Most users dislike pop-ups, but the sad fact is that they still convert rather well, despite their bad rap. When you want to add a popup, you can do so from the Pop Up. After selecting it, you will use the pop-out setting menu on the right to edit the properties. ![Pop Up Settings (image 17 of 34)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037898431/original/-PYgTWlbqH5WqlRSm1RPjjJLZl084lr3Ng.png) **Pop Up Settings (image 17 of 34)** This screenshot appears in the "Pop Up Settings" section of "Websites Overview". The text alongside this image reads: Most users dislike pop-ups, but the sad fact is that they still convert rather well, despite their bad rap. When you want to add a popup, you can do so from the Pop Up. After selecting it, you will use the pop-out setting menu on the right to edit the properties. Immediately after, the guide continues: You can show a pop-up by adding a button and then have the button action deploy the pop-up. You can also use the pop-up settings to “Show Popup on” Exit or time delays - select the popup then see the settings on the right-hand side. - What this covers: Most users dislike pop-ups, but the sad fact is that they still convert rather well, despite their bad rap. When you want to add a popup, you can do so from the Pop Up. After selecting it, you will use the pop-out setting menu on the right to edit the properties. - Next: You can show a pop-up by adding a button and then have the button action deploy the pop-up. You can also use the pop-up settings to “Show Popup on” Exit or time delays - select the popup then see the settings on the right-hand side. You can show a pop-up by adding a button and then have the button action deploy the pop-up. You can also use the pop-up settings to “Show Popup on” Exit or time delays - select the popup then see the settings on the right-hand side. --- ## **SEO Meta Data** Here, you can edit the SEO metadata, this will show up in search engine results when searched. In addition, it will show in the tab settings of your browser, when you share your site link and more. It might seem small but having your SEO settings set up is important - it helps search engines find your site and when sharing a link, it helps users trust the link. ## ![Preview Custom Code (image 18 of 34)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037899016/original/hw4l9k9n0RKkYQqKt7sV5njzDuwhe-oVew.png) **Preview Custom Code (image 18 of 34)** This screenshot appears in the "Preview Custom Code" section of "Websites Overview". The text alongside this image reads: Here, you can edit the SEO metadata, this will show up in search engine results when searched. In addition, it will show in the tab settings of your browser, when you share your site link and more. It might seem small but having your SEO settings set up is important - it helps search engines find…. Immediately after, the guide continues: If you have custom code on your site, providing it was installed successfully, this button loads this custom code so you can see it within the builder. Another option is previewing the page. If your custom code is not working as planned…. - What this covers: Here, you can edit the SEO metadata, this will show up in search engine results when searched. In addition, it will show in the tab settings of your browser, when you share your site link and more. It might seem small but having your SEO settings set up is important - it helps search engines find your site and when sharing a link, it helps users trust the link. - Next: If you have custom code on your site, providing it was installed successfully, this button loads this custom code so you can see it within the builder. Another option is previewing the page. If your custom code is not working as planned, please consult a developer. --- **Preview Custom Code** If you have custom code on your site, providing it was installed successfully, this button loads this custom code so you can see it within the builder. Another option is previewing the page. If your custom code is not working as planned, please consult a developer. ![Preview Custom Code (image 19 of 34)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037899165/original/9DUtBLcF4BsBXf-Owha2ws-Sk5n_KOiWlg.png) **Preview Custom Code (image 19 of 34)** This screenshot appears in the "Preview Custom Code" section of "Websites Overview". The text alongside this image reads: If you have custom code on your site, providing it was installed successfully, this button loads this custom code so you can see it within the builder. Another option is previewing the page. If your custom code is not working as planned, please consult a developer. Immediately after, the guide continues: When you are using the builder you can choose to have the right popout lay over top of the webpage or you can set it to two-column mode, which will push the webpage into two columns. The first column is the webpage, the 2nd is the…. - What this covers: If you have custom code on your site, providing it was installed successfully, this button loads this custom code so you can see it within the builder. Another option is previewing the page. If your custom code is not working as planned, please consult a developer. - Next: When you are using the builder you can choose to have the right popout lay over top of the webpage or you can set it to two-column mode, which will push the webpage into two columns. The first column is the webpage, the 2nd is the settings tag that popout on the right. --- ## **2 Column Mode Versus Auto Mode** When you are using the builder you can choose to have the right popout lay over top of the webpage or you can set it to two-column mode, which will push the webpage into two columns. The first column is the webpage, the 2nd is the settings tag that popout on the right. ![2 Column Mode Versus Auto Mode (image 20 of 34)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037899364/original/E0uvNRaqVGH9f0VscjDy0re_e5UA54895w.png) **2 Column Mode Versus Auto Mode (image 20 of 34)** This screenshot appears in the "2 Column Mode Versus Auto Mode" section of "Websites Overview". The text alongside this image reads: When you are using the builder you can choose to have the right popout lay over top of the webpage or you can set it to two-column mode, which will push the webpage into two columns. The first column is the webpage, the 2nd is the settings tag that popout on the right. Immediately after, the guide continues: When you open and begin editing your site, you may find the need to undo a change you made. You can undo or redo your actions at the top right of your site builder navigation bar. - What to choose: When you are using the builder you can choose to have the right popout lay over top of the webpage or you can set it to two-column mode, which will push the webpage into two columns. The first column is the webpage, the 2nd is the settings tag that popout on the right. - Next: When you open and begin editing your site, you may find the need to undo a change you made. You can undo or redo your actions at the top right of your site builder navigation bar. --- ## **Undo/Redo** When you open and begin editing your site, you may find the need to undo a change you made. You can undo or redo your actions at the top right of your site builder navigation bar. - Undo/Redo now captures changes made not only on the main page but also within popups and global settings such as typography, tracking codes, and more. - When undoing or redoing changes that affect a popup, the builder automatically opens the relevant popup so you can instantly view the changes in context. - For text-based elements, changes are intelligently batched together, preventing unnecessary undo steps for every keystroke and keeping your change history clean and intuitive. **Note:** Undo/Redo is session-based. If you reload or leave the builder, you may not be able to undo/redo earlier changes. Versions, outlined below, are great for restoring previous versions of the site. ![Undo/Redo (image 21 of 34)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037899482/original/VCFId7ENAp5Eh8QuZFJPmxyxcqeF5_FczA.png) **Undo/Redo (image 21 of 34)** This screenshot appears in the "Undo/Redo" section of "Websites Overview". The text alongside this image reads: Note: Undo/Redo is session-based. If you reload or leave the builder, you may not be able to undo/redo earlier changes. Versions, outlined below, are great for restoring previous versions of the site. Immediately after, the guide continues: In the top right-hand side of your site builder, you will locate versions, preview, and save buttons. Let’s go through each of them below. - What this covers: Note: Undo/Redo is session-based. If you reload or leave the builder, you may not be able to undo/redo earlier changes. Versions, outlined below, are great for restoring previous versions of the site. - Next: In the top right-hand side of your site builder, you will locate versions, preview, and save buttons. Let’s go through each of them below. Full procedure: 1. Undo/Redo now captures changes made not only on the main page but also within popups and global settings such as typography, tracking codes, and more. 2. When undoing or redoing changes that affect a popup, the builder automatically opens the relevant popup so you can instantly view the changes in context. 3. For text-based elements, changes are intelligently batched together, preventing unnecessary undo steps for every keystroke and keeping your change history clean and intuitive. --- ## **Versions, Preview, Save, and Publish** In the top right-hand side of your site builder, you will locate versions, preview, and save buttons. Let’s go through each of them below. ![Versions, Preview, Save, and Publish (image 22 of 34)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037899745/original/JZ482zGgclCyyEaoc3HQdVUgJ0Q_WosZ-A.png) **Versions, Preview, Save, and Publish (image 22 of 34)** This screenshot appears in the "Versions, Preview, Save, and Publish" section of "Websites Overview". The text alongside this image reads: In the top right-hand side of your site builder, you will locate versions, preview, and save buttons. Let’s go through each of them below. Immediately after, the guide continues: Versions - selecting versions will take you to previously saved versions of your site. Helpful when you want to view or revert previously saved versions of your site. Preview - create a preview version of your site page for you to see as…. - How to confirm: In the top right-hand side of your site builder, you will locate versions, preview, and save buttons. Let’s go through each of them below. - Controls: Versions, Preview, Save, Publish - Next: Versions - selecting versions will take you to previously saved versions of your site. Helpful when you want to view or revert previously saved versions of your site. Preview - create a preview version of your site page for you to see as if it is a live site. Great for testing and seeing what your recent edits look like for a live visitor. Save - you can click the save button to save an unpublished version of your site. This same version will be overwritten after every save. This is different from the published live version of your site. This means your site visiting will not see any of the changes made on this version until they are published. Publish - Publishing will activate the current saved version of your site to be posted live to the internet. Now site viewer will see the most recent published version of your site. Full procedure: 1. Versions - selecting versions will take you to previously saved versions of your site. Helpful when you want to view or revert previously saved versions of your site. 2. Preview - create a preview version of your site page for you to see as if it is a live site. Great for testing and seeing what your recent edits look like for a live visitor. 3. Save - you can click the save button to save an unpublished version of your site. This same version will be overwritten after every save. This is different from the published live version of your site. This means your site visiting will not see any of the changes made on this version until they are published. 4. Publish - Publishing will activate the current saved version of your site to be posted live to the internet. Now site viewer will see the most recent published version of your site. 1. **Versions** - selecting versions will take you to previously saved versions of your site. Helpful when you want to view or revert previously saved versions of your site. 2. **Preview** - create a preview version of your site page for you to see as if it is a live site. Great for testing and seeing what your recent edits look like for a live visitor. 3. **Save** - you can click the save button to save an unpublished version of your site. This same version will be overwritten after every save. This is different from the published live version of your site. This means your site visiting will not see any of the changes made on this version until they are published. 4. **Publish** - Publishing will activate the current saved version of your site to be posted live to the internet. Now site viewer will see the most recent published version of your site. --- ## **Editing the Mobile View of Your Site ** Every site builder has both a mobile and desktop view. Unless you edit an object, the desktop and mobile views will be identical. When you go to review your mobile view of your site, you will likely find some aspects of your site you wish to change or adjust for your mobile viewers. This makes sense, mobile and desktop screens are different sizes. So we will need to adjust how the mobile view looks to best suit mobile viewers. Let’s learn how to edit your mobile view below. --- ## **Mobile Mode** At the top of your editor, you will see a button for Desktop Mode and another called Mobile Mode. Selecting the “Mobile Mode” will toggle to the mobile view editor of your site. All Website objects by default are mobile and desktop visible. However, you can change this, which will help greatly in some circumstances. ![Mobile Mode (image 23 of 34)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037910323/original/6ytiNhXzX9INYVy9J9mule0smkHyE_UTtg.png) **Mobile Mode (image 23 of 34)** This screenshot appears in the "Mobile Mode" section of "Websites Overview". The text alongside this image reads: All Website objects by default are mobile and desktop visible. However, you can change this, which will help greatly in some circumstances. Immediately after, the guide continues: More than likely, you will find you need to create a unique section, row, column, or element for mobile view only. You can edit the visibility of your elements with the visibility setting. Select any object, go to settings, then advanced…. - What this covers: All Website objects by default are mobile and desktop visible. However, you can change this, which will help greatly in some circumstances. - Next: More than likely, you will find you need to create a unique section, row, column, or element for mobile view only. You can edit the visibility of your elements with the visibility setting. Select any object, go to settings, then advanced settings. This is very helpful when optimizing the look and feel of your desktop or mobile views for your site. --- ## **Changing Object Visibility to Mobile/Desktop Only** More than likely, you will find you need to create a unique section, row, column, or element for mobile view only. You can edit the visibility of your elements with the visibility setting. Select any object, go to settings, then advanced settings. This is very helpful when optimizing the look and feel of your desktop or mobile views for your site. After toggling, you will only be able to see the elements based on how you toggle them. So if you removed Desktop, you would only see the element on the mobile editor view on the live mobile view of a website. ![Changing Object Visibility to Mobile/Desktop Only (image 24 of 34)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037910451/original/D1wvZgd0-cGXJe7rOoYOINGF8s7JTxQOJA.png) **Changing Object Visibility to Mobile/Desktop Only (image 24 of 34)** This screenshot appears in the "Changing Object Visibility to Mobile/Desktop Only" section of "Websites Overview". The text alongside this image reads: After toggling, you will only be able to see the elements based on how you toggle them. So if you removed Desktop, you would only see the element on the mobile editor view on the live mobile view of a website. Immediately after, the guide continues: Within your object settings, you will see mobile responsive toggles that allow you to edit an object's settings unique to mobile or desktop. For example, the image below shows an image element alignment settings. This means you can change…. - What to choose: After toggling, you will only be able to see the elements based on how you toggle them. So if you removed Desktop, you would only see the element on the mobile editor view on the live mobile view of a website. - Next: Within your object settings, you will see mobile responsive toggles that allow you to edit an object's settings unique to mobile or desktop. For example, the image below shows an image element alignment settings. This means you can change how this element looks on the desktop view, then toggle to the mobile view and edit the mobile settings to be unique from the desktop view. --- ## **Mobile Responsiveness Settings** Within your object settings, you will see mobile responsive toggles that allow you to edit an object's settings unique to mobile or desktop. For example, the image below shows an image element alignment settings. This means you can change how this element looks on the desktop view, then toggle to the mobile view and edit the mobile settings to be unique from the desktop view. ![Mobile Responsiveness Settings (image 25 of 34)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037910520/original/0uYLWZ8P00yYDwrXIt8hkcQbLsfhMI53pg.png) **Mobile Responsiveness Settings (image 25 of 34)** This screenshot appears in the "Mobile Responsiveness Settings" section of "Websites Overview". The text alongside this image reads: Within your object settings, you will see mobile responsive toggles that allow you to edit an object's settings unique to mobile or desktop. For example, the image below shows an image element alignment settings. This means you can change how this element looks on the desktop view, then toggle to…. Immediately after, the guide continues: You will find mobile responsive settings like this on several object settings. We are always working to add in more. - What to choose: Within your object settings, you will see mobile responsive toggles that allow you to edit an object's settings unique to mobile or desktop. For example, the image below shows an image element alignment settings. This means you can change how this element looks on the desktop view, then toggle to the mobile view and edit the mobile settings to be unique from the desktop view. - Next: You will find mobile responsive settings like this on several object settings. We are always working to add in more. You will find mobile responsive settings like this on several object settings. We are always working to add in more. ### **Pro Tips for Mobile Mode Editing** There are a number of of tips and tricks to learn when editing your mobile site, let’s check out a few: **Finish Desktop Mode First:** More often than not, completing a full version of your desktop view of your site makes it easier to edit your mobile view. So get that desktop view looking stellar THEN start working on your mobile view after your desktop view is the way you like it. **Mobile Navigation Menus:** If you have a site navigation menu, create a Global Section with Mobile-only visibility. This can be added to the mobile version of each of your pages for a clean and consistent look. You can do the same for the Desktop Navigation menu. **Duplicate an Object and Change Visibility:** If you cannot get a section or object to look good on mobile without editing the desktop view, create a mobile-specific section. You can do this easily with the “duplicate” function. Which will create a copy of the object. Then you can change the visibility of one to desktop only and the new one to mobile only. Now we can edit the mobile one without messing up the desktop. This is great for images. Did you know… you can see the mobile view of your site from your computer? [Learn how here.](https://docs.ghlcustomercare.com/docs/sites/funnels-and-websites/websites-overview) --- ## **Site Settings & Publishing** Now that your site is built let’s review the backend settings of our site. Let’s walk through each of the backend site settings together. **Site Pages/Steps ** This is where all of the pages or steps of your site live. You can edit or preview a page from here. We land here before entering into the Site Builder. Upon exiting the Site Builder, we also land here. ![Site Settings & Publishing (image 26 of 34)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037910569/original/HLnOKuZExHkLfR3mKave12kXfbe6wgwnrg.png) **Site Settings & Publishing (image 26 of 34)** This screenshot appears in the "Site Settings & Publishing" section of "Websites Overview". The text alongside this image reads: This is where all of the pages or steps of your site live. You can edit or preview a page from here. We land here before entering into the Site Builder. Upon exiting the Site Builder, we also land here. Immediately after, the guide continues: To use order forms on your site, you must attach a product you have created in GHL Customer Care to your specific page. Products need to be added to the page a viewer will use to checkout and purchase your product. - What this covers: This is where all of the pages or steps of your site live. You can edit or preview a page from here. We land here before entering into the Site Builder. Upon exiting the Site Builder, we also land here. - Controls: Site Pages/Steps - Next: To use order forms on your site, you must attach a product you have created in GHL Customer Care to your specific page. Products need to be added to the page a viewer will use to checkout and purchase your product. --- ## **Attaching a Product to Your Site Page (Order Forms)** To use order forms on your site, you must attach a product you have created in GHL Customer Care to your specific page. Products need to be added to the page a viewer will use to checkout and purchase your product. On Websites, you click the three dots on the top right of the page, then select products. For funnels, you select the step, then select products in the top right tab. After arriving on the Products tab for a page, we will need to add the GHL Customer Care Product. If one isn’t created in your Sub-Account already, you will need to create one. You can learn more about our [Payments features here.](https://docs.ghlcustomercare.com/docs/payments/getting-started-w-payments) ![Attaching a Product to Your Site Page (Order Forms) (image 27 of 34)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037910640/original/YEjyHXWyZdwBCoSNaoOZZ8TzqvuF-MmvLw.png) **Attaching a Product to Your Site Page (Order Forms) (image 27 of 34)** This screenshot appears in the "Attaching a Product to Your Site Page (Order Forms)" section of "Websites Overview". The text alongside this image reads: After arriving on the Products tab for a page, we will need to add the GHL Customer Care Product. If one isn’t created in your Sub-Account already, you will need to create one. You can learn more about our Payments features here. Immediately after, the guide continues: Stats will give you insights into the number of page views and opt-ins you have had on your site. In addition, you can see the number of sales and even earnings. Learn more about stats and what they count here: Understanding Stats. - What this covers: After arriving on the Products tab for a page, we will need to add the GHL Customer Care Product. If one isn’t created in your Sub-Account already, you will need to create one. You can learn more about our Payments features here. - Next: Stats will give you insights into the number of page views and opt-ins you have had on your site. In addition, you can see the number of sales and even earnings. Learn more about stats and what they count here: Understanding Stats. --- ## **Site Stats** Stats will give you insights into the number of page views and opt-ins you have had on your site. In addition, you can see the number of sales and even earnings. Learn more about stats and what they count here: Understanding Stats. ![Site Stats (image 28 of 34)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037910718/original/ZqxhWWvBlx_PTNUAWUaAUy4yzFZfUPHlig.png) **Site Stats (image 28 of 34)** This screenshot appears in the "Site Stats" section of "Websites Overview". The text alongside this image reads: Stats will give you insights into the number of page views and opt-ins you have had on your site. In addition, you can see the number of sales and even earnings. Learn more about stats and what they count here: Understanding Stats. Immediately after, the guide continues: Reveals each transaction that has occurred on your sites. For Version 2 sites, we have moved this to the Payments Tab > then select Orders and Transactions tabs. - What this covers: Stats will give you insights into the number of page views and opt-ins you have had on your site. In addition, you can see the number of sales and even earnings. Learn more about stats and what they count here: Understanding Stats. - Next: Reveals each transaction that has occurred on your sites. For Version 2 sites, we have moved this to the Payments Tab > then select Orders and Transactions tabs. --- ## **Site Sales** Reveals each transaction that has occurred on your sites. For Version 2 sites, we have moved this to the Payments Tab > then select Orders and Transactions tabs. --- ## **Site Settings** Site settings give you the ability to attach your domain, update the default path, add a favicon, and more! Let’s unpack each of these together. ![Site Settings (image 29 of 34)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037910737/original/jIEdfFd0u640y20jsUvi04MMBJV3nYwBSA.png) **Site Settings (image 29 of 34)** This screenshot appears in the "Site Settings" section of "Websites Overview". The text alongside this image reads: Site settings give you the ability to attach your domain, update the default path, add a favicon, and more! Let’s unpack each of these together. Immediately after, the guide continues: Name - is the name you give your site. This does not appear to your customer, this is for internal use only. - What this covers: Site settings give you the ability to attach your domain, update the default path, add a favicon, and more! Let’s unpack each of these together. - Controls: Name, Domain, Path, Favicon, Head tracking code, Body tracking code, Payment mode, Image Optimization, O, ptimise Javascript, GDPR Complaint Fonts, Chat Widget - Next: Name - is the name you give your site. This does not appear to your customer, this is for internal use only. **Name** - is the name you give your site. This does not appear to your customer, this is for internal use only. **Domain** - is the domain you choose to assign to your website. For example: https://ghlcustomercare.com is our domain we attach to our Site. Without a domain, people will be unable to visit your site. Unless you use a preview link, but these are uncustomizable and not recommended. **Path** - is the default path or extension for your site. It looks like this when used, https://ghlcustomercare.com/about → the “/about” is the path. Each page on a funnel or website will have its own path, and no two pages can be directed to the same path. **Favicon** - is the small icon that appears at the top of your browser tabs when someone opens and views your site. You must add a shareable image URL here, after being added, it will load the favicon for all of the pages of your site. Learn how to upload, store, and copy the share link in GHL Customer Care [here](#How-do-I-upload-and-get-a-sharable-image-link-in-?) (LINK TO FAQ). **Head tracking code** - installs a site-wide tracking code into the header. **Body tracking code** - installs a site-wide tracking code into the body. **Payment mode** \- if you have products attached to your site, then you can automatically switch your payment mode to test or live. Test, allows you to use [Stripe testing cards](https://stripe.com/docs/testing#cards)\` to fill out the form and then run a test. Great for testing your funnel. However, as you get closer to launch, a live purchase is encouraged - you can always refund yourself. **Image Optimization** - will automatically adjust your images to load faster. It is on by default and is generally not recommended to disable it as faster loading times result in a superior page experience for viewers. **O****ptimise Javascript** \- Javascript is custom code you can install to run special operations on your sites. Oftentimes, JavaScript can impact loading speeds, enabling this will assist in page loading. The External Javascript will be lazy hydrated for better page load performance. **GDPR Complaint Fonts** - depending on your legal needs, GDPR complaint fonts can be enabled, removing all of the fonts, so your site can work to become more compliant with laws and regulations. Always consult a lawyer to ensure you are fully compliant. **Chat Widget** - Your chat widget can be customized and set up under Sites > Chat Widget. Enabling this will deploy this chat widget to all of your websites. To deploy on specific webpages, keep this disabled then copy the code to the specific pages you want the widget on. Learn more about your chat widget here: [GHL Customer Care Chat Widget: How to Add It to Your Pages in Minutes](https://docs.ghlcustomercare.com/docs/sites/chat-widget/how-to-install-ghl-customer-care-s-chat-widget)[](https://docs.ghlcustomercare.com/docs/sites/chat-widget/how-to-install-ghl-customer-care-s-chat-widget) --- ## **Publishing/Page Settings** To change the name of a step or site as well as the path or extension… In the site builder, you can click the three dots then select settings. Within the funnels, you select the funnel step then select the “Publishing” tab. From here you can edit the step/site name as well as the path. The path for your a page/site goes at the end of a URL. For example: https://ghlcustomercare.com/about → the  “/about” is the path. You can set these, otherwise, we will provide a random one. If the path already exists or is being used on your domain, it will add numbers as you cannot have repeat paths. ![Publishing/Page Settings (image 30 of 34)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037910800/original/EIlSOdYXCBr1tBv6-gPwr-hTRj8fjEEjyw.png) **Publishing/Page Settings (image 30 of 34)** This screenshot appears in the "Publishing/Page Settings" section of "Websites Overview". The text alongside this image reads: From here you can edit the step/site name as well as the path. The path for your a page/site goes at the end of a URL. For example: https://ghlcustomercare.com/about → the “/about” is the path. You can set these, otherwise, we will provide a random one. If the path already exists or is being used on your…. Immediately after, the guide continues: Global sections are saved sections that you can use across multiple pages. They are unique in that you can use the same section across multiple pages. Further, making any changes to a global section, after saving, will automatically…. - What to fill in: From here you can edit the step/site name as well as the path. The path for your a page/site goes at the end of a URL. For example: https://ghlcustomercare.com/about → the “/about” is the path. You can set these, otherwise, we will provide a random one. If the path already exists or is being used on your domain, it will add numbers as you cannot have repeat paths. - Next: Global sections are saved sections that you can use across multiple pages. They are unique in that you can use the same section across multiple pages. Further, making any changes to a global section, after saving, will automatically update it to all pages the Global Section is used on. A great example of a scenario to use a global section would be the Header/Footer of your website. Using a Global section as a footer or header enables you to have the same header across all of your pages. --- ## **Frequently Asked Questions** **Q: What are Global Sections?** Global sections are saved sections that you can use across multiple pages. They are unique in that you can use the same section across multiple pages. Further, making any changes to a global section, after saving, will automatically update it to all pages the Global Section is used on. A great example of a scenario to use a global section would be the Header/Footer of your website. Using a Global section as a footer or header enables you to have the same header across all of your pages. All we need to do is have a section we like, such as a header for our page, then hover over the object, click the Save Icon, name it, select “Global Section,” then click Save. Now we can add this same global section to all of our pages. Remember, any changes to this Global section, after saving, will update this section in all of the pages it was used. Further, global sections are not automatically placed, you must add them. To add a Global section, click the “+Add Element” Icon in the top right of your builder. Then select > Global Section > Select your global section. ![Frequently Asked Questions (image 31 of 34)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037911138/original/LESJ99XZs11Kr3TVxUaDxchGqs-p7YrlUA.gif) **Frequently Asked Questions (image 31 of 34)** This animation appears in the "Frequently Asked Questions" section of "Websites Overview". The text alongside this image reads: To add a Global section, click the “+Add Element” Icon in the top right of your builder. Then select > Global Section > Select your global section. The navigation path used here is Global Section > Select. Immediately after, the guide continues: Similar to a Global Section (see above), a Template Section can be saved and then added later within the same webpage or another webpage. Changes made to these sections saved to the Template Section in use will not update the templates or…. - Path: Global Section > Select - What to choose: To add a Global section, click the “+Add Element” Icon in the top right of your builder. Then select > Global Section > Select your global section. - Next: Similar to a Global Section (see above), a Template Section can be saved and then added later within the same webpage or another webpage. Changes made to these sections saved to the Template Section in use will not update the templates or other places the template was added. Full procedure: 1. Landing Page - where you can offer something for contacts to download in exchange for their contact information. 2. Booking Page - After a contact fills out a form, you will want to thank them but then schedule a call with them. So you have your booking calendar on this step. 3. Thank you Booking Page - After a client booked the call, they will land on this page, showing them the next steps and thanking them for booking. **Q: What are Template Sections?** Similar to a Global Section (see above), a Template Section can be saved and then added later within the same webpage or another webpage. Changes made to these sections saved to the Template Section in use will not update the templates or other places the template was added. **Q: What Are Funnels?** The term funnel in marketing means a series of websites used to capture leads. Funnels have “steps” that allow you to visualize a series of websites that a potential customer will visit. For example, in a booking funnel, I might have 3 Funnel Steps. 1. Landing Page - where you can offer something for contacts to download in exchange for their contact information. 2. Booking Page - After a contact fills out a form, you will want to thank them but then schedule a call with them. So you have your booking calendar on this step. 3. Thank you Booking Page - After a client booked the call, they will land on this page, showing them the next steps and thanking them for booking. Funnels usually serve a specific purpose, like offering a lead magnet or booking an appointment. There are many use cases for creating funnels. Whatever the reason, Funnels are a useful way to create a series of websites that contacts navigate through. **Q: How to See the Mobile View of a Website on your Desktop?** When editing your site, you may find you want to see the mobile view of your website. Did you know you can see the mobile view of any website on your desktop? Simply right click on the loaded webpage, click inspect, then toggle the view from desktop to mobile. See the red arrow and the images below. ![Frequently Asked Questions (image 32 of 34)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037910971/original/S9Nw3z3dJ6Sivtm4jkrNLuKPpfg7LVmYAg.gif) **Frequently Asked Questions (image 32 of 34)** This animation appears in the "Frequently Asked Questions" section of "Websites Overview". The text alongside this image reads: Q: How to See the Mobile View of a Website on your Desktop? When editing your site, you may find you want to see the mobile view of your website. Did you know you can see the mobile view of any website on your desktop? Simply right click on the loaded webpage, click inspect, then toggle the view…. Immediately after, the guide continues: Q: How do I upload and get a sharable image link in GHL Customer Care? To load an image, you must either upload your image to GHL Customer Care or provide another shareable link. You can do this in Google and other areas, but let’s review how…. - What to choose: Q: How to See the Mobile View of a Website on your Desktop? When editing your site, you may find you want to see the mobile view of your website. Did you know you can see the mobile view of any website on your desktop? Simply right click on the loaded webpage, click inspect, then toggle the view from desktop to mobile. See the red arrow and the images below. - Next: Q: How do I upload and get a sharable image link in GHL Customer Care? To load an image, you must either upload your image to GHL Customer Care or provide another shareable link. You can do this in Google and other areas, but let’s review how to do this in GHL Customer Care. Full procedure: 1. Landing Page - where you can offer something for contacts to download in exchange for their contact information. 2. Booking Page - After a contact fills out a form, you will want to thank them but then schedule a call with them. So you have your booking calendar on this step. 3. Thank you Booking Page - After a client booked the call, they will land on this page, showing them the next steps and thanking them for booking. **Q: How do I upload and get a sharable image link in GHL Customer Care?** To load an image, you must either upload your image to GHL Customer Care or provide another shareable link. You can do this in Google and other areas, but let’s review how to do this in GHL Customer Care. Within a Sub-Account go to Settings > then Media. Then select "Upload File" in the top right-hand corner of the media library. ![Frequently Asked Questions (image 33 of 34)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037911037/original/UP2aQeliGueFottVQeDThmj5wYHO0IEO_w.png) **Frequently Asked Questions (image 33 of 34)** This screenshot appears in the "Frequently Asked Questions" section of "Websites Overview". The text alongside this image reads: Within a Sub-Account go to Settings > then Media. Then select "Upload File" in the top right-hand corner of the media library. Immediately after, the guide continues: After successfully uploading the image, you can right-click on the image to copy the link to it. Use this link when a media-shareable URL is required. For example, within Site Settings, the Favicon requires a shareable media URL. You…. - What to choose: Within a Sub-Account go to Settings > then Media. Then select "Upload File" in the top right-hand corner of the media library. - Next: After successfully uploading the image, you can right-click on the image to copy the link to it. Use this link when a media-shareable URL is required. For example, within Site Settings, the Favicon requires a shareable media URL. You paste this newly uploaded image URL you have there so your favicon will load. Full procedure: 1. Landing Page - where you can offer something for contacts to download in exchange for their contact information. 2. Booking Page - After a contact fills out a form, you will want to thank them but then schedule a call with them. So you have your booking calendar on this step. 3. Thank you Booking Page - After a client booked the call, they will land on this page, showing them the next steps and thanking them for booking. After successfully uploading the image, you can right-click on the image to copy the link to it. Use this link when a media-shareable URL is required. For example, within Site Settings, the Favicon requires a shareable media URL. You paste this newly uploaded image URL you have there so your favicon will load. ![Frequently Asked Questions (image 34 of 34)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037911079/original/-7_-x1LD-mRQDEiZ2hks3WhurtIDOcoNcw.png) **Frequently Asked Questions (image 34 of 34)** This screenshot appears in the "Frequently Asked Questions" section of "Websites Overview". The text alongside this image reads: After successfully uploading the image, you can right-click on the image to copy the link to it. Use this link when a media-shareable URL is required. For example, within Site Settings, the Favicon requires a shareable media URL. You paste this newly uploaded image URL you have there so your…. - What to copy: After successfully uploading the image, you can right-click on the image to copy the link to it. Use this link when a media-shareable URL is required. For example, within Site Settings, the Favicon requires a shareable media URL. You paste this newly uploaded image URL you have there so your favicon will load. Full procedure: 1. Landing Page - where you can offer something for contacts to download in exchange for their contact information. 2. Booking Page - After a contact fills out a form, you will want to thank them but then schedule a call with them. So you have your booking calendar on this step. 3. Thank you Booking Page - After a client booked the call, they will land on this page, showing them the next steps and thanking them for booking. --- Documentation for GHL Customer Care. Support: support@ghlcustomercare.com