Nowoczesny i wydajny CMS dla stron firmowych z branży IT

[do korekty merytorycznej] Tworzenie serwisów internetowych dla firm technologicznych jest jednym z naszych ulubionych typów projektów. W artykule opisuję wybrane moduły naszego autorskiego systemu ICEberg CMS oraz odpowiedzi Macieja Chmielowskiego CEO Krakweb na najczęstsze i najciekawsze pytania dotyczące (nie tylko) serwisów z branży IT.
2019-11-12 00:00
10 minut czytania

Edycji każdej treści w stronie firmowej przez CMS

Po wdrożeniu serwis pozostawiony skonfigurowany do edycji każdej treści.

ICEberg CMS od innych silników e-commerce wyróżnia możliwość edycji każdej treści i konfiguracji sklepu w szerokim zakresie. Możliwości są rozbudowane, a nasi klienci wykorzystują na co dzień od 10% do 15% jego funkcji, co wystarcza do codziennej pracy. Potencjał jest wielki. 

Edytować możesz m.in.:

  • stronę główną,
  • Wszystkie podstrony np. landing page, artykuły typu blogowego, galerie - w tym ich tytuły, adresy URL, opisy, zdjęcia, znaczniki SEO, parametry wyświetlane przez FB,
  • Tworzyć własne formularze kontaktowe, nawet te wieloetapowe. Użytkownikowi po przejściu jednego etapu wyświetla się następny i znika poprzedni. Formularze tworzyć można z niemal dowolnych typów pól,
  • Produkty - w tym wszystkie ich parametry, zdjęcia, multimedia, przynależność do producentów, kategorii, czy rodzin produktów.
  • Komunikaty,
  • Szablony maili otrzymywanych przez użytkownika,
  • Okienka, widgety, popupy i różnego rodzaju mniejsze elementy serwisu.
  • Parametry serwisu (opcje SEO),
  • Elementy interaktywne takie jak slajdery, animacje sekcji.

Dashboard, czyli widok na wszystko

Gdy logujemy się do panelu administracyjnego, naszym pierwszym widokiem jest tzw. dashboard, czyli tablica do szybkiego zarządzania serwisem. W tym miejscu znajdziesz widgety - okienka, z których każdy administrator i moderator może indywidualnie skonfigurować swój panel sterowania systemem. Jeśli redaktor serwisu będzie chciał edytować artykuły, to włączy widget artykułów, który prezentuje najnowsze artykuły oraz pozwala jednym kliknięciem wywołać dodanie nowego artykułu. Administratora z kolei może interesować, to, co redaktorzy robili w serwisie - więc włączy widget z logami systemowymi prezentujący ostatnie akcje wszystkich użytkowników. Marketer natomiast powinien dodać moduł landing page i plików typu downloader, przyspieszy to jego pracę, gdyż zobaczy ostatnie stworzone treści tego typu i ma możliwość szybkiego przejścia do tego modułu, jak również szybkiego dodawania takich treści.

Tworzenie landing page i szablony

Szablony sekcji landing page

W ramach wdrożenia serwisu dostarczamy kilka szablonów sekcji landing page’a zaprojektowanych indywidualnie na potrzeby tego wdrożenia. Otrzymujesz też istniejące już w systemie szablony. Dzięki temu stworzysz swój landing page wyglądający z jednej strony spójnie z projektem całego serwisu, z drugiej strony możesz go kształtować w unikalny sposób - tak, żeby był inny od stron wszystkich konkurentów.

Szablony widoków strony

W ramach projektowania wyglądu serwisu, a następnie jego wdrożenia otrzymujesz szablon strony głównej i głównych widoków serwisu - w tym np. takich jak lista produktów - strona kategorii oraz strony produktu, strony formularza.

Dzięki temu podstrony serwisu mogą wyglądać spójnie ze sobą, zgodnie z projektem graficznym i nowocześnie.

