Menu

Welcome to the SiteBlocks Site Builder

HELP CENTER

Blog posts : "Basics"

Alerts

The Alerts feature allows you to create sitewide banners for important notices, announcements, promotions, or scheduled updates. Alerts can be displayed at the top or bottom of your website and can be activated, deactivated, and reused as needed.

To access this feature, go to Site > Alerts.


Managing Alerts

 

The main Alerts screen gives you an overview of all saved alerts and their current status.

  • Total Alerts: Shows how many alerts have been created.
  • Active Alerts: Shows how many alerts are currently live on your site.
  • Inactive Alerts: Shows saved alerts that are not currently displayed.

From this screen, you can:

  • Create New Alert: Start a new banner alert.
  • Edit: Update the content or settings of an existing alert.
  • Duplicate: Copy an alert to quickly reuse or modify it.
  • Delete: Remove an alert you no longer need.
  • Activate / Deactivate: Turn an alert on or off without deleting it.

This makes it easy to reuse older alerts for future announcements without losing previous versions.
 

Build Tab

 

The Build tab is where you create the content of the alert.

  • Title: Enter the main alert heading.
  • Message: Add the text that will appear in the banner.
  • Add a Link: Optionally include a link for visitors to click.
  • Edit Style: Customize the appearance of the alert preview.

A live preview is shown so you can see how the alert will appear on your site before saving.
 

Settings Tab

 

The Settings tab controls where, when, and how the alert is displayed.

  • Show On: Choose which pages should display the alert.
  • Alert Type: Select the type of alert.
  • Activate On: Optionally schedule when the alert becomes active.
  • Page Placement: Choose whether the alert appears at the top or bottom of the page.
  • Deactivate On: Optionally schedule when the alert should stop displaying.

If no activation date is set, the alert can be shown immediately when activated. If no deactivation date is set, the alert will remain active until you turn it off manually.


Best Uses for Alerts

  • Scheduled maintenance notices
  • Promotions or limited-time offers
  • Event announcements
  • Service interruptions or important updates
  • General sitewide messages


Pro Tips

  • Keep it brief: Alert banners work best with short, clear messaging.
  • Use scheduling: Set activation and deactivation dates for time-sensitive notices.
  • Reuse old alerts: Duplicate or reactivate previous banners instead of rebuilding them from scratch.
  • Choose placement carefully: Top placement is more noticeable, while bottom placement can feel less intrusive.

The Alerts element allows you to create sitewide banners for important notices, announcements, promotions, or scheduled updates. Alerts can be displayed at the top or bottom of your website and can be activated, deactivated, and reused as needed.


Managing Alerts

 

The main Alerts screen gives you an overview of all saved alerts and their current status.

  • Total Alerts: Shows how many alerts have been created.
  • Active Alerts: Shows how many alerts are currently live on your site.
  • Inactive Alerts: Shows saved alerts that are not currently displayed.

From this screen, you can:

  • Create New Alert: Start a new banner alert.
  • Edit: Update the content or settings of an existing alert.
  • Duplicate: Copy an alert to quickly reuse or modify it.
  • Delete: Remove an alert you no longer need.
  • Activate / Deactivate: Turn an alert on or off without deleting it.

This makes it easy to reuse older alerts for future announcements without losing previous versions.


Build Tab

 

The Build tab is where you create the content of the alert.

  • Title: Enter the main alert heading.
  • Message: Add the text that will appear in the banner.
  • Add a Link: Optionally include a link for visitors to click.
  • Edit Style: Customize the appearance of the alert preview.

A live preview is shown so you can see how the alert will appear on your site before saving.


Settings Tab

 

The Settings tab controls where, when, and how the alert is displayed.

  • Show On: Choose which pages should display the alert.
  • Alert Type: Select the type of alert.
  • Activate On: Optionally schedule when the alert becomes active.
  • Page Placement: Choose whether the alert appears at the top or bottom of the page.
  • Deactivate On: Optionally schedule when the alert should stop displaying.

If no activation date is set, the alert can be shown immediately when activated. If no deactivation date is set, the alert will remain active until you turn it off manually.
 

Best Uses for Alerts

  • Scheduled maintenance notices
  • Promotions or limited-time offers
  • Event announcements
  • Service interruptions or important updates
  • General sitewide messages
 

Pro Tips

  • Keep it brief: Alert banners work best with short, clear messaging.
  • Use scheduling: Set activation and deactivation dates for time-sensitive notices.
  • Reuse old alerts: Duplicate or reactivate previous banners instead of rebuilding them from scratch.
  • Choose placement carefully: Top placement is more noticeable, while bottom placement can feel less intrusive.

