BoldTrail currently utilizes Custom Pages, which are additional pages you can create to showcase your unique brand on your website.

As your real estate partner, we want to ensure you have access to the most effective tools and resources when customizing your website. To that end, we’re excited to introduce the Page Editor, a user-friendly overhaul of BoldTrail's custom pages tool!

To access Pages, hover over More on the left-hand menu and select Website Management. From here, click on Pages.

Within Pages, you will have access to a number of templates tailored for specific types of content. You can use the sidebar at the far left to narrow down your results to a particular category.

At this time, our available templates consist of the following:

About

Guides and Resources

Landing & Lead Capture

Listings

Any user with access to Pages will have access to all templates by default.

To start customizing your page using one of the available templates, choose your desired template and click on ‘Select’.

After clicking ‘Select’, you will immediately be taken to the customization tools for that template.

Every aspect of a template can be customized to suit your needs, and you are not limited to the original purpose of the template. The Page Title, for example, can be changed by scrolling to the top of the page and replacing the original template text with a title of your choice.

To make adjustments to the content within the selected template, you can click on each of the individual elements within the template. This will open the associated customization tools for that particular element.

In order to start building your own custom page from scratch, select the blue ‘Create Custom Page’ button at the top of the Templates sidebar.

This will open the improved page design tool, where you can start building your page by clicking and dragging the customization options on the right into the page body.

We’ve provided a full suite of content available for you to customize your website! Similar to the advanced email editor, you’ll have access to various widgets and tools as well as additional settings to completely personalize your page.

Rows are the primary structure for all designs created in Pages. Rows act as a “container” for your content blocks, allowing you to customize your column structure and place content side-by-side for better presentation.

To add a new row, click and drag one of the blocks from within the Rows tab into your page body. Click into the newly added row to start customizing its appearance using the options on the left-hand sidebar.

The following options populate in the sidebar when working with rows:

Rows can also include columns, which can be customized in an additional section titled Columns Structure.

To insert new columns, click on the +Add New button. A separator icon populates between each column. Click and drag the icon to change the column structure. To toggle between columns, click on the column in the sidebar you want to modify.

There are many several content blocks you can use while designing in the editor. All content blocks include padding settings and hide-on settings in the sidebar.

The Title content block allows you to set the H1/H2/H3 tag without using custom HTML. This enables you to order your design for compliance with web accessibility standards.

The title content block works much like the paragraph content block. When you drag a title block into the editor, you'll see the following toolbar:

The Paragraph block is a text block, allowing you to enter and customize any text using the Content Properties on the far right. When adding a Paragraph block to the editor, you will see additional text customization options:

The list content block includes all the new features seen in the paragraph content block. However, you'll find some content properties specific to list content.

The Image block allows you to crop easily, rotate, resize, apply filters/frames, add stickers, and other tasks without leaving the editor.

Once your image is inserted, click on either Browse or Choose Image from the sidebar to open the File Manager. From here, you can insert one of the images available to you from the library, or upload your own file.

To further customize your image, you can select Change Image to swap out the image you already uploaded, or Apply Effects to crop, rotate, resize, or add other various effects to your photo.

When you add a Button block, you will be able to easily adjust the appearance, colors, font, background, and alignment. By default, your button will populate with BoldTrail colors. A preview of the button is also available. This changes in real-time as you make adjustments to the button values.

The divider content block traditionally uses a physical divider line that you can drag and drop into your design.

If you prefer to use a divider content block without this line, you can enable the Transparent toggle to remove the physical line.

If you prefer to have a visible divider, you can customize the look and feel using the Line settings in the sidebar. These settings include line appearance (solid, dotted, or dashed), line height, and a color picker.

You also have access to a Width setting, which determines how much of the column containing the line will fill. You can also Align your divider to the left, center, or right.

The divider content block also includes padding options. Divider padding works the same as it does for most other content blocks. Keep in mind that the maximum padding value on any given side is 60px, which limits the amount of empty space you can create with a divider.

The spacer content block acts much like a transparent divider in that it simply creates blank space in your design. As a result, the only setting that the spacer has in the sidebar is Height, which allows you more granular control over the empty space you are creating.