Podczas tworzenia w edytorze nowej podstrony typu landing page istnieje kilka sposobów, użycia szablonów. Pierwszą możliwością jest wybranie jednego z kilku dostępnych w systemie typów sekcji. Wybierasz spośród bazy standardowych sekcji uzupełnionych i dodatkowych, unikatowych sekcji stworzonych przy tym wdrożeniu.

Standardowe sekcje stron typu landing page

Przykładami standardowych sekcji są m.in.

  • Zdjęcie w tle bez nagłówka z opisem wycentrowanym,
  • Big Background,
  • Medium Background,
  • Zdjęcie w tle 100%,
  • Sekcja z nagłówkiem bez menu,
  • Slajdery,  
  • Zdjęcie paralax - czyli z przewijanym tekstem w innym tempie niż przewija się grafika.

To tylko kilka wybranych spośród dostępnych w ICEberg szablonowych sekcji podstrony typu landing page.

Możliwe układy podstrony typu landing page

Umożliwia to tworzenie wielu różnorodnych podstron, a dokładna liczba możliwości jest ograniczona do liczby kombinacji zastosowania poszczególnych sekcji. Biorąc pod uwagę, że poszczególne sekcje mogą być stosowane wielokrotnie - liczba kombinacji jest nieograniczona. Sekcje mogą być oczywiście interaktywne - animujące się w nowoczesny sposób.

Jeszcze więcej możliwych sekcji strony landing page

Biorąc pod uwagę to, że różnorodnymi typami sekcji są też sekcje używające widgetów poszczególnych modułów zainstalowanych i używanych w serwisie liczba możliwości jest jeszcze większa.

Przykładowe sekcje, które można stworzyć z użyciem widgetów to m.in.:

  • Sekcje zakładkowe - sekcje które animują się automatycznie lub po kliknięciu, (przykład: thesellfee.com),
  • Sekcja z nagłówkiem tytułowa (przykład znajdziesz na niemal każdym zrealizowanym przez nas LP),
  • Sekcja typu formularz (np. rejestracyjny),
  • Sekcja typu aktualności z widgetem aktualności np. przypisanym do konkretnego producenta. ICEberg może prezentować dzięki odpowiedniej konfiguracji widgetu aktualności wg jednego lub dwóch parametrów - np. aktualności dotyczące wybranego producenta spośród oferty. Sekcji tej można użyć np. do stworzenia landing page lub mikro serwisu jednego producenta,  
  • Sekcja typu lista produktów. Podobnie do widgetu aktualności użyć możesz widgetu katalogu produktów. Zaprezentować możesz np. produkty promowane, produkty najnowsze, produkty jednego konkretnego producenta lub listę pokazującą listę produktów wyfiltrowaną wg dwóch z tych parametrów,
  • Sekcja typu downloader - lista plików do pobrania - z całego serwisu lub jednej kategorii,
  • Sekcja typu wydarzenia - może działać tak samo jak artykuły/aktualności tzn. zaczytywać wydarzenia tylko i wyłącznie z katalogu wydarzeń dotyczących tego jednego producenta lub wg innego parametru. Ciekawe wg mnie byłoby np. zaprezentowanie wydarzeń mających miejsce w danym miejscu lub prowadzonych przez konkretnego prelegenta.

Przykłady indywidualnej konfiguracji ICEberg

W ramach tworzenia podstron typu landing page mamy nieograniczoną liczbę sekcji, które możemy zamieniać miejscami za pomocą interfejsu z boksami typu: przeciągnij i upuść, czyli drag and drop. Możemy przesuwać istniejące sekcję w górę i w dół - zmieniając ich kolejność. Gdy wybieramy typ sekcji, to dostępnych jest kilka standardowych i „tych dodatkowych” - specjalnie zakodowanych zgodnie z projektem graficznym nowego wdrożenia typów sekcji. W ICEberg CMS oprócz wyboru różnorodnych sekcji można edytować pozostałe elementy, z których będziemy tworzyć landing page. Są to: kolor tła, kolor tekstu, obrazek. Obrazki opisane są za pomocą parametrów, które definiują, jak się animują (m.in. z której strony wjeżdżają, jak szybko itp.).

Struktura w ICEberg CMS

