Skip to main content
All CollectionsAppearance editor
About the Appearance Editor
About the Appearance Editor

How to use the Appearance Editor to design your homepage

Gayathri Rajendiran avatar
Written by Gayathri Rajendiran
Updated over 2 weeks ago

The Appearance Editor allows you to design your homepage and control your styling, header, and footer. Your homepage is essential because you can use it to:

  • Showcase projects in various sections, including promoting key published projects, updates to in-progress projects, and closed project outcomes.

  • Link directly to and highlight important tools and hubs, such as a key survey for a long-term plan project.

  • Provide informational widgets such as FAQs, Key Dates, or Videos.

  • Control how your participants are welcomed to your site and how they can engage.

There are a few sections and key functions of the Appearance Editor for you to configure, and this article will go through how to:

  • Edit your homepage template and sections and your header and footer

  • Select global and project styles and upload key images

  • Preview, share, and publish your homepage

Select Appearance in the main menu to go to the Appearance Editor and start working on your homepage. You’ll see the current layout of your homepage on the right of your screen, the four components on the left, and your control buttons along the top.

The Appearance Editor screen

Edit Your Homepage, Header, and Footer

You can edit the layout of your homepage, header, and footer in the Home Page Editor section:

  1. Go to Appearance > Home Page Editor. There are two components within the Home Page Editor, Templates and Sections, and you’ll see the preview of your homepage layout.

  2. If you’re new to EngagementHQ, go to Templates first and select Change template to choose your starting point. There are six templates to choose from and each is customizable; you can add or remove sections as necessary. Please note that changing your template at any point will remove any content you have already added; if you have launched your site and already have a set homepage, it’s generally best to edit your sections instead of changing your template.

    The change template button in the homepage editor
  3. Open the Sections menu to see the list of current sections. Select any section to edit it, including your Header and Footer. You can also select Edit section in the preview to expand that section directly.

  4. Select Add a section in the preview to choose from the list of sections. You can select specific layouts and settings for each section.

    Section options in the homepage editor
  5. With the section expanded, you can also select the three dots menu to select Hide this section, Move section up, Move section down, or Delete section. You do not have these options for your Header or Footer.

    The menu options for individual sections are hide, move, and delete

Styles and Images

There are three sections to help you select your styles, branding, and images:

  • Global Styles: Set your Brand Color, Font, and Shadows & Corner Styles for content containers such as project cards.

    Global styles in the Appearance Editor
  • Project Styles: Set the Color for project and tool pages, including Advanced Color Overrides for granular control, and choose your Project Page Theme.

    Project styles menu in the appearance editor
  • Logo, Icons & Images: Upload images for the Logo, Favicon, Background Image, and Project Banner Override. You can also choose the global settings for your project banners.

Preview, Share, and Publish

When you’re happy with your homepage, select Save as draft to save your edits and select Preview to see how it will look on the live site. If you want to discard your edits, select Restore to go to your last published version of the homepage.

The restore, save, preview and publish buttons in Appearance Editor

In the Preview screen, you can use the device controls to see how it will look on different screen sizes. This is essential, as you want your community to be able to access your site via any device.

Select Preview draft to see a preview with clickable links, so you can ensure all the links go to the correct destination.

You should also share your draft homepage with any internal stakeholders or colleagues. To do this, select Share a draft and Copy the private link. Send this link to anyone who needs to review your homepage without having access to the back end of your site.

When you and your colleagues are happy with the homepage, you can Publish it to take it live.

Did this answer your question?