Editor vs. Composer! Simple WYSIWYG text editor against Drag’n’drop plugin

Visual Composer’ are among the trends at WordPress. If you want to create pages and articles in the content management system WordPress, you need the integrated WP editor. The WP editor is in short a WYSIWYG editor, in long words a “what you see is what you get” editor. That means, similar to the well-known office software Word from Microsoft, you always see changes live. Make a word bold bold is bold. Underline a word it is underlined. This is exactly how the WordPress editor works, what you do is what you see. For smaller online projects, websites and blogs this feature is perfectly sufficient. However, with the increasing popularity of WordPress, larger and larger pages have been implemented with the system. But many web designers and media managers didn’t want to settle for simple text fields and embellish the individual page layouts. With individual icons, custom backgrounds, sliders, large images and much more.

Classical WordPress Editor or nevertheless Composer?

For a professional this is no problem at all, he writes a few lines of code with HTML and CSS and it’s done. But the principle of a content management system is to manage large amounts of data and ideally to make them easily accessible, editable and deletable for users. Therefore, it is recommended to have a nice user-friendly interface that is easy to work with even without a lot of technical knowledge.

Principle, design with shortcodes

In order to style pages relatively simply, the idea of using shortcodes was born. These shortcodes combine more complicated code into simple tags that can be used by the user. A simple example would be to pack a nice headline into a shortcode:

[ headline ]Here is the headline[ /headline ]

… the element is then given a special color, a special position, perhaps a different font, font strength and much more. Before we start typing complicated HTML and CSS properties, it would be wise to just use the term headline. And that’s exactly how the principle of shortcodes works: You pack more complicated, long codes into simple little snippets. The problem with this principle is that you need a lot of visual imagination, because the user sees code, not a nicely formatted headline. And now imagine that we only increase the complexity a little bit and include tables, with exactly the same distances between them, which are then also colored in the background, individually, once blue, once yellow, once orange. This is where shortcodes reach their limits, at least for the non-technician.

New: Composing in the WordPress Editor

In order that content can be easily placed and is also directly visually visible, in its approximate position, in its approximate form, there have been various alternatives to the standard WP editor for some time now: Composer. You can usually download these, install them in your WordPress system and off you go. All important downloads can be found here and again at the end of the article.

The first step is to install the Composer of your choice like a normal plugin in your WordPress Dashboard. In a further step you activate the plugin as usual. What has changed now? Pages and articles. Let’s take a look at your WordPress Dashboard first. Here you will find all important points for you once again in an overview, from blog posts to media to comments and extensions. Pages and posts are relevant for our task today. Pages and posts differ in principle only in that you categorize and chronologically arrange posts like in a classic blog. Pages are all static pages like your terms and conditions, contact pages or “About us” but also the start page and so on.

The most important WP dashboard elements for your website:

wordpress-dashboard-basic-element explanation

Enable WP Composer

In the following example we use the layout editor in WordPress Themes Enfold (found here). No matter if you use the Layout Editor or the Visual Composer of the WP Bakery, you will find a blue button in every single page or post, which leads you to the Composer or switches the mode from the WP Editor to the Composer.

wordpress-dashboard-theme-editorauswahl-03

Many advantages, much flexibility

Let’s first take a look at the countless advantages that the Composer brings to you. On the one hand we have the responsive compilation of content for computers and for mobile devices. The Composer allows you to view columns and rows as individual elements and to adapt them to the size of your screen, i.e. desktop, tablet or smartphone. Furthermore, you have a visual interface, you do not need HTML, CSS or shortcodes to create strong elements like video backgrounds. All elements within the pages or posts can be moved easily and intuitively via drag and drop. The structure of the individual elements is defined and always the same, this gives your website a uniform look and gives the user orientation and therefore less disturbance during the visit.

Further advantages:

  • Elements are freely positionable – even without HTML, CSS knowledge
  • We can create layouts as templates

  • wordpress-dashboard-theme-editor-drag-n-drop-01

    [shortcode variables slug=”adsense”]

    columns, cells and structure

    Let us now look at picture 4. There you will find the conclusion of the small introduction to working with visual editors in WordPress. This is also the last step in my workshops, because working with a composer is very intuitive and can be learned best by trying. It doesn’t take much time either, because the elements are usually limited to twenty. With an independent training the use of the composer is easier and faster understandable. The results will quickly be very good, because the application is really easy with a little guidance and imagination:

    wordpress-dashboard-editor-composer-elements-structure-01

    My tip: Keep it simple

    Look at the structure in figure 4, often none of the special headings need to be, a text field is sufficient. Set a section or work with a column, place a text element here and see what happens. Via the preview (top right on your editing page), you can see the result in a new browser tab. Now go a small step further and place a line our first text field. Make a headline out of the text field and at the very end position a new text field. Done. You can simply copy these fields in a composer and create three or four or five paragraphs. This way you can quickly create a layout and even new employees can quickly learn and show them how effective content management works

    If you have any further questions about content management, content marketing, wordpress or workshops for the training of your employees, then give us a call. We have efficient and strong workshop concepts that we have tested many times in close cooperation with our customers and clients. You can also benefit from our experience and know-how as online entrepreneurs and consultants.

    • Download: Visual Composer

      But at this point again the explicit warning, use Composer only very focused for a handful of pages to not unnecessarily prolong the loading speed.

      [shortcode variables slug=”adsense”]