Advertisement
  1. Business
  2. Responsive Web Design

Cómo hacer sitios web responsivos con plantillas para empresas

by
Read Time:10 minsLanguages:
This post is part of a series called How to Make Responsive Business Websites (Tutorial Guide).
How to Make Responsive WordPress Websites (With Themes)
13 Quick Responsive Web Design Tips & Tricks for 2018

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Cuando se trata de crear tu sitio web de negocios, existen varias maneras de hacerlo. Puedes optar por un constructor de sitios, puedes contratar a un desarrollador para que diseñe el sitio por ti, o puedes utilizar un CMS como WordPress. Aunque ninguna de estas opciones tiene nada de malo, pueden resultar excesivas si todo lo que necesitas es un sencillo sitio web para mostrar de qué va tu negocio y proporcionar a tus actuales y potenciales clientes una manera de ponerse en contacto contigo.

Si no necesitas elegantes características y no publicas regularmente blogs u ofreces productos en venta online, lo que necesitas es una plantilla de sitio web responsiva HTML. Aquí, te guiaremos a través de los pasos de configuración para que puedas ponerte en marcha en poco tiempo.

Cómo hacer un sitio web responsivo en HTML

La belleza de las plantillas HTML de sitios web responsivas para negocios es que son fáciles de usar y no requieren ningún conocimiento técnico especial para subirlas a tu servidor de alojamiento. También son más fáciles de modificar que otros constructores de sitios web o CMSs (sistemas de gestión de contenido).

En este tutorial, te mostraremos cómo modificar y cargar una plantilla de sitio web HTML responsiva en tu servidor para que puedas crear con facilidad un sitio web empresarial responsivo.

Antes de empezar

Antes de que empecemos con la modificación de la plantilla de sitio web responsiva, hay algunas cosas que vas a necesitar. Incluyen un nombre de dominio y un plan de alojamiento, un programa FTP, un editor de código, una plantilla responsiva HTML de sitio web de negocios y, por último, el contenido e imágenes que vayan a ir en tu sitio. Echemos un mejor vistazo a cada uno de ellos a continuación.

1. Nombre de dominio y alojamiento

Lo primero que debes hacer es comprar un nombre de dominio y un plan de alojamiento para que tu sitio web pueda ser visitado online. En la mayoría de los casos, los proveedores de alojamiento te proporcionarán un nombre de dominio gratuito al adquirir uno de sus planes de hosting. En lo que respecta a tu nombre de dominio, sería buena idea usar el nombre real de tu negocio como nombre de dominio.

Si es posible, trata de conseguir una extensión .COM ya que es la más popular, pero ten en cuenta que encontrar un buen nombre de dominio con extensión .COM no es tan fácil hoy en día como lo era antes. En ese caso, es posible que desees consultar otras extensiones como .CO o un dominio local como .US.

En lo que respecta a los proveedores de alojamiento, puedes encontrar planes de alojamiento a partir de $5/mes. Consulta su sección de preguntas frecuentes para ver cómo gestionan el servicio al cliente y hacerte una idea de cuáles son sus términos y condiciones. Además, considera la posibilidad de leer las opiniones sobre un proveedor en particular en sitios web de terceros para ver qué dicen sobre ellos sus clientes.

2. Cliente FTP y editor de código

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 tu ordenador al servidor de alojamiento y cargar fácilmente los archivos de tu sitio web a la vez, en lugar de tener que cargarlos uno por uno a través del panel de control del servidor. Por otro lado, un editor de código, te ayudará a editar los archivos de la plantilla y facilitará la búsqueda de las diferentes partes del código que necesiten ser editadas.

Tanto Sublime Text como FileZilla pueden descargarse de forma gratuita y se pueden utilizar tanto en ordenadores Mac, como Windows y Linux.

3. La plantilla HTML responsiva de sitio web que hayas elegido y el contenido del sitio web

Por último, necesitarás una plantilla HTML y el contenido que quieras añadir a tu sitio web. Puedes encontrar gran cantidad de plantillas HTML responsivas creadas específicamente para sitios web de negocios en marketplaces como Envato Elements. Una vez encuentres una que te guste, simplemente descárgala, descomprime su carpeta y guárdala en algún lugar al que puedas acceder fácilmente.

En cuanto al contenido, considera la copia que irá en las páginas de tu sitio y explica qué hace tu empresa, a quién sirve y cómo ayuda a los clientes mediante sus productos y servicios. También puedes añadir información sobre personas clave en tu empresa. Y no olvides elementos visuales como imágenes y logotipos.

Cómo personalizar el contenido de la plantilla

