Creating Newsletters
Creating Good Looking Newsletters
A Little About Newsletters
Newsletters provide excellent short form content and there is no reason that your newsletters cannot become investment engines. Many authors use newsletters for specific purposes, like updating readers about new books or events. This form of newsletter is not suited for tBook distribution since it would increase costs for disposable newsletters. Would the newsletter increase in value even if it is not worth saving? Yes, but it would take time and it would use resources ineffectively. You would be better off saving money for other writing projects.
If you create article style newsletters, that we might call newsworthy or evergreen, they can be embedded with monetary value. The nice thing about these types of newsletters is that they can continue to generate interest and value revenue over time, making your large library of newsletters a valuable asset. The low cost of .001$ per newsletter copy means you can continue publishing large amounts of content which begins accruing value. To take advantage of this appreciation you have two options.
Option 1:Using the Distribution App
To embed value into each copy of your newsletter, you will need a different content distribution system. If you would like to explore this option, it will involve using our distribution app. There are some prerequisites for using this app. You need your own domain and a cpanel account on Godaddy or a similar hosting platform. You will need to download the distribution app and follow the setup directions. There are some benefits to this approach, starting with the distribution app being free. Because the app is free you may no longer need mass emailing systems that have a monthly cost, providing even more savings. You will also have a more privacy focused distribution system that respects your users' data and preferences. However, there are some downsides to this approach. You will need to manage your own email list and ensure compliance with email regulations, and most importantly you will need to handle any technical issues that may arise. As well, the improved privacy and care for user data will rely on you making sure that your cpanel is properly secured, configured, and maintained.
Option 2: Investing in Your Newsletter Library
Another approach to embedding value into your newsletters is to only invest in your copies of the newsletters. You would continue to distribute your newsletter through whatever method you currently use and this way your library is the valuable portion of the content. If you are currently curating a library that is used and reused on subscription sites like Substack or Medium then your newsletters continue to work for your by gaining value while sitting in a folder. Option 2 is good for content creators lacking technical expertise because it provides value building; however, you will lose the incentive of gaining followers by providing them with the same value building.
Whichever option you choose, you will still need to design your newsletter. The easiest way to achieve this is to use the Newsletter theme as your template.
The Newsletter Theme
The newsletter theme is designed to provide a clean and professional layout for your newsletter content. It includes a well-structured header, body, and footer, ensuring that your content is presented in an engaging manner.
🎯 Banner-Optimized Header Features:
📏 Standard Newsletter Banners:
- Wide Banner: 1200 x 300px (4:1 ratio) - Professional newsletter header
- Medium Banner: 1000 x 250px (4:1 ratio) - Good for most content
- Compact Banner: 800 x 200px (4:1 ratio) - Clean and minimal
📱 Mobile-Friendly Options:
- Responsive Banner: 1200 x 400px (3:1 ratio) - Works well on all devices
- Square-ish: 800 x 300px - Good balance for mobile/desktop
- Facebook Cover Style: 1200 x 315px - Familiar format
- LinkedIn Banner: 1584 x 396px - Professional look
Provides:
- ✅ Exact Control: Users get exactly what they design
- ✅ No Distortion: Images never get stretched or cropped
- ✅ Theme Compatibility: No new classes needed - won't break other themes
- ✅ Professional Results: Predictable, clean banner display
- ✅ Mobile Responsive: Text overlay adapts perfectly to any banner size
Responsive scaling: Banners scale beautifully on all screen sizes
Min/max heights: Prevents banners from being too small or overwhelming
🎨 Professional Banner Layout:
- Full-width coverage: Banners span the entire header width
- Smart positioning: object-position: center top ensures important parts stay visible
📱 Multiple Header Modes:
- Banner + Content Box: Traditional newsletter with branded banner and overlaid content
- Banner Only: Clean banner with text directly overlaid (using .banner-only class)
- No Banner: Falls back to solid background
📱 Responsive Design:
- Mobile-optimized: Banner heights adjust for mobile screens (120px-250px)
- Touch-friendly: Proper padding and sizing for mobile interaction
- Flexible content: Text boxes adapt to screen size while maintaining readability
This setup is perfect for professional newsletters and will handle everything from wide promotional banners to square logos to text-only headers beautifully!
If you want full control over your newsletter's appearance, you can use the Visual Style Customizer to add custom CSS. The Plain Jane theme provides a minimal base that's perfect for customization. Below is example code that you can start with if you decide to do a complete customization.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Newsletter Title</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f4f4f4;
padding: 20px;
}
.newsletter-container {
max-width: 600px;
margin: 0 auto;
background-color: #fff;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
border-radius: 8px;
overflow: hidden;
}
.newsletter-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 30px 20px;
text-align: center;
}
.newsletter-header h1 {
font-size: 2.2em;
margin-bottom: 10px;
font-weight: 300;
}
.newsletter-header .tagline {
font-size: 1.1em;
opacity: 0.9;
}
.newsletter-body {
padding: 40px 30px;
}
.newsletter h2 {
color: #2c3e50;
font-size: 1.8em;
margin-bottom: 20px;
border-bottom: 2px solid #667eea;
padding-bottom: 10px;
}
.newsletter p {
margin-bottom: 20px;
font-size: 1.1em;
color: #555;
}
.newsletter-section {
margin-bottom: 30px;
padding: 20px;
border-left: 4px solid #667eea;
background-color: #f8f9fa;
}
.newsletter-section h3 {
color: #2c3e50;
margin-bottom: 15px;
font-size: 1.4em;
}
.cta-button {
display: inline-block;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 12px 30px;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
margin: 20px 0;
transition: transform 0.2s;
}
.cta-button:hover {
transform: translateY(-2px);
}
.newsletter-footer {
background-color: #34495e;
color: white;
padding: 20px 30px;
text-align: center;
font-size: 0.9em;
}
.newsletter-footer a {
color: #667eea;
text-decoration: none;
}
@media (max-width: 600px) {
body {
padding: 10px;
}
.newsletter-body {
padding: 20px 15px;
}
.newsletter-header {
padding: 20px 15px;
}
.newsletter-header h1 {
font-size: 1.8em;
}
}
</style>
</head>
<body>
<div class="newsletter-container">
<!-- Newsletter Header -->
<div class="newsletter-header">
<h1>Your Newsletter Title</h1>
<p class="tagline">Insights, updates, and valuable content delivered to you</p>
</div>
<!-- Newsletter Body -->
<div class="newsletter-body">
<div class="newsletter">
<h2>Welcome to Our Newsletter!</h2>
<p>Thank you for subscribing to our newsletter. We're excited to share valuable insights, updates, and exclusive content with you.</p>
<div class="newsletter-section">
<h3>Featured Article</h3>
<p>This is where you can feature your main article or announcement. Add your compelling content here to engage your readers.</p>
<a href="#" class="cta-button">Read More</a>
</div>
<div class="newsletter-section">
<h3>Quick Updates</h3>
<p>• Update item one</p>
<p>• Update item two</p>
<p>• Update item three</p>
</div>
<!-- Add your custom content here -->
<div class="newsletter-section">
<h3>Your Custom Section</h3>
<p>Replace this section with your own content. You can add multiple sections, images, links, and more.</p>
</div>
</div>
</div>
<!-- Newsletter Footer -->
<div class="newsletter-footer">
<p>© 2025 Your Company Name. All rights reserved.</p>
<p>
<a href="#">Unsubscribe</a> |
<a href="#">Update Preferences</a> |
<a href="#">View Online</a>
</p>
</div>
</div>
</body>
</html>
DM me for questions