See What New Styles There Are

See What New Styles There Are

This is the example post to illustrate Attegi theme styling. We’ll include a table and some emphasis.

Feature Description Status
Bold Text Use bold to emphasize key points
Italic Text Use italic for subtle emphasis
Links Connect to external resources

Headings

Headings help structure your content hierarchically. Use different heading levels to effectively organize your posts and improve readability.

To create a header, simply add a # before your header text or use the contextual toolbar. You can add up to six # consecutively to make the headers smaller.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lists

Lists help break down information into digestible chunks. Use unordered lists for simpler content and ordered lists for sequential information.

Unordered list

  • First item in the list
  • Second item with more details
  • Third item for completeness
  • Fourth item with examples

Ordered list

  1. First step in the process
  2. Second step follows naturally
  3. Third step builds on previous
  4. Final step completes the sequence

Highlighting

Highlighting text draws attention to key points or important information within your content. To create a highlight, simply put == before and after your text, likethis highlighted example.

Divider

Separate your content into distinct groups by inserting line breaks, using the Divider card. Quickly add a divider by typing –--.


Buttons

Buttons provide clear calls to action for readers. Use buttons to encourage engagement, drive conversions, and guide users to key pages or resources.

Quotes

Quotes add credibility and interest to your content. Regular quotes are ideal for attributing information, while bold quotes can make important statements stand out. To create a quote, add > or use the contextual toolbar.

You have to be burning with an idea, or a problem, or a wrong that you want to right. If you're not passionate enough from the start, you'll never stick it out.

Code

Display code snippets for technical content. Use inline code for short commands or code blocks for longer examples.

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('Attegi'));

Bookmarks

Bookmarks help readers navigate long content by providing links to specific sections or points of interest. Use bookmark cards to create attractive preview cards for external links, making them more engaging than plain text links.

You can learn more about code block usage at:

Now Show the Code Block!
Just a simple place to experiment with formatting, display snippets, and see how everything looks inside your theme. Say Hi to the world! print(“Hello, World!”) #include <stdio.h> int main() { printf(“Hello, World!”); return 0; } public class Main { public static void main(String[] args) { System.out.println(“Hello, World!”); } } console.log(</stdio>

Callouts

Callouts draw attention to important messages, alerts, or notes within your content. Use callouts to emphasize warnings, tips, or critical information.

💡
Use callouts to highlight important tips and information for your readers.
🚫
Use callouts to highlight important tips and information for your readers.

Images

Images enhance visual appeal and user engagement on your blog. Use different image widths to create dynamic layouts and maintain reader interest.

Abstract glass rings with rainbow light refractions
Photo by Leftfield_Corn / Unsplash

Image Widths

  • Normal Width: Best for inline images within content
  • Wide Width: Great for featured images and screenshots
  • Full Width: Perfect for hero images and dramatic visuals

Galleries showcase multiple images or media files in a visually appealing layout. Use galleries to create collections, showcase portfolios, or present multiple perspectives of a subject.


Audio & Video

Audio

Audio files enrich your content by providing an auditory experience for readers. Use audio embeds to share podcasts, music, interviews, or sound effects that complement your written content.

Videos

Videos engage readers with dynamic visual content. Use video embeds to share tutorials, vlogs, interviews, or promotional videos that enhance your blog posts.

Files

File downloads offer additional resources or content for readers to access. Provide downloadable files such as PDFs, documents, or resources to add value to your blog posts.

Example: Use the /file command or click the + button to upload documents, PDFs, or other downloadable resources for your readers.

Embeds

Embeds allow you to incorporate external content like videos, social media posts, or interactive elements directly into your blog. Popular embeds include YouTube videos, X (Twitter) posts, Instagram photos, and more.

Bookmarks

Bookmarks help readers navigate long content by providing links to specific sections or points of interest. Use bookmark cards to create attractive preview cards for external links, making them more engaging than plain text links.

The Hidden Details: Links & 404 Pages
A great Ghost theme isn’t just about how it renders a blog post; it’s about how it handles the entire user journey—even when that journey hits a dead end or branches out to friends. In Attegi, we have paid special attention to two often-overlooked pages: the Links page (Blogroll)

Toggles

Toggles allow you to hide or reveal additional information, making your content more interactive and organized. Perfect for FAQs, detailed explanations, or optional content that readers can expand when needed.

How do I add custom cards using /<commands>?

You can add various cards to your Ghost editor by typing a forward slash (/) followed by the card name. For example, type /button for a button card, /toggle for a toggle, /bookmark for a bookmark card, or /product for a product card. The editor will show you a list of available options as you type.


Conclusion

This styling guide demonstrates the full range of content creation tools available in the Attegi editor. From basic text formatting to advanced media embeds and interactive elements, you have everything needed to create rich, engaging content. Experiment with different combinations of these features to find what works best for your audience and content style.

Pro Tips:

  • Use headings consistently to create a clear content hierarchy
  • Balance text with visual elements to maintain reader engagement
  • Don't overuse special formatting - save it for truly important information
  • Test your content on mobile devices to ensure responsive design
  • Keep accessibility in mind when using colors, images, and interactive elements

Comments

Get the latest posts delivered right to your inbox.