Built to help your team get comfortable quickly — keep it handy while you work.
What’s inside
What’s new & how it works
Getting around the CMS
Editing a page
Common tasks, step by step
Component reference
Blogs
News
Site banner
Page permissions (optional)
Images & files
Glossary
01 · What’s new & how it works
Your CMS now includes a drag-and-drop page builder. Instead of a fixed layout, you can arrange, add, and rearrange content blocks — called components — to design pages the way that best fits your community.
The building experience is new, but the components are the same ones your site already uses — image blocks, text sections, headers, carousels, and more. That means you keep the same look and feel while gaining far more flexibility.
Design freely: Rearrange and swap components with drag and drop — no need to start from scratch or wait on support.
Same look: Components are drawn from your existing site, so pages stay on-brand and consistent.
More control: Create new pages, manage documents, set permissions, and publish on your own schedule.
Nothing changes for your residents. The front-end site and app look exactly the same. This is a behind-the-scenes upgrade to how you build and manage pages — your existing pages transfer over unchanged.
02 · Getting around the CMS
Opening the CMS
You access it the same way as before: log into the Hub and go to CMS.
The page sidebar (your sitemap)
The left panel lists your CMS pages — the pages you build and manage — and mirrors how your site is structured. Blogs always appear at the top of the list. At the very bottom, News and Banner are where you manage news items and the site banner.
Pages all the way left: Your navigation bar sections. Each one is a top-level menu item residents see on your site.
Indented pages: Nested pages. Residents find them under the navigation section they’re indented beneath.
Near the bottom: Pages that live in your footer (FAQ, Privacy Policy, and so on), or pages that don’t have a home in the navigation yet.
What you won’t see in the sitemap
Built-in pages: Pages like News, the Event Calendar, Venues, and Amenities fill themselves in from what you do elsewhere in the Hub — post an event and it’s on the calendar. Since there’s nothing to build, they don’t appear in the sitemap.
Links to other websites: Want a link to another website in one of your navigation dropdowns? Your Cecilian team can add it for you. It will show on your site, but not in the CMS sitemap.
Each page appears once. If a page is linked from several places on your site, you’ll still see it in just one spot in the sitemap — it’s one page, so you only ever update it in one place. Link to it from as many pages as you like.
Preview pane
When you open a page you get a live preview of how it looks on the real site. Use the device toggle at the top of the preview to switch between mobile, iPad, and website views to check how content stacks on each.
Pages, blogs & news
Pages: Your standard site content. Regular pages offer the full set of components.
Blogs: Ongoing news & lifestyle articles that build into an archive. Fewer components than a regular page. See section 06.
News: Short community updates — meetings, openings, notices. A simple form, not the page builder. See section 07.
03 · Editing a page
Open any page or blog and click Edit. You’ll see the preview in the center and all available components along the side.
Drag and drop
Add a component by dragging it from the side panel onto the page — drop it exactly where you want it (top, bottom, or between others).
Reorder components by dragging them into a new position.
Remove a component with its trash-can icon.
Changing content
Click into a component and its editable fields appear on the right. Edit text, add or delete content, and swap images — the preview updates live as you type so you always see what it will look like.
Save Draft vs. Publish
Save Draft: Saves your work privately. Residents keep seeing the last published version until you publish.
Publish: Pushes your changes live. Updates become visible to residents on the site and app.
Start a change, and if you run out of time just click Save Draft and pick it back up later.
Need to take a live page down for a while? See “Take a page offline” in section 04 to keep its content ready for later.
⚠ Two things to watch
The trash can sits right next to Edit — click carefully. Deleting a page cannot be undone.
Anyone who opens a page with an unfinished draft will see that draft-in-progress and could publish it. Finish or discard drafts promptly.
04 · Common tasks, step by step
Each task starts from the Hub. The green box shows the click path.
Create a new page or blog post
CMS → + next to “Pages” (top left) → Create New Page / Create New Blog Post → adjust URL if needed → Create
Tip: to nest a page under a parent (so the URL and sitemap stay accurate), use the small + beside that parent in the sidebar instead — it builds the nested route for you automatically. The top-left + creates pages at the root level.
Edit an existing page
CMS → select a page in the sidebar → Edit → make changes → Save Draft or Publish
Duplicate a page (use one as a template)
CMS → hover a page in the sidebar → click the two-square icon → name the new page → Save → adjust content → Publish or Save Draft
The copy starts as an exact match of the original — then update its links, titles, and content. It stays a draft until you publish.
Take a page offline (without deleting it) — NEW
Taking a page down for a season, or until it’s ready again? Keep a draft copy of it, then remove the original — your content stays safe in the CMS, ready to go back up whenever you are.
CMS → hover the page in the sidebar → click the two-square icon → name the copy & change its URL slightly → Save → delete the original page
The URL has to change — even by a single letter — since the original is still using it when you make the copy. The copy stays a draft, so residents won’t see it.
Ready to bring it back?
Publish the page first, before adding it back anywhere on your site.
Decide how residents will reach it. If it should be in your navigation bar, reach out to your Cecilian team and we’ll add it. If you’re just linking to it from another page in the CMS, add the link yourself — no need to contact us.
Add a link
Edit a page → any component with text → highlight the text → click the link button → (optional) Open in New Tab → Add → Publish
Internal (within your site): Use a relative link — only the part of the URL from the / onward.
External (another website): Use the full URL, including
https://.
Upload images & files
Two ways — both open the file manager:
Folder button: Edit a page → folder button (top right) → Drop or Select files → choose from your device → Upload
From a component: add / select an Image or Content component → folder button in its side panel → Drop or Select files → Upload → check the box next to the file to place it
You’ll be asked to mark each new upload as Public or Private. See section 10.
Assign a blog category
CMS → select a blog → Edit → Blog Categories (right side) → + button → click the item → choose the category → Save Draft or Publish
Post a news update — NEW
CMS → News (bottom of the sidebar) → + Add News → fill in Title, Summary & Content → (optional) toggle Featured → Create
It’s added to your News page automatically — newest at the top. See section 07.
Turn the site banner on or off — NEW
CMS → Banner (bottom of the sidebar, below News) → Edit → toggle Enabled → set the text & bar color → Save
To take the banner down, follow the same path and toggle Enabled off. See section 08.
Set page permissions
Edit a page → gear button (top right) → View Requirements → Enable Access Control → set requirements & rules → Confirm Changes → Publish
See section 09 for details. This is optional — leave it off to keep a page public.
05 · Component reference
Every component below already exists on your site. Availability differs slightly between regular pages and blogs.
Structure & text
Header: Choose left & right headers, or use just one for a centered page title. You control the title text.
Content: A simple text box for when you don’t need anything fancy. It has no white background — it keeps the site’s background color.
Spacer: Adds vertical space between other components wherever you need it.
Cards
Card: Use on its own, or pair it with an image side by side. To pair: add an Image component above the Card, then toggle “Allow text alongside image” to Yes in the Image component — the two align automatically.
Card Split: Best when you want separate text on both sides. Title and main text are each optional on either side, so you can use just a title or just body text.
Card Double Text: Similar to Card Split with a slightly different layout — pick whichever looks better on your page.
Card Image: A title plus an image. Once the image is added, the component expands to accommodate it.
Card Link List: Add as many hyperlinks as you want. Each opens in a new tab.
Card Accordion: Collapsible content. Add as many sections as you like, each with its own title and body text.
Media & interactive
Tip: the component you choose sets how big an image appears. For a larger or smaller image, try a different image component — see “Choosing the right size” in section 10.
Image: Displays at full width or half width, and you can position it. Unlike Card Image, it has no title. It sits as wide as the page text with padding around the edges.
If you allow text alongside the image: edit it from the Outline view (left side) → click Image. To place text above the image, use Outline view and drag the Content component above the Image component.
Feature Image: A full image with no title and no half/full option — it spans the full width of the page.
Carousel: A photo carousel. Add as many photos as you like and set the title shown on each.
Actions: Labeled icons that link to a URL, chosen from the icon library. Up to 5 icons fit in one component — add a second Actions component for more.
External Embedding: Displays content from a URL you embed; the embed size is adjustable. Note: YouTube doesn’t allow embedding — link out to those videos instead.
06 · Blogs
Blogs are ongoing news and lifestyle articles — event recaps, partnership highlights, or the kind of pieces that run in a community magazine. They’re not just temporary notices; they build into a lasting archive. For quick announcements, use News instead (section 07).
Where blogs live
Every blog post appears on a dedicated blog listing page on your site, which includes search and category filters. You can also link an individual post from any page (for example, from an Actions icon).
Categories
You choose your own categories — by district, by area, or by theme (such as “Community Stories”). Selecting a category narrows the listing to just those posts.
07 · News
News is for short community updates — an upcoming board meeting, a new amenity opening, a quick notice residents should see. Where a blog is a full article, a news item is a brief update that gets the word out and moves on.
Blogs: Longer articles built with components. Organized by category, with search on the listing page.
News: Short updates written in a simple three-field form. One running list, newest first — no categories.
Where news lives
Every news item appears on your site’s News page (/news) on both the website and app. This page is built in for you — you don’t design it with components. Post an item and it shows up there automatically.
In the CMS, open News at the bottom of the page sidebar to see and add items.
What goes in a news item
Title: The headline. Keep it specific — e.g. “Quarterly Board Meeting — Tuesday, July 21.”
Summary: One or two sentences shown under the title on the News page. Residents should get the gist without clicking.
Content: The full update. Residents see it when they click Read More.
How the list is ordered
The News page is a running list of everything you’ve posted, with the most recent at the top. To keep something important in view, turn on the Featured toggle on the news creation page — featured items move to the top of the list.
Who can see it
Like the other built-in pages on your site — Blogs, the Event Calendar, Amenities, Groups & Clubs, and more — your News page is public, so anyone visiting your site can stay up to date. Page permissions (section 09) apply to the pages you build in the CMS.
Want News to feel resident-first? Talk to your Cecilian team about showing the News link in your navigation bar only to verified residents.
⚠ Make sure residents can find it
Your News page fills itself in, which makes posting easy — but residents still need a way to get to it. Pick one:
Add it to the navigation bar or a dropdown. Let your Cecilian team know and we’ll add it for you.
Link to it from a page. Use a text link or an Actions icon pointing to the relative link
/news.
08 · Site banner
The banner is a bar across the top of your website that calls out whatever your community wants residents to notice — a pool closure, a weather alert, an event this weekend.
Website only: The banner shows on the website. It doesn’t appear in the app.
A setting, not a component: Turn it on or off in one place — you don’t drag it onto pages.
Always visible: Visitors can’t close or dismiss it. It stays up until you turn it off.
What you control
Enabled: Toggle on to show the banner, off to hide it.
Text: The message in the bar. Keep it short — one line reads best.
Bar color: The background color of the bar. Pick a color that stands out from your site but still reads clearly with the text.
In the CMS, open Banner at the bottom of the page sidebar, right below News.
Your community icon is added to the banner automatically — there’s no image to upload.
Remember to take it down. Banners don’t expire or schedule on their own, so when your announcement is over, go back to CMS → Banner → Edit, toggle Enabled off, and Save. An old alert left up is easy for residents to tune out.
09 · Page permissions — optional
By default, pages are public. If you want to restrict a page — say, to residents only — open the settings gear (top right) while editing.
Breadcrumbs. The gear panel also lets you turn page breadcrumbs on or off.
Enable Access Control. Require users to log in, then add rules — for example, the user must be a resident, or a resident of a specific sub-community.
Confirm & publish. Restrictions take effect once you publish. Users without access see a message explaining the page is restricted and how to get access.
Spotting a restricted page: it shows a lock icon in the sidebar, so you can tell at a glance that not everyone can view it.
10 · Images & files
No spaces in file names. Rename image and file names to remove spaces before uploading.
Size for consistency. For sets of photos that should look uniform, resize them to the same dimensions before uploading.
Add PDFs inline. In a text/Content component, open the file option, then check the box next to a PDF to drop it directly into your text.
Public vs. private files — NEW
Whenever you upload a new image or file, you’ll be asked to mark it as Public or Private.
Public: Anyone on the internet can view the file, including logged-out visitors. Best for things you’re happy to share widely — amenity photos, event flyers, community maps.
Private: Only residents who are logged in can view the file. Anyone who isn’t logged in is prompted to log in first. Best for resident-only documents — meeting minutes, forms, internal notices.
⚠ Linking to a private file from outside your site
Private files only work inside your site and app — the file’s own link won’t open anywhere else. If you need to share a private document somewhere outside your site (an email, a newsletter, another website), link to the page the file sits on, not the file itself. Residents land on that page, log in, and open the document from there.
Recommended dimensions
Your site is responsive — images stretch and shrink to fill whatever space they’re given, and that space changes with the visitor’s screen size. So there’s no single “correct” size. Treat these as strong starting points, and your photos will look sharp nearly everywhere.
Choosing the right size. Each image component has its own built-in size, so the way to make an image bigger or smaller is to pick the component that fits:
Edge to edge: Feature Image spans the full width of the page.
As wide as your text: Image, set to full width.
Smaller, or beside text: Image at half width, Card Image, or a Card paired with an Image.
Several photos in one spot: Carousel.
Swap components in the editor and check the preview until it looks right — see section 05 for the full list.
Content page — side-by-side cards (photo next to text): Square — 1600 × 1600
Content page — full-width images: Any shape you like — at least 2560 wide
Board & team headshots: Portrait, slightly taller than wide — 700 × 880
⚠ The one that surprises people
Photos in side-by-side content cards display in a square frame — not a landscape one. Supply a widescreen photo there and the left and right sides get trimmed off. This is the most common cause of “why is my photo cropped weirdly?”
The good news: full-width images keep their original shape, always, on every screen. Tall, wide, or square — whatever you upload is what everyone sees. For those, only the width matters.
Two rules that matter more than any number
Bigger is safer than smaller: Nothing is shrunk or compressed — whatever you upload is exactly what visitors see. A photo that’s too small looks blurry and can’t be fixed after the fact.
Keep the important part centered: The visible area shifts with screen size, so edges may get trimmed. Faces, logos, and signs should sit comfortably inside the middle of the frame.
Framing tips
Leave breathing room on all four edges. Don’t crop tightly to your subject before uploading — give it margin so there’s something to trim.
Headshots: head-and-shoulders framing, eyes in the upper third, with clearance above the head. These crop from the bottom, so headroom is protected but chins and shoulders may not be.
Save as JPG at high quality (around 80%) to stay sharp without an oversized file. Use PNG only for logos or graphics with transparency.
Why does my photo look blurry? It was uploaded smaller than the space it needs to fill, so it’s being enlarged to fit. Modern phone and laptop screens pack roughly twice as many dots into the same space as older displays — which is why the recommended sizes look large. A photo needs about double its on-screen dimensions to look crisp. Re-uploading at the recommended size fixes it.
11 · Glossary
FE User: “Front-End User” — the residents and public who use your website and app.
Component: A pre-built content block (image block, text section, header, carousel, and so on) that forms the structure of a page. You fill it with your own content.
Relative link: The part of a URL from the / onward. Use it to link to pages within your own site (external sites need the full URL).
Public vs. Private file: Public files can be viewed by anyone, including logged-out visitors; Private files require a resident login and only work within your site and app.
Draft vs. Published: Draft is saved privately and not visible to residents; Published is live on the site and app.
News: Short community updates listed on your built-in News page (
/news), newest first, on the website and app.Featured: A news item marked to sit at the top of the News page.
Banner: An optional bar across the top of the website with a short message, your chosen color, and your community icon.
Hub: The Cecilian Partners admin platform where you manage your CMS content.
Need a hand? You don’t have to memorize any of this. Reach out to your Cecilian team anytime for a refresher or a walkthrough — and ask us when you need a new page (including your News page) added to the navigation bar.