The beehiiv text editor is a block-based text editor where you insert blocks of content. By clicking into the editor, or hitting `tab` you'll open up the option menu.
By default, you can begin typing and it'll render as normal paragraph text (the T icon, for text). You can highlight text in the editor and choose from bolding, italicizing, underlining, hyperlinking, changing the font-size, or color.
As you can see in the image below, in the first sentence we highlighted the word "paragraph" and used the color picker tool to make it purple. The following block of text we used the font-size tool (TT) to increase the font-size to be large
Finally, as with any block of content, there is a secondary menu (indicated by 4 dots) that appears in the far right corner when clicking into the content block. This offers different options for different types of content blocks. For text, it'll allow you to change the alignment of the text and/or edit the background color, as shown below.
The second icon in the menu is for headings (the H). By default, when adding a heading it'll add an H2. Using the secondary menu on the right, you can alter the type of header (H1, H2, H3, H4, H5, H6), along with the text-alignment and background color.
By visiting your theme settings, you can edit each of these header styles individually. For each header (H1, H2, etc.) you can determine the font-family, font-size, and color of each. When you go to Preview your newsletter you'll see your styles applied.
The third option in the menu is for lists. By default you'll have a bulleted list where you can add list items. By hitting tab you can indent to create a nested list. Hitting shift + tab moves you back up a layer.
Using the secondary menu you can toggle the list back and forth between numbered or bulleted lists, along with changing background color of the content block.
The fourth icon is for adding blockquotes to your post. By clicking the quote icon you'll see a place to enter in both the text you're quoting plus the author of the quote (optional).
You're able to edit the aesthetic of your block quotes in your theme setting to display this however you'd like (customizing the font-family, colors, font-size, spacing, etc.). When you preview the newsletter you'll see your styles applied to the quote as you'd expect.
There are multiple ways to add hyperlinks and rich text previews into your post. If you were to use the link button in the menu to add a hyperlink, it'll prompt you to add like this:
Which will result in a rich text preview that renders like this:
Alternatively you're able to just copy and paste links directly into the editor. If you were to paste in a web address like https://www.beehiiv.com you would be prompted with the option for it to render as a rich text preview (like above) or a plain text hyperlink (like below):
The plain text hyperlink is styled how you have customized in your theme settings (where you can alter text-style, colors, fonts, etc.).
When you copy and paste in URLs to tweets or YouTube videos, we'll automatically convert them to a rich text preview that'll render in both email and web.
We've made adding (and re-using) images simple using our media library. When you click on the image icon in the menu, you'll see your media library pop up.
From here you can search through your library of previously used images and click on any to re-use. We provide a search bar at the top to search metadata on any of your assets.
Alternatively you can upload new assets using the left menu bar and navigating to Upload. You can click to open up your computer's document browser or drag and drop assets in directly. Once uploaded you'll be prompted with the following:
Title: mostly used to title the asset so you can search and find it later for re-use
Alt Text: used in place of the image if the image cannot load or is blocked from certain browsers or email clients. This also has SEO benefits on web to utilize keywords
Source: displayed right underneath the image in the post to give credit to who owns the image
Source URL: will turn the source into a hyperlink and will redirect to whichever URL you use here
After you select the asset and add it to your post, you can use the secondary menu on the right to:
- Change the image
- Resize the image
- Hyperlink the image
- Change background color of image
- Edit the image metadata (i.e. source, alt text, etc.)
Adding a button is as simple as clicking the button icon, and then you're able to click on the button directly to change the text and URL of the button:
Using the secondary menu you can change the alignment of the button, the size, and background color of the content block:
As always, all of the button styles are available to be customized and edited in the theme editor.
Adding a content break is also as simple as clicking the icon and it'll drop a thin horizontal dotted line in the editor, indicating where the content break will go:
You can view the preview of your newsletter to see how it'll render with your styles (again customized in theme editor).
Custom HTML Blocks
Upon request, we've added the ability for users to drop in custom HTML code to utilize additional components and styles not offered by our text editor.
It's important that you throughly test the custom HTML content blocks in email (both desktop and mobile). Because you are introducing components outside of our ecosystem, it's impossible for us to have tested and guaranteed it'll render properly in all mail clients. Use this at your own risk.
For users on our Growth tier, you have access to our referral program feature. You can learn more about that here.
By clicking on the referral program icon, we will drop a placeholder block where your referral section will render in email:
- We've also prioritized content being easily transferred from elsewhere—meaning you should be able to copy and paste in content from Google Docs, Microsoft Word, other newsletters, etc.