Struktura CMSa jest zintegrowana z menu i nawigacją w serwisie, ale możesz ograniczyć elementy struktury, które nie będą się wyświetlać na stronie internetowej. W strukturze jest dostępna cała baza treści naszego serwisu. Niektóre z produktów, artykułów, podstron mogą być ukryte. Ukrywamy te elementy, nad którymi pracujemy i nie są jeszcze gotowe do opublikowania, bądź chcemy poczekać z publikacją. Jednym przyciskiem włączamy publikację danego przedmiotu, artykułu, podstrony i pojawia się na portalu.

Jednym kliknięciem zaznaczamy, jaka grupa odbiorców ma widzieć nasze treści. Mogą to być zalogowani użytkownicy, treść może być dostępna dla wszystkich, mogą to być subskrybenci newslettera. ICEberg CMS pozwala na dokonywanie tych akcji jeszcze z poziomu struktury. Nie trzeba wchodzić do artykułu, aby zmienić jego widoczność, status. Jest to wygodne usprawnienie, które pozwala zaoszczędzić czas administratorom.

Struktura firmowej strony internetowej. Drzewo kategorii i menu

Co można robić na strukturze?

  • Przesuwać w górę i w dół: artykuły, foldery, podfoldery, całe sekcje, kategorię, podkategorie, czyli wszystko,
  • Ustawiać widoczność/dostępność treści. Może ona być: „niewidoczna”, „dla zalogowanych”, „dla wylogowanych”, „dla wszystkich”, „w sitemapie”,
  • Zaznaczać kilka, kilkanaście, kilkadziesiąt elementów i wykonywać dowolną akcję,
  • Przypisywać opisy podkategorią,
  • Włączyć/wyłączyć publikację jednym kliknięciem,
  • Włączyć i wyłączyć jednym kliknięciem indeksowanie.

Moduł Artykuły w ICEberg

Tworzenie artykułu w naszym silniku jest zaprojektowane w bardzo praktyczny sposób. Oprócz tego, że możemy jednym kliknięciem włączyć/wyłączyć publikację. Artykuł jest też wersjonowany, każda zmiana w artykule jest osobną wersją, dzięki czemu możemy przywołać każdą poprzednią wersję. Przy tworzeniu treści jest ona automatycznie zapisywana, oznacza to, że nie stracimy naszej pracy, gdy nas wyloguję, bądź zabraknie prądu.

Kolejną funkcją jest “Pokaż edytowaną stronę” - w trakcie edycji możemy ciągle wyświetlać, edytować stronę, która jest dostępna pod ukrytym linkiem widocznym tylko dla nas.

Wiele jest w tym module funkcji portalowych, co tworzy z niego coś więcej niż standardowy blog, czy serwis tekstowy. Przykładem jest alternatywny tytuł - tytuł w środku artykułu może być inny niż na liście artykułów. Gdy nasz artykuł ma długi tytuł to nie będzie on cały widoczny na liście. Wtedy tworzymy alternatywny tytuł, który będzie krótszy i bardziej zachęci użytkownika do wejścia do środka.

Powiązanie artykułu z galerią i produktem

Artykuł możemy powiązać z galerią. Tworzymy galerię, wchodzimy do artykułu, z którym chcemy ją powiązać, a następnie klikamy powiąż i gotowe. Podgląd pokazuję nam, z jakimi galeriami artykuł jest powiązany. Stworzona nowa galeria może być niewidoczna w serwisie, a dostępna tylko dla wybranego artykułu, bądź grupy artykułów - sposób dodawania galerii jest dowolny.

W galerii poza pokazaniem zdjęcia można tym zdjęciom nadać tytuł, opis, dodać linki, nawigację, przycisk. Domyślnie galeria wygląda tak, że pierwsze zdjęcie jest duże, pokazany jest tytuł galerii, link do galerii i lista zdjęć. Jest to domyślny wygląd galerii, który można dowolnie zmienić i ustawić indywidualnie dla Państwa serwisu. W module galerii w liście zdjęć możemy przesuwać zdjęcia w górę, w dół i usuwać.

