Jak sprawić, by Twoja stopka Divi była przyklejona?

W tym samouczku pokażemy Ci dokładnie, jak sprawić, by stopka na Twojej witrynie Divi była przyklejona. Używanie lepkiej stopki może być jednym z próśb, które otrzymujesz, gdy projektujesz witrynę internetową dla klienta, lub potrzebą, którą masz, gdy tworzysz własną witrynę internetową. Pokażemy Ci dwie możliwości, które sprawią, że Twoja stopka będzie lepka. Pierwszy sposób to kod CSS, a drugi kod jQuery. Obydwa sposoby działają, ale wszystko zależy od tego, który z nich wolisz używać do tworzenia lepkiego efektu na swojej stronie internetowej.

Dodanie przyklejonej stopki do witryny nie jest obecnie czymś, co możesz zrobić automatycznie w konstruktorze Divi. Dlatego pokażemy Ci, jak osiągnąć dokładnie pożądany rezultat bez konieczności wkładania dużego wysiłku. Jedyne, co musisz zrobić, to śledzić ten post krok po kroku, kopiować i wklejać kilka linijek kodu i umieszczać je w odpowiednim miejscu.

Dlaczego warto używać przyklejonej stopki?

Przyklejona stopka jest zwykle używana z jednego głównego powodu; jeśli masz jedną lub wiele stron w swojej witrynie, które nie zawierają wystarczającej ilości treści, aby wypełnić cały ekran. Możesz oczywiście upewnić się, że masz wystarczająco dużo treści na stronie, ale jeśli nie wniesie to wartości dodanej do strony; nie ma takiej potrzeby.

Teraz, jeśli nie ma wystarczającej ilości treści, aby wypełnić cały ekran, strona będzie miała pływającą stopkę zaraz po zakończeniu treści. To zwykle nie wygląda dobrze i nie jest to wynik, który chcesz uzyskać. Na szczęście możesz skorzystać z przyklejonej stopki, aby pozbyć się pływającej stopki. Lepka stopka sprawia, że ​​stopka pozostaje na dole strony, nie tworząc niepotrzebnej przestrzeni. W ten sposób długość strony pozostanie taka sama, a za każdym razem, gdy dostosujesz rozmiar okna, stopka dostosuje się do ekranu.

Tutaj masz obraz krótkiej strony, która nie ma przyklejonej stopki:

A oto ten sam obraz tej strony po dodaniu przyklejonej stopki:

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

Nie każdy decyduje się na użycie stopki na swojej stronie internetowej, ale kiedy to robi; istnieje wiele sposobów na jej stylizację. Wszystko zależy od struktury Twojej witryny i od tego, czy chcesz dołączyć „ręczną” i inaczej stylizowaną stopkę, która jest tworzona za pomocą konstruktora Divi.

Ale jeśli używasz standardowej stopki, możesz wybrać, jak chcesz ją stylizować i jak chcesz, aby była pozycjonowana na Twojej stronie. Trzy główne pozycje, jakie może mieć stopka na stronie internetowej, to: ruchoma, stała i przyklejona.

Porównując ze sobą lepką i stałą stopkę; mogą wyglądać tak samo na pierwszy rzut oka, ale tak nie jest. Stała stopka jest zawsze widoczna podczas przewijania strony w witrynie, podczas gdy lepka stopka obsługuje strony, na których treść nie jest wystarczająco długa, aby dotrzeć do dolnej części ekranu. W tym konkretnym przypadku, gdy treść nie jest wystarczająco długa; będzie zachowywać się jak nieruchoma stopka i będzie przyklejać się do dołu strony; tworząc ten „efekt stałej stopki”.

Jeśli jednak treść jest wystarczająco długa, przyklejona stopka będzie zachowywać się normalnie, a strona przesunie stopkę w dół strony, aby upewnić się, że nie jest ona stale wyświetlana na ekranie. W większości przypadków ta metoda jest bardziej preferowana niż używanie stałej stopki w całej witrynie, ponieważ daje więcej miejsca w oknie na pojawienie się treści.

Utwórz przyklejoną stopkę na swojej stronie Divi za pomocą CSS

Bez dalszych opłat zacznijmy tworzyć przyklejoną stopkę dla Twojej witryny. Kod, którego będziemy używać, jest naprawdę prosty, ale wykonuje zadanie. Szybko przejdziesz od pływającej stopki na swojej stronie do strony, na której stopka jest przesuwana poniżej, jeśli treść nie jest wystarczająco długa.

Dodaj kod CSS poprzez ustawienia strony (w szczególności dla jednej strony)

