Routes define the structure of your site’s URLs and determine which module handles a given request.

By default, Vvveb CMS uses SEO‑friendly routes optimized for blog‑centric websites.

However, these rules can be customized to support different site structures, landing‑page‑focused sites, ecommerce stores, or fully custom URL patterns.

1. Purpose of Routes

Routes determine:

• Which module handles a URL
• How slugs are interpreted
• Whether /{slug} refers to a post or a page
• How pages, posts, categories, products, and custom modules are accessed
• Whether URLs include prefixes such as /page/, /post/, /product/, etc.

This system allows full control over URL design and SEO structure.

2. Default Routing Behavior

Vvveb CMS ships with a clean, SEO‑friendly routing configuration:

Default Rules

This structure is ideal for ecommerce and blog first websites where posts are the primary content type.

3. When to Customize Routes

Some websites are not blog‑centric and require a different URL structure.
For example:

• Corporate websites where pages are the main content
• Landing‑page‑driven sites
• Documentation sites
• Ecommerce stores where posts are secondary
• Sites that want /{slug} to always load a page, not a post

In these cases, you can override the default routing rules.

4. Custom Route Rules

The Routes tab allows you to:

• Change which module handles a specific URL pattern
• Reassign /{slug} from posts to pages
• Add or remove prefixes
• Create custom URL structures
• Override or disable default routes
• Add new routes for custom modules or plugins

Example: Using /{slug} for Pages Instead of Posts

To make /about, /contact, /services load pages instead of posts:

1. Open Routes tab
2. Locate the page route rule
3. Change its pattern to:

   /{slug}
   

4. Update the post route to use a prefix, for example:

   /blog/{slug}
   

This instantly transforms the site into a page‑centric structure.

5. Route Rule Structure

A route rule typically includes:

