Jak dodać opis prelegenta widoczny po najechaniu na zdjęcie?
Roksana
Ostatnia aktualizacja: 4 miesiące temu
Chcesz wzbogacić swoją stronę internetową o interaktywne elementy, takie jak opis prelegenta widoczny po najechaniu na zdjęcie? Poniżej znajdziesz szczegółową instrukcję, jak to zrobić.
Krok 1: Dodanie sekcji dla prelegentów
1. Przejdź do Strona WWW > Lista stron i wybierz zakładkę, którą chcesz edytować.
2. Dodaj sekcję z grupy Prelegenci, jak pokazano na poniższym przykładzie:
Krok 2: Konfiguracja ID sekcji
Dodaj ID elementu dla tej sekcji, aby upewnić się, że stylizacja i funkcjonalność będą dotyczyły wyłącznie wybranego elementu.
Krok 3: Dodanie opisu prelegenta
1. W kodzie HTML znajdź element <img> reprezentujący zdjęcie prelegenta.
2. Pod każdym zdjęciem dodaj element <div> z klasą hover-description, który będzie zawierał opis prelegenta.
Powinno wyglądać jak na poniższym zrzucie:
Krok 4: Dodawanie kolejnych prelegentów
Jeśli chcesz dodać więcej niż trzech prelegentów użyj opcji "duplikuj" aby dodać kolejny rząd. Pamiętaj aby podmienić opisy i zdjęcia.
Krok 5: Stylizacja w CSS
1. Przejdź do Konfiguracja > Dla deweloperów > custom.css.
2. Wklej poniższy kod CSS, który umożliwi wyświetlanie opisu prelegenta po najechaniu na zdjęcie:
Krok 6: Zapisanie i testowanie zmian
1. Zapisz wszystkie zmiany w systemie.
2. Przejdź na stronę, na której dokonałeś modyfikacji.
3. Po najechaniu kursorem na zdjęcie prelegenta powinien pojawić się jego opis.
W ten sposób dodasz do swojej strony atrakcyjną, interaktywną funkcjonalność, która przyciągnie uwagę odwiedzających.