1. Zuhause
  2. Eigenschaften
  3. Webseitenelemente
  4. Gitterelement
  5. Rasterlayout Umkehren

Wie man das Rasterlayout umdreht, um das Aussehen des Blocks zu ändern

Das Gitterelement ist sehr flexibel. Sie können das Layout an die Anforderungen Ihrer Webdesign-Idee anpassen. Um das Gitter umzudrehen, das Sie in einem Block platziert haben. Wählen Sie dieses Element aus und gehen Sie dann zum Eigenschaftsfenster auf der rechten Seite. Klicken Sie neben dem Rasterlayout auf die Dropdown-Liste Spiegeln. Klicken Sie auf Spiegeln oder Drehen, um den Vorgang auszuführen.
Mehr erfahren

Nach Funktionskategorien durchsuchen

Webseitenelemente
Unterstützte Systeme
Visueller Seiteneditor
Design-Elemente
Medienbibliotheken
Elementeigenschaften
Responsiv
Animationseffekte
Themen Einstellungen
Kontakt Formular
Kopfzeile Fußzeile
Blog
E-Commerce
SEO
Benutzerdefinierter Code
Anwendungsfunktionen
Site- und Seiteneigenschaften
WordPress-Widgets

Alles, was Sie brauchen, um Ihre kostenlose Website zu erstellen

Verwenden Sie unseren Website Builder, um Websites ohne Codierung zu entwerfen und zu erstellen. Ziehen Sie alles, was Sie möchten, per Drag & Drop an einen beliebigen Ort. Der Website Creator passt Ihre Website automatisch für Mobilgeräte an, um sie responsive zu machen. Wählen Sie aus mehr als 15,000 anpassbaren Website-Vorlagen.

Für Windows herunterladen Für Mac herunterladen

Verwandte Funktionen

Gitterzellen-Hintergrundtyp

Eine Zelle des Rasterelements kann einen Hintergrund haben, und Sie können dafür verschiedene Typen verwenden. Sie können die Farbfüllung, den Verlauf, das Bild, das Video anwenden oder überhaupt keinen Hintergrund haben. Wählen Sie eine Rasterzelle aus und gehen Sie zum Eigenschaftsfenster. Wählen Sie einen Hintergrundtyp, der am besten zu Ihrem Webdesign passt.
Grid in Reaktionsmodi

Die Rasterelemente sind sehr nützlich, um Reaktionsmodi zu erstellen, da sich die Rasterzellen in den kleineren Bildschirmen automatisch untereinander bewegen. Außerdem können Sie für viele Layouts die Rasterzellenreihenfolge in allen mobilen Ansichten ändern. Wählen Sie das Rasterelement, schalten Sie den Reaktionsmodus in der oberen Leiste um und passen Sie bei Bedarf Ihr Raster an. Bei den meisten Grids müssen Sie keine Anpassungen vornehmen.
Gitterzellenlücke

Sie können den Abstand zwischen den Rasterzellen entsprechend Ihren Anforderungen an das Webdesign ändern. Dazu können Sie die Cell Gap-Eigenschaft im Eigenschaftsfenster verwenden. Wählen Sie ein Gitter aus, gehen Sie dann zum Eigenschaftsfenster, scrollen Sie im Fenster nach unten und ziehen Sie den Schieberegler, um den Abstand zu ändern.
Rasterzellen verschieben

Die Raster ermöglichen die Organisation verschiedener Inhalte, einschließlich Bilder, Symbole, Formen und Text in Form von Zellen, die sehr bequem zu bedienen sind. In unserem visuellen Editor können Sie ganz einfach Zellen in einem Raster verschieben, indem Sie einfach eine Zelle über eine andere ziehen und so Ihr Layout und Ihren Inhalt für Ihr Webdesign perfektionieren. Außerdem können Sie auf die Pfeilsymbole im Kontextwerkzeug der Zelle klicken, um die Zelle zu verschieben.
Raster für mobile Geräte
Raster für mobile Geräte

