{"id":15064,"date":"2018-07-22T06:50:19","date_gmt":"2018-07-22T04:50:19","guid":{"rendered":"http:\/\/www.numlock.edu.pl\/blog\/?p=15064"},"modified":"2019-11-30T14:03:18","modified_gmt":"2019-11-30T13:03:18","slug":"elementor-edycja-blokow","status":"publish","type":"post","link":"http:\/\/www.numlock.edu.pl\/blog\/2018\/07\/22\/elementor-edycja-blokow\/","title":{"rendered":"Elementor – edycja blok\u00f3w"},"content":{"rendered":"

Ods\u0142ony: 634<\/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

\u00a0W poprzednich dw\u00f3ch odcinkach cyklu o Elementorze powiedzieli\u015bmy o tworzeniu sekcji i kolumn i manipulowaniu nimi w ramach struktury wpisu. Teraz musimy powiedzie\u0107 wi\u0119cej o edytowaniu trzech rodzaj\u00f3w obiekt\u00f3w (dora\u017anie nazwijmy je tu blokami, cho\u0107 mo\u017cna by si\u0119 pos\u0142u\u017cy\u0107 np. poj\u0119ciem ramki), jakie tu mamy: sekcji, kolumn<\/strong> i konkretnych wid\u017cet\u00f3w,<\/strong> jakie w nich umieszczamy.<\/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<\/a><\/li>
  3. Elementor – wi\u0119cej o sekcjach<\/a><\/li>
  4. Elementor – edycja blok\u00f3w<\/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

    Hierarchia element\u00f3w:<\/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
    • Klikaj\u0105c prawym przyciskiem myszy niebieski pasek narz\u0119dzi sekcji (seledynowa strza\u0142ka), mo\u017cesz wybra\u0107 polecenie\u00a0Edytuj Section<\/strong>.<\/li>
    • Klikaj\u0105c prawym przyciskiem myszy czarny przycisk menu kolumny (czerwona strza\u0142ka), mo\u017cesz wybra\u0107 polecenie\u00a0Edytuj Column<\/strong>.<\/li>
    • Klikaj\u0105c prawym przyciskiem myszy niebieski przycisk menu wid\u017cetu (\u017c\u00f3\u0142ta strza\u0142ka), mo\u017cesz wybra\u0107 polecenie\u00a0Edytuj Widget<\/strong>. W tym ostatnim przypadku mo\u017cna te\u017c klikn\u0105\u0107 po prostu w \u015brodku wid\u017cetu lewym przyciskiem myszy.<\/li><\/ul>\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 klikni\u0119ciu polecenia edycji w panelu Elementora ukazuje si\u0119 okno Edytuj nazwa_obiektu<\/strong>. gdzie obiekt jest sekcj\u0105, kolumn\u0105 lub wid\u017cetem (np. ramk\u0105 z tekstem lub obrazkiem).<\/p>

      W oknie zazwyczaj widzimy trzy karty: Tre\u015b\u0107, Styl<\/strong> i Zaawansowane<\/strong>\u00a0lub Wygl\u0105d, Styl, Zaawansowane.<\/strong> Na kartach widzimy kolejne bloki polece\u0144.\u00a0<\/strong><\/p>

      Przyk\u0142adowo, gdy dokonamy edycji sekcji, zobaczymy zestaw kart\u00a0Wygl\u0105d, Styl, Zaawansowane<\/strong>,<\/strong>\u00a0a na karcie Wygl\u0105d zobaczymy bloki\u00a0Wygl\u0105d<\/strong>\u00a0i\u00a0Struktura<\/strong>, za\u015b w blokach kolejne polecenia.<\/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

      Parametry domy\u015blne s\u0105 tak ustawione, \u017ce prawdopodobnie niecz\u0119sto b\u0119dziesz si\u0119ga\u0107 do polece\u0144 zawartych w oknach edycji sekcji czy kolumny, aczkolwiek bardziej wymagaj\u0105cym osobom sugeruj\u0119 poeksperymentowanie z rozmaitymi ustawieniami, bo przecie\u017c w ko\u0144cu Elementor jest po to, by znacznie szerzej wyzyska\u0107 mo\u017cliwo\u015bci stwarzane przez wsp\u00f3\u0142czesne techniki webmasterskie, zw\u0142aszcza style.<\/p>

      Poni\u017cej przedstawiamy przyk\u0142adowy efekt zmiany kilku parametr\u00f3w sekcji, a wi\u0119c dodania gradientu t\u0142a, powi\u0119kszenia margines\u00f3w i wewn\u0119trznego odst\u0119pu ramki z tekstem, a tak\u017ce dodania podw\u00f3jnego obramowania. Naturalnie nie zwracajmy uwagi na w\u0105tpliw\u0105 elegancj\u0119 tych konkretnych ustawie\u0144 – chodzi o pokazanie, \u017ce mamy tutaj szerokie mo\u017cliwo\u015bci regulowania wygl\u0105du sekcji czy kolumny. Elementor pozwala si\u0119gn\u0105\u0107 do takich polece\u0144 j\u0119zyk\u00f3w HTML i CSS, do jakich nie si\u0119ga na og\u00f3\u0142 przeci\u0119tny posiadacz bloga, bo si\u0119 ich nigdy nie uczy\u0142.<\/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

      Zwr\u00f3\u0107 uwag\u0119, \u017ce mo\u017cna odmiennie formatowa\u0107 r\u00f3\u017cne kolumny w ramach tej samej sekcji, co pokazuje poni\u017csza ilustracja – to dlatego wyr\u00f3\u017cniona jest edycja kolumn, kt\u00f3rych mo\u017ce by\u0107 przecie\u017c w sekcji kilka (tutaj s\u0105 akurat dwie). Pokazuje to elastyczno\u015b\u0107, jak\u0105 dysponujemy dzi\u0119ki wsp\u00f3\u0142czesnym j\u0119zykom webmasterskim i programami typu page builder<\/em>, jak Elementor. Jednym z przyk\u0142ad\u00f3w jest animacja, jak\u0105 wykorzysta\u0142em tutaj w ramkach ze spisem tre\u015bci cyklu o Elementorze, widoczna w chwili wej\u015bcia do 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\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: 634 \u00a0W poprzednich dw\u00f3ch odcinkach cyklu o Elementorze powiedzieli\u015bmy o tworzeniu sekcji i kolumn i manipulowaniu nimi w ramach struktury wpisu. Teraz musimy powiedzie\u0107 wi\u0119cej o edytowaniu trzech rodzaj\u00f3w obiekt\u00f3w (dora\u017anie nazwijmy je tu blokami, cho\u0107 mo\u017cna by si\u0119 pos\u0142u\u017cy\u0107 np. poj\u0119ciem ramki), jakie tu mamy: sekcji, kolumn i …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[79,78],"tags":[215,214,63],"_links":{"self":[{"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/posts\/15064"}],"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=15064"}],"version-history":[{"count":30,"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/posts\/15064\/revisions"}],"predecessor-version":[{"id":15250,"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/posts\/15064\/revisions\/15250"}],"wp:attachment":[{"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/media?parent=15064"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/categories?post=15064"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/tags?post=15064"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}