Inhaltsverzeichnis
Ressourcen/
iMessage Chat Design
Schritt 1: Webflow Struktur einfügen
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"81342d3d-374c-7c08-ea14-3564bace9b60","type":"Block","tag":"div","classes":[],"children":["41553151-0ac3-d06a-525d-50d9934b82dd","618441ba-a91f-9f44-7c55-ac8a565f3fae"],"data":{"text":false,"tag":"div"}},{"_id":"41553151-0ac3-d06a-525d-50d9934b82dd","type":"Block","tag":"div","classes":["6da1e7bb-e27b-9a5b-fa23-ca421b112e85"],"children":["4f006d92-941f-ff2b-9d4a-c31f058cdfc2"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"4f006d92-941f-ff2b-9d4a-c31f058cdfc2","type":"Block","tag":"div","classes":["597c7d76-e1ad-d441-97cd-0611dd0b83de"],"children":["36396589-3b22-c71f-cc67-40da0c89d55f","56cc7a2c-fdbb-5eb3-fb39-9d99c4263827"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"36396589-3b22-c71f-cc67-40da0c89d55f","type":"Block","tag":"div","classes":["92322065-19c5-836f-8229-0ac2a68b18f3"],"children":["9f806eae-ad34-d4fd-ded6-8016a6ba64ae"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"9f806eae-ad34-d4fd-ded6-8016a6ba64ae","text":true,"v":"Have you checked out the new Webflow cloneables yet?"},{"_id":"56cc7a2c-fdbb-5eb3-fb39-9d99c4263827","type":"HtmlEmbed","tag":"div","classes":["bf6d5ce3-e03d-36ce-a8a4-5cec6e85c0e3","e858450f-7cf7-c988-f5ef-0cb853940035"],"children":[],"v":"<svg width=\"100%\" height=\"100%\" viewBox=\"0 0 22 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M21 25C13.6829 16 9.78049 9.5 9.29268 1L1 18C6.85366 22 11.2439 22.5 21 25Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linejoin=\"round\"/>\n</svg>","data":{"search":{"exclude":true},"embed":{"meta":{"html":"<svg width=\"100%\" height=\"100%\" viewBox=\"0 0 22 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M21 25C13.6829 16 9.78049 9.5 9.29268 1L1 18C6.85366 22 11.2439 22.5 21 25Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linejoin=\"round\"/>\n</svg>","div":false,"script":false,"compilable":false,"iframe":false},"type":"html"},"insideRTE":false,"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]}}},{"_id":"618441ba-a91f-9f44-7c55-ac8a565f3fae","type":"Block","tag":"div","classes":["6da1e7bb-e27b-9a5b-fa23-ca421b112e85","29e2d7e3-c2d9-a9a0-cdee-4862d554fbac"],"children":["02073804-e94c-7084-1759-fcc0274d4264"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"02073804-e94c-7084-1759-fcc0274d4264","type":"Block","tag":"div","classes":["597c7d76-e1ad-d441-97cd-0611dd0b83de"],"children":["ba2e0d4e-1068-8fcf-3341-b55ccb67f4ed","305db74b-c49e-b7d7-ee16-89bfebe40ecb"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"ba2e0d4e-1068-8fcf-3341-b55ccb67f4ed","type":"Block","tag":"div","classes":["92322065-19c5-836f-8229-0ac2a68b18f3"],"children":["3a93e6b4-784a-9c3a-4218-fd0e9d292824"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"3a93e6b4-784a-9c3a-4218-fd0e9d292824","text":true,"v":"Not yet, I've been stuck debugging my Website code for the past few days :("},{"_id":"305db74b-c49e-b7d7-ee16-89bfebe40ecb","type":"HtmlEmbed","tag":"div","classes":["bf6d5ce3-e03d-36ce-a8a4-5cec6e85c0e3","b55797ad-e50b-8035-cbb2-01086da1caf6"],"children":[],"v":"<svg width=\"100%\" height=\"100%\" viewBox=\"0 0 22 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M1 25C8.31707 16 12.2195 9.5 12.7073 1L21 18C15.1463 22 10.7561 22.5 1 25Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linejoin=\"round\"/>\n</svg>","data":{"search":{"exclude":true},"embed":{"meta":{"html":"<svg width=\"100%\" height=\"100%\" viewBox=\"0 0 22 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M1 25C8.31707 16 12.2195 9.5 12.7073 1L21 18C15.1463 22 10.7561 22.5 1 25Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linejoin=\"round\"/>\n</svg>","div":false,"script":false,"compilable":false,"iframe":false},"type":"html"},"insideRTE":false,"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]}}}],"styles":[{"_id":"6da1e7bb-e27b-9a5b-fa23-ca421b112e85","fake":false,"type":"class","name":"ms_hero_horizontal-wrapper","namespace":"","comb":"","styleLess":"display: flex; padding-right: 1em; padding-left: 1em; justify-content: flex-end; align-items: center;","variants":{},"children":["29e2d7e3-c2d9-a9a0-cdee-4862d554fbac"],"createdBy":"6556337c57e1c52f0feb125c","origin":null,"selector":null},{"_id":"597c7d76-e1ad-d441-97cd-0611dd0b83de","fake":false,"type":"class","name":"ms_hero_message","namespace":"","comb":"","styleLess":"position: relative; max-width: 35em; padding-top: 1em; padding-right: 1.25em; padding-bottom: 1em; padding-left: 1.25em; border-top-left-radius: 1.5em; border-top-right-radius: 1.5em; border-bottom-left-radius: 1.5em; border-bottom-right-radius: 1.5em; background-color: hsla(211.29411764705884, 100.00%, 50.00%, 1.00);","variants":{},"children":[],"createdBy":"6556337c57e1c52f0feb125c","origin":null,"selector":null},{"_id":"92322065-19c5-836f-8229-0ac2a68b18f3","fake":false,"type":"class","name":"ms_hero_message-text","namespace":"","comb":"","styleLess":"font-size: 1.5em;","variants":{},"children":[],"createdBy":"6556337c57e1c52f0feb125c","origin":null,"selector":null},{"_id":"bf6d5ce3-e03d-36ce-a8a4-5cec6e85c0e3","fake":false,"type":"class","name":"ms_hero_message-tail","namespace":"","comb":"","styleLess":"position: absolute; top: auto; right: auto; bottom: 0%; width: 1.25em; height: 1.5em; color: #007aff; font-size: 1.5rem;","variants":{},"children":["e858450f-7cf7-c988-f5ef-0cb853940035","b55797ad-e50b-8035-cbb2-01086da1caf6"],"createdBy":"6556337c57e1c52f0feb125c","origin":null,"selector":null},{"_id":"e858450f-7cf7-c988-f5ef-0cb853940035","fake":false,"type":"class","name":"message-right","namespace":"","comb":"&","styleLess":"left: auto; top: auto; right: -1rem; bottom: 0%;","variants":{},"children":[],"createdBy":"6556337c57e1c52f0feb125c","origin":null,"selector":null},{"_id":"29e2d7e3-c2d9-a9a0-cdee-4862d554fbac","fake":false,"type":"class","name":"is--alternate","namespace":"","comb":"&","styleLess":"justify-content: flex-start; align-items: center;","variants":{},"children":[],"createdBy":"6556337c57e1c52f0feb125c","origin":null,"selector":null},{"_id":"b55797ad-e50b-8035-cbb2-01086da1caf6","fake":false,"type":"class","name":"message-left","namespace":"","comb":"&","styleLess":"left: -1rem;","variants":{},"children":[],"createdBy":"6556337c57e1c52f0feb125c","origin":null,"selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0,"universalBindingsRemovedCount":0,"unlinkedSymbolCount":0,"codeComponentsRemovedCount":0}}
Schritt 2: Externe Scripte einfügen
HTML
Kopieren
Schritt: CSS Code einfügen
Schritt
CSS
Kopieren
Schritt: Javascript Code einfügen
Schritt
JavaScript
Kopieren
Schritt 2: Deine Anpassungen
Zuletzt musst du die Komponente nur noch auf deine Bedürfnisse anpassen:
- Nachrichtenlayouts: Du findest zwei vordefinierte Nachrichten-Layouts: "Links" (für eingehende Nachrichten) und "Rechts" (für deine gesendeten Nachrichten). Wähle einfach das passende Design für jede neue Nachricht.
- Neue Nachrichten einfügen: Am einfachsten fügst du eine neue Nachricht hinzu, indem du das Element .ms_hero_horizontal-wrapper (bzw. .ms_hero_horizontal-wrapper.is--alternate) kopierst. So stellst du sicher, dass alles korrekt strukturiert ist und unerwünschte Formatierungsfehler vermieden werden.
- Animationen: Die Message-Karten werden beim Laden der Seite (page-load) mit einer einfachen GSAP-Animation animiert. Diese Animation ist vollständig nativ über das Webflow-Interface steuerbar, sodass du sie bei Bedarf anpassen kannst.
Einstellungen & Variablen
Häufige Fragen & Problem
No items found.
Weitere Informationen
Ursprüngliche Inspiration
Mehr Tools, mehr Know-how, für dein Postfach
Erhalte Updates, Tools, Veröffentlichungen und frische Tipps jede Woche bequem per E-Mail.