Modelos prontos de páginas de destino são necessários para lançar rapidamente um novo produto, promovê-lo usando uma página LP ou um aplicativo móvel, ou motivar os usuários a se registrar / assinar o boletim informativo. Para uma “landing page”, usabilidade e facilidade de uso com um bom layout são essenciais. Modelos de página de destino de venda modernos são desenvolvidos com o objetivo de criar um site responsivo com altas conversões.
Um tema HTML5 ultramoderno baseado no Bootstrap 3.1.1. Vem com 4 layouts: uma / várias páginas, opções da barra de navegação. Um leve efeito de rolagem de paralaxe é integrado a um tema de página de destino responsivo móvel para tráfego orgânico (SEO).
Modelo de página de destino em HTML para aplicativos da web e móveis, voltado para a geração de leads fácil. Possui carregamento rápido e html válido, código css. Na parte superior da página única, o formulário dos contatos é duplicado com.
Modelo de página de destino HTML5 de uma página com efeitos CSS3. Possui uma estrutura de três colunas, construída no Bootstrap 3. Adequado para a venda de aplicativos iOS / Android. O modelo inclui 2 layouts (com e sem paralaxe), formulários de contato Ajax, lightbox PrettyPhoto e 5 esquemas de cores. Fácil de personalizar: altere os códigos hexadecimais e os elementos relacionados serão pintados com uma nova cor. PSD incluído.
O moderno modelo de aplicativo móvel pronto para Retina oferece 8 opções de cores, imagem /.
O modelo de página de destino de estilo simples e multifuncional vem com 3 opções de índice e 6 esquemas de cores. Template construído com twitter bootstrap3, script PHP incluso para contato e formulário de upload.
Slander é ideal para startups e empresas, adequado para profissionais ou um projeto individual. O design responsivo com Bootstrap e HTML5 / CSS3 inclui um controle deslizante responsivo, controle deslizante de guia, formulário de assinatura de notícias e muito mais.
Modelo de página de destino HTML5 / CSS3 elegante, limpo e minimalista com grande funcionalidade. O modelo foi desenvolvido para a página Em breve (lançamento em breve), ideal para a criação de uma página de aplicativo e um site de demonstração.
Modelo de pouso responsivo para especiais Atividades. Possui seções para vídeo comercial, programação de eventos, lista de convidados.
Um site de uma página é conveniente para os empresários porque pode ser feito literalmente em um dia. Se baixar modelo de site de uma página pronto, então você pode fazer um site para sua empresa por um valor mínimo, já que você só tem que pagar pela hospedagem. Para o cliente, uma página de uma página é conveniente porque todas as informações nela contidas são apresentadas da forma mais concisa e estruturada possível, não há nada de supérfluo. Devido à facilidade de uso para o cliente, as páginas de uma página geralmente mostram conversões mais altas do que outros tipos de sites.
Se você decidir fazer por sua empresa Página de destino, modelo de download Em nosso site. Verificamos cuidadosamente todos os modelos em busca de vírus, para que você não tenha medo de baixar um arquivo infectado. Tudo modelos de página de destino em nosso catálogo tem um design moderno, feito em uma variedade de estilos. A capacidade de ajustar o número de blocos, alterar o esquema de cores e outras funções o ajudará a criar um site original exclusivo com base em um modelo simples.
O principal problema de quem decidiu baixar modelo de página de destino grátis, é uma grande quantidade de vírus e bugs em modelos gratuitos. Portanto, é muito importante encontrar um site seguro e confiável. Convidamos você a nos visitar, pois monitoramos cuidadosamente a segurança. Além disso, vamos deliciá-lo com a mais ampla variedade Modelos HTML de uma página, download que você pode agora mesmo!
Leia o texto mais ...Oi. Os sites de página única ainda são populares hoje em dia, e por boas razões. Eles têm uma série de vantagens sobre sites de várias páginas completos. Em uma página de uma página (também conhecida como página de destino), uma pessoa se concentra em uma ideia, um produto, o que permite que ela estude sua proposta sem distração e esteja mais disposta a abandonar um aplicativo.
"OK"- você diz - “Decidi fazer para mim uma página de destino, mas não entendo nada de programação”... E isso não é um problema. Agora, existem muitas ferramentas para criar um site profissional sem vasculhar o código. Um deles é o popular WordPress CMS com WPBackery ou ELementor builder.
Neste artigo, forneci modelos de wordpress de página de destino interessantes que são adequados para negócios, venda de mercadorias, agências, freelancers e qualquer outro tópico. Afinal, esses modelos podem e devem ser personalizados para você e sua oferta.
Muitos modelos usam sinos e apitos da moda, como efeitos de paralaxe, designs planos, fotos em tela cheia e vídeos. A adaptação para dispositivos móveis está incluída em cada modelo.
Chega de discussões, vamos assistir a seleção!
P.s. Se você quiser saber mais detalhadamente o que é uma página de destino, analisei essa questão em detalhes e dei 27 exemplos de páginas de destino.
Para mim, este é um modelo excelente, porque tem mais de 376 demos sobre vários tópicos. Usando este modelo, você pode transmitir emoções completamente diferentes. Poderoso e intuitivo.
Este incrível tema tem um controle deslizante personalizável, cabeçalhos totalmente personalizáveis, mega menus, videofones, cabeçalhos fixos ou fixos, vários logotipos para cabeçalhos, elementos interativos, 7 layouts de portfólio diferentes e muito mais, o que abre possibilidades infinitas.
Faça uma apresentação única de seu produto ou oferta. Existem instruções visuais no texto e também instruções em vídeo.
Um sistema de modelo avançado e exclusivo que permite não apenas criar uma página de destino, mas também integrá-la ao site do projeto principal sem configurações adicionais. O modelo contém muitos estilos de bloco prontos que estão em demanda nas páginas de destino - apresentação da equipe, galeria, portfólio. Belos efeitos de pré-carregamento de páginas também estão disponíveis.
A propósito, The7 está agora no meu blog.
Betheme é o maior modelo em termos de funcionalidade e número de opções de layout predefinidas. Hoje, existem mais de 400 páginas de aterrissagem de demonstração baseadas neste tema, você pode escolher qualquer uma e se adaptar às suas necessidades. As páginas de destino prontas no Betheme são usadas ativamente:
Mais algumas demonstrações:
As atualizações do tema são feitas automaticamente, as atualizações do plugin são feitas clicando no botão. Os sites de demonstração usam Revolution Slider. O modelo oferece 5 layouts para páginas, 20 cabeçalhos personalizados, estilos ilimitados para mapas do Google, muitos ícones estilosos.
A ferramenta Muffin Builder irá ajudá-lo a criar qualquer design sem nenhum conhecimento de desenvolvimento web. Se desejar, você pode adicionar regras css e scripts js sem afetar o código principal do modelo.
Ronneby apresenta alto desempenho e um painel de opções expandido. Os melhores plug-ins premium para a criação de páginas de destino em WordPress foram adicionados ao modelo. Os desenvolvedores do template prestam atenção especial ao suporte ao usuário - qualquer pergunta deve ser respondida rapidamente, descrevendo como resolver o problema. O tema já foi localizado para dois idiomas, mas arquivos para tradução também estão anexados a ele, permitindo organizar o suporte multilíngue para sites.
Outro exemplo de demonstração:
Modelo flexível e, ao mesmo tempo, fácil de personalizar. Inclui 72 skins para todos os temas possíveis. Admin conveniente. painel, mesmo um iniciante achará fácil entender o construtor de páginas e as configurações.
Existem tutoriais úteis com 240 páginas e 20 tutoriais em vídeo sobre como deixar seu site incrível!)
O modelo Jupiter também é compatível com SEO. As verificações do Google PageSpeed mostram um bom desempenho, o que significa que os mecanismos de pesquisa vão adorar o seu site.
O modelo é limpo, organizado e é usada uma tipografia de boa qualidade. Devido à utilização de efeitos visuais, como a paralaxe, o tema acaba por ser animado e é muito agradável olhar para tal local.
Uma das maiores coleções do WordPress. Os modelos foram escritos por programadores profissionais da web e os designs foram desenhados por especialistas visuais e UX qualificados. Graças a isso, você pode colocar com segurança qualquer template, cada um está pronto para uso em um computador, celular, tablet. Plug-ins premium incluídos:
Brooklyn tem 16 skins de demonstração sobre diferentes tópicos. O estilo moderno das páginas, a combinação de imagens e fontes emprestam elegância a qualquer site que tenha esse tema. O bloco de portfólio é executado com perfeição. O modelo é perfeito para agências, empresas. Os modelos são confeccionados em cores escuras, o que dá confiança e segurança. O modelo é responsivo e fica ótimo em todos os dispositivos.
Um molde suave e leve que não deixará ninguém indiferente. Tipografia de alta qualidade e elementos de interface tornam esta jogabilidade chique. Indicado e vencedor de várias competições e classificações conhecidas, como awwwards. Tem mais de 30 skins de diferentes temas para escolher
Não só o site se adapta aos dispositivos móveis, mas também as imagens para parecerem mais convenientes para os visitantes.
O modelo é novo, mas já foi comprovado. Possui 8 temas (múltiplas páginas, aterrissagem, corporativo, portfólio, blog, e-commerce, stubs), 3-12 skins cada. Além da beleza e limpeza, este modelo possui apenas um arsenal de widgets e elementos diferentes. Você pode fazer seu pouso parecer bonito e funcional. Precisa de um controle deslizante? Por favor. Mostrar portfólio, comentários, benefícios? E isso é.
Native é uma ferramenta poderosa para promover uma startup. Os modelos de página de destino WordPress baseados em tema usam vários efeitos de paralaxe para se mover entre os blocos semânticos do site. A documentação estendida e os tutoriais em vídeo ajudarão os usuários novatos do CMS a compreender rapidamente a funcionalidade do painel de administração. Os plug-ins Visual Composer, Layer Slider e Slider Revolution vêm como um aplicativo gratuito para o modelo.
Salient é um tema versátil com um design responsivo e é uma escolha popular. Tipografia premium e efeitos de paralaxe ao rolar a página para baixo ajudam a aprimorar a experiência da página de destino. A otimização da taxa de quadros garante transições suaves de animação entre blocos de conteúdo. O modelo usa tamanhos de imagem adaptáveis, o que contribui para o carregamento rápido da página e economia de tráfego.
TheGem é um tema moderno para projetos criativos, otimizado para SEO e complementado por um layout responsivo. O baixo peso das páginas, a velocidade de carregamento e o UX bem pensado garantem o alto desempenho do template. Se você precisa promover seu negócio usando uma página de destino, você deve comprar este modelo pelo menos por causa de seu código de seo-friendly, que fornecerá posições de destaque nos resultados de pesquisa do Google. As 11 versões de demonstração disponíveis das páginas de destino levam em consideração as necessidades de diversos projetos.
Os elementos de design para o site no TheGem são configurados usando o plug-in Visual Composer. A exibição de uma grande quantidade de conteúdo nos blocos da landing page (portfólio, resenhas, serviços) é organizada por meio de carregamento - automático ou "por botão", bem como por meio de um controle deslizante para troca de abas. O modelo oferece 6 opções de animação para carregar componentes da seção que aparecem ao rolar o conteúdo da página de aterrissagem. O fundo dos blocos de conteúdo pode ser vídeos do vimeo e youtube ou retirados do sistema de arquivos do site usando html5.
O Marketing Pro é um modelo criado com a conversão, o marketing e o SEO em mente. Cada um dos 9 sites de demonstração nele são criados com as especificidades de um nicho de marketing específico em mente. Um bônus para o design responsivo da página de destino são os modelos estilizados para blocos de organização de eventos.
Oshine é um dos temas criativos mais vendidos. Com um excelente design e funcionalidade poderosa, este modelo pode ser usado para criar páginas de destino para projetos criativos e negócios. Cinquenta módulos de personalização, cada um cuidadosamente elaborado para ajudá-lo a obter os resultados perfeitos. A opção "desfazer / refazer" e a capacidade de definir ações específicas para "teclas de atalho" simplificam o processo de configuração.
Jevelin é um modelo de design responsivo premium que facilita a criação de páginas de destino e sites wordpress de uma página. O tópico ajudará a lançar o projeto em um curto espaço de tempo. Graças à variedade de ferramentas de personalização - 9 opções de cabeçalho em layouts diferentes, 40 elementos exclusivos, cada um dos quais pode ser estilizado individualmente, funcionalidade integrada para organizar republicações em redes sociais, 6 soluções de estilo para a seção de portfólio - personalizando skins está mais rápido do que nunca ...
Kalium é um tópico que representantes de várias áreas profissionais recorrem a fim de obter um site para promover seus serviços. Uma ênfase especial no design do site Kalium é colocada na tipografia - uma biblioteca especializada para gerenciar fontes é responsável por isso. O modelo pode usar 4000 fontes - Google, Typekit, Font Squirrel, premium e custom (carregado pelo usuário).
O Inbound é um modelo que pode facilitar a criação de sites de uma página para aplicativos, e-books, cursos em vídeo e produtos semelhantes. A personalização do design é feita usando o gerador visual de landing pages do Landing Page Builder. O modelo também permite que cada produto promovido seja alocado em uma mini-seção no formato da página de destino em um site e pode ser usado para seções de categoria de produto no WooCommerce.
Intact é um tema com várias opções projetado para ajudá-lo a resolver suas necessidades de negócios na Internet. Inclui componentes importantes de uma página de destino moderna, como: blocos "Planos tarifários" e "Funcionários da empresa", um controle deslizante com avaliações, conjuntos de ícones temáticos, formulários de assinatura, um consultor online.
O Comet é um modelo de pixel perfeito totalmente responsivo para Visual Composer e. Os usuários recebem 5 skins para páginas de destino, nas quais os seguintes efeitos são implementados: controle deslizante para texto, paralaxe, vídeo de fundo - importado do YouTube ou incorporado em html5, controle deslizante de zoom animado. Novos usuários podem facilmente descobrir as configurações do tema ao criar páginas de destino do wordpress - instruções e tutoriais em vídeo estão disponíveis online.
Um tema WordPress versátil que tem tudo que você precisa para criar uma página de destino:
O design de desenvolvimento pode ser avaliado antes da compra. Os esquemas de cores e configurações são alterados no editor visual. Os autores prometem apoio a qualquer momento.
O desenvolvedor oferece um modelo de site em diferentes tópicos - de construção a serviços veterinários. Páginas de destino simples e eficazes ajudarão a transmitir seus benefícios, condições de trabalho e outros detalhes necessários para clientes em potencial. O design é responsivo e fica bem em todos os dispositivos, de monitores Retina a dispositivos móveis. Existem plugins para portfólio, horário de funcionamento, calendário, bem como ícones personalizados.
“Um tema ideal para uma startup”, dizem os autores sobre seu desenvolvimento. O design minimalista leve de 2019 é adequado para lojas online, agências de eventos e muitos outros tipos de negócios para um cartão de visita ou desenvolvimento em um projeto maior. Incluído:
Modelo multi-template com trinta demos, nos quais você só pode substituir o texto desejado. Eles também oferecem mais de 90 modelos de controles deslizantes e efeitos, mais de 130 opções para páginas individuais. Estão incluídos 9 plug-ins básicos que serão úteis para promover um site de cartão de visita ou um recurso maior. Tudo isso com desconto, agora disponível por US $ 30. Um dos modelos de página de destino mais populares.
Outro designer de vários modelos para páginas de destino e cartões de visita. Código limpo com um número infinito de opções para escolher cabeçalhos e rodapés sem a necessidade de aprender programação. Muitos designs, elementos facilmente substituíveis graças ao plugin "grade". Transforme facilmente de um site de uma página em uma loja completa por meio da pesquisa avançada. O suporte está sempre pronto para responder a perguntas.
Placa multitemática popular e barata para aterrissagem, que se diferencia em:
Sites profissionais sobre qualquer tópico que você pode simplesmente instalar com um clique e usar. Desenhos modernos que não são "enfadonhos" e têm uma aparência fresca e bonita.
“Multi-template de nova geração” é uma afirmação ousada, mas é assim que os autores falam sobre seu produto. Por apenas $ 35 você pode obter:
O plugin do editor visual Elementor é realmente atualizado para a versão mais recente e muito fácil de usar.
"O melhor entre 9500" - observam os desenvolvedores. O modelo se concentra em pessoas que nunca fizeram programação. A personalização do design é realizada usando o construtor de plug-in visual Elementor, que permite que você trabalhe no modo um-para-um, não use configurações de terceiros e use imediatamente a funcionalidade de pleno funcionamento de um dos 300 modelos. Prático e rápido de configurar.
Belo design em um esquema de cores incomum. A ênfase é colocada não apenas no design elegante, porque se propõe a compra em um conjunto:
Modelo de WordPress limpo e compreensível para cartões de visita e compras online. No modo de loja, existem configurações para as características do produto, pesquise por eles.
Uma seleção de páginas de destino atraentes em um estilo plano moderno e elegante. Elementos desenhados à mão ajudarão os clientes em potencial a se destacarem e serem lembrados. Incluídos no preço estão os principais plug-ins e widgets - de um editor visual a um efeito de paralaxe para colocar um plano de fundo ou portfólio. Você pode personalizar uma visualização diferente nas versões desktop e móvel, adaptabilidade é fornecida por padrão.
Diversas soluções para designers, fotógrafos, artistas. Predefinições úteis para a colocação de portfólio permitirão que você se proteja de cópias, carregue enquanto o usuário navega, o que economiza tempo de carregamento. Download de vídeo fácil. Existe uma opção para blogar. Elementos para a colocação de infográficos são preparados. O designer visual irá ajudá-lo a personalizar facilmente todos os detalhes.
Um pacote de desembarque multifuncional oferecido por apenas US $ 29 para obter:
Nenhuma codificação necessária, existem plugins básicos de formulário de contato e instalações de controles deslizantes. Pronto para integração com WooCommerce.
Os desenvolvedores fizeram um design "verde" interessante para serviços de paisagismo, assistência de jardinagem e temas ecológicos. No entanto, o espaço em branco pode ser usado para outros fins. Ícones bonitos, fontes limpas do Google, excelente capacidade de resposta e aparência, inclusive em dispositivos Retina, implicam no uso generalizado do tema WordPress.
Feito para a versão mais recente do WordPress. O modelo é atualizado constantemente. A funcionalidade da loja online é fornecida devido ao conveniente plug-in para pesquisa e pedidos avançados. Também existem predefinições para eventos, datas de calendário e gravação. Usado pelo Elementor para criar novas páginas. Suporta qualquer plug-in adicional.
O tema "musical" criativo será lembrado pelos visitantes por seu design brilhante, e o proprietário do site estará interessado em:
Educação é uma versão aprimorada do antigo tema de eLearning com experiência do usuário mais avançada e se destina a recursos educacionais da Internet: cursos online e sites de instituições educacionais. O modelo tem um design atraente e fornece funcionalidades abrangentes necessárias para o processo educacional.
Um é um tema criativo para a criação de páginas de destino com foco na promoção do produto. O front-end do modelo é feito em html5 e bootstrap 3, MailChimp e Contact Form 7. Os desenvolvedores do tema UX estudaram muitos projetos semelhantes, como resultado dos quais os usuários receberam uma landing page WordPress pronta modelos, que possuem todas as ferramentas importantes para projetos de negócios.
Total é um modelo adequado para muitos projetos. Ao criar páginas, ele usa: método arrastar e soltar, esquemas de cores ilimitados, personalização em tempo real, controles deslizantes premium fáceis de usar. Entre os sites de demonstração do tema, encontram-se templates de landing pages para 11 projetos diversos.
Estocolmo é um dos 30 temas WordPress mais vendidos em sua vida. Ao trabalhar com um tema, é permitido definir um esquema de cores para todo o site ou seus elementos individuais, aplicar qualquer uma das 600 fontes do Google, combinar opções e blocos de diferentes sites de demonstração. Os usuários que precisam de uma solução pronta para um projeto de negócios podem baixar modelos de páginas de destino instalando-os imediatamente na seção do construtor de sites.
Outra opção de demonstração:
Mais de 70 widgets com os quais suas páginas de destino serão únicas e modernas. Fontes Google, infográficos, adaptação a SEO, código limpo, criação de portfólios convenientes são apenas algumas das vantagens deste template. Terras, no sentido literal, podem ser montadas literalmente como um mosaico, arrastando e soltando normalmente. Na página de descrição, você pode ver exemplos ilustrativos.
Ao visualizar sites de demonstração, você deseja usar todos eles.
Tema Landing Page esfregado em buracos. Embora o boom nas páginas de destino tenha diminuído um pouco, as páginas de destino ainda são procuradas. Eles são lançados por todos, mesmo que isso seja claramente uma jogada perdedor para seus nichos de negócios. Alguém faz isso apenas para jogar, e alguém faz isso para ganhar dinheiro. Mas não é tão importante quais objetivos você busca, o importante é que todos precisarão desenvolver uma página. Alguém fará pedidos de profissionais e alguém, por um motivo ou outro, começará a criar sua própria Landing Page. Esta coleção é dedicada a este último.
Pessoas que decidiram crie um site você mesmo, eles podem iniciar o desenvolvimento do zero ou podem usar os já prontos, porque não requerem conhecimento especial de desenvolvimento. Um conhecimento básico de HTML e CSS é suficiente, como ensinado na escola. Aqui novamente surge a questão. Devo usar pago ou gratuito? Claro, o pago será de qualidade muito melhor e provavelmente mostrará conversões mais altas. O grátis ficará menos bonito, menos elaborado em termos de marketing, layout e design.
Esta coleção consiste apenas em grátis em HTML puro para criar uma página de destino... Inicialmente, a seleção consistia em 40 posições, mas acordando de manhã e olhando esses templates com um novo olhar, resolvi deletar a maior parte, pois era, francamente, lixo, e há tanto lixo na internet . Apenas os modelos mais valiosos permanecem, nos quais você pode pelo menos construir algo. A seleção inclui modelos de página de destino de uma ampla variedade de tópicos, mas, por algum motivo, o LP para aplicativos móveis prevalece. Eles acabaram sendo da mais alta qualidade.
Anteriormente, fizemos uma seleção de modelos de página de destino gratuitos. Eles foram adaptados a um tópico específico. Desta vez resolvi fazer um tema pré-fabricado que não pertence a nenhuma direção.
Outras coleções de modelos de páginas de destino HTML gratuitos:
A propósito. Se, por algum motivo, você quiser colocar esses modelos no motor do Wordpress, então, neste tópico, uma vez fiz uma seleção de plug-ins para criar uma Landing Page no Wordpress. Você pode tentar usá-los. Talvez isso economize muito tempo. Embora, pessoalmente, eu não veja muito sentido em fazer isso, já que HTML puro é o suficiente para um LP simples.
Então. Aqui estão 20 modelos de página de destino HTML gratuitos.
Saudações, meus queridos leitores. Hoje vamos falar sobre os pontos técnicos com a ajuda dos quais podemos aumentar conversão de vendas seus bens ou serviços. Um dos pontos importantes é uma página de destino bem pensada com produtos. A chamada landing page, sobre a qual falaremos mais adiante e obteremos códigos de página prontos.
O que é uma página de destino? Esta é a página que as pessoas geralmente acessam depois de clicar em um anúncio. Criado para uma oferta: um produto, serviço ou assinatura. Uma página de destino eficaz é a base do marketing de Internet de sucesso. O produto pode ser o melhor do mercado, os anúncios são aperfeiçoados, mas sem uma boa landing page, os esforços não dão 100% do resultado. Ela diz aos visitantes o que é oferecido e por que eles deveriam querer. O senso de urgência contribui para a rápida tomada de decisões e a transição do usuário para a categoria de cliente.
Como criar uma página de destino? É errado acreditar que a resposta está na capacidade de composição. Uma boa página de destino é o resultado de um trabalho bem coordenado de metas, texto, design e código. As páginas de destino, cujos exemplos serão apresentados a seguir, ajudarão os iniciantes a aprender o básico para trabalhar com layout, mas não substituirão os textos de conversão e a compreensão do público-alvo. Você também pode criá-los usando vários Página de destino dos construtores.
Portanto, antes de criar uma página de destino, pergunte-se:
Você precisa oferecer todas as informações de que precisa, mas não o suficiente para sobrecarregar e afastar um cliente em potencial.
Antes de começarmos, vamos dar uma olhada rápida em HTML e CSS. Entender como eles funcionam ajudará você a criar uma página de destino.
Html- linguagem de marcação do navegador para visualização do site. Escrito usando tags entre colchetes angulares que definem o conteúdo.
A tag abre (<>) e fecha () em torno do recheio:
<тег>contenteтег>
Para um ajuste preciso, os seguintes atributos são adicionados após o nome:
<тег атрибут="значение">contenteтег>
CSS - define como organizar os elementos HTML. Consiste em seletores, propriedades e valores:
# seletor (propriedade: valor;)
O seletor corresponde ao nome de uma tag específica em html. Alterando valores e adicionando propriedades, sua aparência é regulada. Você pode criar páginas diferentes aplicando estilos CSS diferentes ao mesmo HTML.
Para um layout rápido, usaremos um modelo com design mínimo baseado em bootstrap. É um sistema com seletores próprios, utilizado em todo o mundo para agilizar o layout.
Parece modesto.
Um site para todos os gostos é criado a partir deste peixe em várias etapas.
Estrutura do diretório na pasta:
Etapa 1: usando o cabeçalho
O título e os subtítulos são pontos-chave para ajudar a comunicar claramente o valor da proposta.
Vamos mudar o título e o nome do site. Aqui, a capacidade de composição não é necessária - seu texto é escrito nos locais destacados em amarelo na tela.
Passo 2. A brevidade é irmã da conversão. Adicionando benefícios e taxas
Isso levará 4 seções:
Vamos projetar a seção “principal” do conteúdo principal, na qual inseriremos as seções necessárias:
…..
…..
…..
…..
Preencha com preenchimento em vez de pontos.
A seção de benefícios exigirá este código:
Vantagens
Sed diam nonummy
Elit, sed diam nonummy
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
Lorem ipsum dolor sit amet, consectetuer adipiscing
Lorem ipsum dolor sit amet, consectetuer adipiscing
Lorem ipsum dolor sit amet, consectetuer adipiscing
Conteúdo para maior clareza:
Embora pareça desleixado, mas não há motivo para pânico, continuamos.
Nós prescrevemos os preços. O conteúdo muda da mesma forma que na primeira etapa. Descrição geral com classe “tarifas” e três tarifas.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercício ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Planos tarifários
por mês / por pessoa
por mês / por pessoa
por mês / por pessoa
Parece que sim.
Embora não estejamos interessados na aparência da futura página de destino - consideraremos exemplos de alteração de estilos a seguir.
Etapa 3: Sinais de confiança e apelo à ação
O uso de sinais direcionados indica aos visitantes que a marca é confiável. Os sinais podem assumir várias formas, mas os clássicos são avaliações de clientes.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercício ullamco laboris nisi ut aliquip ex ea commodo:
Opinião dos consumidores
“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercício ullamco laboris nisi ut aliquip ex ea commodo. "
“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercício ullamco laboris nisi ut aliquip ex ea commodo. "
Vamos configurar uma chamada à ação.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercício ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat:
Beneficie-se ao fazer o pedido hoje
As avaliações ajudarão os clientes em potencial a tomar a decisão de comprar um produto. Para maior clareza, precisamos de avatares, então iremos escrevê-los imediatamente - abaixo de cada citação.
Nome do cliente.
Etapa 4: integração de rede e compatibilidade com dispositivos móveis
Para injetar a grade, precisamos de contêineres Bootstrap. É importante lembrar o número total de segmentos de coluna permitidos - 12. A classe determina a largura da exibição do conteúdo. A vantagem dessa grade pronta é que os contêineres são projetados com capacidade de resposta em mente e são imediatamente aplicáveis a dispositivos móveis. Descrição detalhada no site oficial. A grade é assim.
Vamos embrulhar o conteúdo de “principal” em um contêiner. Para fazer isso, está escrito na parte superior:
Se você quiser que o bloco se ajuste a toda a largura da tela, o contêiner é inserido dentro. Aqui será um jambotron e um apelo à ação.
Envolvemos todos os elementos que requerem posicionamento um acima do outro com separadores de linha.
Agora podemos ajustar a largura das colunas, com foco na grade de bootstrap. Depois de embrulhar, o recheio parou de grudar nas bordas da tela e apareceram recortes perfeitos.
Definimos os preços em uma linha usando a classe de coluna col-lg-4. Dentro das linhas da linha, não é mais necessário escrever divas separadas para embrulhar, você pode combiná-las com as existentes separadas por um espaço.
Por analogia, configuramos colunas para a seção de avaliações e benefícios. Se você quiser mover um elemento para o lado, use a classe de coluna de deslocamento col-lg-offset-2. O número no final determina quantas colunas de base o deslocamento levará.
Etapa 5. Fontes e ícones
Implementaremos fontes para cabeçalhos de fontes do Google. Ao selecionar, abra a guia de importação e copie os dados dela para o arquivo main.css. Também adicionamos seletores de cabeçalho ao arquivo, para o qual a nova fonte é aplicada.
@import "https://fonts.googleapis.com/css?family=Roboto+Condensed" / * importação de fonte para cabeçalhos * /
marca .navbar,
h1,
h2,
h3,
h4,
h5,
h6 (
família de fontes: "Roboto Condensed", sem serifa; / * Saída Googlephone * /
}
Para maior clareza, uma classe com um nome autoexplicativo text-center e ícones FontAwesome do conjunto de bootstrap são registrados.
Isso completa a preparação.
Usamos os três tipos mais populares: com uma proposta, um formulário e com um contador regressivo. Conforme você digita, o modelo é complementado por efeitos.
Defina o plano de fundo do corpo principal e o preenchimento para cobrir a primeira tela.
Jumbotron (
plano de fundo: # f5f5f5 url (../ img / fon.jpg) superior central sem repetição;
largura máxima: 100%;
acolchoamento superior: 250px;
padding-bottom: 200px;
alinhamento de texto: centro;
}
Redimensione a cabeça do jambotron de h2 para h1. Em seguida, escrevemos os estilos para os elementos que precisam ser alterados.
Vamos começar com os ícones.
Benefícios i (
cor: # cac4c4;
}
Uma cor é especificada após o sinal de hash. Você pode escolher sua opção usando tabelas de cores html ou um editor de imagens.
Recuo para cabeçalhos de seção
seção h2 (
acolchoamento superior: 30px;
margin-bottom: 25px;
}
Estamos pondo em ordem o surgimento das tarifas. Por conveniência, criamos nossas próprias classes para os elementos que queremos destacar pontualmente.
por mês / por pessoa
E muito CSS. Os locais pelos quais os sites são responsáveis estão especificados nos comentários - / * entre barras com um asterisco * /
/ * ========= Estilos de Tarif ======== * /
/ * visão geral da tarifa * /
.pricing_item (
plano de fundo: # f2f2f2;
posição: relativa;
exibir: -webkit-flex;
display: flex;
direção flexível: coluna;
alinhar-itens: esticar;
alinhamento de texto: centro;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
preenchimento: 2em 3em;
margem: 1em;
cor: # 262b38;
cursor: padrão;
estouro: oculto;
}
/ * muda o fundo quando pressionado * /
.pricing_item: hover (
cor: # 444;
plano de fundo: #daebef;
}
/ * underlay individual da etiqueta de preço em cada tarifa * /
.pricing_item: primeiro filho .price (
plano de fundo: # 9ba9b5;
}
.pricing_item: n-ésimo filho (2) .price (
plano de fundo: # 1f6098;
}
/ * em telas amplas, preenchendo e destacando a coluna do meio da tarifa * /
tela @media e (largura mínima: 66.250em) (
.pricing_item (
margem: 1,5em 0;
}
.apresentou (
índice z: 10;
margem: 0;
tamanho da fonte: 1.15em;
}
}
/ * header * /
.pricing_item h3 (
tamanho da fonte: 2em;
margem: 0,5em 0 0;
cor: # 1d211f;
}
/ * label underlay * /
.preço (
tamanho da fonte: 2em;
intensidade da fonte: Negrito;
cor: #fff;
posição: relativa;
índice z: 100;
altura da linha: 95px;
largura: 100px;
altura: 100px;
margem: 1.15em auto 1em;
raio da borda: 50%;
plano de fundo: # 77a5cc;
-webkit-transição: cor 0.3s, fundo 0.3s;
transição: cor 0.3s, fundo 0.3s;
}
/* moeda */
.moeda (
tamanho da fonte: 0,5em;
alinhamento vertical: super;
}
/ * clarificação da cláusula * /
.frase (
intensidade da fonte: Negrito;
margem: 0 0 1em 0;
preenchimento: 0 0 0,5em;
cor: # 2a6496;
}
/* Lista */
.pricing_item ul (
tamanho da fonte: 0,95em;
margem: 0;
preenchimento: 1,5em 0,5em 2,5em;
alinhamento de texto: esquerda;
}
/ * lista de itens * /
.pricing_item li (
preenchimento: 0,15em 0;
}
/ * botão de ordem de taxa * /
botão .pricing_item (
intensidade da fonte: Negrito;
margem superior: automático;
preenchimento: 1em 2em;
cor: #fff;
raio da borda: 5px;
plano de fundo: # 428bca;
-webkit-transição: cor de fundo 0.3s;
transição: cor de fundo 0.3s;
}
/ * mudança de cor quando o botão é pressionado * /
botão .pricing_item: passar o mouse,
botão .pricing_item: focus (
cor de fundo: # 285e8e;
}
/ * contexto tarifário * /
.bg-2 (
plano de fundo: #dddddd;
}
Resultado
Opinião dos consumidores. Vamos dar uma olhada nítida, designar o local.
/ * ========= Estilos de depoimentos ======== * /
depoimentos (
preenchimento: 4em 0;
alinhamento de texto: centro;
}
.testimonials .avatar img (
raio da borda: 50%;
flutuar: esquerda;
display: embutido;
margem direita: 1em;
largura: 65px;
altura: 65px;
margin-bottom: 30px;
}
.testimonials .avatar p (
alinhamento de texto: esquerda;
acolchoamento superior: 1em;
cor: # 5d5d5d;
peso da fonte: 900;
}
Resta apenas decorar a chamada final e o rodapé.
/ * Açao * /
.açao (
plano de fundo: # 476177;
altura mínima: 180px;
largura: 100%;
preenchimento: 4em 0;
alinhamento de texto: centro;
}
.action h2 (
cor: #fff;
peso da fonte: 300;
}
.action p (
cor: #fff;
sombra do texto: 0 1px 2px rgba (0, 0, 0, .2);
tamanho da fonte: 1,2em;
}
.action .container (
margem superior: 3em;
}
/ * Rodapé * /
rodapé (
plano de fundo: # 333333;
preenchimento: 1em 0;
alinhamento de texto: direita;
}
rodapé p (
cor: #fff;
altura da linha: 1;
transformação de texto: maiúsculas;
tamanho da fonte: 0.7em;
margem superior: 0,5em;
}
O botão de rodapé foi atribuído à classe de bootstrap embutida btn-default.
Revivendo o modelo. Apresentaremos uma rolagem suave e botões para seções, bem como animação de texto na primeira tela.
Para fazer as transições funcionarem, substituiremos algumas das classes de seção por id - para benefícios e tarifas. E vamos atribuir links para o id aos botões. Tela - o que é anexado ao que é destacado com um marcador amarelo.
Defina o preenchimento dos botões - jbutton. Rolar quando pressionado funciona, mas de forma muito abrupta.
Transições suaves são criadas usando javascript ou jquery. O último é conectado por padrão aos modelos Bootstrap.
A rolagem agora é suave.
Adicionando animação ao texto usando Animate.css ( https://raw.githubusercontent.com/daneden/animate.css/master/animate.css) Este é um código aberto pronto para uso, que pode ser usado em qualquer site. Coloque o arquivo do github na pasta css e escreva o caminho.
Selecionamos os efeitos aqui: https://daneden.github.io/animate.css/... Selecionamos fadeInDown. É explicado no código assim:
Agora, ao carregar ou atualizar a página, o texto será animado. Preparar.
Quanto mais campos de formulário forem oferecidos a um visitante, menor será a probabilidade de ele os preencher. Peça apenas as informações mínimas de que você precisa.
Coletado por analogia. Vamos mudar os planos de fundo e as cores. E, claro, vamos adicionar a forma.
Vamos começar com paralaxe .
Altere o fundo do jumbotron para transparente:
fundo: transparente;
Dentro do cabeçalho iremos inserir o script:
A primeira linha do corpo é o contêiner para a paralaxe:
E em CSS, seu comportamento é:
Bgparallax (
fundo: url (/../ img / fon.jpg) repetir;
posição: fixa;
largura: 100%;
altura: 300%;
topo: 0;
esquerda: 0;
índice z: -1;
}
Parallax está pronto. Mas fazer alterações no código e no novo plano de fundo exige a reatribuição do esquema de cores.
Para escurecer o menu:
Navbar-default (
cor de fundo: # 333;
cor da borda: # 444;
cor: cinza escuro;
raio da borda: 0;
}
Navbar-default .navbar-nav> .active> a, .navbar-default .navbar-nav> .active> a: hover, .navbar-default .navbar-nav> .active> a: focus (
cor: cinza escuro;
cor de fundo: rgba (0, 0, 0, 0,5);
}
Substituímos a frase em jumbotron por uma nova - com o código do formulário:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.
E nós prescrevemos a aparência
/ * Formato * /
.headform-list (
tipo de estilo de lista: nenhum;
altura da linha: 26px;
peso da fonte: 400;
preenchimento: 0px;
margin-bottom: 40px;
}
.headform (
estouro: oculto;
posição: relativa;
cor de fundo: rgba (0,0,0, .4);
preenchimento: 35px 40px;
raio da borda: 8px;
}
entrada, botão, selecionar, área de texto (
largura: 100%;
margin-bottom: 10px;
}
.headform-list li .fa (
posição: absoluta;
topo: 0px;
esquerda: 0px;
largura: 42px;
tamanho da fonte: 24px;
alinhamento de texto: centro;
}
.headform-list li (
posição: relativa;
altura mínima: 38px;
padding-left: 62px;
margin-bottom: 20px;
}
.jumbotron p (
cor: #fff;
tamanho da fonte: 16px;
estilo da fonte: itálico;
}
O texto do Jambotron também chegou aqui, pois exigiu modificações.
Nós recolorimos as tarifas.
/ * visão geral da tarifa * /
.pricing_item (
cor de fundo: rgba (0,0,0, .4); / * linha alterada * /
raio da borda: 4px; / * linha alterada * /
posição: relativa;
exibir: -webkit-flex;
display: flex;
-webkit-flex-direction: coluna;
direção flexível: coluna;
-webkit-align-items: stretch;
alinhar-itens: esticar;
alinhamento de texto: centro;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
preenchimento: 2em 3em;
margem: 1em;
cor: # f2f2f2; / * linha alterada * /
cursor: padrão;
estouro: oculto;
sombra da caixa: 0 0 15px rgba (0, 0, 0, 0,05);
}
/ * muda o fundo quando pressionado * /
.pricing_item: hover (
cor: # 444;
plano de fundo: #ddd; / * linha alterada * /
}
Agora eles se parecem com isto - fundo transparente e cantos arredondados.
O modelo está pronto.
Mude o preenchimento do jambotron novamente e recolorir o modelo para coincidir com o novo fundo por analogia com o modelo anterior. Conectamos o script do contador:
Html
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.
No arquivo de estilo, remova o raio inferior da forma e ajuste o botão.
Além disso, o menu foi redesenhado para o novo fundo e o estilo dos textos no jambotron foi alterado - por analogia com o exemplo anterior. Resultado.
Parte inferior
Isso completa os exemplos da página de destino, mas o código requer trabalho adicional.
A página de destino precisa ser rápida e boa como uma Ferrari - os tempos de carregamento da página têm um grande impacto nas taxas de rejeição. Otimize imagens, minimize o tamanho de scripts e estilos finalizados para obter a máxima eficiência.
A lição fornece exemplos de criação de boas páginas de destino que o ajudarão a trazer clientes reais e você aprenderá algo novo. Gostamos e repassamos. Vejo você em breve.
Para baixar todas as fontes apresentadas na lição na forma de páginas prontas, clique em um dos botões castelo social para abri-lo e obter um link.
Respeitosamente seu, Galiulin Ruslan.
Artigos relacionados: | |
Principais páginas de destino de esportes
A página de destino de fitness é uma ótima solução se você precisa atrair novos ... Onde baixar ícones para pastas e como instalá-los
Muitos usuários prestam atenção especial à personalização de seus ... Regras do VKontakte Regras de uso da rede social VKontakte
Qualquer recurso ou fórum na Internet tem suas próprias regras. Eles são necessários ... |