W ten sam sposób możemy wiązać z artykułem produkt. To rozwiązanie działa na tej samej zasadzie, co dołączanie galerii do artykułów. Widgety produktów pojawiają się w środku artykułu z możliwością dodania do koszyka.

Dodanie zdjęcia tytułowego pojawia się w dwóch miejscach naraz. W środku artykułu w formacie, w którym je dodaliśmy oraz jest automatycznie pomniejszone do widoku na liście artykułów.

Przy tworzeniu artykułu możemy wykorzystać tagi, które będą służyły do nawigacji po naszym serwisie. Pod artykułem będą wyświetlane tagi i po kliknięciu w nie użytkownik przeniesie się do danej podkategorii.  

W module tym dostępne są też pola, które służą do tworzenia bibliografii, jeżeli chcemy, aby nasz wpis miał bardziej profesjonalny, naukowy charakter.  

Dodawanie plików do CMS’a

Aby dodawać plik musimy do najpierw wgrać do menedżera plików. Nie można wklejać zdjęć do serwisu z pliku na komputerze. Gdy raz wgramy zdjęcie do menedżera plików możemy je wykorzystywać w każdym module na każdym komputerze. Menedżer można uznać za chmurę plików w naszym serwisie. Przy wgrywaniu zdjęć CMS automatycznie tworzy miniaturki różnych rozmiarów, których używa przy wyświetlaniu zdjęć na urządzeniach mobilnych. Gdyby ktoś nie pamiętał o zmianie rozmiaru plików i wyśle zdjęcie o dużej wadze, to silnik go nie użyje, bo znacząco zwolniłoby stronę.  

Zakładka PUSH&AMP

Gdy przejdziemy do tego modułu to jedną z możliwości jest “Wygenerowanie strony AMP”, strona ta jest wbudowana do CMS’a. AMP, czyli Accelerated Mobile Pages (Przyspieszone Strony Mobilne). Jednym przyciskiem możemy stworzyć stronę mobilną, która dobrze działa na telefonach i szybko się wczytuje nawet, pomimo powolnych sieci.  

Drugą opcją jest wysyłanie powiadomień PUSH, czyli przeglądarkowych powiadomień. W momencie, w którym stworzyliśmy nowy artykuł, to chcemy powiadomić o tym użytkowników i wysyłamy PUSH’a. Test powiadomienia PUSH możemy dowolnie ustawić. Gdybyście Państwo chcieli korzystać z PUSH’a to musimy to indywidualnie skonfigurować. Do tego celu używamy zewnętrznego silnika firmy Onesignal, w którym musimy stworzyć animację i wkleić kod. Tak przygotowany PUSH jest gotowy do wysłania zarówno w przeglądarce desktopowej i mobilnej.

Formularz kontaktowy na stronie firmowej

Posiadamy bardzo rozbudowany moduł formularza w ICEberg. Formularz może mieć dowolną ilość pól i można podzielić go na etapy. Pola mogą być interaktywne, np. gdy trzeba będzie wybrać datę, to wysunie nam się kalendarz. Informacje do podania przez użytkowników do pól możemy konfigurować jako obowiązkowe lub nie. Tak samo możemy postąpić ze zgodami - stworzyć określoną ich ilość i wybrać te, po których klient będzie mógł przejść dalej.

Wszystkie formularze w naszym serwisie, które zbierają informację o klientach (newsletter, landing page itp.) będą przechowywane w module o nazwie "leady z formularzy". Będzie można je podglądnąć wraz z zapisanymi zgodami marketingowymi i pobrać jako plik CSV.

Formularz rekrutacyjny w CMS i w stronie firmowej

W formularzu rekrutacyjnym zarządzasz polami do wpisu danych personalnych oraz załącznikami (np. CV, list motywacyjny). W module tym, w zakładce "Historia" możemy podejrzeć listę kandydatów wraz z wszystkimi ich danymi i załączonymi plikami, CMS umożliwia również import tych danych do arkusza lub programu rekrutacyjnego.

Formularz na webinar

