Pagelines Shortcodes

Textformatierungen

Der Editor im WordPress CMS bietet einige wichtige Optionen zur Strukturierung von Text:

Fett (B)

Diese Schaltfläche erzeugt ein <strong>-Tag und stellt den markierten Text fett dar. Dazu mit der Maus den Textabschnitt markieren oder den Cursor auf das zu formatierende Wort setzen. Je Textasbschnitt (Paragraph) sollte nur maximal ein Wort auf diese Weise hervorgehoben werden.

Kursiv (I)

Diese Schaltfläche erzeugt ein <em>-Tag und stellt den markierten Text kursiv dar.

Strikethrough (ABC)

Diese Schaltfläche erzeugt ein <del>-Tag und stellt den markierten Text durchgestrichen dar. Zu verwenden bei Texten, die durch Änderungen ergänzt/ersetzt werden, aber noch in der Ursprungsversion vorhanden bleiben sollen.

Tabellen

Grundsätzlich sollten Tabellen nur verwendet werden, wenn tabellarische Daten dargestellt werden müssen z.B. eine vergleichende Featureliste oder numerische Daten. In 80% der Fälle, in denen man zuerst meint eine Tabelle verwenden zu „müssen“, erfordern keine Tabelle sondern eine saubere Strukturierung in Überschrift und Abschnitt. Tabellen werden mit Hilfe des Plugins Websimon Tables unter Werkzeuge erstellt und über einen Shortcode eingebunden.
[pl_codebox]
Spalte 1 Spalte 2
[/pl_codebox]

Modals

Ein Modal ist ein Pop-up Overlay, das durch einen Button, ein Badge oder Label ausgelöst werden kann. [pl_modal title="Title" type="btn" colortype="info" label="Click Me!"] Some content here for the cool modal pop up. Labels, badges, and buttons can open them![/pl_modal]
[pl_codebox][pl_modal title="Title" type="btn" colortype="info" label="Click Me!"]Some content[/pl_modal][/pl_codebox]

Tooltips

This is a [pl_tooltip tip="Cool" position="right"]tooltip [/pl_tooltip] example.
[pl_codebox][pl_tooltip tip="Your text" position="right"]content[/pl_tooltip][/pl_codebox]

Popover

This is a [pl_popover title="Title" content="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem." position="right"]popover[/pl_popover] example.
[pl_codebox] [pl_popover title="Title" content="Lorem ipsum" position="right"]popover[/pl_popover] [/pl_codebox]

Codebox

[pl_codebox]

Hello World!

Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!
[/pl_codebox]
[pl_codebox] Shortcode: pl_codebox in [brackets] [/pl_codebox]

Labels & Badges

Folgende Labels und Badges sind zu verwenden, um zu kennzeichnen, für welche Edition von XQ:CAMPAIGN der Inhalt Gültigkeit hat, bzw. welche Benutzerrolle mindestens erforderlich ist, um die beschriebenen Inhalte oder Funktionen sehen und nutzen zu können: Administrator Standard Edition XQ:MAILEON XQ:CAMPAIGN
[pl_codebox] Administrator oder [pl_badge type="infos"]Administrator[/pl_badge] Standard Edition oder [pl_label type="product"]Standard Edition[/pl_label] XQ:MAILEON oder [pl_label type="success"]XQ:MAILEON[/pl_label] XQ:CAMPAIGN oder [pl_label type="info"]XQ:CAMPAIGN[/pl_label] [/pl_codebox]

Textabschnitte in Boxen (Hervorhebung)

Infos und Tipps, Warnhinweise und Entwarnungen werden in farbigen Boxen hervorgehoben.

Ergänzende Informationen & Tipps.

Wichtige Hinweise.

Warnungen

Aufgehobene Warnungen oder Bestätigung erfolgreicher Benutzeraktion.

[pl_codebox] Die entsprechenden Klassennamen werden entweder im p-Tag verwendet (p class=“Klassenname“) oder im Shortcode pl_alertbox type=“Klassenname“. Zeilenumbrüche beenden das p-Tag, um längere Texte mit Zeilenumbrüchen in einer Box darzustellen, ist der Shortcode zu verwenden.

