9.6 Working with Elements (Orange Outline): Adding Your Content

Elements are the actual content pieces you place inside the Columns to build your page.

Adding Elements:

Click the + Add Element button that appears inside an empty column, OR drag an element from the Elements Panel on the left directly into a column on the canvas.

Common Elements & Key Settings (Use Settings Sidebar when Element Selected):

  • Headline / Paragraph / Bullet List:
    • Content: Click directly on the element on the canvas to edit the text inline. Use the floating toolbar for basic formatting (Bold, Italic, Links).
    • Styling: Select the element → Use Settings Sidebar to change Font Family, Font Size (adjust separately for Mobile!), Color, Alignment (Left/Center/Right), Line Height.
    • Spacing: Use Advanced tab → Margin (space outside) and Padding (space inside) settings to control spacing around the text block.
    • Dynamic Text: Use {{...}} merge tags (e.g., {{contact.first_name}}, {{custom_values.brokerage_name}}) for personalization if the page might be viewed by known contacts (e.g., on a members' area page).
    • SEO: Use Headline elements logically (one main H1 per page for the primary topic, then H2, H3 for subheadings).
  • Button:
    • Content: Edit the Button Text directly on the button or in the sidebar.
    • Link Action (CRUCIAL): Select the Button → Go to General tab → Set Button Actions → Link To. Choose what happens on click:
      • Website URL: Paste the full URL of an external page (e.g., link to an IDX search results page, a specific Zillow listing).
      • Page: Link to another page within the same Funnel/Website project (e.g., link from landing page button to the "Thank You" step).
      • Open Popup: Trigger a popup form (that you design in the builder's Pop-Up Settings) to open. Often used for contact forms or lead magnet opt-ins.
      • Scroll To: Smoothly scroll the user to a specific Section, Row, or Element on the same page. (Name the target element first in its Advanced settings > CSS Selector to select it here).
      • Call: Initiate a phone call using the tel: protocol (e.g., tel:+15551234567). Works best on mobile.
      • Email: Open the user's default email client with a pre-filled mailto: address.
      • Download File: Link directly to a file uploaded in your Media Library (e.g., a downloadable PDF CMA, buyer's guide, listing flyer).
      • Submit Form/Survey: If the button is part of a Form or Survey element, this action submits the collected data. Configure the post-submit action (redirect/message) in the Form/Survey's main options (See 2.2/2.3).
    • Link Target: Choose Open in new tab if linking externally.
    • Styling: Customize Background Color, Text Color/Font, Borders, Corner Radius (rounded corners), Padding (button size), Shadow, Hover Effects, subtle Animations.
  • Form / Survey:
    • Selection: Select the element → Use the dropdown in the sidebar to choose which existing Form or Survey (that you previously created in Sites > Forms/Surveys) you want to display here.
    • Redirect After Submit: The action taken after the form/survey is submitted (e.g., redirecting to a Thank You page or calendar) is configured within the Options tab of the Form or Survey itself (See 2.2/2.3), NOT typically within the element's settings on the page builder (unless using a button with Submit Form action where the button handles the redirect).
  • Image:
    • Source: Select the element → Click Image Options → Image field. Upload a new image directly or select an existing image from your Media Library (Sites > Media). Property photos, agent headshots, logos should be uploaded here.
    • CRUCIAL Alt Text (Alternative Text): ALWAYS fill in the Alt Text field with a brief, descriptive phrase explaining what the image shows (e.g., "Modern kitchen with large island at 123 Main St Anytown", "Agent Jane Doe headshot"). This is critical for SEO (helps search engines understand the image) and accessibility (screen readers for visually impaired users).
    • Dimensions: Adjust Width and Height if needed (use percentages for better responsiveness).
    • Link: Optionally make the image clickable by setting a Link Action.
    • Styling: Add Border, Corner Radius, Shadow, Animations.
  • Video:
    • Source: Select the element → Choose Video Type:
      • YouTube / Vimeo: Paste the video URL.
      • Wistia / HTML5 Video (Hosted Video): Recommended for tracking. Upload your video file (MP4 recommended) to the Close Master Media Library or select an existing one. Hosted videos allow tracking watch percentage (useful for workflows) and potentially adding calls-to-action.
    • Configuration: Set Controls visibility, upload a custom Thumbnail image. For Hosted videos, enable Tracking if needed for automation triggers.
  • Navigation Menu:
    • Purpose: Primarily used in the header section of Websites (not usually Funnels) to create site-wide navigation.
    • Configuration: Select the element → Edit Menu Items. Add links (Menu Item Text), set the Link Action (usually Go to Page to link to other pages in your Website project, or Go to URL for external links like your IDX search), drag to reorder items or indent to create submenus. Add your Agency Logo via the element settings and link it to the Homepage.
    • Styling: Customize background color, link fonts/colors (including hover states), mobile menu ("hamburger") icon appearance, submenu styling. (See 9.8).
  • Image Slider / Carousel:
    • Purpose: Showcase multiple property photos in a rotating display.
    • Configuration: Select element → Add Slide. For each slide, upload/select an Image, optionally add Headline/Description overlay text, and set a Link. Configure Autoplay, navigation Arrows/Dots visibility and styling.
  • Photos Gallery: Display multiple images in a grid layout. Upload/select images, choose layout style (Grid, Masonry), set number of columns, adjust spacing. Optionally enable Lightbox effect (clicking image opens larger view). Add captions.
  • Calendar:
    • Purpose: Embed one of your booking calendars directly on the page (e.g., a "Schedule a Showing" calendar on a listing page, a "Book a Consultation" calendar on your contact page).
    • Selection: Select the element → Choose the specific Calendar or Calendar Group (if using round-robin) from the dropdown list.
  • Countdown Timer:
    • Purpose: Create urgency, e.g., for a limited-time offer, open house countdown, or "Offer deadline approaching" on a listing page.
    • Configuration: Set the End Date & Time. Choose what happens after expiration (Action: Hide Timer, Redirect URL). Select Timer Type and Style.
  • Reviews Widget:
    • Purpose: Embed a widget showcasing positive client testimonials.
    • Selection: Select the element → Choose the specific Reviews Widget you configured in the Reputation section (See 8.3).
  • Order Form (1-Step or 2-Step):
    • Purpose: Used on sales pages for selling services, courses, or other items directly (See 2.5).
    • Setup: Requires linking Products (from Payments > Products) via the page's Products tab (in the list view, not builder) and connecting a payment gateway. Configure form fields and appearance in the element settings.
  • Map:
    • Purpose: Embed an interactive Google Map showing a property location or your office address.
    • Configuration: Select element → Enter the Address to display. May require a Google Maps API key configured by your admin in Settings for full functionality/high volume usage.
  • Custom JS/HTML:
    • Purpose: Embed code snippets from third-party services or add custom scripts. Use with caution if unfamiliar with code.
    • Real Estate Examples: Paste HTML embed code for your IDX listing search widget, a Matterport or other virtual tour iframe, a mortgage calculator widget, or custom tracking/analytics scripts not handled by the main tracking code areas.
    • Usage: Select the element → Click Open Code Editor → Paste your code snippet → Save code → Save page.