How to Customize Your Directory — Layouts, Colors, Sorting & More

Configure your directory's look and behavior. Choose a layout, set your brand colors, add search and filters, and more.

Once you've set up your fields and added listings, head to Widget Settings to customize how your directory looks and works.

Layouts

Choose how listings are displayed:

Grid: cards in a responsive grid. Best for directories with images.
List: compact rows. Best for text-heavy directories or long lists.
Table: columns with headers. Best for data-driven directories or comparison tables.

Pick whichever fits your content. You can switch anytime.

Mobile Layout

Control how listings display on smaller screens:

Stack (default): listings stack vertically
Scroll: horizontal scrolling through listings
Compact: tighter grid for more listings in view

Colors & Styling

Match your directory to your website's design:

Brand color: your primary accent color for buttons, links, and active states
Background color: the main widget background
Search bar background: the area behind your search bars and filters

Fine-Tuning

Font size: adjust from 12px to 18px
Item spacing: space between listing cards (8px to 32px)
Border radius: corner rounding on cards (0px for sharp, up to 16px for rounded)

For more control, see Custom CSS below.

Sorting

Set the default sort order for your listings:

Sort by: choose any field. Common choices: Name (alphabetical), date added, or a custom "Priority" text field.

Direction:

A → Z / Low → High: ascending
Z → A / High → Low: descending
Random: shuffles listings on each page load

Sort by tag priority: if you sort by a tags field, you can drag tag values into a custom priority order. For example, put "Featured" first so those listings always appear on top.

Add any combination of search and filter options. Each one you add appears above your listings.

Type	What it does	Learn more
Search Bar	Keyword search across fields	Search Bar →
Dropdown	Filter by category/tag values	Dropdown Filter →
Toggle	On/off filter (e.g., "Show Featured")	Toggle Filter →
Range Slider	Filter by price, rating, or numeric values	Range Filter →
Location Search	Find listings near an address	Location Search →

Drag and drop to reorder them. Set labels and placeholder text for each.

Collapsible Filters

If you have many filters, enable collapsible filters to keep things tidy. Set how many filters are visible by default on desktop and mobile. The rest are hidden behind a "More Filters" toggle.

Pagination

Control how many listings show at once:

Items per page: 1 to 100 listings per page (default: 10)
Show page numbers: display page navigation buttons
Show first/last buttons: jump to the beginning or end

Map Position

If you've enabled map features, go to Map Settings to configure where the map appears:

Left or Right: map sits beside the listings. Adjust the width (20% to 80%).
Top: map sits above the listings. Set the height (100px to 800px).

Choose miles or kilometers for distance-based searches.

Display Options

A few more settings to fine-tune behavior:

Listing detail pages: when enabled, clicking a listing opens a full detail page. When disabled, all info shows directly in the results view.

Image click-to-expand: opens listing images in a lightbox gallery when clicked.

Hide listings until filtered: start with an empty view and only show listings after a visitor applies a search or filter. Useful for large directories where browsing isn't practical.

Custom CSS

If you need styling beyond the built-in options, you can add your own CSS. Go to Custom CSS in your dashboard to open the CSS editor.

The editor includes a built-in formatter and a one-click button to copy your widget's full CSS reference (field IDs, class names, CSS variables) for use with AI tools like ChatGPT or Claude. Paste it into a chat and describe what you want to change.

Tips for writing custom CSS

Use browser DevTools: right-click your widget on your website, click "Inspect Element," and explore class names to find what you want to style.
CSS variables: the widget uses variables like --brand-color, --widget-bg-color, and --widget-font-size-base that you can override.
Target specific fields: each custom field has a unique class like .ed-field-123. Find the ID in DevTools.
Use !important: the widget's base styles are specific, so you may need !important to override them.
Mobile styles: use @media (max-width: 768px) for mobile-specific changes.

Need help? Email hello@embeddirectory.com with a link to your page and what you'd like to change.

Open Widget Settings → Open Custom CSS →