Documentation › Tips for Using the Visual Editor

Tips for Using the Visual Editor

The Visual Editor gives wide flexibility in building your website. As you work, we recommend following these best practices.

Line Blocks Up Right

Grid Mode is a layout mode, so it’s not designed for pixel-perfect placement of all your elements. It’s designed to give you a simple interface that allows you to place the various bits and pieces of your website onto a drawing canvas. In translating that information to a website, Headway will fit the blocks together. Headway tries to logically arrange your blocks into columns and rows.

Sometimes, odd block placement can have unexpected results. So keep in mind:

  • If you’re going for three columns in your layout, try to get all the columns to start on the same line. This is typically good design sense anyway, but if you don’t follow this guideline, you may find that one of your columns or blocks drops out of place.
  • If you’re going for a multiple-column layout in which one or more of the columns is made up of multiple stacked blocks, don’t bother putting a lot of space in between the blocks that are stacked on top of each other. The blocks will fit themselves together in the browser. Putting a bunch of space between two vertical blocks is a signal to Headway that you’re trying to start a new row—and your second block on the left will get pushed out of place and below everything else as shown in the illustration below. (In this case, use padding or nudging if you want to purposely offset blocks from each other. See Using Margins, Padding, and Nudging.)
  • If you need blocks grouped a certain way, you may want to try using multiple wrappers rather than leaving it up to Headway to try to interpret how you want the blocks to line up. See Wrappers and Wrapper Options for information about adding and configuring wrappers.

Give Each Block an Alias

An alias is like a name for the block. If you don’t provide an alias, the block will always be referred to by its ID both in the Visual Editor and in WordPress, and that can get confusing.

With a block’s options opened in the options panel, click the Config tab to set an alias.

Understand Block Types and Use Them Strategically

Get familiar with what each block type is for so you can use it in the right place for the right purpose. Lay out your site once you understand which block type is best for each component of your site. That way, you avoid discovering you used the wrong block type and having to redo it.

Example:
Headway offers a text block, and WordPress provides a text widget. Which is the right one to use? If you plan to have the text stay the same over a long time and even show up in different places around your site, the Headway text block is better. But if you will be regularly changing the text, it’s better to use a widget area block with the WordPress text widget because it’s quicker to update the text in WordPress.

Work from General to Specific

Layout inheritance and cascading style sheets (CSS) work in a similar way. The higher up in the hierarchy you develop layouts and styles in the beginning, the fewer customizations you will need to make farther down.

In Grid Mode, begin with the Blog Index layout to design your site. Due to layout inheritance, all other layouts will adopt the same setup. Work your way down the hierarchy to make targeted customizations in other layouts.

Note:
If your home page will be laid out much differently than the rest of the site, and it won’t display blog posts, it’s recommended you use a static home page. That way, you won’t have to worry about customizing every child of the Blog Index layout.

In Design Mode, click the Defaults
tab in the options panel, and choose the general text styles for your site. To add styles for the body, the wrapper div, or block types, click the Editor tab, and select the element or block type. Select a child element to set its styles.

From there, if you want to style specific blocks (or even specific blocks on specific layouts) differently, select them in the options panel or the viewport. See Targeting Elements for Styling: Levels of Customization for more on targeting layouts or instances for style customizations.

Use Shared Layouts

With a shared layout, you reuse a specific layout in multiple places on your site, and the changes you make to the shared layout apply to all regular layouts it’s assigned to. Shared layouts can even be assigned to individual posts in WordPress on the post editor screen.

Example:
Say you have About, Contact Me, and Newsletter pages on your site. They inherit their layouts from the Page layout, which inherits its settings from the Single layout. You want these three pages to look different than the rest of the pages while looking the same as each other. Creating a shared layout and assigning it to these three pages will save a lot of time, and making a change to the shared layout updates all three pages.

See Using Shared Layouts for instructions on creating and applying layout templates.

Be Aware When Styles Are Progressive Enhancements

As the CSS specifications change and become more robust over time, web browsers have to keep up. Older versions of browsers still in use may not recognize some styles, like rounded corners and box shadows. Be aware of what browsers your visitors will be using to view your site, and if that will be a limitation, don’t let the newest styles drive your site’s readability and functionality.

This article was last updated for Headway version 3.8.3.

Copyright © 2016 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress