Shortcode-Ultimate

Spoiler-Shortcode

Accordion

Wenn der Spoiler geöffnet sein soll, dann
open=“yes“
dem Code hinzufügen

Falls mehrere Spoiler hinzugefügt werden sollen, dann nur mehrmals einfügen.

Spoiler – Titel anpassen

im Code des Spoilers hinzufügen
class="my-custom-spoiler"

Schwebezustand [Farben anpassen]

bei Shortcodes / Einstellungen / individuelles CSS einfügen

.su-spoiler.my-custom-spoiler > .su-spoiler-title:hover {

/* Text Size */
font-size: 21px;

/* Background Color */
background: #ff00ff;

/* Text Color */
color: #ffffff;

}

Spoiler-Symbol
.su-spoiler.my-custom-spoiler > .su-spoiler-title > .su-spoiler-icon {

/* Icon Color */
color: #00ff00;

}

Spoiler-Inhalt

.su-spoiler.my-custom-spoiler > .su-spoiler-content {

/* Text Size */
font-size: 21px;

/* Background Color */
background: #ffff00;

/* Text Color */
color: #000000;

}

Content-Slider-Shortcode

Content Slider

Den Slidern nur den Text ändern
[su_content_slider] [su_content_slide] [su_panel]Ich bin Slider eins mit dem Text[/su_panel] [/su_content_slide] [su_content_slide] [su_panel]Ich bin Slider zwei mit dem Text Teil 2[/su_panel] [/su_content_slide] [su_content_slide] [su_panel]Ich bin Slider drei mit dem Text Teil 3[/su_panel] [/su_content_slide] [/su_content_slider]

Tool-Tip - Shortcode

Tooltip

Bewegen Sie den Mauszeiger über mich, um den Tooltip zu öffnen

Symbole / Icon - Shortcode

Icon

