SlideShare a Scribd company logo
1 of 26
Download to read offline
Landing page prosto z Gutenberga
Niedoszły Bibliotekarz
przedstawia:
http://am.vj.pl maj 2019
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
Co testowo naklepałem
Link do dużego obrazka poglądowego 
https://am.vj.pl/wp-content/uploads/2019/05/obie_strony.png
Goły
Gutenberg
to cienias
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
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>
Bloki z Gutenberga
Obrazek
Akapit
Nagłówek
Odstęp
Kolumny
Zapisany blok wielokrotnego użycia
Media i tekst
Wyróżniony cytat
Bloki wielokrotnego użycia
Odstęp, przycisk (z innych bloków), odstęp
https://webfaces.pl/
Ghost Kit – Blocks Collection
https://wordpress.org/plugins/ghostkit/
spacing, animate, display
Gutenberg Blocks – Ultimate Addons for Gutenberg
https://wordpress.org/plugins/ultimate-addons-for-
gutenberg/
Google Map
Gutenberg Blocks – Ultimate Addons for Gutenberg
Content timeline
Kadence Blocks – Gutenberg Page Builder Toolkit
https://wordpress.org/plugins/kadence-blocks/
Advanced Button
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 …
Cosmic Blocks (40+) Content Editor Blocks
https://wordpress.org/plugins/cosmic-blocks/
Countdown
Page Builder Gutenberg Blocks – CoBlocks
https://wordpress.org/plugins/coblocks/
Autor
Cleopatra’s Banquet, Gerard de Lairesse
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
Bloki wielokrotnego użycia
Jeśli z wtyczkami to słabo przenoszalne
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 &#8211;
kiedy i do czego je stosujemy
</span>
</li>
<div class="wp-block-media-text__content">
<ul>
<li> Wprowadzenie do idei Landing Pages &#8211; kiedy i do czego je stosujemy
</li>
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>
Prędkość
Przykładowa strona ma około 900 słów i 56 bloków
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
Koniec opowieści
/bibliotekarz
arek@bibliotekarz.com
WordUp Warszawa maj 2019
Odwyk do września
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.
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

More Related Content

Similar to Landing page prosto z gutenberga

Seo Surgery Polska 2 by Damian Salkowski
Seo Surgery Polska 2 by Damian SalkowskiSeo Surgery Polska 2 by Damian Salkowski
Seo Surgery Polska 2 by Damian SalkowskiAnton Shulke
 
Za darmo nie umarło - WordCamp Wrocław
Za darmo nie umarło - WordCamp WrocławZa darmo nie umarło - WordCamp Wrocław
Za darmo nie umarło - WordCamp WrocławTomasz Dziuda
 
SEO Surgery Polska #1 by Łukasz Rogala
SEO Surgery Polska #1 by Łukasz RogalaSEO Surgery Polska #1 by Łukasz Rogala
SEO Surgery Polska #1 by Łukasz RogalaAnton Shulke
 
Lets Flex the WEB 4
Lets Flex the WEB 4Lets Flex the WEB 4
Lets Flex the WEB 4MediaFrame
 
Łukasz Trześniewski Optymalizacja on page seo
Łukasz Trześniewski Optymalizacja on page seoŁukasz Trześniewski Optymalizacja on page seo
Łukasz Trześniewski Optymalizacja on page seoŁukasz Trześniewski
 
4Developers 2023: frontendowe optymalizacje wydajności / Bartek Miś / Web Dev...
4Developers 2023: frontendowe optymalizacje wydajności / Bartek Miś / Web Dev...4Developers 2023: frontendowe optymalizacje wydajności / Bartek Miś / Web Dev...
4Developers 2023: frontendowe optymalizacje wydajności / Bartek Miś / Web Dev...Bartłomiej Miś
 
WordUp Kraków - maj 2015
WordUp Kraków - maj 2015WordUp Kraków - maj 2015
WordUp Kraków - maj 2015Tomasz Dziuda
 
Spa i .net core
Spa i .net coreSpa i .net core
Spa i .net coreVimanet
 
PSD2WP: kodowanie dedykowanych motywów dla WordPressa w modelu komponentowym
PSD2WP: kodowanie dedykowanych motywów dla WordPressa w modelu komponentowymPSD2WP: kodowanie dedykowanych motywów dla WordPressa w modelu komponentowym
PSD2WP: kodowanie dedykowanych motywów dla WordPressa w modelu komponentowymKrzysztof Łęcki
 
