Jak utworzyć moduł osoby z biografią po kliknięciu?
Opublikowany: 2017-08-16W tym poście pokażemy, jak stworzyć moduł osoby z biografią po kliknięciu. Gdy tylko klikniesz inny moduł osoby w tym samym wierszu, tekst w biografii zmieni się. W dowolnym momencie możesz zamknąć biografię, ponownie klikając moduł osoby.
Możesz to wykorzystać, aby na przykład wyświetlić dodatkowe informacje o swoich pracownikach na stronie internetowej Twojej firmy. Koncepcja pomaga robić dwie rzeczy: wchodzić w interakcję z odwiedzającymi i oszczędzać miejsce w witrynie. Biografia zostanie pokazana tylko wtedy, gdy odwiedzający okaże zainteresowanie i zdecyduje się kliknąć elementy w module Person.
Moduł wyników osoby z biografią po kliknięciu
Zanim przejdziemy do różnych kroków, które musisz wykonać, aby uzyskać moduł osoby z biografią po kliknięciu, spójrzmy na końcowy wynik na pulpicie:
a efekt końcowy na telefonie komórkowym i tablecie:
W wersji mobilnej, jeśli jedno biografie zostanie otwarte, pozostałe dwa zostaną automatycznie zamknięte. Zawsze będziesz mieć otwartą tylko jedną sekcję życiorysu, chociaż każda z nich ma swoją własną sekcję.
Moduł osoby z biografią po kliknięciu na pulpicie
Subskrybuj nasz kanał YouTube
Aby wszystko działało sprawnie, musimy stworzyć dwie wersje: jedną na komputery, a drugą na tablety i telefony. Każda z tych wersji będzie wymagała własnego kodu jQuery. Zaczniemy od wersji na komputery, aw dalszej części wpisu pokażemy, jak stworzyć wersję na tablety i telefony.
Dodaj sekcję Standard osoby z rzędem w trzech kolumnach
Pierwszą rzeczą, którą musimy zrobić, to dodać sekcję zawierającą moduły Person.
Otwórz nową stronę (lub stronę, na której chcesz dodać moduł Person z biografią) i dodaj nową sekcję standardową. W tej sekcji umieść rząd trzech kolumn. Oczywiście możesz również użyć innej liczby kolumn, ale kod, którego będziemy używać, uwzględnia moduły 3 Person. Jeśli chcesz stworzyć to samo dla innych typów wierszy, będziesz musiał wprowadzić pewne modyfikacje w kodzie jQuery, które przedstawimy później w tym poście.
Ustawienia wiersza
Otwórz ustawienia wiersza i na karcie treści dodaj „#e5e5e5” jako kolor tła każdej kolumny.
Następnie przejdź do zakładki Zaawansowane i wstaw następujący cień pola do elementu głównego każdego z trzech wierszy:
Dodaj moduł osoby
Następną rzeczą, którą musisz zrobić, to dodać moduł Person do pierwszej kolumny wiersza.
Karta treści
Na karcie Treść tego modułu wpisz informacje i linki do mediów społecznościowych i prześlij obraz.
Karta Zaawansowane
Nie zamierzamy wprowadzać żadnych modyfikacji w zakładce Projektowanie w tym module (możesz później dokonać jakichkolwiek zmian w wyglądzie). Zamiast tego od razu przechodzimy do zakładki Zaawansowane, gdzie dodamy ten sam cień pola, który dodaliśmy do kolumn wierszy, do obrazu członka.
Klonuj moduł Osoba
Następną rzeczą, którą musisz zrobić, to sklonować moduł Person dwukrotnie i umieścić go w dwóch pozostałych kolumnach. Będziemy musieli wrócić do tej sekcji, aby dodać różne klasy CSS. Ale zanim to zrobimy, najpierw dodamy sekcję bio.
Dodaj sekcję Bio Standard z wierszem o pełnej szerokości
Dodaj kolejną sekcję standardową tuż pod poprzednią sekcją, którą utworzyłeś. W tej sekcji będziemy musieli dodać różne moduły tekstowe, które są połączone z różnymi modułami Person. Otwórz ustawienia sekcji i użyj koloru „#a0a0a0” jako koloru tła.
Dodaj dwa moduły tekstowe
W zależności od liczby modułów tekstowych, które chcesz mieć w biografii modułu osoby, możesz dodać moduły tekstowe. W tym przypadku dodamy dwa moduły tekstowe na moduł osoby.
Pierwszy moduł tekstowy
Wpisz tekst w pierwszym module tekstowym i przejdź do zakładki Projekt. Na karcie Projekt wprowadź następujące zmiany w podkategorii Tekst:
- Orientacja tekstu: Środek
- Rozmiar czcionki tekstu: 31
- Kolor tekstu: #FFFFFF
- Wysokość linii tekstu: 1,7 em
Drugi moduł tekstowy
Dodaj kolejny moduł tekstowy i wprowadź następujące zmiany w podkategorii Tekst na karcie Projekt:
- Orientacja tekstu: Środek
- Rozmiar czcionki tekstu: 16
- Kolor tekstu: #FFFFFF
- Wysokość linii tekstu: 1,7 em
Klonuj każdy moduł dwa razy
Te dwa moduły tekstowe będą takie same dla każdego z biosów. Dlatego powinieneś dwukrotnie sklonować każdy z modułów tekstowych. Tak powinna wyglądać ostateczna struktura na zapleczu strony:
Różne klasy CSS
Przypisz klasy CSS do modułów Person
Przejdź do zakładki Zaawansowane każdego z modułów Person i przypisz następujące klasy CSS:
- Moduł pierwszej osoby: person1
- Moduł drugiej osoby: person2
- Moduł trzeciej osoby: person3
Przypisz klasę CSS do sekcji
Otwórz ustawienia sekcji, w której znajdują się twoje bios. Przejdź do zakładki Zaawansowane i wpisz „section_1” w klasie CSS.
Przypisz klasy CSS do modułów tekstowych
Teraz dodaj klasy CSS do utworzonych modułów tekstowych w następujący sposób:
- Powiązany z modułem pierwszej osoby: div_text_1
- Powiązany z modułem drugiej osoby: div_text_2
- Powiązany z modułem trzeciej osoby: div_text_3
Dodaj kod wyświetlania CSS do sekcji i wszystkich modułów tekstowych
Następnym krokiem, który musisz zrobić, jest przejście do zakładki Zaawansowane w sekcji i wszystkich modułów tekstowych. Następnie dodaj następujący wiersz kodu CSS do głównego elementu sekcji:
display: none;
Wyłącz na telefonie i tablecie
Teraz wyłącz obie utworzone przez siebie sekcje dla telefonów komórkowych i tabletów.
Moduł osoby z biografią po kliknięciu na tablet i telefon
Teraz, gdy pokazaliśmy Ci, jak utworzyć moduł osoby z biografią po kliknięciu na komputer, pokażemy Ci, jak zrobić go również na tablet i telefon. Wyłączyliśmy już poprzednie sekcje dla telefonu i tabletu. Tak wygląda układ pulpitu na backendzie:
I to jest struktura, której potrzebujemy w wersji na tablety i telefony.
Dodaj sześć nowych sekcji
Więc śmiało dodaj sześć nowych sekcji do strony. Następnie sklonuj moduły person i umieść każdy z nich osobno w sekcji. Upewnij się, że zostawiłeś sekcję pomiędzy, tam w końcu pojawi się biografia.
Następnie dodaj sklonuj moduły tekstowe i umieść je w sekcji poniżej każdej sekcji zawierającej moduł Person. Biografia będzie domyślnie wyświetlana pod modułem Osoba na telefonie komórkowym i tablecie.
.
Różne klasy i identyfikatory CSS
Po umieszczeniu wszystkich sekcji i modułów nadszedł czas, aby rozpocząć dodawanie klas CSS.
Przypisz klasy CSS do modułów Person
Zacznij od otwarcia każdego modułu osoby osobno i zmiany klas CSS w zakładce Zaawansowane na:
- Moduł pierwszej osoby: mobile_person1
- Moduł drugiej osoby: mobile_person2
- Moduł trzeciej osoby: mobile_person3
Przypisz klasy CSS do sekcji
Następnie otwórz wszystkie sekcje biograficzne i przypisz każdemu z nich:
- Pierwsza sekcja Bio: section_mobile_1
- Druga sekcja życiorysu : secton_mobile_2
- Trzecia sekcja życiorysu : section_mobile_3
Przypisz klasy CSS do modułów tekstowych
Ostatnie klasy CSS, które musisz podać, to te połączone z modułami tekstowymi w różnych sekcjach biografii. Zgodnie z sekcją bio przypisz następujące klasy CSS do modułów tekstowych w tej sekcji:
- Powiązany z modułem pierwszej osoby: div_mobile_text_1
- Powiązany z drugim modułem Osoba: div_mobile_text_2
- Powiązany z modułem trzeciej osoby: div_mobile_text_3
Dodaj kod wyświetlania CSS do sekcji
Idąc dalej będziesz musiał sprawić, by wszystkie sekcje biologiczne były niewidoczne. Przejdź do zakładki Zaawansowane w każdej z sekcji i skopiuj i wklej następujący wiersz kodu CSS do elementu głównego:
display: none;
Upewnij się, że usuniesz ten wiersz kodu CSS w głównym elemencie każdego modułu tekstowego. W wersji na komputery musieliśmy uczynić je niewidocznymi, ale nie jest to konieczne w przypadku telefonu komórkowego i tabletu.
Wyłącz na pulpicie
Teraz, po dokonaniu wszystkich modyfikacji, przed dodaniem kodu pozostało jeszcze jedno: wyłącz trzy sekcje bio na pulpicie. Śmiało i otwórz każdą z sekcji i przejdź do zakładki Zaawansowane. W podkategorii Widoczność na karcie Zaawansowane wyłącz sekcje na pulpicie.
Dodaj kod jQuery
Teraz, gdy wprowadziliśmy wszystkie praktyczne zmiany w kreatorze Divi, nadszedł czas, aby przejść do ostatniego kroku; dodanie kodu jQuery.
Dodaj nowy moduł kodu
Najłatwiejszym sposobem dodania kodu do strony jest użycie modułu kodu. Prawdopodobnie będziesz używać tego modułu osoby z biografią po kliknięciu tylko na jednej stronie. Korzystając z modułu kodu, upewnisz się, że kod zostanie załadowany tylko wtedy, gdy ktoś jest na tej stronie. Skopiuj i wklej dwa oddzielne kody jQuery do tego samego modułu kodu.
Umieść kod Desktop jQuery w swoim module kodu
Skopiuj i wklej następujące wiersze kodu CSS do modułu kodu, aby działała wersja biografii na pulpicie:
<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>Umieść kod jQuery dla tabletów i telefonów w module kodu
Oraz następujące wiersze kodu, aby wersja na tablet i telefon działała:
<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>Ostateczny wynik
Przyjrzyjmy się po raz ostatni wynikowi, gdy wykonasz wszystkie kroki opisane w tym poście. Tak to będzie wyglądać na komputerze:
A na telefonie i tablecie:
Zawijanie
W tym poście pokazaliśmy, jak stworzyć moduł osoby z biografią, który ukrywa się i pokazuje po kliknięciu. Stosując tę metodę, będziesz w stanie zaoszczędzić miejsce w swojej witrynie i pokazać je odwiedzającym tylko wtedy, gdy okażą zainteresowanie. Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej!
Pamiętaj, aby zapisać się do naszego biuletynu e-mail i kanału YouTube, aby nigdy nie przegapić ważnego ogłoszenia, przydatnej wskazówki lub gratisów Divi!