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

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

Kontynuujemy dalszą przygodę z dwoma kolumnami w jednym artykule. Tym razem kolumny będą responsywne i na urządzeniach mobilnych będą prezentować treść na całą szerokość. Jeśli jesteś mniej zawansowany to zachęcam Cię do zapoznania się z częścią pierwszą wpisu. 

Część pierwszą wpisu znajdziesz tutaj. 

https://joomlaguru.pl/joomla/komponenty/478/jak-zrobic-dwie-kolumny-w-pojedynczym-artykule-czesc-1

WYMAGANIA

Nadal potrzebujemy edytora JCE może być w wersji core darmowej. https://www.joomlacontenteditor.net/downloads/editor/core

Dodatkowo potrzebować będziesz specjalnego pliku css. 

Pobierz

File name: editor.css.zip

140 6

KONFIGURACJA JCE

Ściągnięty plik editor.css.zip rozpakuj. Następnie editor.css umieść w katalogu Twojego szablonu. Zaloguj się poprzez FTP na swoje konto hostingowe i umieść plik w wskazanym miejscu.

templates/twój-szablon/css/

Po umieszczeniu pliku udaj się do konfiguracji globalnej rozszerzenia JCE. Dodaj ścieżkę, gdzie znajduje się plik na FTPie. Następnie zapisz ustawienia. To spowoduje dodanie nowych stylów w JCE. Jeśli chciałbyś, aby tylko wybrane style się pojawiały wówczas zaimplementuj swój plik editor.css w profilu.

konfiguracja jce dodatkowe style

Zapoznaj się wizualnie z Bootstrapem i ustawieniami GRID 

https://getbootstrap.com/docs/3.3/examples/grid/

W przykładzie gdzie mamy dwie kolumny użyjemy po prostu 6 pól dla lewej kolumny i 6 pól dla prawej kolumny.

.col-md-6

To zagwarantuje nam rozkład 50% na 50%

DWIE KOLUMNY RESPONSYWNE W POJEDYNCZYM ARTYKULE

Zasada działania jest bardzo zbliżona co w poprzednim wpisie. Należy utworzyć dwa DIVy po czym przypisać jednemu, jak i drugiemu przyrostek .col-md-6 dzięki temu wszystko co jest poniżej 768px będzie widoczne w jednej kolumnie, a przy wyższych rozdzielczościach w dwóch. 

Zawsze dobrze jest włączyć sobie podgląd wizualny bloków.

zmiana p na div

Jeśli masz już dwa DIVy i treść. Możesz dodać DIVy ręcznie w miejscu tam gdzie chcesz aby zaczynała się lewa i prawa kolumna. (preferowany sposób) Możesz spróbować nadać DIVy poprzez edytor jednak uważaj, aby nie zmienił Ci wszystkich zaznaczonych sekcji P.

artykul tekst div

Zaznacz całą treść z pierwszego DIVa. Użyj Styles i wyszukaj "col-md-6".

zaznacz tekst wybierz style kolumne

 Powtórz operacje na drugim DIVie. Powinieneś zobaczyć, że edytor ustawił dwa DIVy obok siebie w kolumnie. Zapisz artykuł i sprawdź jak wyświetla się na dużych ekranach. 

dwie kolumny na duzym ekranie responsywne

A widok mobilny powinien zaprezentować dwie kolumny w ciągu jedna pod drugą. (NEXUS 6)

dwie kolumny na duzym ekranie responsywne nexus 6

Jak widzisz tekst jest dużo bardziej czytelny gdy użyjemy Bootstrapa i widoku kolumn w gridzie.

PODSUMOWANIE

Oczywiście istnieje jeszcze stary sposób utworzenia zwykłej tabeli, ale raz, że zazwyczaj nie jest to element responsywny, a dwa tabel powinno się używać tylko dla danych liczbowych. Jeśli używasz pagebuldiera, który integruje się z pisaniem artykułów to możesz sobie takie rzeczy również wyklikać przez niego. Inna metodologia działania, ale efekt powinien być podobny i również responsywny. 

 

 

Dodatkowe informacje

  • POZIOM TRUDNOŚCI 200:
Czytany 79 razy Ostatnio zmieniany poniedziałek, 27 maj 2019 21:24
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
plcsenderues

Szukaj

 
sppagebuldierpro banner pobierz