How to format text

WYSIWYG: What You See Is What You Get

The BentoBox backend uses a WYSIWYG text editor. WYSIWYG is an acronym for “What you see is what you get.” You will see the text editor, often referred to as the WYSIWYG (WIZ-ee-wig), when you are editing a text field, whether that’s for a news post, event listing, ecom item, menu, or anything in between.wysiwyg-box.png

The WYSIWYG makes it easy to update the text of your site without any experience with HTML or other forms of coding.

Basic formatting

To add bold, italic, or underlined text, just use the buttons in the WYSIWYG's toolbar.wysiwyg-buttons-bold-italic_copy.png

Alignment for paragraphs is also available in the WYSIWYG's toolbar. wysiwyg-allignment-dropdown.png

Formatting with heading styles

The text formatting of your BentoBox site is handled using heading styles. During your site’s initial design phase, text styles are set along with the other design elements. There are four heading styles available to you in the WYSIWYG that are pre-set by your site’s design, as well as normal text.

  • Normal text is the default font used on your site.
  • Heading 1-5 are heading styles that are preset by your designer.

Heading styles make it easy to keep all of the copy on your site in line with the styling of the rest of the site, so that everything looks professional. To format your text using heading styles, just follow the steps below.

  1. Locate the text you want to edit in the backend. In this example, we’ll use a news post but the WYSIWYG appears in just about every section of the backend.
  2. Highlight the text you want to edit.
  3. In the WYSIWYG toolbar, click the paragraph symbol (¶) to reveal a drop down of the different heading styles.
    wysiwyg-heading-dropdown.png
    Choose the desired heading style for the text you highlighted in the last step. You can also choose “Normal” from this drop down to remove the formatting and have the selected text appear in your regular body font.
  4. You will now see the text you selected change size in the WYSIWIG. Note that the font displayed in the text editor doesn’t necessarily match the font in your site’s design. This is just a preview font.
  5. Click the “Save & Close” button. Now if you click the “Visit Site” link at the top of the screen, you will be able to view your changes.

It can be a little tricky to get used to using heading styles at first, so you may want to play around with the WYSIWYG when you are first getting used to updating your BentoBox site.  

Line breaks

In the WYSIWYG, pressing the enter key on your keyboard will create a new paragraph with a double-line break. To create a single line break, hold shift when pressing enter. wysiwyg-line-breaks-original.png

Adding hyperlinks

You may want to add clickable hyperlinks to your text. This is easy using the WYSIWYG. 

  1. Locate the text you want to edit in the backend. 
  2. Highlight the text that you want to hyperlink.
    wysiwyg-hyperlink-highlight.png
  3. Click the "Add Link" button.
    wysiwyg-add-link-button.png
  4. In the dialog that appears, enter page you want the link to point to in the URL field.
    wysiwyg-hyperlink-dialog-url.png
  5. Check the "Open in New Tab" box if you want the link to open in a new browser tab when visitors click it. This is recommended for external links. 
    wysiwyg-hyperlink-dialog-new-tab.png
  6. Click the "Insert" button and your link will be inserted.
    wysiwyg-hyperlink-dialog-insert.png  
  7. Now the linked text will appear in red in the WYSIWYG. To change the hyperlink, just click on it for options to open the link, change the destination, or remove the link altogether. 
    wysiwyg-hyperlink-edit.png
  8. Click the “Save & Close” button. Now if you click the “Visit Site” link at the top of the screen, you will be able to view your changes.

Adding images

To add images to your site using the WYSIWYG, follow the instructions here.

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.