Working with Blocks

Blocks are pre-packaged parts of a web page. Some examples of blocks include:

  • Hero image
  • Call to Action
  • Testimonials
  • Contact Form
  • Content Columns
WebHaste ships with some very basic blocks that you can use in your pages and style via CSS. Your website's template may have additional blocks set up by your site designer.

To insert a Block:

  • Place your cursor where you want to insert the block (typically on a new line).
  • Click the 🧩 Blocks button
  • Select the block you want to insert
  • Replace any placeholder text/images with your content
  • Rinse and repeat

Note: Sometimes you will want to begin typing immediately after a block or insert another block after an existing block. It is difficult to place your cursor after a block or other elements sometimes. To help with this, move your mouse over the outermost outline for the block, and the block settings menu will appear. Click the Return icon to move the cursor immediately after that block.

line-after-block.png

Built-in blocks

The extension ships with a set of ready-made blocks — Hero, Call to Action, Testimonial, Contact, 3-Column Features, Video Embed, and Form Embed. Each is styled for your site's active CSS framework; a block without markup for your current framework shows up disabled rather than disappearing, so you know it exists even before it's available for that framework.

The two embed blocks (Video and Form) wrap an <iframe> for things like a YouTube video or a forms embed:

  • Video Embed keeps a fixed 16:9 aspect ratio, right for video.
  • Form Embed has no forced ratio, since form height varies by content rather than width — it starts at a reasonable minimum height that you adjust to fit.

For either embed block, insert it, switch to Code view, and replace the placeholder src with your real embed URL — an iframe's source isn't something you can retarget by clicking on it in Visual view.

Block Settings

In the editor window, you may see dashed lines enclosing some of your content. These are visual indications of <div> wrappers, the universal content container in HTML.

If you move your mouse toward the top of each box, you'll see a menu appear in the upper right. This is the container editor, which lets you edit the classes and IDs of each <div> in the page.

Blocks are special self-contained divs, and they have additional features and settings, including:

  • Cog: Allows you to change ID and classes of the block
  • Up Arrow: Moves the active block up on the page
  • Down Arrow: Moves the active block down on the page
  • Return Icon: Moves the cursor immediately below the active block, allowing you to begin typing or insert other elements outside of the current block
  • Trash Can: Delete the active block