Design Philosophy
The primary goal of your splash page is to help users provide the required information as quickly and easily as possible. Every design element should support this objective by keeping users focused on the central input form while maintaining a professional appearance that reflects your brand.
Splash Page Structure
Your splash page consists of two main components:
Page Background - The full-screen backdrop that sets the visual tone
Central Grid Box - The focused content area containing your logo and input fields
This structure ensures users immediately understand where to direct their attention while providing flexibility for brand expression through the background.
Background Design Guidelines
Your background serves multiple purposes: brand reinforcement, location promotion, or event advertising. Consider these options:
Solid color for clean, minimal designs
Brand imagery to reinforce location identity
Event promotions using upcoming event posters as backdrops
Image with color overlay to balance visual interest with readability
Critical Design Rule: The background must never compete with the central grid box for attention. Users should instantly focus on the input area, not struggle to find it among distracting visuals.
Recommended image dimensions: 1900px × 1200px
Logo Specifications
Position your logo prominently within the grid box to establish immediate brand recognition.
Recommended dimensions:
Maximum width: 300 pixels
Maximum height: 250 pixels
These constraints ensure your logo displays clearly across all devices without overwhelming the input fields.
Color Scheme Strategy
Create strong visual hierarchy through strategic color contrast:
Background: Darker tones
Grid box: Lighter tones
This contrast ensures the central content area stands out clearly, guiding users naturally to the input fields regardless of your background choice.
Configuration Steps
1. Access Splash Page Settings
Navigate to the Splash page tab in your Spotipo site dashboard.
2. Upload Basic Elements
Configure your core visual elements:
Please ensure logo and background files are < 1MB. You can use an online tool like Canva or Pixlr to edit the image.
Logo upload
Background image selection
Background color selection
For additional customization options, click "Show advanced settings".
3. Select Page to Edit
Multiple pages may be available depending on your configured login methods. Use the page selector at the top to choose the appropriate page for editing.
4. Customize Page Heading
Click directly on any text element to open the text editor in the right panel. This allows you to modify headings, instructions, or any other text content.
5. Edit Interactive Elements
Every page element is directly editable:
Click on input fields to modify their appearance
Select buttons to customize colors and styling
Choose any element to access its specific editing options in the right panel
6. Editing Fields
If you want to Edit/Add or Remove any of the fields on the form, use the Fields editor.
7. Save and Test Your Changes
Save: Click the "Save" button in the top right corner to preserve all modifications.
Preview: Use the "Demo" button to test your splash page functionality and appearance before going live.
Best Practices Summary
Keep backgrounds subtle to maintain focus on the input area
Use high contrast between background and grid box colors
Optimize logo dimensions for clear display across devices
Test your design with the Demo feature before publishing
Consider your audience's primary device types when choosing colors and sizing
Your splash page serves as the first impression for users accessing your location's network. A well-designed page balances professional appearance with user-friendly functionality, encouraging quick completion of required information while reinforcing your brand identity.