Go Back

 Posted in Basics

Countdown Element
The Countdown element allows you to display a live timer counting down to a specific date and time. It is commonly used for events, launches, promotions, or deadlines.



 

Timeline Settings

 

The Timeline section controls how the countdown behaves and what units are displayed.

  • Unit show: Choose which time units to display (Years, Months, Days, Hours, Minutes, Seconds).
  • Timezone: Select the timezone for the countdown. By default, it uses the visitor’s local time.
  • Starts at: Set when the countdown begins.
  • Pre-start behavior:
    • Countdown to start: Shows a countdown leading up to the start time.
    • Hide until start: Keeps the countdown hidden until it begins.
  • Ends at: Set when the countdown ends.
  • After countdown ends:
    • Show zeros: Displays 0 when the countdown finishes.
    • Remove component: Hides the countdown after it ends.


Layout

 

The Layout section controls the structure and positioning of the countdown.

  • Layout: Choose between horizontal or stacked display styles.
  • Alignment: Align the countdown left, centre, or right.
  • Text position: Position labels above or below the numbers.
  • Number/Text spacing: Adjust spacing between numbers and labels.
 

Title, Text and Units

 

This section controls how the countdown text and numbers appear.

  • Display Text: Toggle unit labels (e.g., Days, Hours).
  • Text size: Adjust the size of the unit labels.
  • Number size: Adjust the size of the countdown numbers.
  • Display Title Label: Show or hide the main title label.
  • Unit Colours: Customize colours for each unit (Years, Months, Days, Hours, Minutes, Seconds).

Separator

 

The Separator settings control how units are visually divided.

  • Separator: Choose a style (none, colon : , dash - , dot . , etc.).
  • Size: Adjust the size of the separator.
  • Spacing: Control spacing between units.
  • Separator Color: Set the colour of the separator.

Tile Settings

 

The Tile section controls the appearance of each countdown unit container.

  • Rounding: Adjust the corner radius of tiles.
  • Size: Control the overall size of each tile.
  • Tile Color: Set the background color of the tiles (supports transparency).
 

Additional Options

  • Add link to: Make the countdown clickable and link it to a page or URL.
  • Show end message: Display a custom message when the countdown finishes.
 

Pro Tips

  • Keep it simple: Only show the units you need (e.g., hide seconds for long-term events).
  • Match your design: Use tile colours and typography that align with your site branding.
  • Use urgency wisely: Including seconds can increase urgency for short-term promotions.
  • Test timezones: Make sure your countdown displays correctly for your audience.
  • Plan post-countdown behaviour: Decide whether to hide the timer or show a message after it ends.

Go Back

 Posted in Basics

Job Postings Element

The Job Postings element allows you to display available job opportunities on your website. Visitors can browse open positions, view details, and explore listings in either grid or list view.

The element supports multiple layouts to suit your design:

1) Grid View: Displays job postings as cards with key details and a call-to-action



2) List View: Displays job postings in a stacked format for easier scanning

Each job posting can include information such as job title, status, position type, location, salary, posting date, closing date, and a short description.


Managing Job Posts

 

To manage job postings, open the element toolbar and click Settings, then access the Manage Job Posts panel.

This panel allows you to create, organize, and maintain all job listings.

Search and Filters

  • Search: Quickly find job postings by title.
  • Status: Filter by job status (e.g., Open, Interviewing).
  • Position Type: Filter by job type (e.g., Full Time, Seasonal).
  • Filter: Apply selected filters.

Adding a Job Post

  • Click Add Job Post to create a new listing.
  • Enter the job details and save.

Managing Existing Posts

  • Reorder: Drag and drop using the handle on the left to change the display order. Changes save automatically.
  • Edit: Update job details.
  • Delete: Remove a job posting.

Visibility and Status

  • Active / Inactive: Control whether the job appears on the site.
  • Featured: Highlight specific job postings.
  • Status Labels: Display labels such as Open or Interviewing on the listing.

Search Indexing

  • Reindex This Page: Updates search indexing for the current page.
  • Reindex All: Updates indexing for all job postings.
 

Statuses

 

The Statuses tab allows you to manage the labels used to indicate the current stage of a job posting.

  • Add Status: Create a new status.
  • Edit: Update an existing status name.
  • Remove: Delete a status.
  • Sort Order: Controls the order in which statuses appear.