W niektórych przypadkach, chcesz zrobić lepkiej stopki tylko na jednej konkretnej stronie. W tej części posta pokażemy, jak to zrobić, dodając kod CSS do pola Custom CSS na jednej stronie. Robiąc to, upewniasz się, że kod CSS dotyczy tylko tej jednej strony w Twojej witrynie. Co oznacza również, że kod CSS zostanie załadowany tylko wtedy, gdy ktoś otworzy tę konkretną stronę. Ta metoda jest zwykle stosowana w przypadkach, gdy w witrynie jest tylko kilka krótszych stron, do których chcesz dodać przyklejoną stopkę.

Zacznij od otwarcia strony, na której chcesz, aby przyklejona stopka była aktywna, lub utwórz nową stronę, na której chcesz ją zastosować. Następnie otwórz ustawienia strony, klikając następującą ikonę w swoim kreatorze Divi:

Idąc dalej, dodaj następujący kod do pola Custom CSS w oknie, które właśnie otworzyłeś:

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

Od momentu wyświetlenia podglądu strony kod CSS powinien obowiązywać i przyklejać stopkę.

Dodaj kod CSS za pomocą narzędzia do dostosowywania motywów (widok w czasie rzeczywistym)

Innym sposobem dodania kodu jest użycie narzędzia Theme Customizer. Jeśli w ten sposób dodajesz kod CSS, zostanie on automatycznie zastosowany do całej witryny. Na każdej stronie zostanie zastosowany ten kod CSS. Dodając kod za pomocą narzędzia Theme Customizer, możesz również bezpośrednio zobaczyć zmiany zachodzące w Twojej witrynie.

Aby dodać kod CSS do Theme Customizer, kliknij „Theme Customizer” na zapleczu swojej witryny WordPress. Następnie przewiń stronę w dół i otwórz opcję Dodatkowy CSS. Zobaczysz cały niestandardowy kod CSS, którego używałeś do tej pory. Śmiało i dodaj do niego następujący kod:

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

Dodaj kod CSS za pomocą opcji motywu Divi

Na koniec możesz również dodać kod za pomocą opcji motywu Divi. Jest to najczęściej używany sposób dodawania kodu do witryny, w której chcesz, aby cała witryna skorzystała z kodu.

Przejdź do Divi> Opcje motywu> Przewiń stronę w dół> Dodaj następujący kod CSS do niestandardowego pola CSS:

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

Utwórz przyklejoną stopkę na swojej stronie Divi za pomocą JQuery

Dodaj jQuery Code Through Code Module (w szczególności dla jednej strony)

Możesz dodać kod jQuery za pomocą modułu kodu w konstruktorze Divi. To znowu jest najczęściej używane, gdy nie ma wielu stron z krótką treścią i jeśli nie chcesz ładować kodu jQuery dla całej witryny.

Dodaj sekcję z wierszem o pełnej szerokości do strony, nad którą pracujesz.

Kontynuuj, dodając moduł kodu do tego wiersza o pełnej szerokości i wklej do niego następujący kod:

<script text= "text/javascript">
jQuery(function($){
function stickyFooter(){
var footer = $("#main-footer");
var position = footer.position();
var height = $(window).height();
height = height - position.top;
height = height - footer.outerHeight();
if (height > 0) {
footer.css({'margin-top' : height+'px'});
}
}
stickyFooter();
$(window).resize(function(){
stickyFooter();
});
});
</script>

Dodaj kod jQuery poprzez opcje motywu Divi

Inną możliwością dodania kodu jQuery jest użycie opcji motywu Divi. Podczas dodawania kodu jQuery dla całej witryny, w opcjach motywu Divi jest jedno konkretne miejsce, w którym możemy to zrobić; w <head&gt; pole zakładki Integracja. Właśnie tam zamierzamy teraz dodać kod.

Otwórz swoją witrynę WordPress> Przejdź do Divi> Otwórz opcje motywu> Przejdź do zakładki Integracja i dodaj następujący kod jQuery do <head> swojej witryny:

<script text= "text/javascript">
jQuery(function($){
function stickyFooter(){
var footer = $("#main-footer");
var position = footer.position();
var height = $(window).height();
height = height - position.top;
height = height - footer.outerHeight();
if (height > 0) {
footer.css({'margin-top' : height+'px'});
}
}
stickyFooter();
$(window).resize(function(){
stickyFooter();
});
});
</script>

Końcowe przemyślenia

Dodanie przyklejonej stopki jest zwykle konieczne w przypadkach, gdy masz stronę zawierającą niewiele treści. Chcesz pozbyć się pływającej stopki, aby struktura strony była bardziej naturalna. Jeśli masz jakieś uwagi lub sugestie dotyczące przyszłych postów na naszym blogu; upewnij się, że zostawiłeś 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 Vintagio / shutterstock.com