The Social block lets you choose from several different options to list your social media pages. Simply enter the URL of your desired website, and it will populate the icon automatically. Facebook, Twitter, Instagram, and Linkedin are all included by default. Use the “Select icon collection” dropdown to choose specific icon styles.

To delete a social media option, click the red Delete button. You can also expand the “More Options” toggle to change your targeting preferences for each item.

The Custom HTML content block allows you to easily add your own HTML code to a design created in the editor.

Callout: Using your own code may affect how the design is rendered. This could prevent it from adjusting to the screen size (i.e. the "responsiveness" of the design). Make sure to use HTML that is email-compliant and responsive.

To add a video, click and drag the Video block into the editor. Click into the block to add a Youtube or Vimeo URL, and adjust the appearance of the block.

To add a form to a page, click and drag the Form block into the Editor. Select your form by clicking on “Select the Form” from the sidebar.

In the popup that appears, you can choose to add a simple listing search form to the page. Alternatively, you can add your own lead form that corresponds to a specific URL. You may also add an optional hashtag to the form.

In order to get started, drag an icon content block into a row. A filler image will fill the content block; click on this to open the icon options in the sidebar.

Click on Add new icon to get started. A pre-loaded icon will populate on the editor.

You can use the pre-loaded icon, or you can change the image by using the Change image button. This will open the file manager. You also have access to the image editor, if you use the Apply Effects button.

If you use the toggle to open More options, you'll find a couple of options specific to icon content blocks.

The text position dropdown allows you to change whether your text will populate above, below, or on either side of the icon image.

If you have multiple icons, you can click and drag them in order to re-order your icons. Select the icon in the upper lefthand corner of the icon properties box to drag it elsewhere.

To add a menu, drag and drop a menu content block onto the editor. An empty menu block will populate.

Once you begin adding items to your menu, you'll have a couple of options. Text is what you'll see written in your menu, and you can set the text hyperlink through the Url field. The text you input into the Title field will populate if you hover over that option on the editor.

You can use different types of URLs in your design, including email, SMS, and click-to-call. For traditional URLs, you can also set the link to open in the same window or in a new tab.

You can also re-order your menu items by clicking on the icon in the upper left-hand corner of your item settings and dragging it elsewhere.

Once your menu items are ready to go, you can use the settings in the sidebar to customize your menu. You'll find text options here, and you can even change your menu layout from horizontal to vertical by selecting your preferred option from the dropdown.

If your menu uses a horizontal layout, you'll also be able to insert a text character that can be used to divide your menu items. The color of your Separator character will match the text color you set above.

You can use the items padding option to apply padding to the individual menu items.

With a mobile menu, an icon will replace the menu content on a mobile device, which creates an expandable and retractable menu. By default, the mobile menu will always render vertically, and any separators that you're using will be disregarded.

You can use icon size to change how large your menu button will be. You can also choose from a normal (square) or rounded menu button via the icon type dropdown.

The foreground color will apply to the icon details, as well as the text color once your menu icon is expanded. The background color will populate only as the background color of your icon. The background color of your expanded menu will match what you have set as your content background color.

Note: Mobile menus are not compatible with all email clients.

Gif animations can be added to your page by dragging and dropping the GIF content block into the editor.

Click into Search for your GIFs. The editor will open a pop-up window that allows you to search and select from the huge gallery of GIF animations and animated stickers powered by GIPHY.

When finished customizing your page, click the Save button at the top right of the editor.

This will open the Advanced Options screen, where you may select from a number of additional options before completing your page.

To publish your custom page and make it visible on your website, click the Publish button at the top right after saving your changes.

Once a page is saved or published, click the Back button at the top left to go back to Web & IDX. Any custom pages you have created will be displayed in the Pages section.

To edit an existing published page, simply click on the Edit button in the Pages menu.

To view a live version of your completed custom page, either click on or copy the URL from the Link column and paste it into a new browser tab.

Have more questions? Please reach out to Customer Support via the blue chat bubble to the right or by emailing support@insiderealestate.com!