These statuses are displayed on job listings to show their current state (for example, Open or Interviewing).

 

Position Types

 

The Position Types tab allows you to manage the different job types that can be assigned to postings.

  • Add Position Type: Create a new job type.
  • Edit: Modify an existing position type.
  • Remove: Delete a position type.
  • Sort Order: Controls the order in which position types appear.

Position types are used to describe the nature of the job, such as Full Time, Part Time, or Seasonal.

 

Statistics

 

The Statistics tab provides a quick overview of how your job postings are performing.

  • Date Range: Switch between 7, 30, or 90 days to view performance over time.
  • Views: See how many times job posts have been viewed.
  • Apply Clicks: Track how many users clicked to apply.
  • Apply CTR: Displays the click-through rate based on views vs applications.

Performance Trends show daily activity, helping you spot patterns in views and applications.

  • Top Viewed Job Posts: Highlights which jobs are getting the most attention.
  • Top Converting Job Posts: Shows which posts are generating the most applications.
  • Trending Job Posts: Compares recent performance to previous periods.

This section helps you understand what’s working and optimize your job listings accordingly.
 

Job Post Settings

 

The Job Post Settings menu lets you control how job listings appear on your site.

  • Display Mode: Choose which posts to show (for example, all posts).
  • View Style: Switch between list view and grid view.
  • Maximum Items: Set how many job posts are displayed at once.

Display Options allow you to toggle what information is shown on each job post:

  • Show summary
  • Show attachments
  • Show apply action
  • Show compensation
  • Show location
  • Show closed posts

Use these settings to customize the layout and level of detail shown to visitors.

Go Back

 Posted in Basics

Style Images with Borders


Adding borders to your images is a simple way to enhance your design and give your content more visual impact. You can customize border colour, thickness, and corner rounding to match your website's style.

This guide covers how to style both individual images and column backgrounds.


Part 1: Styling Image Elements

 



You can apply borders directly to any image on your page using the built-in Image Editor.

Steps:

  1. Double click on the image you want to edit.
  2. The Image Editor will open.
  3. Click on the Border tab.
  4. Adjust the following settings:
    • Border Colour to match your design
    • Border Thickness to control how bold the border appears
    • Corner Rounding to create soft, rounded edges
  5. Save your changes.

Your image will now display with the updated border styling.
 

Part 2: Styling Columns with Borders

 

 

You can also apply borders to entire columns, which is useful for creating framed layouts or highlighting grouped content.

Steps:

  1. Hover over the column you want to edit.
  2. Click the blue bar at the top of the column.
  3. Select Edit Column Style.
  4. Locate the border settings.
  5. Adjust the following:
    • Border Colour
    • Border Thickness
    • Corner Rounding
  6. Save your changes.

This will apply the border to the full column, including any content inside it.

Tips

  • Use rounded borders to create a softer, more modern look.
  • Match border colours to your brand palette for consistency.
  • Try combining image and column borders to create layered visual effects.

Go Back

 Posted in Basics

SEO Checklist

SEO Checklist



 

The SEO Checklist helps you monitor and improve your website’s search engine optimization. It provides a quick overview of key SEO items such as page metadata and image alt text, and highlights areas that may need improvement.

The checklist displays overall progress and shows which items are complete or still missing.

  • Pages with metadata: Tracks how many pages include SEO metadata such as descriptions and keywords.
  • Images with alt text: Shows how many images include descriptive alt text for accessibility and SEO.

You can also run deeper analysis tools directly from this panel.

The Quick Scan performs a fast review of your site’s SEO basics and updates the checklist progress indicators.

Deep Scan & Analyze SEO

 

The Deep Scan & Analyze SEO feature performs a full analysis of your website and generates a detailed SEO report.

The report includes:

  • Overall SEO Score: A summary score based on multiple SEO factors.
  • Category Breakdown: Scores for areas such as On-Page SEO, Technical SEO, Performance, Links, Usability, and Security.
  • Detailed Analysis: Statistics for metadata, images, links, and technical configuration.

The report also includes additional sections for reviewing specific areas:

  • Overview: Summary of the website’s SEO health.
  • Recommendations: Suggested improvements.
  • On-Page SEO: Metadata and content checks.
  • Keywords: Keyword density and optimization checks.
  • Technical SEO: Sitemap, indexing, and structural analysis.
  • Mobile Usability: Mobile compatibility checks.
  • Performance: Page size and loading analysis.
  • Links: Internal and external link structure.
  • Social & Schema: Social metadata and structured data.
  • Security: SSL and security header checks.

