Labels
Customize every text label in the search bar for localization or branding.
Every piece of text displayed in the Vellumine search bar can be customized. This is useful for translating the interface into your blog's language or for adjusting the wording to match your brand's voice.
Label Categories
Labels are organized into five categories:
Search Interface
The main text elements readers see while searching:
| Label | Default | Description |
|---|---|---|
| Placeholder | "Search..." | The placeholder text shown in the search input. |
| Empty state | "Start typing to search" | Shown when the search bar is open but the reader hasn't typed anything (and no common terms are configured). |
| Loading | "Searching..." | Shown while results are being fetched. |
| No results | "No results found" | Shown when a search returns no matches. |
Common Searches
| Label | Default | Description |
|---|---|---|
| Title | "Common searches" | The heading displayed above the common search terms section when the search bar is empty. |
Keyboard Hints
Small hints shown at the bottom of the search modal to help readers navigate:
| Label | Default | Description |
|---|---|---|
| Navigate | "to navigate" | Hint for using arrow keys to move between results. |
| Close | "to close" | Hint for using Escape to close the search bar. |
Accessibility
ARIA labels used by screen readers for readers who use assistive technology:
| Label | Default | Description |
|---|---|---|
| Search button | "Search" | ARIA label for the search button. |
| Search input | "Search input" | ARIA label for the search input field. |
| Close button | "Close search" | ARIA label for the close button. |
Miscellaneous
| Label | Default | Description |
|---|---|---|
| Untitled post | "Untitled" | Fallback text shown for posts that have no title. |
Editing Labels
- Open your collection in the Vellumine dashboard.
- Navigate to the UI Customization page.
- Scroll to the labels section and select the tab for the category you want to edit.
- Update the text fields. Changes are saved automatically and take effect immediately.
Localization Example
To translate the search bar into German, you would set:
| Label | Value |
|---|---|
| Placeholder | "Suchen..." |
| Empty state | "Tippen Sie, um zu suchen" |
| Loading | "Suche..." |
| No results | "Keine Ergebnisse gefunden" |
| Common searches title | "Beliebte Suchanfragen" |
| Navigate hint | "zum Navigieren" |
| Close hint | "zum Schließen" |