Skip to main content

​
Overview

The Theme Designer lets you customize your directory’s appearance to match your brand perfectly. From color schemes to layout options, typography to animations, you have complete control over how your directory looks and feels.

​
Color Theme

Control how your directory handles light and dark modes to provide the best viewing experience for your visitors.

​
Default Theme Mode

Choose which mode you want your directory to be in by default:
  • System: Automatically matches the visitor’s device preference
  • Light Mode: Always displays in light mode
  • Dark Mode: Always displays in dark mode

​
Theme Toggle

Enable “Show Theme Toggle” to let visitors switch between light and dark themes based on their preference.

​
Layout Theme

DirectoryEasy offers multiple theme layouts to suit different directory types and preferences.

​
Available Themes

Classic Theme

The traditional layout with a standard navigation structure, perfect for most directory types.

Fixed Sidebar Theme

Features a persistent sidebar for easy navigation, ideal for directories with many categories.
Preview each theme to see which one best fits your directory’s content and user experience goals.

​
Layout Customization

Design how your directory’s content, typography, and visual elements are displayed.

​
Listing Card Design

Control how listings appear in your grid view:
  • Standard Layout
  • Business Layout
Shows the logo and content side by side for a balanced, traditional appearance.Best for: General directories, professional services, tech companies

​
Business Card Design

Ideal for Local Directories

The Business Card Design is perfect for local directories. It displays:
  • Large featured image
  • Physical address
  • Contact details
  • Business hours with live open/closed status
This gives visitors a quick, comprehensive overview of each listing at a glance.

​
Individual Listing Page Layout

Choose the layout for detailed listing pages:
Offers a traditional structure that works well for all types of directories. Clean and organized presentation of listing information.
Optimized for showcasing local businesses with:
  • Hero image with live status indicator
  • Dedicated contact information section
  • Operating hours display
  • Integrated location details and map

​
Grid Columns

Adjust how many columns to display in your listings section:
  • 1 Column: Full-width cards, great for detailed listings
  • 2 Columns: Balanced layout for medium-sized directories
  • 3 Columns: Popular choice for most directories
  • 4 Columns: Compact view for directories with many listings
All changes update in real time as you configure them. Make sure to Save Changes to apply them permanently to your directory.

​
Typography & Branding

Personalize your directory’s text styles, colors, and overall visual identity.

​
Design Mode

Switch between Light Mode and Dark Mode to customize each theme separately. Changes you make apply only to the currently selected mode.

​
Main Directory Color

This color is used for important elements throughout your directory:
  • Buttons and call-to-action elements
  • Links and interactive components
  • Key interface elements
orange-600  → Vibrant, energetic
blue-500    → Professional, trustworthy
green-600   → Fresh, natural
purple-700  → Creative, unique

​
Hero Section Gradient

Control the background gradient when no image is used:
1

Define Start Color

Choose the color that will appear at the top of the gradient.
2

Define End Color

Select the color that will appear at the bottom of the gradient.
3

Upload Background Image (Optional)

Upload a Hero Background Image to replace the gradient entirely.
4

Adjust Background Opacity

Control how visible the background image appears behind your content (0-100%).

​
Hero Typography

Customize how your tagline and subheading appear:
ElementOptionsExample
TaglineFont weight, colorBold with green-500
SubheadingFont weight, colorNormal with emerald-800
Use the Live Preview to see all typography changes instantly before saving.

​
Logo Text Styling

  • Solid Color
  • Gradient
Choose a single color for your logo text (e.g., purple-900).

​
Logo Upload

Image Logo Support

Upload an image logo instead of using text. You can set separate logos for light and dark modes to keep your branding consistent across both themes.Supported formats: PNG, JPG, SVG
Once you’ve finished customizing your typography, colors, and branding, make sure to Save Changes to apply your new design permanently.

​
Effects

Add animations and background elements to make your directory more dynamic and visually appealing.

​
Animations

Control motion effects across your directory:

Gradual Spacing Animation

Adds a smooth text reveal effect to your hero section, giving it a modern and engaging look.

Light Motion Animation

Adds a soft fade-in effect to cards and other content, making transitions feel more natural as visitors browse.
While animations enhance visual appeal, be mindful of performance. Test your directory on different devices to ensure smooth performance.

​
Background Effects

Control decorative elements that appear behind your content:
  • Colorful Shapes
  • Grid Shape
  • Dot Pattern
Display polygon-style shapes in the background for a modern, dynamic look.Best for: Creative directories, tech startups, design agencies

​
Finding the Right Balance

1

Experiment

Try different combinations of animations and background effects to see what works best.
2

Test Performance

Check how your directory performs on different devices and browsers.
3

Get Feedback

Ask users or colleagues for their opinions on the visual design.
4

Save Changes

Once you’re happy with the results, save your changes to apply them permanently.

​
Design Best Practices

Use colors and typography that align with your overall brand identity. If you have existing brand guidelines, stick to them.
Choose layouts and designs that work best for your target audience. Local businesses might benefit from the Business layout, while professional services might prefer the Standard layout.
Ensure text is easy to read with good contrast between text and background colors. Test both light and dark modes thoroughly.
Preview your directory on desktop, tablet, and mobile devices to ensure it looks great everywhere.
While animations can enhance user experience, too many can be distracting. Find the right balance.

​
Quick Tips

  • Real-time Preview: All changes appear instantly in the preview, so experiment freely before saving
  • Separate Dark Mode: Customize light and dark modes independently for the best experience in each
  • Hero Images: High-quality hero images create strong first impressions
  • Grid Columns: Choose column count based on your content - fewer columns for detailed listings, more for compact views
  • Save Regularly: Don’t forget to save your changes when you’re satisfied with the design

​
Next Steps

Creating Directory

Set up your directory structure and basic settings

Adding Listings

Learn how to add content to your customized directory
With the Advanced Theme Designer, you can give your directory a professional and polished look that perfectly matches your brand.