Designing and Exporting a Blog
Turn a written blog into a designed web page, compare and revise design versions, approve one, and copy the HTML and SEO details into your website.
Once Orsa AI has written your blog post, it can design it as a web page in your brand’s colors and fonts. You choose the images, links and call to action, then compare design versions, ask for changes, and approve the one you like. Finally you copy the page’s HTML and its SEO details into your website.
Orsa doesn’t publish blogs to your website. You paste them in yourself.
This guide picks up at the Content Ready step. To get there, see Writing a Blog with AI. Open your blog from the Blog tab of the Create page.
Quick start
- Open a blog at the Content Ready step.
- In the sidebar, under Cover Image, click Upload and pick an image from Search Web.
- Under Files to Use, add two or three photos to place in the post.
- Under Call to Action, click + add and pick your booking or contact page.
- Click Submit for Design.
- Wait for the Blog Design Ready notification. Then open the blog from the Blog tab.
- Look at the design. If you like it, click Approve v1.
- Click Copy HTML above the preview, and paste it into your website.
Example: a yoga studio’s post “5 poses for better sleep” gets a stock photo of a calm bedroom as the cover, three class photos under Files to Use, and their “Book a class” page as the call to action.
Set up the design
These fields are in the sidebar at the Content Ready step. They save as you change them.
Files to Use: images to place in the post. Pick them from Brand Library, Search Web (free stock photos) or Upload Panel. Without a cover image, the first one becomes the big image at the top. Images you add here get a public web address, so they show on your website when you paste the page in.
Cover Image: the main image under the title (“Needed for social previews”). Click Upload to pick one, Change to swap it, or × to remove it. It can come from Search Web, Brand Library or Upload Panel. Like Files to Use, a cover from your own files gets a public web address so it shows on your website.
Meta Title, Meta Description, URL Slug and Cover Image Alt Text: the search-engine details for the post. Orsa AI fills in the meta title and description when it writes the post; edit them here to clear the SEO warnings. The alt text field shows once a cover image is set.
Design Notes: what the page should look like. Placeholder: “e.g. Use brand colours, keep it minimal…”. It’s separate from the Description you wrote at the Draft step, which steers the writing. Use Design Notes for the look only.
Design Reference: a page to copy the layout and style from. Click Select:
- Favorite Designs: blog designs your brand has starred. Pick one, and the new design follows its layout. If the list is empty, it says “No favorite blog designs yet. Star a design version first.”
- Paste HTML: paste the code of a web page you like, then click Done. “Only layout and style are used — your text content is stripped out before it’s sent to the AI. Pasted HTML takes precedence over a favorited design if both are set.”
Internal Links: other pages on your website to link to from the post, like related blog posts. Click + add, then pick a page from the list or paste its address in “Or paste a URL…” and click Add. Pasted addresses must be on your brand’s website. They’re added as links in the text and as “Also Read” boxes.
Call to Action: pages you want readers to go to, like your booking or contact page. Click + add and pick or paste them. They become buttons at the end of the post. Without any, the ending is plain bold text with no buttons.
The page is also styled with your brand’s colors, fonts and Visual style from the Brand Kit, and follows your Playbook. See Brand Kit and Playbook.
Example: a bakery adds its “Custom cakes” page under Internal Links and its “Order online” page under Call to Action. In Design Notes they write Light and airy, lots of white space, round photo corners.
Submit for design
- Check the written text one last time. After you submit, it can’t be edited or revised any more.
- Click Submit for Design. It shows Submitting….
- The blog moves to In Design. The sidebar shows Generating design…, and every field is locked with “Design generation is in progress”.
How long it takes: blog designs are made in batches that start every 15 minutes, so expect to wait at least 15 minutes, and sometimes longer.
You can leave the page. When the design is ready you get a Blog Design Ready notification (“Your blog design has been generated.”). Open the blog from the Blog tab of the Create page to see it. If you kept the page open, it updates by itself (it checks about every 40 seconds).
Review design versions
At Design Ready, the designed page fills the middle of the screen. Above it is the Version bar:
- Each design is a version: v1, v2 and so on. The newest says (latest).
- Click a version to preview it.
- Click the star on a version to add it to your brand’s favorites (Mark as favorite). Starred versions can be picked as a Design Reference for future blogs.
- A green check shows the Approved version.
- Copy HTML copies the version you’re looking at.
Ask for changes
- Click the version you want to start from.
- In Revision Notes, describe the change, like “Make the hero image smaller, bigger font on mobile”.
- Click Regenerate from vN, where N is the version you picked, like Regenerate from v2. It’s greyed out until you type notes.
The blog moves to In Revision and the sidebar shows Regenerating…. The new version is made the same way as the first design, in batches every 15 minutes. You get a Blog Revision Ready notification (“Your revised blog design is ready.”) when it’s done, and it shows up as the newest version.
At Design Ready you can still change Files to Use, Cover Image, Internal Links and Call to Action before you regenerate. Design Notes is locked: “Design is already generated. Use the revision box instead.”
Example: v1 looks great but the buttons are too small. Select v1, type Make the Book a class button larger and centered, and click Regenerate from v1.
Approve a design
- Click the version you want.
- Click Approve vN.
The blog’s status becomes Approved, the button changes to Approved vN, and that version gets the green check. The status change is shared like any other. See Reviews and Approvals and Notifications.
Approving is final. After that, every field and Revision Notes are locked.
If the blog has approvers, only they or the brand’s Owner and Admins can approve it. For anyone else, Approve vN is greyed out. With no approvers, anyone on the brand can approve.
What you can change at each step
| Step (shown under Blog Settings) | Files, Cover Image, Internal Links, Call to Action | Design Notes | Design Reference | Ask for changes |
|---|---|---|---|---|
| Content Ready | Yes | Yes | Yes | Revise Content (the text) |
| In Design | Locked | Locked | Locked | No |
| Design Ready | Yes | Locked | Not shown | Regenerate from vN |
| In Revision | Locked | Locked | Not shown | No |
| Approved | Locked | Locked | Not shown | No |
Copy the blog into your website
Copy the designed page
- At Design Ready or Approved, click the version you want (the approved one is picked for you).
- Click Copy HTML in the Version bar. You’ll see “HTML copied to clipboard!”.
- In your website builder, add an HTML or code block to a new blog post and paste.
Copy only the text: the ⋮ menu at the top of the sidebar also has Copy HTML. This copies the written post as plain HTML, without the design. Use it when your website applies its own blog styling.
Copy the SEO details
- Click ⋮, then View SEO Metadata.
- The SEO Metadata window shows the Word Count and Reading Time, then fields like Meta Title and Meta Description.
- Click the copy icon next to a field, and paste it into your website’s SEO settings. Fields with nothing to copy say Not set.
- If there’s a JSON-LD field, copy it and paste it into the page’s header code. It describes the post, and its questions and answers, in a format search engines read.
The window is worded for Squarespace (“Copy these into Squarespace’s SEO panel”), but you can paste the same details into any website builder.
For Scheduled At in the sidebar, see Scheduling a Post.
Ideas for designing blogs
A consistent look for every post.
When a design comes out just right, star it. For every later blog, pick it under Design Reference → Favorite Designs, so all your posts share one layout.
Match your existing website.
A salon copies the HTML of one of its existing blog pages, pastes it under Design Reference → Paste HTML, and gets posts that look like the rest of its site.
Turn readers into bookings.
A dog groomer adds “Book a groom” under Call to Action and two related posts under Internal Links, so every post ends with a booking button.
Tips for the best results
- Finish the text first. Once you click Submit for Design, the words can’t be changed in Orsa.
- Set a cover image with alt text. It’s used in the design and in the SEO details.
- Make sure your brand has its website. Internal links you paste must be on it. See Set Up Your Brand from Your Website.
- Fill in your Brand Kit. The design uses its colors, fonts and Visual style.
- Star your best versions. They become references that keep future posts consistent.
- Be specific in Revision Notes. “Make the CTA button full width on mobile” works better than “make it better”.
- Read the SEO warnings before you submit. Fix the meta title, description or cover alt text in the sidebar; they lock once you submit for design.
Common questions
My design hasn’t appeared yet. Designs are made in batches that start every 15 minutes, so it takes at least 15 minutes. The page checks on its own about every 40 seconds, or wait for the Blog Design Ready notification and open the blog from the Blog tab.
My cover image isn’t in the design. Designs made before the cover was set don’t include it. Ask for a new version with Regenerate from vN.
There’s a warning “Cover image is missing alt text.” Fill in Cover Image Alt Text in the sidebar at Content Ready.
I can’t add an internal link I pasted. Pasted links must be on your brand’s website, and your brand needs a website set up. Check the address, or pick a page from the list instead.
Why can’t I edit Design Notes after the first design? They’re used for the first design only. Use Revision Notes to ask for changes.
Can I edit the text after the design is made? Not in Orsa. Copy the HTML into your website and edit it there, or start a new blog.
Can I approve a different version after approving? No. Approval is final. To use another version’s look, click it and click Copy HTML.
Some SEO Metadata fields say Not set. The Open Graph and Twitter fields reuse the meta title, meta description and cover image, so fill those in the sidebar first. The slug is made from the title when you haven’t set one.
Can Orsa publish the post to my website? No. Copy the HTML and SEO details and paste them into your website yourself.
Was this helpful? Tell us what worked or what was missing athello@orsa.social.