{"id":250671,"date":"2022-07-16T11:06:18","date_gmt":"2022-07-16T07:06:18","guid":{"rendered":"https:\/\/cs-webdesigns.com\/?p=250671"},"modified":"2024-08-06T10:40:50","modified_gmt":"2024-08-06T06:40:50","slug":"three-css-tricks-for-your-website","status":"publish","type":"post","link":"https:\/\/cs-webdesigns.com\/en\/webinsights\/tutorials\/divi\/drei-css-tricks-fuer-deine-webseite\/","title":{"rendered":"Three CSS tricks for your Divi website - contact form button, vertical centering & highlight color"},"content":{"rendered":"

[et_pb_section fb_built=“1″ admin_label=“section“ _builder_version=“4.21.2″ background_size=“initial“ background_position=“top_left“ background_repeat=“repeat“ max_width=“90%“ custom_padding=“||0px||false|false“ saved_tabs=“all“ global_colors_info=“{}“][et_pb_row admin_label=“row“ _builder_version=“4.17.6″ background_size=“initial“ background_position=“top_left“ background_repeat=“repeat“ max_width=“90%“ custom_padding=“||0px||false|false“ global_colors_info=“{}“][et_pb_column type=“4_4″ _builder_version=“4.16″ custom_padding=“|||“ global_colors_info=“{}“ custom_padding__hover=“|||“][et_pb_text ul_item_indent_tablet=“20px“ ul_item_indent_phone=“20px“ ul_item_indent_last_edited=“on|desktop“ ol_item_indent_tablet=“20px“ ol_item_indent_phone=“20px“ ol_item_indent_last_edited=“on|tablet“ _builder_version=“4.21.2″ _module_preset=“c0ae98a9-b2c6-434f-a771-66df9e5780aa“ custom_margin=“||||false|false“ locked=“off“ global_colors_info=“{}“]<\/p>\n

Nicht alles l\u00e4sst sich in den Einstellungen von visuellen Buildern (z. B. Divi, Elementor) finden. Im folgenden zeige ich dir drei einfache Tricks, deine Divi-Website aufzuwerten. Es geht dabei konkret um den Button im Kontaktformular, die vertikale Zentrierung und die Hintergrundfarbe, wenn du einen Text markierst.<\/p>\n

[\/et_pb_text][et_pb_text _builder_version=“4.17.6″ _module_preset=“c0ae98a9-b2c6-434f-a771-66df9e5780aa“ custom_margin=“||0px||false|false“ custom_margin_tablet=“||5px||false|false“ custom_margin_phone=“||10px||false|false“ custom_margin_last_edited=“on|phone“]<\/p>\n

CSS-Trick 1: Button im Divi-Kontaktformular zentrieren<\/h2>\n

[\/et_pb_text][et_pb_text ul_item_indent_tablet=“20px“ ul_item_indent_phone=“20px“ ul_item_indent_last_edited=“on|desktop“ ol_item_indent_tablet=“20px“ ol_item_indent_phone=“20px“ ol_item_indent_last_edited=“on|tablet“ _builder_version=“4.18.0″ _module_preset=“default“ custom_margin=“||||false|false“ locked=“off“ global_colors_info=“{}“]<\/p>\n

Wenn du f\u00fcr dein Kontaktformular das Divi-Modul verwendest, wirst du feststellen, dass es keine M\u00f6glichkeit in den Einstellungen gibt, den Absenden-Button zu zentrieren.<\/p>\n

Willst du den Button zentrieren, kannst du daf\u00fcr folgenden CSS-Code verwenden:<\/p>\n

[\/et_pb_text][et_pb_text _builder_version=“4.18.0″ _module_preset=“a6d83b02-7372-4ff4-b162-0128f44094ca“ global_colors_info=“{}“]<\/p>\n

\/* Kontaktformular – Zentrierung Senden-Button *\/
.et_contact_bottom_container{
\u00a0 \u00a0 display: flex;
\u00a0 \u00a0 align-items: center;
\u00a0 \u00a0 justify-content: center;
\u00a0 \u00a0 width: 100% !important;
\u00a0 \u00a0 padding-bottom: 5px;
}<\/p>\n

[\/et_pb_text][et_pb_text _builder_version=“4.18.0″ _module_preset=“default“ locked=“off“ global_colors_info=“{}“]<\/p>\n

F\u00fcge diesen einfach unter Theme-Optionen unten in die Box „Eigene CSS“ ein oder noch besser, wenn du ein Child-Theme verwendest, dort in die Style.css.<\/p>\n

[\/et_pb_text][et_pb_text _builder_version=“4.17.6″ _module_preset=“c0ae98a9-b2c6-434f-a771-66df9e5780aa“ custom_margin=“||0px||false|false“ custom_margin_tablet=“||5px||false|false“ custom_margin_phone=“||10px||false|false“ custom_margin_last_edited=“on|phone“ global_colors_info=“{}“]<\/p>\n

CSS-Trick 2: Elemente vertikal zentrieren<\/h2>\n

[\/et_pb_text][et_pb_text _builder_version=“4.18.0″ _module_preset=“default“ header_text_align=“left“ header_2_text_align=“left“ header_2_text_color=“#3E6787″ header_3_text_align=“left“ header_3_text_align_last_edited=“off|desktop“ locked=“off“ global_colors_info=“{}“]<\/p>\n

Dieser CSS-Trick ist f\u00fcr mich ein Gamechanger. Aus meiner Sicht ist die vertikale Zentrierung im Webdesign elementar wichtig, da es die Arbeit extrem vereinfacht, weil man sich nicht immer mit padding oder margin auf allen Ger\u00e4tegr\u00f6\u00dfen besch\u00e4ftigen muss. Leider bringt Divi das nicht in den Standardeinstellungen mit.<\/p>\n

Dieser Code schafft Abhilfe:<\/p>\n

[\/et_pb_text][et_pb_text _builder_version=“4.18.0″ _module_preset=“default“ background_color=“#E3E3E3″ max_width=“45%“ max_width_tablet=“100%“ max_width_phone=“100%“ max_width_last_edited=“on|tablet“ custom_margin=“||||false|false“ custom_padding=“20px|20px|20px|20px|true|true“ border_radii=“on|20px|20px|20px|20px“ locked=“off“ global_colors_info=“{}“]<\/p>\n

\/* Vertikale Zentrierung *\/
\u00a0 \u00a0 .vertikalzentriert {
\u00a0 \u00a0 display: flex;
\u00a0 \u00a0 align-items: center;
\u00a0 \u00a0 flex-direction: row;
\u00a0 \u00a0 flex-wrap: wrap;
}<\/p>\n

[\/et_pb_text][et_pb_text _builder_version=“4.18.0″ _module_preset=“default“ header_text_align=“left“ header_2_text_align=“left“ header_2_text_color=“#3E6787″ header_3_text_align=“left“ header_3_text_align_last_edited=“off|desktop“ locked=“off“ global_colors_info=“{}“]<\/p>\n

F\u00fcge diesen wie im 1. Trick beschrieben entsprechend hinzu. Danach muss die Klasse noch der gew\u00fcnschten Zeile zugewiesen werden. Navigiere dazu im Builder bei der entsprechenden Zeile<\/strong> (gr\u00fcne Rahmen) in den Einstellungen unter „Erweitert“ zu CSS-Klasse und f\u00fcge dort „vertikalzentriert“ ein.<\/p>\n

[\/et_pb_text][dsm_perspective_image src=“https:\/\/cs-webdesigns.com\/wp-content\/uploads\/2022\/07\/Vertikale-Zentrierung-in-Divi.png“ alt=“Vertikale Zentrierung in Divi mit CSS“ _builder_version=“4.17.6″ _module_preset=“default“ max_width=“30%“ max_width_tablet=“50%“ max_width_phone=“100%“ max_width_last_edited=“on|phone“ module_alignment=“left“ border_color_all=“#3E6787″ global_colors_info=“{}“][\/dsm_perspective_image][et_pb_text _builder_version=“4.17.6″ _module_preset=“c0ae98a9-b2c6-434f-a771-66df9e5780aa“ custom_margin=“||0px||false|false“ custom_margin_tablet=“||5px||false|false“ custom_margin_phone=“||10px||false|false“ custom_margin_last_edited=“on|phone“ locked=“off“ global_colors_info=“{}“]<\/p>\n

CSS-Trick 3: Markierungsfarbe \u00e4ndern<\/h2>\n

[\/et_pb_text][et_pb_text _builder_version=“4.18.0″ _module_preset=“default“ header_text_align=“left“ header_2_text_align=“left“ header_2_text_color=“#3E6787″ header_3_text_align=“left“ header_3_text_align_last_edited=“off|desktop“ locked=“off“ global_colors_info=“{}“]<\/p>\n

Die Markierungsfarbe zu \u00e4ndern, scheint vielen Webdesignern nicht wichtig zu sein. Ich pers\u00f6nlich finde es immer als sehr positiv, wenn auch die Markierungsfarbe, nicht im voreingestellten hellblau erscheint, sondern in den eigenen Brandingfarben.<\/p>\n

Das erreichst du mit diesem kurzen Code (am Beispiel meiner Seite):<\/p>\n

[\/et_pb_text][et_pb_text _builder_version=“4.18.0″ _module_preset=“default“ background_color=“#E3E3E3″ max_width=“45%“ max_width_tablet=“100%“ max_width_phone=“100%“ max_width_last_edited=“on|tablet“ custom_margin=“||||false|false“ custom_padding=“20px|20px|20px|20px|true|true“ border_radii=“on|20px|20px|20px|20px“ locked=“off“ global_colors_info=“{}“]<\/p>\n

\/* Markierungsfarbe anpassen *\/
::-moz-selection {
\u00a0 \u00a0 background: #3e6787;
\u00a0 \u00a0 color:#fccf60;
}<\/p>\n

::selection {
\u00a0 \u00a0 background: #3e6787;
\u00a0 \u00a0 color:#fccf60;
}<\/p>\n

[\/et_pb_text][et_pb_text _builder_version=“4.18.0″ _module_preset=“default“ header_text_align=“left“ header_2_text_align=“left“ header_2_text_color=“#3E6787″ header_3_text_align=“left“ header_3_text_align_last_edited=“off|desktop“ locked=“off“ global_colors_info=“{}“]<\/p>\n

Die Farben musst du nat\u00fcrlich an deine gew\u00fcnschten (Branding-)Farben anpassen.<\/p>\n

[\/et_pb_text][et_pb_text _builder_version=“4.21.2″ _module_preset=“c0ae98a9-b2c6-434f-a771-66df9e5780aa“ custom_margin=“||0px||false|false“ custom_margin_tablet=“||5px||false|false“ custom_margin_phone=“||10px||false|false“ custom_margin_last_edited=“on|phone“ global_colors_info=“{}“]<\/p>\n

Fazit<\/h2>\n

[\/et_pb_text][et_pb_text _builder_version=“4.21.2″ _module_preset=“c0ae98a9-b2c6-434f-a771-66df9e5780aa“ text_text_color=“#000000″ ul_text_color=“#FFFFFF“ border_radii=“on|5px|5px|5px|5px“ global_colors_info=“{}“]<\/p>\n

Wie du siehst, ist CSS-Code zu schreiben oft gar nicht so schwer, kann deine Seite jedoch nochmal um ein paar Prozentpunkte aufwerten. Die Markierungsfarbe empfinde ich pers\u00f6nlich zum Beispiel als Teil des Brandings, wird aber von den wenigsten Websitebetreibern eingesetzt.\u00a0<\/p>\n

[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"

Three examples of how you can increase the satisfaction and experience of your visitors with the help of short CSS commands.<\/p>","protected":false},"author":1,"featured_media":254698,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"Drei CSS-Tricks f\u00fcr deine Divi-Webseite | CS Webdesigns","_seopress_titles_desc":"Drei CSS-Tricks zur Verbesserung deiner Divi-Webseite: Kontaktformular-Button zentrieren, vertikale Zentrierung von Elementen und Markierungsfarbe \u00e4ndern.","_seopress_robots_index":"","_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","iawp_total_views":22,"footnotes":""},"categories":[40],"tags":[],"class_list":["post-250671","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-divi"],"_links":{"self":[{"href":"https:\/\/cs-webdesigns.com\/en\/wp-json\/wp\/v2\/posts\/250671","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cs-webdesigns.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cs-webdesigns.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cs-webdesigns.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cs-webdesigns.com\/en\/wp-json\/wp\/v2\/comments?post=250671"}],"version-history":[{"count":0,"href":"https:\/\/cs-webdesigns.com\/en\/wp-json\/wp\/v2\/posts\/250671\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cs-webdesigns.com\/en\/wp-json\/wp\/v2\/media\/254698"}],"wp:attachment":[{"href":"https:\/\/cs-webdesigns.com\/en\/wp-json\/wp\/v2\/media?parent=250671"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cs-webdesigns.com\/en\/wp-json\/wp\/v2\/categories?post=250671"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cs-webdesigns.com\/en\/wp-json\/wp\/v2\/tags?post=250671"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}