Quick Scan

 

The Quick Scan provides a lightweight overview of your website’s current SEO status. It quickly analyzes key elements and displays an overall SEO score along with a category breakdown.

  • Overall SEO Score: A quick grade based on major SEO factors.
  • Category Breakdown: Scores for areas such as On-Page SEO, Technical SEO, Usability, Performance, Links, Social Meta, and Security.
  • Quick Summary: Displays basic statistics including page metadata, image alt text coverage, and technical configuration.

This scan is designed to give a fast snapshot of your site's SEO health. For a full diagnostic report and detailed recommendations, run Deep Scan & Analyze SEO.

Generate Image Alt Text

 

The Generate Image Alt Text feature helps improve accessibility and SEO by automatically creating alt text for images that are missing descriptions.

When used, the system scans your website for images without alt text and generates descriptive text that can be applied to those images. This helps search engines better understand your content and improves accessibility for visitors using screen readers.

Go Back

 Posted in Basics

Calendar Element



The Calendar element allows you to display upcoming events directly on your website. Visitors can view events in a calendar layout and click on events to see additional details such as the event title, time, location, and description.

Events are managed through the calendar administration interface, where you can create new events, edit existing ones, and control when they appear on the calendar.


Creating a New Event

 

To add a new event to the calendar:

  • Open the calendar management interface.
  • Click New Event.
  • Enter the required event details.
  • Click Next Step to continue.

After completing the event details, save the event and it will appear on the calendar.

Step 1: Basic Info
 

The first step allows you to enter the main event information.

Event Basics

  • Title: The name of the event.
  • Event Start Date: The date and time when the event begins.
  • Event End Date: The date and time when the event ends.
  • Publish Date: Controls when the event becomes publicly visible.
  • Feature Image: Upload an optional image to represent the event.

Repeat Event

If the event occurs regularly, you can enable the repeat option.

  • Repeat Event: Enables repeating events.
  • Additional repeat settings will appear once enabled.

Options

  • Category: Assign the event to a category.
  • Event Location: Displays where the event takes place.

Continue to the next step or click Save at any time to create the event.


Step 2: Event Details
 

This step allows you to enter the content that will appear on the event page.

  • Full Description: Use the editor to add formatted text, links, images, and other content.

Step 3: SEO
 

The SEO section allows you to control how the event appears in search engines.

  • Permalink: The URL slug used for the event page.
  • Keywords: Search keywords related to the event.
  • Description: A summary used for search engine previews.

Step 4: Advanced
 

Add optional custom properties for advanced use cases.

  • Custom Properties: Key/value metadata used for integrations or custom templates.
 

After entering all required information, click Save. The event will appear on the calendar based on its publish date and schedule.
 

Manage Calendar



 

The Manage Calendar option allows you to manage events, categories, calendar settings, and import events. This area contains four tabs used to control how events appear and behave on your calendar.

Calendar Events
 

The Calendar Events tab shows a list of all events currently created for the calendar.

  • Search: Find events quickly by typing the event name.
  • New Event: Create a new calendar event.
  • View: Preview the event.
  • Edit: Modify event details.
  • Delete: Remove the event from the calendar.

Each event displays its event date, title, and publish date.


Categories
 

The Categories tab allows you to organize events using categories. Categories can also be used for color-coding events in the calendar.

  • New Category: Create a new event category.
  • Edit: Update an existing category.
  • Delete: Remove a category.
Settings
 

The Settings tab controls default behaviour for the calendar.

  • Default category for new events: Automatically assigns a category when new events are created or imported.
  • Show print button on calendars: Allows visitors to print the calendar view.
Import Events
 

The Import Events tab allows you to import events from an external calendar file.

  • ICS File: Upload an iCalendar (.ics) file containing events.
  • Category: Assign a category to imported events.
  • Import Now: Adds the events to your calendar.


Calendar Style



 

The Calendar Style option allows you to customize the visual appearance of the calendar displayed on your website.

This panel controls the overall look of the calendar, including:

  • Typography: Select the font used throughout the calendar.
  • Colours: Adjust the colours used for calendar cells, headings, borders, highlights, and event indicators.
  • Accent and highlight colours: Control how the current day, selected days, and events are visually emphasized.
  • Controls: Style the navigation buttons and interface elements used to move between months.

After adjusting the settings, click Save to apply the changes.

 

Calendar Settings

 

