Flex Für Mehrspalter: Pimp-MY-NEOS

Neos liefert im Standard 2-, 3- und 4-Spalten-Elemente mit aus, die in nahezu jeder Neos-Installation verwendet werden und ein wichtiger Bestandteil für die Content-Stukturierung sind. Wir haben die sog. ColumnLayouts jetzt mit CSS-Flex-Optionen ausgestattet, die sie - wie der Name schon sagt - unheimlich flexibel machen.
 

Was ist "Flex"?

"Flex" oder "Flexbox" ist ein Standard, der ziemlich lückenlos von allen Browsern unterstützt wird. Dabei geht es darum, die Anordnung von Layout-Containern in einem Web-Layout zu standardisieren und mit vielen Optionen auszustatten.

CSS sieht im Grunde vor, dass Container einfach nebeneinander angeordnet werden.

Das reicht in den meisten Fällen nicht, um sinnvoll damit zu arbeiten. Allein schon die gleiche Höhe der beiden Container wäre in den meisten Fällen eine wünschenswerte Funktion. Mit Flex lässt sich das sehr einfach gestalten:

Es gibt aber noch viele weitere sinnvolle Szenarien - z.B. das mittige Ausrichten der Boxen zueinander:

Oder aber auch die vertikale Ausrichtung und die Breite der Boxen, die entsprechend anders sein sollen:

All diese Beispiele lassen sich mit Flex sehr einfach umsetzen; meist aber nur durch Entwickler, die entsprechende Layouts vorgeben.
Es gibt jedoch viele Szenarien, in denen eine moderne Website mehr Flexibilität benötigt. Sei es, um Inhalte besser zu strukturieren oder neue Optionen zu testen, die die Seite aufregender oder besser lesbar machen.

 

Flex für Neos CMS

Wir stellen mit unserem Flexbox-Paket für Neos genau diese Funktionen für den Redakteur bereit. All die oben gezeigten Beispiele lassen sich nicht nur direkt auf Ihrer Website testen, sondern auch für verschiedene Device-Größen unterschiedlich einstellen. Dies fügt Ihrer Website unzählige Möglichkeiten hinzu, auch wenn Sie es z.B. nur als Prototyping-Tool verwenden.

Mit ein paar kleinen Zusatzfeatures wie Hintergrund- und Textfarbe sowie Hintergrundbildern, die gleich mit dem Paket mit kommen, erhöht sich die Flexibilität Ihrer Content-Gestaltung um ein vielfaches.

Und auch wenn man die vielen Funktionen nicht für eine Live-Website verwenden will, lassen sie sich wunderbar für die Prototyping-Phase zum experimentieren verwenden.  

 

 

Wir freuen uns auf Ihr Feedback!

 

Für Entwickler: 

Das Paket lässt sich einfach installieren über:

composer require techdivision/flexcolumnlayouts
Flex based Columnlayouts for Neos CMS, with the use of tailwindcss classes - techdivision/flexcolumnlayouts

Verwandte Artikel

Welcome to the Card Family: Neos Card Package

Navigationen und Menüs sind lange schon nicht mehr der wichtigste Weg, sich durch eine Website zu arbeiten. Und "Teaser" sind so 2010. 
Cards sind mittlerweile zum unverzichtbaren Element im Web geworden. Kaum eine Google-Suchanfrage kommt ohne sie aus. 

Jetzt gibt es Cards auch für Neos: Gewohnt intuitiv zu bearbeiten. Schlank und effizient in der Pflege.
Mehr lesen

JobPostings für Neos: 
Alles, was Sie für ein erfolgreiches Online-Recruiting benötigen!

Eine der größten Herausforderungen für Unternehmen ist, die richtigen Mitarbeiter zu finden. Spätestens seit Google seine Job-Suche auch in Deutschland anbietet, sollte man seine Hausaufgaben machen und Jobs auf der Unternehmens-Website richtig darstellen und auszeichnen. Für Neos haben wir dafür jetzt entsprechende Packages gebaut und veröffentlicht.
Mehr lesen

UX Ranking: Die Google WebVitals in Neos CMS

Google hat Performance-Kennzahlen festgelegt, die als wichtigste Messgrößen für die Benutzbarkeit einer (beliebigen) Website gelten: https://web.dev/vitals  
Kurz darauf kündigten sie an, diese Zahlen auch in ihre Ranking-Bewertung mit aufzunehmen.
Höchste Zeit also, sich damit zu beschäftigen; wie wäre es also, wenn wir diese wichtigen Größen direkt im CMS messen?
Mehr lesen

Neueste Posts

TechDivision veranstaltet gemeinsam mit der TH Rosenheim am 30.10.2020 die Dritte X-Conference als reines Digital-Event zum Thema Digitale Verantwortung und Digitale Ethik TechDivision hält Masterclass auf der DMEXCO 2020 zum Thema Web Stories Das eStrategy-Magazin in neuer Ausgabe erschienen Neuer Adobe Report “Die Zukunft des E-Commerce” Magento Commerce 2.4 – Was bietet die neueste Version des führenden Open Source Shopsystems?

Archiv

September August Juli Juni Mai April März Februar Januar
Dezember November Oktober September August Juli Juni Mai April März Februar Januar
Dezember November Oktober September August Juni Mai April März Februar Januar
Dezember November Oktober September August Juli Juni Mai April März Februar Januar
Dezember November Oktober September August Juni Mai April Februar Januar
Dezember November Oktober September August Juli Juni März Februar
Oktober September August Juli Juni Mai April März Januar
Dezember November Oktober September August Juli Mai April Februar
November Oktober September April Februar
Dezember September Juni Mai Februar Januar
Juli Mai April März Februar Januar
September August Juli März
Oktober September Juli Juni Mai März Februar
Februar

Kategorien

E-CommerceSAFeAgileNew WorkRemote WorkScrumKanbanTeamsCoachingOrganisationsentwicklungKollaborationUnternehmensmeldungOnline-MarketingMagento CommerceNeosTYPO3SEOSEAUsability Digitale TransformationAgile ProjektentwicklungCorporate WebAnalyticsKünstliche IntelligenzMobile MarketingProduct Imformation Magagement (PIM)Social MediaVeranstaltungenResearch & DevelopmentDesign
 
powered by YouTube: Beim Abspielen des Videos wird eine direkte Verbindung zu einem Server von YouTube aufgebaut. Näheres erfahren Sie in unserer Datenschutzerklärung

Unser Herz schlägt online -
Deins Auch?

 

Wir stellen uns jeden Tag neuen Heraus-forderungen des Online-Business – immer auf der Suche nach spannenden Lösungs-ansätzen und sinnvollen Technologien. Eine Vielzahl namhafter Kunden vertrauen auf das Online Know-how „Made in Kolbermoor / Rosenheim und München“. 

Lust auf TechDivision? Hier geht zu unseren Stellenanzeigen

eStrategy Magazin


Erfahren Sie mehr zu den Themen E-Commerce, Online-Marketing, Mobile, Projektmanagement, Webentwicklung und E-Recht in unserem kostenlosen Online-Magazin.

Jetzt herunterladen!

Whitepaper:
Agiles Projektmanagement


In unserem kostenlosen Whitepaper versuchen wir Basiswissen und Erfahrungen aus vielen Jahren täglicher Projekt- und Unternehmenspraxis zu vermitteln, mit denen Sie die Anforderungen des Arbeitslebens von Heute besser bewältigen können.

Jetzt herunterladen!

Autor

Erfolgreiche Projekte?

bei uns zählt, ob das Ergebnis stimmt

Autor

Stefan RegnietHead of CMS