Jak naprawić stopkę Divi?

W dzisiejszym samouczku Divi pokażemy, jak utworzyć stałą stopkę dla swojej witryny zamiast normalnej. W poprzednim poście pokazaliśmy, jak sprawić, by była lepka, co w rzeczywistości różni się od naprawiania, chociaż na początku mogą wydawać się takie same. Jeśli nie chciałeś, aby był lepki, ale naprawiony, ten post ci pomoże.

Dodanie stopki, która jest przymocowana do Twojej witryny, może być prośbą od jednego z Twoich klientów lub potrzebą własnej witryny. Chociaż nie jest tak często używany jak stały nagłówek, może to być jedna z tych rzeczy, z którymi się borykasz. Pokażemy Ci dwa sposoby na przyklejenie stopki na Twojej stronie Divi. Pierwsza będzie przy użyciu kilku linii CSS, a druga będzie przy użyciu kodu jQuery. Oba sposoby wprowadzą modyfikacje w arkuszu stylów CSS stopki w Twojej witrynie.

Oto przykład, jak wygląda stała stopka podczas przewijania:

Kiedy używać stałej stopki

Istnieją różne powody, dla których chcesz mieć stałą stopkę w swojej witrynie. Jednym z tych powodów może być trafność informacji, które zawiera Twoja stopka. Możesz na przykład umieścić swoje ikony społecznościowe w stopce i ponieważ chcesz zachęcić odwiedzających Twoją witrynę do przeglądania kanałów mediów społecznościowych. Innym powodem może być to, że po prostu podoba Ci się efekt, jaki daje Twojej witrynie.

Jeśli używasz stałej stopki, powinieneś mieć świadomość, że część okna odwiedzającego będzie zajęta cały czas. Oznacza to, że będą musieli przewijać więcej, aby zobaczyć tę samą treść, którą widzieliby, gdyby nie było stałej stopki. To wyzwanie, ponieważ odwiedzający lubią wkładać jak najmniej wysiłku.

Jeśli jednak Twoja stopka nie jest zbyt duża, może to zwiększyć liczbę akcji wykonywanych w stopce. Odradzamy jednoczesne korzystanie ze stałego nagłówka, głównego menu i stopki. Jeśli wszystkie trzy zostaną naprawione, wyświetlana treść zostanie drastycznie zmniejszona, co może prowadzić do wyższego współczynnika odrzuceń.

Różnica między stałą i przyklejoną stopką

Zanim zaczniemy, wyjaśnimy różnicę między stałą stopką a przyklejoną.

Przyklejona stopka jest zwykle nieco bardziej złożona. Ma zachowywać się jak stała stopka, jeśli strona nie ma wystarczającej zawartości, aby zepchnąć stopkę na dół ekranu. W przypadkach, gdy strony są wystarczająco długie, stopka będzie zachowywać się jak normalna i zostanie przesunięta do dołu strony, a więc nie do ekranu.

Zacznijmy

Subskrybuj nasz kanał YouTube

Zaczniemy od razu, pokazując, jak dodać stałą stopkę do witryny na dwa sposoby; poprzez kod CSS i przez kod jQuery. Obie metody działają, ale wszystko zależy od tego, którą preferujesz w witrynie, do której jest potrzebna.

Dodaj stałą stopkę za pomocą CSS

Pierwszym i najłatwiejszym sposobem utworzenia stałej stopki jest dodanie kilku linii CSS. Dzięki Divi Builder i WordPress możemy dodać te linie w różnych miejscach. Przyjrzyjmy się im.

Dodaj kod CSS za pomocą niestandardowego CSS dla jednej strony

Pierwszym sposobem dodania kodu CSS jest dodanie go w szczególności do jednej strony. Chociaż lepiej jest, aby stała stopka była taka sama dla każdej strony w witrynie (aby zachować tę spójność w witrynie), możesz zastosować ją również do jednej strony.

