Hermosas plantillas de páginas de destino. Plantillas de página de destino
Hola. Los sitios de una página siguen siendo populares y por una buena razón. Tienen una serie de ventajas en comparación con los sitios de varias páginas completos. En un sitio web de una sola página (también conocido como página de destino), una persona se concentra en una idea, un producto, lo que le permite estudiar su oferta sin distracciones y está más dispuesta a dejar una solicitud.
"Está bien", dices, "decidí crearme una página de destino, pero no entiendo nada sobre programación". Y eso no es un problema. Ahora existen muchas herramientas para crear un sitio web profesional sin tener que profundizar en el código. Uno de ellos es el popular CMS WordPress con el constructor WPBackery o ELementor.
En este artículo, proporcioné interesantes plantillas de páginas de destino de WordPress que son adecuadas para empresas, venta de productos, agencias, autónomos y cualquier otro tema. Después de todo, estas plantillas pueden y deben personalizarse para adaptarse a usted y a su oferta.
Muchas plantillas utilizan detalles de moda, como efectos de paralaje, diseño plano, fotografías y vídeos en pantalla completa. En cada plantilla se incluye adaptación para dispositivos móviles.
¡Basta de discusión, veamos la selección!
PD. Si desea saber con más detalle qué es una página de destino, analicé esta pregunta en detalle y di 27 ejemplos de páginas de destino.
Todas las plantillas se presentan desde la popular tienda en línea ThemeForest. Puedes ver otras colecciones.
Una selección de 40 plantillas premium para crear una página de destino en el CMS WordPress1. PuentePara mí, esta es una plantilla superior porque tiene más de 376 demostraciones sobre diferentes temas. Con esta plantilla podrás transmitir emociones completamente diferentes. Potente e intuitivo.
Este increíble tema tiene un control deslizante personalizable, encabezados totalmente personalizables, mega menús, fondos de video, encabezado fijo o fijo, diferentes logotipos de encabezado, elementos interactivos, 7 diseños de portafolio diferentes y mucho más, lo que permite infinitas posibilidades.
Haz una presentación única de tu producto u oferta. Hay instrucciones visuales en el texto y también instrucciones en vídeo.
Un sistema de plantillas avanzado y único que le permite no sólo crear una página de destino, sino también sin ajustes adicionales intégrelo en el sitio web principal del proyecto. En la plantilla puede encontrar muchos estilos listos para usar para los bloques que tienen demanda en las páginas de destino: presentación del equipo, galería, portafolio. También se encuentran disponibles hermosos efectos de precarga de página.
Por cierto, The7 ya está en mi blog.
Betheme es la plantilla más grande en términos de funcionalidad y cantidad de opciones de diseño preestablecidas. Hoy en día, existen más de 400 páginas de inicio de demostración basadas en este tema, puedes elegir cualquiera y adaptarla a tus necesidades. Las páginas de destino listas para usar en Betheme utilizan activamente:
- efectos de desplazamiento: desde paralaje hasta transformaciones animadas de elementos de diseño
- vídeos de fondo de pantalla completa
- botones "sociales"
- contadores animados
- formularios de solicitud en línea
- secciones de cartera
- sección "Nuestros empleados"
Algunas demostraciones más:
Las actualizaciones de temas se realizan automáticamente, las actualizaciones de complementos se realizan con solo tocar un botón. Los sitios de demostración utilizan Revolution Slider. La plantilla ofrece 5 opciones de diseño de página, 20 encabezados personalizados, una cantidad ilimitada de estilos para mapas de Google y muchos íconos elegantes.
La herramienta Muffin Builder te ayudará a crear cualquier diseño sin ningún conocimiento de desarrollo web. Si lo desea, puede agregar reglas CSS y scripts js sin afectar el código de la plantilla principal.
Ronneby presenta un alto rendimiento y un panel de opciones ampliado. Se han agregado a la plantilla los mejores complementos premium para crear páginas de destino de WordPress. Los desarrolladores de plantillas prestan especial atención a la asistencia al usuario: cualquier pregunta se responde con una respuesta rápida que describe cómo resolver el problema. El tema ya está traducido a dos idiomas, pero también se adjuntan archivos de traducción, lo que le permite organizar el soporte multilingüe para los sitios.
Otro ejemplo de demostración:
Plantilla flexible y al mismo tiempo fácil de personalizar. Incluye 72 de los llamados skins, sobre todos los temas posibles. Administrador conveniente. panel, incluso a un principiante le resultará fácil comprender el creador de páginas y la configuración.
¡Hay tutoriales útiles con 240 páginas y 20 tutoriales en vídeo sobre cómo hacer que su sitio web sea increíble!)
La plantilla Júpiter también está adaptada para SEO. Las pruebas de Google PageSpeed muestran buenos resultados, lo que significa que a los motores de búsqueda les encantará su sitio.
La plantilla es limpia, ordenada y utiliza tipografía de alta calidad. Gracias al uso de efectos visuales, como el paralaje, el tema resulta animado y es muy agradable mirar un sitio así.
Una de las colecciones de WordPress más grandes. Las plantillas están escritas por programadores web profesionales y los diseños son elaborados por especialistas calificados en soluciones visuales y UX. Gracias a esto, podrás instalar cualquier plantilla de forma segura, cada una está lista para usar en tu computadora, teléfono móvil, tableta. Complementos premium incluidos:
Brooklyn tiene 16 máscaras de demostración sobre diferentes temas. El estilo moderno de las páginas, la combinación de imágenes y fuentes agrega elegancia a cualquier sitio donde se instale este tema. El bloque de cartera está bellamente diseñado. La plantilla es perfecta para agencias y empresas comerciales. Las plantillas están realizadas en colores oscuros, lo que da seguridad e inspira confianza. La plantilla responde y se ve muy bien en todos los dispositivos.
Una plantilla fluida y sencilla que no dejará indiferente a nadie. La tipografía de alta calidad y los elementos de la interfaz hacen que esta plantilla luzca magnífica. Nominado y ganador de varios concursos y ratings conocidos, como awwwards. Tiene más de 30+ máscaras de diferentes temas para elegir
No sólo el sitio web, sino también las imágenes están adaptadas para dispositivos móviles para que resulten más cómodas para los visitantes.
La plantilla es nueva, pero ya ha demostrado su eficacia. Tiene 8 temas (varias páginas, aterrizaje, corporativo, portafolio, blog, comercio electrónico, resguardos) con entre 3 y 12 máscaras en cada uno. Además de su belleza y pulcritud, esta plantilla simplemente tiene un arsenal de diferentes widgets y elementos. Puede hacer que su página de destino sea hermosa y funcional. ¿Necesitas un control deslizante? Por favor. ¿Mostrar portafolio, reseñas, beneficios? Y es.
Native es una poderosa herramienta para promover una startup. Las plantillas de páginas de destino de WordPress basadas en el tema utilizan varios efectos de paralaje para moverse entre los bloques semánticos del sitio. La documentación ampliada y los tutoriales en vídeo ayudarán a los usuarios novatos de CMS a comprender rápidamente la funcionalidad del panel de administración. Se incluyen los complementos Visual Composer, Layer Slider y Slider Revolution aplicación gratuita a la plantilla.
Salient es un tema versátil con un diseño responsivo que a menudo es elegido por . La tipografía premium y los efectos de paralaje que aparecen a medida que se desplaza por la página ayudan a mejorar la impresión de la página de destino. La optimización de la velocidad de fotogramas garantiza transiciones animadas fluidas entre bloques de contenido. La plantilla utiliza tamaños de imagen adaptables, lo que ayuda a que las páginas se carguen rápidamente y ahorra tráfico.
TheGem es un tema moderno para proyectos creativos, optimizado para SEO y complementado con un diseño "responsive". El peso ligero de las páginas, la velocidad de carga y la UX bien pensada garantizan un alto rendimiento de la plantilla. Si necesita promocionar su negocio mediante una página de destino, vale la pena comprar esta plantilla, aunque sólo sea por su código compatible con SEO, que le asegurará altas posiciones en los resultados de Google. Las 11 versiones de demostración disponibles de las páginas de destino tienen en cuenta las necesidades de diversos proyectos.
Los elementos de diseño de un sitio web en TheGem se personalizan mediante el complemento Visual Composer. La visualización de una gran cantidad de contenido en bloques de destino (portafolio, reseñas, servicios) se organiza mediante la carga: automática o "por botón", así como mediante un control deslizante de cambio de pestaña. La plantilla proporciona 6 opciones de animación para cargar los componentes de la sección que aparecen al desplazarse por el contenido de la página de destino. El fondo de los bloques de contenido pueden ser vídeos de vimeo y youtube o derivados de sistema de archivos sitio usando html5.
Marketing Pro es una plantilla diseñada teniendo en cuenta la conversión, el marketing y el SEO. Cada uno de los 9 sitios de demostración que contiene se crea teniendo en cuenta las características de un nicho de marketing específico. Como beneficio adicional del diseño de la página de destino adaptable, hay plantillas estilizadas para bloques de organización de eventos.
Oshine se encuentra entre los temas creativos más vendidos. Con un hermoso diseño y una potente funcionalidad, esta plantilla se puede utilizar para crear páginas de destino para proyectos y empresas creativos. Cincuenta módulos para personalizar la apariencia del sitio, cada uno de los cuales ha sido cuidadosamente diseñado, ayudan a obtener resultados ideales. La opción "deshacer/rehacer" y la capacidad de asignar "teclas de acceso rápido" a ciertas acciones simplifican el proceso de configuración.
Jevelin es una plantilla con un diseño responsivo premium que facilita la creación de páginas de destino y sitios de una página en Wordpress. El tema ayudará a lanzar el proyecto en poco tiempo. Gracias a una variedad de herramientas de personalización: 9 opciones de encabezado en diferentes diseños, 40 elementos únicos, cada uno de los cuales puede diseñarse individualmente, funcionalidad incorporada para organizar reenvíos en redes sociales, 6 soluciones de estilo para diseñar la sección de portafolio, personalizar máscaras es más rápido que nunca.
Kalium es un tema al que recurren representantes de diversos campos profesionales para conseguir un sitio web para promocionar sus servicios. En el diseño de sitios web con Kalium se hace especial hincapié en la tipografía: de ella es responsable una biblioteca especializada para la gestión de fuentes. La plantilla puede utilizar 4000 fuentes: Google, Typekit, Font Squirrel, premium y personalizada (cargada por el usuario).
Inbound es una plantilla que puede facilitar la creación de sitios web de una página para aplicaciones, libros electrónicos, cursos en vídeo y productos similares. La personalización del diseño se realiza utilizando el generador visual de páginas de destino Landing Page Builder. La plantilla también le permite asignar una minisección en formato de página de destino a cada producto promocionado dentro de un sitio y puede usarse para secciones de categorías de productos en WooCommerce.
Intact es un tema de múltiples opciones diseñado para ayudarlo a resolver sus problemas comerciales en línea. Incluye componentes tan importantes de una página de destino moderna como: bloques " Planes tarifarios" y "Empleados de la empresa", un control deslizante con reseñas, conjuntos de iconos temáticos, formularios de suscripción y un consultor en línea.
Comet es una plantilla de píxeles perfectos totalmente responsiva para Visual Composer y . A los usuarios se les ofrecen 5 máscaras para páginas de destino, que implementan los siguientes efectos: control deslizante de texto, paralaje, video de fondo, importado de youtube o integrado en html5, control deslizante de zoom animado. Los nuevos usuarios comprenderán fácilmente la configuración del tema cuando creando wordpress páginas de inicio: instrucciones y lecciones en video disponibles en línea.
Un tema universal de WordPress que tiene todo lo que necesitas para crear una página de destino:
- 200 bloques para “ensamblar” en una plantilla en cualquier orden;
- adaptabilidad en cualquier etapa;
- 35 páginas completamente diseñadas: simplemente puedes cambiar el texto y las fotos;
- alta velocidad de descarga: 94% más rápida que el promedio.
Los diseños de desarrollo se pueden evaluar antes de la compra. Los esquemas de color y la configuración se cambian en el editor visual. Los autores prometen apoyo en cualquier momento.
El desarrollador ofrece una plantilla de sitio web sobre diferentes temas, desde construcción hasta servicios veterinarios. Simple y aterrizaje efectivo La página le ayudará a transmitir sus beneficios, condiciones laborales y otros detalles necesarios a clientes potenciales. El diseño responde y se ve bien en todos los dispositivos, desde monitores Retina hasta dispositivos móviles. Hay complementos para cartera, horario de apertura, calendario e íconos personalizados.
"Un tema ideal para una startup", dicen los autores sobre su desarrollo. El diseño ligero y minimalista de 2020 es adecuado para tiendas online, agencias de eventos y muchos otros tipos de negocios para tarjetas de visita o para el desarrollo de un proyecto a mayor escala. Incluido:
- diseñador visual: los detalles cambian en línea;
- adaptabilidad móvil;
- WooCommerce es el mejor complemento de tienda en línea;
- soporte para cualquier idioma.
Una plantilla multiplantilla con treinta demos en las que sólo podrás sustituir el texto deseado. También ofrecen más de 90 plantillas para controles deslizantes y efectos, y más de 130 opciones para páginas individuales. Se incluyen 9 complementos principales que serán útiles para promocionar un sitio web de tarjetas de presentación o un recurso más amplio. Todo esto tiene descuento, actualmente disponible por $30. Una de las plantillas más populares para páginas de destino.
Otro diseñador de plantillas múltiples para páginas de destino y tarjetas de presentación. Código limpio con un sinfín de opciones para seleccionar encabezados y pies de página sin necesidad de aprender a programar. Muchos diseños, cuyos elementos son fácilmente reemplazables gracias al complemento de cuadrícula. Es fácil pasar de un sitio de una sola página a una tienda completa mediante la búsqueda avanzada. El soporte siempre está listo para responder preguntas.
25. Ekko Plantilla múltiple de aterrizaje económica y popular, que se diferencia en:
Sitios web profesionales sobre cualquier tema que puedes simplemente instalar con un clic y usar. Diseños modernos, que no son “aburridos” y lucen frescos y hermosos.
"Una plantilla múltiple de nueva generación" es una afirmación audaz, pero eso es exactamente lo que dicen los autores sobre su producto. Por sólo $35 puedes conseguir:
- 200 páginas de destino con un bonito diseño “europeo”;
- WooCommerce y formularios de pedido avanzados;
- instalación en un minuto;
- configuraciones para cartera, controles deslizantes.
De hecho, el complemento del editor visual de Elementor se ha actualizado a ultima versión y muy fácil de usar.
"El mejor entre 9500", señalan los desarrolladores. La plantilla se centra en personas que nunca han codificado. La personalización del diseño se realiza utilizando el complemento de diseño visual Elementor, que le permite trabajar en modo uno a uno, sin usar instalaciones de terceros y utilice inmediatamente la funcionalidad completa de una de las 300 plantillas. Cómodo y rápido de configurar.
Hermoso diseño en una combinación de colores inusual. El énfasis no está sólo en Diseño elegante, porque se ofrece para comprarlo como un conjunto:
Plantilla de WordPress limpia y clara para tarjetas de visita y compras en línea. En el modo tienda hay configuraciones para las características del producto y búsqueda de ellas.
Una selección de lindas páginas de destino en un estilo plano moderno y elegante. Dibujar elementos manualmente te permitirá destacar y ser recordado por clientes potenciales. El precio incluye complementos y widgets básicos, desde un editor visual hasta un efecto de paralaje para colocar un fondo o un portafolio. Puede personalizar diferentes vistas en el escritorio y version móvil, la adaptabilidad viene dada por defecto.
Varias soluciones para diseñadores, fotógrafos, artistas. Los ajustes preestablecidos útiles para publicar un portafolio le permitirán protegerlo contra copias y cargarlo cuando el usuario lo vea, lo que ahorra tiempo de carga. Descarga de vídeos sencilla. Existe una opción para blogs. Se han preparado elementos para la colocación de infografías. El diseñador visual te ayudará a configurar fácilmente todos los detalles.
Los desarrolladores han realizado un interesante diseño “verde” para servicios de paisajismo, asistencia de jardinería y temas ecológicos. Sin embargo, la pieza de trabajo se puede utilizar para otros fines. Hermosos íconos, fuentes limpias de Google, excelente capacidad de respuesta y apariencia, incluso en dispositivos Retina, implican el uso generalizado de temas de WordPress.
Hecho bajo ultima versión WordPress. La plantilla se actualiza constantemente. La funcionalidad de una tienda en línea se proporciona a través de un complemento conveniente para búsqueda y pedidos avanzados. También hay ajustes preestablecidos para eventos, fechas del calendario y grabación. Usó Elementor para crear nuevas páginas. Admite complementos adicionales.
Los visitantes recordarán un tema "musical" creativo por su diseño brillante, y el propietario del sitio estará interesado en:
- desarrollos de páginas de destino y paginas internas- oportunidades ilimitadas para el desarrollo de recursos;
- instalación con un solo clic;
- configuración WYSIWYG;
- la capacidad de agregar música, videos y efectos deslizantes.
Educación es una versión mejorada del antiguo tema de eLearning con una UX más avanzada y está destinada a recursos educativos en línea: cursos online y sitios web de instituciones educativas. La plantilla tiene un diseño atractivo y proporciona la funcionalidad integral necesaria para el proceso educativo.
Uno es un tema creativo para crear páginas de destino con énfasis en la promoción de productos. La interfaz de la plantilla está hecha en html5 y con ella se pueden integrar bootstrap 3, MailChimp y Contact Form 7. Los desarrolladores del tema UX estudiaron muchos proyectos similares, como resultado de lo cual los usuarios recibieron plantillas listas para usar Páginas de inicio de WordPress, que contienen todas las herramientas importantes para proyectos empresariales.
Total es una plantilla adecuada para muchos proyectos. Al crear páginas, utiliza: método de arrastrar y soltar, combinaciones de colores ilimitadas, personalización en tiempo real y controles deslizantes premium fáciles de usar. Entre los sitios de demostración del tema, hay plantillas de páginas de destino para 11 proyectos diversos.
Estocolmo es una de las 30 plantillas de WordPress más vendidas desde sus inicios. Al trabajar con el tema, puede establecer una combinación de colores para todo el sitio o sus elementos individuales, utilizar cualquiera de las 600 fuentes de Google y combinar opciones y bloques de diferentes sitios de demostración. Los usuarios que necesiten una solución lista para usar para un proyecto empresarial pueden descargar plantillas de páginas de destino e instalarlas inmediatamente desde la sección del creador de sitios web.
Otra opción de demostración:
Más de 70+ widgets con los que tus páginas de destino serán únicas y modernas. Fuentes de Google, infografías, adaptación a SEO, código limpio, creación de portafolios convenientes: estas son solo algunas de las ventajas de esta plantilla. Los aterrizajes, en el sentido literal, se pueden ensamblar literalmente como un mosaico, simplemente arrastrando y soltando. En la página de descripción puede ver ejemplos visuales.
Al ver sitios de demostración, desea utilizarlos todos.
» Plantillas WordPress gratuitas para páginas de destino - TOP 30
Plantillas gratuitas de WordPress para páginas de destino - TOP 30Específicamente, este artículo considerará mejor aterrizaje Plantillas de WordPress, que puede ser adecuado para usted. Todos incluirán una captura de pantalla y una versión de demostración del diseño para que puedas evaluar el tema y descargarlo inmediatamente si te gusta.
Muy a menudo, las plantillas de páginas de destino para WordPress se distribuyen pagando una tarifa, pero para ti he recopilado mejor y gratis en este artículo para facilitar tu búsqueda.
También te puede interesar Para los que buscan hosting 1.es un tema de una página que te ayudará a crear un sitio web sin mucho esfuerzo. Por otro lado, tiene un diseño dibujado profesionalmente, desplazamiento de paralaje, que nos permite llamar a este tema “hermoso”. Esta plantilla es adecuada para nuevas empresas y pequeñas empresas.
2.es un tema multifuncional de WordPress. Incluye una interfaz vibrante, un efecto de paralaje clásico y otras animaciones que hacen que ver el tema sea aún más agradable. Zerif Lite es un tema para varios navegadores que también está bien escrito en términos de código.
3. Alhena Lite
Alhena Lite es un tema empresarial gratuito de WordPress que está completamente integrado con el complemento WooCommerce para permitirle configurar fácilmente su tienda en línea.
4.
es un tema empresarial limpio y simple que responde completamente e incluye muchas de las características populares para facilitar la creación de sitios web.
5. Palmas
Palmas es un tema moderno elaborado en colores claros, adecuado para ejecutar un blog personal o de moda. Esta plantilla también admite complementos como Yoast SEO, GravityForms, Pirate Forms, W3 Total Cache y muchos otros.
6. Brasería
Brasserie es una plantilla sencilla de WordPress perfecta para un restaurante, cafetería o sitio culinario. Incluye efectos de animación, así como una gran cantidad de funcionalidades.
7. XT Corporativo ligero
XT Corporate lite es un tema simple y minimalista adecuado para un producto o servicio pequeño.
8.
es un tema agradable realizado en colores claros. Incluye varias animaciones y transiciones visualmente impresionantes 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.
9.
es un tema adecuado para la presentación de pequeñas o medianas empresas. Incluye gran cantidad Funciones y complementos para una gestión completa de la estructura de aterrizaje.
10.
es un tema versátil con mucha funcionalidad. Es adaptativo, todos los elementos están animados con efecto de paralaje. Una página es fácil de personalizar y le permite ver los cambios en tiempo real. El tema de inicio actual también admite una gran cantidad de complementos básicos de WordPress.
11. Fotografía
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.
12. Tema Integral
Integral Theme es un tema de paralaje de una página adecuado para creativos, propietarios de empresas o agentes. Sólo te llevará un par de minutos configurarlo.
13. CuadradoSquare es un tema minimalista que se puede utilizar para cualquier tipo de sitio web. Es más adecuado para pequeñas y medianas empresas. Square está configurado para muchos complementos populares de WordPress y también está optimizado para SEO.
14.animarEnliven es un tema de alta calidad. Yo lo llamaría premium, ya que combina calidad y belleza en un solo frasco. También admite muchos complementos populares y es fácil de personalizar.
15. café con lecheLatte es una plantilla para fotógrafos. Tiene todo para que puedas mostrar adecuadamente tu portafolio, además de hablar sobre ti. La configuración se realiza con un par de clics.
16. El lunesEl lunes es un tema elegante adecuado para empresas o autónomos. Viene con una gran cantidad de funciones, extras y complementos.
17. Mundo empresarialBusiness World es una plantilla relacionada con temas comerciales. Combina estilo y calidad. El mundo empresarial 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.
18.- Este es un tema agradable, realizado en colores claros. Es perfecto para pequeñas y medianas empresas, así como para un sitio web personal. Puedes personalizar lo que quieras en él. Hay muchas características y adiciones que hacen que esta plantilla sea aún mejor y más atractiva.
19.Un tono
Onetone es una plantilla de una página para WordPress que es adecuada para presentar "yo" en Internet (muestre su portafolio y/o hable sobre usted mismo).
20. LevántateArise es una plantilla minimalista de WordPress de una página adecuada para un pequeño producto o una pequeña empresa. No hay nada superfluo en ello, sólo todo lo más importante.
21. GuauWoot es una plantilla minimalista hecha en colores oscuros para administrar una tienda en línea. Funciona con WooCommerce y muchos otros complementos populares.
22. OesteWest es un tema simple adecuado para un sitio web de agencia, pequeña empresa o portafolio. Incluye una gran cantidad de funciones, configuraciones y disposición de elementos.
23. Anaglifo LiteAnaglifo Lite es una plantilla simple y elegante adecuada para blogs y tiendas en línea. Ya está configurado con WooCommerce y otros complementos populares.
24.
es un bonito tema realizado en colores oscuros combinados con elementos de colores, adecuado para presentar su negocio, portafolio 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.
25.
es una plantilla de una página que se incluye en la categoría: fitness, yoga, pilates, gimnasio y muchas otras. etc. El estilo está hecho en colores oscuros, para varios navegadores, adaptable y funciona en todos los dispositivos.
26. Aglee LiteAglee Lite es una plantilla corporativa sencilla diseñada en tonos gris claro y azul. Este tema es perfecto para una nueva empresa o una pequeña empresa.
27.
es un tema empresarial potente y funcional. Tiene un editor conveniente que le permite ver los cambios en tiempo real. Wimpie Lite es compatible con todos los navegadores, tiene capacidad de respuesta y es fácil de cargar páginas.
28.
- es multiusos tema de WordPress, que está realizado en colores claros y es adecuado para un sitio web comercial, un portafolio personal o un blog.
Se necesitan plantillas de página de destino listas para usar para lanzar rápidamente un nuevo producto, promocionarlo mediante una página LP o una aplicación móvil, o motivar a los usuarios a registrarse o suscribirse a un boletín. Para una “página de destino”, la comodidad y facilidad de uso con el diseño adecuado son extremadamente importantes. Las plantillas de páginas de destino de ventas modernas se desarrollan teniendo en cuenta la capacidad de crear un sitio web responsivo con altas tasas de conversión.
Tema HTML5 ultramoderno basado en Bootstrap 3.1.1. Viene con 4 diseños: opciones de barra de navegación única/multipágina. Se integra un ligero efecto de desplazamiento de paralaje en el tema de la página de destino, adaptado para tráfico móvil y orgánico (SEO).
Plantilla de página de destino HTML para web y aplicaciones móviles, destinado a facilitar la generación de leads. posee carga rapida y código html, css válido. En la parte superior de la página de una sola página hay un formulario de contacto duplicado con .
Plantilla de aterrizaje HTML5 de una página con efectos CSS3. Tiene un marco de tres columnas, creado en Bootstrap 3. Adecuado para vender aplicaciones iOS/Android. La plantilla incluye 2 diseños (con y sin Parallax), Formas Ajax contactos, caja de luz PrettyPhoto y 5 combinaciones de colores. Fácil de personalizar: cambie los códigos hexadecimales y los elementos relacionados se colorearán en un nuevo color. PSD incluido.
La moderna plantilla de aplicación móvil lista para Retina ofrece 8 opciones de color, opciones de imagen/.
La plantilla de página de destino de estilo plano multipropósito viene con 3 opciones de índice y 6 combinaciones de colores. Plantilla creada en twitter bootstrap3, incluida secuencia de comandos PHP formularios de contacto y descargas.
Slander es una opción ideal para startups y empresas, adecuada para profesionales o un proyecto individual. Incluye diseño responsivo 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 excelente funcionalidad. La plantilla está diseñada para la página Próximamente (que se lanzará pronto), ideal para crear una página de aplicación y un sitio de exhibición.
Plantilla de aterrizaje adaptable para ofertas especiales. eventos. Tiene secciones para video comercial, programación de eventos, lista de invitados.
El tema de la página de destino está completamente desgastado. Aunque el auge de las páginas de destino se ha calmado un poco, las páginas de destino todavía tienen demanda. Los lanzan todos y cada uno de ellos, aunque para sus nichos de negocio esto es claramente una jugada perdedora. Algunas personas lo hacen sólo para jugar y otras para ganar dinero. Pero no es tan importante qué objetivos persigue, lo importante es que todos necesitarán el desarrollo de la página. Algunos realizarán pedidos a profesionales, mientras que otros, por una razón u otra, comenzarán a crear ellos mismos su propia página de destino. Precisamente a esto último está dedicada esta colección.
Las personas que deciden crear un sitio web por sí mismas pueden comenzar a desarrollarlo desde cero o pueden utilizar sitios ya preparados, porque no requieren conocimientos especiales en desarrollo. Suficiente conocimiento básico HTML y CSS, los que enseñan en la escuela. Aquí surge nuevamente la pregunta. ¿Debo usar pago o gratis? Por supuesto, el pago será de mucha mayor calidad y probablemente mostrará mayores conversiones. El gratuito será menos bonito y menos elaborado en términos de marketing, distribución y diseño.
Esta selección consta de gratuitos 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 ojos nuevos, decidí eliminar la mayoría de ellas, ya que, francamente, era basura y ya hay muchas. basura en Internet. Sólo quedan las plantillas más valiosas sobre las que al menos puedes construir algo. La selección incluye plantillas de páginas de destino para una variedad de temas, pero, por alguna razón, predominan los LP para aplicaciones móviles. Resultaron ser de la más alta calidad.
Anteriormente, ya hicimos selecciones entre plantillas de páginas de destino gratuitas. Fueron diseñados para 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áginas de destino HTML gratuitas:
Por cierto. Si, por alguna razón, desea incorporar estas plantillas al 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. Esto podría ahorrar mucho tiempo. Aunque, personalmente, no veo mucho sentido en hacer esto, ya que HTML puro es suficiente para un LP simple.
Entonces. Le informamos sobre 20 plantillas de páginas de destino HTML gratuitas.
Appi: plantilla con vídeo de fondoOtra plantilla de página de destino para una aplicación móvil con un vídeo de fondo en pantalla completa. A diferencia de la plantilla con fondo de vídeo, que se detallará a continuación, ésta es de mucha mayor calidad, aunque está adaptada a un tema específico.
El desarrollador también proporciona fuentes en formato PSD para su descarga gratuita.
En absoluto, plantilla gratis Es difícil encontrar unos con vídeo de fondo. Así que descarguemos.
El vídeo de la primera pantalla se puede sustituir por el suyo propio y, si no hay ninguno, se puede descargar desde un archivo de vídeos gratuito. Anteriormente proporcioné una lista de existencias de videos con videos legales.
Hay bloques como: menú, próximos eventos, reseñas de clientes y un conjunto estándar de bloques en los que puede colocar ventajas, etc.
Saludos, mis queridos lectores. Hoy hablaremos de aspectos técnicos con los que podemos incrementar la conversión en ventas de nuestros bienes o servicios. Uno de puntos importantes está bien pensado página de destino con bienes. La llamada página de destino, de cuya creación hablaremos más adelante y obtendremos códigos de página ya preparados.
¿Qué es una página de destino? Esta es la página a la que suelen acceder las personas después de hacer clic en un anuncio. Creado para una oferta: producto, servicio o suscripción. Una página de destino eficaz es la piedra angular del éxito del marketing online. El producto puede ser el mejor del mercado, los anuncios están perfeccionados, pero sin una buena landing page los esfuerzos no dan resultados al 100%. Les dice a los visitantes qué se ofrece y por qué deberían quererlo. El sentido de urgencia contribuye a una rápida toma de decisiones y a la transición del usuario a la categoría de cliente.
¿Cómo crear una página de destino? Es un error creer que la respuesta está en la capacidad de componer tipografía. Una buena página de destino es el resultado de un trabajo coordinado en objetivos, texto, diseño y código. Las páginas de destino, cuyos ejemplos se encontrarán a continuación, ayudarán a los principiantes a aprender los conceptos básicos del diseño, pero no reemplazarán los textos de conversión ni la comprensión del público objetivo. También puedes crearlos utilizando varios diseñadores de páginas de destino.
Por lo tanto, antes de crear página de destino, pregúntese:
- ¿Qué hará una persona después de llegar a la página de destino? ¿Comprará algo? ¿Llenarás el formulario? ¿Suscribirse al boletín? Antes de realizar un seguimiento de su tasa de conversión, establezca objetivos claros.
- ¿Quiénes son mis competidores? En realidad, se trata de tres preguntas: ¿quiénes, qué tan exitosos son y cómo se pueden aplicar sus logros? La imitación es la forma más sincera de adulación. Si sus competidores están haciendo algo que funciona, replíquelo en su sitio.
- ¿Quién es mi audiencia? Cuanto mejor comprenda su nicho y público objetivo, mayores serán las posibilidades de que sus esfuerzos valgan la pena.
Debes ofrecer toda la información necesaria, pero no tanta como para abrumar y ahuyentar a tu cliente potencial.
Ejemplos de creación de una página de destino + codificación para principiantesAntes de comenzar, echemos un vistazo rápido a HTML y CSS. Comprender cómo funcionan le ayudará a crear un aterrizaje.
HTML es un lenguaje de marcado del navegador para la visualización de sitios web. Escrito utilizando etiquetas entre corchetes angulares que definen el contenido.
La etiqueta se abre () y se cierra () alrededor del relleno:
contenido
Para realizar ajustes, se agregan atributos después del nombre:
contenido
CSS: define cómo organizar los elementos HTML. Consta de selectores, propiedades y valores:
#selector (propiedad: valor;)
El selector coincide con el nombre de una etiqueta específica en html. Cambiar valores y agregar propiedades ajusta su apariencia. Puede crear páginas que se vean diferentes entre sí aplicando diferentes estilos CSS al mismo HTML.
5 pasos inicialesPara un diseño rápido, usaremos una plantilla con un diseño mínimo basado en bootstrap. Se trata de un sistema con selectores propios, que se utiliza en todo el mundo para agilizar el diseño.
Parece modesto.
A partir de este pescado se crea en varias etapas un sitio web para todos los gustos.
Estructura de directorios en la carpeta:
- index.html: Este es el archivo principal que editaremos.
- /assets: los archivos auxiliares se encuentran aquí:
- /css: el directorio contiene estilos de iconos y de arranque. El archivo que editaremos es main.css.
- /img: carpeta para imágenes del sitio.
- /fonts: fuentes de iconos.
- /js: arranca archivos javascript.
Paso 1: usar un encabezado
El título y los subtítulos son lugares clave que ayudan a transmitir el valor de la oferta de manera clara.
Cambiemos el título y el nombre del sitio. Aquí no es necesario tener habilidades tipográficas: usted escribe su propio texto en los lugares resaltados en amarillo en la pantalla.
Paso 2. La brevedad es hermana de la conversión. Agregar beneficios y tarifas
Necesitará 4 secciones:
- ventajas;
- tarifas;
- reseñas;
- llamada a la acción.
Creemos una sección del contenido principal “main”, en la que insertaremos las secciones necesarias:
…..
…..
…..
…..
Rellenar con relleno en lugar de puntos.
Para la sección de beneficios necesitarás este código:
Ventajas
Rápido
Confiable
Sed diam noummy
Rentable
Elit, sed diam noummy
Técnicamente
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
Confiable
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
Rentable
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
Técnicamente
Lorem ipsum dolor sit amet, consectetuer adipiscing
Confiable
Lorem ipsum dolor sit amet, consectetuer adipiscing
Rentable
Lorem ipsum dolor sit amet, consectetuer adipiscing
Contenido para mayor claridad:
Todavía parece descuidado, pero no hay motivo para entrar en pánico, continuemos.
Anotamos precios. El contenido cambia de la misma forma que en el primer paso. descripción general con “tarifas” de clase y tres tarifas.
Planes tarifarios
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.
Tarifa No. 1
$10
por mes/por persona
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Lorem ipsum dolor
- 10 Lorem ipsum
Orden
Tarifa No. 2
$20
por mes/por persona
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Lorem ipsum dolor
- 10 Lorem ipsum
Orden
Tarifa No. 3
$30
por mes/por persona
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Lorem ipsum dolor
- 10 Lorem ipsum
Orden
Tiene este aspecto.
Por ahora, no estamos interesados en la apariencia de la futura página de destino; veremos ejemplos de cambios de estilo a continuación.
Paso 3: señales de confianza y llamado a la acción
El uso de señales específicas indica a los visitantes que la marca es digna de confianza. Las señales pueden adoptar muchas formas, pero la clásica son los comentarios de los clientes.
Opiniones de los usuarios
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".
“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".
Hagamos un llamado a la acción.
Benefíciese al realizar su pedido hoy
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:
¡Ordenar ahora!
Las reseñas ayudarán a los clientes potenciales a decidir comprar el producto. Para mayor claridad, necesitamos avatares, por lo que los colocaremos inmediatamente debajo de cada cita.
Nombre del cliente.
Paso 4: Integración compatible con redes móviles y dispositivos móviles
Para implementar la grilla, necesitamos contenedores Bootstrap. Es importante recordar el número total de segmentos de columna válidos: 12. La clase determina el ancho de visualización del contenido. La ventaja de esta rejilla ya preparada es que los contenedores están diseñados teniendo en cuenta la adaptabilidad y se pueden utilizar inmediatamente para dispositivos móviles. Descripción detallada en el sitio oficial. La cuadrícula se ve así.
El contenido de “principal” se envolverá en un contenedor. Para ello, en la parte superior está escrito lo siguiente:
… .
Si necesita que el bloque se ajuste a todo el ancho de la pantalla, entonces se inserta el contenedor en el interior. Aquí será un jumbotron y un llamado a la acción.
Envolveremos todos los elementos que requieran colocación uno encima del otro con separadores de líneas.
Ahora podemos ajustar el ancho de las columnas, centrándonos en la cuadrícula de arranque. Después de envolver, el relleno dejó de pegarse a los bordes de la pantalla y aparecieron prolijas muescas.
Establecemos precios en una fila usando la clase de columna col-lg-4. Dentro de las líneas de las filas, ya no es necesario escribir divs separados para ajustarlos; se pueden combinar con los existentes separados por un espacio.
Por analogía, configuramos columnas para la sección de reseñas y beneficios. Si necesita mover un elemento hacia un lado, use la clase de columna de desplazamiento col-lg-offset-2. El número al final determina en cuántas columnas base se producirá el cambio.
Paso 5. Fuentes e íconos
Implementamos fuentes de encabezado 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 títulos al archivo para el cual se usa 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 fuente de Google */
}
Para mayor claridad, las ventajas se describen mediante una clase con el nombre autoexplicativo text-center e íconos FontAwesome del conjunto de arranque.
En este punto la preparación está completamente completa.
Página de destino: ejemplos de códigos con oferta, paralaje y contadorUtilizamos los tres tipos más populares: con frase, con forma y con contador de cuenta atrás. A medida que avance el diseño, la plantilla se complementará con efectos.
Ejemplo 1: con una fraseConfiguremos el fondo de la parte principal y el relleno para que cubra la primera pantalla.
Jumbotrón (
fondo: #f5f5f5 url(../img/fon.jpg) parte superior central sin repetición;
ancho máximo: 100%;
relleno superior: 250 px;
fondo de relleno: 200px;
alineación de texto: centro;
}
Cambiemos el tamaño del encabezado del jumbotron de h2 a h1. A continuación, escribimos estilos para los elementos que deben cambiarse.
Empecemos por los iconos.
Beneficios i(
color: #cac4c4;
}
Después del signo almohadilla, se especifica un color. Puede elegir su propia opción utilizando tablas de colores html o un editor de imágenes.
Sangría para títulos de sección
sección h2 (
relleno superior: 30px;
margen inferior: 25px;
}
Estamos arreglando la apariencia de los aranceles. Por conveniencia, creamos nuestras propias clases para los elementos que queremos resaltar específicamente.
Tarifa No. 1
$10
por mes/por persona
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Lorem ipsum dolor
- 10 Lorem ipsum
Orden
Y mucho CSS. Los lugares de los que son responsables las secciones se indican en los comentarios - /* entre barras con un asterisco */
/* =========Estilos tarifarios======== */
/* forma general tarifa */
.precio_artículo(
fondo: #f2f2f2;
posición: relativa;
mostrar: -webkit-flex;
pantalla: flexible;
dirección flexible: columna;
alinear elementos: estirar;
alineación de texto: centro;
-webkit-flex: 0 1 330px;
flexionar: 0 1 330px;
relleno: 2em 3em;
margen: 1 em;
color: #262b38;
cursor: predeterminado;
desbordamiento: oculto;
}
/* cambia el fondo al hacer clic */
.pricing_item: pasar el cursor (
color: #444;
antecedentes: #daebef;
}
/* fondo de etiqueta de precio individual en cada tarifa */
.pricing_item:primer hijo .price (
antecedentes: #9ba9b5;
}
.pricing_item:nth-child(2).precio (
antecedentes: #1f6098;
}
/* en pantallas anchas la columna de tarifa central tiene sangría y está resaltada */
@media pantalla y (ancho mínimo: 66.250em) (
.precio_artículo(
margen: 1,5 em 0;
}
.presentado(
índice z: 10;
margen: 0;
tamaño de fuente: 1,15 em;
}
}
/* título */
.pricing_item h3 (
tamaño de fuente: 2em;
margen: 0,5 em 0 0;
color: #1d211f;
}
/* fondo de la etiqueta de precio */
.precio(
tamaño de fuente: 2em;
peso de fuente: negrita;
color: #fff;
posición: relativa;
índice z: 100;
altura de línea: 95 px;
ancho: 100px;
altura: 100 píxeles;
margen: 1,15em automático 1em;
radio fronterizo: 50%;
fondo: #77a5cc;
-webkit-transición: color 0,3 s, fondo 0,3 s;
transición: color 0,3 s, fondo 0,3 s;
}
/* divisa */
.divisa(
tamaño de fuente: 0,5 em;
alineación vertical: súper;
}
/* aclaración de la propuesta */
.oración (
peso de fuente: negrita;
margen: 0 0 1em 0;
relleno: 0 0 0,5 em;
color: #2a6496;
}
/* lista */
.pricing_item ul (
tamaño de fuente: 0,95 em;
margen: 0;
relleno: 1,5 em 0,5 em 2,5 em;
alineación de texto: izquierda;
}
/* listar elementos */
.pricing_item li (
relleno: 0,15 em 0;
}
/* botón de orden de tasa */
.botón de elemento de precio (
peso de fuente: negrita;
margen superior: automático;
relleno: 1em 2em;
color: #fff;
radio del borde: 5px;
antecedentes: #428bca;
-transición-webkit: color de fondo 0,3s;
transición: color de fondo 0,3 s;
}
/* cambia de color cuando se presiona el botón */
Botón .pricing_item: desplazar el cursor,
Botón .pricing_item: foco (
color de fondo: #285e8e;
}
/* antecedentes arancelarios*/
.bg-2 (
fondo: #dddddd;
}
Resultado
Opiniones de los usuarios. Démosles una mirada ordenada e indiquemos su ubicación.
/* =========Estilos de testimonios======== */
testimonios (
relleno: 4em 0;
alineación de texto: centro;
}
.testimonios .avatar img (
radio fronterizo: 50%;
flotador izquierdo;
pantalla: en línea;
margen derecho: 1em;
ancho: 65 píxeles;
altura: 65 píxeles;
margen inferior: 30px;
}
.testimonios .avatar p (
alineación de texto: izquierda;
acolchado superior: 1em;
color: #5d5d5d;
peso de fuente: 900;
}
Ya solo queda decorar la última llamada a la acción y el pie de página.
/* Acción */
.acción(
antecedentes: #476177;
altura mínima: 180 px;
ancho: 100%;
relleno: 4em 0;
alineación de texto: centro;
}
.acción h2 (
color: #fff;
peso de fuente: 300;
}
.acción p(
color: #fff;
sombra de texto: 0 1px 2px rgba(0, 0, 0, .2);
tamaño de fuente: 1,2 em;
}
.acción .contenedor (
margen superior: 3em;
}
/* Pie de página */
pie de página(
antecedentes: #333333;
relleno: 1em 0;
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,7 em;
margen superior: 0,5 em;
}
Al botón de pie de página se le asigna la clase de arranque incorporada btn-default.
Dando vida a la plantilla. Introduciremos un desplazamiento suave y botones para las secciones, así como animación de texto en la primera pantalla.
Para que las transiciones funcionen, reemplazaremos algunas de las clases de la sección con id, para beneficios y tarifas. Y agregaremos enlaces a la identificación de los botones. Captura de pantalla: qué se adjunta a qué, resaltado con un marcador amarillo.
Establecemos sangrías para los botones: jbutton. El desplazamiento cuando se presiona funciona, pero de manera muy abrupta.
Las transiciones suaves se crean usando javascript o jquery. Este último está conectado a las plantillas Bootstrap de forma predeterminada.
El desplazamiento ahora es fluido.
Agregar animación al texto usando Animate.css (https://raw.githubusercontent.com/daneden/animate.css/master/animate.css). Este es un código fuente abierto listo para usar y se puede utilizar en cualquier sitio web. Coloque el archivo de Github en la carpeta css y especifique la ruta.
Seleccionamos los efectos aquí: https://daneden.github.io/animate.css/. Hemos seleccionado fadeInDown. Está escrito en el código así:
Ahora, cuando la página se cargue o actualice, el texto se animará. Listo.
Ejemplo 2: con forma y efecto de paralajeCuantos más campos de formulario se presenten a un visitante, es menos probable que los complete. Solicite sólo la información mínima necesaria.
Está ensamblado por analogía. Cambiaremos fondos y colores. Y, por supuesto, agregaremos una forma.
Comencemos con el paralaje.
Cambiemos el fondo del jumbotron a transparente:
fondo: transparente;
Dentro del encabezado insertaremos el script:
$(ventana).scroll(función(e)(
paralaje();
});
función paralaje())(
var desplazado = $(ventana).scrollTop();
$(".bgparallax").css("arriba",-(desplazado*0.2)+"px");
}
La primera línea del cuerpo es un contenedor de paralaje:
Y en CSS su comportamiento es:
Bgparalaje (
fondo: url(/../img/fon.jpg) repetir;
posición: fija;
ancho: 100%;
altura: 300%;
arriba: 0;
izquierda: 0;
índice z: -1;
}
El paralaje está listo. Pero realizar cambios en el código y un nuevo fondo requiere reasignar la combinación de colores.
Oscurecer el menú:
Barra de navegación predeterminada (
color de fondo: #333;
color del borde: #444;
color: gris oscuro;
radio de borde: 0;
}
Barra de navegación predeterminada .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:
La página de destino convierte a los visitantes en clientes
Quisque tincidunt dui augue suspendisse lorem vel diam consectetur posuere vehicula posueret mauris vehicula tortor rhoncus vulputate massa.
-
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.
Y prescribimos la apariencia.
/* forma */
.lista de formularios de cabeza (
tipo de estilo de 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;
radio del borde: 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;
}
.jumbotron p (
color: #fff;
tamaño de fuente: 16px;
estilo de fuente: cursiva;
}
Aquí también acabó el texto del jumbotron, que exigía cambios.
Estamos cambiando las tarifas.
/* vista general de la tarifa */
.precio_artículo(
color de fondo: rgba(0,0,0,.4); /* línea cambiada */
radio del borde: 4px; /* línea cambiada */
posición: relativa;
mostrar: -webkit-flex;
pantalla: flexible;
-webkit-flex-direction: columna;
dirección flexible: columna;
-webkit-align-items: estirar;
alinear elementos: estirar;
alineación de texto: centro;
-webkit-flex: 0 1 330px;
flexionar: 0 1 330px;
relleno: 2em 3em;
margen: 1 em;
color: #f2f2f2; /* línea cambiada */
cursor: predeterminado;
desbordamiento: oculto;
sombra de cuadro: 0 0 15px rgba(0, 0, 0, 0.05);
}
/* cambia el fondo al hacer clic */
.pricing_item: pasar el cursor (
color: #444;
fondo: #ddd; /* línea cambiada */
}
Ahora se ven así: un fondo transparente y esquinas redondeadas.
La plantilla está lista.
Ejemplo 3: con contador de cuenta atrásVolvemos a cambiar el relleno del jumbotron y volvemos a colorear la plantilla para que coincida con el nuevo fondo, similar a la plantilla anterior. Conecte el guión del contador:
HTML
el tiempo no espera
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. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.
var myCountdown1 = nueva cuenta atrás((
tiempo: 86400 * 3, // 86400 segundos = 1 día
ancho: 300
, altura: 60
, rangoHola: "día"
, estilo: "voltear" //
Publicaciones sobre el tema.
-
Eliminar aplicaciones de “Google” Lista de aplicaciones miui para eliminar
Recientemente, muchos propietarios de teléfonos inteligentes Xiaomi han notado un nuevo acceso directo en su teléfono: la aplicación Mi Drop de Xiaomi. Muchos tienen...
-
-Setevye-podkljuchenija.jpg)
Por qué Xiaomi Mi PC Suite no ve el teléfono y cómo configurarlo Soluciones difíciles
¿Por qué los propietarios de teléfonos Nokia no pueden conectar su teléfono a su computadora? Puede haber muchas opciones; por ejemplo, a menudo me caigo...