Transkripte
1. Willkommen zu diesem Canva-Website-Design-Kurs: Hallo und willkommen
zu diesem Kurs, in dem du lernst, wie man
eine Website in Canva gestaltet In diesem Kurs werde ich dich durch
die grundlegenden Elemente der
Erstellung einer einfachen Website
führen . Außerdem werde ich
verschiedene Designs untersuchen, indem wir andere
Websites analysieren, um uns inspirieren zu lassen Ich zeige Ihnen, wie Sie
Ihre Website mit Ihrem
eigenen benutzerdefinierten Domainnamen verbinden und ihr so einen professionellen Touch verleihen. Dieser Kurs ist perfekt für alle , die eine
einfache Website in Canva erstellen möchten, sei es für ein Portfolio
oder eine persönliche Marke Wenn du eine komplexe,
hochtechnische Website erstellen
möchtest, ist Canva möglicherweise nicht die beste
Wahl für Wenn du jedoch eine
Website entwerfen möchtest, die schnell, einfach
und kostenlos ist und ein stylistisches Layout hat, dann ist dieser Kurs genau das Richtige für Nehmen Sie also an diesem
Kurs teil und lassen Sie uns noch heute
mit der Erstellung
Ihrer Website beginnen
2. Vorteile einer Website: Hallo, und
willkommen in diesem Bereich, in dem Sie die Vorteile
einer Website entdecken. Okay, also lass uns anfangen. Erstens
lässt eine Website Ihre Marke professioneller
und vertrauenswürdiger
erscheinen. Eine Website bietet
Professionalität und Glaubwürdigkeit mit einem
benutzerfreundlichen Design, einheitlichem Branding,
SSL-Sicherheit, klaren Botschaften, Testimonials und zugänglichen Kontaktinformationen Liebe zum Detail zeugt Zuverlässigkeit und
Qualitätsbewusstsein Schauen wir uns den zweiten Punkt an Projekte
als
Portfolios vor Viele Personen präsentieren ihre Arbeit als Online-Portfolios, was von unschätzbarem Wert ist,
wenn sie sich
für Stellen wie Grafikdesigner bewerben für Stellen wie Grafikdesigner Okay, schauen wir uns jetzt ein Beispiel für
eine Portfolio-Website an Beispiel für
eine Portfolio-Website Sie können hier sehen, dass ich diese Website
erstellt habe. Ich gehe
jetzt einfach schnell zu verschiedenen Seiten. Die erste Seite
hier hat also einen Namen der Person und die Links zu ihrer Arbeit und einen
Link, um sie zu kontaktieren. Als Nächstes haben wir einige
Informationen darüber, warum sie eingestellt werden könnten,
und ein Foto. Für Ihr Portfolio halte
ich es für
wichtig, ein professionell
aussehendes Foto zu haben. Dann haben wir einen Bereich bei mir
, der mehr Informationen über
die Fähigkeiten
und Kenntnisse der Person enthält . Ich habe hier auch ein Bild hinzugefügt, das für die
Rolle eines Grafikdesigners relevant ist. Dann haben wir eine Seite, auf ihre
verschiedenen kreativen Arbeiten vorgestellt Dies können alles
auch Links sein, die auf
andere Seiten verweisen können , auf denen
die Arbeit detaillierter dargestellt Dann gehen wir runter und haben eine
Seite über Berufserfahrung. Wenn Sie also
eine Portfolio-Website erstellen möchten, ist
es wichtig,
frühere Berufserfahrungen anzuzeigen. Wenn Sie Bilder
von früheren Arbeitsplätzen haben, können
Sie diese auch hier ablegen Und dann haben wir eine
Seite über Dienstleistungen. Hier geht es also um
die verschiedenen Fähigkeiten und Dienstleistungen, die
Sie anbieten können. Dann haben wir eine
Seite über Fähigkeiten. Sie können
hier also sehen, dass wir diese
Symbole für verschiedene Software haben , die das Design
etwas interessanter machen. Wenn es nur Text wäre, würde
es vielleicht nicht so
lustig und kreativ aussehen wie die Icons hier
zu haben. Und dann haben wir einen Bereich für Hobbys
und Interessen. Dies verleiht der Website ein wenig Persönlichkeit und kann
die Person freundlich
und zugänglich aussehen lassen die Person freundlich
und zugänglich aussehen Und dann haben wir ein Angebot. Ich dachte, das würde
die Website nur ein
bisschen interessanter aussehen lassen
und die
Person mit diesem Zitat auch professionell
und fleißig aussehen mit diesem Zitat auch professionell
und fleißig Dann
haben wir unten den Kontaktbereich. Hier können sie also auf Kontakt
klicken, und dies wird
zu einem E-Mail-Formular weitergeleitet, und wir haben auch
die Telefonnummer, Website, E-Mail und Adresse. Ich habe hier auch diese Icons hinzugefügt , um das Design
etwas interessanter zu gestalten. Und unten habe ich
einige Social-Media-Symbole hinzugefügt einige Social-Media-Symbole , die auf ihre
Social-Media-Konten verweisen können. Wenn Sie also Ihre Portfolio-Website haben, ist
es wichtig, Ihre
Kreativität in Ihre Website einzubringen, sie so zu
gestalten, wie Sie es möchten, und Ihren eigenen Geschmack und Stil
hinzuzufügen. Die dritte, die Ihnen hilft, Kunden-E-Mails zu
sammeln. Eine Website hilft beim
Online-Geschäft, indem sie
Kunden-E-Mails sammelt , um
Werbeaktionen zu versenden und den
Produktverkauf zu steigern. Der vierte Punkt:
E-Commerce-Websites helfen bei
Online-Zahlungen. Eine E-Commerce-Website
erleichtert Online-Zahlungen, sodass Kunden jederzeit und überall
Produkte kaufen können. Zum Beispiel bietet es
mehrere Zahlungsoptionen wie Nachnahme, Kredit- und Debitkarten
sowie digitale Geldbörsen Ein weiterer
Vorteil einer Website ist Vermeidung hoher Kosten für die Anmietung von Geschäften Vermeiden Sie kostspielige Ladenmieten,
indem Sie Produkte
auf Ihrer Website präsentieren und
verkaufen und Produkte
auf Ihrer Website präsentieren und
verkaufen so effizient Geld
sparen Darüber hinaus reduziert eine Website
den Bedarf an zusätzlichem Personal, ermöglicht es Ihnen,
Aufgaben selbst zu erledigen,
reduziert den Bedarf an zusätzlichem Personal und spart Arbeitslosenkosten Als Nächstes können Websites
auf andere Plattformen verlinken. Die Website kann auf
andere Plattformen oder Websites verweisen, einschließlich
Social-Media-Plattformen wie Facebook, Instagram, X, YouTube und
Diensten wie Google Maps. Dieses Foto
zeigt beispielsweise das Foto
einer Website mit allen
Kontaktinformationen. Der nächste Vorteil ist, dass Sie mit Ihrer eigenen
E-Commerce-Website
vollständig bezahlt werden. Mit Ihrer eigenen E-Commerce-Website behalten
Sie den vollen
Verkaufspreis,
wie auf Plattformen von Drittanbietern denen Sie einen
Prozentsatz Ihrer Einnahmen teilen müssen. Das Bild
auf der linken Seite stammt beispielsweise von
einer Kaffee-Website, auf der
ihre eigene Plattform vorgestellt wird, oder das Bild auf der rechten Seite
zeigt Amazon-Verkäufergebühren, einschließlich
Verkaufsgebühren, Abschlussgebühren und Verwaltungsgebühren für Rückerstattungen Okay, das ist das Ende
dieses Videos, in dem wir uns die Vorteile
einer Website
angesehen haben Ich hoffe, Sie fanden
dieses Video nützlich. Danke fürs Zuschauen, und
ich werde es im nächsten sehen.
3. Wichtige Dinge, die du für die Gestaltung einer guten Website wissen solltest: Okay, lassen Sie uns nun
einen Blick auf wichtige Dinge werfen, die Sie für die
Gestaltung einer guten Website wissen sollten. Zuallererst empfehle ich, UX und UI zu
verstehen.
UX, was für
Benutzererfahrung steht, bezieht sich auf die Benutzererfahrung, die bei der Interaktion
mit einem Produkt oder einer Website
entsteht, wobei der Schwerpunkt auf Benutzerfreundlichkeit,
Zufriedenheit und Barrierefreiheit liegt. UI, was
für Benutzeroberfläche steht, bezieht sich auf das Design und interaktiven Elemente
wie Schaltflächen, Farben und Layouts,
die die Benutzeroberfläche optisch
ansprechend und benutzerfreundlich machen . Die kombinierten Anstrengungen
von UI und UX sorgen für ein reibungsloses und
ansprechendes Benutzererlebnis. Ein wichtiger Aspekt bei der Gestaltung einer guten Website ist, dass
sie responsiv sein sollte. Kunden bevorzugen heute
aufgrund von Verhaltensänderungen Informationen in
Echtzeit . Denken Sie zum Beispiel an Geräte wie Smartphones und Tablets. Eine gute Website sollte das Nutzererlebnis
verbessern indem
Inhalte in der richtigen Größe auf allen Geräten angezeigt werden. Der zweite Punkt: Gestalten die Website so, dass sie sauber
und leicht verständlich ist. Vermeiden Sie es, zu viele Farben zu verwenden, und halten Sie sich auf der
gesamten Website an einen einheitlichen Ton. Wählen Sie Farben,
die die Essenz Ihres Unternehmens widerspiegeln. Wenn es sich bei Ihrem Unternehmen beispielsweise um
einen Pflanzenladen handelt und Grün Ihre Markenfarbe
ist, stellen Sie sicher, dass die Website Grün
enthält. Auf dieser Website werden zum Beispiel Dunkelgrün, Hellgrün,
Dunkelgrau, Weiß und Creme verwendet . Diese Farben
ergänzen sich gut und unterstreichen die Einbeziehung von
Grüntönen den Fokus des Unternehmens auf Pflanzen Okay,
schauen wir uns diese Website an,
nämlich patch plants.com Sie können hier also sehen, dass diese Website oben diese grüne
Farbe
verwendet Wir haben auch diese
weiße und cremefarbene Farbe und wir haben auch das
Firmenlogo hier oben links. nach unten gehen, können wir sehen, dass es viele Bilder
der verschiedenen Pflanzen
gibt , die auf dieser Website
angeboten werden. Und Sie können auch sehen, dass
es hier diese Pfeiltaste gibt, die dieselbe grüne Farbe hat. Wenn ich runtergehe, gibt es
mehr Fotos von Pflanzen. Und wieder
haben die Knöpfe dieselbe grüne Farbe. dann nach unten gehen,
können wir sehen, dass diese Schaltflächen hier die dunkelgraue Farbe haben. Und dann unten haben
wir es heißer. Dieses Foto verwendet die
dunkelgraue Farbe. Es gibt auch diese
grüne Anmeldeunterseite. Dann gibt es
hier einen Abschnitt, der Links zu
verschiedenen Teilen der Website enthält , die diese weiße Farbe hier verwenden, sodass sie sich auf dem
dunkelgrauen Hintergrund abhebt Dann haben wir die Links zu den sozialen
Medien hier unten. Schauen wir uns das nächste Beispiel an. Das ist twinings.code.uk. Diese Marke hat
sich zum Ziel gesetzt,
Luxus zu vermitteln Weiß,
Gold und das Die Website zeichnet sich durch
Weiß- und Cremetöne mit goldenen Akzenten
auf den Schaltflächen aus. Schauen wir uns das nächste Beispiel an,
nämlich walkers shortbread.com Die Marke möchte
den traditionellen
Stil Schottlands zur Geltung bringen, weshalb sie Schwarz und
Rot verwendet , um an den ikonischen Kilt zu erinnern Sie können hier sehen
, dass dieser Button auch eine dunkelgelbe Farbe verwendet dann nach unten gehen, können Sie
mehr von diesem Schottenmuster sehen, bei dem schwarze
und rote Farben verwendet werden, was ein sehr traditionelles
schottisches Muster ist Und wir können das gleiche
Muster hier auf diesen Knöpfen sehen. dann nach unten gehen, können wir mehr
von diesen Shortbred-Bildern sehen von diesen Shortbred-Bildern sehen dann hinuntergehen, können Sie sehen,
dass wir diese
Fotosammlung haben Dadurch wirkt die Marke
sehr alt und traditionell. Dann haben wir hier dieses
Bild, das einen Shortbred
beinhaltet Ganz unten auf
der Website haben
wir auch dieses Tartan-Design Okay, lass uns jetzt weitermachen. Verwenden Sie Schriften, die leicht zu lesen sind. Wenn Ihre Website beispielsweise für ältere Kunden bestimmt
ist,
stellen Sie sicher, dass die
Schriftgröße nicht zu klein ist. Die Schrift für Produktnamen auf der Website sollte
fett gedruckt sein, um Aufmerksamkeit zu erregen. Denken Sie daran, zu überprüfen, wie Ihre
Schriften auf Desktop-,
Telefon- und Tablet-Ansichten angezeigt werden, um
sicherzustellen, dass sie korrekt angezeigt werden. Verwenden Sie Symbole, um
die Website
ansprechender zu gestalten , da sie
ansprechender sind als die bloße Verwendung von Text. Verwenden Sie beispielsweise ein Haussymbol, um zur Startseite zu navigieren, ein Telefonsymbol, um
Telefonnummerninformationen anzuzeigen, ein Umschlagsymbol, um E-Mail-Informationen
darzustellen, und ein Stecknadelsymbol, um
Standort- oder Adressdetails anzuzeigen. Verwenden Sie als Nächstes hochwertige
Fotos auf der Website und achten Sie
darauf, dass die Dateien nicht zu groß
sind. Denken Sie auch an
urheberrechtliche Fragen. Beispielsweise ist das
Hintergrundfoto auf der linken Seite ein qualitativ
hochwertiges Bild, und das Foto auf der rechten Seite ist ebenfalls ein qualitativ hochwertiges Bild, wodurch die Website
professioneller und vertrauenswürdiger erscheint professioneller und vertrauenswürdiger Jedes Thema sollte
alle relevanten Informationen
und Kategorien enthalten , sodass Sie leicht finden,
wonach Sie suchen. Das Foto auf
der linken Seite stammt beispielsweise von
der Sony-Website, die Kategorien
wie Kopfhörer,
Kameras, Objektive, Fernseher,
Soundbars und Mobiltelefone enthält . Wenn Sie auf Objektive klicken, wird eine Seite wie
das Bild auf der rechten Seite angezeigt,
auf der alle verfügbaren Objektive Darüber hinaus gibt es auf
der linken Seite
eine Seitenleiste , über die Benutzer
weitere Optionen erkunden Dieses Design hilft dabei, die Website
sauber und benutzerfreundlich zu
halten . Als Nächstes sind die wichtigsten Elemente aufgeführt, die
Sie vor der Erstellung einer Website kennen sollten. Die Kenntnis der wichtigsten Elemente
einer Website ist wichtig, um sicherzustellen, dass sie benutzerfreundlich,
funktionell und konsistent ist. Dies verbessert die Navigation,
verbessert die Benutzererfahrung und gewährleistet die Barrierefreiheit, was zum Gesamterfolg der
Website beiträgt. Das Erstellen einer Website
auf Canva ist einfach, aber es fehlen erweiterte
Funktionen wie Zahlungsabwicklung oder
Drop-down-Menüs , die mit anderen Seiten
verknüpft sind Okay, das ist also das
Ende dieses Videos. Wir haben uns
wichtige Dinge angesehen, die Sie für die Gestaltung
einer guten Website
wissen sollten. Als Nächstes schauen wir uns die wichtigsten Elemente einer
Website an,
die Sie kennen sollten . Diese werden wir
im nächsten Video behandeln. Danke fürs Zuschauen
und wir sehen uns dort.
4. Schlüsselelemente einer Website, die Sie kennen sollten: Okay, schauen wir uns nun die Schlüsselelemente einer
Website an. Du solltest es wissen. Also lass uns anfangen. Lassen Sie uns nun die wesentlichen Komponenten des
Website-Designs
besprechen, beginnend mit dem Header. Die Kopfzeile
befindet sich normalerweise oben auf
einer Webseite und enthält wichtige Elemente
wie Ihr Logo, Ihr
Branding, Anmelde- oder Anmeldeschaltflächen, Suchleiste und manchmal
Navigationslinks. Hier sind zum Beispiel
drei verschiedene Designs. Im ersten Beispiel haben wir
ein Logo, gefolgt von
Schaltflächen für die Homepage, Über uns, Blog und Galerie
sowie eine Suchleiste. Das zweite Beispiel
ist sehr ähnlich, verwendet
jedoch Symbolschaltflächen, die das Design
optisch ansprechender machen können. Zum Beispiel
wird ein menschliches Symbol zum Einsperren verwendet, ein Einkaufswagensymbol
steht für einen Einkaufswagen und ein
Lupensymbol wird für die Suche verwendet Im dritten Beispiel
gibt es drei Zeilen auf der rechten Seite, die auf die mobile Ansicht
einer responsiven Website
hinweisen Dieses Design berücksichtigt
die begrenzte
Bildschirmfläche eines Telefons gewährleistet so ein benutzerfreundliches Layout Schauen wir uns als Nächstes die Navigationsleiste
an. Eine Navigationsleiste oder Navbar ist
ein Menü auf der Website, Benutzer
über Schaltflächen oder Links einfach auf
verschiedene Abschnitte oder Seiten zugreifen können über Schaltflächen oder Links einfach auf
verschiedene Abschnitte oder Seiten Das Bild
auf der linken Seite zeigt beispielsweise eine Telefonansicht einer Navbar, die für mobile Geräte
konzipiert ist, während das Bild auf
der rechten Seite
eine Navbar zeigt , wie sie auf einem Desktop
aussieht Dieses Bild stammt aus dem
Clove and Store***.com. Hier sehen wir einen
Unterkategorie-Indikator für die Navbar. Mit dieser Funktion können Benutzer leicht sehen,
wo sie sich auf
der Website befinden , und bei Bedarf zu
breiteren Abschnitten zurückkehren Verbessern Sie das Benutzererlebnis, indem
Sie Verwirrung vermeiden und
die Navigation vereinfachen In diesem
Fall haben wir beispielsweise auf Home geklickt dann die Kategorie
Damen ausgewählt, gefolgt von Gesicht und Schönheit
und schließlich Make-up Der
Indikator für die Unterkategorie zeigt den Pfad an, den Sie durch
die Kategorien der Website gegangen sind Als Nächstes haben wir FUTA. Ein FUTA
befindet sich am Ende einer Webseite und bietet Links und zusätzliche Informationen
wie Kontaktdaten,
wichtige Links, Konten in
sozialen Netzwerken, Newsletter-Abonnements
und Urheberrechtshinweise Schauen wir uns diese Beispiele an. Für das erste Beispiel haben wir die Website FUTA der Pizza Company Er kann ihre
Kontaktinformationen sehen, einschließlich Links zur
Facebook-Leitung und ihrer Telefonnummer. Es enthält auch
herunterladbare Links für ihre App, den
Copyright-Hinweis und Einzelheiten zu den von
ihnen akzeptierten
digitalen Zahlungsmethoden wie Visa, Mastercard und Kreditkarten. Das zweite Beispiel bezieht sich auf
die Fußzeile des SF-Kinos. Er kann Links zu ihren
Social-Media-Seiten wie Facebook,
Twitter oder X, Instagram,
YouTube und Line
sowie deren Telefonnummer sehen Social-Media-Seiten wie Facebook, Twitter oder X, Instagram, YouTube und Line
sowie deren Telefonnummer Dazu gehört auch die Registrierung von DBD,
was darauf hinweist, dass das
Unternehmen offiziell
beim Department
of Business Development registriert ist beim Department
of Business Development registriert Darüber hinaus
enthält die Fußzeile einen Copyright-Hinweis. Sie können auch
Logos von SFW, SFX
und SFC erkennen, die für die verschiedenen Arten von
Kinos stehen, die das Unten
befinden sich anklickbare Links, die zu verschiedenen
Seiten der Website führen Das dritte Beispiel ist
die zentrale Website. Hier finden Sie
Links zu sozialen Medien, darunter Facebook, Twitter oder X, Instagram,
YouTube und Line. Es gibt auch ein
E-Mail-Erfassungsfeld, in das Sie Ihre E-Mail-Adresse
eingeben können , um
die neuesten Angebote und Trends zu abonnieren . Wie bei den anderen Beispielen gibt es anklickbare Links, die Sie zu anderen
Seiten der Website
weiterleiten Darüber hinaus
enthält das Futter den Copyright-Hinweis, die Adresse,
Telefonnummer und E-Mail-Adresse des Unternehmens Es gibt auch herunterladbare
Links, die
Sie zum Apple App Store
und Google Play Store führen. Wir können ihre App herunterladen. Als nächstes haben wir das Drop-down-Menü. Ein Dropdownmenü ist
eine Art Menü, das zusätzliche Optionen
anzeigt,
wenn es angeklickt oder mit der zusätzliche Optionen
anzeigt,
wenn es angeklickt oder Es hilft,
die Website aufgeräumt zu halten, indem unnötige Optionen
ausgeblendet werden ,
bis sie benötigt Als Nächstes haben wir die Seitenleiste. Eine Seitenleiste ist ein vertikaler
Abschnitt einer Website, der normalerweise links oder rechts positioniert
ist. Das nimmt keinen Platz
im Hauptinhaltsbereich ein. Es kann zusätzliche
Informationen oder Navigationslinks enthalten . den verschiedenen Arten von Seitenleisten
gehören eine statische Seitenleiste, eine
dicke Seitenleiste, eine zusammenklappbare Seitenleiste und eine verschiebbare
Seitenleiste Die statische
Seitenleiste ist eine Registerkarte, die auf der
linken oder rechten Seite fixiert
bleibt Wenn der Benutzer nach oben oder unten scrollt, bewegt sich
der Tab zusammen
mit dem Inhalt Die feste Seitenleiste ist eine Registerkarte , die an einer festen Position bleibt, auch wenn der Benutzer nach oben oder unten
scrollt Die Registerkarte bleibt stationär
und bewegt sich nicht. Collapsb-Seitenleiste ist eine
Registerkarte, die auf
der linken oder rechten Seite angezeigt wird und erweitern oder reduzieren
lässt,
wenn Diese Funktion trägt dazu bei, die
Website sauber und organisiert zu halten. Die verschiebbare
Seitenleiste ist eine Registerkarte, die
angezeigt wird, wenn Sie mit der
Maus darüber fahren oder darauf klicken Diese Funktion hilft dabei, die
Website sauber und organisiert zu halten. Schauen wir uns diese Beispiele an. Die erste Seitenleiste wird häufig auf Shopping-Websites
verwendet, da sie Benutzern hilft, einfach
über Kategorien nach Artikeln zu suchen . Wenn
Sie beispielsweise auf Augen klicken, wird
es erweitert und es werden verwandte
I-Make-up-Artikel wie Eyeliner,
Mascara und Lidschatten angezeigt I-Make-up-Artikel wie Eyeliner,
Mascara und Diese Art von Registerkarte wird als zusammenklappbare Seitenleiste bezeichnet
. Auf einigen Websites, wenn Sie auf eine Kategorie
klicken, werden andere
automatisch
zusammengeklappt Auf anderen Websites bleiben
die Kategorien jedoch geöffnet und werden nicht zusammengeklappt, wenn
Sie eine andere auswählen. Das zweite Bild stammt
von Google Drive. Diese Seitenleiste erscheint auf der linken Seite der
Website und ist eine feste Seitenleiste,
was bedeutet, dass sie auch dann an derselben
Stelle bleibt , wenn
Sie nach unten scrollen Wenn Sie auf Meine Ablage klicken, wird sie erweitert, um weitere Ordner anzuzeigen Wenn diese Ordner Unterordner
enthalten, werden in
der Seitenleiste nach Bedarf
zusätzliche Ebenen angezeigt Es ist auch eine
zusammenklappbare Seitenleiste, aber im Gegensatz zum anderen Beispiel
wird
der vorherige Abschnitt nicht reduziert, wird
der vorherige Abschnitt nicht wenn Sie auf
mehrere Elemente klicken Das letzte Bild stammt ebenfalls
von Google Drive, aber diesmal
befindet sich die Seitenleiste auf der rechten Anfänglich werden in der Seitenleiste nur Symbole
angezeigt. Wenn Sie den Mauszeiger über ein Symbol bewegen, der Text angezeigt, und Sie ihn auswählen, werden
weitere Informationen Darüber hinaus
enthält diese Seitenleiste unten rechts einen versteckten
Seitenbereich, der als verschiebbare Seitenleiste
bezeichnet Schauen wir uns als Nächstes die Schaltflächen an. Schaltflächen sind interaktive
Elemente, auf die Benutzer klicken oder tippen
können, um bestimmte Aufgaben
auszuführen. Sie sind unverzichtbar für Aktionen
wie das Einreichen von Formularen, Navigation und andere Funktionen. Dieses Bild zeigt Beispiele für
verschiedene Arten von Schaltflächen, einschließlich solcher mit unterschiedlichen
Farben oder nur Text, die
alle anklickbar sind
und Sie zu einem Link weiterleiten Als nächstes haben wir Akkordeons. Akkordeons sind UI-Elemente
, die den auf einer Website
angezeigten Inhalt steuern, indem sie verschiedene Bereiche ein - und
ausblenden Sie sind nützlich, um große Mengen
verwandter Informationen
wie Anleitungen oder häufig gestellte Fragen zu
organisieren verwandter Informationen
wie Anleitungen oder In der Regel
kann jeweils nur ein Abschnitt erweitert werden, wobei der zuvor
erweiterte Abschnitt zusammengeklappt wird, wenn ein
neuer geöffnet wird Als Nächstes haben wir ein Eingabefeld. Ein Eingabefeld ist ein
einzeiliges Textfeld , in das Benutzer Text eingeben können. Es wird häufig in Formularen für Eingabe und Informationen
wie Namen, E-Mail-Adressen
und Suchbegriffe verwendet. Dann haben wir einen Textbereich. Ein Textbereich ist ein
mehrzeiliges Eingabefeld , in das Benutzer
längere Texte wie Notizen,
Kommentare oder detaillierte
Informationen eingeben können. Es wird häufig in Formularen verwendet, in denen umfangreichere
Eingaben erforderlich sind. Als Nächstes haben wir Custom Select. Custom Select ist ein Eingabefeld mit einem
Drop-down-Menü, das
zusätzliche Funktionen
wie durchsuchbare Optionen
und Funktionen zur Mehrfachauswahl bietet zusätzliche Funktionen
wie durchsuchbare Optionen und Funktionen zur Mehrfachauswahl Es ist ein Stil,
der zum Gesamtdesign
der Website passt . Dann ist
da noch die Chatbox. Eine Chatbox ist ein kleines
quadratisches Feld, auf das Benutzer
klicken können , um
eine Option in einem Formular oder einer Webseite auszuwählen oder abzuwählen eine Option in einem Formular oder einer Webseite Es ermöglicht eine
Mehrfachauswahl, wobei ein Chat-Zeichen erscheint,
wenn eine Option Als nächstes kommen Radios.
Optionsfelder sind kleine kreisförmige Schaltflächen
, mit denen Benutzer eine
Option aus einer
Liste auf einem Formular oder einer Webseite kann jeweils nur ein Optionsfeld ausgewählt werden Pro Gruppe
kann jeweils nur ein Optionsfeld ausgewählt werden.
Dann gibt es Schalter. Schalter sind
Umschalttasten auf Websites und Anwendungen, die
wie Lichtschalter funktionieren und
es Benutzern ermöglichen, Funktionen ein- oder auszuschalten Sie werden häufig für
Einstellungen oder Präferenzen verwendet und bieten eine klare visuelle Anzeige
des aktuellen Status Dann gibt es noch die Eingabe benutzerdefinierter Dateien. Eine benutzerdefinierte Dateieingabe ist ein gestaltetes Datei-Upload-Feld, mit dem Benutzer
Dateien von ihrem Gerät auswählen Das erste Bild zeigt
verschiedene Arten von benutzerdefinierten Dateieingaben Wenn Sie auf Datei auswählen klicken, ein Fenster angezeigt, in dem
Sie eine Datei von
Ihrem Gerät auswählen können, wie
im Bild auf der rechten Seite angezeigt. Lassen Sie uns als Nächstes
über die Validierung sprechen. der Validierung wird sichergestellt, dass Benutzereingaben
den erforderlichen Spezifikationen entsprechen. Dabei wird geprüft richtigen Formate,
Pflichtfelder und akzeptable
Werte vorliegen, die alle zur
Datensicherheit und -qualität
beitragen. Der nächste Punkt sind Indikatoren. Mithilfe von Indikatoren können Benutzer direkt zu
einer bestimmten Folie
navigieren. Dieses Beispiel ist ein Bild
von der DJI-Website, das Indikatoren verwendet
, um Design der Website ansprechender zu
gestalten Als nächstes kommen modale Komponenten. Ein Modell ist ein Popup-Fenster oder Dialogfeld, das über dem Hauptinhalt
einer Website angezeigt wird. Oft wird der Hintergrund abgedunkelt
, um die Aufmerksamkeit auf das Modal zu lenken,
sodass eine
Benutzerinteraktion erforderlich ist, um fortzufahren Das Modal besteht aus drei
Hauptabschnitten. Modaler Titel, der Abschnitt , der die
Überschrift oder den Titel enthält. Modaler Textkörper, der
Abschnitt, in
dem die Hauptinhalte wie
Texte, Formulare und Bilder angezeigt werden. Modales Futter: Der Abschnitt für Aktionen wie die Schaltflächen „Speichern“
oder „Beratung Sie können
den modalen Titel beispielsweise als Datei
löschen angeben, wobei die Stimmung
oder der Haupttext Möchten Sie diese Datei wirklich löschen Das modale Futter würde
zwei Schaltflächen enthalten , von denen die
erste mit Ja und die zweite mit Nein beschriftet wäre.
Als Nächstes haben wir ein Album. Ein Album ist eine Sammlung von Bildern oder Fotos, die zusammen
angezeigt werden, oft auf organisierte und
visuell ansprechende Weise. Benutzer können verwandte
Fotosammlungen
wie Bilder von Veranstaltungen,
Produktpräsentationen und Erinnerungen durchsuchen wie Bilder von Veranstaltungen, Produktpräsentationen und Erinnerungen Als Nächstes folgt die Seitennummerierung.
Die Paginierung ist eine Methode zur Organisation
von Inhalten auf mehreren Seiten in einem Webdesign Es hilft Benutzern,
einfacher zu navigieren und verbessert die Leistung der
Website.
Als nächstes folgt die Warnung. Eine Warnung ist ein Meldungsfeld , das auf einer
Website angezeigt wird, um
den Benutzer auf
wichtige Informationen,
Warnungen oder Bestätigungen aufmerksam zu machen den Benutzer auf
wichtige Informationen,
Warnungen oder Bestätigungen aufmerksam zu Warnungen oder Bestätigungen Benachrichtigungen können
für verschiedene Zwecke verwendet werden,
z. B. für Erfolgsmeldungen, Fehlerbenachrichtigungen
oder wichtige Updates Schauen wir uns diese Beispiele
an. Das erste Bild zeigt eine
Warnung, die angezeigt wird, wenn ein eingegebenes Passwort die erforderlichen Kriterien nicht
erfüllt. Die Warnmeldung lautet: Bitte
geben Sie ein Passwort mit
mindestens acht Zeichen ein, einschließlich Groß
- und Kleinbuchstaben Das zweite Beispiel für eine Warnung wird angezeigt,
wenn die
Registrierung abgeschlossen ist Eine grüne Farbe weist darauf hin, dass der Vorgang erfolgreich war dritte Beispiel für eine Warnung besagt, dass
Sie Ihre
E-Mail-Adresse bestätigen müssen. Diese Warnung soll den Benutzern ein Gefühl der Dringlichkeit
vermitteln und
sicherstellen, dass Sie sie nicht vergessen Außerdem sollte eine gute Website schnell
geladen werden und schnell reagieren Eine schnell reagierende Website ist unerlässlich, um Nutzer zu
binden, Suchranking zu
verbessern, die Konversionen zu
steigern und ein positives
Erlebnis auf allen Geräten zu gewährleisten. Dies erhöht die
Nutzerzufriedenheit und trägt zum Wachstum und Erfolg Ihrer Online-Präsenz bei. Okay, das ist das
Ende dieses Videos. Wir haben uns die wichtigsten Elemente
einer Website angesehen , die Sie kennen sollten. Ich hoffe, Sie fanden dieses Video hilfreich, und ich werde es im nächsten
sehen.
5. Wir bauen eine Website in Canva – Teil 1: Okay, in dieser Lektion werden wir
untersuchen, wie man mit Canva eine
Website erstellt Es gibt viele Möglichkeiten
, eine Website zu erstellen. Ein
fortgeschrittenerer Ansatz
besteht beispielsweise darin, die
Website selbst zu codieren. Sie können auch kostenpflichtige
Website-Builder verwenden, die eine
Vielzahl von Funktionen bieten. Es gibt auch kostenlose Optionen
wie Google Sites oder Canva, mit
denen Sie die
Website kostenlos gestalten Denken Sie daran, dass das Entwerfen
einer Website mit Canva
relativ einfach ist und
nur begrenzte Funktionen bietet Es ist jedoch ein ausgezeichneter
Ausgangspunkt für Anfänger. Lassen Sie uns nun eintauchen und
eine Beispiel-Website
für Media Made Fun erstellen . Okay, lass uns anfangen.
Okay, jetzt führe ich eine Demonstration durch
, um dir zu zeigen, wie man eine Website
erstellt. Für dieses Beispiel werde ich diese Website
erstellen, die Spaß macht, mit Medien
gemacht. Schauen wir uns das jetzt kurz
an. Sobald wir unser Design
erstellt haben, können
wir rübergehen und
diese Vorschau-Schaltfläche hier drücken , um eine Vorschau unserer Website anzuzeigen. Ich möchte mir
das auch auf dem Handy ansehen, aber ich werde einfach die Option „Größe auf Mobilgeräten ändern“
deaktivieren, sodass wir das gleiche
Design-Layout wie auf dem Desktop haben Okay, schauen wir uns jetzt noch einmal die Desktop-Ansicht
an
und wir können nach unten scrollen, um uns die verschiedenen
Seiten anzusehen Okay,
das werden
wir in den
nächsten Videos entwerfen. Ich habe auch Links
zur Website hinzugefügt. Wenn ich zum Beispiel hier auf
diesen Link klicke, auf dem steht, gehe zu unserem YouTube-Kanal, werde
ich auf den YouTube-Kanal verlinken, der Spaß
macht. Okay, lassen Sie uns jetzt
diese Website erstellen. Also habe
ich in Canva unter Vorlagen die Website-Vorlage eingegeben Sie können hier also sehen, dass wir
viele verschiedene
Website-Vorlagen haben viele verschiedene
Website-Vorlagen Wenn Sie mit der Maus über einige
dieser Vorlagen fahren, können
wir mit der Maus oder
dem
Trackpad darüber scrollen , um die
verschiedenen Seiten anzuzeigen Okay, mir gefällt das
Design dieser Vorlage sehr gut, also lasst uns darauf klicken und wir können nach unten scrollen, um die verschiedenen Seiten zu
sehen Klicken wir auf
Diese Vorlage anpassen Dadurch wird diese
Vorlage in einem neuen Tab geöffnet. Wir können nach unten scrollen, um die verschiedenen Seiten
anzuzeigen, und natürlich können wir
die verschiedenen Elemente in
diesem Design anpassen, wenn wir dies wünschen. Okay, hier ist eine weitere Vorlage
, die ich zuvor gefunden habe. Ich denke, das könnte auch
für unsere Website funktionieren. Mir gefällt das Layout der
Bilder für dieses Design. Und hier ist auch noch einer. Dafür gefallen mir auch das Layout
und die Farben. Ich empfehle daher,
viele dieser
verschiedenen Vorlagen durchzugehen , um Sie zu
Ideen für die Erstellung
Ihrer eigenen Website zu inspirieren . Schauen wir uns
diese Vorlage hier an. Dieser ist eigentlich anders. Aber wir können hier
unten klicken, um
die verschiedenen Seiten anzusehen ,
anstatt zu scrollen Klicken wir nun auf Diese Vorlage
anpassen. Wenn wir diese Vorlage öffnen, fehlt uns die
Vorschau-Schaltfläche. Wir haben nur die Schaltfläche Teilen. Das ist vielleicht nicht
die bequemste, aber wir können sie trotzdem verwenden, um einige Designideen zu
sammeln. Gehen wir hier zu dieser Vorlage und Sie können sehen,
dass wir die Vorschau-Schaltfläche haben. Die Vorschau-Schaltfläche
kann sehr nützlich sein, damit Sie sehen können, wie Ihre
Website aussehen wird. Klicken wir zum Beispiel darauf und scrollen
wir nach unten, um die Website
anzuzeigen. Okay, schauen wir uns einfach
kurz ein paar weitere Vorlagen
an. Eine Sache, die ich
empfehle, ist, alle Texte für Ihre
Website in einem Dokument zu haben. Das könnte zum Beispiel ein Word-Dokument oder ein Google Doc sein. Hier habe ich also ein Google-Dokument, das alle Texte
enthält, die ich der Website hinzufügen
möchte. Okay, fangen
wir an, die Website zu erstellen. Fangen wir damit an,
diesen Titel zu kopieren. Also werde ich
dieses Website-Design verwenden und das hier einfügen. Lass uns einfach die Größe ändern. Und
jetzt fügen wir den Untertitel Also werde ich das kopieren und in
das Textfeld unten einfügen in
das Textfeld Ich möchte auch eine Schaltfläche
mit Text haben, aber im Moment ist
dieser gruppiert, also müssen wir die
Gruppierung aufheben, um diesen Text und
dieses Feld anzupassen Okay, jetzt ziehen wir
diesen Text über das Feld. Und jetzt kopieren wir
den Text und fügen ihn aus
meinem Google-Dokument ein. Später werde ich
dies zu einer anklickbaren Schaltfläche machen. Okay, lass uns einfach
die Farbe dafür ändern. Ich möchte eher
eine gelbe Farbe verwenden. Also lass uns diesen versuchen. Es ist ziemlich schwierig, den Text hier zu
sehen, also ändern wir die Farbe
des Textes in Schwarz. Jetzt kannst du das ganz einfach lesen. Okay, jetzt möchte ich eine Zeile hinzufügen. Lassen Sie uns also in den Elementen und der
Form eine Linie wählen. Jetzt klicken wir hier oben auf die Schaltfläche
Linienstil Ich möchte die
Linie etwas dünner machen, also werde ich
die Linienstärke verringern. Ziehen wir das nun nach unten, sodass
es den Untertitel unterstreicht. Lassen Sie uns einfach die Größe ändern und das in
die Mitte stellen. Und lassen Sie uns jetzt den
Untertiteltext etwas größer machen. Okay, lassen Sie uns einfach die
Größe der Zeile ändern. Und ich werde
jetzt die Linienstärke
erhöhen , da wir den
Untertiteltext vergrößert haben Erhöhen wir einfach den Text für diese Schaltfläche, da wir
etwas mehr Platz haben, und ändern wir einfach die Größe und
passen den Haupttitel Okay, lassen Sie uns das Bild jetzt tatsächlich
ändern. Löschen wir also
dieses Bild, das wir
hier haben , indem wir darauf klicken
und auf Löschen klicken. Jetzt
füge ich mein eigenes Bild hinzu. Klicken wir also auf Uploads und dann auf Hochladen
und Bild oder Video Ich habe alle Bilder, die ich für diese Website verwenden
möchte, dem Ordner auf meinem Desktop Lassen Sie uns das jetzt suchen, und das ist das Bild, das ich für den
Homepage-Hintergrund verwenden möchte . Also lass uns
das auswählen und das hinzufügen. Okay, lassen Sie uns die Größe einfach
so ändern, dass es die Seite ausfüllt. Lassen Sie uns nun
die Ebene ändern, da ich
sie hinter dem
Text und am unteren Rand haben möchte sie hinter dem
Text und am unteren Rand haben Klicken wir also mit der rechten Maustaste auf
das Bild und gehen wir zur Ebene und dann zur hinteren Mitte. Jetzt können wir die Form der Schaltfläche sehen. Okay, ich werde diese Zeile ein wenig nach oben
verschieben dann klicken
und die Maus über
die Textzeile oder Schaltfläche ziehen ,
und dann ziehen wir sie nach unten. Der Grund dafür
ist, dass ich das Medium Made
Fun-Logo oben hier
hinzufügen möchte . Also lass uns auf Uploads klicken und ein Bild oder Video
hochladen. Jetzt füge
ich dem Ordner auf meinem Desktop das
Medium Made Fun-Logo hinzu Okay, lass uns klicken, um das hinzuzufügen. Und ich möchte
den Hintergrund entfernen. Das Tool zum Entfernen von Hintergründen ist nur auf Canva Premium verfügbar Wenn Sie also
eine kostenlose Version
von Canva verwenden ,
können Sie diese nicht In diesem Kurs zeige
ich Ihnen jedoch eine kostenlose Alternative dazu, falls Sie Canva Premium nicht
verwenden Okay, also entferne jetzt
den Hintergrund. Lassen Sie uns die Größe ändern und das
neu positionieren. Ich möchte eigentlich eine
Form hinter diesem Logo hinzufügen,
damit das Logo ein bisschen besser
hervorsticht Lass uns auf Elemente
und unter Formen klicken. Ich werde einen Kreis wählen. Lassen Sie uns das neu positionieren und
die Farbe ändern. Ich möchte
dieselbe gelbe Farbe
wie für die Schaltfläche „
Kurs anzeigen“ verwenden für die Schaltfläche „
Kurs anzeigen Okay, lassen Sie uns einfach die Größe ändern und mit der rechten Maustaste
darauf klicken und zur Ebene gehen
und dann auf Rückwärts senden klicken, und dann auf Rückwärts senden klicken da ich
das hinter dem Logo haben möchte Lassen Sie uns das jetzt neu positionieren. Und Sie stellen fest, dass wir
die gelbe Farbe
des Logos nicht so gut erkennen können , da sie der
gelben Farbe des Kreises sehr ähnlich ist Lassen Sie uns also tatsächlich
eine dunklere gelbe Farbe wählen damit wir das Gelb
des Logos etwas besser erkennen können. wir also unter Volltonfarben Wählen wir also unter Volltonfarben diese dunklere gelbe Farbe aus. Um die Konsistenz zu wahren, verwenden
wir dieselbe Farbe auch für die Schaltfläche „Kurs anzeigen“. Allerdings bin ich
mit genau dieser Farbe nicht allzu zufrieden. Lassen Sie uns also tatsächlich auf
diese Schaltfläche zum Hinzufügen einer neuen Farbe klicken, damit ich
die Farbe etwas weiter anpassen kann. Okay, lass uns einfach
diese gelbe Farbe ändern. Und lass es uns hier haben. Und Sie können sehen, dass wir
den Farbcode hier haben. Diese neue Farbe sollte
im Bereich für die Dokumentfarben angezeigt werden . Wenn dies nicht der Fall ist, können
Sie diesen Farbcode jederzeit kopieren und einfügen. Okay, lassen Sie uns dieselbe
Farbe für diesen Kreis verwenden. Okay, jetzt möchte ich
die Helligkeit und den Kontrast
für dieses Hintergrundbild anpassen. Klicken wir also auf dieses Bild
und dann auf Bearbeiten. Und jetzt klicken Sie auf Anpassen. Hier können wir also die
Helligkeit und den Kontrast einstellen. Lassen Sie uns das etwas dunkler machen, also verringern wir
die Helligkeit und versuchen wir es
mit mehr Kontrast. dieses Bild anpassen, hebt sich
der Text von der Masse ab, aber jetzt fügen wir dem Text einige
Effekte hinzu, damit er besser zur Geltung
kommt und etwas interessanter aussieht. Klicken wir also auf den Text
und dann auf Effekte. Und jetzt klicken wir
auf den Schattenstil. Lassen Sie uns den
Schatten in Schwarz ändern. Und dafür passen wir
den Offset und die Richtung an. Und lassen Sie uns
die Transparenz
auf 100 erhöhen , damit wir das klarer
sehen können. Okay, jetzt ist unsere
Homepage fertig. In diesem Video haben wir uns also Website-Vorlagen
angesehen und unsere Homepage erstellt. Im nächsten Video setzen wir den
Aufbau dieser Website fort. Also danke fürs Zuschauen
und wir sehen uns dort.
6. Wir bauen eine Website in Canva – Teil 2: Okay, lassen Sie uns jetzt mit
dem Aufbau dieser Website fortfahren. Zuvor haben wir die Homepage
hinzugefügt, und jetzt werden wir eine weitere Seite
hinzufügen. Auf der Vorlage, die wir verwenden, haben
wir diese Seite hier. Ich möchte
dieses Bild offensichtlich nicht verwenden , also löschen
wir es. Dafür möchte ich nur einen
kleinen Bereich mit etwas Text haben , also lassen Sie uns die
Größe dieser Seite tatsächlich ändern Lassen Sie uns nun die Größe dieses
Textfeldes ändern und es neu positionieren. Lassen Sie uns das noch kleiner machen, also ziehen wir es
von unten und gehen wir jetzt zurück
zu unseren Dokumenten und kopieren und fügen
den Eines sollte noch erwähnt werden:
Ich empfehle, Ihrem Design einen
Namen zu geben
, nur um die Dinge zu organisieren. Klicken wir also
hier oben, um das umzubenennen. Okay, lassen Sie uns die Größe
dieses Textfeldes einfach noch einmal ändern. Und lassen Sie uns die
Fettschrift entfernen und
diese Histaik so gestalten , dass sie
hervorsticht und ein bisschen interessanter aussieht Lassen Sie uns das etwas kleiner machen und die Schriftart tatsächlich
ändern Die Schrift, die ich im
Sinn habe, heißt Inter. Also lass uns
das wählen. Also im Moment die
gesamte Schrift groß geschrieben. Klicken wir also
hier auf diese Schaltfläche , damit nicht alles in Großbuchstaben geschrieben ist Es ist also wie das, was ich in meinem Dokument
hatte. In diesem Feld
unten werde ich also einen Text
aus meinem Dokument
kopieren und einfügen. Wie Sie sehen können, gibt es
viel weniger Text, also werde ich ihn viel größer
machen. Schauen wir uns an, wie der Text
aussieht , wenn er
in der Mitte ausgerichtet ist. Klicken wir also hier auf
diese Schaltfläche, sodass sich der Text in der
Mitte der Box befindet. Lassen Sie uns das neu positionieren. Ich denke, dieser Text sieht jetzt viel
ausgewogener Ich möchte diesen
Untertitel in zwei Zeilen haben. Also werde ich danach die Eingabetaste drücken , also ist es in zwei Zeilen Auch dafür möchte
ich den Interfont verwenden. Wählen wir also alles aus, indem wir
Command A auf dem Mac oder
Control A unter Windows drücken Command A auf dem Mac oder
Control A unter Windows und dann hier oben auf Font klicken Wählen Sie dann erneut die Eingabetaste. Das sieht
jetzt viel konsistenter aus, da dieselbe Schriftart verwendet wird. Erhöhen wir einfach
diese Schriftgröße und machen wir sie auch kursiv. Ich werde die
Schriftart für den Titel anpassen und diese Seite nach oben ziehen, sodass sie noch kleiner ist, sodass wir einen kleineren
Bereich für den Text
haben. Ich möchte dafür keine
ganze Seite haben, aber ich möchte
diesen Titel und Untertitel anzeigen Und stellen wir sicher, dass das
ausgewogen und in der Mitte ist. Jetzt haben wir unsere Homepage und diesen Bereich, den wir zwischen
der nächsten Seite erstellt haben. Also lasst uns jetzt
an der nächsten Seite arbeiten. Also das wird dieser Bereich hier sein. Für die nächste Seite werde
ich mich von
dieser anderen Vorlage
inspirieren lassen. Ich möchte etwas
Ähnliches haben. Also möchte ich ein
Bild und etwas Text haben. Auch ähnlich wie diese Vorlage. Und schauen wir uns
einige der anderen Vorlagen an. Aber ich denke,
dieser hier war der beste. Lassen Sie uns also etwas
Ähnliches erstellen. Dafür möchte ich
Textfelder und Bilder haben. Für die Website-Vorlage, an der
wir gerade arbeiten, werde
ich
dieses
Hintergrundbild und auch diesen Text hier löschen . Und für den Hintergrund
werde ich eine Volltonfarbe hinzufügen. Verwenden wir diese gelbe Farbe
, die wir zuvor verwendet haben. Ich werde das
alles auch hier löschen. Klicken wir also darauf und ziehen es mit
der Maus darüber und drücken auf Löschen. Deshalb möchte ich ein Layout
erstellen, das unseren Kurs und
auch unseren YouTube-Kanal
anzeigt. Also habe ich
hier ein Bild über unseren Kurs. Also lass uns das vom Desktop
aus hinzufügen. Bevor ich das mache, füge ich ein Quadrat hinzu, und das wird mir helfen, die Seite in vier Teile zu
teilen. Klicken wir also darauf und ändern die Größe, sodass es ein Viertel
der Seitengröße Klicken wir nun auf
das Duplikat unten, und ich werde es unten links platzieren Lassen Sie uns die Größe
dieser Quadrate noch einmal so dass
sie genau ein Viertel
der Seitengröße Okay, diese Seite hat also
zwei schwarze Rechtecke
und zwei gelbe Rechtecke und zwei gelbe Ich werde dieses Textfeld einfach kopieren
und einfügen, und wir werden es
für eines der Quadrate verwenden Lassen Sie uns das einfach in der Größe ändern
und neu positionieren. Und dafür klicken wir hier
auf die kursive Schaltfläche, da ich diese Kursivschrift nicht
haben möchte Es unterscheidet sich also
von dem obigen Text. Gehen wir nun zurück
zu unserem Dokument und kopieren
unseren nächsten Text und fügen ihn ein. In dieser Tux-Box
geht es also um unseren Kurs. Lassen Sie uns nun unseren nächsten Text kopieren und
einfügen
, der weitere
Informationen über den Kurs enthält Lassen Sie uns einfach die Größe dieses
Textfeldes ändern und es neu positionieren. Ich werde den Titel fett
formatieren, damit er ein bisschen besser zur Geltung kommt Nochmals, lassen Sie uns einfach die Größe ändern. Ich werde nur die Farbe
ändern, damit sie sich
vom obigen Text abhebt Dafür verwende ich
diese weiße Farbe, aber ich könnte auch eine andere Farbe verwenden, damit sie ein bisschen besser zur Geltung kommt. Aber lassen Sie uns vorerst einfach diese weiße Farbe
verwenden. Wählen wir auf der Startseite die Schaltfläche und den Text aus und duplizieren
wir dies. Lassen Sie uns nun darauf klicken und es auf unsere neue Seite ziehen Lassen Sie uns nun die
Farbe der Schaltfläche ändern. Ändern wir es einfach
in diese graue Farbe. Und lassen Sie uns auch
die Textfarbe auf
Weiß ändern , damit wir
sie etwas einfacher lesen können. Ich werde nur die Größe
dieses grauen rechteckigen Felds da ich den Text länger
hinzufügen werde Lassen Sie uns einfach die Größe dieses Textfeldes und es
hierher ziehen und die Größe ändern,
und lassen Sie uns auch die Größe dieses grauen Rechtecks ändern Es deckt also den gesamten Text ab. Lassen Sie uns nun diesen Text
und das graue Feld auswählen und gruppieren. Also können wir das verschieben und
beide bewegen sich zusammen. Halten wir einfach die Umschalttaste gedrückt
und wählen beide aus. Und jetzt ändern wir die Größe, damit
es dieses gelbe
Rechteck ein bisschen mehr ausfüllt Ich werde die Gruppierung
dieses Textfeldes hier oben einfach aufheben und den
Untertitel etwas näher rücken Lassen Sie uns jetzt die
Umschalttaste gedrückt halten und auf
den Titel oben klicken und dann beide nach unten
ziehen Ziehen wir nun auch den Text
und die Schaltfläche nach oben, damit das Design
etwas ausgewogener aussieht. Okay, lassen Sie uns jetzt ein Bild
in dieses schwarze Quadrat einfügen. Denken Sie daran, dass wir dieses Design zuvor
hochgeladen haben. Also lass uns einfach die Größe ändern und es zu diesem Quadrat
hinzufügen. Ich möchte jedoch, dass es etwas interessanter
aussieht, also werde ich
dieses Design tatsächlich zu einem Modell hinzufügen Gehen wir also links zu Apps und geben wir das Modell ein Und klicken Sie auf Mockups. Hier haben wir also viele
verschiedene Modelle,
sodass dies dazu beitragen kann, dass
unser Design etwas interessanter aussieht Dafür möchte
ich es aber auf einem Laptop haben. also neben der Kategorie
Computer Klicken
wir also neben der Kategorie
Computer auf CEO. Ich wähle einen
dieser Laptops aus. Ich finde, dieser
hier sieht ziemlich interessant aus. Also
lass uns darauf klicken. Und jetzt können Sie sehen
, dass unser Design auf diesem Laptop
erschienen ist. Lassen Sie uns nun klicken und ziehen, um es
neu zu positionieren und die Größe zu ändern. Es hat jedoch nicht
ganz die richtige Größe. Aber eine Sache, die wir tun können, ist
,
diese rechteckige Form tatsächlich zu duplizieren und sie dann darüber zu ziehen. Das schwarze Rechteck
bedeckt also das Design. Lassen Sie uns nun
dieses Modell neu positionieren. Also klicke ich mit der rechten Maustaste auf dieses Mockup-Design und gehe dann
zur Ebene und dann zur hinteren Mitte Also werde ich
dieses schwarze Rechteck löschen da wir es nicht mehr benötigen Lassen Sie uns
dieses schwarze Rechteck einfach in
die gelbe Farbe ändern , die wir in unserem Design
verwenden. Und ich werde dieses Modell einfach in der Größe ändern und neu positionieren, damit es in
die Mitte kommt Okay, ich finde, das
sieht ziemlich gut aus. Jetzt werde ich diese Blackbox
in eine der Farben
aus unserem Mockup-Design
ändern eine der Farben
aus unserem Mockup-Design Ich finde, diese graue Farbe
hier sieht ziemlich gut aus. Und jetzt klicken wir auf
Elemente und geben YouTube ein. Deshalb möchte ich
über unseren YouTube-Kurs sprechen. Also werde ich ein
Foto über YouTube finden. Ich denke, dieser
hier ist geeignet. Also werde ich die
Größe ändern und es über
das
untere linke Rechteck legen über
das
untere linke Rechteck Lass uns das einfach zurückschneiden,
damit es die richtige Größe hat. Lassen Sie uns jetzt klicken und die Umschalttaste
gedrückt halten und alle
Textfelder und die Form
auswählen. Und jetzt kopieren
wir diese, fügen sie ein und ziehen sie in das
untere rechte Rechteck. Jetzt kopiere ich
die nächsten Texte
aus unserem Dokument und füge sie ein. Lassen Sie uns vor dem Einfügen
einfach die Gruppierung aufheben. Und jetzt fügen wir unseren Titel
ein. Ich möchte das in zwei Zeilen haben da es nicht wirklich in eine Zeile
passt. wir also die Eingabetaste
in diesem Textfeld ,
um es in zwei Zeilen zu platzieren Okay, lassen Sie uns einfach die Größe ändern
und das neu positionieren. Und jetzt ändern wir die Farbe dieses
Textfeldes,
damit wir es sehen können Wir haben hier also einige
kontrastierende Farben. Im unteren rechten Rechteck haben
wir den grauen Hintergrund
mit dem gelben Textfeld und im oberen linken Rechteck haben
wir den gelben Hintergrund
mit dem grauen Textfeld Das erhöht den Kontrast, gleicht
aber auch das Design aus Lassen Sie uns auch die Farbe
der Schrift auf Schwarz ändern, damit Sie sie auf diesem
gelben Hintergrund etwas
besser lesen können . Lassen Sie uns nun den Text aus
dem Dokument
kopieren und in
das nächste Textfeld Ich möchte zwei Zeilen
von WhetSaysGraphic Design haben,
und lassen Sie uns hier die Eingabetaste drücken, sodass es Lassen Sie uns das einfach in der Größe ändern
und neu positionieren. Und jetzt positionieren wir auch das Textfeld und
die Form darunter neu Textfeld und
die Form darunter Lassen Sie uns nun den
Text in der Box ändern. Gehen wir also zurück zu unserem Dokument und kopieren den nächsten Textsatz. Und jetzt fügen wir das in
das Textfeld in der Form ein. Außerdem werden wir später Links zu diesen Feldern
hinzufügen. Okay, das ist die nächste Seite
dieser Website und das ist
das Ende dieses Videos. Beim nächsten Video
werden wir
diese Website weiter aufbauen, danke
fürs Zuschauen, und
wir sehen uns dort.
7. Wir bauen eine Website in Canva – Teil 3: Okay, lassen Sie uns jetzt mit
dem Aufbau dieser Website fortfahren. In einer Vorlage hier haben
wir diese Seite. Schauen wir uns
eine weitere dieser Vorlagen an. Schauen wir uns das hier an. Also möchte ich
etwas Ähnliches haben. Für diese Seite
möchte ich also ein Portfolio zeigen, also möchte ich einige
der verschiedenen Dinge zeigen, die wir tun und die Medien lustig gemacht haben. Deshalb möchte ich hier einige Bilder haben , die diesem Design
ähneln. Schauen wir uns diese Vorlage
an. Also möchte ich auch
so etwas erstellen. Okay, gehen wir zurück zu der
Seite, an der wir gerade arbeiten, und ändern wir die Farbe für den Hintergrund dieser Seite. Klicken wir also auf diese
Seite und gehen wir dann zu Farbe. Und lassen Sie uns einige der
Farben von diesen Fotos ausprobieren. Wir können auf CA klicken, um alle Farben
auf diesen Fotos zu sehen. Lassen Sie uns also einige davon ausprobieren. Aber dafür
wählen wir tatsächlich unsere eigene Farbe. Klicken wir also hier auf Neue Farbe hinzufügen und wählen wir unsere eigene Farbe aus. Okay, ich finde das
hier gut. Jetzt haben wir einen kleinen Kontrast zu
der anderen grauen Farbe. Passen wir einfach die
Größe dieses Textfeldes und platzieren wir den
Text in der Mitte Und jetzt kopieren wir den Text aus
unserem Dokument,
fügen ihn ein und fügen ihn
als Titel ein Lassen Sie uns die Farbe auf Weiß ändern, damit dies auf der Seite deutlich
hervorsticht. Und lassen Sie uns jetzt auf all das klicken und
ziehen und es löschen. Schauen wir uns
unsere andere Vorlage an. Also möchte ich ein ähnliches
Bild verwenden. Aber schauen wir uns die anderen Vorlagen
an, und ich möchte
eine ähnliche haben. Also lasst uns
das kopieren und auf unsere Seite einfügen. Natürlich werde
ich das Bild ändern,
ich möchte ein Bild haben, das
eine ähnliche Größe wie dieses hat. Lassen Sie uns das einfach zuschneiden
und die Größe ändern, da ich acht
davon auf diese Seite passen möchte Lassen Sie uns dieses
Design kopieren und einfügen und ein weiteres hinzufügen. Und denk dran, ich
möchte acht hinzufügen. Also lass uns
das weitermachen. Lassen Sie uns nun auf diese klicken und sie ziehen und sie in die Mitte
verschieben Lassen Sie uns die Größe ändern und sie
neu positionieren Denken Sie daran, dass ich acht
davon hinzufügen möchte. Lassen Sie uns hier also etwas mehr
Platz für mehr schaffen. Und lassen Sie uns auf all diese klicken und mit der
Maus darüber ziehen. Und jetzt drücken wir die Taste
zum Duplizieren. Und jetzt können Sie sehen,
dass wir acht davon haben. Lassen Sie uns diese einfach neu positionieren
, sodass sie gleichmäßig verteilt sind. Und lassen Sie uns sie einfach
leicht nach oben verschieben. Und auch der Titel. Lassen Sie uns etwas mehr Platz schaffen,
also ziehen wir hier nach unten. Und lassen Sie uns diese
Bilder einfach ein wenig nach unten verschieben. Und jetzt möchte ich unten
einige Schaltflächen hinzufügen. Kopieren wir also
diese Schaltfläche und fügen sie hier ein
und ändern wir die Größe, sodass wir für jedes dieser Bilder
eine Schaltfläche haben für jedes dieser Bilder
eine Schaltfläche Okay, lassen Sie uns dieser Schaltfläche etwas
Text hinzufügen. Gehen wir also zurück zu unserem
Dokument und fügen den nächsten Text hinzu. Lassen Sie uns das jetzt kopieren und einfügen. Und lassen Sie uns
das nächste Textfeld umbenennen. Lassen Sie mich
das zuerst neu positionieren. Lassen Sie uns zu unserem Dokument zurückkehren und
den nächsten Text kopieren und einfügen Lassen Sie uns nun dieses Feld kopieren und
einfügen. Wenn Sie möchten, können wir auch
eine Schaltfläche zum Duplizieren können wir auch
eine Schaltfläche zum Duplizieren verwenden,
anstatt Kopieren
und Einfügen zu verwenden. Wir können auch klicken
und die Umschalttaste gedrückt halten und dann auf Mehr klicken, um mehrere Elemente
auszuwählen. Jetzt können Sie diese Schaltfläche zum
Duplizieren drücken, wodurch
diese vier Felder dupliziert werden Ziehen wir das nun
unter die nächsten vier Bilder. Okay, lassen Sie uns den nächsten Text hinzufügen, also kopieren wir
ihn und fügen ihn aus unserem und dem nächsten Dokument ein. Und wieder für die fünfte Box. Dann für die Sechs-Box. Dann siebte Kiste.
Und achte Kiste. Ich glaube, es ist
wichtig, dass Sie
alle Ihre Texte fertig haben , bevor Sie mit dem Aufbau Ihrer Website beginnen. Okay, lassen Sie uns jetzt
unsere eigenen Bilder hinzufügen und dann auf Bild oder Video hochladen
klicken. Hier auf dem Desktop
habe ich mein nächstes Bild, das
ich hier hinzufügen möchte. Lass uns das jetzt anklicken und über
das Bild ziehen. Klicken wir erneut auf
Bild oder Video hochladen
und wählen wir das nächste Bild aus. Ziehen wir das jetzt
auf das zweite Bild. Lassen Sie uns das einfach neu positionieren und jetzt auf Bild oder Video
hochladen klicken und das dritte Bild hinzufügen Lassen Sie uns das erneut anklicken und
ziehen , um es neu zu positionieren Machen wir jetzt dasselbe
für das vierte Bild. Lassen Sie uns einfach die Größe ändern und es neu positionieren , weil wir wollen, dass diese Bilder
ausgewogen Und lassen Sie uns das jetzt für
das fünfte Bild machen. Lassen Sie uns einfach die Größe ändern, damit wir ein bisschen
mehr von diesem Buch sehen können Lassen Sie uns das etwas drehen, da ich denke, das wird ein bisschen besser
aussehen Okay, machen wir dasselbe
für die sechs Bilder. Ich kann hier nicht
den gesamten Laptop sehen, also werde ich die Größe ändern damit wir
mehr vom Laptop sehen können Und für dieses Beispiel werde
ich dieses Bild tatsächlich etwas
breiter machen , da es immer noch vom
Laptop abgeschnitten wird Lassen Sie uns das Bild
oben auch breiter machen ,
damit es ausgewogen ist Ich mache
das mit allen Bildern, damit sie alle die gleiche Größe haben,
weil es ein bisschen
seltsam aussehen könnte , wenn es
nur zwei Bilder gibt , die größer sind als die anderen. Eines der großartigen
Dinge an Canva ist, dass dir, wenn du die
Größe eines Bilds änderst, die genaue Größe angezeigt
wird Du musst also nicht raten, um
sicherzugehen , dass es dieselbe Größe hat Sie können anhand dieser Zahlen erkennen
, dass es dieselbe Größe hat. Lassen Sie uns das Gleiche auch für
diese Textfelder unten tun. Lassen Sie uns sie etwas breiter machen, damit sie der Größe
der obigen Bilder entsprechen. wir außerdem sicher
, dass sich der Text in
der Mitte des Felds befindet ,
damit er ausgewogen aussieht. A Lassen Sie uns
diesen Text und das Feld einfach gruppieren diesen Text und das Feld , weil es sich an der
richtigen Position befindet. Und wenn wir es gruppieren, wird es
uns davon abhalten, Dinge nach Umfang zu verschieben. Ich habe derzeit also keine Bilder für das Webdesign oder die Gestaltung von Lebensläufen, aber das werden
sie in Zukunft hinzufügen. Im Moment
ist diese Website noch in Arbeit. Und denk dran: Wenn du
eine Seite oder Website in Canva
erstellst, kannst du später jederzeit darauf
zurückkommen Du musst nicht
alles auf einmal erledigen. Okay, das ist also
der Bereich für kreative Arbeit oder Portfolio
der Website. Wenn Sie Links zu
verschiedenen Websites haben, können
Sie
diese Schaltflächen jederzeit hier verlinken. Ich werde Ihnen später zeigen, wie Sie Links
hinzufügen können. Okay, damit ist dieses Video
beendet. Als Nächstes werden wir mit dem
Aufbau dieser Website fortfahren. Also danke fürs Zuschauen
und wir sehen uns dort.
8. Wir bauen eine Website in Canva – Teil 4: Okay, lassen Sie uns jetzt weiter
an dieser Website arbeiten. Als Nächstes möchte ich
eine Seite „Über uns“ erstellen. Schauen wir uns einige
der anderen Vorlagen an. Ich bin an keiner von
diesen interessiert für das, was ich gerade will. Schauen wir uns
die andere Vorlage an. Das Gleiche gilt für dieses. Es gibt hier wirklich
nichts, was ich will. Und schauen wir uns
die andere Vorlage an. So etwas
ist ziemlich gut, aber ich möchte
ein Bild haben , um es
ein bisschen persönlicher zu machen. Wie gesagt, ich möchte, dass dies
eine Seite über uns ist. Also werde ich all diese
Kontaktdaten
anklicken und ziehen und löschen, und lassen Sie uns
dieses Hintergrundbild tatsächlich löschen. Klicken wir hier auf Farbe und ändern wir die
Farbe des Hintergrunds. Wählen wir dafür
einen weißen Hintergrund. Lassen Sie uns jetzt eine weitere Seite hinzufügen, und ich werde diese
letzte Seite viel kürzer machen, da dies das Material sein wird
, das ich später hinzufügen werde. Ändern wir die
Fotofarbe in diese graue Farbe und erstellen wir nun
die Seite „Bei uns“. Dafür
möchte ich ein Textfeld haben,
dieses Textfeld kopieren und hier einfügen Kopieren wir also dieses Textfeld
und fügen es auf unserer Seite ein. Lassen Sie uns die Farbe ändern
, da die Farbe
des Textes weiß ist und wir ihn derzeit nicht sehen
können Also lass es uns auf Schwarz ändern. Ich möchte nicht, dass
dieser Text zentriert ist. Klicken wir hier oben auf diese Schaltfläche, und jetzt befindet sich
der Text links neben dem Feld. Okay, lassen Sie uns jetzt zu
unserem Dokument zurückkehren und den nächsten Text kopieren
und einfügen. Das wird also unser
Titel für diese Seite sein. Also lass uns das kopieren
und hier einfügen. Denken Sie daran, dass Sie mit
Control C unter Windows
oder Command C und
Mac kopieren und mit Control V
unter Windows oder Command V auf Mac einfügen können Control C unter Windows
oder Command C und Mac kopieren und mit Control V . Ich möchte das auch in zwei Zeilen haben
. Also werde ich
vor diesem Wort hier die Eingabetaste drücken. Lassen Sie uns das einfach neu positionieren
und seine Größe ändern. Und jetzt fügen wir ein Bild hinzu. Klicken wir also auf Uploads und laden dann ein
Bild oder Video Jetzt werden wir
ein Foto von mir hinzufügen. Wenn Sie also
ein Foto von sich
auf Ihrer Website haben möchten , empfehle
ich, ein professionelles Foto zu machen. Dies kann dazu beitragen, die Glaubwürdigkeit zu erhöhen und Sie
viel professioneller aussehen zu lassen Jetzt möchte ich ein weiteres Textfeld
hinzufügen Klicken wir also auf der anderen Seite auf diesen Text und
fügen ihn hier Auch hier ist es in Weiß, also ändern
wir es in Schwarz. Ich möchte auch, dass der
Text links ausgerichtet ist, also klicken wir
hier auf diese Schaltfläche , damit er nicht mehr zentriert ist. Ich möchte auch ein anderes
Textfeld haben, also werde ich
hier die Schaltfläche „Duplizieren“ drücken
, um dieses Textfeld zu duplizieren Gehen wir jetzt
zu unserem Dokument und kopieren und fügen
den nächsten Also als nächstes kommt mein Name. Ich werde das nur ein bisschen größer machen. Und lassen Sie uns das auch fett und kursiv machen
, damit es hervorsticht und ein bisschen anders
aussieht. Und jetzt gehen
wir zum Dokument und kopieren den nächsten Text. Und lassen Sie uns das
in das nächste Textfeld einfügen. Ich möchte das auch kursiv haben, damit es hervorsticht und
etwas interessanter aussieht, aber lassen wir es nicht fett, damit es sich
vom obigen Text unterscheidet Auch hier möchte ich
ein weiteres Textfeld haben, also lassen Sie uns das duplizieren Für diesen nächsten Text
möchte ich ihn nicht kursiv haben, und ich möchte
den Text viel
kleiner haben , da ich hier viel mehr Text
hinzufügen werde Gehen wir also zu unserem Dokument über und kopieren den nächsten Text. Und lassen Sie uns das
in das Textfeld einfügen. Lassen Sie uns das einfach in der Größe ändern
und neu positionieren. Und ich möchte, dass dieses Textfeld
mit einem Foto übereinstimmt Dafür möchte ich, dass
der Text einen bestimmten Abstand hat. Klicken wir also
hier oben auf die
Ausrichtungsschaltfläche und wählen Sie eine
Leerzeichen-Textausrichtung Okay. Ich finde, das sieht jetzt
etwas ausgewogener aus. Und noch einmal, lassen Sie uns einfach die Größe ändern
und diesen Text neu positionieren. Lassen Sie uns das Bild einfach verschieben damit es etwas
ausgewogener ist, und lassen Sie uns die Größe ändern und es
erneut neu Das ist also eine ziemlich einfache Seite, aber ich finde, sie
sieht ziemlich effektiv und sie ist gut gestaltet
und ausgewogen Ziehen wir hier einfach
die Fußzeile nach oben , weil wir den ganzen
leeren Platz unten nicht brauchen Lassen Sie uns auch einfach die Seiten
dieses Fotos neu positionieren
und zuschneiden , da wir an der Seite etwas
Totraum haben Okay, das ist also der Abschnitt
über einen. Als Nächstes werden wir eine Fußzeile
erstellen und einige Links
hinzufügen, was wir im nächsten Video
tun werden Also danke fürs Zuschauen
und wir sehen uns dort.
9. Wir bauen eine Website in Canva – Teil 5: Okay, lassen Sie uns jetzt eine Fußzeile hinzufügen und einige Links
zu dieser Also haben wir hier zuvor diesen Fußzeilenbereich
erstellt. Wir können hier nach oben oder unten ziehen , um die Größe der Seite zu ändern Für diese Fußzeile
möchte ich das Textfeld hinzufügen. Gehen wir also hierher und suchen
das Textfeld und kopieren
es mit Befehl C. Jetzt fügen
wir es ein und positionieren es in der Mitte neu Gehen wir nun zurück
zu unserem Dokument, und hier möchte ich
die Copyright-Informationen
für die Website einfügen die Copyright-Informationen
für die Also lasst uns das kopieren und in
dieses Textfeld einfügen. Lass uns das einfach etwas nach unten verschieben
. Und jetzt fügen wir einige Symbole hinzu. Hier möchte ich einige
Social-Media-Symbole hinzufügen , die auf andere Websites verweisen können. Lassen Sie uns zunächst ein YouTube-Symbol
finden, das auf den YouTube-Kanal „Media
Make Fun“ verweist. Geben wir also in den Elementen das YouTube-Symbol ein. Und lass uns dieses hier auswählen. Ich möchte auch die
Farbe ändern, also klicken wir auf Farbe
und ich möchte sie in Weiß ändern
, und ich möchte sie in Weiß ändern damit sie mit
dem Text unten übereinstimmt. Natürlich ist das
YouTube-Symbol rot, aber ich denke, dass die Verwendung von Weiß viel besser zu diesem
Design
passt. Okay, lassen Sie uns einfach die Größe ändern
und es neu positionieren und jetzt fügen wir ein weiteres Symbol Auch hier möchte ich
das als kreisförmiges Symbol haben,
also geben wir auch den Kreis ein also geben wir auch den Okay, der hier sieht gut aus. Und wieder möchte ich
die Farbe auf Weiß ändern. Klicken wir also auf Farbe
und dann erneut auf Weiß. Lass uns auf das YouTube-Symbol klicken und es
über das YouTube-Symbol lenken und Größe ändern, damit wir
es exakt auf die gleiche Größe bringen können Jetzt sind sich diese Icon-Designs
also sehr ähnlich. So können wir diese Symbole mit
unserem Kurs und auch mit
unserem YouTube-Kanal verknüpfen . Lass uns jetzt rauszoomen und
einen Blick auf unsere Website werfen. Wir haben also eine
Homepage, Informationen über unseren Kurs und
YouTube-Kanal, dann haben wir einen Portfolio-Bereich und über einen Bereich
und ein Futter. Dies ist eine sehr einfache Website, aber wenn du eine einfache Website
wie diese
erstellen möchtest , kann Canva großartig sein Wenn Sie eine
komplexere Website wünschen, möchten Sie vielleicht
etwas wie WordPress
oder einen anderen Website-Builder verwenden , der mehr Funktionen bietet Aber wie gesagt, wenn du
einfach etwas
Einfaches willst , kann Canva großartig sein Okay, lass uns jetzt ein paar Links hinzufügen. Für diese Schaltfläche hier möchte
ich also einen
Link zum Kurs hinzufügen. Also hier habe ich einen Link
zum Kurs in meinem Dokument. Und lass uns mit der rechten Maustaste
darauf klicken und zu Link gehen. Und jetzt können wir unseren Link
einfügen. Wenn die Leute darauf klicken, wird
es zu unserem Kurs weitergeleitet. Sie können hier also sehen, dass
dies unser THL-Link ist. Sie werden feststellen, dass der
Text nach dem Hinzufügen des Links unterstrichen
wurde. Drücken Sie dann die
Unterstreichungstaste, damit er nicht
unterstrichen wird Lassen Sie uns diesen Button jetzt hier verlinken. Das geht auf unseren
YouTube-Kanal. Hier haben wir den Link
zu unserem YouTube-Kanal. Und noch einmal, lass uns mit der rechten
Maustaste auf diese Schaltfläche klicken und zu Link gehen und ihn
dann hier einfügen. Ich möchte auch nicht, dass dieser
Text unterstrichen wird. Drücken wir
also die Unterstreichungstaste, damit der Text nicht
unterstrichen wird Okay, lassen Sie uns einige Links
zu den Symbolen im Futter hinzufügen. Wählen wir also dieses
YouTube-Symbol hier aus, indem wir darauf klicken. Und jetzt
klicken wir mit der rechten Maustaste und gehen zu Link. Lassen Sie uns erneut
den Link
zum YouTube-Kanal
hier einfügen und auf Fertig klicken. Machen wir jetzt dasselbe
für dieses andere Symbol. Gehen wir zurück zu unserem Dokument und kopieren den Link
für den Kurs. Klicken wir also mit der rechten Maustaste
darauf, gehen wir zu Link, fügen diesen und hier ein
und wählen Fertig. Schließen wir einfach diesen
Tab an der Seite und schauen wir uns unsere vollständige Website
an. Wir können uns auch eine Vorschau
davon ansehen, indem hier oben auf
die Vorschau-Schaltfläche klicken. Lassen Sie uns vorerst einfach die Option
Navigationsmenü einbeziehen deaktivieren. Sie haben bemerkt, dass
wir hier unten dieses Kontrollkästchen
für das Navigationsmenü einbeziehen Sie können also hier oben sehen,
dass wir diese verschiedenen Tabs haben und diese nicht wirklich mit unserer Website
übereinstimmen. Wir können die Größe
auch für Mobilgeräte ändern. Und für das Handy
haben wir das Navigationsmenü, wenn wir oben rechts auf diese
Schaltfläche drücken Was wir jetzt tun wollen, ist das Navigationsmenü zu
ändern. Lassen Sie uns also das
Navigationsmenü mit unserer Website abgleichen. Lassen Sie uns also diese Vorschau schließen. Wir können das
Navigationsmenü ändern indem wir hier unten auf Notizen klicken. Lernen Sie für diesen Abschnitt hier also von Experten. Ich werde
das kopieren und als
Seitentitel der Notizen einfügen. Also das wird jetzt Teil
des Navigationsmenüs sein. Gehen wir also zu
dieser anderen Seite hier, auf der ich
die Projekte zeige. Und in den Notizen nennen wir
diese Seite Projekte. Gehen wir nun hier
zur nächsten Seite, da diese Informationen über den Kurs und den YouTube-Kanal enthält. Wir könnten es auch
Inhalt oder Kurse nennen. Aber dafür
nennen wir es Kontakt. Und wenn wir jetzt hier auf
die erste Seite klicken, heißt
es Zuhause, und
lassen wir diese Seite zu Hause. Okay, lassen Sie uns die Notizen schließen. Und jetzt klicken wir auf
die Vorschau-Schaltfläche. Gehen wir zur Desktop-Ansicht
und Sie können sehen, wie
das
Navigationsmenü mit unseren Seiten übereinstimmt. Okay, das ist also nur
eine sehr schnelle Möglichkeit eine Website in Canva zu erstellen Canvas Website Builder
ist ziemlich einfach, aber wenn Sie eine einfache Website
erstellen möchten, kann
dies sehr nützlich sein Wie gesagt, wenn Sie etwas Komplexeres
erstellen möchten, möchten
Sie vielleicht Wordpress oder
einen anderen Website-Builder verwenden , mehr Funktionen und Merkmale bietet. Aber für eine Website, wie
ich sie hier entworfen
habe, kann Canva meiner Meinung nach großartig sein Okay, damit ist dieses Video
beendet. Wir haben uns mit dem
Aufbau dieser Website befasst. Ich hoffe, Sie fanden
diesen Abschnitt nützlich, und wir sehen uns
im nächsten.
10. Deine Website in Canva veröffentlichen und eine benutzerdefinierte Domain verknüpfen: In dieser Lektion
erfahren Sie, wie Sie eine Website
mit Canva kostenlos
veröffentlichen wie Sie sie mit
einer benutzerdefinierten URL oder über
Go Daddy und Canva
veröffentlichen einer benutzerdefinierten URL oder über
Go Daddy und Okay, schauen wir uns jetzt die Veröffentlichung unserer
Canva-Website an Also werde ich Ihnen zeigen, wie Sie
Ihre Website veröffentlichen können, die eine Canva-Domain
verwendet, und ich werde Ihnen
zeigen, wie Sie
eine benutzerdefinierte Domain verwenden , die wir mit Go
Daddy verknüpfen Wenn du
die benutzerdefinierte Domain verwenden möchtest, ist diese nur
für Canva Pro-Benutzer verfügbar Okay, also zuerst zeige
ich dir die Autobahn. Also werde ich dieses
Design hier mit einer Autobahn veröffentlichen,
die eine Canva-Domain verwendet Also müssen wir nur rüber
gehen, um die Website
hier oben rechts zu veröffentlichen,
und ich empfehle, die Größenänderung auf dem Handy zu überprüfen Und dafür werde ich auch die Navigationsleiste
einbauen die Navigationsleiste
einbauen Geben Sie dann als Website-URL den Namen Ihrer Website ein. Wie gesagt, dies wird eine Canva-URL
sein,
also alles, was Sie in
Herem Dot Canva Dot Site eingeben Herem Dot Canva Dot Site Du kannst dir also nichts aussuchen, manche Dinge werden mitgenommen Wenn ich zum Beispiel MMF eintippe, können
Sie sehen, dass diese URL nicht verfügbar
ist Aber wenn Sie Media Made Fun eingeben, können
Sie sehen, dass es verfügbar ist Denken Sie also daran, es heißt
Media Made Fun,
Punkt auf meinen Punkt, Cava Dot Sit Also lasst uns jetzt auf die
veröffentlichte Website klicken. Und das Laden kann einen Moment
dauern. Und los geht's. Es heißt, dass unsere Website jetzt live ist. Also können wir das kopieren und einfügen.
Und du kannst sehen, dass es live ist. Und Sie können hier auch
auf Website anzeigen klicken, um zu unserer Dotm
Dot Cava Dot Site-Website zu gelangen Okay, lassen Sie uns das
vorerst schließen und lassen Sie mich Ihnen zeigen,
wie Sie dieses nächste Design
mit einem GoDaddy-Domainnamen verknüpfen Das ist also das andere Design. Und für dieses werde
ich
es mit meiner GoDaddy-Domain verknüpfen es mit meiner GoDaddy-Domain Wenn Sie keine benutzerdefinierte Domain haben
, ist diese nicht relevant Und diese nächste Methode ist nur für Cava Pro-Benutzer
verfügbar Also ich habe meine Godaddy-Website hier
und unter Demins kannst du sehen, dass
meine Domain Okay, jetzt gehen wir zu einer veröffentlichten Website. nun unter der URL der Website Klicken
wir nun unter der URL der Website hier auf die Schaltfläche
Bearbeiten. Jetzt klicken wir
auf Get a New Domain. Wir können also darauf klicken, um
unsere eigene Domain zu verwenden , oder wir
können eine neue Domain kaufen. Dafür
werden wir jedoch unsere eigene Domain verwenden. Und wie Sie hier sehen können, haben
wir dieses Kronensymbol, was bedeutet, dass es nur für Canva Pro-Benutzer
verfügbar Da wir Canva
Pro verwenden, wählen wir
dieses aus und klicken dann auf Weiter Hier können wir also unsere Domain eingeben. Denken Sie daran, bei Go Daddy war
es mediamdfun.com. Also lass uns das kopieren und hier
einfügen. Jetzt klicken wir auf Weiter und jetzt müssen wir uns mit Go Daddy
verbinden. Klicken wir jetzt auf
Login und Auto Connect. Und jetzt heißt es, verbinde
tomdimadefun.com und ändere die DNS-Einträge deiner
Domain Deshalb werde
ich dafür auf Connect klicken. Okay, jetzt heißt es
mediumadefun.com. Es ist jetzt deine Canva-Domain. Also klicken wir jetzt auf Schließen und unsere Domain sinkt jetzt So steht es hier, es ist normalerweise innerhalb von 20 Minuten
erledigt, kann
aber in einigen Fällen bis zu 72
Stunden dauern Wir erhalten auch eine
E-Mail, wenn es fertig ist. Okay, lass uns jetzt auf
Hughes's Domain klicken. Und jetzt können wir hier zu diesem
Dropdown-Pfeil gehen und
unsere kostenlose Domain auswählen, oder wir können hier unsere
benutzerdefinierte Domain auswählen Also werde ich
dafür unsere benutzerdefinierte Domain wählen. Auf Wunsch können wir auch einen
Unterpfad hinzufügen, und ein Unterpfad ist Teil der URL,
die
nach der Hauptdomain steht normalerweise zur Organisation von
Inhalten innerhalb der Website verwendet wird Zum Beispiel
medmadfun.com Slash Blog. Dafür
lasse ich dieses Feld jedoch leer. Wir haben hier auch einige Einstellungen denen wir
unsere Website beschreiben können. Also habe ich hier einfach geschrieben: Lasst uns
dafür sorgen, dass Learning Media Spaß macht. Okay, jetzt klicken wir auf Website
veröffentlichen. Und das Laden wird
einen Moment dauern. Jetzt heißt es also, dass Ihre
Website bald online sein wird. Wir können also hier klicken, um
eine Vorschau der Website anzuzeigen. Sie können hier sehen, dass es sich nicht um
die URL handelt, die Spaß an Medien gemacht hat. Möglicherweise müssen wir
warten, bis dies live ist. Kopieren wir es also über diese URL und fügen es in einen neuen Tab ein. Und du kannst sehen,
dass es noch nicht fertig ist. Also müssen wir alle
warten, bis das live ist. Okay, jetzt
sind es ungefähr 12 Stunden
und Sie können sehen, dass unsere
Website live ist. Eine Sache, die Sie erwähnen sollten, ist, dass der Name Ihrer
Website in einem Tab hier
oben tatsächlich mit dem Titel Ihres
Canva-Projekts
identisch sein wird Titel Ihres
Canva-Projekts
identisch Stellen Sie also sicher, dass Sie Ihr
Canva-Projekt entsprechend benennen. Wenn du nicht
den richtigen Namen hast, kannst
du dein Design jederzeit bearbeiten
und deine Website dann erneut veröffentlichen Dieser Name wird dann
als Name deiner Website aktualisiert Okay, so
können Sie Ihre Website veröffentlichen indem Sie die kostenlose My
Dot Cava-Dot-Seite verwenden
und Ihre Cava-Website mit
Ihrer benutzerdefinierten Go Dadi-Domain verknüpfen mit
Ihrer benutzerdefinierten Go Ich hoffe, Sie fanden
dieses Video nützlich, und ich werde mir das nächste ansehen
11. Erstelle eine Mailchimp-Anmeldeseite und verlinke sie mit deiner Canva-Website: Okay, in dieser Lektion werden
wir uns
ansehen, wie Sie Mel Chimp mit
Ihrer Canva-Website verknüpfen, um Kunden-E-Mails Ihrer Canva-Website zu erfassen.
Also, was ist Melhim? Melchim ist eine Marketingplattform, die
hauptsächlich
für E-Mail-Marketing entwickelt wurde Es hilft Einzelpersonen
und Unternehmen,
E-Mails an ihr Publikum zu senden und deren Leistung zu verfolgen Beliebt bei kleinen und
mittleren Unternehmen. Es beinhaltet auch Funktionen
wie das Erstellen von Landingpages. In diesem Video zeige ich Ihnen,
wie Sie Mailchimp mit
Ihrer Cava-Website verknüpfen, um benutzerdefinierte E-Mails zu
erfassen Mit der richtigen Einrichtung können Sie eine E-Mail-Liste
erstellen, um für Ihre Produkte
oder Dienstleistungen zu
werben und die
direkte Kommunikation
mit Ihrer Zielgruppe aufrechtzuerhalten direkte Kommunikation
mit Ihrer Zielgruppe Okay, jetzt zeige ich
dir, wie
du ein
Anmeldeformular auf Mailchimp erstellst
und es dann mit
deiner Canva-Website verlinkst Im Moment bin ich auf milchip.com und habe Die kostenpflichtige Version von Mailchimp bietet
zwar mehr
Features und Funktionen,
aber lassen Sie uns das einrichten, indem wir
einfach Also Mailchimp, du
musst eine Zielgruppe einrichten,
und das ist eine Liste mit
E-Mail-Adressen und
Namen von Personen, die deiner Mailingliste beitreten
möchten Sobald Sie also eine Zielgruppe
eingerichtet haben, gehen Sie zu Und jetzt
klicken wir auf Neues Formular erstellen. einem Anmeldeformular
können Kunden
also ihre E-Mail-Adresse
und auch ihren Namen eingeben Dieser wird dann automatisch
zu Ihrer Zielgruppe hinzugefügt. Wir haben hier also ein paar
verschiedene Typen. Die einfachste ist eine Landingpage für die
Anmeldung. Dadurch wird also
eine Landingpage erstellt, wir dann
mit unserer Canva-Website verknüpfen können Also lass uns darauf klicken. Also nenne
ich dieses Medium Made Fun Signup und
klicke dann auf Continue to Builder Dann haben wir hier verschiedene
Vorlagen. Aber nur um es einfach zu halten, werde
ich auf diese
klicken, was Ihre Liste erweitert. Aber wenn Sie möchten, können
Sie hier eine
dieser Vorlagen auswählen. Das ist vielleicht etwas stylischer, aber um es einfach zu halten, verwenden
wir dieses hier. Okay, jetzt können wir dieses Anmeldeformular
anpassen. Wir können
Textfelder so mit der Maus überziehen. Und wir können auch
über das Bildfeld ziehen und Bilder hinzufügen, wenn Sie möchten Wenn Sie mit der Maus über das Feld fahren, können
wir hier auf diese
vier Pfeile klicken
und sie durch Ziehen neu anordnen, oder wir können hier auf das
Papierkorbsymbol klicken, um sie zu löschen Lassen Sie uns das für dieses Beispiel löschen. Ich werde hier tatsächlich ein Logo
hinzufügen,
damit die Leute, wenn
sie auf diesen Link
klicken, wissen, dass er
Teil von Media Make
Fun ist , weil sie unser Logo sehen können. Lass uns
hier auf das Bearbeiten-Symbol und dann
auf Logo hochladen klicken. Und dann klicken Sie auf Hochladen. Und hier habe ich mein
Logo als PNG-Datei. Und jetzt klicken wir auf Öffnen, und das wird dieses Logo hochladen. Das ist natürlich zu groß, aber wir können die Größe hier anpassen. Ich werde es aber
ungefähr in dieser Größe haben. Dann können wir
auf Speichern und Schließen klicken. Ich werde nur
dieses Textfeld löschen , das ich zuvor
hinzugefügt habe Klicken wir also auf das
Papierkorbsymbol und dann auf Löschen. Und jetzt
füge ich hier einen Titel hinzu. Also werde ich
unserer Mailingliste beitreten und dann auf
Speichern und schließen klicken. Dann werden wir hier
weitere Informationen hinzufügen. Klicken wir also
hier auf
dieses Stiftsymbol , um dieses Textfeld zu bearbeiten Deshalb habe ich hier Ihren Namen
und Ihre E-Mail-Adresse eingegeben, um in unsere Mailingliste aufgenommen zu werden , wo
Sie
E-Mails über unsere neuesten
Nachrichten und Angebote Okay, dann werde ich
speichern und schließen. Und dafür möchte ich
eigentlich sowohl
den Namen als auch
die E-Mail-Adresse hinzufügen . Klicken wir also hier auf die Schaltfläche
Bearbeiten. Und Sie können hier sehen,
dass wir diese Checkboxen für Vor- und Nachnamen Ich denke also, dass es wichtig ist, den Namen oder
zumindest den Vornamen zu erfassen, dann können Sie ihren Namen jederzeit
zur E-Mail-Adresse
hinzufügen , damit
es persönlicher wirkt Okay, das ist ein sehr
einfaches Anmeldeformular, aber ich denke, für dieses
Beispiel ist es in Ordnung. Klicken wir also erneut auf Speichern und Schließen und Speichern und Schließen. Und dann haben wir
diese nächste Seite hier, und Sie können hier
unter Zielgruppe und Tags sehen , dass Kontakte zu Media Maed Fun
hinzugefügt werden
, also der Zielgruppe oder Liste
, die ich zuvor eingerichtet habe. Wenn die Person ihre
E-Mail-Adresse und ihren Namen
eingibt, wird auch eine
Bestätigungsnachricht angezeigt. Wir können hier auf Design bearbeiten klicken , um die
Bestätigungsnachricht zu bearbeiten. Sie können also jetzt sehen, dass es
sich um dasselbe Anmeldeformular handelt, aber wenn Sie
hier
auf die Schaltfläche Bearbeiten klicken , können wir sehen, dass es hier steht. nach dem
Absenden des Formulars Besuchern nach dem
Absenden des Formulars eine
Bestätigungsnachricht Dann können wir
unsere Bestätigungsnachricht
hier aktualisieren , wenn wir dies wünschen. Ich denke, die
Standardeinstellung ist in Ordnung. Sie können
dies jederzeit ändern, wenn Sie möchten. Wir können auch auf „
Bestätigungsnachricht in der Vorschau anzeigen“ klicken , um dies hier zu sehen. Okay, das ist alles
in Ordnung. Und lass uns auf Kleidung speichern
klicken. Und jetzt werde ich dieses Anmeldeformular
veröffentlichen. Klicken wir also hier auf Veröffentlichen. Und dann können Sie
hier sehen, dass wir unsere URL haben. Klicken wir also mit der rechten Maustaste
darauf und gehen wir zu Kopieren. Und jetzt kehren wir
zu unserer Canva-Seite zurück. Wir haben diese Website bereits
veröffentlicht, aber wenn wir dieses Design bearbeiten, müssen
wir
es erneut veröffentlichen, was in Ordnung ist Klicken wir also auf Design bearbeiten. Also werden wir jetzt eine neue Seite
hinzufügen. Klicken wir also hier auf diese
Schaltfläche, Seite hinzufügen. Und das ist ein bisschen groß,
also lassen Sie uns einfach die Größe ändern. Dann füge ich
ein anklickbares Textfeld in dem die Leute zu unserem
Anmeldeformular weitergeleitet werden Lassen Sie uns also in den Elementen eine Form hinzufügen . Wählen wir
diesen hier aus. Und jetzt zum Text, lassen Sie uns
ein Textfeld hinzufügen . Also habe ich einfach eingetippt Klicken Sie hier, um
unserer Mailingliste beizutreten. Lassen Sie uns den gesamten Text
hier auswählen und die Farbe ändern. Jetzt ändern wir das auf Weiß und ziehen es dann hierher,
damit Sie diesen Text sehen können. Jetzt
klicke ich
hier auf dieses Textfeld und dann
auf Duplizieren Und ich gebe „Treten Sie unserer Mailingliste bei, um die
neuesten Nachrichten und Angebote Okay, legen wir
das in die Mitte
und ziehen wir einfach über beide
, um es nach unten zu verschieben. Und lassen Sie uns das einfach etwas kleiner machen und den ganzen
Text hier auswählen und die Farbe ändern,
damit er ein bisschen besser zur Geltung kommt. Lassen Sie uns
für dieses Beispiel einfach Schwarz wählen. Klicken wir jetzt mit der rechten Maustaste
auf diese Form und gehen wir jetzt zu Link. Jetzt
füge ich die URL
für das Anmeldeformular für männliche Schimpansen Okay, also lass uns auf „Fertig“ klicken. Und dann drücken Sie erneut eins. Machen wir
dasselbe auch für den Text. Klicken wir also mit der rechten Maustaste
darauf und gehen Sie dann zu Link und fügen Sie
dann unsere URL hier ein, drücken Sie Fertig und drücken Sie
dann erneut auf eins. Ich möchte auch nicht, dass dies unterstrichen wird, also lassen Sie uns das hervorheben
und das Häkchen bei On D Line entfernen Dann empfehle ich, eine Vorschau anzusehen
, um sicherzustellen, dass es funktioniert. Und jetzt gehen wir zu dieser Schaltfläche und diesem Text
und klicken darauf Und du wirst feststellen, dass es zu unserem Anmeldeformular
geht. Aber nur für dieses Beispiel habe ich meine
E-Mail-Adresse und meinen Namen
hinzugefügt Okay, jetzt klicken wir auf Abonnieren. Und du kannst jetzt sehen, dass
es Erfolg war, du wurdest
zur Zielgruppe hinzugefügt. Und jetzt, wenn wir zu
Mailchimp zurückkehren und unter Zielgruppe stehen, kannst
du hier sehen, dass meine E-Mail-Adresse
und mein Name hinzugefügt wurden Sobald also jemand
seine E-Mail-Adresse hinzugefügt und das Anmeldeformular abgeschickt hat, wird
er zu einer Mailchimp-Zielgruppe hinzugefügt Gehen wir jetzt zurück zu Canva und veröffentlichen
wir Klicken wir also hier auf die
veröffentlichte Website. Und jetzt klicken wir auf die
neu veröffentlichte Website. Dies kann wiederum
einige Augenblicke dauern. Okay, jetzt kopieren wir unsere URL hierher und fügen sie in einen neuen Tab ein. Hier können Sie sehen,
dass
wir unseren Link haben , der zu unserem Anmeldeformular führt. Okay, so
kannst du Mel hintwv
Canva verlinken , um E-Mails deiner Zielgruppe und Kunden
zu erfassen deiner Zielgruppe und Kunden
zu Also vielen Dank, dass Sie sich dieses Video
angesehen haben. Ich hoffe, Sie fanden es nützlich, und wir sehen uns
im nächsten Video.
12. Vielen Dank und auf Wiedersehen + Kursprojekt: Okay, wir haben
das Ende dieses Kurses erreicht. Vielen Dank fürs Zuschauen
und ich hoffe, Sie fanden es nützlich. Für dein
Klassenprojekt möchte ich, dass du deine eigene
Website in Canva gestaltest Ich möchte dann, dass du
einige Screenshots von deiner Website machst und dann
einen kurzen Absatz darüber schreibst ,
wie du sie erstellt hast und warum Dann poste das als dein
Klassenprojekt, damit ich mir deine Website ansehen und
über deinen kreativen Prozess lesen kann. Nochmals vielen Dank fürs Zuschauen und hoffentlich habe ich
noch einen Kurs gesehen.