The first option of content you can choose within a multi-block's grid cell is WYSIWYG (What You See Is What You Get). This option is called WYSIWYG because the content that you can add, like text, images, and links, is straightforward and no added features. Therefore, an EZ page's content area is also considered a WYSIWYG; however, it differs from an advanced layout's multi-block WYSIWYG because the EZ page is non-responsive. 

Multi-Block Editor View

Before learning step-by-step instructions on how to create a WYSIWYG multi-block, familiarize yourself with the multi-block's layout and the sections in which you will be working with when creating your multi-block.

  1. Width. In the width dropdown menu, you can select what width you want the grid cells to be. Adjusting the width of grid cells allows you to arrange them in a particular way on your page. For example, if grid cell 1 and grid cell 2 are both 1/2-width, then they will appear side-by-side on your webpage.
    • Note: Notice the green plus sign cirlced in blue on the righthand side of the grid cell section. Click this icon to add sequantial grid cells to your page if needed.
  2. Grid cell's content type. These Yes/No options allow you to assign one of the four content types (WYSIWYG, Action Link, Link List, and Video) to a particular grid cell. 
  3. Heading (optional)The heading is the title you can ascribe to a grid cell. On this page, "Step 1: add and adjust grid cell width" below is what a grid cell heading looks like. 
  4. Heading background color (optional)You have 13 color options you can assign to the background of the heading. In "Step 1: add and adjust grid cell width" below, the background color is light gold.
  5. Background color (optional). The background color refers to the content field's background color, from which you have 5 color options to choose from. 
  6. Content. The content field is where you can add text and links and insert images and videos.
multi-block-editor-view.png

Creating a WYSIWYG Multi-Block

Step 1: Add and adjust grid cell width

Within a multi-block:

  1. Start with a new grid cell; if needed, add a new grid cell
  2. Set the grid cell width to any width
Step 2: Choose WYSIWYG for the grid cell

Before creating and customizing your multi-block, you will need to specify what type of content you want to display in a grid cell. Select "Yes" to create a WYSIWYG grid cell within the multi-block.

Note: If you select "Yes" to more than one type in a single grid cell, an error will occur on the page. To fix the error, simply deselect the additional type(s) of content so that only WYSIWYG is selected. See Troubleshooting: Cascade Errors for more details.

wysiwyg.png
Step 3: Custom design the WYSIWYG
  1. (Optional): Specify a heading and add a heading background color
  2. Add content in the content box, including images, spot images, text with heading styles, and links
    • Note: Images in WYSIWYG content blocks are always responsive. So, if you want an image to not expand to the width of its grid cell, for example if you wanted the image to be wrapped by text (right-/left-aligned), it will need to be 310 px or less and have "literal-width-image" class applied. See NOTE: Images in Multi-Blocks
    • Text can be copied and pasted directly into the WYSIWYG content field, but we recommend using textfixer.com to format the copied text into HTML before pasting it into the content field. Once you have formated the text in Text Fixer, copy and paste the text into the source code area, which looks like "<>" on the content box
  3. (Optional): Add a WYSIWYG text field background color

Back to Top