Unlimited PowerPoint templates, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Business
  2. HTML5

Cómo crear sitios web para restaurantes con plantillas en HTML5

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called How to Make Great Restaurant Websites (Ultimate Guide).
23 Best Responsive Restaurant & Food Website HTML Templates for 2020
25+ Best Restaurant & Cafe Website Designs (For Visual Ideas)

Spanish (Español) translation by Ana Paulina Figueroa Vazquez (you can also view the original English article)

Crear un sitio web para tu restaurante es crucial si quieres atraer nuevos clientes. Afortunadamente, hoy en día es más fácil que nunca tener sitios web para restaurantes funcionando en poco tiempo. Gracias a las numerosas plantillas en HTML para restaurantes, no necesitas pasar tiempo buscando un diseñador ni aprendiendo cómo crear sitios web para restaurantes desde cero.

Es fácil modificar una plantilla en HTML y cargarla a un servidor de alojamiento. Otro beneficio de una plantilla en HTML es que usa menos código complejo, lo que permite que los sitios web para restaurantes creados con dichas plantillas sean más rápidos al cargar que aquellos creados en un CMS como WordPress.

Si te has estado preguntando cómo crear un sitio web para un restaurante, esta publicación es para ti. Te mostraremos lo que necesitarás para comenzar, cómo usar una plantilla para restaurantes en HTML5, cómo personalizarla, y finalmente cómo cargarla a tu servidor de alojamiento para que puedas mostrar lo que tu restaurante tiene para ofrecer.

Herramientas y recursos que necesitas para lanzar el sitio web de un restaurante

El primer paso para crear tu sitio web para un restaurante es reunir todas las herramientas y recursos que necesitarás. Entre estos se encuentran un nombre de dominio, una empresa de alojamiento, un programa FTP, el contenido que se incluirá en tu sitio y una plantilla para restaurante. Echemos un vistazo más de cerca a cada uno de estos recursos a continuación.

1. Nombre de dominio

Un nombre de dominio es la manera en la que tus clientes te encontrarán en línea. La opción más obvia es usar el nombre de tu restaurante como nombre de dominio junto con una extensión .COM. Sin embargo, los mejores nombres de dominio a menudo ya ha sido reclamados, así que no te sorprendas si el nombre de dominio que quieres ya está ocupado.

Si ese es el caso, puedes intentar ponerte en contacto con el propietario del dominio y preguntar sobre la posibilidad de comprarle el nombre de dominio. Otra opción es experimentar con una extensión diferente o añadir las palabras restaurante o el nombre de tu ciudad.

2. Empresa de alojamiento

Además del nombre de dominio, también necesitarás un servidor de alojamiento que albergará todos los archivos correspondientes al sitio web del restaurante por ti. Vale la pena mencionar que puedes comprar un nombre de dominio en el mismo momento en el que compres un plan de alojamiento. De hecho, la mayoría de las empresas de alojamiento te ofrecerán un dominio gratuito como incentivo por inscribirte a su plan de alojamiento.

Antes de decidirte por una empresa de alojamiento, asegúrate de hacer tu diligencia debida y de leer las reseñas de terceros en sitios de restaurantes independientes. Esto te dará una imagen más precisa de la calidad del alojamiento y de la satisfacción del cliente.

3. Un cliente FTP

La siguiente tarea en tu lista es descargar un cliente FTP para que puedas transferir los archivos de tu plantilla desde tu computadora hasta tu servidor. Dependiendo de tu sistema operativo encontrarás muchos programas FTP para Windows, Mac y Linux. También puedes considerar FileZilla, ya que es un cliente multiplataforma que se puede descargar y usar de forma gratuita.

4. Un editor de código

Necesitarás un editor de código para editar los archivos de tu plantilla. Un editor de código es similar a un editor de texto como el Bloc de notas, pero usa el resaltado de sintaxis para mayor claridad.

Yo prefiero Sublime Text, que puede ser usado en Mac, Windows y Linux ― también hay una versión de prueba gratuita disponible ― pero cualquier editor de código será suficiente.

5. Una plantilla HTML y contenido

Finalmente, necesitarás una plantilla para sitios web de restaurantes además del contenido que irá en tu sitio web. Si bien quizá estés esperando conseguir una plantilla de HTML para restaurantes gratuita, descubrirás que una plantilla prémium ofrece más funciones. Puedes comenzar echando un vistazo a nuestra colección de plantillas para sitios web de restaurantes para encontrar la adecuada para tu negocio. Para los fines de este tutorial, voy a usar la plantilla Resta. Esta plantilla tiene un diseño simple y limpio con un atractivo control deslizante de ancho completo. También incluye un formulario de reserva en funcionamiento, por lo que podrás aceptar reservas en línea.

Resta template

