Creating an About Page in Élan

Élan includes dedicated styling for an About page. The template expects the supplied Élan About Page HTML to be pasted into Blogger’s page editor, where you can replace the demo copy and image without changing the theme XML.

Create the page

1. Go to Blogger → Pages.
2. Create a new page named About.
3. Switch the editor to HTML view.
4. Paste the About Page HTML supplied with Élan.
5. Replace the placeholder copy and image with your own.
6. Publish the page.

Recommended page URL

Élan recognizes the standard Blogger About path /p/about.html. The template can also detect the About wrapper class used by the supplied HTML.

Built-in About-page sections

The final template contains styling for:

• An introductory paragraph
• A two-column story area
• A portrait image using a 4:5 presentation
• Main story copy
• A three-column values section
• A highlighted note/callout

Edit content, not class names

Keep the supplied mv-about-page... class names intact. They are what connect your page content to Élan’s built-in responsive styling.

Adjust the page design

Élan also includes static-page design variables for page width, headings, introductory typography, soft backgrounds, borders and accent styling. Use Theme Designer where those controls are exposed rather than rewriting the page structure.

Copy-and-paste About Page HTML

Paste this into the Blogger page editor in HTML view, then replace the sample copy and image URL. Keep the mv-* class names unchanged so Élan can apply its responsive About-page styling.

<div class="mv-about-page">
  <p class="mv-about-page-intro">
    A short introduction to you, your story, and what readers can expect from your site.
  </p>

  <section class="mv-about-page-story">
    <div class="mv-about-page-media">
      <img class="mv-about-page-image" src="YOUR-IMAGE-URL" alt="Your name">
    </div>

    <div class="mv-about-page-copy">
      <h2>A little about me</h2>
      <p>Add your main story here.</p>
      <p>Add another paragraph if you would like to share more.</p>
    </div>
  </section>

  <section class="mv-about-page-values">
    <h2>What you’ll find here</h2>

    <div class="mv-about-page-value-grid">
      <div class="mv-about-page-value">
        <span class="mv-about-page-value-title">Thoughtful living</span>
        <p>Replace this with your own short description.</p>
      </div>

      <div class="mv-about-page-value">
        <span class="mv-about-page-value-title">Personal style</span>
        <p>Replace this with your own short description.</p>
      </div>

      <div class="mv-about-page-value">
        <span class="mv-about-page-value-title">Meaningful travel</span>
        <p>Replace this with your own short description.</p>
      </div>
    </div>
  </section>

  <div class="mv-about-page-note">
    <p>Add a final note, favorite quote, or short invitation to explore the blog.</p>
  </div>
</div>