{"id":63336,"date":"2017-02-09T10:32:51","date_gmt":"2017-02-09T09:32:51","guid":{"rendered":"https:\/\/www.ait-themes.club\/?p=63336"},"modified":"2023-10-20T11:30:11","modified_gmt":"2023-10-20T11:30:11","slug":"logo-wordpress-website-how-to-create-add-it-to-your-site-blog","status":"publish","type":"post","link":"https:\/\/www.ait-themes.club\/de\/logo-wordpress-website-how-to-create-add-it-to-your-site-blog\/","title":{"rendered":"Logo und WordPress-Website \u2013 wie Sie sie erstellen und Ihrer Website hinzuf\u00fcgen"},"content":{"rendered":"<p>Auf (fast) jeder Website gibt es ein Logo. Es tr\u00e4gt enorm zum Erscheinungsbild der Website bei, zum ersten Eindruck, den Ihre Besucher beim \u00d6ffnen der Website bekommen, und es ist sicherlich eine Sache der Markenbildung. <strong>Ein gut gestaltetes Logo hilft Ihnen, Ihren potenziellen Kunden die richtige Botschaft \u00fcber Ihr Unternehmen zu \u00fcbermitteln und erh\u00f6ht den Wiedererkennungswert Ihrer Marke.<\/strong> Dies ist der Marketing-Gesichtspunkt in Bezug auf Logos, aber wie sieht es mit der technischen Seite des Problems aus? Wie ein gutes Logo gestaltet sein sollte und welche Parameter es haben sollte. Hier ist der Einblick unseres erfahrenen Designers und Frontend-Entwicklers Peter.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Logo_size_and_dimensions\"><\/span>Logogr\u00f6\u00dfe und -abmessungen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Wenn Sie zum ersten Mal ein Logo entwerfen, denken Sie immer einen Schritt voraus. Oder denken Sie im Idealfall mehrere Schritte voraus und \u00fcberlegen Sie, wo Ihr Logo angezeigt und auf welche andere Weise es verwendet werden soll. Die Gr\u00f6\u00dfe des Logos sollte in Abh\u00e4ngigkeit aller m\u00f6glichen Verwendungszwecke abgeleitet werden. Wenn Sie Ihr Logo mit einer festen Pixelgr\u00f6\u00dfe entwerfen, kann es leicht passieren, dass die Parameter das Drucken in guter Qualit\u00e4t nicht zulassen, da das gedruckte Format eine andere Aufl\u00f6sung als der Bildschirm erfordert. Andererseits, <strong>Wenn Sie Ihr Logo als Vektorgrafik erstellen, k\u00f6nnen Sie es in jeder gew\u00fcnschten Aufl\u00f6sung exportieren.<\/strong><\/p>\n\n\n\n<p>Die Abmessungen Ihrer Logografik sind h\u00f6chst individuell. Achten Sie jedoch darauf, dass das Logo in jeder Gr\u00f6\u00dfe gut aussieht. Wenn ich beispielsweise ein Logo f\u00fcr die Kopfzeile meiner Website entwerfe, sollte ich w\u00e4hrend des gesamten Entwurfsprozesses darauf achten, wie es aussieht.<\/p>\n\n\n\n<p>Es ist besser, ein Logo zu entwerfen, das einfacher ist und keine gro\u00dfen Details enth\u00e4lt, da diese bei kleineren Gr\u00f6\u00dfen verschwinden k\u00f6nnen. Einfachere Logos bleiben immer klar und lesbar. Sie vermeiden die Notwendigkeit, mehrere Variationen desselben Logos zu entwerfen, falls es verkleinert werden muss.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Horizontal_logos_are_easier_to_work_with\"><\/span>Horizontale Logos sind einfacher zu bearbeiten<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Vertikal oder horizontal? Vertikale Logos passen nicht immer proportional zum restlichen Website-Design und sind schwieriger zu bearbeiten. Dies gilt doppelt, wenn es um WordPress-Themes geht. Ber\u00fccksichtigen Sie beim Entwerfen Ihres Logos die Reaktionsf\u00e4higkeit der Website und Sie werden sehen, wie viel besser das horizontale Logo auf verschiedenen Ger\u00e4ten aussieht.<\/p>\n\n\n\n<p>Wenn Sie das Thema bereits ausgew\u00e4hlt haben, pr\u00fcfen Sie, welche Logoabmessungen am besten passen. Oder umgekehrt. <strong>Wenn Sie Ihr endg\u00fcltiges Logo entwerfen lassen, w\u00e4hlen Sie das Thema aus, das eine korrekte Darstellung erm\u00f6glicht.<\/strong> Zumindest, wenn Sie eine Neugestaltung des Themes oder die Erstellung einer neuen Variation Ihres Logos f\u00fcr das Theme vermeiden m\u00f6chten.<\/p>\n\n\n\n<p>Das Logo wird an verschiedenen Stellen auf Ihrer Website oder besser gesagt im WordPress-Theme angezeigt. Dies ist nur ein weiterer Grund, zu komplizierte Logos zu vermeiden.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"400\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2017\/02\/logo-blogpost-dimensions.jpg\" alt=\"Arten von Logos\" class=\"wp-image-63355\" srcset=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2017\/02\/logo-blogpost-dimensions.jpg 900w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2017\/02\/logo-blogpost-dimensions-300x133.jpg 300w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2017\/02\/logo-blogpost-dimensions-768x341.jpg 768w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Logo_content\"><\/span>Logo-Inhalt<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Wenn Sie sich zun\u00e4chst f\u00fcr das Design Ihres Logos entscheiden, stehen Ihnen mehrere Arten von Logos zur Auswahl:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Symbol\/Bild<\/li><li>Logotyp oder Typografie (nur der Name in einer bestimmten Schriftart oder Grafikeinstellungen)<\/li><li>Kombination aus beidem<\/li><\/ul>\n\n\n\n<p>Wie das Logo aussehen sollte, h\u00e4ngt vom Thema der Website\/Gesch\u00e4ftsausrichtung ab. Es sollte eine bestimmte Botschaft widerspiegeln, die sich auf das Unternehmen bezieht. Wenn wir beispielsweise ein Unternehmen mit einem bestimmten Produkt haben, k\u00f6nnen wir dieses Produkt zu einem Teil des Logos machen. Fahrr\u00e4der verkaufen \u2013 ein Rad. Blogbeitr\u00e4ge schreiben \u2013 ein Stift, ein Buch usw. Auf der anderen Seite<strong> Das Logo muss nicht unbedingt etwas Bestimmtes enthalten, es kann eine abstrakte Sache sein, nur einfache geometrische Formen, aber es sollte leicht zu merken sein.<\/strong> Sie k\u00f6nnen sich im Internet inspirieren lassen und sich Beispiellogos auf Behance oder Dribble ansehen.<\/p>\n\n\n\n<p>Wenn Sie keine Idee haben oder nichts Konkretes im Sinn haben, was als Bildteil des Logos verwendet werden k\u00f6nnte, k\u00f6nnen Sie einfach ein typografisches Logo verwenden. Es sind viele Schriftarten verf\u00fcgbar <a href=\"http:\/\/fonts.google.com\" target=\"_blank\" rel=\"noopener\">Schriftarten.google.com<\/a> die f\u00fcr die kommerzielle Nutzung kostenlos sind. Es ist keine Regel, Serifenschriften zu verwenden, die seri\u00f6ser aussehen, aber <strong>Es empfiehlt sich, eine eher schlichte Schriftart zu w\u00e4hlen<\/strong>, nicht wie Comic Sans etc. \ud83d\ude00 Wir werden den Kunden nicht unsere wilden Ideen pr\u00e4sentieren, sie haben ihre eigenen\u2026 Wir wollen sie nicht entmutigen, sondern vielmehr die Conversion-Rate erh\u00f6hen.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"400\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2017\/02\/logo-blogpost-types.jpg\" alt=\"Typografisches Logo\" class=\"wp-image-63354\" srcset=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2017\/02\/logo-blogpost-types.jpg 900w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2017\/02\/logo-blogpost-types-300x133.jpg 300w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2017\/02\/logo-blogpost-types-768x341.jpg 768w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/figure><\/div>\n\n\n\n<p>Wollten wir dennoch ein grafisches Symbol im Logo haben, k\u00f6nnte dieses z. B. aus den Initialen des Namens entstehen. Dies wird h\u00e4ufig verwendet, wenn das Logo den Namen der Person, also ihre Initialen, darstellt.<\/p>\n\n\n\n<p>Heutzutage geht der Trend dahin, einfache Logos zu verwenden. Selbst die gro\u00dfen Unternehmen vereinfachen ihre Marke, es schadet nichts.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2017\/02\/logo-blogpost-redesigns.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"821\" height=\"1024\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2017\/02\/logo-blogpost-redesigns-821x1024.jpg\" alt=\"Logo-Neugestaltung\" class=\"wp-image-63356\" srcset=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2017\/02\/logo-blogpost-redesigns-821x1024.jpg 821w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2017\/02\/logo-blogpost-redesigns-240x300.jpg 240w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2017\/02\/logo-blogpost-redesigns-768x958.jpg 768w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2017\/02\/logo-blogpost-redesigns.jpg 1000w\" sizes=\"auto, (max-width: 821px) 100vw, 821px\" \/><\/a><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center\">Quelle:&nbsp;<a href=\"http:\/\/www.underconsideration.com\/brandnew\/archives\/\" target=\"_blank\" rel=\"noopener\">http:\/\/www.underconsideration.com\/brandnew\/archives\/<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Colours\"><\/span>Farben<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Das Logo sollte in mehreren Farbvarianten erstellt werden. <strong>Die Grundvariante sollte in der Farbe der Marke gehalten sein und die anderen Varianten sollten so gestaltet sein, dass sie f\u00fcr dunkle und helle Hintergr\u00fcnde geeignet sind.<\/strong> Es empfiehlt sich, insbesondere f\u00fcr Druckzwecke auch eine einfarbige Version oder nur eine zweifarbige Version zu haben. In diesem Fall ist es auch sinnvoll, zu pr\u00fcfen, ob nicht unn\u00f6tige Details vorhanden sind, die ohnehin nicht gedruckt werden k\u00f6nnen.<\/p>\n\n\n\n<p>Die Farbe des Logos sollte mit dem \u00fcbrigen Farbschema des Webs \u00fcbereinstimmen. Ein Logo muss nicht unbedingt farbenfroh sein, um Aufmerksamkeit zu erregen. Es reicht aus, nur eine Farbe zu verwenden oder die beiden Farben zu kombinieren, wenn Sie keine Lust auf die Kombination mehrerer Farben haben. Der Name wird je nach Hintergrund meist in dunklen Farben, nahe Schwarz oder alternativ Wei\u00df dargestellt und dann ist das grafische Symbol farbig. Aber es ist nicht die Regel.<\/p>\n\n\n\n<p>Es gibt auch verschiedene Generatoren im Internet, die Ihnen dabei helfen k\u00f6nnen, mehrere Farben zuzuordnen, z <a href=\"https:\/\/coolors.co\/app\" target=\"_blank\" rel=\"noopener\">coolors.co\/app<\/a>&nbsp;Schau dir das an <a href=\"https:\/\/www.canva.com\/colors\/color-wheel\/\" target=\"_blank\" rel=\"noopener\">Farbrad-Werkzeug <\/a>von Canva und w\u00e4hle deine perfekte Kombination.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Setting_up_logo_in_your_WordPress_theme\"><\/span>Einrichten eines Logos in Ihrem WordPress-Theme<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Die Demo des WordPress-Themes zeigt Ihnen, wie Ihr Logo in den verschiedenen responsiven Layouts der Website angezeigt wird. Wie bereits erw\u00e4hnt: Wenn Sie Ihr Logo bereits entworfen haben, w\u00e4hlen Sie das am besten geeignete WP-Thema, das gut zu Ihrem Firmenlogo passt.<\/p>\n\n\n\n<p>Zum Hinzuf\u00fcgen eines Logos zu Ihrer Website, <strong>Gehen Sie zum Theme-Admin und w\u00e4hlen Sie Theme-Optionen.<\/strong><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2017\/02\/blog-logo-01.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"519\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2017\/02\/blog-logo-01-1024x519.jpg\" alt=\"WordPress-Theme-Optionen \u2013 Website-Logo\" class=\"wp-image-63339\" srcset=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2017\/02\/blog-logo-01-1024x519.jpg 1024w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2017\/02\/blog-logo-01-300x152.jpg 300w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2017\/02\/blog-logo-01-768x390.jpg 768w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2017\/02\/blog-logo-01-1536x779.jpg 1536w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2017\/02\/blog-logo-01.jpg 1723w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>Gehen Sie auf der Setup-Seite \u201eThemenoptionen\u201c zu \u201eKopfzeile\u201c. Laden Sie Ihr Logo hoch, indem Sie auf klicken <strong>&quot;Bild ausw\u00e4hlen&quot;<\/strong> Schaltfl\u00e4chentext zur Website-Logo-Einstellung hinzuf\u00fcgen. Klicken Sie auf Optionen speichern.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2017\/02\/blog-logo-02.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"623\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2017\/02\/blog-logo-02-1024x623.jpg\" alt=\"WordPress-Theme-Optionen \u2013 W\u00e4hlen Sie \u201eLogo\u201c.\" class=\"wp-image-63341\" srcset=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2017\/02\/blog-logo-02-1024x623.jpg 1024w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2017\/02\/blog-logo-02-300x183.jpg 300w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2017\/02\/blog-logo-02-768x468.jpg 768w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2017\/02\/blog-logo-02-1536x935.jpg 1536w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2017\/02\/blog-logo-02.jpg 1723w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>Besuchen Sie die Vorschau Ihrer Website, um zu sehen, wie Ihr Logo angezeigt wird.<\/p>\n\n\n\n<p>\u00dcber die Gestaltung Ihres ersten Logos sollten Sie sich viele Gedanken machen. Konzentrieren Sie sich auf die Botschaft, die Sie Ihren Kunden senden m\u00f6chten. Es wird Ihre Marke noch viele Jahre lang repr\u00e4sentieren. Ein gut gestaltetes Logo wird Ihnen lange in Erinnerung bleiben und erfordert keine gro\u00dfen \u00c4nderungen. Denken Sie daran, dass der Trend dahin geht, Dinge zu vereinfachen, anstatt sie komplizierter zu machen. Wenn Sie also bereits ein Logo haben, das zu viele Details, Farben oder Kurven aufweist, sollten Sie dar\u00fcber nachdenken, eine frische, moderne Version davon zu erstellen. Das Hinzuf\u00fcgen zu Ihrer WordPress-Website ist eine Sache von 3-4 Klicks und schon ist es erledigt.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhalts\u00fcbersicht<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.ait-themes.club\/de\/logo-wordpress-website-how-to-create-add-it-to-your-site-blog\/#Logo_size_and_dimensions\" >Logogr\u00f6\u00dfe und -abmessungen<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.ait-themes.club\/de\/logo-wordpress-website-how-to-create-add-it-to-your-site-blog\/#Horizontal_logos_are_easier_to_work_with\" >Horizontale Logos sind einfacher zu bearbeiten<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.ait-themes.club\/de\/logo-wordpress-website-how-to-create-add-it-to-your-site-blog\/#Logo_content\" >Logo-Inhalt<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.ait-themes.club\/de\/logo-wordpress-website-how-to-create-add-it-to-your-site-blog\/#Colours\" >Farben<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.ait-themes.club\/de\/logo-wordpress-website-how-to-create-add-it-to-your-site-blog\/#Setting_up_logo_in_your_WordPress_theme\" >Einrichten eines Logos in Ihrem WordPress-Theme<\/a><\/li><\/ul><\/nav><\/div>","protected":false},"excerpt":{"rendered":"<p>Auf (fast) jeder Website gibt es ein Logo. Es tr\u00e4gt enorm zum Erscheinungsbild der Website bei, zum ersten Eindruck, den Ihre Besucher beim \u00d6ffnen der Website bekommen, und es ist sicherlich eine Sache der Markenbildung. Ein gut gestaltetes Logo hilft Ihnen, Ihren potenziellen Kunden die richtige Botschaft \u00fcber Ihr Unternehmen zu \u00fcbermitteln und erh\u00f6ht den Wiedererkennungswert Ihrer Marke. Dies ist das [\u2026]<\/p>","protected":false},"author":1,"featured_media":63343,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","_citadela_custom_class":"","footnotes":""},"categories":[4,50],"tags":[],"citadela-post-location":[],"class_list":["post-63336","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-building-websites-in-wordpress","category-citadela-pro-documentation"],"_links":{"self":[{"href":"https:\/\/www.ait-themes.club\/de\/wp-json\/wp\/v2\/posts\/63336","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ait-themes.club\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ait-themes.club\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ait-themes.club\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ait-themes.club\/de\/wp-json\/wp\/v2\/comments?post=63336"}],"version-history":[{"count":1,"href":"https:\/\/www.ait-themes.club\/de\/wp-json\/wp\/v2\/posts\/63336\/revisions"}],"predecessor-version":[{"id":94287,"href":"https:\/\/www.ait-themes.club\/de\/wp-json\/wp\/v2\/posts\/63336\/revisions\/94287"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ait-themes.club\/de\/wp-json\/wp\/v2\/media\/63343"}],"wp:attachment":[{"href":"https:\/\/www.ait-themes.club\/de\/wp-json\/wp\/v2\/media?parent=63336"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ait-themes.club\/de\/wp-json\/wp\/v2\/categories?post=63336"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ait-themes.club\/de\/wp-json\/wp\/v2\/tags?post=63336"},{"taxonomy":"citadela-post-location","embeddable":true,"href":"https:\/\/www.ait-themes.club\/de\/wp-json\/wp\/v2\/citadela-post-location?post=63336"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}