Kadence · Responsive Design für Mobilgeräte anpassen

Подписаться 2,4 тыс.

50% 1

⏰ Timestamps
0:00 Genutzte Technik
0:34 Seiteninhalt für Mobilgeräte anpassen
3:57 Umschalter Bildshirmgrößen
4:47 Vorteil von REM ggü. Pixel
6:39 Schriftgrößen anpassen
7:08 Zeilenhöhe anpassen
8:03 Designanpassungen für Mobilgeräte 1
8:48 Pixel vs. CSS Variables
10:56 Designanpassungen für Mobilgeräte 2
13:20 Text für Mobilgeräte ausrichten
14:06 Elemente für Mobilgeräte neu anordnen
15:26 Abstände für Mobilgeräte anpassen
19:26 Layout für Tablet-Ansicht anpassen
21:57 Layout-Anpassungen für Mobilgeräte
23:12 Layout-Anpassungen für Tablets
24:37 Header für Mobilgeräte anpassen
26:53 Header-Menü für Mobilgeräte
33:51 Elemente dem Mobilmenü hinzufügen
34:48 Footer für Mobilgeräte anpassen
▶︎ WP Website erstellen: • WordPress Website erst...
📌 Videobeschreibung
Dieses Video zeigt, wie man mit dem Kadence Theme und dem Kadence Blocks Plugin eine WordPress Website responsiv macht und das Design für Mobilgeräte anpasst.
👉 Meine PERSÖNLICHEN FAVORITEN für WordPress 👈
✅ WEBHOSTING → ChemiCloud: *webgeneral.de/chemicloud
✅ WEBHOSTING → webgo: *www.webgo.de/ssd-webhosting
💰 10€ Rabatt mit Gutscheincode: General
✅ DOMAINS → Namecheap: *webgeneral.de/namecheap
✅ WP-THEME → Kadence Full Bundle: *webgeneral.de/kadence-theme-pro
💰 10% Rabatt mit Gutscheincode: take10
✅ EMAILS → FluentCRM: *webgeneral.de/fluentcrm
✅ E-COMMERCE: → SureCart: *webgeneral.de/surecart
✅ ONLINE-ZAHLUNGEN → Mollie: *webgeneral.de/mollie
✅ COOKIE BANNER → Real Cookie Banner: *webgeneral.de/real-cookie-banner
💰 20% Rabatt mit Gutscheincode: WEB-GENERAL
✅ WP Multilingual: WPML: webgeneral.de/wpml
🌐 Must-Have WordPress Plugins: webgeneral.de/must-have-wordp...
WordPress PageSpeed steigern:
🎬 • PageSpeed - WordPress ...
*Affiliate Link (Partner Link bei dem ich eine kleine Provision erhalte, eine gute Möglichkeit meine Arbeit zu unterstützen, ohne extra zu zahlen 🥂)

Хобби

Опубликовано:

20 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 6

@sw5545 4 месяца назад

Ich verstehe tatsächlich nicht, warum du nur ein paar Abonnenten hast - TOP Content! Habe mich entschlossen, meine neue Seite auch auf Basis von Kadence zu erstellen. Bisher habe ich DIVI verwendet. Nicht, dass wir uns falsch verstehen - ich bin eher Laie... Einige Dinge gefallen mir ganz gut bei Kadence. Einige fehlen mir auch. Man kann bei DIVI in meinen Augen den visuellen Builder nicht verwenden. Das geht bei Kadence viel besser. Dafür fehlt der klassische DIVI Builder - der mag umständlich sein, aber top übersichtlich. Auch die Funktion, einzelne Teile einfach zu speichern, um sie später wieder verwenden zu können, oder einfach nur davor zu schützen, sich das Design zu zerschießen, weil man etwas ausprobiert, finde ich bei DIVI viel einfacher. Da würde ich fast sagen, das fehlt mir bei Kadence. Was mir komplett fehlt, ist die Möglichkeit einzelne Teil für Mobil/Desktop deaktivieren zu können. Man ist so gezwungen, einen Block für alle Ansichten optimieren zu müssen. Das ist nach meinen bisherigen Erfahrungen manchmal langwierig bzw. nur mit Kompromissen möglich. Aber vielleicht gibt es die Funktion ja sogar und ich finde sie nur nicht....

@webgeneral 4 месяца назад

Hallo, erstmal vielen Dank! Ich kann das sehr gut nachvollziehen, immer wenn man auf ein neues System umstellt, tauchen hier und da ein paar Fragezeichen auf. Ich hatte selbst mal mit DIVI rumgespielt und kam gut damit zurecht... Wenn man sich an die Block Editor Technik gewöhnt hat, geht aber auch alles wie von selbst. Das erstellen eigener Templates, so wie es bei DIVI oder Elementor möglich ist, geht leider nicht so einfach... Du kannst jedoch unterschiedliche Designs für Mobil- und Desktop erstellen, schade ich wollte ein entsprechendes Beispiel im Video aufnehmen, aber es war ohnehin schon so lang... Erstelle einfach das Desktop-Design in einem Row Layout Block und geh dann rechts in den Block-Einstellungen auf *_Erweitert_* -> *_Sichtbarkeitseinstellungen_* -> Tablets und Mobil deaktivieren. Danach erstellst du das Design für Mobilgeräte in einem neuen Row Layout Block und deaktivierst Desktop in den Sichtbarkeitseinstellungen. Beste Grüße und viel Erfolg!

@sw5545 4 месяца назад

@@webgeneral🙈 ja sag ich doch, ich finde es nur nicht... Tausend Dank! Genau das habe ich gesucht!

@webgeneral 4 месяца назад

@@sw5545 ✌

@knutilkenhans3195 4 месяца назад

Hallole, ich habe mir deine Videos angesehen und mein Wordpress neu installiert um mit Kademce zu arbeiten. Finde es gut. Ich möchte eine Seite erstellen mit Webshop und habe mir auch das SureCart angesehen. Gibt es bei Kadence eine gutes Tempate als Vorlage, mit dem ich hundert verschiedene Kleinteile anbieten kann ? Habe vom Aufbau eines Shops keine Ahnung, habe mir alles erst durch deine Videos angeeignet. Danke für die toll erklärten Videos. Beste Grüße Knut

@webgeneral 4 месяца назад

Hallo Knuth! mit Kadence und SureCart lässt sich dein Projekt sicherlich gut umsetzen. Aktuell sind die E-Commerce Templates von Kadence alle auf WooCommerce ausgelegt. Dadurch dass SureCart eine "kopflose App" ist und das Shop-Management größtenteils auf SureCart Servern liegt, ist das Erstellen von Templates für klassische Shop-Seiten etwas schwieriger. Besonders weil das Shop-System von SureCart noch recht neu ist, muss man sich auf learning by doing vorbereiten, denke ich. Aktuell nutze ich SureCart zum Verkauf von digitalen Produkten, aber einen klassischen Shop für physische Produkte, habe ich bislang noch nicht erstellt. Dennoch kannst du hier (unter den SureCart Videos) gern Fragen zu dem Thema posten und ich versuche zu helfen. Beste Grüße!