Successfully reported this slideshow.
Your SlideShare is downloading. ×

Landing page prosto z gutenberga

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 26 Ad

Landing page prosto z gutenberga

Download to read offline

Nowsza wersję https://www.slideshare.net/bibliotekarz/landing-page-prosto-z-gutenberga-wersja-uaktualniona

W jaki sposób postawić Landing Page za pomocą nowego edytora WordPress (gutenberg) w WordPressie i czy aby to na pewno dobry pomysł. Prezentacja wygłoszona na WordUp Warszawa maj 2019

Nowsza wersję https://www.slideshare.net/bibliotekarz/landing-page-prosto-z-gutenberga-wersja-uaktualniona

W jaki sposób postawić Landing Page za pomocą nowego edytora WordPress (gutenberg) w WordPressie i czy aby to na pewno dobry pomysł. Prezentacja wygłoszona na WordUp Warszawa maj 2019

Advertisement
Advertisement

More Related Content

Similar to Landing page prosto z gutenberga (20)

More from Arkadiusz Stęplowski (17)

Advertisement

Recently uploaded (20)

Landing page prosto z gutenberga

  1. 1. Landing page prosto z Gutenberga Niedoszły Bibliotekarz przedstawia: http://am.vj.pl maj 2019
  2. 2. Cechy landing page •Jedna strona •Własny adres •Błyskawiczne ładowanie •Call to action •Brak rozpraszaczy •Komplet informacji w pigułce •Brak ścieżki odwrotu •Odlotowy wygląd
  3. 3. Co testowo naklepałem Link do dużego obrazka poglądowego  https://am.vj.pl/wp-content/uploads/2019/05/obie_strony.png
  4. 4. Goły Gutenberg to cienias
  5. 5. W większości przypadków na WordPresie _bez_sensu_ •Czas ładowania html < php + baza •Divoza •Wtyczkoza •Ilość śmieci w kodzie •Utrzymanie •Jakaś jakość Jedyne za: • Masowa produkcja • Czas życia
  6. 6. Szablon strony clear <?php /** * Template Name: Clean Page * This template will only display the content you entered in the page editor */ ?> <html <?php language_attributes(); ?> class="no-js"> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <div id="page" class="site"> <div id="content" class="site-content"> <section id="primary" class="content-area"> <main id="main" class="site-main"> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <div class="entry-content"> <?php while ( have_posts() ) : the_post(); the_content(); endwhile; ?> </div> </article> </main><!-- #main --> </section><!-- #primary --> </div> </div> <?php wp_footer(); ?> </body> </html>
  7. 7. Bloki z Gutenberga Obrazek Akapit Nagłówek Odstęp Kolumny Zapisany blok wielokrotnego użycia Media i tekst Wyróżniony cytat
  8. 8. Bloki wielokrotnego użycia Odstęp, przycisk (z innych bloków), odstęp
  9. 9. https://webfaces.pl/
  10. 10. Ghost Kit – Blocks Collection https://wordpress.org/plugins/ghostkit/ spacing, animate, display
  11. 11. Gutenberg Blocks – Ultimate Addons for Gutenberg https://wordpress.org/plugins/ultimate-addons-for- gutenberg/ Google Map
  12. 12. Gutenberg Blocks – Ultimate Addons for Gutenberg Content timeline
  13. 13. Kadence Blocks – Gutenberg Page Builder Toolkit https://wordpress.org/plugins/kadence-blocks/ Advanced Button
  14. 14. Yoast SEO https://wordpress.org/plugins/wordpress-seo/ FAQ <script type="application/ld+json"> {"@context":"https://schema.org","@type":"FAQPage","name":"Strona jako Landing Page clean","mainEntity":[{"@type":"Question","name":"Czy muszu0119 mieu0107 przygotowane jakieu015b materiau0142y?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Wymogu nie ma …
  15. 15. Cosmic Blocks (40+) Content Editor Blocks https://wordpress.org/plugins/cosmic-blocks/ Countdown
  16. 16. Page Builder Gutenberg Blocks – CoBlocks https://wordpress.org/plugins/coblocks/ Autor
  17. 17. Cleopatra’s Banquet, Gerard de Lairesse
  18. 18. Niestety ! Problemy podobne do page builderów •Trudnoprzenoszalne •Nadmiar js i css •Nie da się wyjść z wtyczki •Żałosna divoza •Spowalnianie wyświetlania •Brak jednolitego standardu
  19. 19. Bloki wielokrotnego użycia Jeśli z wtyczkami to słabo przenoszalne
  20. 20. Nadmiarowość 19 plików css i 25 plików .js (3 MB z 4 MB ogółem) <div class="wp-block-kadence-iconlist kt-svg-icon-list-items kt-svg-icon-list-items_58ab45-dd kt-svg-icon- list-columns-1 alignnone"> <ul class="kt-svg-icon-list"> <li class="kt-svg-icon-list-style-default kt-svg-icon-list-item-wrap kt-svg-icon-list-item-0"> <div style="display:inline-flex;justify-content:center;align-items:center;color:#005075" class="kt-svg-icon-list-single kt-svg-icon-list-single-fe_disc"> <svg style="display:inline-block;vertical-align:middle" viewbox="0 0 24 24" height="12" width="12" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="3"></circle></svg> </div> <span class="kt-svg-icon-list-text">Wprowadzenie do idei Landing Pages – kiedy i do czego je stosujemy </span> </li> <div class="wp-block-media-text__content"> <ul> <li> Wprowadzenie do idei Landing Pages – kiedy i do czego je stosujemy </li>
  21. 21. Divoza Niebieski blok z „content timeline” <div class="uagb-timeline__day-new uagb-timeline__day-right"> <div class="uagb-events-new"> <div class="uagb-timeline__events-inner-new"> <div class="uagb-timeline__date-hide uagb-timeline__date-inner"> <div class="uagb-timeline__inner-date-new"> 1 Luty 2019 </div> </div> <div class="uagb-timeline-content"> <div class="uagb-timeline__heading-text"> <h4 class="uagb-timeline__heading">Bilety "Early bird`s"<br />50 zł</h4> </div> <p class="uagb-timeline-desc-content">Warsztat przygotowany, zaplanowany rozpoczynamy zapisy. <br />Dobra cena dla chcących poczekać.</p> <div class="uagb-timeline__arrow"> </div> </div> </div> </div> </div>
  22. 22. Prędkość Przykładowa strona ma około 900 słów i 56 bloków
  23. 23. Co zrobić, jak żyć? •Zminimalizować ilość wtyczek z dodatkowymi blokami •Ładować dodatkowy js i css tylko na stronach ich potrzebujących (zgodnie z dokumentacją jeśli wtyczka na to pozwala np. cf7) •Zarządzać ładowaniem js i css z poziomu „managera ładowania wtyczek „ •Stosować wtyczki do minifikacji js i css •Optymalizować ręcznie :/ •Zgrać stronę do html-a i w nim dorzeźbić co potrzeba Upewnić się że landing page generowana z WordPressa jest dla nas najlepszym rozwiązaniem
  24. 24. Koniec opowieści /bibliotekarz arek@bibliotekarz.com WordUp Warszawa maj 2019 Odwyk do września
  25. 25. Licencja Prezentacja: „Landing page prosto z Gutenberga” autorstwa Niedoszły Bibliotekarz jest udostępniana na licencji Creative Commons Uznanie autorstwa Użycie niekomercyjne Na tych samych warunkach 3.0 Unported License.
  26. 26. Linkownia https://www.codecademy.com/ https://am.vj.pl/wp-content/uploads/2019/05/obie_strony.png https://am.vj.pl/wp-content/uploads/2019/05/clean-page.txt https://webfaces.pl/blog/tag/gutenberg/ https://wordpress.org/plugins/ghostkit/ https://wordpress.org/plugins/ultimate-addons-for-gutenberg/ https://wordpress.org/plugins/kadence-blocks/ https://wordpress.org/plugins/wordpress-seo/ https://wordpress.org/plugins/cosmic-blocks/ https://wordpress.org/plugins/coblocks/ https://www.rijksmuseum.nl/en/collection/SK-A-2115 https://make.wordpress.org/core/2019/05/01/whats-new-in-gutenberg-1st-may/ https://wordpress.org/plugins/plugin-organizer/ https://contactform7.com/loading-javascript-and-stylesheet-only-when-it-is-necessary/ https://wordpress.org/plugins/static-html-output-plugin

×