BugWP logo BugWP
Back to Community
Home / Community / Plugin → Advanced editor tools

How to Create Columns and Control Layout in the Classic Editor with Advanced Editor Tools

18 threads Sep 10, 2025 Plugin → Advanced editor tools

Content

Many WordPress users who rely on the classic TinyMCE editor, enhanced by the Advanced Editor Tools plugin, frequently ask about creating multi-column layouts and controlling spacing. This is a common challenge because the visual editor is primarily designed for linear content, not complex page structures.

Why This Happens

The Advanced Editor Tools plugin significantly expands the capabilities of the default editor, but it does not include a native column block or layout builder. Its primary function is to restore and organize buttons for formatting text, images, and other common elements. Creating responsive columns or adjusting spacing typically requires either manual HTML/CSS coding or the integration of additional functionality.

Common Solutions for Creating Layouts

1. Use a Dedicated Columns Plugin
The most straightforward solution for users who are not comfortable with code is to install a separate plugin designed for creating columns. As mentioned in the community threads, plugins like Lightweight Grid Columns can be used alongside Advanced Editor Tools. These plugins typically add a new button to the toolbar that allows editors to insert column shortcodes directly from the visual interface.

2. Manual HTML Approach
For those who need more control, creating columns manually is an option. You can switch to the 'Text' editor (now called 'Code Editor' in WordPress) and write your own HTML structure using <div> tags with CSS classes. You would then need to add the corresponding CSS rules to your theme's `style.css` file or, better yet, a child theme to make the columns responsive. This method is more technical but offers the greatest flexibility.

3. Custom Style Formats
A powerful feature within TinyMCE is the `style_formats` option. This allows you to create a custom dropdown menu in the toolbar with pre-defined CSS styles. You could create styles named "Two Columns" or "Three Columns" that apply the necessary CSS. Configuring this often requires another plugin, such as Advanced TinyMCE Configuration, to add the custom code without editing plugin files directly.

Common Solutions for Controlling Spacing

1. Theme Styles
Line spacing (line height) and default padding are almost always controlled by your active theme's CSS. To change these site-wide, you will need to add custom CSS to your theme, preferably in a child theme. For example, to change paragraph line height, you would add a rule like p { line-height: 1.6; } to your child theme's `style.css`.

2. Editor Styles
To ensure the visual editor matches your front-end design, many themes include an `editor-style.css` file. If your theme does not have this or you wish to override its spacing, you can create or modify this file. This will change how content appears in the editor, providing a more accurate writing experience.

3. Inline Spacing Techniques
For one-off spacing needs, such as adding space between a paragraph and an image, using the Enter key to create an empty paragraph (which contains a &nbsp;) is the standard method. If this does not work, it may be due to theme or plugin conflicts that strip out empty tags. The Horizontal Rule button (which can be added via Advanced Editor Tools settings) is another useful tool for creating visual separation between content sections.

Important Note: The 'Advanced Editor Tools' team does not maintain or officially recommend any specific third-party column plugins. It is always advisable to test any new plugin on a staging site before deploying it to a live environment.

Related Support Threads Support