Tutorial de Bubble.io - Extensión de Chrome Frames para el diseño responsivo

Video tutorial paso a paso para crear un diseño responsivo con la extensión de Chrome Frames en Bubble.

Chris Strobl
Chris Strobl

In diesem Video zeigen wir euch die kostenlose Chrome Extension Frames: https://madewithframes.com

Mit dieser Chrome Extension von Buildcamp (Gregory John und James More) ist responsives Webdesign in Bubble erheblich einfacher.

Bubble.io Tutorial - Frames Chrome Extension für responsive Design in Bubble

Transcripción del vídeo:

Hallo, mein Name ist Chris Strobl und ich freue mich heute wahnsinnig, euch Frames zu zeigen. Frames ist ein nagelneues Framework, entwickelt von Gregory John und James Moore von Bird Camp und es vereinfacht Responsive Designs im Bubble aber erheblich. Frames ist ein modulares Design System und ich will euch einmal grob zeigen, wie man das Ganze benutzt. Wenn ihr auf Getting Started im Manual klickt, seht ihr, wir müssen als erstes eine Chrome Extension installieren und dann müssen wir uns in Frames einloggen.

Wenn ich hier auf Download klickt, seht ihr, dass ich diese Chrome Extension bereits installiert habe. Das hier oben ist Frames und wenn man nicht im Bubble ist, sondern auf einer anderen Seite, ist das ganze grau. Wenn ihr aber in den Bubble Editor geht, dann seht ihr, dass plötzlich Frames gelb ist. Und zweitens seht ihr unten rechts diesen gelben Punkt. Ihr registriert euch oder ich bin schon registriert, ihr lockt euch ein. Und nun seht ihr, wie Frames arbeitet. Ein kleines Beispiel Ich habe eine komplette Seite in Frames gebaut, in zirka eineinhalb, zwei Stunden. Was wir jetzt aber machen, ist ein neue Seite Testing Frames.

Wenn wir zurückgehen ins Menü, dann seht ihr, wir haben hier verschiedene Wege, wie man Frames benutzt und es ist alles relativ gut dokumentiert. Ich möchte euch aber hier ein Beispiel zeigen mit den unterschiedlichen Sektionen, die wir hier haben. Das heißt, wir gehen zurück im Bubble. Wir haben die Seite. Als erstes ist wichtig Wir machen 960 Breite Höhe. Mache ich einmal 6000, einfach um mehr Platz zu haben. Und das ist wichtig. Diese Seite ist nicht fixed quickbook, sondern responsive. Wir gehen jetzt auf die Chrome Extension und jetzt steht die unterschiedlichen Sektionen fangen an mit einem Header und ihr seht nun hier das wir verschiedene Designs für den Header haben. Zum Beispiel nehme ich da fünf links ein Logo, rechts einen Button und ich klicke hier auf dieses Kopieren Symbol. Sobald ich das kopiert habe, kann ich nun rechte Maustaste Paket View machen und sich hier wiederum frames. Und jetzt habe ich quasi dieses Element direkt bei mir in der Seite etc. Das heißt Header 5. Und wir haben verschiedene Gruppen, darunter zum Beispiel ein Image.

Das ist quasi ein Keys holder Image, wo wir für unser Logo eins hochladen können. Zum Beispiel können wir hier Search for free images machen. Und haben jetzt hier quasi ein Logo und rechts haben wir einen Button. Wenn wir eine responsive Editor gehen, dann sehen wir, dass das Design perfekt responsive funktioniert. Wenn ihr nun zum Beispiel die Farbe ändern wollt, dann geht ihr auf den Header 5. Und sieht, dass hier die Background Color ein 0 prozent Transparenz hat. Zum Beispiel können wir sagen, wir wollen das ganze in Schwarz haben und mit einer 80er Transparenz. Gleichzeitig könnt ihr auch die Buttons selber editieren.

Ihr seht hier, dass wir unterschiedliche Styles festlegen können und auch zum Beispiel die Run mode ändern oder ähnliches. Was aber nun spannend ist, um ein zweites Element zu zeigen, ist Wenn wir zurückgehen in Frames, sehen wir jetzt die unterschiedlichen Elemente, wie zum Beispiel die Hero Elemente. Wir können jetzt sagen, wir wollen diesen Hero 3 kopieren, diesen wieder. Wir sind View und jetzt sieht das alles etwas springt. Da gehe ich am liebsten auf einmal den Header. Schauen wir an, dass dieser von der Größe her 100 Höhe hat, um bei 0 0 ist und der Hero 3 muss damit bei 100 y Achse anfangen. Somit ist das ganze eben nicht überlappend. Wir können auch hier wieder das Bild ändern. Sondern das ganze etwas Gruppen. Und haben die Möglichkeit, zum Beispiel die Hintergrundfarbe zu ändern oder auch einfach den Text zu ändern.

Ihr seht, dass Frames auch Conditional hat, dass die Größe sich wiederum verändert und die Schriftgröße kleiner wird, sobald das Ganze auch ein kleineres Format ist. Wenn wir wieder auf responsive gehen, dann seht ihr das alles wunderbar mit den Abständen passt und wir wirklich exzellentes Design im Bubble haben, was aber jederzeit modular geändert werden kann und auch gleichzeitig Styles oder andere Sachen können geändert werden.

Ich gehe einmal jetzt noch in Preview, um das Ganze zu zeigen und wir sehen hier nun zum Beispiel, dass die Seite bei 150 aufhört und nicht komplett durchgeht. Aber auch hier haben wir die Möglichkeit, alles jederzeit zu ändern, wie zum Beispiel eine deploy Matrix nicht einzufügen. Dann, wenn wir Refresh machen. Sieh dir das zum Beispiel der Header komplett durchgeht. Was ich bei Frames wirklich spannend finde, ist tatsächlich die Möglichkeit, endlich im Bubble sehr gutes Design quasi out of the box zu haben und vor allem aktuell Landingpages erheblich besser darzustellen.

Ihr seht, dass wir fast alle verschiedenen Content Formate nutzen können, ob das Pricing Tabs sind oder aber auch den Futter von einer Seite. Und in der Zukunft kann ich mir sehr gut vorstellen, dass es noch weitere Features in Frames gibt, wie zum Beispiel Profilseite oder Market Places. Daher probiert es einfach mal aus, das ganze Tool ist kostenlos. Gratuliere nochmal an Triggered John und James Moore vom Bild Camp. Wirklich ein exzellentes Tool für die Bubble Community und auch wirklich sichtbar wie die großen Baustellen im Bubble.

Ob das nun Design ist oder Payment schrittweise von der Community angegangen werden. Wenn euch dieses Video gefallen habe, klickt gerne auf den Like-Button und script unseren Channel. Ich wünsche euch weiterhin viel Erfolg und auf bald.

Plugins