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]
[/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]
…
[/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
[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]]]>