Kolejnym przykładem formularza może być ten, który ja często wykorzystuję w pracy z klientami - zapisy na webinar. Mamy dwa rodzaje webinarów, pierwszy nie mają ustalonej daty i trzeba z okienka wybrać termin.

Drugi wyznaczony jest na konkretną datę i godzinę i  możemy zapraszać na niego wybranych klientów.

Wszystko jest walidowane, zabezpieczone Captcha i działa sprawnie.

Pytania dodatkowe o współpracę i system ICEberg CMS

Co jeśli nie będziemy wiedzieli jak coś zrobić w CMSie?

Otrzymujecie od nas rok wsparcia. Zawsze możecie zadzwonić lub napisać e-mail. Udostępniamy też specjalny system do zgłoszeń dla klientów. Wystarczy przypisać zgłoszenie, załączyć ewentualnie zrzut ekranu i my się tym zajmujemy.

Koszty aktualizacji ICEberg CMS. Czy koszt aktualizacji CMS to jest stała kwota? Ile to kosztuje?

W ramach wdrożenia przez rok czasu aktualizujemy system bezpłatnie. Koszt aktualizacji jest to kwota możliwa do oszacowania dla każdego zlecenia już na starcie. Przyjmujemy, że koszt przedłużenia gwarancji o kolejny rok oraz aktualizacji CMS i utrzymania wsparcia technicznego to 10-15% wartości wdrożenia.

Jest to kwota w zależna od modułów, które mamy zainstalowane w serwisie, dlatego nie podajemy jednej stałej kwoty, tylko komunikujemy, że to jest procent od wartości wdrożenia.

Serwisy internetowe tworzymy działają bardzo długo bez aktualizacji - nawet 7,8 lat. Klienci nie czują potrzeby aktualizacji po okresie gwarancji, jeżeli nie występują „większe” problemy. 

Demo CMS. Jak zarządzać stroną firmową?

Czy posiadają Państwo wersję demo ICEberg?

Tak, udostępniamy wersję demo klientom, ale jest to wersja mocno podstawowa. Będziecie mogli tam znaleźć podstawowe moduły (np. formularz), natomiast najbardziej rozbudowanych modułów tam nie będzie. Wersja demonstracyjna służy głównie do prezentacji jak działa interfejs i ma za zadanie udowodnić użytkownikom, że korzystanie z ICEberg jest intuicyjne i łatwe.

Jak można porównać silniki e-commerce do ICEberg?

Internetowe serwisy do tworzenia stron internetowych i sklepów bazują na szablonach. Jest pewna skończona liczba szablonów i tylko z nich możemy skorzystać, choć liczba szablonów się stopniowo zwiększa. Nie działają one w sposób drag and drop, że można to dowolnie konfigurować. Można stworzyć na nich dobrze wyglądający i działający serwis, ale będzie on tylko dobry. Uważam, że aby firma mogła się wyróżnić i zaprezentować swój własny charakter i styl powinna mieć oryginalną stronę. Krakweb tworzy specjalnie zaprojektowane szablony dla poszczególnych klientów, z których później mogą rozbudowywać swój serwis we własnym niepowtarzalnym, nieszablonowym stylu.  

Responsywność (RWD) strony firmowej i podstron stworzonych przez CMS

Jak jest z responsywnością tych stron, które sobie wygenerujemy?


Będą responsywne, szablon będzie tak zrobiony, że będą się w pełni dostosowywać do rozdzielczości ekranu. W niektórych wypadkach będziemy dawać Państwu drobne wytyczne/podpowiedzi. Na przykład, aby zdjęcie dobrze wyglądało w polu szerokości zaznacz parametr 100%. Sprawia to, że do każdej szerokości ekranu będzie się ten obrazek dostosowywał. W ramach wdrożenia jest szkolenie, dostarczamy instrukcję w formie pisanej oraz wideo.

CMS w wersji angielskiej. Wielojęzyczny panel administracyjny

Czy Wasz panel administracyjny jest dostępny w wersji angielskiej?

