So erstellen Sie ein Personenmodul mit Bio on Click

Veröffentlicht: 2017-08-16

In diesem Beitrag zeigen wir Ihnen, wie Sie ein Personenmodul mit Bio on Click erstellen. Sobald Sie in derselben Zeile auf ein anderes Personenmodul klicken, ändert sich der Text innerhalb der Biografie. Sie können die Biografie jederzeit schließen, indem Sie erneut auf das Personenmodul klicken.

Damit können Sie beispielsweise auf der Website Ihres Unternehmens zusätzliche Informationen zu Ihren Mitarbeitern anzeigen. Das Konzept hilft Ihnen, zwei Dinge zu tun: mit Ihren Besuchern zu interagieren und Platz auf Ihrer Website zu sparen. Die Biografie wird nur dann angezeigt, wenn ein Besucher Interesse zeigt und sich entscheidet, auf die Elemente im Personenmodul zu klicken.

Ergebnis-Personenmodul mit Bio auf Klick

Bevor wir in die verschiedenen Schritte eintauchen, die Sie befolgen müssen, um ein Personenmodul mit Bio auf Klick zu erstellen, werfen wir einen Blick auf das Endergebnis auf dem Desktop:

Personenmodul mit Bio

und das Endergebnis auf Handy und Tablet:

Personenmodul mit Bio

Wenn auf dem Handy ein Bios geöffnet wird, werden die anderen beiden Bios automatisch geschlossen. Sie haben immer nur einen Bioabschnitt geöffnet, obwohl jeder Bio einen eigenen Abschnitt hat.

Personenmodul mit Bio auf Klick für Desktop

Abonnieren Sie unseren Youtube-Kanal

Damit alles reibungslos funktioniert, müssen wir zwei Versionen erstellen: eine für Desktop und eine für Tablets und Telefone. Jede dieser Versionen benötigt ihren eigenen jQuery-Code. Wir beginnen mit der Desktop-Version und im nächsten Teil des Beitrags zeigen wir Ihnen, wie Sie die Version für Tablets und Telefone erstellen.

Fügen Sie den Personenstandardabschnitt mit einer dreispaltigen Zeile hinzu

Als erstes müssen wir einen Abschnitt hinzufügen, der die Personenmodule enthält.

Öffnen Sie eine neue Seite (oder die Seite, auf der Sie das Personenmodul mit Bio hinzufügen möchten) und fügen Sie einen neuen Standardabschnitt hinzu. Platzieren Sie in diesem Abschnitt eine Reihe mit drei Spalten. Natürlich können Sie auch eine andere Anzahl von Spalten verwenden, aber der Code, den wir verwenden, berücksichtigt 3 Personenmodule. Wenn Sie dasselbe für andere Zeilentypen erstellen möchten, müssen Sie einige Änderungen am jQuery-Code vornehmen, die wir später in diesem Beitrag bereitstellen.

Zeileneinstellungen

Öffnen Sie die Zeileneinstellungen und fügen Sie im Inhalts-Tab '#e5e5e5' als Hintergrundfarbe jeder Spalte hinzu.

person module with bio

Wechseln Sie dann zur Registerkarte Erweitert und fügen Sie den folgenden Kastenschatten in das Hauptelement jeder der drei Zeilen ein:

Ein Personenmodul hinzufügen

Als nächstes müssen Sie der ersten Spalte der Zeile ein Personenmodul hinzufügen.

Registerkarte Inhalt

Geben Sie auf der Registerkarte Inhalt dieses Moduls die Informationen und Links zu sozialen Medien ein und laden Sie das Bild hoch.

Registerkarte „Erweitert“

Wir werden keine Änderungen an der Registerkarte "Design" dieses Moduls vornehmen (Sie können das Erscheinungsbild nachträglich ändern). Stattdessen gehen wir sofort zur Registerkarte Erweitert, wo wir den gleichen Boxschatten, den wir den Zeilenspalten hinzugefügt haben, zum Mitgliedsbild hinzufügen.

Klonen Sie das Personenmodul

Als nächstes müssen Sie das Personenmodul zweimal klonen und in die beiden anderen Spalten einfügen. Wir müssen zu diesem Abschnitt zurückkehren, um die verschiedenen CSS-Klassen hinzuzufügen. Aber bevor wir das tun, werden wir zuerst den Bio-Abschnitt hinzufügen.