En cuanto al contenido, reúne toda la información que quieras incluir, por ejemplo cuándo abrió tu restaurante como negocio, qué tipo de cocina ofreces, tus listas de menú, biografías del personal, fotografías de rostro y cualquier otra cosa que sea relevante para tu restaurante.

Ahora es momento de familiarizarte con la plantilla y personalizarla según tus necesidades. ¡Continuemos!

Cómo editar el contenido de tu plantilla para restaurante

Una vez que hayas encontrado una plantilla en HTML5 para restaurantes que te guste, cómprala y luego guarda la carpeta comprimida en tu computadora. Descomprímela en una ubicación de fácil acceso, como tu Escritorio o tu carpeta de Descargas.

1. Comprende la estructura de la plantilla para restaurantes

Antes de que puedas comenzar a modificar los archivos, es una buena idea tener al menos una comprensión superficial de la estructura de la plantilla. Ten en cuenta que algunas de las carpetas y archivos pueden ser diferentes de lo que se muestra a continuación. Sin embargo, en la mayoría de los casos encontrarás una carpeta que contiene la documentación de la plantilla y otra que contiene la plantilla en sí.

Template structure

Dentro de la carpeta de la plantilla real, generalmente encontrarás las siguientes subcarpetas y archivos:

  • CSS. Esta carpeta contendrá todas las hojas de estilo que controlan las fuentes, colores, columnas, márgenes, rellenos y otros estilos visuales de tu plantilla.
  • JS. La carpeta de JavaScript que contiene los archivos JavaScript usados para validar formularios, gestionar los controles deslizantes, diversas animaciones y otros efectos.
  • Archivos HTML. También encontrarás varios archivos HTML que representan a las páginas de tu plantilla para el sitio web de tu restaurante, tales como la página de inicio, acerca de, servicios, etc.
  • Imágenes. En esta carpeta encontrarás todas las imágenes de fondo, además de otras imágenes marcadoras de posición usadas en la plantilla.

También puedes encontrar los siguientes archivos y carpetas, como en la plantilla Resta:

  • Audio. Esta carpeta contiene el archivo de audio que se reproduce como música de fondo cuando alguien entra al sitio web de tu restaurante.
  • Fonts (Fuentes). La carpeta Fonts guarda todas las fuentes de iconos usadas a lo largo de la plantilla.
  • Mail.php. Este archivo se usa para configurar el formulario de contacto y reservas.

Con la estructura fuera del camino, comencemos a modificar la plantilla.

2. Reemplaza la información predeterminada

Comenzaremos editando el archivo index.html. Haz clic con el botón derecho en el archivo y selecciona Open in browser (Abrir en el navegador). Esto abrirá el archivo en tu navegador predeterminado y te permitirá ver qué partes necesitan ser cambiadas.

Como puedes ver en la siguiente captura de pantalla, hay bastantes cosas que debemos editar, entre ellas:

  • el texto del encabezado en la diapositiva
  • la información "acerca de"
  • la sección de platillos populares
  • la sección de la lista del menú

Para que sea más fácil encontrar esa información en tu plantilla, haz clic con el botón derecho en el texto del encabezado y luego en Inspect (Inspeccionar).

Aparecerá un panel en la parte inferior que muestra el código HTML que conforma a nuestra plantilla.

Inspecting code

En ese panel notarás que la línea de texto que seleccionamos para inspeccionar está resaltada en azul del lado izquierdo del panel de inspección. Si ves a la derecha, notarás que se muestra un código ligeramente diferente que controla el estilo visual de esa línea de texto.

Como puedes ver en la captura de pantalla, el texto del encabezado que seleccionamos se encuentra entre las etiquetas <h2>, que representan a los encabezados en HTML.

Para editar la plantilla, localiza las etiquetas que envuelven al contenido que quieras cambiar, búscalas en el editor de texto y cambia el contenido por tu información.

Con estos conocimientos, regresa a la carpeta de la plantilla, haz clic con el botón derecho en index.html y selecciona Open with Sublime Text (Abrir con Sublime Text) o con el editor de código que descargaste anteriormente.

Editing HTML

Ahora debes encontrar el mismo código que viste en el panel de inspección de tu navegador.

Desplázate hacia abajo hasta que lo encuentres en la línea 298. Luego haz clic entre las etiquetas <h4> y agrega tu propio mensaje de bienvenida.

Luego, en la línea 301 haz clic entre las etiquetas <h1> y reemplaza la oración con la tuya.

De manera similar puedes seguir estos pasos una y otra vez: inspecciona la información que quieras cambiar, identifica las etiquetas que contengan ese texto, encuéntralas en tu editor de código y sustitúyelas con tu texto.

Para cambiar el logotipo y otras imágenes en el sitio, tómate un momento para ver el nombre de las imágenes utilizadas en la carpeta img de tu plantilla. Luego cambia el nombre de tus imágenes usando esos nombres, selecciona todas las imágenes marcadoras de posición, elimínalas y luego coloca tus imágenes en la carpeta img.

