Site theme

Pour :Administrateur

View of the « site theme » page

The Site theme page (/app/web/theme) is the modern visual customization interface for the Unisoft public site. Everything related to appearance (colors, fonts, hero, banners, home sections) is managed here, in six tabs organized from most general to most fine-grained.

The interface is designed to allow quick adjustments, without technical knowledge: no CSS, no code, just selectors, text fields, and drag-and-drop to reorganize the blocks.

ℹ

Immediate visibility of changes

Each modification validated in a tab is immediately visible on your public site — just refresh the page to see it.

Access the page

In the backoffice, expand Website in the left sidebar, then click on Site theme.

The direct URL is /app/web/theme.

Overview — the 6 tabs

Tab	Purpose
Appearance	Choice of graphic theme, primary/secondary colors, writing fonts
Menu	Action buttons displayed to the right of the header (max 2 buttons, e.g.: Donate, Shabbat)
Hero	Home carousel slides displayed at the top of the home page
Banners	Reminder cards displayable between home sections or in pre-footer
Home sections	Blocks visible on the home page (Events, Support, Schedules, Gallery, etc.)
Global sections (pre-footer)	Blocks visible on all pages, just before the footer

Tab 1 — Appearance

This is the most important tab: it defines the visual identity of the site.

Active theme

A selector offers two values:

• 2026 (new) — the recommended modern theme. Clean design, immersive hero, modular sections.
• Old theme — historical version kept for backward compatibility. To be avoided for new configurations.

If you're starting out, choose 2026.

Colors

Two main colors define the entire palette:

• Primary color — dominant color, used for buttons, important links, and titles. By default, a deep navy blue.
• Secondary color — accent color, used for supporting visual elements (cards, illustrations). By default, a warm gold.