info

alert

warning

success

[/pl_codebox]

Button mit Font Awesome Icon

[pl_button type="primary" link="" size="large" target="blank"]Primary [/pl_button]
[pl_codebox] [pl_button type="primary" link="" size="large" target="blank"]Primary [/pl_button] [/pl_codebox]

Liste mit Font Awesome Icons

  • Lists
  • Buttons
  • Button groups
  • Navigation
  • Prepended form inputs
[pl_codebox]
  • Lists
… [/pl_codebox]

Input Fields/Forms

[pl_codebox]
[/pl_codebox]

Accordion

[pl_accordion name="accordion"] [pl_accordioncontent name="accordion" number="1" heading="Titel 1" open="yes"]Content 1[/pl_accordioncontent][pl_accordioncontent name="accordion" number="2" heading="Titel 2"]Content 2[/pl_accordioncontent] [/pl_accordion]
[pl_codebox] [pl_accordion name="accordion"] [pl_accordioncontent name="accordion" number="1" heading="Titel 1" open="yes"]Content 1[/pl_accordioncontent][pl_accordioncontent name="accordion" number="2" heading="Titel 2"]Content 2[/pl_accordioncontent] [/pl_accordion] [/pl_codebox]

Tabs

Inhalt Tab 1
Inhalt Tab 2
[pl_codebox]
Inhalt Tab 1
Inhalt Tab 2
[/pl_codebox]

Example Box

Das ist ein Beispieltext! in h1

Das ist ein Beispieltext! in h2

[pl_codebox]
Your example
[/pl_codebox]

Font Awesome Icons

[pl_codebox] [i]icon-adjust[/i] icon-adjust [/pl_codebox]
Icon i-tag Shortcode
[pl_codebox][/pl_codebox] [pl_codebox][i]icon-adjust[/i][/pl_codebox]
[pl_codebox][/pl_codebox] [pl_codebox][i]icon-anchor[/i][/pl_codebox]
[pl_codebox][/pl_codebox] [pl_codebox][i]icon-archive[/i][/pl_codebox]
[pl_codebox][/pl_codebox] [pl_codebox][i]icon-asterisk[/i][/pl_codebox]
[pl_codebox][/pl_codebox] [pl_codebox][i]icon-ban-circle[/i][/pl_codebox]
[pl_codebox][/pl_codebox] [pl_codebox][i]icon-bar-chart[/i][/pl_codebox]
[pl_codebox][/pl_codebox] [pl_codebox][i]icon-barcode[/i][/pl_codebox]
[pl_codebox][/pl_codebox] [pl_codebox][i]icon-beaker[/i][/pl_codebox]
[pl_codebox][/pl_codebox] [pl_codebox][i]icon-beer[/i][/pl_codebox]
[pl_codebox][/pl_codebox] [pl_codebox][i]icon-bell[/i][/pl_codebox]
[pl_codebox][/pl_codebox] [pl_codebox][i]icon-bell-alt[/i][/pl_codebox]
[pl_codebox][/pl_codebox] [pl_codebox][i]icon-bolt[/i][/pl_codebox]
[pl_codebox][/pl_codebox] [pl_codebox][i]icon-book[/i][/pl_codebox]
[pl_codebox][/pl_codebox] [pl_codebox][i]icon-bookmark[/i][/pl_codebox]
[pl_codebox][/pl_codebox] [pl_codebox][i]icon-bookmark-empty[/i][/pl_codebox]
[pl_codebox][/pl_codebox] [pl_codebox][i]icon-bug[/i][/pl_codebox]
[pl_codebox][/pl_codebox] [pl_codebox][i]icon-building[/i][/pl_codebox]
[pl_codebox][/pl_codebox] [pl_codebox][i]icon-bullhorn[/i][/pl_codebox]

Accordions

Basic accordion

