Przejdź do treści 
Często zdarza się, że chcemy dodać wielokropek w streszczeniu Wpisów Elementor, aby zwiększyć ich atrakcyjność i zachęcić czytelników do dalszej lektury. Widżety Elementora, tj. Archiwum Postów oraz Wpisy nie zawierają domyślnie wielokropka, co powoduje ucinanie zdań przy dłuższych wpisach. W tym poście pokażę Ci, jak łatwo dodać wielokropek za pomocą krótkiego kodu CSS.
Dlaczego warto dodać wielokropek w streszczeniu Wpisów bloga?
Wielokropek w streszczeniu Wpisów Elementor to ważny element, którego dodanie może mieć kilka praktycznych zalet. Zalety te zależą od konkretnego projektu lub strony internetowej, na której jest stosowany. Oto kilka zastosowań, dla których warto rozważyć użycie tego kodu:
- Poprawa wyglądu: Dodanie trzech kropek po krótkim opisie wpisu na blogu może poprawić estetykę strony i uczynić ją bardziej czytelną. Krótki opis może kończyć się w nieodpowiednim miejscu, a dodanie trzech kropek pozwoli użytkownikom na łatwe zrozumienie, że tekst jest kontynuowany.
- Skrócenie tekstu: Dłuższe opisy wpisów na blogu lub innych treści na stronie internetowej mogą nie zmieścić się w wyznaczonym miejscu. Dodanie trzech kropek pozwoli na skrócenie tekstu, co ułatwi użytkownikom zrozumienie treści i wygodne przeglądanie strony.
- Konsystencja stylu: Zastosowanie jednolitego stylu z trzema kropkami pozwoli na utrzymanie spójnego wyglądu, co wpłynie na pozytywne wrażenie użytkowników związane z estetyką strony. Ponadto, takie rozwiązanie ułatwi nawigację po stronie i pozwoli na łatwe zrozumienie zawartości krótkich opisów treści.
Podsumowując, zastosowanie poniższego kodu CSS może pomóc w poprawie wyglądu i czytelności strony internetowej. Pomoże też w utrzymaniu spójnego stylu dla krótkich opisów treści.
Wielokropek w streszczeniu Wpisów – kod CSS
Jak dodać wielokropek w streszczeniu Wpisów Elementor? Poniższy kod CSS pomoże Ci uzyskać ten efekt:
.elementor-post__excerpt > p:after {
content: "...";
}Skopiowany kod CSS umieść w sekcji Spersonalizowany CSS. Aby to zrobić, kliknij na element wpisy, następnie przejdź do sekcji Zaawansowane w menu po lewej stronie ekranu i przejdź do sekcji Spersonalizowany CSS – tam wklej podany kod.
Opublikuj zmiany, następnie sprawdź efekty.
Szczegółowy opis kodu
Aby zrozumieć, co robi ten kod, musimy rozłożyć go na części składowe.
.elementor-post__excerpt odnosi się do kontenera, w którym znajduje się tekst wpisu na blogu. Kontener ten stosuje się zwykle w szablonach blogów na stronach internetowych, aby wyświetlać krótki opis wpisu.
p oznacza, że styl zostanie zastosowany tylko do elementów <p> znajdujących się w kontenerze .elementor-post__excerpt.
:after to pseudoelement CSS, który pozwala na dodanie zawartości do elementu HTML po jego zawartości. W tym przypadku, używając content: „…”;, dodajemy trzy kropki po tekście wpisu.
Ostatecznie, kod CSS „.elementor-post__excerpt > p:after { content: „…”; }” powoduje, że po krótkim opisie wpisu na blogu, które znajduje się w elemencie <p> o klasie .elementor-post__excerpt, zostają dodane trzy kropki.
Można to zastosować, aby zapewnić spójny styl krótkich opisów wpisów na blogu. Ponadto, dzięki temu rozwiązaniu, można w prosty sposób skrócić dłuższe opisy treści, co pozwoli na lepszą ich czytelność i zwięzłość.
Gratulacje, jeżeli poprawnie wykonałeś kroki zaprezentowane w tym poradniku, udało Ci się dodać wielokropek w streszczeniu Wpisów Elementor.
