> ## Documentation Index
> Fetch the complete documentation index at: https://docs.gridix.live/llms.txt
> Use this file to discover all available pages before exploring further.

# Visualization Settings

> Customize how your floor plans and apartments are displayed in Gridix

Customize the appearance and behavior of your project's floor plans and apartments. Make your projects visually appealing and easy to navigate for customers.

## Accessing Visualization Settings

Navigate to your project editor and go to the "Visualization" or "Display Settings" section. Here you can configure all visual aspects of your project.

## Theme Customization

### Project Colors

<Steps>
  <Step title="Select Theme Color">
    Choose a primary color for your project:

    * Use color picker
    * Enter hex color code
    * Select from presets
  </Step>

  <Step title="Apply to Elements">
    Theme color applies to:

    * Active states
    * Selection highlights
    * Buttons and CTAs
    * Brand accents
  </Step>

  <Step title="Preview Changes">
    Use preview mode to see how colors look before saving.
  </Step>
</Steps>

### Background Settings

Configure background appearance:

* **Solid Color**: Choose a solid background color
* **Gradient**: Create gradient backgrounds
* **Image**: Upload custom background image
* **Transparent**: Transparent background for embedding

## Floor Plan Display

### Zoom Settings

<Steps>
  <Step title="Set Default Zoom">
    Configure initial zoom level:

    * Fit to screen (default)
    * Specific zoom percentage
    * Zoom to specific area
  </Step>

  <Step title="Zoom Limits">
    Set minimum and maximum zoom levels:

    * Min zoom: Prevent zooming out too far
    * Max zoom: Limit maximum zoom in
  </Step>

  <Step title="Zoom Controls">
    Enable/disable zoom controls:

    * Zoom in/out buttons
    * Mouse wheel zoom
    * Pinch zoom (mobile)
  </Step>
</Steps>

### Pan Settings

Configure panning behavior:

* **Pan Boundaries**: Limit panning to floor plan area
* **Smooth Panning**: Enable smooth animations
* **Pan Restrictions**: Prevent panning outside bounds
* **Initial Position**: Set starting pan position

### Grid and Overlays

* **Grid Display**: Show/hide grid overlay
* **Grid Color**: Customize grid line color
* **Grid Opacity**: Adjust grid transparency
* **Scale Indicator**: Display scale information
* **Coordinate Display**: Show coordinates on hover

## Apartment Display

### Apartment Markers

Customize how apartments appear on floor plans:

<CardGroup cols={2}>
  <Card title="Marker Style">
    * Shape (circle, square, polygon)
    * Size
    * Border style
    * Fill pattern
  </Card>

  <Card title="Status Colors">
    * Available: Green
    * Sold: Red
    * Reserved: Yellow
    * Hidden: Gray
  </Card>
</CardGroup>

### Apartment Labels

Configure apartment labels:

* **Show Numbers**: Display apartment numbers
* **Label Position**: Above, below, or inside marker
* **Label Style**: Font, size, color
* **Label Format**: Custom formatting options

### Hover Effects

<Steps>
  <Step title="Enable Hover Effects">
    Toggle hover effects for apartments.
  </Step>

  <Step title="Configure Hover Display">
    Set what appears on hover:

    * Apartment number
    * Basic info (rooms, area, price)
    * Quick preview
    * Status indicator
  </Step>

  <Step title="Hover Animation">
    Choose animation style:

    * Fade in
    * Slide up
    * Scale
    * None
  </Step>
</Steps>

## Interactive Features

### Click Behavior

Configure what happens when customers click apartments:

<Tabs>
  <Tab title="Show Details">
    Display apartment details in:

    * Modal popup
    * Side panel
    * New page
    * Expand inline
  </Tab>

  <Tab title="Actions">
    Trigger actions:

    * Open contact form
    * Show inquiry form
    * Navigate to detail page
    * Call to action
  </Tab>
</Tabs>

### Search Functionality

<Steps>
  <Step title="Enable Search">
    Toggle apartment search feature.
  </Step>

  <Step title="Configure Search Options">
    Set searchable fields:

    * Apartment number
    * Floor
    * Rooms
    * Price range
    * Status
  </Step>

  <Step title="Search Display">
    Configure search results display:

    * Highlight matching apartments
    * Zoom to results
    * Show results list
  </Step>
</Steps>

### Filters

Enable filtering options:

* **Status Filter**: Filter by availability
* **Price Filter**: Filter by price range
* **Rooms Filter**: Filter by number of rooms
* **Area Filter**: Filter by area range
* **Custom Filters**: Filter by custom fields

## Mobile Optimization

### Responsive Design

<Check>
  Gridix automatically optimizes for mobile devices:

  * Touch-friendly controls
  * Responsive layout
  * Mobile-optimized images
  * Swipe gestures
</Check>

### Mobile-Specific Settings

* **Touch Controls**: Enable/disable touch gestures
* **Mobile Layout**: Optimize for small screens
* **Image Loading**: Lazy load images on mobile
* **Performance**: Optimize for mobile performance

## Animation Settings

### Transitions

Configure transition animations:

* **Page Transitions**: Between views
* **Apartment Animations**: When selecting apartments
* **Zoom Animations**: Smooth zoom transitions
* **Pan Animations**: Smooth panning

### Performance

<Warning>
  Excessive animations can impact performance. Use animations judiciously for best user experience.
</Warning>

Optimize performance:

* Reduce animation duration
* Limit concurrent animations
* Use hardware acceleration
* Optimize image sizes

## Preview Mode

### Testing Changes

<Steps>
  <Step title="Enable Preview">
    Click "Preview" button in project editor.
  </Step>

  <Step title="Test Visualization">
    Test all visual settings:

    * Colors and themes
    * Zoom and pan
    * Apartment interactions
    * Mobile view
  </Step>

  <Step title="Make Adjustments">
    Return to editor to make changes if needed.
  </Step>
</Steps>

## Export Settings

### Image Export

Configure export settings:

* **Resolution**: Export resolution (HD, Full HD, 4K)
* **Format**: PNG, JPG, SVG
* **Background**: Include/exclude background
* **Watermark**: Add watermark if needed

### Print Settings

Optimize for printing:

* **Page Size**: A4, Letter, etc.
* **Orientation**: Portrait or Landscape
* **Margins**: Set print margins
* **Scale**: Fit to page or specific scale

## Best Practices

<Tip>
  **Consistent Branding**: Use your brand colors consistently across all visual elements.
</Tip>

<Tip>
  **Clear Labels**: Ensure apartment numbers and labels are clearly visible.
</Tip>

<Tip>
  **Intuitive Navigation**: Make zoom and pan controls easy to find and use.
</Tip>

<Tip>
  **Performance First**: Balance visual appeal with performance, especially on mobile devices.
</Tip>

## Troubleshooting

<AccordionGroup>
  <Accordion title="Changes not visible">
    * Clear browser cache
    * Refresh the page
    * Check if changes were saved
    * Verify correct project is selected
  </Accordion>

  <Accordion title="Performance issues">
    * Reduce animation complexity
    * Optimize image sizes
    * Disable unnecessary features
    * Check internet connection
  </Accordion>

  <Accordion title="Mobile display issues">
    * Test on actual device
    * Check responsive settings
    * Verify touch controls enabled
    * Clear mobile browser cache
  </Accordion>
</AccordionGroup>

## Next Steps

* **[Apartment Management](/en/projects/apartments)** - Configure apartment properties
* **[Widget Embedding](/en/widgets/embedding)** - Embed your project on your website
* **[Project Editing](/en/projects/editing)** - Learn about other editing options