Microsite Provisioning

Duplicate the Microsite Demo

  1. Right-click on the existing Microsite Demo item and duplicate it. Give the new item a descriptive name based on the microsite you’re creating.
  2. Under the new site, go to Settings > Site Grouping. Under that item, there will be a single item representing the site.
    1. Rename it to match the new site name
    2. In the Host Name field, plug in the domain name(s) you want to use for the new site
    3. In the Start Item field, select the home page item
  3. Go to the home page item and relink/reselect the Default page design (this will fix the internal references to the original Sitecore IDs when the site was duplicated).
  4. Go to the default page design (Presentation > Page Designs > Default) and relink all the partial designs in this order:
    1. Metadata
    2. Header
    3. Empty
    4. Footer
  5. While performing Step 4, this is also a good time to assign which version of the nav you want to use: with nav (default) or no nav
  6. Republish the entire site. This will take several minutes.

 

Enter Content for the New Microsite

  1. There are several fields that should be changed when entering content for a new microsite:
    1. Global site options (these can be found on the Content tab of the Settings item)
      1. Favicon
      2. Logo: This is edited under Presentation > Partial Designs > Header > Data > Image 1. Make sure to swap out the logo on both header versions, or at least the header version you plan on using. Click the Browse button on the Image field and select/upload an image file via the media library.
      3. GTM Site ID
    2. All pages:
      1. Title (browser title)
      2. OpenGraph info (for Facebook/Twitter sharing)
        1. Title
        2. Description
        3. Image
        4. Type (if you’re not sure, set it to “website”)
      3. Hero
        1. Image
        2. H1 and other content (paragraphs, lists, etc.)
      4. Twitter Card Type (if you're not sure, the default value is safe to keep)
      5. Page Meta Properties
        1. Description
      6. Alt text for any images
  2. Most other content can be edited in the Experience Editor
    1. Columns: Use one or more column splitter components to create the page layout you want
    2. The following CSS classes are available for adjusting the look and feel. They can be added via the Component Properties dialog window.
      1. section-blue: Use on Container components to create a blue background with white text
      2. section-grey: Use on Container components to create a grey background with dark text
      3. section-centered: Use on Container components to center the text
      4. cta-link: Use on Link components to create a yellow button
      5. The default-text and plain-content classes should be used on container Components to optimize the padding, font size, etc. See http://baptistmicrosite.amdevel.com/ for examples on how to use them.
    3. Header: Can be found under Presentation > Partial Designs. The versions with and without nav are edited separately.
    4. Footer: Can be found under Presentation > Partial Designs
    5. Photo gallery: The gallery component can be added almost anywhere on the page. Make sure you add the photo-gallery class to its parent container. Then you can add/remove images in the gallery.

Overriding Styles

  1. Under Media > Site Name > Microsite > Styles, find or upload overrides.css. It probably exists already because the site was duplicated; if not, you can upload a new CSS file here (right-click on the Styles item and select Insert > Upload File). Make sure the overrides file comes after the existing microsites stylesheet in the content tree.
  2. Any time you need to make style updates, go to this item and download the file. Make the changes locally, save the file, then reattach it to the existing item.
  3. Remember, in order to override the existing styles, the CSS selectors need to be identical to or more specific than the original selectors. A tool like https://specificity.keegan.st/ can help you visualize and compare the specificity of two CSS selectors.
  4. By default, the styles in this file will affect all microsites because they all use the same "Microsite" theme. To only affect one site, consider giving each microsite a unique body class (added to all the pages), then prefix/scope all styles in overrides.css with that class.

 

Moving to production

  1. Go to the Sitecore Desktop and open the start menu (red Sitecore logo in the bottom left). Under Development Tools, open the Package Designer.
  2. In the top toolbar of the Package Designer, click the button to add items statically. In the window that appears, find and select the site item, and click Add with Subitems. Click the next button and give it a source name (pick any name you want).
  3. In the top toolbar of the Package Designer, click Generate ZIP. Then download the file.
  4. In the content management environment, go to the Sitecore Control Panel. The link can be found on the Sitecore launchpad when you first login.
  5. Under the Administration section, click Install Package and follow the wizard to upload and install the package you created.