Responsive Hintergrundbilder erstellen & Mehr in Elementor

Rifat Elementor Jun 17, 2022

Um Ihr Benutzererlebnis zu verbessern, bietet Elementor neue Funktionen wie die mobile Kontrolle über Hintergrundgrafiken, einen abgesicherten Modus zum Debuggen und mehr.

Elementor war schon immer stolz auf seine Fähigkeit, für mobile Geräte zu entwerfen. Für Elementor-Benutzer war es immer noch ein Problem, die Position des Hintergrundbilds genau richtig zu finden. Als Webentwickler stoßen Sie möglicherweise häufig auf dieses Problem: Sie möchten das Gesicht des Hundes zeigen, aber nur seinen Schwanz auf dem Handy.

Mit den Responsive Background Image-Steuerelementen von Elementor können Sie Hintergrundbilder erstellen, die sich an die Größe und Auflösung jedes Geräts anpassen.

Responsive Hintergrundbild-Steuerelemente

Die neueste Elementor-Version gibt Kunden umfassende Kontrolle über Desktop-, Tablet- und mobile Hintergrundbildsteuerungen. Steuerelemente für Hintergrundbilder sind in diesem Steuerelement enthalten (Bild, Position, Anhang, Wiederholung und Größe).

Erstellen Sie erstaunliche Websites

Mit dem besten kostenlosen Seite Builder Elementor

Jetzt anfangen

Erstmals können Sie die Position einzelner Geräte anpassen. Wählen Sie „Mitte-Oben“ für Mobilgeräte und „Mitte-Mitte“ für Desktops, um sicherzustellen, dass das Bild auf allen Plattformen einheitlich angezeigt wird. Für jedes Gerät können Sie eine andere Größe auswählen. Wählen Sie für Mobilgeräte „Enthalten“ für Desktop und „Cover“.

Wir sind sicher, dass viele Leute diese neue Funktion mögen würden, weil dies für viele Leute ein großes Problem war.

Elementor bietet die Möglichkeit, für jedes einzelne Gerät völlig unterschiedliche Bilder festzulegen. Die ersten zusätzlichen reaktionsschnellen Steuerelemente kamen in Form von gerätespezifischer Größe und Position. Mit einstellbarer Größe und Position ermöglicht es Ihnen, einen Schritt weiter zu gehen und bietet Ihnen ein noch flexibleres Designerlebnis.

Benutzerdefinierte Hintergrundbildgröße & Position

Bisher gab es nur drei Optionen zum Festlegen der Größe des Hintergrundbilds: Auto, Cover oder Contain. Ähnlich wie bei „Oben links“ können Sie nur allgemeine Hintergrundbildplatzierungen angeben.

Die Größe und Position des Hintergrunds sind jetzt zwei neue benutzerdefinierte Steuerelemente, die in Zukunft verfügbar sein werden.

Mit der benutzerdefinierten Hintergrundposition können Sie die genauen Koordinaten der X- und Y-Achse des Hintergrundbilds auswählen. Als Ergebnis haben Sie jetzt die Möglichkeit, den Hintergrund Ihrer Seite präzise auszurichten.

Auch benutzerdefinierte Hintergrundgrößen sind möglich. Stellen Sie die Breite Ihres Hintergrundbilds auf einen genauen Wert in Pixel ein.

Für responsives Design sind diese Einstellungen—insbesondere die benutzerdefinierte Hintergrundgröße und -position—kritisch. Verwenden Sie für Desktop-, Tablet- und mobile Plattformen diese benutzerdefinierten Einstellungen, um einen bestimmten Fokus auf den Hauptschwerpunkt des Bildes zu legen.

Reaktionsschnelle Grenzkontrollen

Zusätzlich zu den Hintergrundbildern können Sie jetzt auch den Randradius und die Breite für jedes Gerät separat anpassen.

Spaltengrenzen können auf verschiedene Weise verwendet werden, z. B. wenn eine Reihe von Links durch eine Spaltengrenze geteilt wird. Auf Mobilgeräten ist dies nicht erforderlich, da die Zeile nicht mehr inline ist und jeder Link in einer eigenen Zeile platziert wird.

Unter diesen Umständen ist es ein Kinderspiel, die Grenze des mobilen Layouts zu entfernen. Eine neue Funktion für dynamische Grenzen erleichtert dies.

Auf Mobilgeräten gibt es keine „verwaisten Grenzen“ mehr!

Abgesicherter Modus zur Fehlerbehebung

