Close

Template Editor

From simple to complex, bring to life almost any element structure with the easy to use visual template editor.
Presets
Presets not only create unique nested structures in the template editor, they also add appropriate CSS classes to certain elements which help give them their own unique styling. When starting from a preset and modifying further, keep in mind the classes added to it’s elements. Without appropriate classes your preset modifications may turn out looking different than you expected.
Elements
You have the facility of creating new elements and containers in the template. Because of its ability to create sub containers, the visual template editor can help you achieve almost any cell layout as regular HTML input. But all this with the ease of working on the front end and applying your changes with the click of a button. You can set the content of the elements to be a mixture of regular text, meta keys (including pseudo metas) and HTML (depending on the element).
Meta key logic
You can use the meta key logic of any template element to decide whether it is hidden or displayed based on the values of a meta key of the member. As an example consider a twitter link field. You may want it to appear only if the twitter meta key of the customer has actually been set. You can set up this criteria easily in the element’s ‘Logic’ tab in the visual template editor. Let’s look at a more interesting example: the ribbons. You may set up multiple ribbons in your template, red for finance and blue for marketing, and then make the correct ribbon appear for the current post based on its {{category}} pseudo meta key. You can have entire containers disappear, appear based on meta key logic, thus causing significant alterations to your template based on the member’s meta key information. This topic is covered in more detail here.
Ease of use
The template editor can be dragged around the screen, and it can be scrolled up and down by using the mouse wheel. It’s elements can be contracted and expanded by simply double clicking them. Clicking the outer most element contracts the whole template at once. Among the settings tabs, the ‘Transfer’ field will help you get the export code of the current. Using the import code you can copy over onto the current element. Containers will also export and import along with all their nested elements.

Element Details

Let’s delve a little deeper into their nuances..
ToolTips
Any element inside a member template can turned into a tooltip simply by giving it a class of wmts_tooltip_contents. Classes can be assigned by going to the element’s ‘Class’ tab and writing the name of the classes, separated by spaces. Doing so will make that element disappear from the member’s cell and appear as a tooltip on hover. That member could even be a container with child elements of its own. The tooltip will clone and display it as well as its contents.
Attributes
These are as easy to setup as any other element, and the list can be extended by duplicating attributes. Attributes have four elements, any/all of which can be used: Label text, label icon, value text and value icon. You can use meta key logic in interesting ways to hide and show certain attributes based on their values. Also, remember to use the logic tab to set it up so that the attribute is hidden in case there is no value set. More on meta key logic here.
Ribbons
You may wish to setup multiple ribbons and ensure only the right one appears based on meta key logic. As with attributes, the logic needs to be setup to toggle display of the ribbon when appropriate. In the ‘Logic’ tab of the element, set it to be hidden in the beginning, and if the meta key of your choice meets your certain, have element visibility set to show.
Lightbox
Lightbox elements are like typical containers and can be filled with other elements and containers. The preset lightbox that of MTS is carefully setup with a combination of structure and classes that keep it responsive. To customize your lightbox content, add elements only to it’s ‘Text Container’, unless you are familiar with CSS and are capable of achieving a responsive setup of your own.