JAK ZROBIĆ DWIE KOLUMNY W POJEDYNCZYM ARTYKULE - część 1

środa, 22 maj 2019 05:39 Napisał 
  Przeczytasz w: 2 - 3 min
JAK ZROBIĆ DWIE KOLUMNY W POJEDYNCZYM ARTYKULE - część 1 JAK ZROBIĆ DWIE KOLUMNY W POJEDYNCZYM ARTYKULE - część 1 Joomla GURU

Dwie kolumny w artykule czy taki wygląd jest możliwy w pojedynczym artykule? Oczywiście, że tak i jest kilka metod, aby tego dokonać. Pokaże Ci jeden bardzo prosty sposób i jeden bardziej skompilowany, który będzie wymagał więcej nakładu czasu i konfiguracji. 
Metoda, która Ci pokaże będzie wymagała zainstalowania edytora JCE może on być w wersji core darmowej.

WYMAGANIA

Wymagane rozszerzenie to edytor tekstu JCE, pobrać go możesz bezpłatnie tutaj https://www.joomlacontenteditor.net/downloads/editor/core

W konfiguracji Joomla zmień edytor domyślny na JCE. Po instalacji na tym etapie nie trzeba zmieniać konfiguracji edytora, aby uzyskać efekt dwóch kolumn w jednym artykule.

DWIE KOLUMNY W POJEDYNCZYM ARTYKULE

Utwórz artykuł. W tym przykładzie treść będzie składać się z obrazu oraz tekstu. Podzielimy artykuł na dwie kolumny metodą bardzo prostą. 

Włącz oznaczanie elementów w trybie wizualnym. Ustaw kursor na P i zmień na DIV.

zmiana p na div

Uruchom edytor stylu css. W tym edytorze będziemy ustawiać kolumnę lewą oraz prawą.

edytor stylu

W edytorze ustaw rozmiar elementu, w przykładzie jest to wartość procentowa i wynosi 49% pierwsza kolumna lewa. 

edtor stylu lewa

Zastosuj zmiany i w samym edytorze zrób enter, aby utworzył się nowy element. Ten nowy element DIV będzie naszą prawą kolumną.

Uruchom ponownie edytor stylów css. Tym razem pamiętaj, żeby element był ustawiony na prawą stronę. Margines wyłącz, ponieważ ustawimy regułę dla lewego marginesu.

edtor stylu prawa

Lewy margines ustaw na 15 pikseli. 

edtor stylu prawa 1

Zastosuj zmiany. Wygląd edytora powinien się zmienić na dwie kolumny.

artykul dwie kolumny

Ponieważ edytor JCE sam potrafi zamykać elementy i każdy enter może zmieć DIV na P masz dwie opcje. 

Pierwsza wkleisz przygotowany wcześniej tekst i go sformatujesz. Druga opcja to dodanie elementu P wewnątrz DIV. Przełącz edytor tekstowy w tryb wpisywania kodu. 

umieszczanie p przelaczanie na kod

W tym momencie uzyskujesz z powrotem możliwość pisania w edytorze bez obawy zmiany pierwszego elementu DIV. 

Artykuł z dwoma kolumnami w jednym artykule prezentuje się tak. 

dwie kolumny artykul

Dzielenie artykułu na dwie kolumny może spowodować zmniejszenie czytelność na urządzeniach mobilnych. Widok pozostaje taki sam jak na dużych ekranach. 

dwie kolumny artykul widok mobilny

Czy można taką czytelność poprawić? Tak można, ale wymaga to znajomości Bootstrapa przynajmniej w wersji 3. 

PODSUMOWANIE

Jak widzisz przy pomocy JCE można wiele zdziałać nawet w wersji podstawowej. Jest do jeden z najbardziej wszechstronnych edytorów dostępnych na Joomla.

Aby nie mieszać sposobu prezentacji dwóch kolumn w jednym artykule, drugi sposób będzie w osobnym artykule. Ponieważ drugi sposób wymaga dodatkowej konfiguracji JCE i większej znajomości Bootstrapa.

Drugi artykuł Jak zrobić dwie kolumny w pojedynczym artykule, ale tym razem responsywne znajdziesz tutaj. https://joomlaguru.pl/joomla/komponenty/479/jak-zrobic-dwie-kolumny-w-pojedynczym-artykule-czesc-2

 

Dodatkowe informacje

  • POZIOM TRUDNOŚCI 100:
Czytany 171 razy Ostatnio zmieniany wtorek, 09 lipiec 2019 19:23
Oceń ten artykuł
(0 głosów)
Marcin Równicki

Ekspert w dziedzinie Joomla! z długoletnim stażem. Pasjonata od czasów MAMBO, który naucza online o możliwościach Joomla! Piszę poradniki oraz prowadzi jedyny w Polsce cykl darmowego video "Joomla To Proste" w którym uczy o rozszerzonych możliwościach Joomla! Lubi optymalizować witryny, aby te działały jak najszybciej. 

Ponadto lubię dobre kino oraz seriale, dziele się recenzjami na https://cobejrzec.pl  

Spoglądam w chmury Public Cloud, gdzie staram się zgłębiać wiedzę na temat (Amazon Web Services, Azure, Google Cloud Computing)

"Jeśli coś jest niemożliwe do zrobienia, musi się znaleźć ktoś kto tego nie wie, przyjdzie i to zrobi." - A.E.

Strona: https://rownicki.pl

Wyszukaj

 

sppagebuldierpro banner pobierz