![JAK ZROBIĆ DWIE KOLUMNY W POJEDYNCZYM ARTYKULE - część 2](https://joomlaguru.pl/images/joomla/joomla_rozszerzenia/jak-zrobic-dwie-kolumny-w-pojedynczym-artykule-czesc-2.jpg) # Jak zrobić dwie kolumny w pojedynczym artykule - część 2 Autor: Marcin Równicki Publikacja: 22.05.2019 | 9:07 [Kategoria: Rozszerzenia](https://joomlaguru.pl/index.php?option=com_content&view=category&id=10) --- 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. ## Spis treści 1. [WYMAGANIA](https://joomlaguru.pl/joomla/rozszerzenia/jak-zrobic-dwie-kolumny-w-pojedynczym-artykule-czesc-2#wymagania) 2. [KONFIGURACJA JCE](https://joomlaguru.pl/joomla/rozszerzenia/jak-zrobic-dwie-kolumny-w-pojedynczym-artykule-czesc-2#konfiguracja-jce) 3. [DWIE KOLUMNY RESPONSYWNE W POJEDYNCZYM ARTYKULE](https://joomlaguru.pl/joomla/rozszerzenia/jak-zrobic-dwie-kolumny-w-pojedynczym-artykule-czesc-2#dwie-kolumny-responsywne-w-pojedynczym-artykule) 4. [PODSUMOWANIE](https://joomlaguru.pl/joomla/rozszerzenia/jak-zrobic-dwie-kolumny-w-pojedynczym-artykule-czesc-2#podsumowanie) Część pierwszą wpisu znajdziesz tutaj. ## WYMAGANIA Nadal potrzebujemy edytora JCE może być w wersji core darmowej. Dodatkowo potrzebować będziesz specjalnego pliku css. [![zip](https://joomlaguru.pl/media/jce/icons/archive.png)editor.css.zip642 Bytes](https://joomlaguru.pl/images/stories/joomla/komponenty/jce/dwie-kolumny/editor.css.zip "Pobierz") ## 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](https://joomlaguru.pl/images/stories/joomla/komponenty/jce/dwie-kolumny/konfiguracja-jce-dodatkowe-style.png) Zapoznaj się wizualnie z Bootstrapem i ustawieniami 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](https://joomlaguru.pl/images/stories/joomla/komponenty/jce/dwie-kolumny/zmiana-p-na-div.png) 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](https://joomlaguru.pl/images/stories/joomla/komponenty/jce/dwie-kolumny/artykul-tekst-div.png) Zaznacz całą treść z pierwszego DIVa. Użyj Styles i wyszukaj "col-md-6". ![zaznacz tekst wybierz style kolumne](https://joomlaguru.pl/images/stories/joomla/komponenty/jce/dwie-kolumny/zaznacz-tekst-wybierz-style-kolumne.png) 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](https://joomlaguru.pl/images/stories/joomla/komponenty/jce/dwie-kolumny/dwie-kolumny-na-duzym-ekranie-responsywne.png) A widok mobilny powinien zaprezentować dwie kolumny w ciągu jedna pod drugą. (NEXUS 6) ![dwie kolumny na duzym ekranie responsywne nexus 6](https://joomlaguru.pl/images/stories/joomla/komponenty/jce/dwie-kolumny/dwie-kolumny-na-duzym-ekranie-responsywne-nexus-6.png) 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. Aktualizacja: 09.06.2026 | 13:01 Zapisz się do newslettera --- ## Powiązane [ ![Joomla 6.1.2 - wydanie bezpieczeństwa i poprawek - opis zmian](https://joomlaguru.pl/images/joomla_6/Joomla-6-1-2-opis-zmian.webp) ### Joomla 6.1.2 - wydanie bezpieczeństwa i poprawek - opis zmian Więcej ](https://joomlaguru.pl/index.php?option=com_content&view=article&id=649:joomla-6-1-2-wydanie-bezpieczenstwa-i-poprawek-opis-zmian&catid=9) [ ![Anatomia ataku web shell](https://joomlaguru.pl/images/joomla_6/webshell-anatomia-ataka-skutki.webp) ### Popularny edytor JCE w Joomla zaatakowany. Sprawdź, czy Twoja strona nie ma webshella Więcej ](https://joomlaguru.pl/index.php?option=com_content&view=article&id=648:pilna-aktualizacja-jce-joomla-cve-2026-48907-falszywe-profile-webshell&catid=9) [### Composer Joomla Więcej ](https://joomlaguru.pl/index.php?option=com_content&view=article&id=489:composer-joomla&catid=18)