Visual Content Layout - A very friendly way for creating content layouts in Drupal

alarez's picture

Visual Content Layout is a Drupal 8 Module developed to manage text filters HTML content layout and visual elements like iconography, accordions, tabs, non table columns, images, videos, list, CTA’s, etc.

The HTML output of module is based on Bootstrap components and grid system.


  1. Open pre-configured sandbox on
  2. Click Launch sandbox and wait.
  3. Click Log in (email and password should be pre-filled).
  4. Go to /admin/modules and install both Swaps and Visual Content Layout modules.
  5. Go to /admin/config/content/formats and add a new text format. We recommend you name it VCL. Then check the "Visual Content Layout" checkbox
    to activate the plugin.
  6. IMPORTANT: Make sure you select "None" on the Text editor select box.

And as simple as that you have the module working on any
text area field.

How to use it

Now once you are creating content you should select the VCL text format from the Text Format selection field.
Then you need to click on "Enable Visual Content Layout".
From there just hit the + sign to start adding elements or SWAPS as we call it.
You can then drag and drop to move the SWAPS around.



alarez's picture

Here is a gif showing how it works