Otwórz stronę, do której chcesz dodać linie kodu CSS, i kliknij następujący przycisk Divi Builder.

Przewiń w dół i dodaj następujący kod do pola Custom CSS:

#main-footer{
position: fixed;
bottom: 0;
width: 100%;
}

Dodaj kod CSS za pomocą narzędzia do dostosowywania motywów

Innym sposobem dodania kodu jest użycie narzędzia Theme Customizer. Korzystając z narzędzia do dostosowywania motywów, będziesz obserwować wyniki w czasie rzeczywistym na swojej stronie internetowej. Kod dodany za pomocą Konfiguratora motywów dotyczy wszystkich stron w witrynie.

Przejdź do Optymalizatora motywów w swojej witrynie > Dodatkowy kod CSS > Wklej następujące wiersze kodu CSS:

#main-footer{
position: fixed;
bottom: 0;
width: 100%;
}

Dodaj kod CSS za pomocą opcji motywu

Ostatnim sposobem dodania kodu CSS do witryny jest skorzystanie z opcji motywu. Po dodaniu kodu w polu Niestandardowy CSS w opcjach motywu kod zostanie zastosowany również do całej witryny. Jest to najczęściej używany sposób dodawania niestandardowego kodu CSS do całej witryny Divi.

Przejdź do Divi> Opcje motywu> Ogólne> Przewiń w dół i dodaj następujący kod do pola Custom CSS:

#main-footer{ 
position: fixed; 
bottom: 0; 
width: 100%; 
}

Dodaj stałą stopkę przez jQuery

Inną możliwością, jaką mamy, jest wprowadzanie zmian CSS za pomocą kilku linii kodu jQuery. Gdy używasz stałej stopki, zazwyczaj chcesz się upewnić, że dotyczy ona wszystkich stron w Twojej witrynie. Taka spójność ułatwia odwiedzającym poruszanie się po Twojej witrynie bez dezorientacji.

Dodaj kod jQuery poprzez moduł kodu dla jednej strony w szczególności

Otwórz stronę, na której chcesz zastosować stałą stopkę i dodaj nową standardową sekcję na górze strony. Następnie wybierz wiersz o pełnej szerokości i dodaj do niego moduł kodu. Otwórz moduł kodu i wklej następujący kod jQuery w polu zawartości:

<script text="text/javascript">
jQuery(function($) {
$("#main-footer").css("position","fixed").css("bottom",0).css("width",'100%');
});
</script>

Dodając kod jQuery przez moduł kodu na jednej konkretnej stronie, kod będzie miał zastosowanie tylko do tej strony. Reszta Twojej witryny będzie miała normalną stopkę, podczas gdy ta, w której użyłeś modułu kodu, będzie miała stałą stopkę.

Dodaj kod jQuery poprzez opcje motywu

Ostatnią opcją dodania kodu jQuery, który sprawia, że ​​twoja stopka jest naprawiona, jest użycie opcji motywu. Linie kodu zostaną natychmiast zastosowane do całej witryny i zapewnią spójność, której potrzebuje Twoja witryna.

Przejdź do Divi > Opcje motywu > Integracja > I wklej następujące wiersze kodów w <head> swojej witryny:

<script text="text/javascript">
jQuery(function($) {
$("#main-footer").css("position","fixed").css("bottom",0).css("width",'100%');
});
</script>

Końcowe przemyślenia

W jednym z poprzednich postów pokazaliśmy, jak zrobić przyklejoną stopkę. Ten post dotyczył w szczególności tworzenia stałej stopki dla Twojej witryny. Stała stopka zawsze pozostanie na dole ekranu odwiedzającego podczas odwiedzania Twojej witryny. Jeśli masz jakieś pytania lub sugestie, zostaw komentarz w sekcji komentarzy poniżej, abyśmy mogli się z nami skontaktować!

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!

Polecane zdjęcie autorstwa Zeeker2526 / shutterstock.com