The Calendar Settings menu lets you control how your calendar is displayed and what events are shown.

Layout

  • Choose how events are displayed: full calendar (month view), mini calendar, list, or weekly list.

Event Display

  • Select how events open when a date is clicked:
    • Modal dialog: Opens events in a popup
    • Inline panel: Displays events directly below the calendar

Date Range

  • Set a start and end date to limit which events are shown.

Categories

  • Optionally filter events to show only specific categories.

Use these settings to control both the layout and filtering of your calendar.

Go Back

 Posted in Basics

Tile Navigation Element



The Tile Navigation element allows you to display a grid of navigation tiles that link to pages on your website. Each tile acts as a visual shortcut, helping visitors quickly navigate to important sections such as Home, Blog, Shop, or About pages.

Tiles typically include an icon and a label, and clicking a tile will take visitors directly to the linked page.
 

Managing Tiles

 

To manage the tiles in the navigation grid, open the element toolbar and click Manage Tiles.

From the Manage Tiles panel you can:

  • Reorder tiles: Click and hold a tile, then drag and drop it to change its position.
  • Edit a tile: Use the edit icon on a tile to modify its settings.
  • Remove a tile: Click the delete icon to remove the tile from the navigation.
  • Add a new tile: Click Add Tile to create a tile that links to a new or existing page.

After making your changes, click Done to save and return to the page editor.

 

Styling Tiles

 

The Style Tiles option allows you to customize the appearance of the tiles displayed in the Tile Navigation element. This includes colors, spacing, borders, icon placement, and hover effects.

Open the element toolbar and select Style Tiles to access the styling options.

Tile Appearance

  • Background Color: Sets the background colour of each tile.
  • Title Color: Controls the colour of the tile text.
  • Icon Color: Sets the colour of the tile icon.
  • Tile Border Color: Defines the colour of the tile border.
  • Tile Border Width: Adjusts the thickness of the tile border.
  • Tile Border Radius: Controls the roundness of the tile corners.

Icon Layout

  • Icon Position: Sets where the icon appears in relation to the tile title (for example, above the text).
  • Icon Size: Adjusts the size of the icon.
  • Icon Margin: Controls the spacing around the icon.
  • Icon Padding: Adds space inside the icon area.

Tile Spacing and Layout

  • Tile Padding: Controls the spacing inside each tile.
  • Tile Spacing: Adjusts the space between tiles.
Hover Effects
 

The Hover section allows you to define how tiles behave when a visitor moves their cursor over them.

Hover Effect Options

  • None: No visual change occurs when hovering over a tile.
  • Lift: The tile raises slightly when hovered.
  • Shadow: A shadow appears behind the tile.
  • Scale: The tile slightly enlarges.
  • Glow: A glowing highlight appears around the tile.
  • Press: The tile appears pressed down when hovered.

Hover Colors

  • Background Color: Changes the tile background when hovered.
  • Title Color: Changes the text colour on hover.
  • Icon Color: Changes the icon colour on hover.
  • Border Color: Changes the border colour on hover.

After adjusting the styling options, click Save to apply the changes to your tiles.


Tile Navigation Settings

 

The Tile Navigation Settings menu controls how tiles are sourced, selected, and displayed on your page.

Data Source

  • Source: Choose how tiles are populated (for example, manual selection).

Manual Selection

  • Search for pages and click Add to include them as tiles.
  • Selected items appear in a list where they can be removed.
  • Use Manage Tiles in the editor to reorder or add custom links (files, URLs, email, phone).

Grid Capacity

  • Columns and Rows: Define how many tiles can appear on the page.
  • These settings control layout capacity, while spacing and styling are handled in the editor.

Use these settings to control both the content and structure of your tile navigation.

Go Back

 Posted in Basics

Bid Opportunities
The Bid Opportunities element allows you to display current procurement opportunities directly on your website. Visitors can view open bid opportunities, review procurement details, and see the results of completed bids.
 

The element automatically organizes opportunities into two sections:

  • Live Opportunities: active bids that are currently open
  • Bid Results: previously closed opportunities
 

Managing Bid Opportunities

 

All opportunities are managed through the Manage Bid Opportunities panel.

This panel allows you to:

  • Create new bid opportunities
  • Edit existing opportunities
  • Change opportunity statuses
  • Filter and search existing bids
  • Manage procurement methods

The management window contains three main sections:

  • Bid Opportunities
  • Statuses
  • Procurement Methods

Bid Opportunities Tab
 

