Building your website

Brand your mosque's website, build its pages from ready-made blocks, set up the menu, then preview and publish — all from your workspace, with nothing to install and no second account.

What It Does

The website builder lets your team build and look after your mosque's website from the Website section of your workspace. Pages are made of blocks — a welcome banner, your services, prayer times, events, a donation form and so on — that you fill in with your own words. Changes are saved as you go and stay private until you publish them and take your website live.

Where to Find It

Open your workspace from the dashboard, then choose Website.
Each page opens in its own editor: choose Edit beside it, or select its title.
Help is on every screen: the Guide button beside each page title, the ⓘ icons beside settings, and Guides in the header. Guides open in a panel beside your work.

Who can use it: workspace owners, admins and editors. Finance, bookings and viewer roles do not see the website builder. Taking the website live or pausing it is for owners and admins.

Step by Step

Brand your site — choose Edit branding; check your website's name, colours and contact details, and add your logo if you have one.
Create your Home page — choose New page, keep Home page selected, and create it.
Make it your own — open each block marked Still has the template's example wording and change the words; type in your prayer times.
Add more pages — About, Services, Donations, Events, Bookings or Contact, from templates.
Set up your menu — choose Edit menu, then Add my pages, and put them in order.
Preview each page, then Publish it.
Take your website live from the Take your website live card at the foot of the Website section.

The setup guide at the top of the Website section (and on your workspace Overview) tracks each of these and shows what is still missing. Its count is the same everywhere — the header's Get started pill, the Overview and the Website section all show one number.

Branding

Choose Edit branding in the Website section. A panel opens beside the page with a live preview that changes as you type.

Logo (optional) — a PNG, JPEG, WebP or GIF up to 4 MB. A PNG with a transparent background, at least 300 pixels wide, looks best. Describe the logo first (for people using screen readers), then upload. Without a logo your website shows its name at the top — that is fine to launch with.
Website name — usually your mosque's name. It appears in the header and browser tab.
Main colour — headers and banners. Accent colour — buttons and highlights.
Contact email and phone — shown in your contact section. The first time you open Branding, the contact email you gave when creating the workspace is already filled in — check it and save.

Choose Save branding. Branding applies to every page straight away, including published ones. Until you save it once, the Branding card says Not saved yet.

Pages

The Pages list shows every page, its web address, how many blocks it has and its state:

Draft — only your team can see it.
Published — it is on your website as shown (once your website is live).
Unpublished changes — it is on your website, and you have saved changes since; visitors see the older version until you publish again.
Needs details — a block is missing something required. Open the page to see which.
Still to finish — a block still has a template's example wording, or your prayer times are not typed in yet. You can publish, but finish it before you go live.

To create a page, choose New page. A short guided form walks you through three steps:

Start from — a starter template, or a blank page.
Name it — the page title and its web address. MAS suggests an address from the title; use lower-case letters, numbers and hyphens (for example about-us). The address is shown in full, for example al-noor.masjidappsuite.com/about-us. Your Home page is your website's front page, so its address is your website's own.
Check — review the page, its address and the blocks the template adds, then Create page. The page opens in the editor as a draft.

To rename a page, change its address or schedule it, open it and choose ⋮ → Page settings & schedule. Change an address before a page is published if you can — links people have saved to the old address stop working.

Starter Templates

A template fills a new page with a sensible layout for its purpose, which you then edit:

Home page — welcome banner, prayer times, services, events, donations and contact. It greets visitors with your website's name.
About the mosque — your story, what you offer and how to reach you.
Services and classes, Donations, Events and programmes, Bookings, Contact.

