Editing the Property Details Block

This guide will cover the functionality and usage of the Editable Property Details block. Giving users control over the layout and styling of key property meta information within the Gutenberg editor. 

Index: 

• Entering Edit Mode
• Editing Quick Link Buttons
• Image Container (AP+ Property Detail Gallery)
• Property Description Sections
• Overview Section
• External Links Section
• Map Section (AP+ Property Detail Map)
• Agent Section
• Similar Properties Section
• Adding or Removing Blocks
   

Entering Edit Mode

1. Once logged in, navigate and click on the specific listing page you want to edit.

2.  Click Edit Site to launch the block editor.

3. Once you are in the editor, click on Document Overview located on the top of the page.

4. Clicking on the button or block elements will allow you to make visual edits through the Style menu available on the right side of the page.

Note: The layout will vary from theme to theme. The layout in the example is from our Swell theme, which starts with buttons.  

Editing Quick Link Buttons

1. While in the editor, click on any of the buttons. This will allow you to rename the button text. 

2. Clicking the Styles button on the right side menu will allow you to:

• Change the button style (Fill or Outline).
• Adjust text color and background color.
• Edit front size, padding, border, and corner radius to control shape. 
   

3. Be sure to click Save to apply any changes.

Image Container (AP+ Property Detail Gallery)

1.  From the Document Overview List, click on AP+ Property Detail Gallery

2. From the right-hand Settings panel, you can: 

• Switch between Modal view (opens full-screen images) or Default (arrows + dot navigation).
• Set the Aspect Ratio. 
   

Click on the Slider Settings.

3. Under Slider settings, the options will be: 

• Adjust navigation type, transition speed, or toggle slider text buttons.
• Set or disable autoplay, adjust autoplay delay, enable loop, or thumbnail previews. 

4. Under the Styles tab, the available options will be: 

• Edit arrow button color, text style, background opacity, and button shape.

Property Description Sections

1. Navigate and click on the Description Section drop-down. Click on the Columns and Column drop-downs.

2. The Property Description Section includes:

• Property Address Placeholder.
• Property Headline.
• Bedrooms, Bathrooms, Car Parks icons.
• Inspections.
• Property Description Text (non-editable dummy text) 

3. You can click into each of the elements individually. From the right-side menu under Settings and Styles, you can: 

• Change font sizes, margins, padding, and colors.
• Although the text content is fixed from the CRM. you can still control how it visually appears. 

4. From the Inspection section, you can choose to enable/disable the Add to Calendar links along with adjusting colors and the date/time format. 

Overview Section

1. Clicking on the Overview Block will display the following options in Settings: 

• Enable / Disable the title. 
• Toggle to make Labels Bold.
• Content Orientation to change the layout. 
• Overview Settings (adding or removing individual data fields). 

2. From the Styles tab, the options are: 

• Adjust color, font size, padding, spacing, and border adjustment. 

External Links Section

1. Clicking on the External Links section will display the following from Settings: 

• Enable / Disable external links display. 
• Remove or rename the External Links heading by clicking on it.
   

2. After clicking on the buttons, the Settings will allow for: 

• Adjust button width.
• Set spacing/gap between multiple buttons.
• Enable/disable individual buttons

3. From the Styles tab, you can: 

• Change button colour, font style and size.
• Control padding, border thickness, and corner radius.
•  

4. Click on the Contact Us/Agent button to edit from the Settings: 

• Click on the button and text to edit the button name.
• Adjust button width.

5. The Contact Us/Agent button style settings include: 

• Style (Fill or Outline). 
• Color for text/background.
• Typography/ Font size adjustments. 
• Padding
• Border /Radius slider.

Map Section (AP+ Property Detail Map) 

1. Click on the Map Section block :

• Map Height (default: 600px).

  • Zoom Level (default: 10).

  • Toggle zoom control visibility on the front end.

  • Choose zoom control position (top left/right or bottom left/right).
     

2. Under Map Layout Settings:

• Choose a different map style.

• Upload a custom map marker.

• Set map marker size.

Agents Section

1. The Agents section allows you to manage how agents related to a listing are displayed. Click into the Agents block to reveal customisation options in the right-hand Settings panel:

• Number of Columns – Choose how many columns the agent profiles appear in.

• Gap Between Thumbnails – Adjust spacing between agents using the "Number of gaps" slider.

• Justification – Align agents to the left, center, or right.

• Orientation – Toggle between horizontal or vertical layouts.

• Contact Styles – Choose how agent contact details are displayed:

  • Default – Contact info is listed in plain text.

  • Button – Displays contact details in button-style blocks (not clickable).

• Contact Link Width – Determines the width of contact “buttons”:

  • Default – Content width

  • Full Width – Buttons span the full column width.

2. Click on the Control Settings drop-down to fine-tune the agent display further:

• Aspect Ratio – Controls the shape of the agent profile images.

• Photo Resolution – Set image quality.

• Split Name – Toggle to show first and last name on separate lines.

• Agent Role – Show or hide the agent’s role/title.

• Phone Number – Enable/disable phone number display.

• Phone Label Type – Choose how the label appears:

  • Phone Number, Text, or Custom

• Mobile Number – Enable/disable mobile number display.

• Mobile Label Type – Phone Number, Text, or Custom

• Contact Agent – Enable/disable the “Contact Agent” action.

• Contact Agent Type – Choose the method:

  • Form, Email, or Disable

• Contact Agent Label Type – Set how the label is displayed:

  • Email, Text, or Custom

3. From the Styles tab, you can control the appearance of the Agents section:

• Set text, background, and heading colors.

• Adjust padding around the block.

• Customise agent image roundness.

• Add hover or animation styles via "Effect Style".

• Individually style:

  • Agent Name

  • Agent Role

  • Contact Link Border

  • Contact Link Background Color

  • Contact Text Color

Similar Properties Section

1. This section typically appears at the bottom of a listing page layout. It displays a feed of properties similar to the current listing.

To edit this block:

• Click into the Similar Properties section within the page layout.

• Use the right-hand Settings panel to control the layout, display options, and property details shown.

• You can enable/disable labels or meta information (like price, address, bedrooms, etc.).

• Adjust individual colors, font sizes, and spacing for each content element as needed.

This section behaves like other blocks and is editable through the standard Gutenberg block settings.

Adding or Removing Blocks

1. You can easily add new blocks or sections to the layout using one of the following methods:

• Click the “+” icon at the top left of the editor (next to the logo).

• Hover between two existing blocks or sections on the page until a “+” icon appears between them.

2. Use the block options menu (three dots) next to any block > choose “Add before” or “Add after”.

Examples: 

• To add a paragraph or heading, click the "+" sign and select the appropriate block from the block list.

• To remove a block, click the three dots next to it and select “Delete”.

This allows full control over the layout and flexibility in presenting additional property information or design elements.