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

[pl_codebox]

Spalte 1

Spalte 2

[/pl_codebox]

Modals

[pl_codebox][pl_modal title="Title" type="btn" colortype="info" label="Click Me!"]Some content[/pl_modal][/pl_codebox]

Tooltips

[pl_codebox][pl_tooltip tip="Your text" position="right"]content[/pl_tooltip][/pl_codebox]

Popover

[pl_codebox] [pl_popover title="Title" content="Lorem ipsum" position="right"]popover[/pl_popover] [/pl_codebox]

Codebox

[pl_codebox] Shortcode: pl_codebox in [brackets] [/pl_codebox]

Labels & Badges

[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)

[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_codebox] [pl_button type="primary" link="" size="large" target="blank"]Primary [/pl_button] [/pl_codebox]

Liste mit Font Awesome Icons

[pl_codebox]

• Lists

… [/pl_codebox]

Input Fields/Forms

[pl_codebox]

[/pl_codebox]

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

[pl_codebox] [/pl_codebox]

Example Box

[pl_codebox] [/pl_codebox]

Font Awesome Icons

[pl_codebox] [i]icon-adjust[/i] icon-adjust [/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]]]>