The top section allows you to filter and locate opportunities quickly.

  • Search: find opportunities by title or keyword
  • Status Filter: filter opportunities by their current status
  • Procurement Method Filter: filter by procurement type
  • Filter Button: apply the selected filters

Adding a New Opportunity

To create a new bid opportunity:

  • Click the Add Bid Opportunity button.
  • Enter the required information for the opportunity.
  • Save the opportunity.

Once saved, the opportunity will appear in the opportunities table and will display on the website if it is active.
 

Opportunity Table

The table displays all created bid opportunities and includes the following information:

  • Active: indicates whether the opportunity is currently active
  • Sort Number: controls the order in which opportunities appear
  • Closing Date: the deadline for the opportunity
  • Title: the name of the bid opportunity
  • Status: shows whether the bid is open or closed
  • Procurement Method: indicates the procurement type

Each opportunity also includes controls for editing or deleting the record.

 

Statuses Tab

 

The Statuses tab allows you to manage the list of statuses available for bid opportunities.

Each status includes:

  • Name: the label used for the status
  • Sort Order: controls the order in which statuses appear

Adding a Status

Click the Add button to create a new status.

Editing a Status

Use the edit icon beside a status to make changes.

This tab is used to maintain the available bid status options, such as:

  • Open
  • Closed
  • Awarded
  • Cancelled
 

Procurement Methods Tab

 

The Procurement Methods tab allows you to manage the list of procurement methods that can be assigned to bid opportunities.

Each procurement method includes:

  • Name: the label used for the procurement method
  • Sort Order: controls the order in which methods appear

Adding a Procurement Method

Click the Add button to create a new procurement method.

Editing a Procurement Method

Use the edit icon beside a method to make changes.

These methods are available when creating or editing a bid opportunity so the appropriate procurement type can be assigned.

Examples of procurement methods include:

  • Request for Proposal
  • Request for Quotation
  • Request for Tender
  • Invitation to Tender
  • Notice of Intent to Direct Award
 

Settings

 

The Settings option in the toolbar allows you to control how bid opportunities are displayed on your site.

  • Display Mode: Choose how opportunities appear (e.g., showing live bids only or including results).
  • Max Items: Set the maximum number of opportunities displayed.
  • Show external tender links: Enable to include links to external tender sources.
  • Show award details: Enable to display awarded bid information when available.

 

Go Back

 Posted in Basics

Documents Element



The Documents element allows you to display files on your website in a structured file browser layout. Visitors can browse folders and click documents to open or download them directly from the page.
 

This element is useful for sharing resources such as PDFs, forms, guides, checklists, spreadsheets, and downloadable templates. Documents can also be organized into folders to create a clear hierarchy, making it easier for visitors to find the files they need.

 

Document Settings



 

To configure the Documents element, add the Documents element to your page, click the element in the editor, open the Documents dropdown in the toolbar, and select Settings.

This opens the Documents Settings panel, where you can control how your documents are displayed.

Display Settings

  • Title: You can optionally enter a title for the documents section. This title appears above the document list on the page.
  • Examples include Documents, Resources, Downloads, or Forms.
  • Folder: Select the folder from your document library that you want to display. This allows you to show only the files that are relevant to a specific page.
  • Sort By: Choose how documents are ordered in the list. Documents can be sorted by name, updated date, or creation date.
  • Sort Direction: Set the sort order to Ascending or Descending.
  • Limit: Use the limit field to control the maximum number of items shown in the document list.
  • Include Subfolders: When this option is enabled, documents stored inside subfolders will also appear. If disabled, only files located directly in the selected folder will be shown.

Display Options

 

The following options control which details are visible beside each document:

  • Show Description displays the document description.
  • Show File Size displays the size of the file.
  • Show Updated Date displays the file's last modified date.
 

Library Tab

 

The Library tab is where you manage all documents used by the Documents element. From here, you can upload files, organize folders, control document visibility, and manage the files that appear on your website.

The library works as a central storage area for documents connected to the Documents element.


Folder Management

 

On the left side of the Library tab is the Folders panel. This area allows you to organize documents into folders so they can be grouped clearly for both site management and visitor browsing.


Creating a Folder

Click the + button in the Folders panel, enter a folder name, and save it. The new folder will then appear in the folder list.

Viewing Folder Contents

Select any folder to view the files stored inside it. The contents of the selected folder appear in the document list on the right side of the screen.


Uploading Documents

 

