Skip to main content
All CollectionsMicrosites
Microsites Part 2: Design, Layout, and Settings
Microsites Part 2: Design, Layout, and Settings

How to configure the settings and design of a Microsite, which includes adding your main call-to-action and majors

Michael Stephenson avatar
Written by Michael Stephenson
Updated over 3 months ago

Overview

In Part 1, you created your Microsite shell. Next, we recommend configuring the overall design, layout, and settings for your Microsite.


General Settings: General | Main CTA | Footer

Let's start with settings. When your Microsite is open, navigate to the Settings section in the menu on the left side.

General

Click on the General tab and configure the following:

  • Google Analytics: Add your Google Tag Manager Container ID

  • Audiences - Add labels specifying which user groups have permission to access this Microsite

  • Element Messenger - Enable or turn off live chat on this Microsite

Main CTA

The Main Call to Action is a prominent, customizable button displayed in the top right header of the Microsite to drive admitted students to complete critical actions like paying deposits, signing up for events, etc.

The button can be tailored to different audiences using labels, further personalizing the Microsite experience.

  1. Click on the Main CTA tab. You will see the Default Main CTA Button. The default CTA is what will appear for users without matching labels. Click the pencil icon to edit the button text and link.

  2. Click Add Version to customize the CTA for different audiences/labels. Users that match the label will see this version rather than the default. When adding a version, configure the following:

    • Click Add Version

      • Enter Labels: Add labels for the user groups who should see this button

      • Button Text: Concise (2 to 3 words), active phrase for the button’s text.

      • Button Link: To link to a page on the site, enter “/” and the rest of the URL. Example: /section/career. For links to other sites, enter the full URL.

Footer

Click on the Footer tab to manage your social media links (Facebook, X (Twitter), Instagram, and YouTube) and the text that repeats at the bottom of each page.


Design & Layout: General, Navigation, Header, Footer

After configuring the settings, click on Design & Layout under Settings.

General

  • Click on the General tab and configure the following for your institution:

    • Header headline font family

    • Header headline font-weight

    • Primary color (hex#)

    • Secondary color (hex#)

    • School logo (color)

    • School logo (all white - transparent background)

    • Favicon (ico)

    • Favicon (png)

Navigation

  • Click on the Navigation tab and choose where the navigation should appear. The navigation contains a home icon, the links to the content sections you add to your Microsite (covered in Part 3), and the user's settings icon (edit profile and log out).

Header

  • Click on the Header tab and configure the following:

    • Header Color

    • Main CTA Button Shape

    • Main CTA Button Style

    • Featured Card

    • Headline Alignment

    • Image Overlay

Footer

  • Click on the Footer tab and select a layout and button style for the footer that appears throughout the site.


Majors

In the Majors settings, you can add, edit, and manage your institution’s majors that will populate and feed content to the Academic and Career sections of the Microsite, which you'll learn more about in Part 4.

  • Majors must be added manually to your Microsite and will be linked with your data sources using the Major ID field.

  • The Major ID should correspond with the Major GUID in Data Sources (Data + Automations > Data Sources > Majors).

  • This will ensure that when students access their Microsite, their major populates, personalizing their Microsite correctly.

  • The Microsite will display a student's ACTIVE MAJOR

There are several layers of data to configure within a Major, so let's review the parts and an example of each before adding a major:

  • Major: The name of the major

  • Group: Within the major you created, you can create groups. Groups are used to present courses by semester. For example, you could make your groups by cohort or student classification.

  • Semester: Within your group, you can add semesters. Semesters can be configured to display to specific audiences using labels.

  • Courses: Within your semester, you can add example courses complete with titles, codes, and credits

Adding a Major

Click Add Major to enter the basic information about the major:

  • Major: Provide the name of the major that you want to be displayed on the Microsite

  • Major ID: Use the corresponding Major GUID found in your data sources

  • Icon: Select an icon

You will see two tabs once a major has been added: Academic Information and Career Information.

Academic Information

Under the academic information tab, you can add a group. Groups are used to present courses by semester. For example, you could create your groups by cohort or student classification.

This information will be displayed on the Microsite Dashboard when you add the Academic content section (explained more in Part 3 and Part 4).

  1. To add a group, click Create Group and give your group a name and color.

  2. After adding your group, it will be added to your list of groups. Click the name of your group to open your group.

  3. You can now add semesters to your group. A semester will contain a grouping of sample courses. To add a semester, click Add Semester.

  4. In the Add Semester dialogue box, you will have two tabs: Content and Audience:

    • Content: Give your semester a title and total number of credits. Under Courses, you can add your first sample course by providing the title, code, and credits. To add another course, click Add Course.

    • Audience: If you want to restrict who can view this semester, use the audience tab to configure which labels should have visibility access.

  5. Click Finish to add your semester.

  6. Click Back to go back to your major.

Career Information

Under the Career Information tab, you can add career-related information for that particular major. This information will be displayed on the Microsite Dashboard when you add the Career content section (explained more in Part 3 and Part 4).

Click the pencil next to each of these titles to add data.

  • Sample Careers

  • Sample Work Settings

  • Skills You Will Develop

  • Placement Highlights

  • Salary Range

  • Industry-related Clubs

Step 4: Social Media

Manage the X (Twitter) feed in areas like the dashboard or social sections. Click “add social media account” and add the institution's Twitter account username. If you added your X (Twitter) feed earlier in the content section, you will see your X account connected here, and no further action is needed.


The Microsites Module is included with the Element Engage package.

Did this answer your question?