Finalmente, para modificar el formulario de reservas para que éstas lleguen a la dirección correcta, ve a la carpeta de tu plantilla, haz clic con el botón derecho en el archivo mail.php y ábrelo con tu editor de código. En la línea de código que tiene la dirección de correo falsa, haz clic entre las comillas, selecciona la dirección de correo y sustitúyela con la tuya.

Editing the email address

Cómo personalizar la apariencia de tu plantilla

Una vez que hayas reemplazado toda la información, es momento de estilizar la plantilla a tu gusto. De vuelta en la carpeta de tu plantilla, haz clic con el botón derecho en el archivo style.css y ábrelo en tu editor de código.

Editing CSS

Para editar el CSS sigue los mismos pasos utilizados para editar el HTML. Haz clic con el botón derecho en el elemento que quieras estilizar y haz clic en inspeccionar, pero esta vez busca el código del lado derecho de la pestaña Inspector y luego localiza el mismo código en el editor. La pestaña Inspector te mostrará qué línea de CSS necesitas editar.

Por ejemplo, vamos a cambiar el encabezado para que sea de color verde azulado escribiendo un código hexadecimal de esta forma:

color: #65b5c1;

También vamos a cambiar el texto del párrafo a un color más oscuro de esta forma:

color:#222222;

Cómo cargar tus archivos al servidor

Ahora que ya has personalizado la plantilla, todo lo que queda por hacer es cargar tus archivos al servidor de alojamiento. Tu servicio de alojamiento debió haberte enviado los detalles de inicio de sesión por correo electrónico, así que busca ese mensaje de correo y anota el nombre del servidor, tu nombre de usuario y contraseña.

Ejecuta tu programa FTP. Introduce la información proporcionada por tu servicio de alojamiento en los campos adecuados y luego haz clic en Connect (Conectar).

Uploading files

El lado izquierdo de la pantalla te permitirá localizar la carpeta que contiene los archivos de la plantilla en tu computadora. Haz clic para expandirla. Selecciona todos los archivos y carpetas, arrástralos hasta el lado derecho de la pantalla y suéltalos dentro de la carpeta public_html.

Espera a que los archivos se carguen y luego abre tu navegador y escribe tu nombre de dominio. ¡Enhorabuena, tu sitio ya está en funcionamiento!

5 consejos para crear un impresionante sitio web para tu restaurante

Una vez que tu sitio esté activo, hay algunos ajustes adicionales que puedes hacer para causarle a tu audiencia una gran primera impresión.

  1. Agrega tu sitio a tus perfiles de redes sociales. Ahora que tienes un sitio web para tu restaurante, es momento de actualizar la sección de biografía y sitio web de todos tus perfiles de redes sociales. Avisa a tus seguidores que pueden consultar tu menú en línea y hacer una reserva. Comparte la captura de pantalla del sitio web de tu restaurante y aliéntalos a reservar ofreciéndoles un código de descuento o un cupón de promoción.

  2. Incluye reseñas de clientes anteriores. Tus clientes anteriores probablemente saben lo buenos que son tus platillos y el gran ambiente que ofrece tu restaurante. Muestra sus testimonios y reseñas en el sitio web de tu restaurante. Esto ayudará a alentar a los visitantes nuevos a que vayan a tu restaurante.

  3. Incluye tu restaurante en Google Business. Incluir tu restaurante en Google Business permitirá que el sitio web aparezca en los resultados de las búsquedas con una mayor probabilidad, y si incluyes tu sitio web, esto permitirá que los buscadores se pongan en contacto contigo directamente.

  4. Comprime tus imágenes. Tener fotos excelentes es imprescindible para un restaurante, pero asegúrate de comprimir el tamaño de tus imágenes. Esto permitirá que tu sitio se cargue más rápido y mejorará la experiencia del usuario que lo visite.

  5. Incrusta un mapa de Google. Añadir un mapa de Google al sitio web de tu restaurante permitirá que tus posibles clientes te encuentren con mayor facilidad y que obtengan instrucciones de cómo llegar al estar fuera de casa.

Aprende más sobre sitios web para restaurantes

En este tutorial hemos explorado cómo crear un sitio web para un restaurante. Para aprender más acerca de sitios web para restaurantes, echa un vistazo a alguno de los tutoriales mostrados a continuación:

Comienza el sitio web de tu restaurante con una plantilla en HTML

Gracias a una variedad de plantillas en HTML5 para sitios web de restaurantes, no es necesario que gastes mucho dinero para crear un sitio hermoso para el tuyo. Ahora que te hemos mostrado cómo crear un sitio web para un restaurante, estás listo para comenzar. Explora nuestra colección de plantillas para restaurantes y usa nuestra guía para lanzar el sitio web de tu restaurante hoy mismo.

Advertisement
Advertisement
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.