Framework GavernWP - WordCamp Gdańsk 2012
Framework GavernWP - WordCamp Gdańsk 2012Framework GavernWP - WordCamp Gdańsk 2012
Framework GavernWP - WordCamp Gdańsk 2012Tomasz Dziuda
 
Motywy dla WordPressa - historia prawdziwa - WordUp Katowice
Motywy dla WordPressa - historia prawdziwa - WordUp KatowiceMotywy dla WordPressa - historia prawdziwa - WordUp Katowice
Motywy dla WordPressa - historia prawdziwa - WordUp KatowiceTomasz Dziuda
 
Wprowadzenie do modelowania danych w PowerPivot
Wprowadzenie do modelowania danych w PowerPivotWprowadzenie do modelowania danych w PowerPivot
Wprowadzenie do modelowania danych w PowerPivotKamil Nowinski
 
Word up łódź kwiecień 2015
Word up łódź   kwiecień 2015Word up łódź   kwiecień 2015
Word up łódź kwiecień 2015Tomasz Dziuda
 
Najlepsze wtyczki WordPress, które każdy developer powinien mieć
Najlepsze wtyczki WordPress, które każdy developer powinien miećNajlepsze wtyczki WordPress, które każdy developer powinien mieć
Najlepsze wtyczki WordPress, które każdy developer powinien miećMaciej Swoboda
 
Responsive Web Design - co z tego wynikło?
Responsive Web Design - co z tego wynikło?Responsive Web Design - co z tego wynikło?
Responsive Web Design - co z tego wynikło?Tomasz Dziuda
 

Similar to Landing page prosto z gutenberga (20)

Seo Surgery Polska 2 by Damian Salkowski
Seo Surgery Polska 2 by Damian SalkowskiSeo Surgery Polska 2 by Damian Salkowski
Seo Surgery Polska 2 by Damian Salkowski
 
Wydajny frontend 2023
Wydajny frontend 2023Wydajny frontend 2023
Wydajny frontend 2023
 
Wordpress dla każdego
Wordpress dla każdegoWordpress dla każdego
Wordpress dla każdego
 
Za darmo nie umarło - WordCamp Wrocław
Za darmo nie umarło - WordCamp WrocławZa darmo nie umarło - WordCamp Wrocław
Za darmo nie umarło - WordCamp Wrocław
 
Bartek Dziamski - Kawaskrypty dom marchewki
Bartek Dziamski - Kawaskrypty dom marchewkiBartek Dziamski - Kawaskrypty dom marchewki
Bartek Dziamski - Kawaskrypty dom marchewki
 
SEO Surgery Polska #1 by Łukasz Rogala
SEO Surgery Polska #1 by Łukasz RogalaSEO Surgery Polska #1 by Łukasz Rogala
SEO Surgery Polska #1 by Łukasz Rogala
 
Lets Flex the WEB 4
Lets Flex the WEB 4Lets Flex the WEB 4
Lets Flex the WEB 4
 
Łukasz Trześniewski Optymalizacja on page seo
Łukasz Trześniewski Optymalizacja on page seoŁukasz Trześniewski Optymalizacja on page seo
Łukasz Trześniewski Optymalizacja on page seo
 
4Developers 2023: frontendowe optymalizacje wydajności / Bartek Miś / Web Dev...
4Developers 2023: frontendowe optymalizacje wydajności / Bartek Miś / Web Dev...4Developers 2023: frontendowe optymalizacje wydajności / Bartek Miś / Web Dev...
4Developers 2023: frontendowe optymalizacje wydajności / Bartek Miś / Web Dev...
 
WordUp Kraków - maj 2015
WordUp Kraków - maj 2015WordUp Kraków - maj 2015
WordUp Kraków - maj 2015
 
SPA i .Net Core
SPA i .Net CoreSPA i .Net Core
SPA i .Net Core
 
Spa i .net core
Spa i .net coreSpa i .net core
Spa i .net core
 
PSD2WP: kodowanie dedykowanych motywów dla WordPressa w modelu komponentowym
PSD2WP: kodowanie dedykowanych motywów dla WordPressa w modelu komponentowymPSD2WP: kodowanie dedykowanych motywów dla WordPressa w modelu komponentowym
PSD2WP: kodowanie dedykowanych motywów dla WordPressa w modelu komponentowym
 
Framework GavernWP - WordCamp Gdańsk 2012
Framework GavernWP - WordCamp Gdańsk 2012Framework GavernWP - WordCamp Gdańsk 2012
Framework GavernWP - WordCamp Gdańsk 2012
 
