How to Use Framer for Writers

Framer is a visual web‑design tool that lets writers create interactive pages without touching code. In this tutorial you will learn how to set up a story page, add animated headings, embed a newsletter form, and publish a writer’s portfolio. Follow each step, copy the code snippets, and you will have a live site in under an hour.

Table of contents

• 1. Set up a Framer account and project
• 2. Build a clean article layout
• 3. Add simple scroll‑based animations
• 4. Embed a newsletter signup form
• 5. Optimize for SEO and accessibility
• 6. Publish and connect a custom domain
• 7. Framer vs. other writer‑focused platforms

1. Set up a Framer account and project

Create a free account

Go to framer.com and click “Sign up”. Choose the free plan; it includes unlimited pages and a framer.website sub‑domain.

Start a new project

After logging in, click “New Project”. Select “Blank Canvas”. Name it “My Writing Portfolio”. The canvas opens with a gray background and a left‑hand toolbar.

2. Build a clean article layout

Add a page container

Drag a Frame from the Insert panel onto the canvas. Set its width to 720px and height to auto. This will be the max width for all articles.

/* Frame settings */
width: 720px;
margin: 0 auto;
padding: 2rem;

Insert a heading and paragraph

Click the Text tool, type your article title, then press Enter to add a paragraph. Use the right‑hand style panel to set the heading to font-size: 2rem and the paragraph to 1rem.

Responsive image block

Choose Image from Insert, drop it below the heading, and upload a cover photo. In the properties set Fit: Cover and Width: 100%. This ensures the image scales on mobile.

3. Add simple scroll‑based animations

Fade‑in paragraph on scroll

Select the paragraph, open the Interactions panel, and add a “Scroll In” trigger. Choose “Fade In” with a duration of 0.6s. Framer will generate the following code block behind the scenes:

motion.div({
  initial: { opacity: 0 },
  whileInView: { opacity: 1 },
  transition: { duration: 0.6 }
})

Parallax header image

Click the cover image, add a “Scroll” interaction, and set “Y Position” to -30%. This creates a subtle parallax effect that works on all browsers.

4. Embed a newsletter signup form

Using Framer’s Form component

Drag the Form element below the article. Add an Email field and a Submit button. In the Form settings, paste your ConvertKit form ID (e.g., 1234567) and toggle “Success Message”.

Custom HTML embed (Mailchimp example)

If you prefer Mailchimp, add an HTML block and paste the embed code:

<div id="mc_embed_signup">
<form action="https://example.us1.list-manage.com/subscribe/post?u=abc123&id=def456"
method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form">
  <input type="email" name="EMAIL" placeholder="Your email" required>
  <button type="submit">Subscribe</button>
</form>
</div>

Style the form with simple CSS in the same block:

#mc_embed_signup input{width:70%;padding:0.5rem;border:1px solid #ccc;}
#mc_embed_signup button{padding:0.5rem 1rem;background:#0066cc;color:#fff;border:none;}

5. Optimize for SEO and accessibility

Meta tags

Open Project Settings → SEO. Fill in:

• Title: “My Short Stories – Jane Doe” (max 60 characters)
• Description: “A collection of flash fiction and personal essays by Jane Doe.” (max 160 characters)

Alt text for images

Click each image, locate the “Alt Text” field, and write concise descriptions. Example: “Cover image of a misty forest at sunrise.”

Semantic HTML

Framer automatically uses <h1>, <h2>, and <p> tags for text blocks. Verify in the Code view that headings follow a logical hierarchy.

6. Publish and connect a custom domain

Publish to a Framer sub‑domain

Click “Publish” in the top right. Choose “Framer.website” and confirm. Your site appears at yourname.framer.website within minutes.

Attach a custom domain (optional)

On a paid plan, go to Settings → Domain, type www.janedoe.com, and follow the DNS instructions (add an A record pointing to 76.223.2.31). After propagation (usually 1‑2 hours) your site will be live on the custom domain.

7. Framer vs. other writer‑focused platforms

Below is a side‑by‑side comparison of Framer, Webflow, and Squarespace for a typical writer’s needs.

FAQ

Do I need coding skills to use Framer?

No. Framer’s visual editor lets you drag, drop, and type. You can add code blocks for custom interactions, but the core workflow is code‑free.

Can I host a writing portfolio on Framer for free?

Yes. Framer’s free plan includes unlimited pages and a custom sub‑domain. You only need a paid plan for a custom domain or advanced analytics.

How does Framer compare to Webflow for publishing articles?

Framer offers a simpler visual canvas and built‑in animation presets. Webflow provides deeper CMS control but a steeper learning curve. See the comparison table above for details.

Is Framer SEO‑friendly for writers?

Yes. Framer generates clean HTML, lets you edit meta titles, descriptions, and alt text, and supports sitemap generation.

Can I embed newsletters or email sign‑ups in Framer?

Absolutely. Use the built‑in Form component or embed services like ConvertKit, Mailchimp, or Substack via HTML blocks.

With these steps you can turn Framer into a powerful publishing platform. The tool’s visual nature keeps you focused on writing, while the built‑in animations make your stories feel alive. Publish, share, and watch your readership grow.