[accordion] [spoiler title="Spoiler title"] Spoiler content [/spoiler] [spoiler title="Spoiler title"] Spoiler content [/spoiler] [spoiler title="Spoiler title"] Spoiler content [/spoiler] [/accordion]

Fancy accordion

[accordion] [spoiler title="Spoiler title" style="fancy"] Spoiler content [/spoiler] [spoiler title="Spoiler title" style="fancy"] Spoiler content [/spoiler] [spoiler title="Spoiler title" style="fancy"] Spoiler content [/spoiler] [/accordion]

Accordion with open spoiler

[accordion] [spoiler title="Spoiler title" open="yes"] Spoiler content [/spoiler] [spoiler title="Spoiler title"] Spoiler content [/spoiler] [spoiler title="Spoiler title"] Spoiler content [/spoiler] [/accordion]

Different spoiler styles

[spoiler title="Spoiler title" style="default"] Spoiler content [/spoiler] [spoiler title="Spoiler title" style="fancy"] Spoiler content [/spoiler] [spoiler title="Spoiler title" style="simple"] Spoiler content [/spoiler]

Open spoilers

[spoiler title="Spoiler title" style="default" open="yes"] Spoiler content [/spoiler] [spoiler title="Spoiler title" style="fancy" open="yes"] Spoiler content [/spoiler] [spoiler title="Spoiler title" style="simple" open="yes"] Spoiler content [/spoiler]

Spoilers with anchors (see the code)

[spoiler title="Spoiler title" anchor="Spoiler-1"] Spoiler content [/spoiler] [spoiler title="Spoiler title" anchor="Spoiler-2"] Spoiler content [/spoiler] [spoiler title="Spoiler title" anchor="Spoiler-3"] Spoiler content [/spoiler] Use next links to open this spoilers Open spoiler 1 | Open spoiler 2 | Open spoiler 3

Accordion + Spoilers + Anchors (see the code)

[accordion] [spoiler title="Spoiler title" anchor="Accordion-1"] Spoiler content [/spoiler] [spoiler title="Spoiler title" anchor="Accordion-2"] Spoiler content [/spoiler] [spoiler title="Spoiler title" anchor="Accordion-3"] Spoiler content [/spoiler] [/accordion] Use next links to expand accordion items Open spoiler 1 | Open spoiler 2 | Open spoiler 3

Different icons

[accordion] [spoiler title="plus" icon="plus"] Spoiler content [/spoiler] [spoiler title="plus-circle" icon="plus-circle"] Spoiler content [/spoiler] [spoiler title="plus-square-1" icon="plus-square-1"] Spoiler content [/spoiler] [spoiler title="plus-square-2" icon="plus-square-2"] Spoiler content [/spoiler] [spoiler title="arrow" icon="arrow"] Spoiler content [/spoiler] [spoiler title="arrow-circle-1" icon="arrow-circle-1"] Spoiler content [/spoiler] [spoiler title="arrow-circle-2" icon="arrow-circle-2"] Spoiler content [/spoiler] [spoiler title="caret" icon="caret"] Spoiler content [/spoiler] [spoiler title="caret-square" icon="caret-square"] Spoiler content [/spoiler] [spoiler title="folder-1" icon="folder-1"] Spoiler content [/spoiler] [spoiler title="folder-2" icon="folder-2"] Spoiler content [/spoiler] [/accordion]

Custom styles

[spoiler title="Spoiler title" class="my-custom-spoiler"] Spoiler content [/spoiler]

Tabs/h1>

Default tabs

[tabs] [tab title="Tab 1"] Tab 1 content [/tab] [tab title="Tab 2"] Tab 2 content [/tab] [tab title="Tab 3"] Tab 3 content [/tab] [/tabs]

Custom active tab

[tabs active="2"] [tab title="Tab 1"] Tab 1 content [/tab] [tab title="Tab 2"] Tab 2 content [/tab] [tab title="Tab 3"] Tab 3 content [/tab] [/tabs]

Vertical tabs

