go to content
Logo, go to homepage
  • Search
    • - barrierefrei
  • THIS Template
  • Example
  • SubPages
    • - Level 1
      • -- Level 2
        • Level 3
          • Level 4
    • - responsive FG
      • -- Standard
      • -- MixedWidth
      • -- MixedHeight
      • -- 2 Abschnitte
      • -- Viele Folder
      • -- rFG + GlobalComments
      • -- rfgfolder
    • - Teasers
      • -- Teasers2
      • -- Teasers + Font Awesome
    • - Testzone
      • -- Ziehharmomika
      • -- MiniGallery2
      • -- proCalendar AJAX
      • -- NWI
      • -- BlockRocker
      • -- TwoClickContent
      • -- MiniCompare
    • - Diverse Module
    • - Problemstellen
      • -- Ein ziemlich langer Menüpunkt
      • -- Bild
      • -- Responsive Table
    • - Wunderblock
      • -- section-picker-n
    • - znip Merkzettel
    • - Bastelecke
  • Itemz
    • - About
    • - Functional
      • -- Team
      • -- Stundenplan
      • -- Menu Card w. Pictures
      • -- TimeLine
      • -- PDF-Gallery
      • -- PDF-Gallery2
      • -- Simple Audio Player
      • -- YouTube Videos
    • - Gallery, Sliders
      • -- Nivo Slider
      • -- Vegas-Background Slider
      • -- Owl Carousel
      • -- Fotorama
      • -- Coverflow
      • -- Contentflow
      • -- Slider+Teaser
    • - Mostly harmless
      • -- Awesome Bemmerl
    • - Carousel Varianten
    • - Itemz-Teaserboxen
    • - infinite scroll animation
  • Search

Modul Wunderblock

Ein ganzheitliches Modul für Anfänger und Profis ;-)

Wunderblock macht etwas scheinbar Einfaches: Ein Textblock, daneben (links/rechts/oben/unten) ein weiterer Block, der alles Mögliche enthalten kann: Bild, Video, ein anderes Modul, ein weiterer WYSIWYG-Text. Und das alles Out-of-the-box responsive, auf Wunsch mit Effekten garniert. 

Für Anfänger gibt es simple Auswahllisten, Profis können ihre CSS-Künste zeigen und auf nahezu alles zugreifen.

Status

Das Modul wird hier getestet und (meist) entwickelt. Derzeit werden noch Notices beseitigt, CSS bereinigt und erweitert.

Das ist auch der Grund, warum die Boxen hier eingefärbt sind: Um Probleme zu erkennen.

Hier ein Test-Link

Um Bilder einfach hochzuladen, wird das Modul GlobalUpload vorausgesetzt. Ist GUP nicht vorhanden oder sollen bereits woanders vorhandene Bilder verwendet werden, können Bild-URLs von Hand angegeben werden. 

Bei Videos wird einfach der Embed-Code eingesetzt, das Video ist automatisch responsive.

Hier noch ein Test-Link

Spielereien für Experimentierfreudige

Text rechts, Bild links. Dazu die Einstellung "rundes Bild". OK, passt nicht immer, aber manchmal. 

Effekte wie eben "rundes Bild" können direkt im Frontend eingestellt werden - da sieht man gleich, was man bekommt.
Natürlich macht nicht jede Kombination Sinn oder zeigt im aktuellen Fall keine Auswirkung. Aber das sieht man ja.

Video (mp4) von eigenen Server

Your browser does not support the video element.

 

Video - oben/unten/links/rechts

Statt dem Bild kann ein Video angegeben werden - einfach den von Youtube oder Vimeo angebotenen embed-Code. Wunderblock macht es automatisch responsive.

Für Feinspitze

Für Kundige gibt es die Felder "data/style", die zu jedem der 4 Hauptelemente zusätzlichen Code aufnehmen können.
zb etwas wie:
style="background:#a6e7e0;" data-aos="fade-up-right" data-aos-duration="1521"
(Auf die Anführungszeichen aufpassen!)

Damit geht dann praktisch alles.

Und geht da noch mehr?

Ja klar! Die 2-Teilung ist zb nicht in Stein gemeißelt. Da geht auch 2:1 oder 3:1.

Allerdings gehen dann nicht mehr alle zusätzlichen Einstellungen. EInfach ausprobieren.

 

Ja, die Headline

Die kann auch als 3. Block stehen.

Hier kommt man aber schon etwas an die Grenzen: Die Frage, ob man 300 Schalter für alles braucht.
Letztlich ist jedes Element per CSS greifbar, wodurch sich dann jede Variante umsetzen lässt.

Dank HTML geht fast alles

Google Maps? Sonstwas? Alles was mit HTML geht, geht auch im Wunderblock.

Top
K
:
:
 
| Registrierung
This is the footer
Based on design by Grafik in Wien