Verwenden Sie das Rasterelement, um die Reaktionsmodi einfach zu erstellen. Auf den kleineren Bildschirmen verschieben sich die Grid Cells automatisch untereinander.
Bewegen Sie den Schieberegler auf eine Rasterzelle

Die Slider-Animation ist eine sehr beliebte Reaktion auf Hover. Sie können verschiedene Effekte für Rasterzellen hinzufügen, z. B. Fade, Overlay, Slide, Flip, Wobble und Zoom. Wählen Sie eine Rasterzelle aus und gehen Sie dann zum Eigenschaftsfenster. Klicken Sie auf den Link Hover Slide und wählen Sie dann den Effekt aus, den Sie auf dem Hover der Rasterzelle sehen möchten.
Größe von Rasterzellen ändern

Wenn Sie ausgefallene Layouts für Ihre Bilder, Formen und Texte erstellen müssen, können Sie die Größe von Rasterzellen mit verschiedenen Breiten ändern, um Ihren Designs ein modernes Aussehen zu verleihen.
Grid-Layout ändern

Sie können das Layout des hinzugefügten Rasters jederzeit in einen Block ändern. Wählen Sie das Rasterelement aus und gehen Sie dann zum Eigenschaftsfenster. Klicken Sie auf den Pfeil, um die Liste der Rastervoreinstellungen zu öffnen und wählen Sie das Layout aus, das besser zu Ihrer Webdesign-Idee passt. Sie können Rasterzellen auch im Editor hinzufügen und entfernen.
Über 80 Rasterlayouts
Über 80 Rasterlayouts

Holen Sie sich die größte Auswahl an Grid-Layouts für Ihr Webdesign. Die Grid-Elemente helfen Ihnen, Ihre Designs automatisch mobilfreundlich zu gestalten.
Gitterboxed und breit

Sie können die Breite des Rasters ganz einfach von Boxed auf Wide und umgekehrt ändern. Wählen Sie ein Raster aus und gehen Sie dann zum Eigenschaftsfenster. Suchen Sie das Boxed/Wide-Symbol neben den Werten für Breite und Höhe und ändern Sie das Gird-Layout, indem Sie auf dieses Symbol klicken.

Kostenlose Vorlagen mit Gitterelement

Beginnen Sie mit unseren besten Vorlagen, die sich für jedes Unternehmen eignen. Erstellen und passen Sie sie mit unserem leistungsstarken und kostenlosen Website-Builder ohne Code an. Alle Vorlagen sind mobilfreundlich und sehen auf jedem Gerät hervorragend aus.

How To Make Flip The Responsive Grid

When you add columns and rows after getting started, you can always flip the CSS Grid layout to change the positioning and overall look of the Grid items and the CSS Grid block. The flip does not affect the space between rows and columns and only affects the positioning. To flip the columns and rows in the CSS Grid layouts, go to the Property Panel, and in the CSS Grid Layout section, you can the Flip or Rotate buttons to make the Grid Cells change places to set up the block look you desire. This function will help you create a responsive Grid without changes in the space between columns and rows.

The CSS Grid template helps to place the content of the CSS grid under pre-designed layouts to make the object fit the current media queries. After you align content within the Grid Layout using CSS grid template columns with pre-installed space between rows and columns, ensure no conflict between your content with various screen sizes. The screen size and media queries go hand in hand, so to make sure the column layout works, learn how to manage the overall space between Grid items.

No matter how many rows and columns you set up, you need to ensure that your responsive layout will make your internal content work and draw attention. Use the right click on the cells to determine will the object-fit after adding it to the Grid layout. Please help us provide the updated navigation to align content. You can set the maximum number of columns and rows inside your block using right-click. Please help us improve our builder with the help of your comments and suggestions.

Company
Product
Themes & Templates
Nicepage
Web Design