Standard-Look der Elementor Passwort-Seite
Elementor verwendet das WordPress-Standardformular für passwortgeschützte Seiten. Das bedeutet:
- Ein einfacher Text als Hinweis
- Ein Eingabefeld für das Passwort
- Ein „Senden“-Button
Ohne Design-Anpassung wirkt das Ganze etwas langweilig. Doch mit ein wenig CSS wird daraus ein professioneller, ansprechender Bereich.
So sieht die Standard Passwort-Seite aus:
Warum ist eine schön gestaltete Passwort-Seite wichtig?
- Markenkonsistenz: Die Passwort-Seite ist oft die erste Interaktion mit einer geschützten Seite – ein individuelles Design hinterlässt einen professionellen Eindruck.
- Benutzerfreundlichkeit: Ein aufgeräumtes Design mit gut lesbarer Schrift und klarem Call-to-Action sorgt dafür, dass Besucher sich nicht verirren.
- Vertrauen & Seriosität: Eine ansprechend gestaltete Passwort-Seite wirkt hochwertiger und weniger wie eine technische Hürde.
Das gestalten wir im Tutorial:
Hier kannst du dir das Tutorial auf YouTube anschauen:
So stylst du die Passwort-Seite mit CSS
Die grundlegende Struktur
In Elementor gibt es keine spezielle Einstellung für das Styling der Passwort-Seite. Doch mit ein wenig CSS kannst du jedes Element gezielt anpassen. Hier ist der Code, den du in Elementor → Website-Einstellungen → Eigenes CSS oder in dein Child Theme (style.css) einfügen kannst.
/* Passwort Sektion */
.post-password-required {
height: 75vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-image: url('https://foto-url.de');
background-size: cover;
background-position: center;
max-width: 100% !important;
padding: 80px;
}
/* Überschrift */
.post-password-required h1 {
text-align: center;
}
/* Alle Inhalte */
.post-password-form p {
justify-content: center;
}
.post-password-form{
margin-top:0px;
}
/* Beschreibung */
.post-password-form p:nth-child(3) {
font-size: 20px;
text-align: center;
}
/* Input Form */
.post-password-form p:nth-child(4) {
margin-top: 50px;
}
/* Input Label */
.post-password-form label {
font-size: 20px;
}
/* Input Feld */
.post-password-form label input {
border-radius: 0px;
padding: 12px 10px;
margin-top: 10px;
}
/* Button */
.post-password-form input[type="submit"] {
font-size: 20px;
padding: 8px 20px;
margin-top: 10px;
}
/* Mobile Anpassung */
@media only screen and (max-width: 767px) {
.post-password-required {
height: auto;
}
.post-password-required h1 {
font-size: 48px;
}
}
/* Entferne Entry Title auf Inhaltsseite */
.post-password-protected .entry-title{
display:none;
}
Erklärung der CSS-Anpassungen
1. Hintergrundbild & Zentrierung
- Die gesamte Sektion
.post-password-requiredbekommt ein individuelles Hintergrundbild - Mit
display: flexwird der Inhalt vertikal und horizontal mittig ausgerichtet
2. Abstände & Text-Styling
- Die Überschrift
h1wird zentriert - Die Beschreibung
p:nth-child(1)bekommt eine Schriftgröße von 20px - Das Eingabefeld
p:nth-child(2)erhält Abstand nach oben für eine bessere Struktur - Die font-family wird bei mir aktuell durch die globalen Website-Einstellungen definiert.
3. Eingabefeld & Button
- Der Label-Text des Passwortfeldes wird größer
- Das Passwort-Inputfeld bekommt ein angepasstes Padding
- Der Button wird mit einer größeren Schrift versehen und erhält bessere Abstände
4. Mobile Optimierung
- Die Sektion
.post-password-requiredwird auf mobile Höhe angepasst - Die Überschrift
h1wird für Smartphones kleiner – das kann in Elementor natürlich auch über die globalen Fonts gesteuert werden
Änderung des Standard-Texts: Nur mit PHP möglich
Vielleicht möchtest du nicht nur das Design anpassen, sondern auch den Standard-Text auf der Passwort-Seite ändern. Zum Beispiel:
- Den Hinweistext „Dieser Inhalt ist passwortgeschützt. Um ihn anzusehen, gib dein Passwort unten ein.“
- Den Standard-Button-Text „Bestätigen“ oder „Enter“
Geht das mit CSS oder Elementor?
Nein, die Texte sind direkt im WordPress-Core hinterlegt. CSS kann nur das Styling verändern, aber nicht den Inhalt. Auch Elementor bietet keine direkte Option zur Änderung des Passwort-Formulartexts.
Lösung: Custom PHP im Child Theme
Das Vorgehen, den Text (ohne Plugin) zu ändern, ist über ein PHP-Filter-Statement in der functions.php deines Child Themes. Zum Beispiel:
function customize_password_protected_page() {
// Eigener Beschreibungstext
echo '<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
var protectedMessage = document.querySelector(".post-password-form p");
if (protectedMessage) {
protectedMessage.textContent = "Bitt gib hier das Passwort ein";
}
});
</script>';
}
add_action('wp_head', 'customize_password_protected_page');
// Eigener Titel und zusätzlicher Text unter dem Formular
function add_custom_password_title($content) {
if (post_password_required()) {
$title = '<div class="post-password-form-wrapper"><div class="post-password-form"><h1 class="password-protected-title">Exklusiver Bereich freischalten</h1>';
$additional_info = '<div class="additional-info">Falls du noch kein Passwort oder es vergessen hast, schreibe mir bitte unter <a href="mailto:kontakt@webamaze.de">kontakt@webamaze.de</a></div>';
$content = $title . '<div class="password-input-container">' . $content . '</div>' . $additional_info . '</div></div>';
}
return $content;
}
add_filter('the_content', 'add_custom_password_title');
💡 Wichtiger Hinweis: Falls du dich mit PHP nicht auskennst, solltest du Änderungen in der functions.php nur mit Vorsicht vornehmen oder vorher ein Backup machen.
Fazit
Mit nur wenigen Zeilen CSS kannst du die Passwort-Seite in Elementor deutlich ansprechender gestalten. Das sorgt nicht nur für ein professionelleres Design, sondern auch für eine bessere User Experience.
💡 Tipp: Falls du Elementor Pro nutzt, kannst du zusätzlich mit dem „Custom CSS“-Widget arbeiten, um den Code pro Seite anzupassen.
