Un sitio web de una página es conveniente para los empresarios porque se puede hacer literalmente en un día. si un descargar plantilla de sitio web de una página en forma terminada, entonces puede hacer un sitio web para su empresa por un monto mínimo, ya que solo tiene que pagar el alojamiento. Para un cliente, una sola página es conveniente porque toda la información en ella se presenta de la manera más concisa y estructurada posible, no hay nada superfluo. Debido a la comodidad del cliente, los one-pages a menudo muestran conversiones más altas que otros tipos de sitios.
Si decides hacer por tu empresa Página de destino, descargar plantilla puede estar en nuestro sitio web. Revisamos cuidadosamente todas las plantillas en busca de virus, por lo que no puede tener miedo de descargar un archivo infectado. Todos plantillas de página de aterrizaje en nuestro catálogo cuentan con un diseño moderno, elaborados en una variedad de estilos. La capacidad de ajustar la cantidad de bloques, cambiar el esquema de colores y otras características lo ayudarán a crear un sitio original único basado en una plantilla simple.
El principal problema de quienes decidieron descargar plantilla de página de destino gratuita, es una gran cantidad de virus y errores en las plantillas gratuitas. Por lo tanto, es muy importante encontrar un sitio seguro y confiable. Lo invitamos a visitarnos, ya que supervisamos cuidadosamente la seguridad. Además, te deleitaremos con la más amplia gama Plantillas HTML de una página, descargar que puedes ahora mismo!
Leer más texto...Se necesitan plantillas de página de destino preparadas para lanzar rápidamente un nuevo producto, promocionarlo mediante una página de LP o una aplicación móvil, o motivar a los usuarios a registrarse/suscribirse a un boletín informativo. Para una "página de destino", la usabilidad y la facilidad de uso con un diseño inteligente son extremadamente importantes. Las plantillas de página de destino de venta modernas se desarrollan con la vista puesta en la posibilidad de crear un sitio web adaptable con alta conversión.
Tema HTML5 ultramoderno impulsado por Bootstrap 3.1.1. Viene con 4 diseños: uno/múltiples paginadores, opciones de barra de navegación. Un ligero efecto de desplazamiento de paralaje está integrado en el tema de aterrizaje adaptado para tráfico móvil y orgánico (SEO).
Plantilla de página de destino html para web y aplicaciones móviles, está dirigido a la fácil generación de prospectos. Tiene carga rápida y código html, css válido. En la parte superior de la página, el formulario de contacto con .
Plantilla de página de destino HTML5 de una página con efectos CSS3. Tiene un marco de tres columnas, basado en Bootstrap 3. Adecuado para vender aplicaciones de iOS/Android. La plantilla incluye 2 diseños (con y sin Parallax), formularios de contacto Ajax, caja de luz PrettyPhoto y 5 esquemas de color. Fácil de configurar: cambie los códigos hexadecimales y los elementos relacionados se pintarán en un nuevo color. PSD incluido.
Una plantilla de aplicación móvil moderna lista para Retina que ofrece 8 opciones de color, opciones para imágenes / .
La plantilla de página de destino de estilo plano multipropósito viene con 3 opciones de índice, 6 esquemas de color. Plantilla creada en twitter bootstrap3, incluida secuencia de comandos PHP formularios de contacto y descargas.
Slander es ideal para startups y empresas, adecuado para profesionales o proyectos individuales. Incluye diseño responsive con Bootstrap y HTML5/CSS3 control deslizante adaptativo, control deslizante de pestañas, formulario de suscripción a noticias, etc.
Plantilla de página de destino HTML5 / CSS3 elegante, limpia y minimalista con gran funcionalidad. La plantilla está diseñada para la página Próximamente (próximamente), ideal para crear una página de aplicación y un sitio de exhibición.
Plantilla de aterrizaje sensible para especial eventos. Tiene secciones bajo, video comercial, agenda de eventos, lista de invitados.
» Plantillas gratuitas de página de destino de WordPress - TOP 30
Específicamente, este artículo analizará las mejores plantillas de aterrizaje de WordPress que pueden ser adecuadas para usted. Todos incluirán una captura de pantalla y una demostración del diseño para que puedas calificar el tema y descargarlo de inmediato si te gusta.
Muy a menudo, las plantillas de aterrizaje para WordPress se distribuyen por una tarifa, pero he recopilado para usted mejor y gratis en este artículo para facilitar su búsqueda.
es un tema de una página que te ayudará a crear un sitio web sin esfuerzo. Por otro lado, tiene un diseño dibujado profesionalmente, desplazamiento de paralaje, lo que le permite llamar a este tema "hermoso". Esta plantilla es adecuada para nuevas empresas y pequeñas empresas.
es un tema de WordPress multifuncional. Incluye una interfaz colorida, un efecto de paralaje clásico y otras animaciones que hacen que navegar por el tema sea aún más agradable. Zerif Lite es un tema de navegador cruzado que está muy bien escrito en términos de código.
Alhena Lite es un tema gratuito de WordPress que está completamente integrado con el complemento WooCommerce para que pueda configurar fácilmente su tienda en línea.
es un tema de negocios limpio y simple que responde completamente e incluye muchas de las características populares para crear fácilmente un sitio web.
Palmas es un tema moderno en colores claros adecuado para blogs personales o de moda. Esta plantilla también admite complementos como Yoast SEO, GravityForms, Pirate Forms, W3 Total Cache y muchos más.
Brasserie es un tema simple de WordPress que es ideal para un restaurante, cafetería o sitio de comida. Incluye efectos de animación, así como una gran cantidad de funcionales.
XT Corporate lite es un tema simple y minimalista adecuado para un producto o servicio pequeño.
- Este es un buen tema, hecho en colores claros. Incluye diferentes animaciones y transiciones visualmente geniales y efecto de paralaje. Además, Freesia Empire admite complementos como Breadcrumb NavXT, WP-PageNavi, Contact Form 7, Jetpack de WordPress.com, Polylang, Newsletter, bbPress y WooCommerce.
- Este es un tema que es adecuado para la presentación de pequeñas o medianas empresas. Incluye una gran cantidad de características y complementos para un control completo de la estructura de descanso.
- Este es un tema versátil, con mucha funcionalidad. Es responsivo, todos los elementos están animados con efecto de paralaje. Una página es fácilmente personalizable y le permite ver los cambios en tiempo real. El tema de aterrizaje actual también admite una gran cantidad de complementos básicos de WordPress.
FotoGraphy es una página de destino adecuada para fotógrafos o diseñadores. La simplicidad y la presencia de una gran cantidad de funciones lo hacen aún más escalable y personalizable.
Integral Theme es un tema de paralaje de una página adecuado para creativos, dueños de negocios o agentes. Solo te llevará un par de minutos configurarlo.
Square es un tema minimalista que se puede utilizar para cualquier tipo de sitio web. Es el más adecuado para pequeñas y medianas empresas. Square está configurado para muchos complementos populares de WordPress y está optimizado para SEO.
Enliven es un tema de ejecución de calidad. Yo lo llamaría premium, ya que combina calidad y belleza en una sola botella. También es compatible con muchos complementos populares y es altamente personalizable.
Latte es una plantilla para fotógrafos. Lo tiene todo para que puedas mostrar adecuadamente tu portafolio, así como hablar de ti. La configuración requiere un par de clics.
El lunes es un tema elegante adecuado para un negocio o autónomo. Viene con una gran cantidad de características y complementos y complementos.
Business World es una plantilla que está relacionada con temas de negocios. Combina estilo y calidad. Business world también se puede personalizar para un sitio web personal, corporativo o de fotógrafo. Sus capacidades te permiten hacer casi cualquier cosa que quieras con él.
- Este es un tema agradable, que está hecho en colores brillantes. Es perfecto para pequeñas y medianas empresas, así como para un sitio web personal. Se puede personalizar a lo que quieras. Muchas características y adiciones que hacen que esta plantilla sea aún mejor y más atractiva.
Onetone es una plantilla de una página para WordPress que es adecuada para presentar "yo" en Internet (muestra tu cartera y / o habla sobre ti).
Arise es un tema de WordPress minimalista de una página que es adecuado para un producto pequeño o una pequeña empresa. No hay nada superfluo en él, solo todo lo más importante.
Woot es un tema minimalista diseñado en colores oscuros que ejecuta una tienda en línea. Funciona con WooCommerce y muchos otros complementos populares.
West es un tema simple adecuado para un sitio web de agencia, pequeña empresa o cartera. Incluye una gran cantidad de funciones, configuraciones y arreglos de elementos.
Anaglyph Lite es una plantilla simple y elegante adecuada para blogs y tiendas en línea. Ya tiene WooCommerce y otros complementos populares configurados.
es un bonito tema hecho en colores oscuros combinados con elementos de colores, que es adecuado para presentar su negocio, cartera o producto. Después de seguir el enlace, haga clic en "Descargar ahora" en el bloque BeOnePage Lite y descargará versión gratuita este tema.
es una plantilla de una página que se incluye en la categoría: fitness, yoga, pilates, gimnasio, entre muchas otras. etc. El estilo está hecho en colores oscuros, navegador cruzado, adaptable y funciona en todos los dispositivos.
Aglee Lite es una plantilla corporativa simple en gris claro y azul. Este tema es perfecto para una empresa nueva o pequeña.
es un tema de negocios poderoso y funcional. Tiene un práctico editor que le permite ver los cambios en tiempo real. Wimpie Lite es multinavegador, sensible y fácil de cargar páginas.
es un tema multipropósito de WordPress que está hecho en colores claros y es adecuado para un sitio web comercial, una cartera personal o un blog.
Tema Página de destino desgastado hasta los agujeros. Aunque el auge de las páginas de destino ha disminuido un poco, las páginas de destino todavía tienen demanda. Los lanzan todos y cada uno, incluso si para sus nichos en el negocio esto es claramente un acto perdedor. Algunos lo hacen solo para jugar, otros lo hacen para ganar dinero. Pero no es tan importante qué objetivos persigues, lo importante es que todos necesitarán desarrollar una página. Alguien pedirá a profesionales y alguien, por una u otra razón, comenzará a crear su propia página de destino. Es a estos últimos a los que está dedicada esta colección.
Gente que decide crear un sitio web usted mismo, pueden comenzar el desarrollo desde cero, o pueden usar los ya preparados, porque no requieren conocimientos especiales en el desarrollo. Los conocimientos básicos de HTML y CSS, los que se enseñan en la escuela, son suficientes. Aquí nuevamente surge la pregunta. ¿Usar de pago o gratis? Por supuesto, el pago será de mucha mejor calidad y probablemente mostrará conversiones más altas. Libre será menos hermoso, menos desarrollado en términos de marketing, diseño y diseño.
Esta colección consta de gratis en HTML puro para Creación de aterrizaje Página. Inicialmente, la selección constaba de 40 posiciones, pero cuando me desperté por la mañana y miré estas plantillas con una mirada nueva, decidí eliminar la mayoría de ellas, ya que, francamente, era basura, y hay tanta basura en La Internet. Solo quedan las plantillas más valiosas, en las que al menos puedes construir algo. La colección incluye plantillas de página de destino diferentes temas, pero, por alguna razón, predominan los LP para aplicaciones móviles. Resultó ser de la más alta calidad.
Anteriormente, ya hicimos selecciones de plantillas de página de destino gratuitas. Se adaptaron a un tema específico. Esta vez decidí hacer un tema de colección que no pertenece a ninguna dirección.
Otras colecciones de plantillas de página de destino HTML gratuitas:
De paso. Si por alguna razón desea extraer estas plantillas en el motor de Wordpress, entonces, sobre este tema, una vez hice una selección de complementos para crear una página de destino en Wordpress. Puedes intentar usarlos. Podría ahorrar mucho tiempo. Aunque, personalmente, no veo mucho sentido en hacer esto, ya que HTML puro es suficiente para un LP simple.
Asi que. Para su atención, 20 plantillas de página de destino HTML gratuitas.
Saludos, mis queridos lectores. Hoy hablaremos de puntos técnicos con los que podemos aumentar conversión de ventas sus bienes o servicios. Uno de los puntos importantes es una página de destino bien diseñada con productos. La llamada página de destino, sobre cuya creación hablaremos más y obtendremos códigos de página listos para usar.
¿Qué es una página de destino? Esta es la página a la que la gente suele llegar después de hacer clic en un anuncio. Se crea para una oferta: producto, servicio o suscripción. Una página de destino efectiva es la piedra angular del marketing en línea exitoso. El producto puede ser el mejor del mercado, los anuncios se llevan a la perfección, pero sin una buena landing page, los esfuerzos no dan un resultado al 100%. Les dice a los visitantes qué se ofrece y por qué deberían quererlo. Un sentido de urgencia contribuye a la rápida toma de decisiones y la transición del usuario a la categoría del cliente.
¿Cómo crear un Landing? Es un error creer que la respuesta se encuentra en la capacidad de composición tipográfica. Una buena landing page es el resultado de un trabajo bien coordinado de objetivos, texto, diseño y código. La página de destino, cuyos ejemplos se encuentran a continuación, ayudará a los principiantes a aprender los conceptos básicos para trabajar con el diseño, pero no reemplazará los textos de conversión y la comprensión de la audiencia objetivo. También puedes crearlos con varios diseñadores de páginas de destino.
Entonces, antes de crear una página de destino, pregúntese:
Debes ofrecer toda la información necesaria, pero no tanto como para abrumar y ahuyentar a un cliente potencial.
Antes de ponernos manos a la obra, echemos un vistazo rápido a HTML y CSS. Comprender cómo funcionan ayudará a crear un aterrizaje.
HTML- lenguaje de marcado del navegador para la visualización de sitios. Está escrito usando etiquetas encerradas entre paréntesis angulares que definen el contenido.
Se abre la etiqueta (<>) y cierra () alrededor del relleno:
<тег>contenidoтег>
Para la personalización de puntos, los atributos se agregan después del nombre:
<тег атрибут="значение">contenidoтег>
CSS: define cómo diseñar elementos HTML. Consta de selectores, propiedades y valores:
#selector (propiedad: valor;)
El selector coincide con el nombre de una etiqueta específica en html. Al cambiar valores y agregar propiedades, se regula apariencia. Puede crear diferentes páginas aplicando diferentes estilos CSS al mismo HTML.
Para un diseño rápido, usaremos una plantilla con un diseño mínimo basado en bootstrap. Se trata de un sistema con sus propios selectores, que se utiliza en todo el mundo para agilizar el trazado.
Parece modesto.
Se crea un sitio para todos los gustos a partir de este pez en varias etapas.
Estructura de directorios en una carpeta:
Paso 1: usar el encabezado
El título y los subtítulos son lugares clave para ayudar a comunicar el valor de la oferta de manera clara.
Cambia el título y el nombre del sitio. Aquí, no se requiere la capacidad de composición tipográfica: su texto se escribe en los lugares resaltados en amarillo en la pantalla.
Paso 2. La brevedad es hermana de la conversión. Adición de beneficios y tarifas
Necesitarás 4 secciones:
Diseñemos la sección "principal" del contenido principal, en la que insertaremos las secciones necesarias:
…..
…..
…..
…..
Rellene con relleno en lugar de puntos.
La sección de beneficios requerirá este código:
Ventajas
Sed diam no-nomia
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
Contenido visual:
Hasta aquí se ve descuidado, pero no hay razón para entrar en pánico, continuamos.
Anota las tarifas. El contenido cambia de forma similar al primer paso. Descripción general con clase “tarifas” y tres 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 exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
planes tarifarios
por mes/por persona
por mes/por persona
por mes/por persona
Tiene este aspecto.
Si bien no estamos interesados en la apariencia de la futura página de destino, consideraremos ejemplos de cambios de estilo a continuación.
Paso 3: Señales de confianza y llamada a la acción
El uso de señales de destino indica a los visitantes que la marca es confiable. Las señales pueden tomar muchas formas, pero las clásicas son las reseñas de los 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 exercitation ullamco laboris nisi ut aliquip ex ea commodo:
Valoración de los 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 exercitation 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 exercitation ullamco laboris nisi ut aliquip ex ea commodo.
Configure una llamada a la acción.
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 exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat:
Beneficio al ordenar hoy
Las reseñas ayudan a los clientes potenciales a decidir comprar un producto. Para mayor claridad, necesitamos avatares, por lo que los escribiremos inmediatamente en su lugar, debajo de cada cita.
Nombre del cliente.
Paso 4: integración de red y compatibilidad con dispositivos móviles
Para implementar la cuadrícula, necesitamos contenedores Bootstrap. Es importante recordar que el número total de segmentos de columna permitidos es 12. La clase determina el ancho de visualización del contenido. La ventaja de esta cuadrícula prefabricada es que los contenedores están diseñados teniendo en cuenta la adaptabilidad y son inmediatamente aplicables a dispositivos móviles. Descripción detallada en el sitio web oficial. La red se ve así.
El contenido de "principal" se envolverá en un contenedor. Para ello, en su parte superior está escrito:
Si desea que el bloque se ajuste a todo el ancho de la pantalla, se inserta un contenedor en el interior. Aquí será un jumbotron y un llamado a la acción.
Todos los elementos que deben apilarse uno encima del otro se envolverán con separadores de línea.
Ahora podemos ajustar el ancho de las columnas, centrándonos en la cuadrícula de arranque. Después de envolver, el relleno dejó de adherirse a los bordes de la pantalla, aparecieron muescas ordenadas.
Establezca los precios en una fila usando la clase de columna col-lg-4. Dentro de las filas, ya no es necesario escribir divs separados para envolver, puedes combinarlos con los existentes separados por un espacio.
Por analogía, establecemos columnas para la sección de reseñas y beneficios. Si desea mover el elemento hacia un lado, use la clase de columna de compensación col-lg-offset-2. El número al final determina cuántas columnas base se desplazarán.
Paso 5. Fuentes e Iconos
Implementamos tipografías para encabezados de Google Font. Cuando esté seleccionado, abra la pestaña de importación y copie los datos al archivo main.css. También agregamos selectores de encabezado al archivo, para los cuales se aplica la nueva fuente.
@import "https://fonts.googleapis.com/css?family=Roboto+Condensed" /* importar fuente para encabezados */
.navbar-marca,
h1,
h2,
h3,
h4,
h5,
h6(
familia de fuentes: "Roboto Condensed", sans-serif; /* Salida de fuentes de Google */
}
Para mayor claridad, las ventajas son una clase con el centro de texto del nombre hablado y los íconos FontAwesome del conjunto de arranque.
Esto completa la preparación.
Utilizamos los tres tipos más populares: con oferta, con formulario y con cuenta atrás. A medida que se complete el diseño, la plantilla se complementará con efectos.
Establezca el fondo del cuerpo principal y el relleno para que la primera pantalla quede cubierta.
Jumbotrón (
fondo: #f5f5f5 url(../img/fon.jpg) centro superior sin repetición;
ancho máximo: 100%
acolchado superior: 250px;
parte inferior del relleno: 200px
alineación de texto: centro;
}
Cambie el tamaño del título jumbotron de h2 a h1. A continuación, prescribimos los estilos para los elementos que deben cambiarse.
Comencemos con los iconos.
Beneficios i(
color: #cac4c4;
}
Se especifica un color después del signo de libra. Puede elegir su propia opción utilizando tablas de colores html o un editor de imágenes.
Sangría para encabezados de sección
sección h2 (
acolchado superior: 30px;
margen inferior: 25px;
}
Ponemos en orden la aparición de aranceles. Por conveniencia, creamos nuestras propias clases para los elementos que queremos seleccionar por puntos.
por mes/por persona
Y mucho CSS. De qué lugares son responsables las secciones, está escrito en los comentarios - /* entre barras con un asterisco */
/* =========Tarif estilos======== */
/* vista general de la tarifa */
.precio_artículo(
fondo: #f2f2f2;
posición: relativa;
pantalla: -webkit-flex;
pantalla:flex;
dirección de flexión: columna;
alinear elementos: estirar;
alineación de texto: centro;
-webkit-flex: 0 1 330px;
flexión: 0 1 330px;
relleno: 2em 3em;
margen: 1em
color: #262b38;
cursor: predeterminado;
desbordamiento: oculto;
}
/* cambiar el fondo al hacer clic */
.precio_artículo: pasar el cursor (
color: #444;
fondo: #daebef;
}
/* etiqueta de precio individual en cada tarifa */
.price_item:primer hijo .price (
fondo: #9ba9b5;
}
.price_item:n-th-child(2) .price (
fondo: #1f6098;
}
/* en pantallas anchas, rellenando y resaltando la columna central de la tarifa */
Pantalla @media y (ancho mínimo: 66.250em) (
.precio_artículo(
margen: 1,5em0;
}
.Destacados(
índice z: 10;
margen: 0;
tamaño de fuente: 1.15em
}
}
/* encabezado */
.precio_artículo h3(
tamaño de fuente: 2em
margen: 0,5em 0 0;
color: #1d211f;
}
/* respaldo de la etiqueta de precio */
.precio(
tamaño de fuente: 2em
fuente-peso: negrita;
color: #fff;
posición: relativa;
índice z: 100;
altura de línea: 95px;
ancho: 100px
altura: 100px;
margen: 1.15em auto 1em;
borde-radio: 50%
fondo: #77a5cc;
-transición webkit: color 0.3s, fondo 0.3s;
transición: color 0.3s, fondo 0.3s;
}
/* divisa */
.divisa(
tamaño de fuente: 0.5em
alineación vertical: súper;
}
/* refinamiento de la oración */
.frase(
fuente-peso: negrita;
margen: 0 0 1em 0;
relleno: 0 0 0.5em;
color: #2a6496;
}
/* lista */
.precio_artículo ul (
tamaño de fuente: 0.95em
margen: 0;
relleno: 1,5 em 0,5 em 2,5 em
alineación de texto: izquierda;
}
/* lista de elementos */
.precio_elemento li(
relleno: 0.15em0;
}
/* boton de orden de tarifas */
Botón .price_item(
fuente-peso: negrita;
margen superior: automático;
relleno: 1em 2em;
color: #fff;
borde-radio: 5px
fondo: #428bca;
-transición de webkit: color de fondo 0.3s;
transición: color de fondo 0,3 s;
}
/* cambia el color al hacer clic en el botón */
botón .price_item: pasar el cursor,
.precio_elemento botón:enfoque(
color de fondo: #285e8e;
}
/* fondo tarifario*/
.bg-2 (
fondo: #dddddd;
}
Resultado
Valoración de los clientes. Démosles un aspecto prolijo, designemos la ubicación.
/* =========Estilos de testimonios======== */
testimonios (
relleno: 4em0;
alineación de texto: centro;
}
.testimonials .avatar img (
borde-radio: 50%
flotador izquierdo;
pantalla: en línea;
margen derecho: 1em;
ancho: 65px
altura: 65px;
margen inferior: 30px;
}
.testimonios .avatar p(
alineación de texto: izquierda;
acolchado superior: 1em;
color: #5d5d5d;
peso de fuente: 900
}
Queda por decorar la última llamada a la acción y el pie de página.
/* Acción */
.acción(
fondo: #476177;
altura mínima: 180px;
ancho: 100%
relleno: 4em0;
alineación de texto: centro;
}
.acción h2(
color: #fff;
peso de fuente: 300
}
.accionp(
color: #fff;
sombra de texto: 0 1px 2px rgba(0, 0, 0, .2);
tamaño de fuente: 1.2em
}
.acción .contenedor(
margen superior: 3em;
}
/* Pie de página */
pie de página(
fondo: #333333;
relleno: 1em0;
alineación de texto: derecha;
}
pie de página p(
color: #fff;
altura de línea: 1;
transformación de texto: mayúsculas;
tamaño de fuente: 0.7em
margen superior: 0,5em;
}
Al botón de pie de página se le asigna la clase de arranque integrada btn-default.
Revivimos la plantilla. Implementaremos desplazamiento suave y botones para secciones, así como animación de texto en la primera pantalla.
Para que las transiciones funcionen, reemplazaremos parte de las clases de sección con id - para beneficios y tarifas. Y escribiremos enlaces a id a los botones. Pantalla: lo que está adjunto a lo que está resaltado con un marcador amarillo.
Establecer sangrías para botones - jbutton. Desplazarse al hacer clic funciona, pero muy abruptamente.
Las transiciones suaves se crean usando javascript o jquery. Este último está conectado a las plantillas de Bootstrap de forma predeterminada.
El desplazamiento ahora es fluido.
Agregar animación al texto con Animate.css ( https://raw.githubusercontent.com/daneden/animate.css/master/animate.css). Este es un código abierto listo para usar, se puede usar en cualquier sitio. Metemos el archivo del github en la carpeta css y escribimos la ruta.
Seleccione los efectos aquí: https://daneden.github.io/animate.css/. Hemos seleccionado fadeInDown. Escrito en código como este:
Ahora, cuando la página se cargue o actualice, el texto se animará. Listo.
Cuantos más campos de formulario se ofrezcan a un visitante, es menos probable que los complete. Solicite solo la información mínima requerida.
reunidos por analogía. Cambiaremos fondos y colores. Y, por supuesto, añadiremos un formulario.
Empecemos con paralaje .
Cambie el fondo jumbotron a transparente:
fondo: transparente;
Inserte el script dentro de la cabeza:
La primera línea en el cuerpo es el contenedor de paralaje:
Y en CSS su comportamiento es:
bgparallax(
fondo: url(/../img/fon.jpg) repetir;
posición: fijo;
ancho: 100%
altura: 300%;
superior: 0;
izquierda: 0;
índice z: -1;
}
El paralaje está listo. Pero hacer cambios en el código y un nuevo fondo requiere reasignar el esquema de color.
Oscurecer el menú:
barra de navegación predeterminada (
color de fondo: #333;
color del borde: #444;
color: gris oscuro;
borde-radio: 0
}
Navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus (
color: gris oscuro;
color de fondo: rgba(0, 0, 0, 0.5);
}
Reemplazamos la oración en jumbotron por una nueva, con el código de formulario:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.
Y prescribir la apariencia
/* forma */
.headform-lista(
tipo-estilo-lista: ninguno;
altura de línea: 26px;
peso de fuente: 400
relleno: 0px
margen inferior: 40px
}
.forma de cabeza(
desbordamiento: oculto;
posición: relativa;
color de fondo: rgba(0,0,0,.4);
relleno: 35px 40px;
borde-radio: 8px
}
entrada, botón, seleccionar, área de texto (
ancho: 100%
margen inferior: 10px;
}
.headform-lista li .fa (
posición: absoluta;
arriba: 0px;
izquierda: 0px;
ancho: 42px
tamaño de fuente: 24px;
alineación de texto: centro;
}
.headform-lista li (
posición: relativa;
altura mínima: 38px;
relleno-izquierda: 62px;
margen inferior: 20px
}
.jumbotronp(
color: #fff;
tamaño de fuente: 16px;
estilo de fuente: cursiva;
}
El texto del jumbotron también vino aquí, ya que requería cambios.
Estamos cambiando las tarifas.
/* vista general de la tarifa */
.precio_artículo(
color de fondo: rgba(0,0,0,.4); /* linea cambiada */
borde-radio: 4px /* linea cambiada */
posición: relativa;
pantalla: -webkit-flex;
pantalla:flex;
-webkit-flex-direction: columna;
dirección de flexión: columna;
-webkit-align-items: estirar;
alinear elementos: estirar;
alineación de texto: centro;
-webkit-flex: 0 1 330px;
flexión: 0 1 330px;
relleno: 2em 3em;
margen: 1em
color: #f2f2f2; /* linea cambiada */
cursor: predeterminado;
desbordamiento: oculto;
sombra de caja: 0 0 15px rgba(0, 0, 0, 0.05);
}
/* cambiar el fondo al hacer clic */
.precio_artículo: pasar el cursor (
color: #444;
fondo: #ddd; /* linea cambiada */
}
Ahora se ven así - fondo transparente y esquinas redondeadas.
La plantilla está lista.
Nuevamente cambiamos el relleno del jumbotron y volvemos a colorear la plantilla para un nuevo fondo, por analogía con la plantilla anterior. Conectamos el script de contador:
HTML
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.
En el archivo de estilo, elimine el radio inferior del formulario, recuerde el botón.
Además, el menú se volvió a colorear con un nuevo fondo y se cambió el estilo de los textos en el jumbotron, por analogía con el ejemplo anterior. Resultado.
Parte inferior
Esto completa los ejemplos de la página de destino, pero el código necesita más trabajo.
Una página de destino debe ser rápida y buena como un Ferrari: el tiempo de carga de la página tiene un gran impacto en las tasas de rebote. Optimice las imágenes, minimice el tamaño de los scripts y estilos listos para usar para obtener la máxima eficiencia.
La lección brinda ejemplos de cómo crear buenas páginas de destino que lo ayudarán a atraer clientes reales y aprenderá algo nuevo. Vamos a darle me gusta y volver a publicar. Te veo pronto.
Para descargar todas las fuentes presentadas en la lección como páginas preparadas, haga clic en uno de los botones castillo sociales para abrirlo y obtener el enlace.
Atentamente, Galiulin Ruslan.