Skip to main content

​
Visualization Settings

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

1

Select Theme Color

Choose a primary color for your project:
  • Use color picker
  • Enter hex color code
  • Select from presets
2

Apply to Elements

Theme color applies to:
  • Active states
  • Selection highlights
  • Buttons and CTAs
  • Brand accents
3

Preview Changes

Use preview mode to see how colors look before saving.

​
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

1

Set Default Zoom

Configure initial zoom level:
  • Fit to screen (default)
  • Specific zoom percentage
  • Zoom to specific area
2

Zoom Limits

Set minimum and maximum zoom levels:
  • Min zoom: Prevent zooming out too far
  • Max zoom: Limit maximum zoom in
3

Zoom Controls

Enable/disable zoom controls:
  • Zoom in/out buttons
  • Mouse wheel zoom
  • Pinch zoom (mobile)

​
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:

Marker Style

  • Shape (circle, square, polygon)
  • Size
  • Border style
  • Fill pattern

Status Colors

  • Available: Green
  • Sold: Red
  • Reserved: Yellow
  • Hidden: Gray

​
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

1

Enable Hover Effects

Toggle hover effects for apartments.
2

Configure Hover Display

Set what appears on hover:
  • Apartment number
  • Basic info (rooms, area, price)
  • Quick preview
  • Status indicator
3

Hover Animation

Choose animation style:
  • Fade in
  • Slide up
  • Scale
  • None

​
Interactive Features

​
Click Behavior

Configure what happens when customers click apartments:
Display apartment details in:
  • Modal popup
  • Side panel
  • New page
  • Expand inline

​
Search Functionality

1

Enable Search

Toggle apartment search feature.
2

Configure Search Options

Set searchable fields:
  • Apartment number
  • Floor
  • Rooms
  • Price range
  • Status
3

Search Display

Configure search results display:
  • Highlight matching apartments
  • Zoom to results
  • Show results list

​
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

Gridix automatically optimizes for mobile devices:
  • Touch-friendly controls
  • Responsive layout
  • Mobile-optimized images
  • Swipe gestures

​
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

Excessive animations can impact performance. Use animations judiciously for best user experience.
Optimize performance:
  • Reduce animation duration
  • Limit concurrent animations
  • Use hardware acceleration
  • Optimize image sizes

​
Preview Mode

​
Testing Changes

1

Enable Preview

Click “Preview” button in project editor.
2

Test Visualization

Test all visual settings:
  • Colors and themes
  • Zoom and pan
  • Apartment interactions
  • Mobile view
3

Make Adjustments

Return to editor to make changes if needed.

​
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
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

Consistent Branding: Use your brand colors consistently across all visual elements.
Clear Labels: Ensure apartment numbers and labels are clearly visible.
Intuitive Navigation: Make zoom and pan controls easy to find and use.
Performance First: Balance visual appeal with performance, especially on mobile devices.

​
Troubleshooting

  • Clear browser cache
  • Refresh the page
  • Check if changes were saved
  • Verify correct project is selected
  • Reduce animation complexity
  • Optimize image sizes
  • Disable unnecessary features
  • Check internet connection
  • Test on actual device
  • Check responsive settings
  • Verify touch controls enabled
  • Clear mobile browser cache

​
Next Steps