Landing page prosto z gutenberga
•
0 j'aime•946 vues
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
Recommandé
Recommandé
Contenu connexe
Similaire à Landing page prosto z gutenberga
Similaire à Landing page prosto z gutenberga (20)
Plus de Arkadiusz Stęplowski
Plus de Arkadiusz Stęplowski (17)
Landing page prosto z gutenberga
- 1. Landing page prosto z Gutenberga Niedoszły Bibliotekarz przedstawia: http://am.vj.pl maj 2019
- 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. Co testowo naklepałem Link do dużego obrazka poglądowego https://am.vj.pl/wp-content/uploads/2019/05/obie_strony.png
- 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. 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. Bloki z Gutenberga Obrazek Akapit Nagłówek Odstęp Kolumny Zapisany blok wielokrotnego użycia Media i tekst Wyróżniony cytat
- 8. Bloki wielokrotnego użycia Odstęp, przycisk (z innych bloków), odstęp
- 10. Ghost Kit – Blocks Collection https://wordpress.org/plugins/ghostkit/ spacing, animate, display
- 11. Gutenberg Blocks – Ultimate Addons for Gutenberg https://wordpress.org/plugins/ultimate-addons-for- gutenberg/ Google Map
- 12. Gutenberg Blocks – Ultimate Addons for Gutenberg Content timeline
- 13. Kadence Blocks – Gutenberg Page Builder Toolkit https://wordpress.org/plugins/kadence-blocks/ Advanced Button
- 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. Cosmic Blocks (40+) Content Editor Blocks https://wordpress.org/plugins/cosmic-blocks/ Countdown
- 16. Page Builder Gutenberg Blocks – CoBlocks https://wordpress.org/plugins/coblocks/ Autor
- 17. Cleopatra’s Banquet, Gerard de Lairesse
- 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. Bloki wielokrotnego użycia Jeśli z wtyczkami to słabo przenoszalne
- 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. 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. Prędkość Przykładowa strona ma około 900 słów i 56 bloków
- 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. Koniec opowieści /bibliotekarz arek@bibliotekarz.com WordUp Warszawa maj 2019 Odwyk do września
- 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.