Documents can be uploaded directly to the selected folder. To upload a file, first select the folder where the document should be stored. Then click Upload or drag a file into the upload area. After selecting a file from your computer, click Upload to finish adding it to the library. Supported files can include documents such as PDFs, spreadsheets, Word documents, and other downloadable file types.

The upload area allows you to either click and choose a file from your computer or drag and drop a file directly into the box.


Document List & Actions

 

Uploaded files appear in a table that includes the document name, updated date, and file size.

How to Preview a Document

After a file has been uploaded, the arrow icon next to the selected file opens that document in a new browser tab.

Private Button

The Private button controls whether the document is visible on the site. When a document is private, it stays in the library but does not appear to visitors on the live website.

Delete Document

The trash icon removes the document from the library.

Search
Use the search field to quickly find documents in the current library.

Reindex
The Reindex button refreshes the document index so the library remains searchable and up to date.


 

Roles Tab




 

The Roles tab allows you to control who can manage documents in the library. Access is organized through groups and folder permissions, which lets you give different users different levels of control.
 

How Access Works

 

Document access follows this permission chain: Group > Folder Permission.

Public visitors can only see documents that are marked public. Manager access is granted through group membership and the permissions assigned to specific folders.
 

Step 1: Create Groups
 

Groups are used to organize users who should share the same document access rules. For example, you might create groups for Staff, Editors, HR, or Managers. Enter a name in the Group name field and click Create Group. The group will then be available when assigning permissions.

Step 2: Grant Folder Permissions
 

Once groups have been created, you can assign permissions for specific folders. To grant permissions, select a folder, select the group that should have access, choose the permission types to assign, and click Save.

Permission Types
  • Read: allows users to view and access documents in the folder
  • Write: allows users to upload or modify documents in the folder
  • Delete: allows users to remove documents from the folder

These permissions can be combined depending on how much access a group should have.
 

Step 3: Invite New Managers to a Group
 

You can invite users to manage documents by sending them an email invitation.

Enter the user's email address, choose the group they should belong to, set how many days the invitation should remain active, and click Send Invite. The invited user will receive a link that allows them to claim their account and access the document library according to their assigned group permissions.
 
Invitation Management

The invitations table displays the invited email address, assigned group, expiration date, and invite link for each pending invite.

Go Back

 Posted in Basics

Site Search Element

New!



Add a Site Search element to your page to allow easy navigation of website pages and blog post content. You can drag and drop the Site Search element onto any page in your builder.

 

Settings Tab


This tab controls how your search bar and results are displayed on your page. Once placed, click the gear icon on the element to open the Site Search Settings panel. The settings are organized into three tabs: Settings, Pages, and Blog Posts.

 

Search Setup


Display Type: Choose how the search bar and results appear from the options below.


Search Bar + Results: Displays the search bar and results together on the same page (default).



Search Bar + Results in Dropdown: Shows the search bar with results appearing in a dropdown below it.



Search Bar + Modal: Shows the search bar, and when results are found, they appear in a modal overlay.



Search Bar + Search Page: Direct users to a separate search results page.

You can set up a separate search page with the following steps:
1. Create a new page and add a "Site Search" element onto the page.
2. Set the display settings to "Results Only".
3. Add a search bar to any other page.
4. Set the display settings to "Search Only" and select your new page from step 1 as the redirect.

Once complete, searching on one page...



Will redirect you to a separate results page!


 

Search Settings


Placeholder Text: The text that appears inside the search bar before users start typing. (Example: “Search this site...”)
Crop Length: Adjusts how much of the text snippet from each result is shown. A higher number shows more content from the matching page or post.
Max Results: Limits the number of search results displayed at one time.
Enable Paging: Allows users to navigate through multiple pages of search results if there are more than the maximum displayed.
Include Site Pages in Results: When enabled, the search will include your website’s regular pages.
Include Blog Posts in Results: When enabled, the search will include posts from your blog.

After making your changes, click Save Changes.

 

Pages Tab


This tab manages which site pages are indexed (included) in search results. Each page is listed with its name and URL, along with its indexing status.

 
Status Icons
 
  Indexed: Page is included in search results.
  Pending Index: Page needs to be reindexed.
  Not Indexed: Page is excluded from search.


Actions

Refresh Icon: Reindex that specific page.
Trash Icon: Remove that page from the search index.


You can also

Click Index All to index all listed pages.
Click Delete All Indexes to clear all stored search indexes.

 

Blog Posts Tab


This tab works the same way as the Pages tab but lists your blog posts instead.


Each post shows