[tabs vertical="yes"] [tab title="Tab 1"] Tab 1 content [/tab] [tab title="Tab 2"] Tab 2 content [/tab] [tab title="Tab 3"] Tab 3 content [/tab] [/tabs]

Disabled tabs

[tabs] [tab title="Tab 1"] Tab 1 content [/tab] [tab title="Tab 2"] Tab 2 content [/tab] [tab title="Tab 3"] Tab 3 content [/tab] [tab title="Tab 4 (disabled)" disabled="yes"] Tab 4 content [/tab] [tab title="Tab 5 (disabled)" disabled="yes"] Tab 5 content [/tab] [/tabs]

Tabs anchors

[tabs] [tab title="Tab 1" anchor="First"] Tab 1 content [/tab] [tab title="Tab 2" anchor="Second"] Tab 2 content [/tab] [tab title="Tab 3" anchor="Third"] Tab 3 content [/tab] [/tabs] Use next links to switch this tabs Open tab 1 | Open tab 2 | Open tab 3

Custom styles

[tabs class="my-custom-tabs"] [tab title="Tab 1"] Tab 1 content [/tab] [tab title="Tab 2"] Tab 2 content [/tab] [tab title="Tab 3"] Tab 3 content [/tab] [/tabs]

Columns Layouts

Full-width column