Ahora, es el momento de editar el contenido dentro de la plantilla y reemplazar la información ficticia con la tuya propia. En este tutorial, voy a utilizar la plantilla Moose. Esta plantilla de sitio web responsiva cuenta con un diseño plano y responsivo e incluye varias plantillas de página diferentes adecuadas para propietarios de negocios, agencias creativas, estudios digitales y mucho más.

1. Comprender cómo se estructura la plantilla de sitio web responsivo

Antes de empezar a editar la plantilla, es importante comprender su estructura para saber qué archivos tendrás que modificar. Como puedes ver en la siguiente captura de pantalla, la carpeta descomprimida tiene tres subcarpetas.

template folders and filestemplate folders and filestemplate folders and files

La que se llama plantilla es la subcarpeta que contiene todos los archivos que componen nuestra plantilla de sitio web responsivo, así como algunas subcarpetas adicionales. Si utilizas una plantilla diferente, es posible que no veas todos estos archivos y subcarpetas, pero generalmente, será así:

  • La carpeta imágenes que contiene todas las imágenes de demostración utilizadas en la plantilla.
  • La carpeta JS o JavaScript que contienen todo el código JavaScript necesario para que la plantilla funcione correctamente. En términos generales, no tendrás que editar el contenido de esta carpeta, ya que JavaScript se utiliza para funciones adicionales como la animación o la validación de formularios.
  • La carpeta CSS o Estilos que contiene los archivos CSS que necesitarás editar para personalizar fuentes, colores y otros estilos visuales.
  • Varios archivos HTML para diferentes páginas de tu sitio como index.html, about.html, contact.html y otras.

2. Reemplazar el contenido ficticio

Haz doble clic en el archivo index.html o haz clic con el botón derecho sobre él y selecciona Abrir en Chrome (o en cualquier otro navegador que estés usando). Cuando veas la plantilla en tu navegador, podrás ver que hay un slider en el que debes reemplazar las imágenes y los subtítulos, una sección de servicios donde necesitas añadir tu propia información y muchas cosas más.

La forma más fácil de encontrar dónde editar esta información es hacer clic con el botón derecho sobre el texto y hacer clic en el enlace Inspeccionar.

Inspector windowInspector windowInspector window

Aparecerá la ventana Inspector y podrás ver el código HTML utilizado en la plantilla HTML responsiva del sitio web en el lado izquierdo de la ventana y el código CSS responsable del estilo visual de la plantilla en el lado derecho de la ventana del Inspector.

Fíjate en el código HTML y verás que la línea de código que contiene el texto seleccionado aparece resaltada. En el ejemplo de la captura de pantalla, el encabezado que estoy inspeccionando y que está resaltado en la ventana del Inspector está entre etiquetas <H3>, que son etiquetas HTML. Las etiquetas HTML consisten en una etiqueta de apertura y otra de cierre y conformando un par que contiene los elementos HTML correspondientes. Por ejemplo, las etiquetas <h1> se denominan etiquetas de encabezado y se utilizan para contener un encabezado de nivel 1. De igual manera, las etiquetas <p> contienen el elemento HTML de párrafo.

Para modificar la plantilla, debes saber qué etiquetas contienen el texto que deseas editar y volver a buscarlas en el editor de código. A continuación, puedes reemplazar el texto por el tuyo propio.

Ahora que sabemos qué etiquetas debemos editar, es hora de abrir el archivo index.html en un editor de código como Sublime Text. Haz clic con el botón derecho en el archivo y después haz clic de nuevo en Abrir con Sublime Text (o cualquier otro editor de código).

Con el archivo HTML abierto en el editor de código, desplázate hacia abajo hasta que encuentres el mismo texto que estabas inspeccionando en tu navegador. A continuación, haz clic entre las etiquetas <h3>, elimina el texto ficticio e introduce el tuyo propio.

HTML file openHTML file openHTML file open

A continuación, haz clic entre las etiquetas <span>, elimina el texto e introduce un breve eslogan o texto descriptivo. También puedes eliminar partes de la plantilla del sitio web responsivo que no vayas a necesitar. Si observas la captura de pantalla de abajo, notarás que he reemplazado el texto del encabezado y he eliminado la fila inferior de los servicios.

Website screenshotWebsite screenshotWebsite screenshot

Para editar el resto de la página de inicio y otras páginas de la plantilla, todo lo que necesitas hacer es repetir este proceso una y otra vez.

Ahora, vamos a explicar cómo reemplazar fácilmente las imágenes ficticias. En primer lugar, tendrás que colocar todas las imágenes en la carpeta de imágenes de la carpeta de la plantilla HTML responsiva del sitio web. A continuación, vuelve a tu navegador e inspecciona una parte de la página en la que haya una imagen.