• Pattern — URL structure (e.g., /page/{slug})
• Module — Which CMS module handles the request
• Controller/Action — Optional advanced mapping
• Parameters — Extracted from the URL (e.g., {slug}, {#post_id#})
• Priority — Determines which rule is matched first

Common Parameters

6. Best Practices

• Avoid route conflicts
  Ensure no two routes match the same pattern.

• Keep URLs short and meaningful
  Good for SEO and user experience.

• Use prefixes for clarity
  /blog/{slug}, /docs/{slug}, /shop/#product_id#

• Test routes after changes
  Incorrect routing can break navigation.

• Use {slug} for human‑readable URLs
  Avoid exposing numeric IDs unless necessary.

Summary

The Routes Tab allows you to:

• Control URL structure
• Map URLs to posts, pages, products, and custom modules
• Override default blog‑centric routing
• Create page‑centric or custom routing systems
• Improve SEO and user experience through clean URLs

This flexibility makes Vvveb CMS suitable for blogs, corporate sites, ecommerce stores, landing pages, and fully custom applications.

These settings apply globally to the selected site in a multisite installation.

1. Site Identity

Site Name

• Field: Site name
• Description: The public name of your website.
• Usage: Displayed in the header, footer, browser title, and metadata depending on theme.

2. Domain & URL Configuration

Vvveb supports flexible domain setups, including subdomains, subfolders, and combined configurations.

Domain / Subdomain

• Field: Domain/subdomain
• Example: vvveb.vvveb.net
• Description: The primary domain or subdomain where the site is accessible.

Subfolder

• Field: Subfolder
• Example: vvveb
• Description: Allows hosting the site inside a subdirectory of a domain.
  Useful for:
  • Multi‑site setups
  • Staging environments
  • Sites hosted under a parent domain

Domain + Subfolder

• Field: Domain/subdomain and subfolder
• Example: vvveb.vvveb.net/vvveb
• Description: Combines both domain and subfolder routing.

3. Theme & Template

Theme

• Field: Theme
• Description: Selects the active theme for the site.
• Example: Landing

Home Template

• Field: Home template
• Description: Overrides the default homepage template.
• Options:
  • -- Default template --
  • Default homepage template provided by the active theme

4. Email Settings

These emails are used for system notifications and public contact forms.

Administration Email Address

• Field: Administration Email Address
• Example: admin@mydomain.com
• Usage:
  • Order notifications
  • User registration alerts
  • System messages

Contact Email Address

• Field: Contact Email Address
• Example: hi@vvveb.com
• Usage:
  • Displayed on contact pages
  • Used by contact forms
  • Public‑facing communication

5. Branding & Logos

The General tab allows uploading multiple logo variants for different UI states and themes.

Site Logo

• Field: Site logo
• Description: Primary logo used across the site.

Favicon

• Field: Fav icon
• Description: Small icon displayed in browser tabs and bookmarks.

Logo (Sticky)

• Field: Logo sticky
• Description: Logo displayed when the header becomes sticky on scroll.

Logo (Dark)

• Field: Logo dark
• Description: Logo variant optimized for dark backgrounds or dark themes.

Logo (Dark Sticky)

• Field: Logo dark sticky
• Description: Sticky‑header version of the dark logo.

6. Banners

Site Banner

• Field: Site banner
• Description: A large banner image used by themes that support hero or header banners.

Web App Install Banner

• Field: Web app install banner
• Description: Image used for PWA (Progressive Web App) installation prompts.
• Action: Set image

7. Actions

Save Site

• Saves all changes made in the General tab.

Sites List

• Returns to the list of all configured sites (multisite installations).

Summary

The General Tab is the central place for configuring:

• Site name and identity
• Domain and URL structure
• Theme and homepage template
• Administrative and public email addresses
• Logos and branding assets
• Site and PWA banners

These settings define how your site appears, how it is accessed, and how it communicates with users.

These settings define how your site appears on platforms such as Facebook, Twitter, LinkedIn, and messaging apps that rely on Open Graph and Twitter Card metadata.

The SEO tab is multilingual. Each language can have its own Open Graph and Twitter metadata.

1. Multilingual SEO Metadata

At the top of the tab, you can switch between languages (e.g., English, Romanian, German).
Each language has its own:

• Open Graph title
• Open Graph description
• Twitter title
• Twitter description
• Twitter label/data fields

This ensures correct metadata for multilingual websites.

2. Open Graph Settings

Open Graph metadata is used by:

• Facebook
• LinkedIn
• WhatsApp
• Slack
• Discord
• Many social sharing previews

These fields define how your site appears when shared.

Open Graph Title

• Field: Open Graph Title
• Description:
  The title shown in social media previews.
  Should be short, descriptive, and compelling.

Open Graph Description

• Field: Open Graph Description
• Description:
  A short summary displayed under the title in social previews.
  Should highlight the value or purpose of the page.

3. Twitter Card Settings

Twitter uses its own metadata format called Twitter Cards.
These fields define how your site appears when shared on Twitter (X).

Twitter Title

• Field: Twitter Title
• Description:
  The headline shown in Twitter link previews.

Twitter Description

• Field: Twitter Description
• Description:
  A short description displayed under the title.

Twitter Label 1 / Data 1

• Fields:
  • Twitter label 1
  • Twitter data 1
• Description:
  Optional metadata fields used for additional information such as:
  • Price
  • Author
  • Category
  • Reading time
  • Product attributes

Twitter Label 2 / Data 2

• Fields:
  • Twitter label 2
  • Twitter data 2
• Description:
  Same as above — used for a second custom metadata pair.

These fields are optional but useful for ecommerce or content‑rich sites.

4. How Themes Use SEO Metadata

Themes can automatically insert these values into:

• <meta property="og:title">
• <meta property="og:description">
• <meta name="twitter:title">
• <meta name="twitter:description">
• <meta name="twitter:label1">
• <meta name="twitter:data1">

If a theme supports social preview images, it may also use:

• Site logo
• Site banner
• Featured image
• Custom OG image fields

5. Best Practices

• Keep titles under ~60 characters for best display.
• Keep descriptions under ~155 characters to avoid truncation.
• Use action‑oriented language (“Build your website easily…”)
• Ensure metadata is language‑appropriate for multilingual sites.
• Use Twitter label/data fields for product details, pricing, or author info.
• Always test your metadata using:
  • Facebook Sharing Debugger
  • Twitter Card Validator

Summary

The SEO Tab configures:

• Open Graph metadata (title, description)
• Twitter Card metadata (title, description, custom label/data fields)
• Multilingual SEO fields
• Social sharing preview information

These settings ensure your site displays correctly and attractively when shared on social networks, improving click‑through rates and overall visibility.

These settings define whether comments are allowed, how long they remain open, whether anonymous users may comment, how deeply replies can nest, and how comments are paginated and sorted.

Individual posts may override some of these global settings.

1. Default Post Comments

Allow Comments

• Field: Allow comments
• Description:
  Enables or disables comments globally for all posts.
  When enabled, posts can accept comments unless individually overridden.

Note: Individual posts may override this setting in their own comment options.

2. Anonymous Comments

Allow Comments Without User Account

• Field: Anonymous comments
• Description:
  Allows visitors who are not logged in to submit comments.
  When disabled, only registered and logged‑in users may comment.

3. Automatically Close Comments

Close Comments on Older Posts

• Field: Automatically close comments
• Example: On posts older than 14 days
• Description:
  Automatically disables new comments on posts after a specified number of days.
  Helps reduce spam and maintain relevance on older content.

4. Nested Comments Level

Reply Depth

• Field: Nested comments level
• Example: 5 levels deep
• Description:
  Controls how many levels of threaded replies are allowed.
  Higher values allow deeper discussion threads.

5. Comments Pagination

Break Comments Into Pages

• Field: Comments pagination
• Options:
  • Enable/disable pagination
  • Number of top‑level comments per page (e.g., 50)
  • Which page is shown by default (e.g., last)
• Description:
  Splits large comment sections into multiple pages for performance and readability.

Top‑level comments are counted; replies are grouped under them.

6. Comments Sort Order

Sorting Direction

• Field: Comments sort order
• Options:
  • older
  • newer
• Description:
  Determines whether the oldest or newest comments appear first.

Summary

The Comments Tab configures:

• Whether comments are allowed globally
• Whether anonymous users may comment
• Automatic comment closure after X days
• Maximum nesting depth for threaded replies
• Pagination of comment lists
• Sorting order (oldest/newest first)

These settings ensure that your site’s comment system behaves consistently, remains manageable, and provides a good user experience.

These configurations are essential for multilingual or multi‑region websites, ecommerce stores, and any site that needs accurate localization.

1. Address & Company Information

These fields define the physical location and business identity of the site owner. They are used in invoices, order confirmations, structured data, and theme blocks.

Address

• Field: Address
• Example: West 21st Street Brooklyn NY
• Usage:
  • Displayed on contact pages
  • Used in invoices and order emails
  • Can be used by themes for footer contact blocks

Geocode

• Field: Geocode
• Description:
  Coordinates or geolocation string used by map integrations or shipping plugins.

Country

• Field: Country
• Example: United States
• Usage:
  • Determines available regions/states
  • Influences tax and shipping rules
  • Used in checkout and address forms

Region / State

• Field: Region / State
• Example: Alaska
• Usage:
  • Required for shipping/tax calculations
  • Used in address formatting

Company

• Field: Company
• Description:
  Business or organization name.

VAT ID

• Field: VAT Id
• Description:
  Tax identification number used for invoicing and compliance.

2. Language Settings

These settings control which languages are available on the site and which one is used by default.

Languages

• Field: Languages
• Options:
  • All languages
  • Individual languages (e.g., English, Romanian, German)
• Description:
  Determines which languages are enabled for the site. Homepage for each language is the language slug ex: example.com/fr

Default Language

• Field: Default Language
• Example: English
• Description:
  The primary language, homepage for primary language does not have language slug in url ex: example.com/fr

3. Currency Settings

These settings control which currencies are available and which one is used by default.

Currencies

• Field: Currencies
• Options:
  • All currencies
  • Individual currencies (e.g., US Dollar)
• Description:
  Determines which currencies the site supports.

Default Currency

• Field: Default Currency
• Example: US Dollar
• Description:
  The currency that is preselected for the site.

4. Measurement Units

These settings define the units used for product dimensions and weights.

Length Class

• Field: Length Class
• Example: Centimeter
• Usage:
  • Product dimensions
  • Shipping calculations
  • Theme display

Weight Class

• Field: Weight Class
• Example: Kilogram
• Usage:
  • Product weight
  • Shipping rules
  • Inventory systems

5. Time & Date Settings

These settings control how dates and times are displayed across the site, including posts, orders, comments, and admin logs.

Timezone

• Field: Timezone
• Description:
  Sets the timezone for:
  • Order timestamps
  • Scheduled posts
  • Logs
  • Date/time filters

Date Format

• Field: Date format
• Options:
  • March 27, 2026 (F j, Y)
  • 2026‑03‑27 (Y-m-d)
  • 03/27/2026 (m/d/Y)
  • 27/03/2026 (d/m/Y)
  • 4 day ago (human‑readable)
  • Custom format
• Preview: Shows how the selected format will appear.

Time Format

• Field: Time format
• Options:
  • 6:17 pm (g:i a)
  • 6:17 PM (g:i A)
  • 18:17 (H:i)
  • Custom format
• Preview: Displays the formatted time.

Summary

The Locale / Localization Tab configures:

• Address and company details
• Country and region
• Language availability and default language
• Currency availability and default currency
• Measurement units (length, weight)
• Timezone, date format, and time format

These settings ensure that your site displays information correctly for your region, supports multilingual content, and handles ecommerce data accurately.

This tab is fully multilingual. When multiple languages are enabled, each language can have its own title, description, and metadata.

Purpose

Use the Description tab to configure:

• The site’s public title
• The site’s description (used in headers, footers, and theme blocks)
• SEO metadata (keywords and meta description)
• Contact phone number
• Language‑specific metadata for multilingual sites

These settings help search engines understand your site and improve how your pages appear in search results.

Fields

1. Site Title

• Field: Site title
• Example: Vvveb - Open Source CMS and eCommerce
• Description:
  The main title of the website.
  Used in:
  • Browser title bar
  • Search engine results
  • Social sharing previews
  • Theme header (if supported)

2. Site Description

• Field: Site description
• Example:
  CMS with drag and drop website builder for blogs, landing pages or ecommerce stores
• Description:
  A short summary of what the site is about.
  Used in:
  • Theme blocks
  • SEO metadata
  • Social sharing cards
  • Directory listings

3. Meta Keywords

• Field: Meta keywords
• Example:
  cms, page builder, drag and drop, ecommerce, ecommerce platform, landing, graphql, rest api, 2fa, newsletter, bootstrap 5
• Description:
  A comma‑separated list of keywords describing your site.
  Although modern search engines rely less on keywords, they remain useful for internal search and some SEO tools.

4. Meta Description

• Field: Meta description
• Example:
  Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores
• Description:
  A concise summary displayed in search engine results.
  This is one of the most important SEO fields.

5. Phone Number

• Field: Phone number
• Description:
  Public contact phone number.
  Used in:
  • Contact pages
  • Footers
  • Schema.org structured data (if enabled by theme)

Multilingual Support

If your site has multiple languages enabled, the Description tab will display language selectors (e.g., English, Romanian, German).
Each language can have its own:

• Site title
• Site description
• Meta keywords
• Meta description
• Phone number

This allows full localization of SEO and public‑facing metadata.

These configurations apply to all orders placed on the site unless overridden by plugins or custom logic.

1. Invoice Format

Invoice Format Pattern

• Field: Invoice Format
• Example:
  I-{year2}-{month}-{order_id}-{user_id}-{customer_order_id}
• Preview:
  I-26-03-777-1000-OI888

Description

Defines the format of generated invoice numbers.
You can use dynamic placeholders:

This allows full customization of invoice numbering for accounting or legal requirements.

2. Customer Order ID Format

Customer Order ID Pattern

• Field: Customer Order Id

• Description:
  Generates a unique, non‑sequential order ID for customers.
  Helps prevent exposing total order count and improves privacy.

• Example Pattern:
  {rand-str-12}-{year2}

• Preview:
  JXDILECEQRPI-26

Usage

This ID is shown to customers in:

• Order confirmation pages
• Emails
• Account order history
• Guest order lookup

It is not the internal order ID used by the system.

3. Cart & Checkout Behavior

Display Weight on Cart Page

• Field: Display weight on cart page
• Type: Toggle
• Description:
  Shows total cart weight to customers.
  Useful for stores where shipping cost depends on weight.

Allow Guest Checkout

• Field: Allow guest checkout
• Type: Toggle
• Description:
  Allows customers to place orders without creating an account.
  When disabled, checkout requires login or registration.

4. Order Status Configuration

These settings define how the system behaves when an order reaches certain statuses.

New Order Status

• Field: New Order Status
• Example: Pending
• Description:
  The status assigned to an order immediately after it is placed.

Subtract Stock on Order Status

• Field: Subtract stock on order status
• Example: Pending
• Description:
  Determines when product stock is reduced.
  Also controls when:
  • Coupons
  • Vouchers
  • Reward points
    are redeemed.

Tip:
Many stores subtract stock on Pending, but stores requiring payment confirmation may choose Processing or Paid.

Enable User Downloads on Order Status

• Field: Enable user downloads on order status
• Example: Pending
• Description:
  Defines when customers can access:
  • Digital downloads
  • Gift vouchers
  • License files

For paid digital products, this is often set to Paid or Completed.

Summary

The Orders Tab configures:

• Invoice number formatting
• Customer‑facing order ID generation
• Guest checkout availability
• When stock is subtracted
• When downloads become available
• Default order status on creation

These settings ensure consistent order processing, proper stock management, and a smooth checkout experience.

• Blog post images
• Product images
• Thumbnails
• Image quality and output format
• How images are cropped, stretched, or resized

These configurations are essential for performance optimization, consistent image display, and responsive design.

1. Post Image Sizes

These settings define how images attached to posts (blog posts, articles, custom post types) are resized.

Each size includes:

• Width
• Height
• Resize Method

Tip: To maintain aspect ratio, set either width or height to 0.

Extra Large

• Width: 1024
• Height: 0
• Method: Crop & Resize
• Usage:
  • Hero images
  • Featured images in large layouts
  • Full‑width blog headers

Large

• Width: 800
• Height: 0
• Method: Stretch
• Usage:
  • Standard post images
  • Blog listing pages

Medium

• Width: 400
• Height: 0
• Method: Stretch
• Usage:
  • Sidebar widgets
  • Related posts
  • Smaller content blocks

Thumb

• Width: 150
• Height: 0
• Method: Stretch
• Usage:
  • Thumbnails
  • Category lists
  • Recent posts widgets

2. Product Image Sizes

These settings define how product images are resized for ecommerce pages.

Extra Large

• Width: 1024
• Height: 0
• Method: Crop & Resize
• Usage:
  • Product detail page main image
  • Zoomable product images

Large

• Width: 800
• Height: 0
• Method: Stretch
• Usage:
  • Product listing grids
  • Category pages

Medium

• Width: 400
• Height: 0
• Method: Stretch
• Usage:
  • Smaller product cards
  • Mobile layouts

Thumb

• Width: 150
• Height: 0
• Method: Stretch
• Usage:
  • Product thumbnails
  • Variant selectors
  • Mini‑cart previews

3. Resize Methods Explained

4. Image Output Settings

These settings control how images are saved after processing.

Format

• Options:
  • Original (keeps the uploaded format)
  • Other formats if enabled by plugins
• Usage:
  • Keep original for maximum compatibility
  • Convert to WebP or AVIF (if supported) for performance

Quality

• Field: Quality
• Default: 80
• Description:
  Controls compression level for JPEG/WebP images.
  Higher = better quality, larger file size.
  Lower = smaller file size, reduced quality.

5. Aspect Ratio Tip

A note in the interface states:

To keep image proportion set either height or width to 0 (zero).

This ensures images scale proportionally without distortion.

Summary

The Media Settings Tab configures:

• Post image sizes
• Product image sizes
• Resize behavior (crop, stretch, resize)
• Image output format
• Image quality

These settings ensure consistent image presentation across your site and help optimize performance for both desktop and mobile users.

Plugin repository https://github.com/Vvveb/editor-js.

Plugin repository https://github.com/Vvveb/chatgpt.

Plugin repository https://github.com/Vvveb/remove-google-fonts.

Plugin repository https://github.com/Vvveb/stripe.

Plugin repository https://github.com/Vvveb/brevo-email.

Plugin repository https://github.com/Vvveb/openapi.

Plugin repository https://github.com/Vvveb/hide-language-selector.

With the ActivityPub plugin installed, your Vvveb website functions as a federated profile, along with profiles for each admin user.

If your website is example.com, then the profile can be found at @example.com@example.com, and authors like Joe would have their individual profiles at @joe@example.com

Once you follow Jane’s @jane@example.com profile, any blog post she crafts on example.com will show in your Home feed.

1. Install the ActivityPub plugin.
2. Go to Mastodon or another federated platform, and search for your profile and follow it.
3. Your profile will be in the form of either @your_username@example.com eg @admin@demo.vvveb.com.
4. On your site, publish a new post.
5. From Mastodon, check to see if the new post appears in your feed.

Plugin repository https://github.com/Vvveb/activitypub.

Recommended microblogging microblogging theme https://themes.vvveb.com/products/manny.

The plugin works with the following tested federated platforms, but there may be more that it works with as well:

• Mastodon
• Pleroma
• Akkoma
• friendica
• Hubzilla
• Pixelfed
• Socialhome
• Misskey

It may take a few minutes for the new post to show up in your federated feed.

Once ActivityPub is installed, only new posts will be available in the fediverse.

Users will never see previously published posts in their feed.

With ActivityPub, if someone follows your site, they will only receive new blog posts you publish from then on.

Plugin repository https://github.com/Vvveb/file-manager

Plugin repository https://github.com/Vvveb/two-factor-auth.

Popup can be customized from page builder

Plugin repository https://github.com/Vvveb/catalog-mode.

Plugin repository https://github.com/Vvveb/transliterate.

Plugin repository https://github.com/Vvveb/tinymce-plugins

Plugin repository https://github.com/Vvveb/sun-editor.

Plugin repository https://github.com/Vvveb/minify.

SEO plugin adds meta for content and schema markup for better SEO rankings.

Newsletters

Mailing lists

Send newsletter

Builtin honeypot anti spam filter.

Contact form component allows visual customization of forms from the page builder, add any fields visually.

This plugin is included and activated by default

Builtin honeypot anti spam filter.

Contact form component allows visual customization of forms from the page builder, add any fields visually.

This plugin is included and activated by default

This plugin is used on documentation site http://docs.vvveb.com

Categories are created automatically based on directory structure.

This plugin is used to import markdown documentation from https://github.com/Vvveb/docs into http://docs.vvveb.com/.

Uses adminer for database management.

Plugin repository https://github.com/Vvveb/dicebear.

Example plugin that adds a menu entry in the admin dashboard and a new page on frontend with a list of products.

Shows a debug bar on the bottom of the page with sql queries, filters etc

SEO plugin adds meta for content and schema markup for better SEO rankings.

Webmaster Tools

Social networks

Robots.txt

Rss Content

Sitemaps

Title settings

Content types

Product types

Routes

Schemas markup

Each field type defines how data is entered in the admin panel and how it can be displayed in your theme. All fields share a consistent set of settings, making them predictable and easy to configure.

Shared Field Settings

All field types include the following settings:

• Default Value - The value shown when creating a new post or product.
• Required - Prevents saving if the field is empty.
• Instructions - Helper text shown to editors.
• Placeholder Text - Text displayed when the field has no value.
• Prepend - Text displayed before the input.
• Append - Text displayed after the input.

These settings ensure consistency across all field types and make the editing experience intuitive.

Field Types

Each field type is designed for a specific kind of data. The following list summarizes the purpose of each field type based on the documentation you provided.

Accordion Field

Creates an accordion-style input for storing expandable/collapsible list items.
Useful for FAQs, feature lists, or structured content sections.
(“The Accordion field creates an accordion input, used for storing accordion list values.”)

Checkbox Field

Stores a true/false value using a checkbox input.
Ideal for toggles such as “Featured”, “Published”, or “Show in menu”.
(“The Checkbox field creates an checkbox input, used for storing true/false values.”)

Color Field

Provides a color picker for selecting HEX/RGB values.
Useful for theme settings, UI customization, or product color attributes.
(“The Color field creates an color input, used for storing color values.”)

Date Field

Stores a date value using a calendar picker.
Commonly used for events, schedules, or publication dates.
(“The Date field creates an date input, used for storing date values.”)

Date Time Field

Stores both date and time.
Useful for appointments, event start times, or timed promotions.
(“The Date time field creates an date_time input, used for storing date and time values.”)

Email Field

Validates and stores email addresses.
Useful for contact information or form submissions.
(“The Email field creates an email input, used for storing email address values.”)

File Field

Allows uploading files that can be downloaded on the website.
Useful for PDFs, documents, or downloadable resources.
(“The File field creates an file input, used for storing files that can be downloaded on the website.”)

Gallery Field

Stores multiple images as a gallery.
Ideal for product galleries, portfolios, or image collections.
(“The Gallery field creates an gallery input, used for storing a list of images that will be displayed as a gallery.”)

Google Map Field

Stores map coordinates or addresses using a Google Maps input.
Useful for locations, stores, or event venues.
(“The Google map field creates an google map input, used for storing google map address or coordinates values.”)

Image Field

Stores a single image.
Used for featured images, banners, or thumbnails.
(“The Image field creates an image input, used for storing an image.”)

Link Field

Stores a URL or internal link.
Useful for buttons, CTAs, or external references.
(“The Link field creates an link input, used for storing link values.”)

Message Field

Displays a static message in the editor (info, warning, instructions).
Does not store data.
(“The Message field creates an message input, used for displaying a message such as warning/info.”)

Month Field

Stores a month value (YYYY‑MM).
Useful for archives, billing cycles, or monthly scheduling.
(“The Month field creates an month input, used for storing month values.”)

Number Field

Stores numeric values.
Useful for quantities, prices, ratings, or measurements.
(“The Number field creates an number input, used for storing numeric values.”)

Oembed Field

Accepts media URLs and automatically embeds them (YouTube, Twitter, etc.).
Ideal for rich media content.
(“The Oembed field creates an oembed input, used for entering embed media links…”)

Password Field

Stores password values (masked input).
Useful for protected content or integrations.
(“The Password field creates an password input, used for storing password values.”)

Post Field

Autocomplete selector for choosing a post.
Useful for related posts, featured posts, or linking content.
(“The Post field creates an post input, used for choosing a post from an autocomplete list.”)

Product Field

Autocomplete selector for choosing a product.
Useful for cross‑selling, related products, or product references.
(“The Product field creates an product input, used for choosing a product from an autocomplete list.”)

Radio Field

Displays a list of radio buttons for selecting one value.
Useful for predefined options such as sizes, types, or modes.
(“The Radio field creates a list of radio inputs, used for choosing a value from a list of values.”)

Range Field

Creates a slider for selecting a numeric value within a range.
Useful for ratings, filters, or adjustable settings.
(“The Range field creates a range input, used for choosing a numeric value from a specified range.”)

Select Field

The Select field displays a dropdown list of predefined options, allowing the user to choose a single value. It is ideal for categories, types, modes, or any controlled vocabulary.
(“The Select field creates a dropdown list input, used for allowing the user to choose one value from the list.”)

Tab Field

The Tab field stores tabbed content, enabling editors to organize information into multiple labeled sections. This is useful for product specifications, multi-section content blocks, or structured layouts.
(“The Tab field creates an tab input, used for storing tabbed values.”)

Taxonomy Field

The Taxonomy field links a post to a taxonomy item, such as a category, tag, or custom taxonomy. It is essential for organizing content and enabling taxonomy-based filtering.
(“The Taxonomy field creates an taxonomy input, used for storing a taxonomy relation for the post.”)

Telephone Field

The Telephone field stores phone numbers using a tel input. It is suitable for contact information, business listings, or user profiles.
(“The Tel field creates an tel input, used for storing telephone number values.”)

Text Field

The Text field provides a simple single-line input for short strings. It supports an optional character limit and is one of the most commonly used field types.
(“The Text field creates a basic text input, useful for storing single string values.”)

Textarea Field

The Textarea field stores multi-line text, making it ideal for descriptions, notes, summaries, or any longer content that does not require rich formatting.
(“The Textarea field creates an textarea input, used for storing multi line text values.”)

Time Field

The Time field stores time values using a time picker. It is useful for schedules, opening hours, or event times.
(“The Time field creates an time input, used for storing time values.”)

Toggle Field

The Toggle field stores true/false values using a switch-style UI. It is a more visual alternative to the Checkbox field and works well for enabling or disabling features.
(“The Toggle field creates an toggle input, used for storing true/false values.”)

URL Field

The URL field stores website addresses and validates them as URLs. It is useful for external links, social profiles, or reference resources.
(“The Url field creates an url input, used for storing url address values.”)

User Field

The User field allows selecting a user from the system, storing a relationship between the post and a user account. It is useful for authorship, ownership, or assigning responsibility.
(“The User field creates an user input, used for choosing and storing an associated user for the post.”)

Week Field

The Week field stores week values (year + week number). It is useful for scheduling, weekly reports, or time-based categorization.
(“The Week field creates a week input, used for storing week values.”)

WYSIWYG Field

The WYSIWYG field provides a full rich-text editor, identical to the editor used for posts and products. It supports formatted text, images, embeds, and multimedia.
(“The Wysiwyg field creates a content editor… used for both text and multimedia to be edited and styled within a single area.”)

This field is ideal for long-form content, flexible layouts, and any scenario where editors need full control over formatting.

A combined reference table helps compare all Vvveb CMS custom field types at a glance and clarifies when each one is most appropriate. The table below summarizes every field described in your documentation, including its purpose and ideal use cases.

Custom Fields Reference Table

Using Custom Fields in Themes

Custom field values can be displayed in templates using components or Vtpl selectors. For example:

<span data-v-post-custom_field_slug></span>

Or inside a component:

<div data-v-product-custom_field_slug></div>

This makes it easy to integrate custom data into any theme layout.

Custom Fields are one of the most powerful ways to tailor Vvveb CMS to different content models. They allow you to build flexible, structured, and editor‑friendly content types without writing custom code.

Menus are fully editable using drag‑and‑drop, making it easy to reorder, nest, or regroup items.

Menu Structure & Organization

Menu items support hierarchical nesting, allowing you to create:

• Simple top‑level navigation
• Dropdown menus
• Multi‑level submenus
• Mega menu layouts

You can reorder items at any time by dragging them into a new position or nesting them under another item.

Sites

If you are running a multi‑site installation, you can choose which websites a menu belongs to.

A menu can be:

• Assigned to one site
• Shared across multiple sites
• Customized per site if needed

This is useful for multi‑brand setups or websites with different navigation structures.

Menu Items

Each menu item can link to different types of content. When adding a new item, choose from the following types:

Page

Links to a specific page.
An autocomplete field helps you quickly find the page.

Post

Links to a specific blog post.

Product

Links to a product in your store.

Link

Links to any internal or external URL.

Text

Displays custom HTML content.
Useful for mega menus, section headers, or non‑clickable labels.

Home Page

Automatically links to the homepage.
In multi‑language sites, it generates the correct homepage URL for each language.

Blog

Links to the blog posts list.

Shop

Links to the product catalog.

Multi‑Language Support

Menu item names and text fields support multiple languages.
When editing a menu item, you can switch languages and provide translations for each one.

Menu Item Actions

Each menu item includes the following actions:

• Edit - open the menu item editor
• Add child - create a submenu item under the current item
• Delete - remove the item from the menu

These actions make it easy to build complex navigation structures.

Bulk Delete

You can delete multiple menu items at once:

1. Select multiple items using the checkboxes
2. A Bulk Delete button will appear
3. Confirm deletion

This is useful when cleaning up large menus.

They are collections of links, pages, categories, or custom items that can be displayed in areas such as the header, footer, or sidebar.

Menus can be fully customized, reordered, and organized into multi‑level structures to create dropdowns or complex navigation layouts.

Menu Structure

Menu items support hierarchical organization, meaning you can:

• Create top‑level navigation items
• Add submenus or nested items
• Build multi‑level dropdowns
• Structure mega menus

All items can be dragged and dropped to reorder or regroup them.

Menu Actions

Each menu in the list includes the following actions:

Edit

Opens the menu editor where you can:

• Add, remove, or reorder items
• Assign the menu to specific sites
• Configure menu item types (page, link, product, etc.)

Duplicate

Creates a copy of the menu.

This is especially useful in multi‑site setups, where you may want similar menus with small variations for different sites.

Delete

Removes the menu entirely.

Bulk Delete

You can delete multiple menus at once:

1. Select multiple menus using the checkboxes
2. A Bulk Delete button will appear
3. Confirm deletion

This is helpful when cleaning up unused or test menus.

If you want, I can also help you expand this section with:

• A Menu Item Types reference
• A Mega Menu creation guide
• A Navigation best practices article

Custom fonts can be uploaded directly into the Theme Fonts section and used throughout your site.

Uploading Custom Fonts

You can add your own font files (such as .woff2, .woff, .ttf, .otf) to the theme:

1. Go to Themes → Fonts
2. Click Add font
3. Upload your font file
4. Configure the font family name, weight, style, and source file

Once saved, the font becomes available across the entire site where the theme is used.

Built‑In Fonts

Themes may also include built‑in font families such as:

• System fonts
• Variable fonts
• Icon fonts (e.g., Line Awesome)

These fonts are ready to use without any additional setup.

Using Custom Fonts in Your Site

After uploading a custom font, you can use it in:

• Page Builder text elements
• Posts content
• Pages content
• Product descriptions
• Any text field that supports font selection

This allows you to maintain consistent typography across all content types.

Advanced Font Settings

Each custom font includes an Advanced section where you can fine‑tune:

• Font display behavior
• Unicode ranges
• Additional @font-face properties

These options are useful for optimizing performance or handling multilingual typography.

Backups in Vvveb allow you to save and restore the entire database as a single SQL file. This includes posts, products, users, orders, settings, custom fields, taxonomies, and any plugin‑defined tables. A backup represents a complete snapshot of your site’s content and configuration at a specific moment in time, making it essential for disaster recovery, migrations, and development workflows.

Regular backups protect your site from data loss caused by accidental deletion, failed updates, server issues, or security incidents. Restoring a backup returns the database to the exact state it was in when the backup was created.

Backup Storage Location

All generated backups are stored in:

storage/backups

This folder contains timestamped SQL files that can be downloaded, archived, or restored.

Because backups are stored on the same server, they should not be considered the only copy of your data. If the server fails, local backups may be lost as well.

Restoring a Backup

Restoring a backup replaces the current database with the contents of the selected SQL file. This action should be performed carefully, as it overwrites all existing data. Typical use cases include:

• Recovering from accidental deletion
• Undoing a failed update or migration
• Cloning a site for development or staging
• Moving a site to a new server

Before restoring, it is recommended to create a fresh backup of the current state.

Cache types and when to clear them

Frontend assets cache

This cache stores optimized versions of CSS and JavaScript files, including minified and combined assets. Clear this cache when:

• Updating theme CSS or JS files
• Changing plugin assets
• Modifying build pipelines or asset loaders

This ensures browsers receive the latest versions instead of stale cached files.

Database cache

Database queries and content results are cached to reduce repeated lookups. Clear this cache when:

• Content changes in the admin do not appear on the frontend
• Custom SQL queries or models are updated
• Plugins modify database-driven components

This ensures the site displays the most recent data.

Image resize cache

Images are automatically resized into multiple versions (thumbnail, medium, large, etc.) for different parts of the site. Clear this cache when:

• Updating product or post images
• Changing image sizes in theme templates
• Replacing existing images with new ones of the same filename

Clearing forces regeneration of all resized images. Caching is one of the key performance features in Vvveb, and knowing which cache to clear helps keep your site fast while ensuring updates appear correctly.

Settings

• Default Value

The default value shown when creating a new post.

• Required

Prevents the field from accepting empty values.

• Instructions

Shows instructions for entering data for the input.

• Placeholder Text

Appears within input when no value exists.

• Prepend

Adds the text before the input.

• Append

Adds the text after the input.