Share
Cuando se está preparando para lanzar un nuevo sitio web, un producto o un servicio, necesita un lugar dedicado para enviar posibles clientes y clientes. Sin embargo, es posible que su sitio web aún no esté listo para recibir nuevos visitantes. En esos casos, una plantilla de página de destino HTML5 es la opción perfecta..
Una plantilla HTML5 es rápida y fácil de instalar. A diferencia de un CMS que puede usar un lenguaje de programación complejo, una plantilla HTML es fácil de editar incluso para principiantes.
En este tutorial, explicaré los beneficios de usar plantillas de página de destino HTML y te mostraré cómo configurar una. No te preocupes: es rápido y sin dolor..
Como ya mencioné, puedes instalar y configurar las páginas de destino con bastante rapidez. Pero, hay algunos otros beneficios al usar uno:
Ahora que he cubierto los beneficios de las plantillas HTML, veamos el tutorial..
Para los fines de este tutorial, usaré la plantilla Pure. Es una plantilla limpia y mínima que puede usarse para una variedad de propósitos y viene con un formulario de contacto de trabajo y un formulario de registro de MailChimp.
Además de la plantilla, hay algunas otras herramientas que necesitará para poder modificar la plantilla y hacer que su sitio esté activo:
Antes de seleccionar una plantilla para su página de destino, deberá comprar un nombre de dominio y registrarse para un plan de alojamiento. Hoy en día, puede comprar un paquete de alojamiento a partir de $ 5 / mes y la mayoría de las compañías de alojamiento le proporcionarán el nombre de dominio de forma gratuita cuando se suscriba a su plan. Algunas compañías de hosting ofrecerán espacio y ancho de banda ilimitados, y algunas limitarán los recursos disponibles.
Asegúrese de hacer su investigación y leer algunos comentarios independientes sobre las empresas de alojamiento que despiertan su interés. Ver cuán satisfechos están sus clientes anteriores puede ser un gran indicador sobre los servicios ofrecidos y la calidad de la atención al cliente.
El siguiente elemento en su lista debe ser un cliente FTP. Le permitirá conectarse a su servidor de alojamiento y cargar los archivos de plantilla.
Hay muchos clientes FTP que están disponibles para varios sistemas operativos. Una plataforma FTP popular que se puede usar en todas las plataformas es FileZilla. También es gratis para descargar y usar.
Necesitará un editor de código para modificar su plantilla. El uso de un editor de código le facilitará la búsqueda del código que necesita editar, ya que utilizan resaltado de sintaxis especial. Puede usar Notepad ++ si es un usuario de Windows o TextWrangler si es un usuario de Mac. Otra opción es usar Sublime Text 3, que se puede usar en computadoras Windows y Mac, así como en Linux, y ofrece una prueba gratuita.
Finalmente, deberá comprar y descargar una plantilla de página de destino y preparar el contenido que se incluirá en su página de destino. Puede encontrar muchas plantillas de páginas de destino html en Envato Elements que fueron diseñadas específicamente para las páginas de destino. Una vez que encuentre una plantilla que le guste, cómprela y descárguela en su computadora. Asegúrese de descomprimir la carpeta y guardarla en algún lugar donde pueda acceder a ella fácilmente..
Reúna todas las imágenes y el texto que desea agregar a su página de destino. Mantenerlo todo en un solo lugar hará que sea más fácil agregarlo a la plantilla y transferir las imágenes a su servidor.
Con todo en su lugar, es hora de personalizar la plantilla y agregarle su información. Empecemos por familiarizarnos con la estructura de la plantilla..
Como se mencionó anteriormente, estoy usando la plantilla de página de destino de HTML puro.
Después de descomprimir la carpeta, puede ver que la plantilla de página de inicio de bootstrap contiene varias subcarpetas y varios archivos HTML. Así es como se ve la estructura:
También observará varios archivos HTML, que representan diferentes versiones de demostración de las plantillas de página de destino HTML. Puede hacer clic con el botón derecho o hacer doble clic en cada uno de los archivos HTML para abrirlos en su navegador preferido y ver cómo se ven. Cuando haya encontrado la versión de demostración que le gusta, cierre todas las demás pestañas.
Trabajaré con la plantilla index-normal-scroll-countdown.html durante el resto del tutorial.
Ahora que su plantilla de página de destino HTML seleccionada está abierta en su navegador, es hora de reemplazar la información con la suya. La forma más sencilla de hacerlo es comprender qué parte del código de la plantilla debe modificarse. Comencemos haciendo clic derecho en la primera línea de texto debajo del contador y haciendo clic en Inspeccionar.
Aparecerá un nuevo panel en la parte inferior de la ventana de su navegador. Notará que muestra el código HTML que conforma nuestra plantilla en el lado izquierdo, así como el CSS que proporciona estilos para la plantilla en el lado derecho..
Como se puede ver en la captura de pantalla, la oración seleccionada está entre Etiquetas que representan párrafos. La mayoría de las etiquetas en HTML consisten en pares de etiquetas que tienen una etiqueta de apertura y una de cierre. El contenido se debe colocar entre esas etiquetas para aparecer en una página web:
opacidad-0 "> Antes del lanzamiento, disfruta de un Oportunidad muy limitada suscribiéndose a nuestro boletín.
Haga clic en el siguiente botón para obtener más información sobre nuestro proyecto..
Para reemplazar la información ficticia en la plantilla, todo lo que necesita saber qué etiquetas contienen la información que desea editar. Luego, puede encontrar esas etiquetas en el editor de código e insertar su propio texto..
Ahora que sabe cómo encontrar el código que necesita editar, vuelva a la carpeta de plantillas, haga clic con el botón derecho en el archivo HTML elegido y seleccione Abrir con,y elige el editor de código que descargaste anteriormente. Debería ver el código HTML completo que conforma su plantilla..
Desplácese hacia abajo en el editor de código hasta que encuentre la misma línea de código que destacamos en el navegador. Debe estar alrededor de la línea 75-76. Luego, haga clic dentro de la
etiqueta, resalte el texto y reemplácelo con el suyo.
Para editar el resto de la plantilla, simplemente repita los pasos anteriores hasta que se incluya toda la información que desee.
También puede eliminar secciones de la plantilla si no desea que aparezcan. Del mismo modo, también puede duplicar secciones si desea incluir más información. Simplemente seleccione la parte de la plantilla comenzando con la etiqueta de apertura y resaltando todo hasta e incluyendo la etiqueta de cierre para esa parte y elimine o copie y pegue esa sección a continuación.
Cuando haya terminado de reemplazar el contenido, es hora de reemplazar las imágenes de muestra con las suyas. Para facilitar este proceso, observe los nombres de las imágenes en la carpeta img de la plantilla y luego nombre sus imágenes con los mismos nombres. Luego, seleccione todas las imágenes de marcador de posición, elimínelas y coloque sus imágenes en la carpeta img en su lugar.
Ahora es el momento de ajustar la apariencia de su plantilla y editar los estilos en CSS. Por defecto, la plantilla Pure viene con diferentes hojas de estilo para la versión oscura y clara de la plantilla:
Para saber qué hoja de estilo necesita editar, mire su archivo HTML en el editor de código y busque la línea que sea similar a esta:
Vaya a la carpeta de su plantilla y abra la hoja de estilo correspondiente en el editor de código.
Para ver qué línea de código y estilo necesita editar, puede repetir el mismo proceso que usamos para editar el código HTML..
En su navegador, haga clic con el botón derecho en cualquier elemento que desee diseñar y seleccione Inspeccionar. Mire a la derecha y verá los estilos utilizados para esa parte de la plantilla:
Como se puede ver en la captura de pantalla, el Inspector Nos muestra los estilos utilizados para el texto del párrafo. Cambie al editor de código y al archivo de hojas de estilo. Desplácese hacia abajo hasta que encuentre una línea de código que comience con p.
Aquí puede cambiar las fuentes utilizadas, el tamaño de la fuente y el color del texto..
Si desea cambiar el color de fondo de la plantilla, busque la línea de código que dice cuerpo seguido de corchetes y luego ingrese el código de color HEX después de
la parte que lee el color de fondo.
No olvide guardar todos los cambios que haya hecho haciendo clic en Guardar en su editor de código.
Una vez que haya modificado la plantilla a su gusto, deberá subirla a su servidor de alojamiento. Su proveedor de alojamiento le enviará por correo electrónico toda la información que necesita para transferir archivos con FTP..
Inicie su programa FTP como FileZilla. Notará la barra superior donde puede ingresar el nombre del servidor, su nombre de usuario y contraseña. Usando la información proporcionada por su anfitrión, conéctese a su servidor haciendo clic en Conexión rápida.
En el lado izquierdo de la ventana de FileZilla, ubique la carpeta con su plantilla en su computadora y haga clic en ella para expandirla. Seleccione todos los archivos y carpetas y arrástrelos hacia el lado derecho de la pantalla a la carpeta public_html.
Una vez que se hayan cargado todos los archivos, abra su navegador e ingrese su nombre de dominio. Enhorabuena, tu sitio ya está en vivo.!
Una página de destino puede hacer maravillas para su negocio o producto mientras se prepara para el lanzamiento. Estos son algunos consejos que le ayudarán a aprovechar al máximo sus plantillas de página de destino HTML y le ayudarán a crear un bombo:
Para obtener más información sobre las plantillas de página de destino HTML o las plantillas de página de destino de arranque, consulte estos tutoriales:
Con la ayuda de una plantilla HTML, puede hacer que su página de inicio se ejecute rápidamente. Comience seleccionando una de nuestras plantillas de página de destino HTML de Envato Elements o una de las plantillas de página de destino de bootstrap de ThemeForest. Luego, use nuestro tutorial para guiarlo a través del proceso de configuración.
Accentsconagua