How do I use the text editor?

 

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.

mceclip0.png

 

Text

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. 

mceclip1.png

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

Screen_Shot_2021-12-22_at_11.56.38_AM.png

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.

mceclip3.png

 

Headers

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.

mceclip4.png

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.

 

Lists

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. 

mceclip5.png

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.

Screen_Shot_2021-12-22_at_12.06.08_PM.png

 

Blockquotes

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).

Screen_Shot_2021-12-22_at_12.08.26_PM.png

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.

Screen_Shot_2021-12-22_at_12.11.36_PM.png

 

Hyperlinks

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:

Screen_Shot_2021-12-22_at_12.15.26_PM.png

Which will result in a rich text preview that renders like this:

Screen_Shot_2021-12-22_at_12.15.33_PM.png

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):

Screen_Shot_2021-12-22_at_12.16.49_PM.png

Screen_Shot_2021-12-22_at_12.16.55_PM.png

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.

mceclip8.png

 

Images

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.

Screen_Shot_2021-12-22_at_12.19.14_PM.png

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:

mceclip6.png

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.)

mceclip7.png

 

Buttons

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:

Screen_Shot_2021-12-22_at_12.31.14_PM.png

Using the secondary menu you can change the alignment of the button, the size, and background color of the content block:

Screen_Shot_2021-12-22_at_12.31.31_PM.png

As always, all of the button styles are available to be customized and edited in the theme editor.

 

Content Breaks

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:

Screen_Shot_2021-12-22_at_12.35.49_PM.png

You can view the preview of your newsletter to see how it'll render with your styles (again customized in theme editor).

Screen_Shot_2021-12-22_at_12.36.44_PM.png

 

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. 

mceclip9.png

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.

 

Referral Program

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:

mceclip10.png

 

Miscellaneous

  • 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.

 

Was this article helpful?