Motywy dla WordPressa - historia prawdziwa - WordUp Katowice
Motywy dla WordPressa - historia prawdziwa - WordUp KatowiceMotywy dla WordPressa - historia prawdziwa - WordUp Katowice
Motywy dla WordPressa - historia prawdziwa - WordUp Katowice
 
Wprowadzenie do modelowania danych w PowerPivot
Wprowadzenie do modelowania danych w PowerPivotWprowadzenie do modelowania danych w PowerPivot
Wprowadzenie do modelowania danych w PowerPivot
 
Word up łódź kwiecień 2015
Word up łódź   kwiecień 2015Word up łódź   kwiecień 2015
Word up łódź kwiecień 2015
 
Najlepsze wtyczki WordPress, które każdy developer powinien mieć
Najlepsze wtyczki WordPress, które każdy developer powinien miećNajlepsze wtyczki WordPress, które każdy developer powinien mieć
Najlepsze wtyczki WordPress, które każdy developer powinien mieć
 
Jaki framework wybrać
Jaki framework wybraćJaki framework wybrać
Jaki framework wybrać
 
Responsive Web Design - co z tego wynikło?
Responsive Web Design - co z tego wynikło?Responsive Web Design - co z tego wynikło?
Responsive Web Design - co z tego wynikło?
 

More from Arkadiusz Stęplowski

More from Arkadiusz Stęplowski (17)

Wordpress i nagłówki
Wordpress i nagłówkiWordpress i nagłówki
Wordpress i nagłówki
 
Es jak FTPS SFTP
Es jak FTPS SFTPEs jak FTPS SFTP
Es jak FTPS SFTP
 
Jaki hosting pod wordpressa
Jaki hosting pod wordpressaJaki hosting pod wordpressa
Jaki hosting pod wordpressa
 
Calkiem przyzwoity backup
Calkiem przyzwoity backupCalkiem przyzwoity backup
Calkiem przyzwoity backup
 
WordCamp 2016 Najdłuższe wdrożenie świata
WordCamp 2016 Najdłuższe wdrożenie świataWordCamp 2016 Najdłuższe wdrożenie świata
WordCamp 2016 Najdłuższe wdrożenie świata
 
Aleksandra Łączek – Niezbędnik Admina
Aleksandra Łączek – Niezbędnik AdminaAleksandra Łączek – Niezbędnik Admina
Aleksandra Łączek – Niezbędnik Admina
 
Gdzie są umiejscowione polskie wordpressy
Gdzie są umiejscowione polskie wordpressyGdzie są umiejscowione polskie wordpressy
Gdzie są umiejscowione polskie wordpressy
 
Historia i budowa komputera
Historia i budowa komputeraHistoria i budowa komputera
Historia i budowa komputera
 
Cyfrowy świat wprowadzenie
Cyfrowy świat wprowadzenieCyfrowy świat wprowadzenie
Cyfrowy świat wprowadzenie
 
Blaszane pudelko z grami, Mr.Google odpowie
Blaszane pudelko z grami, Mr.Google odpowieBlaszane pudelko z grami, Mr.Google odpowie
Blaszane pudelko z grami, Mr.Google odpowie
 
Cyfrowy świat nas otacza, więc weźmy z niego coś dla siebie
Cyfrowy świat nas otacza, więc weźmy z niego coś dla siebieCyfrowy świat nas otacza, więc weźmy z niego coś dla siebie
Cyfrowy świat nas otacza, więc weźmy z niego coś dla siebie
 
WordCamp 2011 Informacja Rulez!
WordCamp 2011 Informacja Rulez!WordCamp 2011 Informacja Rulez!
WordCamp 2011 Informacja Rulez!
 
Warszawski quiz biblioteczny
Warszawski quiz bibliotecznyWarszawski quiz biblioteczny
Warszawski quiz biblioteczny
 
Kwerenda biblioteczna do pracy licencjackiej
Kwerenda biblioteczna do pracy licencjackiejKwerenda biblioteczna do pracy licencjackiej
Kwerenda biblioteczna do pracy licencjackiej
 
Dominik Ghirlandaio
Dominik GhirlandaioDominik Ghirlandaio
Dominik Ghirlandaio
 
Wirtualnywydawca.pl analiza wortalu
Wirtualnywydawca.pl analiza wortaluWirtualnywydawca.pl analiza wortalu
Wirtualnywydawca.pl analiza wortalu
 
Historia Bibliotek
Historia BibliotekHistoria Bibliotek
Historia Bibliotek
 

Landing page prosto z gutenberga