Jak wstawić własny kod / skrypt na stronę za pomocą modułu Własny kod?

Dzięki rozbudowanym opcjom dostępnym w edytorze strony WWW, jednym kliknięciem możesz wprowadzić własny kod np. CSS, HTML czy kod skryptu na stronę WWW.

Skorzystaj z moduły Własny kod, aby zmodyfikować stronę WWW. W poniższym artykule, jako przykład skryptu umieścimy na stronie WWW responsywną tabelę z danymi. Taką samą tabelę możesz wykorzystać na swojej stronie WWW. Kod tabeli znajdziesz na końcu tego artykułu.

Dodawanie wybranego modułu do strony WWW

  1. Przejdź do opcji Podstrony (lewa strona ekranu), a następnie wybierz Dodaj element na górnym pasku.

  2. Odszukaj moduł o nazwie Własny kod. Złap moduł i przeciągnij go w dowolne miejsce na stronie WWW.

  3. Po zakończeniu operacji, pojawi się prostokątny moduł z informacją o jego konfiguracji lub podglądem. Moduł został poprawnie wstawiony.

    Kliknij tutaj, aby dowiedzieć się więcej jak dodawać moduły do strony WWW utworzonej w kreatorze Click Web.
  4. Kliknij w pole modułu, aby przejść do jego edycji i wstawić kod.
    clickweb4

Kod – tabela responsywna

W poniższym przykładzie znajdziesz kod na responsywną tabelę z danymi. Taką samą tabelę możesz wykorzystać na swojej stronie WWW. Tabela umieszczona w takiej postaci na stronie WWW będzie zmieniać swój układ w zależności od szerokości ekranu w taki sposób, aby dane umieszczone w tabeli były doskonale widoczne na wszystkich urządzeniach (komputer, tablet, smartfon).

<div class="divTable">
  <div class="headRow">
    <div class="divCell" align="center">
      Customer ID
    </div>
    <div class="divCell">
      Customer Name
    </div>
    <div class="divCell">
      Customer Address
    </div>
  </div>
  <div class="divRow">
    <div class="divCell">
      001
    </div>
    <div class="divCell">
      002
    </div>
    <div class="divCell">
      003
    </div>
  </div>
  <div class="divRow">
    <div class="divCell">
      xxx
    </div>
    <div class="divCell">
      yyy
    </div>
    <div class="divCell">
      www
    </div>
  </div>
  <div class="divRow">
    <div class="divCell">
      ttt
    </div>
    <div class="divCell">
      uuu
    </div>
    <div class="divCell">
      Mkkk
    </div>
  </div>
</div>
<style type="text/css">
  .divTable
  {
    display: table;
    width:auto;
    background-color:#eee;
    border:1px solid #666666;
    border-spacing:5px;
    /*cellspacing:poor IE support for this*/
    /* border-collapse:separate;*/
  }
  .divRow
  {
    display:table-row;
    width:auto;
  }
  .divCell
  {
    float:left;
    /*fix for buggy browsers*/
    display:table-column;
    width:200px;
    background-color:#ccc;
  }
</style>
</form>
  • Czy artykuł był pomocny?
  • TAK   Nie
Więcej informacji na forum dyskusyjnym:   Kliknij tutaj, aby przejść na forum.home.pl