Fügen Sie den Bio-Standardabschnitt mit einer Zeile in voller Breite hinzu

Fügen Sie direkt unter dem zuvor erstellten Abschnitt einen weiteren Standardabschnitt hinzu. In diesem Abschnitt müssen wir die verschiedenen Textmodule hinzufügen, die mit den verschiedenen Personenmodulen verknüpft sind. Öffnen Sie die Einstellungen des Abschnitts und verwenden Sie die Farbe '#a0a0a0' als Hintergrundfarbe.

Fügen Sie zwei Textmodule hinzu

Je nachdem, wie viele Textbausteine ​​die Biografie des Personenmoduls haben soll, können Sie Textbausteine ​​hinzufügen. In diesem Fall fügen wir pro Personenmodul zwei Textmodule hinzu.

Erstes Textmodul

Geben Sie im ersten Textmodul etwas Text ein und gehen Sie zur Registerkarte Design. Nehmen Sie auf der Registerkarte Design die folgenden Änderungen an der Unterkategorie Text vor:

  • Textausrichtung: Mitte
  • Schriftgröße des Textes: 31
  • Textfarbe: #FFFFFF
  • Textzeilenhöhe: 1.7em

Zweites Textmodul

Fügen Sie ein weiteres Textmodul hinzu und nehmen Sie die folgenden Änderungen an der Unterkategorie Text der Registerkarte Design vor:

  • Textausrichtung: Mitte
  • Schriftgröße des Textes: 16
  • Textfarbe: #FFFFFF
  • Textzeilenhöhe: 1.7em

Jedes Modul zweimal klonen

Diese beiden Textmodule werden für jedes der Bios gleich sein. Aus diesem Grund sollten Sie jedes der Textmodule zweimal klonen. So sollte der endgültige Aufbau im Backend der Seite aussehen:

Die verschiedenen CSS-Klassen

Weisen Sie den Person-Modulen CSS-Klassen zu

Gehen Sie auf die Registerkarte Erweitert jedes der Personenmodule und weisen Sie die folgenden CSS-Klassen zu:

  • First-Person-Modul: person1
  • Zweite-Person-Modul: person2
  • Dritte-Person-Modul: person3

Weisen Sie dem Abschnitt eine CSS-Klasse zu

Öffnen Sie die Einstellungen des Abschnitts, in dem sich Ihr Bios befindet. Gehen Sie zum Reiter Erweitert und schreiben Sie „section_1“ in die CSS-Klasse.

Weisen Sie den Textmodulen CSS-Klassen zu

Fügen Sie nun die CSS-Klassen wie folgt zu den von Ihnen erstellten Textmodulen hinzu:

  • Verknüpft mit dem ersten Personenmodul: div_text_1
  • Verknüpft mit dem zweiten Personenmodul: div_text_2
  • Verknüpft mit dem Third-Person-Modul: div_text_3

CSS-Code anzeigen zum Abschnitt und allen Textmodulen hinzufügen

Der nächste Schritt, den Sie tun müssen, ist, zur Registerkarte Erweitert des Abschnitts und aller Textmodule zu gehen. Fügen Sie dann die folgende Zeile CSS-Code zum Hauptelement des Abschnitts hinzu: 

display: none;

Auf Telefon und Tablet deaktivieren

Deaktivieren Sie nun beide Abschnitte, die Sie für Mobilgeräte und Tablets erstellt haben.

Personenmodul mit Bio auf Klick für Tablet & Telefon

Nachdem wir Ihnen nun gezeigt haben, wie Sie das Personenmodul mit Bio on Click für den Desktop erstellen, zeigen wir Ihnen, wie Sie es auch für Tablet und Telefon erstellen. Wir haben die vorherigen Abschnitte bereits für Smartphones und Tablets deaktiviert. So sieht das Layout des Desktops im Backend aus:

Und dies ist die Struktur, die wir für die Tablet- und Telefonversion benötigen.

Sechs neue Abschnitte hinzufügen

Also fahren Sie fort und fügen Sie der Seite sechs neue Abschnitte hinzu. Klonen Sie dann die Personenmodule und fügen Sie jedes einzeln in einen Abschnitt ein. Stellen Sie sicher, dass Sie einen Abschnitt dazwischen lassen, dort wird die Biografie schließlich kommen.