A color picker opens on click, with the possibility of entering a precise hexadecimal value (e.g.: #1B2A4E).

★

Visual consistency

Choose two colors that harmonize with your community brand (logo, letterhead, posters). If in doubt, stick with the default values: they are designed to work together.

Typography

Two fonts to choose from, among an editorial selection optimized for reading:

• Title font (display) — used for titles, headings, hero. By default: Fraunces (modern editorial serif). Suggested alternatives: Playfair Display, Cormorant Garamond, DM Serif Display (elegant serifs); Inter, Manrope, Space Grotesk, Plus Jakarta Sans, Outfit (modern sans-serifs).
• Body font — used for paragraphs and content. By default: Inter. Alternatives: Manrope, Nunito Sans, Work Sans, DM Sans, Lora, Georgia.

All fonts are loaded dynamically from Google Fonts; no installation is necessary.

Click Validate at the bottom of the form to save.

Tab 2 — Menu

Configures the action buttons displayed to the right of the site navigation bar (header). Maximum 2 buttons.

Each button includes:

• Text — visible label (multilingual). E.g.: Donate, Shabbat, Sign up.
• Link — internal URL (e.g.: /don, /horaires) or external (e.g.: https://…).
• Icon — visual icon selector (heart, calendar, star, etc.).

If no button is configured, a "Donate" button pointing to /don is displayed by default — you therefore never have an empty header.

★

Choose buttons wisely

These two slots are precious: they are visible permanently on all pages of the site. Put the most-used actions by your visitors there — typically: a "Donate" button (main, in primary color) and a "Schedules" or "Events" button (secondary).

⚠

This page does not configure the navigation menu links

To manage the main menu links (Home, Schedules, Events, Custom pages, etc.), see the separate Site menu page (/app/web/menu). The "Menu" tab here only concerns the 2 header action buttons.

Tab 3 — Hero

The Hero is the large image and text block displayed at the top of the home page. It's what your visitors see first — the first impression.

Carousel slides

You can create several slides that will scroll in an automatic carousel. Click Add a slide to open the editor.

Each slide includes:

• Image — background visual (landscape preferably, wide format).
• Eyebrow — short text above the title (e.g.: Welcome).
• Title — the big main title (e.g.: Beth David, your community).
• Subtitle — secondary tagline.
• Description — descriptive paragraph.
• Button 1 and Button 2 — optional actions, with text, link, and icon.

All texts are multilingual (FR / EN / HE depending on what is enabled).

Reorder the slides

The slides list supports drag-and-drop: grab a row and drag it up or down to change the order of appearance.

If no slide is defined

Don't worry: if you haven't created a slide, the 2026 theme automatically displays a compact hero with the name and description of your organization (entered in My account → Info). You therefore never have an empty home page.

★

An image that pops

Choose a large format photo (at least 1920×800 px), well lit, evoking your community's atmosphere (building facade, interior, prayer moment, community meal, etc.). Avoid images that are too cluttered with text: the slide title is overlaid on top.

Tab 4 — Banners

Banners are visual cards (image + text + buttons) stacked horizontally — useful for occasional calls to action: "Special donation for Passover", "Summer camp registration", "Join the Thursday evening class", etc.

Structure identical to Hero

A banner has exactly the same structure as a hero slide (image, eyebrow, title, subtitle, description, two action buttons). Only their display differs:

• A hero slide takes up the full width of the screen, in a large format.
• A banner is more compact, presented in a card about 260 px high.

Activate a banner on a page

Creating a banner here is not enough to make it appear. You then need to insert a "Banners" type section in the Home sections or Global sections (pre-footer) tab, which will be responsible for displaying them.

This is the mechanism that allows you to create several banners and choose where they are displayed.

Tab 5 — Home sections

This is the tab that defines the order and composition of your home page. A modern home page is a succession of vertical sections (blocks) — each section displays a different type of content.

Sections proposed by default

When opened, the home page contains seven universal sections, ready to use:

Type	Displays…
Events preview (EVENTS_PREVIEW)	The next upcoming events
Funds preview (CAISSES_PREVIEW)	The active funds to support
Schedules preview (HORAIRES_PREVIEW)	The week's liturgical schedules
Articles preview (ARTICLES_PREVIEW)	The latest articles or news
Gallery preview (GALLERY_PREVIEW)	A sample from the photo gallery
Banners (BANNERS)	The banners created in the Banners tab
Main page (MAIN_CONTENT)	The content of the system home page (if you have one)

Actions available on each section

Each table row offers:

• Displayed switch — toggles visible/hidden. A hidden section remains saved but no longer appears on the site.
• Customize button (settings icon) — opens a modal to adjust the section's header texts (eyebrow, title, subtitle) and certain settings (number of items to display, etc.) depending on the type.
• Edit button (pencil icon) — changes the type or internal label.
• Delete button (trash icon) — permanently removes the section from the list.

Drag-and-drop to reorder

Grab a row and drag it up or down to change the order of sections on the home page. The change is saved automatically.

Add a new section

Click Add a section at the top right to open a modal. Choose from these additional types:

Type	Purpose
Donation strip (DONATION_STRIP)	Colored horizontal banner with a title, a tagline, and a "Donate" button
Contact block (CONTACT_BLOCK)	Block with contact details + call to contact
Newsletter (NEWSLETTER)	Newsletter subscription form
Custom content (CUSTOM_CONTENT)	Free block, with editable content of choice: Classic editor (WYSIWYG) or AI Block (generated by artificial intelligence)
Main page (MAIN_CONTENT)	Makes the system home page editable like a CMS page

For Custom content, after creation, an Edit content button appears on the row and opens the corresponding editor.

Customize the header texts of a "Preview" section

"Preview" type sections (Events, Funds, Schedules, Articles, Gallery) accept custom header texts via the Customize button:

• Eyebrow — small text above the title (e.g.: Upcoming).
• Title — large title of the section (e.g.: Our upcoming events).
• Subtitle — tagline.
• Number to display — for Previews with list, number of items to show (1 to 12, typical value 3 to 4).

★

Hidden vs deleted sections

If you hesitate to remove a section, hide it first (Displayed toggle). If you change your mind later, just reactivate the toggle — whereas deleting a section permanently loses its configuration (custom texts, options, etc.).

Tab 6 — Global sections (pre-footer)

These sections are displayed on all site pages, not just the home — just before the footer.

Why a separate tab?

To be able to highlight an important call to action everywhere — the newsletter, for example, should be visible whether the visitor is on the home page, on an event sheet, or on the legal notices.

Sections proposed by default

When opened, only one section is present by default:

• Newsletter — newsletter subscription form, visible on all pages.

Add other global sections

All the types proposed in the Home sections tab are also available here. In practice, the following are often included:

• A Donation strip (DONATION_STRIP) — to remind of the possibility to support, at the end of each page.
• A Contact block (CONTACT_BLOCK) — to never lose a visitor who would like to ask a question.

⚠

Beware of overload

These sections being visible everywhere, the more there are, the longer each page becomes. Limit yourself to 1 or 2 well-chosen global sections — the newsletter, possibly a donation strip.

See and test your site

At any time, you can open your public site in a new tab to see the effect of your changes. The URL is https://[your-organization].unisoft.world. Remember to refresh the page (Ctrl+F5 or Cmd+Shift+R) to force the loading of the latest version.

Special case — Virtual sites

If your organization manages several virtual sites, each site has its own theme. To configure a virtual site, the URL becomes /app/web/theme?virtualId=… — the Unisoft team provides the virtualId value to use.

Pitfalls

⚠

Don't modify the old theme

If your site is still on Old theme and you experiment with the Hero, Banners, Home sections tabs, the changes will not be displayed on the public site — these blocks are only rendered by the 2026 theme. Migrate to 2026 first in the Appearance tab.

⚠

A created banner does not appear automatically

Creating a banner in the Banners tab is not enough. To make it visible, you must add a "Banners" type section in the Home sections or Global sections tab. Otherwise, it remains in the list but doesn't display anywhere.

⚠

MAIN_CONTENT section and system home page

The Main page section makes the "system home page" editable via the page editor. If your organization has not configured a system home page, this section automatically hides itself on the public site side — you will therefore not see anything strange online, but don't be surprised if it doesn't appear.

See also

• Site configuration — social networks and bank fees threshold.
• My pages — custom CMS pages to link in the menu or via a "Custom content" section.
• Site menu — main navigation menu links.