Name: The post title.
URL: The internal path to the post.
Indexed: A checkbox showing whether it’s included in search.
Actions: Buttons to reindex or delete.


You can also

Click Index All to index all blog posts.
Click Delete All Indexes to remove all blog post indexes.

 

Tips


Reindex your pages or posts after making significant content changes to ensure search results are up to date.

If a page or post is missing from search results, check that it’s marked as Indexed in the appropriate tab.

The search results will automatically update when content is reindexed.



Customize Appearance

 

The Element Styles menu controls the general appearance and spacing of the Site Search element within your layout. These options work the same as they do for other elements.

Fonts: Controls the default font family and size used by text in this element (for example, labels or headings around the search bar).
Background: Sets the background color or transparency behind the entire search element.
Container: Adjusts width, alignment, and other container-level options that affect how the search bar sits inside the page.
Padding: Adds space inside the element’s edges, around the search bar.
Border: Controls border color, thickness, and corner radius for the outer edge of the element.
Margin: Adds space outside the element so it doesn’t touch neighboring content.

Use these options to ensure your search bar matches the overall spacing and style of your site before fine-tuning the details in the Search Bar Style menu.

 

Search Bar Style Menu

 

The Search Bar Style menu is specific to the Site Search element. It lets you control the look of the search icon, the search button, and the search input field.
 

Search Icon

These settings control the magnifying glass icon inside the search bar.

Icon: Choose a different icon style or reset the existing one.
Icon Color: Sets the color of the icon. You can enter a hex code or use the color picker.
Icon Size: Adjusts how large the icon appears using a slider.
Hover Color: Changes the icon color when the visitor hovers over it.
 

Search Button

Styles the optional button used to submit a search query.

Padding: Adds inner spacing around the button text or icon.
Background: Sets the button’s background color.
Border Radius: Rounds the corners of the button. Higher values create more rounded corners.
Hover Background: Sets the background color when the button is hovered.
 

Search Input

Controls the text field where visitors type their search terms.

Max Width: Limits how wide the input field can stretch. Enable this option if you want a fixed maximum width.
Background: Sets the input field’s background color.
Font Color: Sets the color of the typed text and placeholder text.
Border Color: Controls the color of the input field’s border.
Border Thickness: Adjusts how thick the border line appears.
Border Radius: Rounds the corners of the input field.
Font Family: Selects the font used inside the input field.
Font Size: Adjusts the size of the text inside the input field.



Saving and Restoring Styles

Save: Applies your current settings to the Site Search element.
Restore: Resets the styles for this element back to its defaults.
Cancel: Closes the panel without saving recent changes.

 

Go Back

 Posted in Basics

Breadcrumb Element

Using the Breadcrumb Element

 

Breadcrumbs help visitors understand where they are on your site and quickly move back to previous pages. They create a simple path of links, for example, Home > Services > Pricing, so navigation feels natural and organized. They are especially useful on sites with multiple levels or dropdown menus.


 

Add the Breadcrumb Element 

  1. Open your site in the builder.
  2. In the ELEMENTS menu, find the Breadcrumb element.
  3. Drag and drop it onto your page.


Create a Breadcrumb Path 

 

Breadcrumbs follow the page hierarchy set in your primary navigation. If a page sits under another page in the menu, that relationship becomes part of the breadcrumb path.

To set this up:

  1. Open your site’s primary navigation for editing.
  2. Create or move a page so it becomes a descendant of another page.
  3. Save your changes. The breadcrumb element will automatically reflect this path.
For example, dragging “Pricing” under “Services” creates a dropdown and tells the breadcrumb that Pricing is a child of Services.



Customize the Breadcrumb (Breadcrumb Editor Options)

 

After placing the element, click it to open the toolbar. Then select Breadcrumb Editor to adjust the settings.

  Preview of a breadcrumb with a custom "~" separator and custom link colours:



The home icon toggle creates a clickable home icon in the same color as your breadcrumb links:


List Customization

Home Icon: Toggle ON or OFF to show or hide the home icon.
Alignment: Position the breadcrumb (left, center, or right).
Separator: Choose the symbol or character between each link.
Separator Spacing: Adjust the space around the separator.
 

Color Customization

Current Page Color: Color for the active page.
Link Color: Color for the breadcrumb links.
Link Hover Color: Color shown when hovering over a link.
Separator Color: Color of the separator symbol.

Style Customization

Customize the fonts, spacing, and border from this tab.

Go Back

 Posted in Basics
11 blog posts