El Inspector te indicará el nombre de la imagen, así como qué etiquetas contienen esa imagen. Ahora, puedes volver al editor de código y buscar ese fragmento de código. A continuación, reemplaza el nombre de la imagen por el nombre de tu imagen y guarda los cambios.

Cómo aplicar estilo a la plantilla responsiva de sitio web

Ahora que has introducido tu propio contenido, vamos a explicar cómo aplicar estilo a la plantilla. En mi caso, la plantilla Moose incluye algunos esquemas de color predefinidos que se encuentran en la subcarpeta estilo > CSS > color. Esto significa que puedo cambiar fácilmente los colores sustituyendo simplemente la hoja de estilo especificada en la cabecera del documento por mi hoja de estilo de color preferida.

Busca la siguiente línea de código en la plantilla HTML:

<link href="style/css/color/red.css" rel="stylesheet">

Cambiar el nombre a blue.css cambiará el color rojo de la plantilla a un tono azul:

Change the colors by changing the stylesheetChange the colors by changing the stylesheetChange the colors by changing the stylesheet

También puedes editar la hoja de estilos principal llamada style.css e incluir tus fuentes y colores preferidos.

Moose HTML responsive website templateMoose HTML responsive website templateMoose HTML responsive website template

Simplemente sigue el principio de edición HTML: primero, inspecciona el elemento al cual deseas aplicar estilo y, a continuación, búscalo en el archivo style.css y experimenta con diferentes valores.

Cómo cargar tus archivos en el servidor

El último paso para crear un sitio web responsivo consiste en cargar tus archivos en tu servidor de alojamiento. Tu proveedor de alojamiento debería haberte enviado un correo electrónico inmediatamente después de haberte registrado con la información necesaria para la transferencia de archivos vía FTP.

Tendrás que iniciar FileZilla (u otro programa de FTP) y luego ingresar en la barra superior la información necesaria. Esto significa que debes indicar el nombre del servidor, tu nombre de usuario y tu contraseña, y luego hacer clic en QuickConnect:

QuickConnectQuickConnectQuickConnect

A continuación, querrás localizar la carpeta de plantilla HTML de sitio web responsivo en el lado izquierdo del programa FTP y expandirla haciendo clic sobre ella. En la ventana de abajo, selecciona todo el contenido y arrástralo al lado derecho de la pantalla FTP. Suelta los archivos en la carpeta raíz de tu servidor de alojamiento, que suele ser la carpeta public_html.

Espera a que finalice el proceso de carga y, a continuación, abre el explorador e introduce tu nombre de dominio. Ahora tu sitio debería estar en vivo.

4 elementos clave que tu sitio web de negocios responsivo debe incluir

Ahora que tu sitio está publicado online, es esencial que incluyas información crucial que cada sitio web de empresa debería tener.

  1. Página Sobre nosotros y página Servicios. Una página "sobre nosotros" le indica a los visitantes la historia detrás de tu marca y les ayuda a entender cómo pueden ayudarles tus servicios. A partir de aquí, puedes enlazar naturalmente a tu página de servicios que debería proporcionar una breve descripción de todo lo que está incluido en el servicio, así como el precio de cada paquete.
  2. Página de contacto. No es necesario decir que necesitas una página de contacto para que los visitantes puedan ponerse en contacto contigo y así programar una llamada u obtener más información sobre ti. Tu página de contacto debe incluir un sencillo formulario de contacto, pero también puede listar tus perfiles de redes sociales o un número de teléfono.
  3. Prueba social. Piezas de prueba social como testimonios, reseñas o menciones en otras publicaciones son excelentes medios para consolidar tu credibilidad y acreditar tu experiencia. Valora la inclusión de algunos de ellos en la página de inicio y crea una página dedicada que albergue todos los elogios actuales y futuros que recibas.
  4. Llamada a la acción. Por último, no olvides que necesitas dejar claro a tus visitantes lo que quieres que hagan. Mostrar simplemente tus servicios no será suficiente aliciente para animarlos a concertar una llamada. Incluye varias llamadas a la acción en tu página de inicio y en el resto de tu sitio que faciliten a los visitantes la toma de medidas.

Crea hoy mismo el sitio web responsivo para tu empresa

Crear un sitio web de negocios responsivo es fácil una vez entiendes las partes que componen la estructura de la plantilla y sabes cómo encontrar la información que necesitas modificar. Utiliza nuestro tutorial para configurar el sitio web de tu empresa y no olvides echar un vistazo a nuestra colección de plantillas HTML responsivas para negocios para encontrar aquella que sea perfecta para tu sitio.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.