Creating custom templates in WYSIWYG

Creating responsive websites is easy these days with frameworks like Zurb’s Foundation and Bootstrap. However it may not be as easy for content editors to set up content responsively. Using the WYSIWYG API template plugin module, we can predefine templates in WYSIWYG, that helps editors to layout content in a mobile friendly website.

Creating custom templates in WYSIWYG

Install WYSIWYG API template plugin module

https://www.drupal.org/project/wysiwyg_template

Once you installed the module, enable the WYSIWYG Template button in your WYSIWYG editor. Be sure you enable the “Insert templates” button, not “Templates”.

Enabling WYSIWYG template button

Create template

Define your templates in /admin/config/content/wysiwyg-templates

 Create templates

Make use of the grid system provided from you framework. The following is an example of 3 columns bootstrap layout.

<div class="row">
<div class="col-md-4">Left</div>
<div class="col-md-4">Middle</div>
<div class="col-md-4">right</div>
</div>

Set up style in WYSIWYG

In order for your template to show up correctly in WYSIWYG, define the theme stylesheets in your WYSIWYG settings. You can add extra styling to enhance user experience for your editors.
%b%t/assets/stylesheets/screen.css, %b%t/assets/stylesheets/ckeditor.css
Define css in WYSIWYG

Responsive layout is now a click away

Template in WYSIWYG
 
Source code:
Source code

Tips

It is always a good idea to add a blank space at the end to separate your template with other elements. You can also use margins and paddings in the style as an alternative.
 

Comments

Think you could throw in some examples of the css you use?

Add new comment

(If you're a human, don't change the following field)
(If you're a human, don't change the following field)

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Each email address will be obfuscated in a human readable fashion or, if JavaScript is enabled, replaced with a spam resistent clickable link. Email addresses will get the default web form unless specified. If replacement text (a persons name) is required a webform is also required. Separate each part with the "|" pipe symbol. Replace spaces in names with "_".
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.