Fügen Sie als Nächstes die Textmodule zum Klonen hinzu und platzieren Sie sie im Abschnitt unter jedem Abschnitt, der ein Personenmodul enthält. Die Biografie wird standardmäßig unter dem Personenmodul auf Mobilgeräten und Tablets angezeigt.

.

Die verschiedenen CSS-Klassen & IDs

Nachdem Sie alle Abschnitte und Module eingefügt haben, können Sie mit dem Hinzufügen der CSS-Klassen beginnen.

Weisen Sie den Person-Modulen CSS-Klassen zu

Öffnen Sie zunächst jedes Personenmodul einzeln und ändern Sie die CSS-Klassen auf der Registerkarte Erweitert in:

  • First-Person-Modul: mobile_person1
  • Zweitpersonenmodul : mobile_person2
  • Third-Person-Modul: mobile_person3

Weisen Sie den Abschnitten CSS-Klassen zu

Öffnen Sie als Nächstes alle verschiedenen Bio-Abschnitte und weisen Sie jedem von ihnen Folgendes zu:

  • Erster Bio-Abschnitt: section_mobile_1
  • Zweiter Bio-Abschnitt: secton_mobile_2
  • Dritter Bio-Abschnitt: section_mobile_3

Weisen Sie den Textmodulen CSS-Klassen zu

Die letzten CSS-Klassen, die Sie benötigen, um einen Platz zuzuweisen, sind diejenigen, die mit den Textmodulen in den verschiedenen Bioabschnitten verknüpft sind. Weisen Sie den Textmodulen in diesem Abschnitt gemäß dem Abschnitt "Bio" die folgenden CSS-Klassen zu:

  • Verknüpft mit dem ersten Personenmodul: div_mobile_text_1
  • Verknüpft mit dem zweiten Personenmodul: div_mobile_text_2
  • Verknüpft mit dem Third-Person-Modul: div_mobile_text_3

CSS-Code anzeigen zu Abschnitten hinzufügen

Wenn Sie fortfahren, müssen Sie alle Bio-Abschnitte unsichtbar machen. Gehen Sie zur Registerkarte Erweitert jedes der Abschnitte und kopieren Sie die folgende CSS-Codezeile und fügen Sie sie in das Hauptelement ein: 

display: none;

Stellen Sie sicher, dass Sie diese CSS-Codezeile im Hauptelement jedes Textmoduls entfernen. In der Desktop-Version mussten wir sie unsichtbar machen, aber das ist für Handys und Tablets nicht notwendig.

Auf dem Desktop deaktivieren

Nachdem Sie alle Änderungen vorgenommen haben, müssen Sie vor dem Hinzufügen des Codes noch eines tun: Deaktivieren Sie die drei Bio-Abschnitte auf dem Desktop. Fahren Sie fort und öffnen Sie jeden der Abschnitte und gehen Sie zur Registerkarte Erweitert. Deaktivieren Sie in der Unterkategorie Sichtbarkeit der Registerkarte Erweitert die Abschnitte auf dem Desktop.

Fügen Sie den jQuery-Code hinzu

Nachdem wir nun alle praktischen Änderungen am Divi-Builder vorgenommen haben, ist es an der Zeit, zum letzten Schritt überzugehen. Hinzufügen des jQuery-Codes.

Hinzufügen eines neuen Codemoduls

Der einfachste Weg, den Code zu Ihrer Seite hinzuzufügen, ist das Code-Modul. Sie werden dieses Personenmodul mit Bio bei Klick wahrscheinlich nur auf einer Seite verwenden. Durch die Verwendung eines Codemoduls stellen Sie sicher, dass der Code nur geladen wird, wenn sich jemand auf dieser Seite befindet. Kopieren Sie die beiden separaten jQuery-Codes und fügen Sie sie in dasselbe Codemodul ein.

Platzieren Sie den Desktop-jQuery-Code in Ihrem Codemodul

Kopieren Sie die folgenden CSS-Codezeilen und fügen Sie sie in Ihr Codemodul ein, damit die Desktop-Bio-on-Click-Version funktioniert: 

