Omnira Docs v1.0.0

Recipes

Short, step-by-step answers to common tasks. “Source” means the source files; “HTML” means editing the files in template/ directly.

Use only one demo for my website#

Source: run npm run site -- restaurant (use your demo's folder name) and upload the contents of site/. Everything else is left out automatically.

HTML: keep your demo's folder and assets/; delete the other demo folders and index.html. Add the small redirect file from Publishing so your domain opens the demo.

Change the main colour#

Source: in src/demos/<demo>/demo.json change "primary" in theme, e.g. "primary": "#0f766e". Text on it adjusts automatically.

HTML: change --primary in the <style>:root{…}</style> block at the top of every page (use Replace in Files).

Change the fonts#

In the demo's theme: "headingFont": "Lora", "bodyFont": "Inter". Use names exactly as on Google Fonts. Single-weight fonts need headingFontSpec; see Fonts.

Put your file in src/img/ and set "logo": { "image": "assets/img/my-logo.svg", "imageLight": "assets/img/my-logo-white.svg", "height": 40 } in site.json. See Logo.

Change the phone number everywhere#

  1. src/config/site.json → "phone".
  2. The demo's demo.json → contact.phone and header.topbar.items if it lists the phone.
  3. Search the demo's pages folder and data.json for the old number (e.g. in contact info boxes or team members).

Add a page to the menu#

In demo.json → nav, add { "label": "Catering", "href": "catering.html" } where you want it, or inside an item's children for a dropdown. See Header and menu.

Create a new page#

Copy a page file in src/demos/<demo>/pages/, rename it (catering.json → catering.html), edit it and link to it. See Create a new page.

Delete a page#

Delete its file from pages/ and remove links to it from nav, the footer columns and any buttons (search the demo folder for the file name, e.g. careers.html).

Move a section from another demo into mine#

Open the other demo's page file, copy the whole section (from { to }) and paste it into your page's sections list. It takes on your demo's colours and fonts. If it uses "$data" or "@…", replace that with a list of items, or copy the matching collection into your data.json.

Change the hero slider photos and text#

In the home page file, find the section with "type": "hero", "variant": "slider". Each entry in slides has image, eyebrow, title, text and buttons. Add or remove slides freely. See Hero.

Swap the hero for a different style#

Change "variant" to one of split, image, gradient, slider, minimal, video, form, collage, center-image or search, and give it the fields that variant uses (examples in Hero variants). The header style adjusts automatically.

Add a team member, room, course or product#

Open data.json, copy an existing record, paste it after a comma, give it a new slug and change its fields. Its page and cards appear on the next build. See Data and detail pages.

Write a new blog post#

Copy a record in the demo's posts collection in data.json (usually posts), give it a new slug, title, date, excerpt, image and html body. Put the newest post first to show it first.

Change prices and the currency#

Set "currency": "€" in demo.json; prices stored as numbers use it (products, cart, pricing tables, real estate). Prices written as text ("€29") are shown exactly as written.

Change “/mo” after pricing plans#

Give each plan a "period" (e.g. "/night") or set "period" on the pricing section for all plans. "" shows no suffix.

Connect the contact form to my email#

Set "formAction" in site.json to a form service address or to send.php; the PHP script is in Forms.

Connect the newsletter box to my mailing list#

Set "newsletterAction" in site.json to your provider's sign-up form address. The email field is already named email.

Add Google Analytics or another tracking code#

Paste the snippet into "headHtml" in site.json, with \" in place of every " inside it. See Analytics.

Change the map location#

Set "map": "Your address" on a contact section, or "query": "Your address" on a map section. In HTML, edit the q= part of the map iframe's src. See Maps.

Add a YouTube video#

Add "video": "https://www.youtube.com/embed/VIDEO_ID" to a video hero, a video banner, an about section or a button. See Video.

Remove the Demos tab and the palette button#

Build with npm run site -- <demo>, or set "showDemoSwitcher": false and "colorSwitcher": false in site.json. For HTML files see Switchers.

Set "credit": "" in footer in site.json (and in a demo's footer if it sets one). In HTML, delete the <p class="footer-made"> line.

Make the header solid instead of see-through#

Add "style": "light" (or "dark") to header in demo.json. For one page only, add "header": { "style": "light" } to that page file.

Remove the top bar#

Delete topbar from header in demo.json, or set "topbar": null on one page.

Hide a section without deleting it#

Add "hidden": true to the section.

Make a section full width#

Add "fluid": true. For galleries, "fullWidth": true removes the side margins.

Change the space above and below a section#

"padding": "sm", "md" (default), "lg" or "none".

Link a button to a section on the same page#

Give the section an "id": "pricing" and set the button's "href": "#pricing". The page scrolls smoothly to it.

Add "tiktok": "https://…" or "whatsapp": "https://wa.me/15550140000" to social in site.json. See Social links.

Use my own font files#

See Using a font that isn't on Google Fonts.

Add my own CSS#

Source: create src/scss/modules/_my-site.scss; it's included automatically. HTML: add rules at the end of assets/css/omnira.css. See Styles.

Make a one-page website#

Create a page whose sections each have an "id" and a "nav" label, and remove nav from demo.json: the menu is built from those sections and scrolls to them.

Speed up the build while I work#

Run node build.js --only restaurant --no-format to rebuild just one demo without formatting. npm run dev already does this automatically for you.