Kreator stron HTML

Przykład kodu i dane zaktualizowane 13 października 2026 · Mobirise

Co robisz

Układasz gotowe bloki, zastępujesz przykładowe teksty własnymi i dodajesz swoje zdjęcia. Ustawienia każdego bloku decydują o odstępach, tle, widocznych elementach i liczbie kolumn; nikt nie wpisuje żadnego tagu.

Co dostajesz

Statyczne strony: pliki .html wraz z CSS i JavaScriptem, oparte na Bootstrap 5. Wszystkie bloki są responsywne, więc jeden plik dopasowuje się do ekranu od małego telefonu po szeroki monitor.

Koszt

Z aplikacji możesz korzystać za darmo, także komercyjnie, a zawiera ona podstawowy motyw z ponad 200 blokami. Za 149 $ rocznie KIT odblokowuje bibliotekę premium (ponad 220 motywów i rozszerzeń) i usuwa oznaczenie Mobirise.

Skąd wziąć pliki

W aplikacji desktopowej bez opłat: publikuje ona kompletną stronę do wybranego przez Ciebie folderu na dysku. Funkcja Site Export w kreatorze w przeglądarce wymaga planu BASE lub GROW.

Zmiany w kodzie

W płatnym planie rozszerzenie Code Editor otwiera dowolny blok lub całą stronę, dzięki czemu możesz zmieniać jej HTML i CSS.

Gdzie działa

Windows 7 lub nowszy: MobiriseSetup.exe (ok. 105 MB). macOS od wersji 10.13 High Sierra: plik .dmg dla Apple Silicon lub Intel (po ok. 134 MB). Linux oparty na Debianie, np. Ubuntu: plik .deb (ok. 102 MB). Wersja 6.1.12; ten sam silnik działa też w przeglądarce.

Hosting

Twój dotychczasowy serwer przez FTP lub FTPES, repozytorium GitHub Pages albo subdomena mobirisesite.com z HTTPS bez opłat (trzy strony w darmowym planie).

Mniej odpowiedni do

Przerabiania HTML-a stworzonego w innym narzędziu. W Mobirise wczytasz tylko projekty Mobirise.

Jeden blok z publicznego dema Mobirise: rząd funkcji ze strony ControlM5 do zarządzania magazynem – to pierwszy z trzech zrzutów ekranu w widoku na komputerze pod tytułem tej strony. Ozdobne obramowania i trzy powtarzające się karty zostały wycięte, a wcięcia skrócone; nic więcej nie zmieniono.

<section data-bs-version="5.1" class="features01 controlm5 cid-vgZMybvHpp" id="features01-2">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="content-wrapper">
          <!-- decorative border elements trimmed -->
          <div class="row items-wrapper">
            <div class="col-12 col-lg-3 item features-without-image">
              <div class="item-wrapper">
                <div class="iconfont-wrapper">
                  <span class="cards-icon mbr-iconfont mobi-mbri-layers mobi-mbri" style="color: rgb(150, 140, 120); fill: rgb(150, 140, 120);"></span>
                </div>
                <h4 class="item-title mbr-fonts-style display-4">
                  <strong>STOCK TRACKING</strong>
                </h4>
                <p class="item-text mbr-fonts-style display-4">
                  Monitor product quantities, locations.
                </p>
              </div>
            </div>
            <!-- three more cards with the same markup trimmed -->
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Z dema ControlM5 do zarządzania magazynem, blok features01, odczytany w październiku 2026 i skrócony. Kolor pomarańczowy oznacza klasy siatki Bootstrap, niebieski – klasy bloków i tekstu Mobirise.

container, row, col-12

Siatka Bootstrap. Zewnętrzny wiersz zawiera jedną kolumnę na pełną szerokość, a wewnętrzny – cztery karty funkcji.

col-12 col-lg-3

Karta zajmuje całą szerokość telefonu, a od punktu przełamania lg w Bootstrap (992 piksele) wzwyż – jedną czwartą wiersza, więc na laptopie cztery karty stoją obok siebie, a na telefonie układają się jedna pod drugą.

features01 controlm5 cid-vgZMybvHpp

Projekt bloku, jego motyw i klasa, której nie ma żaden inny blok. Pod tą klasą plik mbr-additional.css ustawia padding-top i padding-bottom na 5rem, ciemne tło i dolne obramowanie: to wartości, którymi sterują ustawienia bloku.

mbr-fonts-style display-4

Styl tekstu wspólny dla całej strony. Tutaj display-4 ustawia czcionkę Geist o rozmiarze 0.875rem oraz regułę płynnej zmiany rozmiaru dla wąskich ekranów.

data-bs-version="5.1"

Oznacza sekcję jako kod Bootstrap 5. Kolor ikony jest zapisany bezpośrednio w elemencie, a sam symbol pochodzi z czcionki ikon Mobirise.

To nie jest kod minimalny: bloki zawierają też elementy opakowujące, które istnieją tylko dla wyglądu, jak wycięte tu elementy obramowania. Więcej o tym, jak bloki korzystają z siatki, znajdziesz na stronie kreatora Bootstrap.

Pliki, które ładuje to samo demo, odczytane ze ścieżek w jego kodzie HTML; inne motywy mogą używać nieco innych folderów.

Wyszukiwanie narzędzia do tworzenia stron w HTML daje kilka rodzajów oprogramowania. Praktyczny podział: folder, który możesz wgrać na dowolny serwer, albo strona żyjąca wewnątrz platformy.

Kreatory desktopowe, edytory kodu i jeden generator AI, porównane pod kątem tego, co się liczy, gdy celem jest HTML: framework, dostęp do kodu i miejsce, gdzie można umieścić pliki. Wiersze, w których wygrywa inne narzędzie, zostały w tabeli.

Źródła: strony produktów, cen i pomocy na stronach samych producentów, odwiedzone 13 października 2026. Kwoty są w dolarach amerykańskich bez podatku, a każda komórka podaje podstawę rozliczenia (jednorazowo, miesięcznie lub rocznie); poza USA Pinegrow i Adobe podają ceny w lokalnych walutach. Warunki często się zmieniają; sprawdź je przed zakupem.

Wybieraj według zadania, które przed Tobą stoi; Mobirise jest dobrą odpowiedzią na jedne z nich, a złą na inne.

Bez kodu i bez rachunku, z plikami w ręku

Mobirise: darmowa aplikacja, której strony na Bootstrap 5 trafiają na dowolny hosting.

Przerabianie istniejącej strony

Pinegrow lub Dreamweaver, oba otwierają dowolny HTML. Mobirise nie potrafi go zaimportować.

Tailwind CSS lub kod bez frameworka

Pinegrow.

Komponenty Bootstrap za jednorazową opłatą

Bootstrap Studio, za 29 $ lub 59 $ jednorazowo.

Samodzielne wpisywanie każdego tagu, za darmo, na Windows

Darmowy edytor HTML od CoffeeCup.

Praca nad kodem w Creative Cloud

Dreamweaver, jeśli już płacisz za aplikacje Adobe.

Najpierw zobaczyć projekt AI za darmo

8B AI, gdzie etap projektowania jest darmowy, a uruchomienie strony wymaga planu Pro za 9 $ miesięcznie.

Szkic z opisu, a potem bloki do edycji

Mobirise AI: cztery projekty na jeden prompt, 3 darmowe generacje AI miesięcznie, potem eksport z aplikacji desktopowej.

Mobirise to kreator HTML dla osób, które wolą nie dotykać znaczników. W aplikacji desktopowej droga od pustego projektu do plików na serwerze ma cztery etapy.