[row] [column size="1/1"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. is quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet. [/column] [/row]

1/2 + 1/2

[row] [column size="1/2"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. is quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet. [/column] [column size="1/2"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. is quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet. [/column] [/row]

1/3 + 1/3 + 1/3

[row] [column size="1/3"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. is quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet. [/column] [column size="1/3"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. is quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet. [/column] [column size="1/3"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. is quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet. [/column] [/row]

1/2 + 1/4 + 1/4

[row] [column size="1/2"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. is quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet. [/column] [column size="1/4"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. is quam nibh, euismod eget nulla a, tempor scelerisque lorem. [/column] [column size="1/4"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. is quam nibh, euismod eget nulla a, tempor scelerisque lorem. [/column] [/row]

3/4 + 1/4

[row] [column size="3/4"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. is quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit. [/column] [column size="1/4"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. [/column] [/row]

1/5 + 4/5

[row] [column size="1/5"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. [/column] [column size="4/5"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. is quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet. [/column] [/row]

2/5 + 3/5

[row] [column size="2/5"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. is quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique. [/column] [column size="3/5"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. is quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet. [/column] [/row]

2/3 + 1/6 + 1/6

[row] [column size="2/3"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. is quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet. [/column] [column size="1/6"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. [/column] [column size="1/6"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. [/column] [/row]

Buttons

Unlimited sizes

[button size="1"] Click me [/button] [button size="2"] Click me [/button] [button size="3"] Click me [/button] [button size="4"] Click me [/button] [button size="5"] Click me [/button] [button size="6"] Click me [/button] [button size="7"] Click me [/button] [button size="8"] Click me [/button] [button size="9"] Click me [/button] [button size="10"] Click me [/button] [button size="32"] Unlimited sizes! [/button]

Unlimited colors

[button background="#2D89EF"] Click me [/button] [button background="#9E2DEF"] Click me [/button] [button background="#F72EBA"] Click me [/button] [button background="#FF2F3B"] Click me [/button] [button background="#FF742F"] Click me [/button] [button background="#FFA52F"] Click me [/button] [button background="#FFCF2F"] Click me [/button] [button background="#FFF92F"] Click me [/button] [button background="#C5ED2C"] Click me [/button] [button background="#3AD828"] Click me [/button] [button background="#27CBD5"] Click me [/button] [button background="#000000"] Click me [/button] [button background="#eee" color="#2D89EF"] Click me [/button] [button background="#eee" color="#9E2DEF"] Click me [/button] [button background="#eee" color="#F72EBA"] Click me [/button] [button background="#eee" color="#FF2F3B"] Click me [/button] [button background="#eee" color="#FF742F"] Click me [/button] [button background="#eee" color="#FFA52F"] Click me [/button] [button background="#eee" color="#FFCF2F"] Click me [/button] [button background="#eee" color="#FFF92F"] Click me [/button] [button background="#eee" color="#C5ED2C"] Click me [/button] [button background="#eee" color="#3AD828"] Click me [/button] [button background="#eee" color="#27CBD5"] Click me [/button] [button background="#eee" color="#000000"] Click me [/button]

Different background styles

[button style="default"] Click me [/button] [button style="flat"] Click me [/button] [button style="glass"] Click me [/button] [button style="noise"] Click me [/button] [button style="bubbles"] Click me [/button] [button style="soft"] Click me [/button] [button style="stroked"] Click me [/button] [button style="3d"] Click me [/button]

Customizable border radius

[button radius="square"] Click me [/button] [button radius="auto"] Click me [/button] [button radius="10"] Click me [/button] [button radius="round"] Click me [/button]

Built-in icon font

List of built-in icons [button icon="icon: check"] Click me [/button] [button icon="icon: arrow-right"] Click me [/button] [button icon="icon: shopping-cart"] Click me [/button] [button icon="icon: cogs" color="#000000" icon_color="#000000"] Click me [/button] [button icon="icon: comments" color="#000000" icon_color="#000000"] Click me [/button] [button icon="icon: cloud-download" color="#000000" icon_color="#000000"] Click me [/button]

Interacting with posts

List of 5 most popular posts (by comments number)

[posts template="templates/list-loop.php" posts_per_page="5" orderby="comment_count"]

Most recent posts as a teasers

[posts template="templates/teaser-loop.php" orderby="modified"]

Recent uploaded media file

[posts template="templates/single-post.php" post_type="attachment" post_status="any"]

Heading

[heading]Heading[/heading]

Divider

[divider]

Pullquote

[pullquote]Lorem ipsum[/pullquote]

List

[list icon="icon: star"]
  • List item
  • List item
  • List item
[/list]

Lightbox

[lightbox src="http://www.xqueue.de"][button] Click Here to see xqueue.de [/button][/lightbox]

Vimeo

[lightbox]

Permalink

[permalink id="400"]Permalink[/permalink]

Subpages

[subpages p="657"]

Carousel

[subpages]

Animated

Different animation types

[animate type="bounceIn" delay="1"] [note] Animated text [/note] [/animate] [animate type="flipInX" delay="2"] [note] Animated text [/note] [/animate] [animate type="flipInY" delay="3"] [note] Animated text [/note] [/animate] [animate type="fadeInDown" delay="4"] [note] Animated text [/note] [/animate] [animate type="fadeInLeft" delay="5"] [note] Animated text [/note] [/animate] [animate type="fadeInRight" delay="6"] [note] Animated text [/note] [/animate] [animate type="fadeInUp" delay="7"] [note] Animated text [/note] [/animate]

Animated columns

[row] [column size="1/2"] [animate type="fadeInLeft" delay="1" duration="1.5"] [box] Column content [/box] [/animate] [/column] [column size="1/2"] [animate type="fadeInRight" delay="1" duration="1.5"] [box] Column content [/box] [/animate] [/column] [/row]

Animated buttons

[animate delay="1" inline="yes"] [button] Click me [/button] [/animate] [animate delay="2" inline="yes"] [button] Click me [/button] [/animate] [animate delay="3" inline="yes"] [button] Click me [/button] [/animate]

Animated tabs

[tabs] [tab title="Tab title"] [animate type="fadeInUp"] Tab content [/animate] [/tab] [tab title="Tab title"] [animate type="fadeInUp"] Tab content [/animate] [/tab] [tab title="Tab title"] [animate type="fadeInUp"] Tab content [/animate] [/tab] [/tabs]

Tooltips

Hover [tooltip style="blue" rounded="yes" title="Tooltip" content="This is a tooltip to help you." close="yes"]me[/tooltip] to open tooltip.

Content visible for members

[members]Content for logged members[/members]]]>

English EN Deutsch DE