Panel administracyjny jest w dwóch wersjach językowych, ale trzeba się osobno logować do wersji polskiej i angielskiej. Jesteśmy w trakcie prac, aby każdą treść móc przygotować w kilku wersjach językowych z poziomu wersji głównej. W tym momencie trzeba się przelogować. Wylogować z wersji polskiej i zalogować do wersji angielskiej.

Wersja językowa strony

Natomiast jeśli chodzi o strony wielojęzyczne, które realizowaliśmy to rozpoznają one lokalizację na podstawie IP lub wersji językowej systemu, z którego internauta korzysta i na tej podstawie przypisują mu wersję językową strony.

Lead generation

Moduł zbierający zapytania - wybieramy godziny w których jesteśmy w pracy np. 8-16. Między tymi godzinami będzie pojawiał się komunikat “Zadzwoń”, a po tym okresie - “Oddzwonimy w godzinach pracy”.

Prędkość strony i optymalizacja SEO

Prędkość strony firmowej

Nasza firma optymalizuje takie parametry jak waga strony i możemy się umówić na parametry Page Speed na poziomie 80-90%. Szybkość strony nie jest do końca pod naszą kontrolą, bo klient też ma na to wpływ projektując układ strony. Nie zawsze da się osiągnąć 90% przy dużych grafikach.

Prędkość działania serwisu jest szczególnie ważna i posiadamy restrykcyjne zasady pod tym względem.

Optymalizacja SEO

Na podstawie naszych realizacji można zobaczyć, że nasze URL’e są przyjazne. Klient ma wpływ na to, jak ten URL będzie wyglądał. Wchodząc w sekcję Optymalizacji SEO i FB można edytować takie parametry jak: URL, title, keywords, description. Zapisując je indywidualnie program podpowiada nam czy są optymalnie skonfigurowane. Dyskusyjne jest to jak długi powinien być URL, ale znaczniki title powinny mieć pewną granicę znaków.

Tytuł strony może być inny od unikalnego linku strony (URL). Kiedy zmienimy adres URL w zakładce „System” tworzone jest automatyczne przekierowanie, żeby Google wcześniej indeksując stronę pod danym adresem trafiło na nowy adres strony. Przekierowania można dowolnie konfigurować, dodawać i usuwać. W momencie migracji serwisu musimy zadbać o zmianę wszystkich URL’i, aby każdy adres starej strony był przekierowany na adres nowej strony. Ustawiając to wewnątrz CMS’a, przekierowania można łatwo i szybko dodawać.

Przedstawianie treści na Facebooku

W naszym silniku treść z Facebooka może być prezentowana na różne sposoby. I tą treść można przedstawiać na każdej podstronie naszego serwisu: landing page, artykuł, produkt, zwykła podstrona, formularz itd. Przechodząc do zakładki Optymalizacja i FB mamy dostęp do zarządzania takimi elementami jak:

  • tytuł jaki będzie się wyświetlał Facebooku,
  • opis jaki będzie pokazywany na FB,
  • typ treści (są 4 typy do wyboru: strona, artykuł, produkt, książka) - forma w jakiej treść będzie pokazywana,
  • obrazek, który się pokazuję na FB.

Każde z pól mogą być indywidualne uzupełniane. Jeśli nie zostaną uzupełnione to zostaną wpisane wartości domyślne. Jeśli będą mieli Państwo wzór postów jakie chcielibyście publikować to możemy wartości domyślne ustawić tak, żeby ten proces był zautomatyzowany.

W tym module mamy również możliwość zarządzania tagami na FB. Ustawiamy jaką grafikę i jaki tytuł będzie wygenerowany na Facebooku. Jeżeli będziemy udostępniać stronę to z poziomu tego modułu możecie skonfigurować np. jaki baner promocyjny, bądź hasło reklamowe ma się wyświetlać. 


Blog Artykuły
Ustawienia dostępności
Wysokość linii
Odległość między literami
Wyłącz animacje
Przewodnik czytania
Czytnik
Wyłącz obrazki
Skup się na zawartości
Większy kursor
Skróty klawiszowe