Elementor verpflichtet sich, allen Kunden ein reibungsloses, fehlerfreies Erlebnis zu bieten. Es stehen Zehntausende von Plugins und Themen zur Auswahl, und es gibt unendlich viele Möglichkeiten, sie miteinander zu verbinden. Unabhängig davon, ob Elementor beteiligt ist oder nicht, führen diese Kombinationen zwangsläufig zu Streit.

Elementor ist immer auf der Suche nach Möglichkeiten, unseren Benutzern die Arbeit zu erleichtern, indem Reibungsverluste in ihren Arbeitsprozessen reduziert werden.

Wenn Benutzer den Editor nicht öffnen können, ist dies ein häufiges Problem. Diesem Problem wurden viele Namen gegeben: Ich bekomme einen leeren Bildschirm, ich kann nichts bearbeiten und mein Computer bleibt beim Laden von … hängen

Der abgesicherte Modus ist die Antwort!

Als Windows zum ersten Mal herauskam, enthielt es eine Funktion für den abgesicherten Modus, mit der verschiedene Probleme behoben werden konnten. Elementor hat selbst eine ähnliche Lösung entwickelt.

Wenn Sie auf eine Seite stoßen, die nicht geladen werden kann, können Sie den „abgesicherten Modus“ aktivieren, indem Sie auf eine Schaltfläche klicken.

Elementor und WordPress sind im "abgesicherten Modus" vor allen Themen oder Plugins geschützt, die Probleme verursachen könnten.

Über 800 x 025 Ladeprobleme können vorübergehend im abgesicherten Modus behoben werden.

Wenn Sie in den abgesicherten Modus wechseln, wird alles korrekt geladen ?

Dies deutet darauf hin, dass entweder Ihr Theme oder eines Ihrer Plugins für den Fehler verantwortlich ist. Deaktivieren Sie sie nacheinander, um den Täter zu identifizieren.

Ich habe den abgesicherten Modus aktiviert, aber er lädt immer noch nicht.

Dies legt nahe, dass Sie woanders nach einer Lösung suchen sollten, und es handelt sich höchstwahrscheinlich um ein benutzerdefiniertes Code- oder Hosting-bezogenes Problem.

"Beeinflusst der abgesicherte Modus meine Website?"

Besucher Ihrer Website werden keinen Unterschied feststellen, wenn sie den abgesicherten Modus verwenden. Alle Ihre installierten Plugins und Themes werden auf Ihrer Website angezeigt und Ihre Besucher können sie wie gewohnt verwenden.

Plugins und Themes werden während des Ladevorgangs des Elementor-Editors nicht aktiviert.

Benutzer von Elementor werden vom abgesicherten Modus in Bezug auf ein stabileres, nahtloses und fehlerfreies Erlebnis stark profitieren.

Lesen Sie mehr Tag &-Widget

Das Read More-Tag von WordPress war eines der ersten Dinge, die Elementor als Funktionsanfrage erhielt.

Dies war eine einfache Anfrage, aber der Seitenersteller kam schließlich dazu, sie umzusetzen.

Wenn Sie in Ihrem Blog-Beitrag das Tag „Weiterlesen“ verwenden, schneidet die Beitragsanzeige des Archivs den restlichen Text ab. Damit kann Ihr Content-Teaser jetzt direkt auf Ihrer Haupt-Blog-Seite für alle sichtbar angezeigt werden.

Im Texteditor-Widget oder als separates Widget können Sie jetzt schnell das Read More-Tag hinzufügen. Mit Elementors neuem „Read More“-Widget, das zwischen zwei Texteditor-Widgets eingefügt werden kann und genau dort stoppt, wo Sie es wünschen, ist es sogar noch einfacher, einen Auszug auf Ihrer Archivseite anzuzeigen.

Um Verwirrung zu vermeiden, gilt dieses Widget nur für reguläre WordPress-Archivseiten, die „den Inhalt“ in ihrem Inhalt verwenden. Elementor-Archivvorlagen sind nicht betroffen.

Letzte Worte

Elementor ist einer der am weitesten entwickelten WordPress-Seitenersteller. Mit neuen Funktionen wird es jedes Mal leistungsfähiger. Mit diesem Plugin können Sie buchstäblich einen riesigen Ozean an Design und Dekoration für Ihre Website erkunden. Ich hoffe, Sie werden von diesem Beitrag profitieren. Besuchen Sie weitere Elementor-Tutorials und teilen Sie sie mit Ihren Freunden.