https://getshortcodes.com/docs/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;
}
https://getshortcodes.com/docs/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]
https://getshortcodes.com/docs/tooltip/
Bewegen Sie den Mauszeiger über mich, um den Tooltip zu öffnen Tooltip-TitelIch bin der Tooltip-Inhalt
https://getshortcodes.com/docs/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]https://getshortcodes.com/docs/panel/
https://getshortcodes.com/docs/icon-panel/
https://getshortcodes.com/docs/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
https://getshortcodes.com/docs/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“
https://getshortcodes.com/docs/progress-pie/
https://getshortcodes.com/docs/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“
https://getshortcodes.com/docs/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]https://getshortcodes.com/docs/quote/
https://getshortcodes.com/docs/shadow/
[su_shadow]https://getshortcodes.com/docs/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
.
https://getshortcodes.com/docs/youtube/
Normales Video
https://getshortcodes.com/docs/google-maps/
https://getshortcodes.com/docs/pullquote/
https://getshortcodes.com/docs/note/
https://getshortcodes.com/docs/expand/
https://getshortcodes.com/docs/tabs/
https://getshortcodes.com/docs/rss-feed/
Neueste Beiträge von smashingmagazine.com
- How To Create A Weekly Google Analytics Report That Posts To Slack
- Sticky Headers And Full-Height Elements: A Tricky Combination
- The Big Difference Between Digital Product And Web Design
https://getshortcodes.com/docs/csv-table/
Die ist nur zum Veranschauen
- Viele weitere Shortcodes sind hier zu finden
- Shortcodes (z.B. Spoiler die Farben) ändern/anpassen
- Shortcodes (z. B. Tabs Farben) ändern/anpassen