Making Your Community Page Look Professional
A complete, no-experience-needed walkthrough of every Public Page setting (logo, branding, links, contact) plus a deep dive on embedding it and what responsive design means.
Your Community Page is the public page people actually see: the page at your Vega web address where families, fans, and ticket buyers find your events, learn who you are, and check your policies before they show up. Left unconfigured, it shows placeholder text and no branding, which reads as an inactive or unfinished organization.
This guide assumes no technical background at all. Every step tells you exactly where to click and what to type, in plain English. If a term might be unfamiliar, it’s explained the first time it comes up, and again in the quick glossary below.
ℹ️ Info
What you’ll need before you start
Have these ready and this whole guide takes about 20-30 minutes:
- An Admin login for your Vega organization
- Your school or organization’s logo, saved as an image file on your computer
- Your school colors, if you have them written down anywhere (a hex code like
#1D4ED8is ideal, but “the blue and gold on our website” is enough to start) - At least 2-3 upcoming events already created in Vega (if you haven’t created any yet, do that first; an empty Community Page is one of the biggest red flags to a first-time visitor)
A few terms you’ll see in this guide
💡 Quick glossary
- Handle: the short, unique piece of text at the end of your Community Page’s web address (like
lincoln-highinhttps://webapp.vegaevents.com/c/lincoln-high). - URL: just a technical word for “web address,” the thing you type into a browser or click in a link.
- Embed: placing your live Community Page directly inside a page on your own existing website, instead of just linking to it.
- iframe: the small snippet of code that makes embedding work. You won’t need to understand it, just copy and paste it where instructed.
- Responsive: a page or widget that automatically resizes itself to fit wherever it’s placed, whether that’s a wide page or a narrow sidebar. Covered in detail in the embedding section below.
Where to find these settings
- Log in to Vega and make sure you’re in your organization’s Admin view.
- In the menu on the left side of the screen, click Settings.
- Under Organization, you’ll see two entries: General (name, logo, location) and Public Page (your event website for visitors). Click Public Page to expand it into five steps: Overview, Branding, Links, Contact & Tickets, and Share & Embed.
Each step saves on its own, shown as a green checkmark once it’s complete, so you can leave and come back without losing progress.
Screenshot: the click path from the main dashboard into Public Page settings.
Step 1: Add your name, logo, and location
Click Settings > General. This is a separate screen from Public Page, but it’s the first thing worth filling in since your logo appears everywhere your organization shows up in Vega.
- Organization Name: the name shown prominently at the top of your page. It can be different from your official legal name, use whatever name your audience actually recognizes (for example, “Lincoln High Athletics” instead of a longer formal name).
- Logo: click Change logo to upload an image file from your computer. Vega shows you the recommended image size right inside the upload box, and displays your logo as a circle everywhere it appears, so a square image (512×512 or similar) crops the cleanest. If you have a version with a see-through (transparent) background, use that one; it tends to look cleaner than a logo on a solid white square.
- Visibility: leave this set to Public so anyone can find and view your organization. If your Community Page looks like it isn’t showing up for visitors, this is the first setting to check.
- Location: your primary address. If your events happen in person, add it here so it shows up on your page; if your organization is entirely virtual, it’s fine to skip this one.
Screenshot: the General settings page with name, logo, visibility, and location filled in.
Step 2: Set your brand colors
Click Settings > Public Page, then open the Branding step. Set your Main color and Accent color using the color pickers (or type a hex code directly). These two colors control the buttons, tabs, and highlights across your page, plus the colored bar under your header. Left on the default colors, your page looks identical to every other organization that hasn’t customized theirs yet. Pick colors that match your existing logo, website, or team colors. There’s a live preview right on the same screen, so you can see how your header and buttons will look before you save.
Screenshot: the Branding step with both color pickers and the live preview.
Step 3: Write your About description
Scroll down on the same Branding step to the About text box. This is a short description of your organization, and it’s what visitors read on your page’s About tab. It’s usually the second thing someone checks after your events, and it’s what helps them decide whether this is the right school, team, or organization for them.
Two or three sentences is plenty: say who you are and what kind of events you run. For example: “We host games, concerts, and community fundraisers throughout the school year. Follow this page for schedules and tickets.” Try not to leave this blank, since an empty About tab is one of the clearest signs to a visitor that a page hasn’t been finished.
Screenshot: the About text box filled in. Note the “Save Changes” bar at the bottom, your text isn’t stored until you click it.
Step 4: Add header shortcuts and social links
Still under Public Page, open the Links step.
- Header shortcuts: extra buttons that appear in the colored bar under your logo. Add 2 or more for the things people look for most: a calendar, a staff directory, an athletics page, or anything else on your existing website. This is the fastest way to send visitors somewhere useful without making them dig through tabs to find it.
- Social media: pick a platform from the dropdown (Website, Facebook, Twitter/X, and others) and paste the link. These show up on your page’s About tab.
Screenshot: Header shortcuts and Social media, each with a couple of example entries.
Step 5: Add contact info and ticket policies
Open the Contact & Tickets step. Fill in a public email, phone number, and address under “Contact your team” (this is the email your audience uses, separate from your personal login, and separate from the location you added in Step 1). This powers your page’s Contact tab, giving visitors a way to reach you beyond the built-in contact form.
Below that, fill in your Refund Policy (and any other ticket rules shown) if you sell tickets through Vega. Buyers expect to be able to check this before they check out, and having it spelled out up front cuts down on support questions after an event.
Screenshot: Contact & Tickets step, fully filled in.
Step 6: Choose your page handle and grab your share link
Open the Share & Embed step. Vega suggests a handle (the short piece of text that becomes your page’s web address) based on your organization name, and offers a few alternate suggestions as buttons. Pick one, or type your own.
Try to get it right the first time: it can be changed later, but any links you’ve already handed out (printed flyers especially) will stop working if you change it after the fact. Once it’s set, your share link appears in a copyable field just below, ready to paste into email campaigns, social bios, and flyers.
Step 7: Publish at least one event
The Events tab is the very first thing visitors see when they land on your page, so an organization with zero published events looks inactive no matter how well everything else above is set up. Publish at least one upcoming event, ideally two or three, before you start sharing your link with anyone.
Screenshot: an empty Events tab next to a populated one, side by side.
💡 Tip
Sharing and embedding your page
The Share & Embed step you saw in Step 6 is how people actually reach your page, and there are two separate ways to do it. This section covers both, with extra detail on embedding, since it’s the option most people have questions about.
Option 1: Share the direct link
The simplest option: copy your page’s share link (from Step 6) and share it, in a social media bio, an email signature, or printed on materials. Whoever clicks it sees the full Community Page: header, all tabs, everything.
Option 2: Embed it on your existing website
If your school or organization already has its own website, you don’t have to choose between the two. Embedding means placing your live Community Page directly inside a page on that existing website, so visitors never have to leave your site to see it. Think of it like a live TV screen built into a page you already have: instead of a link that takes people away, the events feed itself appears right there, and it updates automatically whenever you add or change an event in Vega. You never have to manually copy anything over again.
To set it up, open Share & Embed and click Show options under “Embed on your site.” You’ll choose between two types:
| Embed type | What visitors see | Best used when |
|---|---|---|
| Full page | The entire Community Page: header with your logo, all tabs (Events, About, Policies, Contact), and the header shortcuts bar | You want a self-contained “Events” or “Community” page on your existing website, and that page doesn’t already have its own header or navigation menu |
| Events only | Just the list of events (with search, filters, and Buy/Tickets buttons), with no header or tabs | Your website already has its own header and navigation, and you just want to drop a live, self-updating events list into a page you already have, for example, partway down your homepage or in a sidebar |
Screenshot: the embed type toggle, the Fill the container switch, and the generated code box with its Copy code button.
Once you’ve chosen a type, Vega generates a small block of code for you. You don’t need to understand it, just click Copy code, then paste it into your website. Where you paste it depends on what platform your website is built on (WordPress, Wix, Squarespace, Finalsite, SchoolBlocks, and similar tools all work slightly differently), but the general steps are the same everywhere:
- Log in to your website’s editor or content management system.
- Go to the page where you want the events to appear.
- Add a block or element usually named something like Embed, HTML, Custom Code, or Widget. (If you can’t find one, search your website platform’s help site for “embed HTML” or ask whoever manages your website.)
- Paste the code Vega gave you into that block, then save and publish the page.
Screenshot: a Full page embed used as a standalone page on a sample website.
Understanding responsive design (what it means, and why it matters)
This is the part that trips people up most, so it’s worth slowing down on.
Responsive means a webpage or widget automatically resizes itself to fit whatever space it’s placed in, like water taking the shape of whatever container you pour it into. A responsive embed looks correct whether it’s placed in a wide main content area, a medium column, or a narrow sidebar, and it also adjusts automatically when someone views your site on a phone instead of a computer.
The opposite is a fixed width: a size that’s locked in place no matter where you put it, like a picture frame that’s always the same size. If you try to fit a large fixed-size frame into a small space, one of two things happens: either it gets cut off at the edge, or it forces the whole page to grow a horizontal scrollbar so people have to scroll sideways to see the rest of it. Both look broken to a visitor, and neither is obvious from just glancing at your website editor, so it’s worth checking after you set it up.
When you expand the embed options, you’ll see a switch labeled Fill the container (100% width and height).
- Turn it on for almost every situation. This tells the embed to always match the size of wherever you’ve placed it, automatically, whether that’s a wide page or a narrow sidebar.
- Turn it off only if you’re certain the embed will always live in a space that’s exactly one fixed size and will never move, which is rare. Your website’s own page editor will then control the exact dimensions of the embedded block.
Specifically for sidebars: sidebars are typically narrow, often somewhere between 250 and 400 pixels wide. Use the Events only embed type here rather than Full page, since a full header and set of tabs won’t fit well in that narrow a space. Keep Fill the container turned on so it automatically shrinks to match your sidebar’s actual width instead of overflowing past it.
The two images below show the same events widget placed in the same sidebar, first set up correctly and responsively, then set up with a fixed width that’s too wide for the space:
Screenshot: a responsive (Fill the container on) embed fitting cleanly inside a sidebar.
Screenshot: the same embed with Fill the container turned off and a fixed width, overflowing past the edge of the sidebar.
How to check whether yours is working correctly:
- Open your website on a computer and look at the embedded events list. Is there a scrollbar running along the bottom, or does any content look cut off at the edge? Either one is a sign Fill the container isn’t turned on.
- Open the same page on a phone (or narrow your browser window on your computer to test). The events should stack neatly and stay readable; if they look squeezed, overlapping, or require sideways scrolling, revisit the embed options.
- When in doubt, go back to Share & Embed, confirm Fill the container is switched on, copy the code again, and replace the old snippet on your website.
Cheat sheet: what’s required
| Setting | Where to find it | Status |
|---|---|---|
| Organization name | Settings > General | Required |
| Logo | Settings > General | Required to look finished |
| Visibility set to Public | Settings > General | Required, or your page won’t show up for visitors |
| Page handle / share link | Public Page > Share & Embed | Required, no page exists without it |
| At least 1 published event | Events | Required to look active |
| Main + accent colors | Public Page > Branding | Required to look finished |
| About text | Public Page > Branding | Required to look finished |
| Location | Settings > General | Recommended for in-person organizations |
| Header shortcuts (2+) | Public Page > Links | Recommended |
| Social links (2+) | Public Page > Links | Recommended |
| Public email + phone | Public Page > Contact & Tickets | Recommended |
| Ticket policies | Public Page > Contact & Tickets | Required if you sell tickets |
| Fill the container (embed) | Public Page > Share & Embed | Required if embedding in a sidebar or narrow column |