Skip to Content
Website

Website

This course covers the full Website module in Quickenerp. Learn how to build and manage your company website with the drag-and-drop builder, create pages and menus, run a blog, configure forms, manage SEO, apply themes, and publish content.

Responsible System
Last Update 07/21/2026
Completion Time 3 days 3 hours
Members 1
Website & eCommerce
Website Overview
View all
New Content
Introduction to Website Builder
Introduction to Website Builder
Preview

The Website Module

The Website module provides a drag-and-drop website builder with responsive themes, SEO tools, forms, blogs, and eCommerce integration.

Core Concepts

Concept Model Description
WebsitewebsiteA website instance. You can run multiple separate websites (different domains/languages) from one database.
Pagewebsite.pageA URL on the website with HTML content.
Menuwebsite.menuNavigation entries. Can have sub-menus.
Themewebsite.themeVisual design: colors, fonts, layouts.
Block / SnippetUI componentDraggable content elements (text, image, button, form, slider).
Formwebsite.formContact forms, lead generation forms.

Accessing the Website Builder

  • Go to Website from the main dashboard.
  • Toggle Edit mode (top right) to enter the builder.
  • The Website menu also has:
    • Site – Manage pages, menus, domains.
    • Configuration – Settings, themes, analytics.
    • Content – Blog posts, news, galleries.

Navigation & Menus

Go to Website > Site > Menus. Create main menu items and submenus. Each item links to a page, URL, or app. Reorder by sequence. Multi-level menus appear as dropdowns.

New Content
Themes, Styling & Customization
Themes, Styling & Customization
Preview

Themes & Design

Theme Selection

Go to Website > Configuration > Themes. Quickenerp ships with dozens of ready-made themes to choose from, covering common industries out of the box (retail, real estate, restaurant, professional services, e-commerce storefronts, and more) — pick one as a starting point instead of building every page from a blank layout, then customize colors, fonts, and content on top.

Switching themes later is possible but re-applies the new theme's default styling — customized pages built with individually-edited blocks are generally preserved, but heavily theme-specific layouts may need touch-ups after a switch. Preview a theme before committing on a production site.

Customizing Theme Colors

In Edit mode:

  1. Click Theme button (top toolbar).
  2. Color Palette – Choose from presets or define custom colors.
  3. Fonts – Heading and body font families.
  4. Button Style – Default button shape (rounded, square, pill).
  5. Layout – Container width, gutter spacing.
  6. Header – Transparent, fixed, classic.
  7. Footer – Minimal, detailed, with social links.

Custom CSS / SCSS

For advanced styling:

  • Go to Website > Configuration > Settings > Custom Code.
  • Add Custom CSS or Custom JavaScript.
  • Changes apply site-wide. Use browser DevTools to inspect elements.

Responsive Preview

In Edit mode, click the device icons (Desktop, Tablet, Mobile) to preview responsive behavior. Adjust block visibility per device in block settings.

New Content
Pages, Blocks & Content
Pages, Blocks & Content
Preview

Creating & Editing Pages

Adding a Page

  1. Enter Edit mode on the website.
  2. Click + New (top left) → New Page.
  3. Enter page Name (used for menu if selected).
  4. Select a Layout (Full Width, Boxed, With Sidebar).
  5. Start with blank or Duplicate an existing page.
  6. The page URL auto-generates from the name (e.g. /about-us).

Using the Builder

  • Snippets – Panel on the left. Drag blocks onto the page.
  • Block Types: Paragraph, Title, Image, Video, Button, Separator, Table, Bullet List, Quote.
  • Structure Blocks: Columns, Grid, Slider, Accordion, Tabs, Counters, Timeline.
  • Content Blocks: Features, Team Grid, Pricing Table, Testimonials, Call to Action.

Editing Blocks

Click any block to select it. The inline editor allows:

  • Text editing with rich formatting (bold, italic, links).
  • Image replacement.
  • Column width resizing.
  • Custom CSS class (for advanced users).
  • Move (drag handle), Duplicate, Delete.
  • Animation (fade, slide, zoom on scroll).

Page Properties

In Edit mode, click Page Options (gear icon). Set:

  • SEO – Meta title, meta description, canonical URL, og:image.
  • Indexation – Allow or prevent search engine indexing.
  • Follow – Follow or nofollow links.
  • Translations – Link to translated versions.
  • Header / Footer – Override per page or inherit from theme.

Page Versions & Publishing

A page can be Unpublished (only visible to internal users while you work on it) or Published (live to the public). Toggle with the switch top-right of the builder. Unpublished pages are a safe way to draft new content without visitors seeing a half-finished page.

This documentation is updated continuously. Some features described here may be renamed, deprecated, or still being finalized.