Skip to main content

Website Layout

Customize your homepage content, hero section, and content sections.

Overview​

The Layout section allows you to design and structure your AppSalon website homepage. You can customize the hero section, add content sections, create image galleries, and configure the appointment booking button.

Where to go: Settings → Website → Layout

Hero Section​

The hero section is the main banner area at the top of your homepage.

Hero Image/Video​

Description: Upload a background image or video for your homepage hero section.

Supported Formats:

  • Images: JPG, JPEG, PNG, WEBP
  • Videos: MP4, WebM, OGG

Best Practices:

  • Use high-quality images (recommended: 1920x1080 or higher)
  • Ensure images are optimized for web (compressed but high quality)
  • Videos should be short and engaging (10-30 seconds recommended)

Title​

Description: Main heading displayed on the hero section.

Example: "Welcome to Our Salon", "Book Your Appointment Today"

Styling Options:

  • Text alignment (left, center, right)
  • Text color (dark, light, or theme-based)
  • Uppercase option

Subtitle​

Description: Supporting text below the title.

Example: "Professional hair and beauty services", "Schedule your visit online"

Styling: Inherits alignment and color from title settings

Text Alignment​

Options:

  • Left - Text aligned to the left
  • Center - Text centered (default)
  • Right - Text aligned to the right

Text Color​

Options:

  • Dark - Dark text (for light backgrounds)
  • Light - Light text (for dark backgrounds)
  • Theme - Uses theme-based colors

Uppercase​

Description: Option to display the title in uppercase letters.

Use Case: For emphasis or design consistency

Content Sections​

Add and customize content sections on your homepage.

Add Section​

Description: Create custom content sections with text, images, and HTML content.

Features:

  • Rich text editor (Summernote)
  • Image uploads
  • HTML content support
  • Custom styling

Use Cases:

  • About us section
  • Services overview
  • Special offers
  • Testimonials
  • Contact information

Description: Add image galleries to showcase your work, location, or services.

Features:

  • Multiple image uploads
  • Image organization
  • Responsive grid display

Use Cases:

  • Portfolio showcase
  • Before/after photos
  • Location photos
  • Service examples

Drag & Drop Reordering​

Description: Reorder sections by dragging them using the grip icon.

How to use:

  1. Hover over a section
  2. Click and hold the grip icon (⋮⋮)
  3. Drag to desired position
  4. Release to drop

Note: The order you set here is the order sections appear on your website.

Edit/Delete Sections​

Description: Modify or remove sections as needed.

  • Edit - Update section content and settings
  • Delete - Remove section from homepage

Appointment Button​

Configure the appointment booking button that appears on your website.

Button Text​

Description: Customize the button label.

Default: "Book Appointment" or similar

Example: "Book Now", "Schedule Visit", "Make Appointment"

Show in Navbar​

Setting: Show in Navbar (checkbox)

Description: Toggle visibility of the appointment button in the website navigation bar.

Options:

  • Enabled - Button appears in navigation bar
  • Disabled - Button only appears in content sections

Position​

Description: Control where the button appears on the page.

Options:

  • In navigation bar (if enabled)
  • In hero section
  • In content sections

Preview​

You can preview your website at any time by clicking the "View website" button in the Layout section.

Website URL: https://appsalon.nl/[your-domain]

Best Practices​

  • Hero Section: Use compelling, high-quality images that represent your business
  • Content Sections: Keep sections concise and focused
  • Image Optimization: Compress images before uploading for faster page load times
  • Mobile Responsive: Test your layout on mobile devices
  • Call-to-Action: Make the appointment button prominent and easy to find