{"id":10819,"date":"2025-10-10T14:30:30","date_gmt":"2025-10-10T12:30:30","guid":{"rendered":"https:\/\/library.cancom.de\/master\/?page_id=10819"},"modified":"2026-05-26T11:40:10","modified_gmt":"2026-05-26T09:40:10","slug":"styleguide-onlineshop","status":"publish","type":"page","link":"https:\/\/library.cancom.de\/master\/styleguide-onlineshop\/","title":{"rendered":"Onlineshop Styleguide"},"content":{"rendered":"\n
\n

Onlineshop Farben<\/h2>\n\n\n\n
\n
\n
\n

CANCOM<\/p>\n<\/div>\n\n\n\n

\n
<\/div>\n\n\n\n

#FF0035<\/p>\n<\/div>\n\n\n\n

\n
<\/div>\n\n\n\n

#DFE3EF<\/p>\n<\/div>\n\n\n\n

\n

CANCOM<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

PARTNER RED<\/p>\n<\/div>\n\n\n\n

\n
<\/div>\n\n\n\n

#FAD9D9<\/p>\n<\/div>\n\n\n\n

\n
<\/div>\n\n\n\n

#FF8F92<\/p>\n<\/div>\n\n\n\n

\n

Adobe | Kyocera | Lenovo<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

PARTNER BLUE<\/p>\n<\/div>\n\n\n\n

\n
<\/div>\n\n\n\n

#BADAFB<\/p>\n<\/div>\n\n\n\n

\n
<\/div>\n\n\n\n

#89BAFF<\/p>\n<\/div>\n\n\n\n

\n

HP | Epson | Apple| Samsung | Eaton<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

PARTNER TEAL<\/p>\n<\/div>\n\n\n\n

\n
<\/div>\n\n\n\n

#C7E7F0<\/p>\n<\/div>\n\n\n\n

\n
<\/div>\n\n\n\n

#8BBDCC<\/p>\n<\/div>\n\n\n\n

\n

Intel | Dell | Technologies | eStuff | Logitech | Jabra<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

PARTNER YELLOW<\/p>\n<\/div>\n\n\n\n

\n
<\/div>\n\n\n\n

#FFEEBD<\/p>\n<\/div>\n\n\n\n

\n
<\/div>\n\n\n\n

#EFC87B<\/p>\n<\/div>\n\n\n\n

\n

Eizo | Paloalto | HPE aruba | Google<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

PARTNER GREEN<\/p>\n<\/div>\n\n\n\n

\n
<\/div>\n\n\n\n

#DAEBD3<\/p>\n<\/div>\n\n\n\n

\n
<\/div>\n\n\n\n

#A7C190<\/p>\n<\/div>\n\n\n\n

\n

Microsoft | Acer | Nvidia<\/p>\n<\/div>\n<\/div>\n\n\n\n

<\/div>\n\n\n\n
\n
\n

NEUTRALE FARBEN<\/p>\n<\/div>\n\n\n\n

\n
\n
\n
<\/div>\n\n\n\n

#DFE3EF<\/p>\n<\/div>\n\n\n\n

\n
<\/div>\n\n\n\n

#C0C6D6<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
<\/div>\n\n\n\n

#E5E5E5<\/p>\n<\/div>\n\n\n\n

\n
<\/div>\n\n\n\n

#CCCCCC<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n

Neutrale Farbt\u00f6ne<\/strong>
k\u00f6nnen herstellerunabh\u00e4ngig f\u00fcr Hintergrundfl\u00e4chen eingesetzt und bei Bedarf durch k\u00fchle oder warme Graustufen erg\u00e4nzt werden.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n\n\n\n
\n
\n

NEW
WHAT\u2019S NEWS<\/p>\n<\/div>\n\n\n\n

\n
<\/div>\n\n\n\n

#D8C7FF<\/p>\n<\/div>\n\n\n\n

\n
<\/div>\n\n\n\n

#9A71DB<\/p>\n<\/div>\n\n\n\n

\n

Hightlight-Akzentfarbe<\/strong>
Lila wird als Akzentfarbe zur Hervorhebung von aktuellen Highlights genutzt.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

SALE
FEATURED PRODUCTS<\/p>\n<\/div>\n\n\n\n

\n
<\/div>\n\n\n\n

#FFD2A6<\/p>\n<\/div>\n\n\n\n

\n
<\/div>\n\n\n\n

#FFB365<\/p>\n<\/div>\n\n\n\n

\n

Sale-Akzentfarbe<\/strong>
Orange wird als prim\u00e4re Akzentfarbe zur Kennzeichnung von Sale-Inhalten eingesetzt.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

Bildvorgaben f\u00fcr den Onlineshop<\/strong><\/h2>\n<\/div>\n\n\n\n
\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\n

Alle Bilder im Onlineshop werden vereinheitlicht dargestellt und m\u00fcssen fest definierten Pixelma\u00dfen und Seitenverh\u00e4ltnissen entsprechen, um eine konsistente Darstellung \u00fcber alle Seiten hinweg sicherzustellen.<\/p>\n\n\n\n

\n

1. Start- \/ Markenwelt- \/ Aktionsseiten<\/h4>\n\n\n\n

Bildgr\u00f6\u00dfe: 1067 px x 600 px<\/strong>
Seitenverh\u00e4ltnis: 16:9
Verwendung: Header-Grafiken im Slider, Teaser auf Marken- oder Aktionsseiten<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n

2. Hersteller-Logos<\/h4>\n\n\n\n

Bildgr\u00f6\u00dfe: 400 px x 400 px<\/strong>
Seitenverh\u00e4ltnis: 1:1
Die Logos sollten auf transparentem Hintergrund (vorzugsweise .SVG, alternativ .PNG) vorliegen, um eine flexible Verwendung auf unterschiedlichen Hintergr\u00fcnden zu erm\u00f6glichen.<\/p>\n\n\n\n

Eine \u00dcbersicht der Hersteller-Logos findest du hier <\/strong><\/a>\u2192<\/a><\/strong><\/span><\/p>\n<\/div>\n\n\n\n

\n

3. Produktbilder<\/strong><\/h4>\n\n\n\n

Bildgr\u00f6\u00dfe: 1000 px x 1000 px<\/strong>
Seitenverh\u00e4ltnis: 1:1
Verwendung: Darstellung von Produkten auf den Shop-Kategorieseiten sowie in der Produktkarussell-Komponente.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Onlineshop Farben CANCOM #FF0035 #DFE3EF CANCOM PARTNER RED #FAD9D9 #FF8F92 Adobe | Kyocera | Lenovo PARTNER BLUE #BADAFB #89BAFF HP | Epson | Apple| Samsung | Eaton PARTNER TEAL #C7E7F0 #8BBDCC Intel | Dell | Technologies | eStuff | Logitech | Jabra PARTNER YELLOW #FFEEBD #EFC87B Eizo | Paloalto | HPE aruba | Google PARTNER […]<\/p>\n","protected":false},"author":11,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"greyd_block_editor_preview":[],"footnotes":""},"top-partner":[],"footer-setting":[],"navpoint":[],"class_list":["post-10819","page","type-page","status-publish","hentry"],"lang":"de","translations":{"de":10819},"pll_sync_post":{},"_links":{"self":[{"href":"https:\/\/library.cancom.de\/master\/wp-json\/wp\/v2\/pages\/10819","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/library.cancom.de\/master\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/library.cancom.de\/master\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/library.cancom.de\/master\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/library.cancom.de\/master\/wp-json\/wp\/v2\/comments?post=10819"}],"version-history":[{"count":4,"href":"https:\/\/library.cancom.de\/master\/wp-json\/wp\/v2\/pages\/10819\/revisions"}],"predecessor-version":[{"id":27808,"href":"https:\/\/library.cancom.de\/master\/wp-json\/wp\/v2\/pages\/10819\/revisions\/27808"}],"wp:attachment":[{"href":"https:\/\/library.cancom.de\/master\/wp-json\/wp\/v2\/media?parent=10819"}],"wp:term":[{"taxonomy":"top-partner","embeddable":true,"href":"https:\/\/library.cancom.de\/master\/wp-json\/wp\/v2\/top-partner?post=10819"},{"taxonomy":"footer-setting","embeddable":true,"href":"https:\/\/library.cancom.de\/master\/wp-json\/wp\/v2\/footer-setting?post=10819"},{"taxonomy":"navpoint","embeddable":true,"href":"https:\/\/library.cancom.de\/master\/wp-json\/wp\/v2\/navpoint?post=10819"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}