<script text="text/javascript">
jQuery(function ($) {
var text_1_visible = 0;
var text_2_visible = 0;
var text_3_visible = 0;

var section_1 = $(".section_1");
var text_img_1 = $(".div_text_1");
var text_img_2 = $(".div_text_2");
var text_img_3 = $(".div_text_3");

$(".person1").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "block");
text_img_1.css("display", "block");
text_img_2.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 1;
text_2_visible = 0;
text_3_visible = 0;
}

else if (text_2_visible == 1 || text_3_visible == 1) {
section_1.css("display", "block");
text_img_1.css("display", "block");
text_img_2.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 1;
text_2_visible = 0;
text_3_visible = 0;
}

else {
section_1.css("display", "none");
text_img_1.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});

$(".person2").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "block");
text_img_2.css("display", "block");
text_img_1.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 1;
text_3_visible = 0;
}

else if (text_1_visible == 1 || text_3_visible == 1) {
section_1.css("display", "block");
text_img_2.css("display", "block");
text_img_1.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 1;
text_3_visible = 0;
}

else {
section_1.css("display", "none");
text_img_2.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});

$(".person3").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "block");
text_img_3.css("display", "block");
text_img_1.css("display", "none");
text_img_2.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 1;
}

else if (text_1_visible == 1 || text_2_visible == 1) {
section_1.css("display", "block");
text_img_3.css("display", "block");
text_img_1.css("display", "none");
text_img_2.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 1;
}

else {
section_1.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});
});
</script>

Platzieren Sie den jQuery-Code für Tablet und Telefon in Ihrem Code-Modul

Und die folgenden Codezeilen, damit die Version für Tablet und Telefon funktioniert: 

<script text="text/javascript">
jQuery(function ($) {
var text_1_visible = 0;
var text_2_visible = 0;
var text_3_visible = 0;

var section_1 = $(".section_mobile_1");
var section_2 = $(".section_mobile_2");
var section_3 = $(".section_mobile_3");

var text_img_1 = $(".div_mobile_text_1");
var text_img_2 = $(".div_mobile_text_2");
var text_img_3 = $(".div_mobile_text_3");

$(".mobile_person1").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "block");
text_img_1.css("display", "block");
section_2.css("display", "none");
text_img_2.css("display", "none");
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 1;
text_2_visible = 0;
text_3_visible = 0;
}

else if (text_2_visible == 1 || text_3_visible == 1) {
section_1.css("display", "block");
text_img_1.css("display", "block");
section_2.css("display", "none");
text_img_2.css("display", "none");
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 1;
text_2_visible = 0;
text_3_visible = 0;
}

else {
section_1.css("display", "none");
text_img_1.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});

$(".mobile_person2").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "none");
text_img_1.css("display", "none");
section_2.css("display", "block");
text_img_2.css("display", "block");
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 1;
text_3_visible = 0;
}

else if (text_1_visible == 1 || text_3_visible == 1) {
section_1.css("display", "none");
text_img_1.css("display", "none");
section_2.css("display", "block");
text_img_2.css("display", "block");
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 1;
text_3_visible = 0;
}

else {
section_2.css("display", "none");
text_img_2.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});

$(".mobile_person3").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "none");
text_img_1.css("display", "none");
section_2.css("display", "none");
text_img_2.css("display", "none");
section_3.css("display", "block");
text_img_3.css("display", "block");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 1;
}

else if (text_1_visible == 1 || text_2_visible == 1) {
section_1.css("display", "none");
text_img_1.css("display", "none");
section_2.css("display", "none");
text_img_2.css("display", "none");
section_3.css("display", "block");
text_img_3.css("display", "block");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 1;
}

else {
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});
});
</script>

Endergebnis

Werfen wir einen letzten Blick auf das Ergebnis, nachdem Sie alle Schritte in diesem Beitrag befolgt haben. So sieht es auf dem Desktop aus:

Personenmodul mit Bio

Und auf Handy und Tablet:

Personenmodul mit Bio

Einpacken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie ein Personenmodul mit Bio erstellen, das beim Klicken ein- und ausgeblendet wird. Wenn Sie diese Methode anwenden, können Sie einen Platz auf Ihrer Website speichern und Ihren Besuchern nur dann anzeigen, wenn sie Interesse gezeigt haben. Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen!

Abonnieren Sie unbedingt unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie keine große Ankündigung, keinen nützlichen Tipp oder ein Divi-Werbegeschenk verpassen!