{"id":14757,"date":"2018-07-13T11:41:41","date_gmt":"2018-07-13T09:41:41","guid":{"rendered":"http:\/\/www.numlock.edu.pl\/blog\/?p=14757"},"modified":"2018-07-28T22:42:33","modified_gmt":"2018-07-28T20:42:33","slug":"elementor-podstawa-sa-sekcje","status":"publish","type":"post","link":"http:\/\/www.numlock.edu.pl\/blog\/2018\/07\/13\/elementor-podstawa-sa-sekcje\/","title":{"rendered":"Elementor – sekcje to podstawa"},"content":{"rendered":"

Ods\u0142ony: 656<\/p>\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t

\u00a0We wpisie Elementor – jak zacz\u0105\u0107<\/a> podali\u015bmy podstawowe informacje o tworzeniu wpisu z u\u017cyciem dw\u00f3ch najwa\u017cniejszych element\u00f3w strony, tekstu i ilustracji. Teraz musimy si\u0119 skupi\u0107 przez chwil\u0119 na sekcjach, na strukturze strony.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t

Cykl o Elementorze<\/strong><\/span><\/p>

  1. Elementor – jak zacz\u0105\u0107<\/a><\/li>
  2. Elementor – sekcje to podstawa<\/li>
  3. Elementor – wi\u0119cej o sekcjach<\/a>\u00a0<\/li>
  4. Elementor – edycja blok\u00f3w<\/a><\/li>
  5. Elementor – wid\u017cet tekstowy<\/a><\/li>
  6. Elementor – wid\u017cet Obraz<\/a><\/li>
  7. Elementor – inne wid\u017cety dla grafiki (1)<\/a><\/li>
  8. …<\/li><\/ol>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
    \n\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t
    \n\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t
    \n\t\t\t\t

    W poprzednim wpisie tworzyli\u015bmy sekcje automatycznie, przeci\u0105gaj\u0105c wid\u017cet tekstu i wid\u017cet obrazka na pole z napisem\u00a0Drag widget here<\/strong>. To oczywi\u015bcie najpopularniejszy spos\u00f3b wstawiania sekcji – wystarczy przeci\u0105gn\u0105\u0107 wid\u017cet z\u00a0potrzebn\u0105 nam zawarto\u015bci\u0105, kt\u00f3r\u0105 potem definiujemy w panelu Elementora, wpisuj\u0105c tre\u015b\u0107, formatuj\u0105c ilustracje itd. Za ka\u017cdym razem jest to takie samo okienko sekcji, ale z odmienn\u0105 zawarto\u015bci\u0105.<\/p>

    Tak w\u0142a\u015bnie powstaje wpis w blogu czy statyczna strona – po kolei tworzymy sekcje, robi\u0105c z nich swoisty przek\u0142adaniec tekstu, obrazk\u00f3w, film\u00f3w, map, ikon, galerii itd. Najcz\u0119\u015bciej zreszt\u0105 tych dw\u00f3ch pierwszych.<\/p>

    Mamy jednak drug\u0105 technik\u0119 wstawiania sekcji, w kt\u00f3rej mo\u017cemy decydowa\u0107 z g\u00f3ry o tym, jak\u0105 dana sekcja ma posta\u0107. Nale\u017cy klikn\u0105\u0107 czerwone k\u00f3\u0142ko z plusem.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

    \n\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t
    \n\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\"Elem0201\"\t\t\t\t\t\t\t\t\t\t\t
    Przycisk uruchamiaj\u0105cy tworzenie sekcji<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
    \n\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t
    \n\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t
    \n\t\t\t\t

    Po klikni\u0119ciu ukazuje si\u0119 okno z galeri\u0105 12 uk\u0142ad\u00f3w sekcji – r\u00f3\u017cni\u0105 si\u0119 liczb\u0105 i szeroko\u015bci\u0105 zawartych w nich kolumn.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

    \n\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t
    \n\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\"Elem0202\"\t\t\t\t\t\t\t\t\t\t\t
    Wyb\u00f3r uk\u0142adu sekcji<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
    \n\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t
    \n\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t
    \n\t\t\t\t

    Jak mo\u017cna to narz\u0119dzie wykorzysta\u0107?<\/p>

    Je\u015bli jeste\u015b osob\u0105 zorganizowan\u0105, zastan\u00f3w si\u0119 przed napisaniem tekstu, jak b\u0119dzie zbudowany. Przyjmijmy, \u017ce to w dalszym ci\u0105gu jaka\u015b typowa opowie\u015b\u0107, np. opis wycieczki.<\/p>

    • Najpierw b\u0119dzie miejsce na tzw. lid, czyli kr\u00f3tkie wprowadzenie do artyku\u0142u w blogu. Przeznaczymy na nie sekcj\u0119 z jedn\u0105 kolumn\u0105, czyli ten pierwszy wz\u00f3r.<\/li>
    • Potem b\u0119dzie sekcja z dwiema kolumnami, w kt\u00f3rej umie\u015bcimy tre\u015b\u0107 tak, by nasz czytelnik przeczyta\u0142 najpierw zawarto\u015b\u0107 pierwszej kolumny, po lewej, a potem drugiej kolumny, po prawej. Naturalnym ograniczeniem b\u0119dzie nast\u0119pna sekcja, w kt\u00f3rej b\u0119dziemy chcieli umie\u015bci\u0107 pierwsz\u0105 fotografi\u0119 z wycieczki.<\/li>
    • A wi\u0119c w tym miejscu pojawi si\u0119 ponownie sekcja z jedn\u0105 kolumn\u0105, przeznaczona na zdj\u0119cie.<\/li>
    • W dalszej kolejno\u015bci znowu sekcja z dwiema kolumnami, na dalszy ci\u0105g s\u0142ownej relacji.<\/li>
    • I jeszcze raz sekcja przeznaczona na obrazek.<\/li><\/ul>

      Czy ju\u017c teraz wy\u0142ania si\u0119 jaka\u015b sensowna struktura? Niech poka\u017ce to zrzut ekranowy, w kt\u00f3rym przygotowali\u015bmy sobie taki przyk\u0142adowy szkielet wpisu.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

      \n\t\t\t\t\t\t
      \n\t\t\t\t\t\t\t
      \n\t\t\t\t\t
      \n\t\t\t
      \n\t\t\t\t\t\t\t
      \n\t\t\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t\t\t\t
      \n\t\t\t\t\t\t\t\t\t
      \n\t\t\t\t\t\t\t\t\t\t\"Elem0203\"\t\t\t\t\t\t\t\t\t\t\t
      Struktura wpisu<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
      \n\t\t\t\t\t\t
      \n\t\t\t\t\t\t\t
      \n\t\t\t\t\t
      \n\t\t\t
      \n\t\t\t\t\t\t\t
      \n\t\t\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t\t\t\t
      \n\t\t\t\t

      Czym si\u0119 r\u00f3\u017cni ta technika od pokazanej w poprzednim wpisie? W tamtej technice od razu wstawiali\u015bmy konkretny wid\u017cet, a tutaj zrobili\u015bmy dopiero miejsce na wid\u017cet i musimy go przeci\u0105gn\u0105\u0107.<\/p>

      A czym s\u0105 te plusiki w sekcjach?<\/p>

      Klikni\u0119cie plusa powoduje wstawienie kursora do wyszukiwarki w panelu Elementora. Gdy zaczniesz wpisywa\u0107 np. s\u0142owo\u00a0obraz<\/em>, na li\u015bcie pozostan\u0105 tylko wid\u017cety z tym s\u0142owem w nazwie.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

      \n\t\t\t\t\t\t
      \n\t\t\t\t\t\t\t
      \n\t\t\t\t\t
      \n\t\t\t
      \n\t\t\t\t\t\t\t
      \n\t\t\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t\t\t\t
      \n\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
      \n\t\t\t\t\t\t
      \n\t\t\t\t\t\t\t
      \n\t\t\t\t\t
      \n\t\t\t
      \n\t\t\t\t\t\t\t
      \n\t\t\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t\t\t\t
      \n\t\t\t\t

      Wyt\u0142umaczmy, co si\u0119 sta\u0142o. Klikn\u0105\u0142em znak plusa w sekcji (czerwona strza\u0142ka), w polu wyszukiwarki wpisa\u0142em s\u0142owo\u00a0obraz<\/em>\u00a0 (niebieska strza\u0142ka), a na li\u015bcie ukaza\u0142y si\u0119 wy\u0142\u0105cznie wid\u017cety z tym s\u0142owem w nazwie (\u017c\u00f3\u0142ta obw\u00f3dka).<\/p>

      Klikam teraz wybrany wid\u017cet i wstawiam go do sekcji. Je\u015bli to wid\u017cet obrazu, to naturalnie si\u0119gam w dalszej kolejno\u015bci po obraz, np. fotografi\u0119 z wycieczki.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

      \n\t\t\t\t\t\t
      \n\t\t\t\t\t\t\t
      \n\t\t\t\t\t
      \n\t\t\t
      \n\t\t\t\t\t\t\t
      \n\t\t\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t\t\t\t
      \n\t\t\t\t

      Id\u017amy dalej.<\/p>

      Gdy przesuniesz wska\u017anik myszy nad sekcj\u0119, zobaczysz niebieski trapez z trzema przyciskami.<\/p>

      Gdy klikniesz pierwszy z lewej, dodasz pole z czerwonym k\u00f3\u0142kiem, na kt\u00f3re przeci\u0105gamy wid\u017cety.<\/p>

      Gdy klikniesz \u015brodkowe, w panelu Elementora zobaczysz definicj\u0119 sekcji i b\u0119dziesz m\u00f3g\u0142 j\u0105 zmieni\u0107. A co wi\u0119cej, uchwycenie mysz\u0105 tego \u015brodkowego przycisku pozwoli przeci\u0105gn\u0105\u0107 sekcj\u0119 w g\u00f3r\u0119 lub w d\u00f3\u0142 – ukazuje si\u0119 wtedy niebieski pasek, kt\u00f3ry pokazuje aktualn\u0105 pozycj\u0119 sekcji.<\/p>

      Gdy klikniesz prawy przycisk, usuniesz sekcj\u0119 z wpisu.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

      \n\t\t\t\t\t\t
      \n\t\t\t\t\t\t\t
      \n\t\t\t\t\t
      \n\t\t\t
      \n\t\t\t\t\t\t\t
      \n\t\t\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t\t\t\t
      \n\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
      \n\t\t\t\t\t\t
      \n\t\t\t\t\t\t\t
      \n\t\t\t\t\t
      \n\t\t\t
      \n\t\t\t\t\t\t\t
      \n\t\t\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t\t\t\t
      \n\t\t\t\t

      Po\u0107wicz te operacje, by nabra\u0107 wprawy. To nie koniec zabawy z sekcjami, ale nie prze\u0142adowujmy wpis\u00f3w nadmiarem wiedzy – ci\u0105g dalszy wkr\u00f3tce.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

      \n\t\t\t\t\t\t
      \n\t\t\t\t\t\t\t
      \n\t\t\t\t\t
      \n\t\t\t
      \n\t\t\t\t\t\t\t
      \n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

      Ods\u0142ony: 656 \u00a0We wpisie Elementor – jak zacz\u0105\u0107 podali\u015bmy podstawowe informacje o tworzeniu wpisu z u\u017cyciem dw\u00f3ch najwa\u017cniejszych element\u00f3w strony, tekstu i ilustracji. Teraz musimy si\u0119 skupi\u0107 przez chwil\u0119 na sekcjach, na strukturze strony. Cykl o Elementorze Elementor – jak zacz\u0105\u0107 Elementor – sekcje to podstawa Elementor – wi\u0119cej o …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[61,79,62],"tags":[215,214,63],"_links":{"self":[{"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/posts\/14757"}],"collection":[{"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/comments?post=14757"}],"version-history":[{"count":33,"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/posts\/14757\/revisions"}],"predecessor-version":[{"id":15949,"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/posts\/14757\/revisions\/15949"}],"wp:attachment":[{"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/media?parent=14757"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/categories?post=14757"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/tags?post=14757"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}