Haben Sie sich jemals gewünscht, Sie könnten wissen, wie man Text über einem Bild anzeigt? Elementor ?

In diesem neuen Tutorial zeigen wir Ihnen, wie es geht.

Wenn Sie keine Ahnung haben, worüber wir heute sprechen wollen, laden wir Sie ein, sich das folgende Video anzusehen:

Dann lassen Sie uns zurückgehen, warum wir hier sind.

Um dieses Tutorial abzuschließen, benötigen Sie die Pro-Version von Elementor, da wir benutzerdefinierten CSS-Code verwenden werden, der nur von dieser Version von unterstützt wirdElementor.

Entdecken Sie auch unseren Leitfaden zu: So erstellen Sie eine Bildergalerie mit Elementor

Lassen Sie uns einen neuen Abschnitt mit einer 3-Spalten-Struktur erstellen und dann im Bedienfeld die definieren Hauteur von Mindesthöheund dann Mindesthöhe lass uns auf klicken VH und stellen Sie den Schieberegler auf ein 100.

3 Säulenabschnitt

Lassen Sie uns die mittlere Spalte auswählen und in der Registerkarte Designim Abschnitt Hintergrund lass uns auf klicken klassisch für Hintergrundtyp, und wählen Sie dann eine dunkle Farbe aus.

Lassen Sie uns in diese Spalte die einfügen Internes Bereichs-Widget. Das Widget „Interne Sektion“ ist standardmäßig mit 2 Spalten konfiguriert, löschen wir eine davon. Lassen Sie uns den Rest im Panel konfigurieren, indem wir es ändern Hauteur von Mindesthöhe und Mindesthöhe Lassen Sie uns den Cursor auf setzen 400.

Lesen Sie auch: Elementor: So zoomen Sie eine Profilkarte

Dann weiter Vertikale Ausrichtung wählen Mitte.

Dann lass die Titel-Widget im innerer Abschnitt Lassen Sie uns als Titelfoto eingeben und bei Ausrichtung auswählen Center.

Zeigen Sie mit Elementor Text über einem Bild an

In der Registerkarte Design Ändern wir die Farbe des Titels so, dass er sichtbar ist, wenn dies nicht der Fall ist.

Lassen Sie uns ein fallen Texteditor-Widget unter dem Titel-Widget. Dann in der Registerkarte Design, auf Ausrichtung wählen Center. Lassen Sie uns auch die Farbe des Textes ändern, damit er sichtbar ist.

Siehe auch: Elementor: So fügen Sie einen Teiler hinzu, um einen Abschnitt zu erstellen

Wählen wir die aus mittlere Spalte und in seiner Registerkarte Design, setzen Sie die Hintergrundfarbe zurück und laden Sie dann ein Bild Position wählen Zentriert Zentriert, Wiederholung von Non-Repeat, Abdeckung von Größe.

Zeigen Sie mit Elementor Text über einem Bild an

Im Abschnitt Grenze Lassen Sie uns alle ändern Randradien von 12. In Box Schatten, stellen Sie den Schieberegler auf 0 befolgen für Horizontale, Um 0 für Vertikal, zu 40 auf Unschärfe, zu -10 auf Sendung. Sie sollten einen schönen Schatteneffekt unter Ihrem Bild sehen.

Zeigen Sie mit Elementor Text über einem Bild an

auf Hintergrundüberlagerung, wählen klassisch für Hintergrundtyp und couleur wähle ein schwarze Farbe, auf Deckkraft, stellen wir den Schieberegler auf ein 0.55

In der Registerkarte fortgeschritten, greifen wir zu 20 für alle Ränder.

Wählen wir unsere aus Interner Abschnitt und gehen Sie zu seiner Registerkarte fortgeschritten Kopieren Sie im Abschnitt Benutzerdefiniertes CSS das folgende Code-Snippet und fügen Sie es ein:

/*Afficher ou masquer un contenu au survol*/
selector{
    opacity: 0;
    transition: 0.5s ease-in-out;
}
selector:hover{
    opacity: 1;
}
Zeigen Sie mit Elementor Text über einem Bild an

(Wenn Sie diesen Abschnitt nicht haben, haben Sie die Pro-Version nicht, wenn Sie fortfahren möchten, müssen Sie Ihre Version aktualisieren).

Wählen wir noch einmal die mittlere Spalte unseres Abschnitts, In seiner Registerkarte Design, und im Abschnitt Hintergrundüberlagerung, überprüfen Sie, ob wir auf der Registerkarte sind NORMAL, lassen Sie uns senken Opazität à 0.

Klicken Sie dann auf die Registerkarte ÜBERBLICKdann auf klassisch für Hintergrundtyp und couleur, wählen Sie ein dunkle Farbe, dann ist dieOpazität von 0.55, Und für Übergangszeit Lassen Sie uns den Schieberegler auf einstellen 0.5.

Hier ist das Endergebnis unserer Manipulation.

Zeigen Sie mit Elementor Text über einem Bild an

Lassen Sie uns unsere Spalte zweimal duplizieren und die anderen beiden leeren Spalten löschen. Jetzt müssen nur noch das Hintergrundbild sowie die geändert werden Inhalt Texteditoren für die 2 neuen Spalten.

Zeigen Sie mit Elementor Text über einem Bild an

Vorschau Ihrer Arbeit auf Tablet und Smartphone, um zu sehen, wie sie aussieht. Anschließend speichern oder aktualisieren.

So. Sie haben gerade einen Text über einem Bild mit dem angezeigt Page Builder Elementor.

Holen Sie sich jetzt Elementor Pro!

Zusammenfassung

So ! Das war es für diesen Artikel, der Ihnen zeigt, wie Sie Text über einem Bild anzeigen. Wenn Sie Bedenken haben, wie Sie dorthin gelangen, lassen Sie es uns innerhalb wissen commentaires.

Sie können sich aber auch beraten unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.

Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.

...