Cuando se trata de crear un sitio web de negocios, hay varias formas de hacerlo. Puedes optar por un creador de sitios, puedes hacer que un desarrollador diseñe un sitio para ti o puedes usar un CMS como WordPress. Si bien no hay nada de malo en esas opciones, pueden ser demasiado grandes si todo lo que necesita es un sitio web sencillo para mostrar de qué se trata su negocio y ofrecer a los clientes potenciales una forma de comunicarse con usted..
Si no necesita funciones extravagantes y no se prevé bloggear regularmente o vender en línea, entonces lo que necesita es una plantilla de sitio web que responda a HTML. Aquí, lo guiaremos a través de los pasos de configuración para que pueda iniciar sin demora.
La belleza de las plantillas de sitios web empresariales sensibles a HTML es que son fáciles de usar y no requieren ningún conocimiento técnico especial para subirlas a su servidor de alojamiento. También son más fáciles de modificar que otros creadores de sitios web y CMS.
En este tutorial, le mostraremos cómo modificar y cargar una plantilla de sitio web con HTML en su servidor para que pueda crear un sitio web empresarial con facilidad..
Antes de comenzar con la modificación de la plantilla de sitio web receptivo, hay algunas cosas que necesitará. Incluyen un nombre de dominio y un plan de alojamiento, un programa de FTP y un editor de código, una plantilla de sitio web empresarial con HTML y, por último, el contenido y las imágenes que irán a su sitio. Echemos un vistazo mejor a cada uno de los siguientes.
Lo primero que debe hacer es comprar un nombre de dominio y un plan de alojamiento para que su sitio web se pueda encontrar en línea. En la mayoría de los casos, podrá obtener un nombre de dominio gratuito cuando se inscriba en un plan de alojamiento con la mayoría de los proveedores. Cuando se trata de su nombre de dominio, una buena idea sería utilizar su nombre comercial real como el nombre de dominio.
Si es posible, intente obtener una extensión .COM ya que es la más popular, pero tenga en cuenta que encontrar un gran nombre de dominio con .COM no es tan fácil hoy como lo fue antes. En ese caso, es posible que desee ver otras extensiones como .CO o un dominio local como .US.
Cuando se trata de proveedores de alojamiento, puede encontrar paquetes de alojamiento que comienzan en $ 5 / mes. Querrá leer sus Preguntas frecuentes para ver cómo manejan el servicio al cliente y tener una idea de sus términos y condiciones. Además, considere leer los comentarios de un host en particular en sitios web de terceros para ver lo que dicen sus clientes sobre ellos.
Los siguientes elementos de nuestra lista son un cliente FTP como FileZilla y un editor de código como Sublime Text. El propósito de un cliente FTP es conectar su computadora al servidor de alojamiento y cargar fácilmente todos los archivos de su sitio web al mismo tiempo, en lugar de cargarlos uno por uno a través del panel de control del host. Un editor de código, por otro lado, lo ayudará a editar los archivos de la plantilla y facilitará la búsqueda de diferentes partes del código que necesitan edición..
Tanto Sublime Text como FileZilla se pueden descargar gratis y se pueden usar en computadoras Mac, Windows y Linux.
Finalmente, necesitará una plantilla HTML y el contenido que desea agregar a su sitio web. Puede encontrar una gran cantidad de plantillas HTML sensibles diseñadas específicamente para sitios web de negocios en mercados como Envato Elements. Una vez que encuentre uno que le guste, simplemente descárguelo, descomprima la carpeta y guárdelo en un lugar al que pueda acceder fácilmente.
En cuanto al contenido, considere la copia que irá a las páginas de su sitio y explique qué hace su empresa, a quién sirve y cómo ayuda a los clientes con productos y servicios. También puede agregar información sobre personas clave en su empresa. No olvides elementos visuales como imágenes y logos..
Ahora es el momento de editar el contenido dentro de la plantilla y reemplazar la información falsa con la suya. Para los propósitos de este tutorial, usaré la plantilla de Moose. Esta plantilla de sitio web adaptable presenta un diseño plano y sensible e incluye varias plantillas de página diferentes adecuadas para propietarios de negocios, agencias creativas, estudios digitales y más.
Antes de comenzar a editar la plantilla, es importante comprender la estructura para saber qué archivos necesitará modificar. Como puede ver en la captura de pantalla a continuación, la carpeta descomprimida tiene tres subcarpetas.
La única plantilla llamada es la subcarpeta que contiene todos los archivos que conforman nuestra plantilla de sitio web sensible, así como algunas subcarpetas adicionales. Si está utilizando una plantilla diferente, es posible que no vea todos estos archivos y subcarpetas, pero en general, puede esperar encontrar:
Haga doble clic en el archivo index.html o haga clic derecho y seleccione Abrir en Chrome (o cualquier navegador que estés usando). Cuando observa la plantilla en su navegador, puede ver que hay un control deslizante donde debe reemplazar las imágenes y los subtítulos, una sección de servicios donde debe agregar su propia información y más.
La forma más fácil de encontrar dónde editar esta información es hacer clic derecho en el texto y hacer clic en Inspeccionar enlazar.
Aparecerá la ventana del Inspector, y podrá ver el código HTML utilizado en la plantilla de sitio web sensible a HTML en el lado izquierdo de la ventana y el código CSS responsable del estilo visual de la plantilla a la derecha. lado de la mano de la ventana del inspector.
Mire el código HTML y verá que la línea de código que contiene el texto seleccionado está resaltada. En el ejemplo de captura de pantalla, el encabezado que estoy inspeccionando y que está resaltado en la ventana del Inspector está entre
las etiquetas contienen el elemento HTML de párrafo.
Para modificar la plantilla, necesita saber qué etiquetas contienen el texto que desea editar y encontrarlas nuevamente en el editor de código. Luego, puedes reemplazar el texto por el tuyo..
Ahora que sabemos qué etiquetas necesitamos editar, es hora de abrir el archivo index.html en un editor de código como Sublime Text. Haga clic derecho en el archivo y haga clic en Abrir con texto sublime (o cualquier otro editor de código).
Con su archivo HTML abierto en el editor de código, desplácese hacia abajo hasta que encuentre el mismo texto que estaba inspeccionando en su navegador. Luego, haga clic en entre
A continuación, haga clic en entre etiquetas, elimine el texto e ingrese un breve lema o texto descriptivo. También puede eliminar partes de la plantilla de sitio web sensible que no necesitará. Si observa la captura de pantalla a continuación, notará que reemplazé el texto del encabezado y eliminé la fila inferior de los servicios..
Para editar el resto de la página de inicio y otras páginas de la plantilla, todo lo que necesita hacer es repetir este proceso una y otra vez..
Ahora, vamos a explicar cómo reemplazar fácilmente las imágenes ficticias. Primero, deberá colocar todas sus imágenes en la carpeta de imágenes en la carpeta de su plantilla de sitio web con HTML. Luego, vuelva a su navegador e inspeccione una parte de la página con una imagen.
El inspector le dirá el nombre de la imagen, así como las etiquetas que contienen esa imagen. Ahora, puede volver al editor de código y buscar ese fragmento de código. Luego, reemplace el nombre de la imagen con el nombre de su imagen y guarde los cambios.
Ahora que ha ingresado su propio contenido, analicemos cómo diseñar la plantilla. En mi caso, la plantilla Moose incluye algunos esquemas de color prefabricados que se encuentran en el estilo> CSS> color subcarpeta Esto significa que puedo cambiar fácilmente los colores simplemente cambiando la hoja de estilo en la parte superior del documento para mi hoja de estilo de color preferida.
Encuentre la siguiente línea de código en la plantilla HTML:
Cambiar el nombre a blue.css cambiará el color rojo de la plantilla a un tono azul:
También puede editar la hoja de estilo principal llamada style.css e incluir sus fuentes y colores preferidos.
Simplemente siga el principio de edición de HTML: primero, inspeccione el elemento que desea diseñar, luego encuéntrelo en el archivo style.css y experimente con diferentes valores.
El último paso para crear un sitio web sensible es cargar sus archivos en su servidor de alojamiento. Su proveedor de alojamiento debe haberle enviado un correo electrónico inmediatamente después de haberse registrado con la información necesaria para la transferencia de archivos FTP.
Deberá iniciar FileZilla (u otro programa FTP) y luego ingresar la información requerida en la barra superior. Esto significa que debe ingresar el nombre del servidor, su nombre de usuario y su contraseña, y luego hacer clic en Conexión rápida:
Luego, querrá ubicar la carpeta de plantillas de sitios web con respuesta HTML en el lado izquierdo del programa FTP y expandirla haciendo clic en ella. En la ventana de abajo, seleccione todos los contenidos y arrástrelos hacia el lado derecho de la pantalla de FTP. Coloque los archivos en la carpeta raíz de su servidor de alojamiento, que suele ser la carpeta public_html.
Espere a que finalice el proceso de carga y luego abra su navegador e ingrese su nombre de dominio. Tu sitio debería estar ahora en vivo..
Ahora que su sitio está activo, es esencial que incluya información crucial que todos los sitios web de negocios deberían tener..
Crear un sitio web empresarial con capacidad de respuesta es fácil una vez que comprende las partes que conforman la estructura de la plantilla y cómo encontrar la información que necesita modificar. Utilice nuestro tutorial para configurar el sitio web de su empresa, y no se olvide de revisar nuestra colección de plantillas HTML de negocios sensibles para encontrar la perfecta para su sitio..