[su_icon icon=“icon: star“ background=“#eeeeee“ color=“#F73F43″ text_color=“#F73F43″ size=“32″ shape_size=“16″ radius=“256″ text_size=“16″ url=“ #“ target=“self“ margin=“0″] Dies ist ein benutzerdefiniertes Symbol [/su_icon] [su_icon icon=“icon: angle-double-down“ background=“#31a8e6″ color=“#ffffff“ text_color=“#31a8e6″ shape_size=“4″ radius=“8″ url=“#“ target=“self “ margin=“0″]Archive.zip herunterladen [5 MB][/su_icon] [su_icon icon=“icon: phone“ background=“#0fe2b8″ color=“#FFFBB2″ text_color=“#0fe2b8″ size=“20″ shape_size=“10″ radius=“0″ url=“#“ target=“ self“ margin=“0″]Benötigen Sie Unterstützung? Rufen Sie uns an![/su_icon]

Paneel nebeneinander-Shortcode

Panel

[su_panel]Inhalt Teil Eins[/su_panel]
[su_panel]Teil Zwei-Inhalt[/su_panel]
[su_panel]Der Dritte Inhalt[/su_panel]

Paneel mit Grafik-Shortcode

Icon panel

[su_icon_panel icon=“icon: star“ icon_size=“20″ icon_color=“#31a8e6″]Panel-Inhalt[/su_icon_panel]
[su_icon_panel icon=“icon: cog“ icon_size=“20″ icon_color=“#ff5e3a“]Panel-Inhalt[/su_icon_panel]
[su_icon_panel icon=“icon: flask“ icon_size=“20″ icon_color=“#0fe2b8″]Panel-Inhalt[/su_icon_panel]

Text mit Symbol / Icon -Shortcode

Text with icon

[su_icon_text icon=“icon: star“ url=“#“]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin varius nibh leo, sit amet mollis sem gravida vitae. Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/su_icon_text]

color=“#eeeeee“
icon_color=“#eeeeee“
icon_size=“von 10 bis 320″
icon=“icon: star“ – Star ändern z.B. heart

Fortschrittsbalken-Shortcode

Progress Bar

[su_progress_bar style=“fancy“ percent=“40″ text=“Photoshop“ bar_color=“#ffffff“ fill_color=“#f01c3c“ text_color=“#000000″] [su_progress_bar style=“fancy“ percent=“60″ text=“PHP“ bar_color=“#ffffff“ fill_color=“#f01c3c“ text_color=“#000000″] [su_progress_bar style=“fancy“ percent=“80″ text=“WordPress“ bar_color=“#ffffff“ fill_color=“#f01c3c“ text_color=“#000000″] style=““ – default (Default), fancy (Fancy), thin (Thin)
bar_color=“#eeeeee“
text_color=“#eeeeee“

Fortschrittsbalken Teil 2 - Shortcode

Progress Pie


[su_progress_pie percent=“75″ after=“%“ size=“20″ pie_color=“#b9e092″ fill_color=“#4dd100″ text_color=“#4dd100″ align=“center“]

[su_progress_pie percent=“63″ text=“9″ before=“$“ size=“20″ pie_width=“8″ text_size=“80″ pie_color=“#e0f3f8″ fill_color=“#e3004e“ text_color=“#e3004e“ align=“center“]

[su_progress_pie prozent=“77″ text=“Hallo!“ size=“20″ pie_width=“35″ text_size=“21″ pie_color=“#f1f1f1″ fill_color=“#0097fc“ text_color=“#0097fc“ align=“center“]


Parallax-Shortcode

Parallax section

[su_section image=“https://getshortcodes.com/wp-content/uploads/2017/08/section-bg.jpg“ border=“none“ text_align=“center“]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt elit et eros commodo, laoreet iaculis risus lobortis. Ut eget cursus nisi. Maecenas egestas, nunc gravida rutrum porttitor, ante ligula luctus erat, non vehicula massa mauris et ante. Mauris a vulputate sapien. Aenean sagittis tellus vitae mi viverra, sed venenatis nibh fringilla. Suspendisse vel suscipit elit, vel ultricies sem. Suspendisse elementum risus ut efficitur feugiat.[/su_section] background=“#eeeeee“
background_position=““ – left top (Left Top), center top (Center Top), right top (Right Top), left center (Left Center), center center (Center Center), right center (Right Center), left bottom (Left Bottom), center bottom (Center Bottom), right bottom (Right Bottom)
fullwidth=““ Yes oder No
parallax=““ Yes oder No
border=“1px solid #cccccc“

Zitat mit Name & Bild-Shortcode

Testimonial

[su_testimonial name=“silral“ photo=“https://getshortcodes.com/wp-content/uploads/2017/08/person-3-square.jpg“ company=“Dynamofanseite“ url=“https://dynamofanseite.de“ border =“yes“ target=“self“]Dies ist mal ein Zitat aus meinem Mund, welches hier angezeigt wird. Das kann man natürlich beliebig lang gestalten.[/su_testimonial]

Zitat mit Link - Shortcode

Quote

Alles sollte so einfach wie möglich gemacht werden, aber nicht einfacher…​Albert Einstein

Schatten-Shortcode

Shadow

[su_shadow]
Dies ist der Box-Titel
Dies ist ein Beispieltext, der beliebig erweitert werden kann.
[/su_shadow] [su_shadow style=“vertical“][su_icon_panel icon=“icon: cog“ icon_size=“20″ icon_color=“#ff5e3a“]Hier der Inhalt[/su_icon_panel][/su_shadow]

Lightbox-Shortcode

Lightbox

Klicken Sie hier, um die Lightbox mit einem Bild zu öffnen

Description

Shortcodes su_lightbox and su_lightbox_content are used to display various elements in a pop-up window. You can display an image, a web page, or any HTML content.

Options

There are two main parameters defining the functioning of lightbox,  type and src.

type parameter specifies the contents type and can have the following values:

  • image – for images;
  • iframe – for display of web pages in the lightbox window;
  • inline – for display of any HTML content.

src parameter defines the contents. This parameter may have the following values:

  • URL – for display of images or web pages in the lightbox window. Examples: http://example.com/image.jpg (image), http://example.com (web page);
  • CSS selector – for display of any HTML contents. Example: #contact-form.

YouTube Video einbetten - Shortcode

YouTube

Normales Video


Google-Maps - Shortcode

Google Maps


Pull-Quote - Shortcode

Pullquote

Ich bin das Zitat.
Und das hier ist ein Beispieltext, welcher beliebig erweitert werden kann. Ich bin Dynamo Fan! Du kannst dich über mich lustig machen, mich foltern oder mich umbringen. Aber ändern kannst du es nicht! Wir haben einen Traum (auch wenn er nicht gleich wahr wird) Aber! Einmal Dynamo – immer Dynamo, Vier Punkte Abzug – Na, und?

Notiz / Text mit farblichen Hintergrund - Shortcode

Note

Integer cursus orci bibendum sem mollis, et bibendum diam sodales. Pellentesque eu suscipit magna, sed faucibus sem. Maecenas lacinia nulla vel risus molestie, in bibendum turpis congue.

Text erweitern beim Mouseklick - Shortcode

Expand

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pharetra scelerisque urna, non posuere urna fringilla vel. Sed lorem lacus, Lobortis a risus sed, Gravida sodales mauris.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Mehr anzeigen
Weniger anzeigen

Tabs Drei Beispiele - Shortcode

Tabs

Tab-NameTab-NameTab-Name
Tab-Inhalt
Tab-Inhalt
Tab-Inhalt

Tab-NameTab-NameTab-Name
Tab-Inhalt
Tab-Inhalt
Tab-Inhalt

Tab-NameTab-NameTab-Name
Tab-Inhalt
Tab-Inhalt
Tab-Inhalt

RSS Feed - Shortcode

RSS Feed

Neueste Beiträge von smashingmagazine.com


CSV Tabelle - Shortcode

CSV Table

Die ist nur zum Veranschauen


  1. Viele weitere Shortcodes sind hier zu finden
  2. Shortcodes (z.B. Spoiler die Farben) ändern/anpassen
  3. Shortcodes (z. B. Tabs Farben) ändern/anpassen