{"id":24321,"date":"2020-03-27T07:40:34","date_gmt":"2020-03-27T07:40:34","guid":{"rendered":"https:\/\/www.templatemonster.com\/blog\/de\/?p=24321"},"modified":"2020-03-28T11:56:40","modified_gmt":"2020-03-28T11:56:40","slug":"tutorial-neumorphismus-stil-mit-elementor-pro-erstellen","status":"publish","type":"post","link":"https:\/\/monsterspost.com\/de\/tutorial-neumorphismus-stil-mit-elementor-pro-erstellen\/","title":{"rendered":"Tutorial: Neumorphismus-Stil mit Elementor Pro erstellen"},"content":{"rendered":"<p><span><strong>Das Neumorphismus-Tutorial von Natalia hilft dir, diesen Effekt auf deiner WordPress Website in wenigen Schritten zu realisieren.<\/strong><br \/><\/span><\/p>\n<p><span>Heute werden wir etwas Neues und Trendiges erforschen und tiefer in den Effekt eintauchen, den man Neumorphismus nennt. Der Neomorphismus ist einer der am meisten diskutierten Webdesign- und UI-Trends im Jahr 2020. In dieser Anleitung erstellen wir zwei Layouts, um die Seite im Neumorphismus-Stil zu gestalten.<\/span><\/p>\n<p><span>Ist es m\u00f6glich, diesen Effekt mit Elementor Pro nachzubilden? Aber nat\u00fcrlich! Elementor Pro erlaubt es dir, zu Elementen benutzerdefinierten CSS-Code hinzuzuf\u00fcgen, und dies ist die Funktion, die uns helfen wird, diesen trendigen Look zu erreichen.<\/span><\/p>\n<p><iframe loading=\"lazy\" title=\"Neomorphism Elementor Pro Tutorial | TemplateMonster\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/lwXgQdFWWXo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p><a rel=\"noopener noreferrer nofollow\" href=\"https:\/\/www.youtube.com\/watch?v=lwXgQdFWWXo\" target=\"_blank\">Neomorphism mit Elementor Pro | <\/a><a rel=\"noopener noreferrer nofollow\" href=\"https:\/\/www.youtube.com\/watch?v=lwXgQdFWWXo\" target=\"_blank\"> Tutorial<\/a><a rel=\"noopener noreferrer nofollow\" href=\"https:\/\/www.youtube.com\/watch?v=lwXgQdFWWXo\" target=\"_blank\"> auf Englisch <\/a><\/p>\n<h2><span>Was ist Neumorphismus?<\/span><\/h2>\n<p><span>Der Neomorphismus stellt die Kombination aus der bekannten flachen Benutzeroberfl\u00e4che und alten skeuomorphen Prinzipien dar. Der Hauptvorteil des Neomorphismus ist die \"Frische\". Er verpasst der Schnittstelle ein \"neues Gef\u00fchl\", was den von anderen Stilen unterscheidet. Du kannst es leicht mit anderen Stilen mischen, zum Beispiel mit Skeuomorphismus. Es ist wirklich ein \"weicher Kunststoff\", der sich perfekt f\u00fcr Experimente eignet.<\/span><\/p>\n<p><span>Einige Designer begeistern sich f\u00fcr den Neomorphismus. Gleichzeitig ist dieser Stil der Benutzeroberfl\u00e4che f\u00fcr viele Nutzer, insbesondere f\u00fcr \u00e4ltere Menschen, nicht klar. Es ist sehr schwierig, Informationen zu unterscheiden, da alles flach ist. Sie f\u00fchlen sich m\u00f6glicherweise unbehaglich, weil sie die Benutzeroberfl\u00e4che nicht verstehen k\u00f6nnen. Die Geschm\u00e4cker sind unterschiedlich.<\/span><\/p>\n<h2><span>Komponente des Neumorphismus<\/span><\/h2>\n<p><span>Das Objekt soll die gleiche Farbe haben wie der Hintergrund.<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-24381\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/2-layers-of-box-shadows-one-is-lighter-highlight-and-one-is-darker.jpg\" alt=\"\" width=\"760\" height=\"374\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/2-layers-of-box-shadows-one-is-lighter-highlight-and-one-is-darker.jpg 760w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/2-layers-of-box-shadows-one-is-lighter-highlight-and-one-is-darker-300x148.jpg 300w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><\/p>\n<p><span>Schlagschatten mit 2 Ebenen&nbsp; - die eine ist heller (highlight) und die andere ist dunkler.<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-24396\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Your-object-has-to-have-the-same-color-as-your-background-does.jpg\" alt=\"\" width=\"760\" height=\"369\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Your-object-has-to-have-the-same-color-as-your-background-does.jpg 760w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Your-object-has-to-have-the-same-color-as-your-background-does-300x146.jpg 300w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><\/p>\n<h2><span>Wann du den Neumorphismus vermeiden solltest \u2013 Anwendung<\/span><\/h2>\n<p><span>Nun m\u00f6chten wir darauf etwas n\u00e4her eingehen, in welchen F\u00e4llen der Neumorphismus funktioniert und wann man diesen Effekt besser vermeiden sollte. Auf dem Bild unten ist der Designstil angemessen, weil sich die Karte vom Hintergrund abhebt.<\/span><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-24398\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/In-the-case-below-it-does-work-since-you-see-the-distinction-between-the-card-and-the-background.jpg\" alt=\"\" width=\"555\" height=\"433\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/In-the-case-below-it-does-work-since-you-see-the-distinction-between-the-card-and-the-background.jpg 555w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/In-the-case-below-it-does-work-since-you-see-the-distinction-between-the-card-and-the-background-300x234.jpg 300w\" sizes=\"(max-width: 555px) 100vw, 555px\" \/><\/p>\n<p><span>Es ist jedoch nicht entscheidend, diesen Kontrast zu sehen. Was du nicht tun solltest, ist, diesen Effekt auf einen Button anzuwenden, in der Hoffnung, dass der Benutzer versteht, dass es sich um eine anklickbare Schaltfl\u00e4che handelt. Es ist in Ordnung, wenn der Button ein gew\u00f6hnliches Design erh\u00e4lt.&nbsp;<\/span><\/p>\n<p><span><\/span><span>Hier ist ein weiteres Beispiel f\u00fcr ein gutes Design.<\/span><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-24399\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Letu2019s-check-another-example-with-a-pretty-good-design.jpg\" alt=\"\" width=\"562\" height=\"463\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Letu2019s-check-another-example-with-a-pretty-good-design.jpg 562w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Letu2019s-check-another-example-with-a-pretty-good-design-300x247.jpg 300w\" sizes=\"(max-width: 562px) 100vw, 562px\" \/><span>Du siehst attraktive Karten, aber wir w\u00fcrden es nicht empfehlen, den Effekt f\u00fcr solche Elemente wie Buttons oder andere Icons zu verwenden, mit denen Benutzer normalerweise interagieren. Sei also sorgf\u00e4ltig, wenn es um den Neumorphismus f\u00fcr interaktive Objekte geht. Trotzdem ist das eine gute Idee f\u00fcr die Karten und Grafiken.<\/span><\/p>\n<p><span>Gehen wir jetzt auf den Elementor-Editor und versuchen wir, den Neomorphismus-Effekt selbst zu erzeugen. Wie eingangs erw\u00e4hnt, ist es eine gro\u00dfartige L\u00f6sung, die f\u00fcr die Karten und einige andere minimalistische Layouts verwendet werden kann. Wir werden alle vorhandenen Effekte l\u00f6schen und beginnen von Grund auf neu. Wir verwenden das Posts-Widget.<\/span><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-24392\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Posts-widget.jpg\" alt=\"\" width=\"760\" height=\"394\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Posts-widget.jpg 760w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Posts-widget-300x156.jpg 300w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><span>1.W\u00e4hle CSS class f\u00fcr unsere Karten.<\/span><\/p>\n<p><span>2.\u00dcberspringe zur Vorschau, um auf F12 zu klicken, und w\u00e4hle \u00fcber das Men\u00fc-Icon ein Element auf der Seite aus, um es zu untersuchen. Eine der Karten, \u00fcber die du den Mauszeiger bewegst, soll sich \u00e4ndern.<\/span><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-24394\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Select-an-element-on-the-page-to-inspect-it.jpg\" alt=\"\" width=\"760\" height=\"389\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Select-an-element-on-the-page-to-inspect-it.jpg 760w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Select-an-element-on-the-page-to-inspect-it-300x154.jpg 300w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-24397\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/You-will-get-one-of-the-cards-hovered-over.jpg\" alt=\"\" width=\"760\" height=\"391\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/You-will-get-one-of-the-cards-hovered-over.jpg 760w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/You-will-get-one-of-the-cards-hovered-over-300x154.jpg 300w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/>3.<span>Klicke darauf und finde die Klasse dieser Karte.<\/span><img decoding=\"async\" loading=\"lazy\" width=\"760\" height=\"391\" class=\"wp-image-24384\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Click-it-and-find-where-the-class-of-this-particular-card-is.jpg\" alt=\"\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Click-it-and-find-where-the-class-of-this-particular-card-is.jpg 760w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Click-it-and-find-where-the-class-of-this-particular-card-is-300x154.jpg 300w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/>4.<span>W\u00e4hle die gesamte Klasse aus und kopiere das Ganze, nur um sicherzustellen, dass wir gerade auf diese Selektion von Karten und diese&nbsp; Seite abzielen.<\/span><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-24395\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Select-the-entire-class-and-copy-the-entire-thing.jpg\" alt=\"\" width=\"760\" height=\"390\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Select-the-entire-class-and-copy-the-entire-thing.jpg 760w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Select-the-entire-class-and-copy-the-entire-thing-300x154.jpg 300w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><\/p>\n<\/p>\n<figure class=\"wp-block-image\"><img alt=\"\" \/><\/figure>\n<\/p>\n<p><p>5.<span>Gehe zur\u00fcck zum Editor, w\u00e4hle dein Widget aus, gehe zu Custom CSS und f\u00fcge es direkt dort ein.<\/span><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-24387\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Get-back-to-the-editor-select-your-widget-go-to-Custom-CSS-and-paste-it-right-there.jpg\" alt=\"\" width=\"760\" height=\"392\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Get-back-to-the-editor-select-your-widget-go-to-Custom-CSS-and-paste-it-right-there.jpg 760w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Get-back-to-the-editor-select-your-widget-go-to-Custom-CSS-and-paste-it-right-there-300x155.jpg 300w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><\/p>\n<p><span>6.Gehe zum Tab Stil &gt; Box, um den Hintergrund der Karte zu \u00e4ndern.<\/span><span><\/span><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-24401\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Proceed-to-the-Style-tab-_-Box-to-change-the-background-of-the-card-1.jpg\" alt=\"\" width=\"760\" height=\"393\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Proceed-to-the-Style-tab-_-Box-to-change-the-background-of-the-card-1.jpg 760w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Proceed-to-the-Style-tab-_-Box-to-change-the-background-of-the-card-1-300x155.jpg 300w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><\/p>\n<p><span>7.Stelle den Randradius so ein, dass die Ecken abgerundet werden. Setze ihn auf 15.<\/span><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-24382\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Adjust-the-border-radius-and-change-the-background-color.jpg\" alt=\"\" width=\"760\" height=\"393\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Adjust-the-border-radius-and-change-the-background-color.jpg 760w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Adjust-the-border-radius-and-change-the-background-color-300x155.jpg 300w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/>8.<span>Deaktiviere den Box-Shadow, wenn du ihn eingeschaltet hast. Stelle sicher, dass deine Objekte keinen Schatten haben.<\/span><\/p>\n<p><span>9.Gehe zur\u00fcck zum Tab Advanced &gt; Custom CSS und schreibe\/f\u00fcge den Codeausschnitt aus dem Beschreibungsfeld ein. Schreibe die Styles f\u00fcr den Hover-Zustand.<\/span><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-24386\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Get-back-to-Advanced-tab-_-Custom-CSS-and-write_paste-the-code-snippet-from-the-description-box.jpg\" alt=\"\" width=\"760\" height=\"393\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Get-back-to-Advanced-tab-_-Custom-CSS-and-write_paste-the-code-snippet-from-the-description-box.jpg 760w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Get-back-to-Advanced-tab-_-Custom-CSS-and-write_paste-the-code-snippet-from-the-description-box-300x155.jpg 300w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><span><\/span><\/p>\n<h3><span>Countdown-Timer<\/span> im Neumorphismus-Stil<\/h3>\n<p><span>Gehen wir zum zweiten Fall, einem Countdown-Timer, \u00fcber. Jetzt wenden wir einen anderen Stil an.<\/span><\/p>\n<p><span>1.W\u00e4hle die CSS-Klasse der Karten unseres Countdown-Timers aus.<\/span><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-24391\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Pick-the-CSS-class-of-our-countdown-timer-cards.jpg\" alt=\"\" width=\"760\" height=\"392\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Pick-the-CSS-class-of-our-countdown-timer-cards.jpg 760w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Pick-the-CSS-class-of-our-countdown-timer-cards-300x155.jpg 300w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/>2.<span>Gehe auf die Vorschau und kopiere die genaue CSS-Klasse des ben\u00f6tigten Objekts.<\/span><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-24390\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Jump-to-the-preview-and-copy-the-exact-CSS-class-of-the-object-we-need.jpg\" alt=\"\" width=\"760\" height=\"393\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Jump-to-the-preview-and-copy-the-exact-CSS-class-of-the-object-we-need.jpg 760w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Jump-to-the-preview-and-copy-the-exact-CSS-class-of-the-object-we-need-300x155.jpg 300w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/>3.<span>Gehe zur\u00fcck zum Editor, w\u00e4hle dein Widget aus, gehe zu Custom CSS und f\u00fcge es direkt dort ein.<\/span><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-24387\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Get-back-to-the-editor-select-your-widget-go-to-Custom-CSS-and-paste-it-right-there.jpg\" alt=\"\" width=\"760\" height=\"392\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Get-back-to-the-editor-select-your-widget-go-to-Custom-CSS-and-paste-it-right-there.jpg 760w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Get-back-to-the-editor-select-your-widget-go-to-Custom-CSS-and-paste-it-right-there-300x155.jpg 300w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/>4.<span>Passe border radius an und \u00e4ndere die Hintergrundfarbe.<\/span><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-24383\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Adjust-the-border-radius-and-change-the-background-color-.jpg\" alt=\"\" width=\"760\" height=\"393\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Adjust-the-border-radius-and-change-the-background-color-.jpg 760w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Adjust-the-border-radius-and-change-the-background-color--300x155.jpg 300w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><span>5.Experimentiere mit der Breite des Randes und setze sie auf 2, um zu sehen, welchen Unterschied er macht und wie unterschiedlich der Effekt aussieht.<\/span><span><\/span><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-24402\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Experiment-with-the-width-of-the-border-and-set-it-to-2-1.jpg\" alt=\"\" width=\"760\" height=\"395\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Experiment-with-the-width-of-the-border-and-set-it-to-2-1.jpg 760w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Experiment-with-the-width-of-the-border-and-set-it-to-2-1-300x156.jpg 300w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><span>6.F\u00fcge im Abschnitt Custom CSS die gleichen Stile ein, die du auf die obigen Karten angewandt hast.<\/span><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-24389\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/In-Custom-CSS-section-paste-the-same-styles-you-did-for-the-cards-above.jpg\" alt=\"\" width=\"760\" height=\"389\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/In-Custom-CSS-section-paste-the-same-styles-you-did-for-the-cards-above.jpg 760w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/In-Custom-CSS-section-paste-the-same-styles-you-did-for-the-cards-above-300x154.jpg 300w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><span>Du kannst diesen Stil mit dem Elementor Page-Builder und durch benutzerdefiniertes CSS erreichen. Stelle sicher, dass du die richtige Klasse auf die richtigen Objekte anwendest.<\/span><\/p>\n<p><span>In der Mobil- und Tablet-Ansicht ist die Performance recht gut, so dass es keine ger\u00e4tespezifischen Probleme geben wird.<\/span><\/p>\n<h3><span>Fazit<\/span><\/h3>\n<p><span>Die Welt des Webdesigns \u00e4ndert sich sehr schnell. Nun gewinnt der Neumorphismus immer mehr an Popularit\u00e4t. Um deine Website im Neumorphismus-Stil trendig zu gestalten, solltest du&nbsp; damit ein wenig experimentieren. Verwende verschiedene Stile im selben Design, um etwas wirklich Brillantes zu kreieren. Wir glauben, dass kein Trend allein dominieren wird. Gutes Design ist immer eine Kombination aus Stilen und gutem Inhalt.<\/span><\/p>\n<p><em>Die Anleitung von Natalia haben wir \u00fcbersetzt. Unter dem Link findest du diesen <a href=\"https:\/\/www.templatemonster.com\/blog\/neomorphism-elementor-pro-tutorial\/\" target=\"_blank\">Beitrag auf Englisch<\/a>.&nbsp;<\/em><\/p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Das Neumorphismus-Tutorial von Natalia hilft dir, diesen Effekt auf deiner WordPress Website in wenigen Schritten zu realisieren. Heute werden wir etwas Neues und Trendiges erforschen und tiefer in den Effekt eintauchen, den man Neumorphismus nennt. Der Neomorphismus ist einer der am meisten diskutierten Webdesign- und UI-Trends im Jahr 2020. In dieser Anleitung erstellen wir zwei [&hellip;]<\/p>\n","protected":false},"author":1657845,"featured_media":24324,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[19],"tags":[214],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.11 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Tutorial: So erstellst du Neumorphismus-Elemente mit Elementor Pro<\/title>\n<meta name=\"description\" content=\"Elemente im Neumorphismus-Stil lassen sich mit Elementor Pro erstellen. Dieses Tutorial hilft dir, den Effekt in wenigen Schritten zu erzeugen.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/monsterspost.com\/de\/tutorial-neumorphismus-stil-mit-elementor-pro-erstellen\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tutorial: So erstellst du Neumorphismus-Elemente mit Elementor Pro\" \/>\n<meta property=\"og:description\" content=\"Elemente im Neumorphismus-Stil lassen sich mit Elementor Pro erstellen. Dieses Tutorial hilft dir, den Effekt in wenigen Schritten zu erzeugen.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/monsterspost.com\/de\/tutorial-neumorphismus-stil-mit-elementor-pro-erstellen\/\" \/>\n<meta property=\"og:site_name\" content=\"TemplateMonster Deutscher Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/templatemonster.de\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-03-27T07:40:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-03-28T11:56:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/ux-787980_1920.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1275\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Olga Kulmann\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@TM_Deutschland\" \/>\n<meta name=\"twitter:site\" content=\"@TM_Deutschland\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Olga Kulmann\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/monsterspost.com\/de\/tutorial-neumorphismus-stil-mit-elementor-pro-erstellen\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/de\/tutorial-neumorphismus-stil-mit-elementor-pro-erstellen\/\"},\"author\":{\"name\":\"Olga Kulmann\",\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/person\/8da307d177541069e7bf4abccc1e6130\"},\"headline\":\"Tutorial: Neumorphismus-Stil mit Elementor Pro erstellen\",\"datePublished\":\"2020-03-27T07:40:34+00:00\",\"dateModified\":\"2020-03-28T11:56:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/monsterspost.com\/de\/tutorial-neumorphismus-stil-mit-elementor-pro-erstellen\/\"},\"wordCount\":888,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/de\/#organization\"},\"keywords\":[\"WordPress\"],\"articleSection\":[\"Anleitungen\"],\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/monsterspost.com\/de\/tutorial-neumorphismus-stil-mit-elementor-pro-erstellen\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/monsterspost.com\/de\/tutorial-neumorphismus-stil-mit-elementor-pro-erstellen\/\",\"url\":\"https:\/\/monsterspost.com\/de\/tutorial-neumorphismus-stil-mit-elementor-pro-erstellen\/\",\"name\":\"Tutorial: So erstellst du Neumorphismus-Elemente mit Elementor Pro\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/de\/#website\"},\"datePublished\":\"2020-03-27T07:40:34+00:00\",\"dateModified\":\"2020-03-28T11:56:40+00:00\",\"description\":\"Elemente im Neumorphismus-Stil lassen sich mit Elementor Pro erstellen. Dieses Tutorial hilft dir, den Effekt in wenigen Schritten zu erzeugen.\",\"breadcrumb\":{\"@id\":\"https:\/\/monsterspost.com\/de\/tutorial-neumorphismus-stil-mit-elementor-pro-erstellen\/#breadcrumb\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/monsterspost.com\/de\/tutorial-neumorphismus-stil-mit-elementor-pro-erstellen\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/monsterspost.com\/de\/tutorial-neumorphismus-stil-mit-elementor-pro-erstellen\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/monsterspost.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutorial: Neumorphismus-Stil mit Elementor Pro erstellen\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/monsterspost.com\/de\/#website\",\"url\":\"https:\/\/monsterspost.com\/de\/\",\"name\":\"TemplateMonster Deutscher Blog\",\"description\":\"Just another MonsterPost Sites site\",\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/monsterspost.com\/de\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/monsterspost.com\/de\/#organization\",\"name\":\"MonsterPost Deutschland\",\"url\":\"https:\/\/monsterspost.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Logo-TM.png\",\"contentUrl\":\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Logo-TM.png\",\"width\":180,\"height\":180,\"caption\":\"MonsterPost Deutschland\"},\"image\":{\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/template_monster\/\",\"https:\/\/www.pinterest.com\/templatemonster\/\",\"https:\/\/www.youtube.com\/channel\/UC19iEGcEhlFidO5ruNGE5yg\",\"https:\/\/www.facebook.com\/templatemonster.de\/\",\"https:\/\/twitter.com\/TM_Deutschland\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/person\/8da307d177541069e7bf4abccc1e6130\",\"name\":\"Olga Kulmann\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/514d0fd5ba77426a747ad480e3c87ae5?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/514d0fd5ba77426a747ad480e3c87ae5?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"caption\":\"Olga Kulmann\"},\"description\":\"Olga Kulmann ist Mitglied des deutschen Marketer-Teams von TemplateMonster. Ihr Interessenkreis umfasst von Online-Marketing \u00fcber E-Commerce bis hin zum Webdesign. Olgas Anliegen ist es, die Blogleser mit besten Erfahrungen und gepr\u00fcftem Expertenwissen in diesen Bereichen vertraut zu machen. Olga auf Facebook.\",\"url\":\"https:\/\/monsterspost.com\/de\/author\/kulmann\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tutorial: So erstellst du Neumorphismus-Elemente mit Elementor Pro","description":"Elemente im Neumorphismus-Stil lassen sich mit Elementor Pro erstellen. Dieses Tutorial hilft dir, den Effekt in wenigen Schritten zu erzeugen.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/monsterspost.com\/de\/tutorial-neumorphismus-stil-mit-elementor-pro-erstellen\/","og_locale":"de_DE","og_type":"article","og_title":"Tutorial: So erstellst du Neumorphismus-Elemente mit Elementor Pro","og_description":"Elemente im Neumorphismus-Stil lassen sich mit Elementor Pro erstellen. Dieses Tutorial hilft dir, den Effekt in wenigen Schritten zu erzeugen.","og_url":"https:\/\/monsterspost.com\/de\/tutorial-neumorphismus-stil-mit-elementor-pro-erstellen\/","og_site_name":"TemplateMonster Deutscher Blog","article_publisher":"https:\/\/www.facebook.com\/templatemonster.de\/","article_published_time":"2020-03-27T07:40:34+00:00","article_modified_time":"2020-03-28T11:56:40+00:00","og_image":[{"width":1920,"height":1275,"url":"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/ux-787980_1920.jpg","type":"image\/jpeg"}],"author":"Olga Kulmann","twitter_card":"summary_large_image","twitter_creator":"@TM_Deutschland","twitter_site":"@TM_Deutschland","twitter_misc":{"Verfasst von":"Olga Kulmann","Gesch\u00e4tzte Lesezeit":"4 Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/monsterspost.com\/de\/tutorial-neumorphismus-stil-mit-elementor-pro-erstellen\/#article","isPartOf":{"@id":"https:\/\/monsterspost.com\/de\/tutorial-neumorphismus-stil-mit-elementor-pro-erstellen\/"},"author":{"name":"Olga Kulmann","@id":"https:\/\/monsterspost.com\/de\/#\/schema\/person\/8da307d177541069e7bf4abccc1e6130"},"headline":"Tutorial: Neumorphismus-Stil mit Elementor Pro erstellen","datePublished":"2020-03-27T07:40:34+00:00","dateModified":"2020-03-28T11:56:40+00:00","mainEntityOfPage":{"@id":"https:\/\/monsterspost.com\/de\/tutorial-neumorphismus-stil-mit-elementor-pro-erstellen\/"},"wordCount":888,"commentCount":0,"publisher":{"@id":"https:\/\/monsterspost.com\/de\/#organization"},"keywords":["WordPress"],"articleSection":["Anleitungen"],"inLanguage":"de-DE","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/monsterspost.com\/de\/tutorial-neumorphismus-stil-mit-elementor-pro-erstellen\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/monsterspost.com\/de\/tutorial-neumorphismus-stil-mit-elementor-pro-erstellen\/","url":"https:\/\/monsterspost.com\/de\/tutorial-neumorphismus-stil-mit-elementor-pro-erstellen\/","name":"Tutorial: So erstellst du Neumorphismus-Elemente mit Elementor Pro","isPartOf":{"@id":"https:\/\/monsterspost.com\/de\/#website"},"datePublished":"2020-03-27T07:40:34+00:00","dateModified":"2020-03-28T11:56:40+00:00","description":"Elemente im Neumorphismus-Stil lassen sich mit Elementor Pro erstellen. Dieses Tutorial hilft dir, den Effekt in wenigen Schritten zu erzeugen.","breadcrumb":{"@id":"https:\/\/monsterspost.com\/de\/tutorial-neumorphismus-stil-mit-elementor-pro-erstellen\/#breadcrumb"},"inLanguage":"de-DE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/monsterspost.com\/de\/tutorial-neumorphismus-stil-mit-elementor-pro-erstellen\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/monsterspost.com\/de\/tutorial-neumorphismus-stil-mit-elementor-pro-erstellen\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/monsterspost.com\/de\/"},{"@type":"ListItem","position":2,"name":"Tutorial: Neumorphismus-Stil mit Elementor Pro erstellen"}]},{"@type":"WebSite","@id":"https:\/\/monsterspost.com\/de\/#website","url":"https:\/\/monsterspost.com\/de\/","name":"TemplateMonster Deutscher Blog","description":"Just another MonsterPost Sites site","publisher":{"@id":"https:\/\/monsterspost.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/monsterspost.com\/de\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"de-DE"},{"@type":"Organization","@id":"https:\/\/monsterspost.com\/de\/#organization","name":"MonsterPost Deutschland","url":"https:\/\/monsterspost.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/monsterspost.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Logo-TM.png","contentUrl":"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Logo-TM.png","width":180,"height":180,"caption":"MonsterPost Deutschland"},"image":{"@id":"https:\/\/monsterspost.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/template_monster\/","https:\/\/www.pinterest.com\/templatemonster\/","https:\/\/www.youtube.com\/channel\/UC19iEGcEhlFidO5ruNGE5yg","https:\/\/www.facebook.com\/templatemonster.de\/","https:\/\/twitter.com\/TM_Deutschland"]},{"@type":"Person","@id":"https:\/\/monsterspost.com\/de\/#\/schema\/person\/8da307d177541069e7bf4abccc1e6130","name":"Olga Kulmann","image":{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/monsterspost.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/514d0fd5ba77426a747ad480e3c87ae5?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/514d0fd5ba77426a747ad480e3c87ae5?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","caption":"Olga Kulmann"},"description":"Olga Kulmann ist Mitglied des deutschen Marketer-Teams von TemplateMonster. Ihr Interessenkreis umfasst von Online-Marketing \u00fcber E-Commerce bis hin zum Webdesign. Olgas Anliegen ist es, die Blogleser mit besten Erfahrungen und gepr\u00fcftem Expertenwissen in diesen Bereichen vertraut zu machen. Olga auf Facebook.","url":"https:\/\/monsterspost.com\/de\/author\/kulmann\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/posts\/24321"}],"collection":[{"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/users\/1657845"}],"replies":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/comments?post=24321"}],"version-history":[{"count":30,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/posts\/24321\/revisions"}],"predecessor-version":[{"id":24642,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/posts\/24321\/revisions\/24642"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/media\/24324"}],"wp:attachment":[{"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/media?parent=24321"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/categories?post=24321"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/tags?post=24321"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}