Templates only fill an empty page, so they never overwrite your work. Some sentences in a template are example wording — they say what to write rather than saying it ("Introduce your mosque, its history…"). The editor marks every block that still has one, the setup guide counts them, and the publish check lists them, so none reaches your visitors by accident. Buttons in a template point at sections of the same page (#contact, #events), so a new page never links to a page you have not made yet.

Editing a Page

The page editor lists the page's blocks from top to bottom. The address at the top is the page's real address on your website.

Choose Edit (or the block itself) to open it in a panel beside the list. Fill it in and choose Save block. Fields marked with an asterisk are required; anything that needs fixing is explained beside the field.
Use the arrows to move a block up or down, and the bin to remove it (you are asked first).
Choose Add a block to add a new one at the end of the page.
Every change is saved straight away as a draft — watch for All changes saved at the top.

Under each block, the editor tells you what is worth knowing:

Needs details — a required field is empty. The page cannot be published until it is filled in.
Shows nothing yet — the block shows donation campaigns, published events or rooms, and you have none yet. A link takes you to Fundraising, Events or Bookings to add one.
Links to /about, which is not a page on your website yet (or not published yet) — a button points at a page visitors would not find. Make the page, publish it, or change the link.
Still has the template's example wording — change it to say something about your mosque.
No prayer times yet — type them in; until you do, the section is hidden on your website.

What Each Block Does

Hero banner — the big banner at the top of a page: a headline, a sentence of welcome and an optional button.
Text — paragraphs of text. Leave a blank line between paragraphs.
Prayer times — your jama'ah times, which you type in: Fajr, Dhuhr, Asr, Maghrib, Isha and Jumu'ah, each as you would write it (6:15am, Sunset), and an optional note such as "Updated every Friday". Update them when they change. A Prayer times section with no times is not shown to visitors at all.
Upcoming events — your published events, with a way to register. Add an event in Events first.
Donations — a donation form, with Gift Aid, for one campaign or all of your active ones. Create a campaign in Fundraising first.
Services — a grid of what your mosque offers: classes, services and facilities.
Call to action — a short message with one or two buttons.
Booking requests — a form visitors use to request one of your rooms or halls. Add a room in Bookings first.
Contact — your contact details and a contact form, with an optional map.

When you add a block that needs something set up elsewhere, the builder says so and links you to it. You can add the block anyway; it fills in once the thing exists.

Button links can go to another page (/contact), a section on the same page (#contact), an email (mailto:), a phone number (tel:) or a web address (https://…). Anything else is refused when you save, so a link can never lead somewhere unsafe.

Choose Edit menu in the Website section. The menu is the row of links along the top of every page.

Add my pages adds every page not already in the menu; Add a link adds one.
For each link, set the text people see and choose where it Goes to — one of your pages, or Another address….
Use the arrows to reorder and the bin to remove. Keep it to five to seven links so it reads well on a phone (up to twelve are allowed).

Choose Save menu. Links to draft pages only work once those pages are published.

Images

Images are uploaded to your workspace and shown on your public website, so anyone who can see your website can see them. Upload a logo from Branding. Only PNG, JPEG, WebP and GIF files up to 4 MB are accepted, and each needs a short description for people who cannot see it.

Preview and Publish

Preview opens the page exactly as visitors will see it, in a new tab, with a Private preview strip across the top so you know it is not the public page. Preview links are private and stop working after 15 minutes, so choose Preview again for a fresh one. They work before your website is live.
Publish (or Publish changes) opens a short check. Worth a look on this page lists anything the editor has marked on this page — example wording, links to missing pages, sections with nothing to show — with links to fix them. You can still publish. Then tick I have previewed and checked this page — your name is recorded against the publish — add an optional note for your team, and publish. A page with no blocks, or with blocks that need details, cannot be published until it is fixed.
Once a page is published and your website is not live yet, the editor offers Take your website live as the next step.
⋮ → Take page down removes a published page from your website; its content is kept as a draft.
⋮ → Delete page deletes it and its history, after you confirm.

To publish or take a page down later, open ⋮ → Page settings & schedule and set Publish on or Take down on. MAS checks every hour and makes the change when its time comes.

Taking Your Website Live

Publishing a page is not the same as making your website public. Your website stays private until an owner or admin takes it live, so you can build and publish pages in peace and only launch when you are ready.

The Take your website live card is at the foot of the Website section:

It shows your website's address — your free MAS address (for example al-noor.masjidappsuite.com), or your own domain once it is connected in Domains & email.
Before you go live lists three things: your Home page is published (needed — Take site live stays switched off until it is, because visitors would otherwise find nothing), every page is in your own words, and your menu is set up (both recommended). Each has a link to fix it.
Take site live asks you to confirm, naming the address that goes live. Donations, event registrations and booking requests open at the same time.
Once live, the card says Your website is live, links to it, and offers Pause site, which takes the website offline again without deleting anything. While you are on the free address it also links to Use your own domain.

Until it is live, visitors see "not found" — this is expected.

Publishing and Audit History

MAS records every page create, update, publish, unpublish, restore and delete, with who did it and when. In the Website section, More options holds:

Recent CMS page changes — the content audit trail.
Recent CMS page versions — earlier saved versions of each page, compared with the page as it is now (fields, status, schedule and the order of its blocks). To restore one, type its version id to confirm and choose Restore.

Publishing records who confirmed and when, whether you publish from the builder, the advanced editor or a schedule.

The Advanced Editor

The website builder covers everything most mosques need. For rich formatting (headings, bold and lists inside text) there is also the advanced editor: choose ⋮ → Open the advanced editor in the Website section, or on a page. It signs you in with your MAS account and shows the same header, guides and way back, and it edits the same pages, so you can move between the two freely.

Its home page says what it is for, with Back to the website builder. Its sections are Images, Pages, Menu links and Branding — the same things the builder edits.
Open a page there and its Versions tab lists the page's earlier saved versions, newest first, with Current Draft marking the one you are working on. Only your workspace's versions are shown.
Text saved from the builder keeps its words but not advanced formatting; the builder warns you first. Your public website shows text as plain paragraphs either way.
Choose Back to the website builder at the top to return.

Tips

Start from templates and change the words — it is quicker than building from blank.
Keep headlines short; they are read on phones first.
Add the Contact block to your Home page so visitors can always reach you.
Use Services for things that stay the same (classes, nikah enquiries, funeral guidance) and Upcoming events for things with dates.
Keep your prayer times up to date — visitors check them more than anything else.

Troubleshooting

A block is marked Needs details. Open it — the missing field is marked and explained.
A page says Still to finish. A block has the template's example wording or no prayer times. Open the page; the block is marked.
Publish is greyed out. The page is already published with no newer changes, or it has no blocks, or a block needs details.
Take site live is greyed out. Your Home page is not published yet. Publish it first.
My change is not on my website. Check the page shows Published (not Unpublished changes) and that your website is live.
My prayer times do not show. The section is hidden until at least one time is typed in. Open the Prayer times block and fill in the times.
A menu link goes nowhere. It may point at a draft page — publish that page.
My logo will not upload. Use a PNG, JPEG, WebP or GIF under 4 MB, and describe it first.
I cannot see the Website section's editing tools. Your role needs to be owner, admin or editor; ask your workspace owner.
A scheduled publish did not happen. Check the date and time in Page settings & schedule, and that the page has no blocks needing details.