body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none} h1, h2, h3 { font-weight: normal; } amp-story-page { background-color: #131516; } amp-story-grid-layer { overflow: visible; } @media (max-aspect-ratio: 9 / 16) { @media (min-aspect-ratio: 320 / 678) { amp-story-grid-layer.grid-layer { margin-top: calc((100% / 0.5625 - 100% / 0.6666666666666666) / 2); } } } @media not all and (min-resolution:.001dpcm) { @media { p.text-wrapper > span { font-size: calc(100% - 0.5px); } } } .page-fullbleed-area, .page-background-overlay-area { position: absolute; overflow: hidden; width: 100%; left: 0; height: calc(1.1851851851851851 * 100%); top: calc((1 - 1.1851851851851851) * 100% / 2); } .element-overlay-area { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .page-safe-area { overflow: visible; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: calc(0.84375 * 100%); margin: auto 0; } .mask { position: absolute; overflow: hidden; } .fill { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 0; } @media (prefers-reduced-motion: no-preference) { .animation-wrapper { opacity: var(--initial-opacity); transform: var(--initial-transform); } } amp-story-grid-layer.align-bottom { align-content: end; padding: 0; } .captions-area { padding: 0 32px 0; } amp-story-captions { margin-bottom: 16px; text-align: center; } amp-story-captions span { display: inline-block; margin: 0; padding: 6px 12px; vertical-align: middle; border-radius: 15px; background: rgba(11, 11, 11, 0.6); color: rgba(255, 255, 255, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;; font-size: calc(4 * var(--story-page-vw)); line-height: 1.4; word-break: break-word; word-wrap: break-word; overflow-wrap: break-word; } LucraPage$[{"selector":"#anim-72b081aa-6924-4aa4-826d-c6ad86590eb8","keyframes":[{"offset":0,"transform":"translate3d(0, -138.17614%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.29,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.45,"transform":"translate3d(0, -38.855130568%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.61,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.71,"transform":"translate3d(0, -13.209638984000001%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.8,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.85,"transform":"translate3d(0, -4.960523426%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.92,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.96,"transform":"translate3d(0, -2.155547784%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":1,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"}],"delay":0,"duration":1600,"fill":"both"}]
[{"selector":"#anim-602e6fca-1809-4309-a5f1-e457f8b62a92","keyframes":{"transform":["translate3d(102.01512%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(.2, 0, .8, 1)","fill":"both"}][{"selector":"#anim-38b6b35c-4495-4557-9f8b-feb047e2d126","keyframes":{"transform":["rotateZ(180deg)","rotateZ(0deg)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(.2, 0, .5, 1)","fill":"forwards"}]
[{"selector":"#anim-decd9cac-68d1-4f25-a199-d2438d7b8c1e","keyframes":{"opacity":[0,1]},"delay":800,"duration":900,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}][{"selector":"#anim-10790ea4-dcff-4ffc-8fad-925b793420e8","keyframes":{"transform":["translate3d(-115.11254%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":800,"duration":900,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}][{"selector":"#anim-4f2fd20d-a4c5-4627-b25b-629814e81266","keyframes":{"opacity":[0,1]},"delay":900,"duration":900,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}][{"selector":"#anim-a126fcb3-9e0e-4abf-b66f-110cb6a674fa","keyframes":{"transform":["translate3d(-122.16982%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":900,"duration":900,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}][{"selector":"#anim-48d30d9b-adf6-4c55-a7ba-e6a34637828b","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.05)","offset":0.33},{"transform":"scale(0.995)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":0,"duration":600,"easing":"ease-in-out","fill":"both","iterations":3}]

Contexto

Contexto, mais do que conteúdo. No 1ª passo vamos nos preparar para entender o que é importante em uma página antes de começar

1

[{"selector":"#anim-3b96eb8c-bfe1-4567-bb3a-b2c80a04d8f8","keyframes":{"opacity":[0,1]},"delay":800,"duration":900,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}][{"selector":"#anim-5fdd0d15-b87b-46c7-a4b7-a3322bcafbd6","keyframes":{"transform":["translate3d(-115.11254%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":800,"duration":900,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}][{"selector":"#anim-a80435c6-502c-478d-8dcf-db2aa7aa476b","keyframes":{"opacity":[0,1]},"delay":900,"duration":900,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}][{"selector":"#anim-236852cf-499f-4434-b478-7d90e614388f","keyframes":{"transform":["translate3d(-122.16982%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":900,"duration":900,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}][{"selector":"#anim-504108da-1c73-4bc1-8934-7e4d5f5b41f0","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.05)","offset":0.33},{"transform":"scale(0.995)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":0,"duration":600,"easing":"ease-in-out","fill":"both","iterations":3}]

Preparação

Antes de mais nada, criar páginas otimizadas para a conversão não está ligada as ferramentas, mas escolher as ferramentas estão ligadas na execução e é a execução que gera resultados.

2

[{"selector":"#anim-df206f8c-83ce-4f3d-a7cc-d0f9d262da7c","keyframes":{"opacity":[0,1]},"delay":800,"duration":900,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}][{"selector":"#anim-d4a26f5e-15e7-4db5-a90d-34f547e95860","keyframes":{"transform":["translate3d(-115.11254%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":800,"duration":900,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}][{"selector":"#anim-e2f06bac-9058-4b37-8196-f42d2f2a3aa1","keyframes":{"opacity":[0,1]},"delay":900,"duration":900,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}][{"selector":"#anim-7c765f69-59ff-42e3-9a1d-4bedebc73497","keyframes":{"transform":["translate3d(-122.16982%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":900,"duration":900,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}][{"selector":"#anim-4f1638e4-6758-41d3-a77b-31432fe83e5d","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.05)","offset":0.33},{"transform":"scale(0.995)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":0,"duration":600,"easing":"ease-in-out","fill":"both","iterations":3}]

Inspiração

Mais do que referencias a busca por inspirações vão trazer soluções. 

3

[{"selector":"#anim-ac3577fb-5dac-4c7e-b87f-6880b74682bf","keyframes":{"opacity":[0,1]},"delay":800,"duration":900,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}][{"selector":"#anim-92fea53a-f1ee-4054-927b-82380f13dc07","keyframes":{"transform":["translate3d(-115.11254%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":800,"duration":900,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}][{"selector":"#anim-4a78c65e-458f-4d41-a6ee-ddd80391fce7","keyframes":{"opacity":[0,1]},"delay":900,"duration":900,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}][{"selector":"#anim-10494b49-a587-490b-8181-135a68ba941a","keyframes":{"transform":["translate3d(-122.16982%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":900,"duration":900,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}][{"selector":"#anim-fdea4fff-be97-44a9-8b79-55b1ca8409d9","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.05)","offset":0.33},{"transform":"scale(0.995)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":0,"duration":600,"easing":"ease-in-out","fill":"both","iterations":3}]

Execução

O passo mais importante é colocar em prática, mais do que fazer é saber o que fazer. 

4

[{"selector":"#anim-1d2947b0-5793-47f5-852c-bf2be4db8fb4","keyframes":{"opacity":[0,1]},"delay":800,"duration":900,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}][{"selector":"#anim-7c96c3f3-f6bf-419d-8509-2f979114740f","keyframes":{"transform":["translate3d(-115.11254%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":800,"duration":900,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}][{"selector":"#anim-8d0ae7a6-4b5f-4afa-813d-2befe7a1ca6d","keyframes":{"opacity":[0,1]},"delay":900,"duration":900,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}][{"selector":"#anim-9680689b-037e-4b8c-b839-b3e1eea3c362","keyframes":{"transform":["translate3d(-122.16982%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":900,"duration":900,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}][{"selector":"#anim-8880cedd-90dc-4002-94aa-b25a9064271f","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.05)","offset":0.33},{"transform":"scale(0.995)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":0,"duration":600,"easing":"ease-in-out","fill":"both","iterations":3}]

CRO

Um passo 100% focado em otimizar as conversões de suas páginas. 

5

[{"selector":"#anim-1a204310-e35e-461e-ac6c-f0d3950ba192","keyframes":{"opacity":[0,1]},"delay":0,"duration":1000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}][{"selector":"#anim-068e2dba-9353-4506-b141-3598e5e3fdad","keyframes":{"transform":["translate3d(0px, 92.40143%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}][{"selector":"#anim-fd4c439c-c39a-472a-b734-8a4eb0a82820","keyframes":[{"offset":0,"transform":"rotate(-360deg) translate3d(0, -419.44436%, 0) rotate(360deg)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.29,"transform":"rotate(-360deg) translate3d(0, 0%, 0) rotate(360deg)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.45,"transform":"rotate(-360deg) translate3d(0, -117.947754032%, 0) rotate(360deg)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.61,"transform":"rotate(-360deg) translate3d(0, 0%, 0) rotate(360deg)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.71,"transform":"rotate(-360deg) translate3d(0, -40.098880816000005%, 0) rotate(360deg)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.8,"transform":"rotate(-360deg) translate3d(0, 0%, 0) rotate(360deg)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.85,"transform":"rotate(-360deg) translate3d(0, -15.058052524%, 0) rotate(360deg)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.92,"transform":"rotate(-360deg) translate3d(0, 0%, 0) rotate(360deg)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.96,"transform":"rotate(-360deg) translate3d(0, -6.543332016%, 0) rotate(360deg)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":1,"transform":"rotate(-360deg) translate3d(0, 0%, 0) rotate(360deg)","easing":"cubic-bezier(0, 0, .5, 1)"}],"delay":0,"duration":1600,"fill":"both"}][{"selector":"#anim-d5b93c51-8870-4635-8224-3df0fce39ef4 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}]

Aumentar minhas conversões

Domine a arte de criar páginas de alta conversão