Lección 05

Diseñando las páginas del sitio web

En un sitio web, las páginas son los tipos de contenido más importantes. Ya sea que quieras tener un blog y/o una tienda online o cualquier tipo de proyecto, el sitio web deberá contener páginas.

En esta lección no vamos a crear las páginas sino a diseñarlas. En la lección, crear una página web con WordPress, puedes encontrar una completa información para que aprendas a crear páginas con WordPress.

Índice del contenido
    Add a header to begin generating the table of contents

    1. ¿Qué opciones tenemos para diseñar las páginas de nuestro sitio web?

    Para diseñar las páginas de nuestro sitio web podemos hacerlo de varias maneras: utilizando plantillas prediseñadas que, por defecto, suelen incluir muchos temas, mediante editores de contenido o manualmente.

    En esta lección vamos a ver 2 opciones que podemos implementar para diseñar las páginas de nuestro sitio web.

    En el desarrollo de este curso de WordPress estamos trabajando con el tema Astra. Un tema ligero, rápido y personalizable con el que podremos crear un sitio web totalmente profesional.

    Curso de WordPress

    Uno de los mejores temas que puedes instalar para comenzar a crear un proyecto profesional con WordPress, es Astra. Este tema ofrece una versión gratuita, que puedes instalar desde WordPress y, una de pago, con excelentes opciones de diseño.

    Este tema Multipurpose (múltiples propósitos) es ideal para crear blogs, páginas y tiendas online en una misma instalación.

    1.1 Plantillas prediseñadas del tema

    La mayoría de temas PREMIUM y FREEMIUM (como Astra) suelen ofrecer una serie de plantillas prediseñadas para instalar en un sitio web. Cada una de estas plantillas es un DEMO completo de sitios web hechos con el tema.

    Al instalar una plantilla, se creará un sitio web con colores, tipografía, imágenes, páginas, entradas, productos y menú. Vamos, que te hace todo el trabajo con solo un clic para que solo tengas que modificarlo a tu gusto.

    Existe un plugin gratuito llamado Astra Starter SItes, que genera plantillas prediseñadas para Astra, el cual incluye varios diseños que podrás instalar si no quieres comenzar desde cero.

    Al instalar Astra Starter Sites puedes importar toda la estructura, contenido y configuración de cualquier diseño, según el editor de contenidos que vayas a utilizar, y luego modificar todo el sitio según tus necesidades.

    La finalidad de instalar estos diseños es facilitar el trabajo. De esta manera no hay que realizar un diseño desde cero.

    Para instalar el plugin:

    1. Dirígete al apartado Plugins >> Añadir nuevo.
    2. En el campo de búsqueda escribe Astra Sites.
    3. Haz clic en Instalar ahora y seguidamente en Activar.

    Dirígete al apartado Apariencia >> Astra Starter SItes. Selecciona el editor de contenidos que estés utilizando y haz clic en Siguiente.

    En el desarrollo de este curso de WordPress estamos trabajando con Elementor que es un editor de contenidos potente y 100% compatible con Astra.

    Seleccionar el editor de contenidos de Astra Starter SItes
    Seleccionar el editor de contenidos de Astra Starter SItes

    A continuación, podrás observar todas las plantillas disponibles desarrolladas con Astra y Elementor. Si pasas el ratón por cada una aparecerá el botón Vista previa.

    Las plantillas con la etiqueta AGENCY, solo están disponibles si tienes la versión PRO de Astra (MINI AGENCY BUNDLE o AGENCY BUNDLE).

    El resto de plantillas sin etiquetas son las que están disponibles y puedes instalar en tu sitio web. Para instalar una plantilla, haz clic en el botón Vista previa de cualquiera de ellas.

    Plantillas de Astra Starter Sites con Elementor
    Plantillas de Astra Starter Sites con Elementor

    Verás un DEMO de la plantilla con las secciones principales. Puedes navegar por el DEMO para comprobar si te gusta o prefieres buscar otra plantilla.

    Tendrás la opción de importar todo el contenido necesario (plugins, opciones, textos y multimedia, widgets) que integrarán tu sitio web. Haciendo clic en el icono  verás que significa cada opción.

    También tienes la posibilidad de borrar el contenido si has importado otra plantilla anteriormente.

    Importar una plantilla en Astra
    Importar una plantilla en Astra

    1.2 Aprendiendo desde cero

    Otra forma de diseñar las páginas de un sitio web es manualmente. Esta es la opción más elegida por los usuarios que están aprendiendo WordPress.

    Como la finalidad de este curso de WordPress es que aprendas a trabajar con Astra y Elementor, iremos creando las páginas desde cero.

    Además, si no estás familiarizad@ con los editores de contenido, no recomiendo trabajar con una plantilla prediseñada ya que el proceso es más complejo y, de esa forma, será más difícil que aprendas a trabajar con un sitio web.

    Anuncio publicitario

    2. ¿Qué páginas vamos a diseñar?

    Durante el desarrollo de este curso de WordPress te he recomendado crear una estructura inicial antes de comenzar a trabajar con WordPress. Es un simple Excel en el que podemos organizar nuestro sitio web.

    Vamos a recordar el Excell:

    Excel con la estructura inicial de un proyecto en WordPress (sitio web)
    Excel con la estructura inicial de un proyecto en WordPress (sitio web)

    En la imagen anterior, se muestra un ejemplo de una estructura básica para el desarrollo de un sitio web con WordPress, hecha en Excel.

    • Los números en rojo indican la posición que tendrá cada apartado en el menú principal y secundario del sitio web. Esta numeración también corresponderá con el campo Orden de cada página en WordPress.
    • La columna MENU será el nombre que llevará cada apartado del menú.
    • La columna TÍTULO será el título principal de cada apartado.
    • La columna URL es el enlace permanente (URL amigable) de cada página.

    Puedes descargar el fichero Excel desde el enlace: estructura inicial.

    Como ya hemos creado algunas de las páginas de nuestro Excel, ahora vamos a diseñarlas pero, ¿por dónde empezamos?

    Mi recomendación y, casi como una ley que suelo aplicar siempre, es comenzar por todas las páginas internas y dejar la página de inicio para el final. Y te preguntarás, ¿por qué?

    Ten en cuenta que la página de inicio es básicamente un resumen de todo nuestro sitio web por lo que no tendría sentido comenzar por esta página si no tenemos claro que vamos a ofrecer en el resto del sitio web.

    3. Diseñando las páginas de nuestro sitio web

    Tomando como referencia el Excel de nuestra estructura inicial, a continuación, vamos a ver una serie de recomendaciones que debemos tener en cuenta para diseñar las páginas de nuestro sitio web.

    3.1 Página: Conócenos

    Dependiendo de si nuestro sitio web es una empresa, un negocio o un sitio personal, podemos llamarle a esta página de varias maneras: conócenos, sobre nosotros, la empresa, sobre mí...

    Básicamente la información que compone está página es:

    • Una presentación de nuestro negocio, cuándo se fundó, a qué se dedica la empresa, la misión y visión entre otras.
    • Quién o quienes somos, las habilidades que poseemos como profesionales y por qué nos dedicamos a eso entre otros.

    Tenemos que ser claros y transparentes con el usuario. Intenta incluir imágenes reales como fotos de tu local o fotos tuyas. De esta manera el usuario o cliente confiarán en ti y en el producto que ofreces.

    3.2. Página: Servicios

    Este apartado es el motor de nuestro sitio web. Será nuestro catálogo o portfolio donde expondremos nuestros "puntos fuertes" con la finalidad de generar potenciales clientes.

    Podemos ofrecer servicios en nuestro local, servicios online o a domicilio. En el caso de ofrecer productos físicos, tenemos la opción de crear una tienda online aunque podemos aprovechar este espacio para hacer mención a nuestro principal producto.

    • Tenemos que hacer un diseño muy llamativo y amplio que cree "necesidad" en el cliente.
    • Las imágenes juegan un papel muy importante ya que es la primera toma de contacto visual entre nuestro futuro cliente y el servicio que necesita. Añade imágenes reales, de alta calidad que llame la atención del cliente.
    • El texto descriptivo de cada servicio tiene que ser corto pero conciso. No es recomendable extenderse mucho explicando el servicio ya que suele cansar al cliente. Un párrafo de 5 líneas estaría bien.
    • Si ofreces servicios extensos, que necesiten una descripción más amplia, valora la posibilidad de crear una página interna para cada servicio que estén enlazados desde esta página.
    • Si ofreces muchos servicios (10 por ejemplo), intenta exponer los 5 o 6 servicios más importantes y el resto en forma de resumen a menos que todos sean importantes. En este caso puedes exponerlos todos.
    • Procura que el diseño de cada servicio tenga el mismo formato: si la descripción incluye un título, un párrafo y una imagen, el resto deberían de ser iguales.
    • El diseño en "zig zag" suele ayudar a entender el contenido. Si el primer servicio tiene el texto a la izquierda y la imagen a la derecha, invierte el contenido en el segundo servicio (texto a la derecha e imagen a la izquierda) y así sucesivamente.

    Estas son algunas recomendaciones que he querido compartir contigo para diseñar la página de servicios de nuestro sitio web.

    Eres libre de hacerlo como más gustes. Al fin y al cabo dependerá del tipo de servicios que ofrezcas y del tipo de cliente que quieras tener.

    3.3 Página: Contacto

    La página de contacto suele estar compuesta por un formulario de contacto, un mapa de localización (en el caso de ser un negocio físico), detalles como dirección, teléfono(s), horario, correo electrónico entre otros.

    Aunque parezca sencillo diseñar una página con estos elementos hay que tomarse su tiempo y pensar bien cómo distribuir estos elementos para lograr el objetivo: que el cliente nos contacte.

    Por supuesto, todo dependerá del tipo de negocio que tengamos. Por ejemplo:

    Recordando el proyecto que estamos desarrollando en este curso de WordPress: crear el sitio web de un Gimnasio, no tiene sentido tener un formulario de contacto o un correo electrónico al principio de la página.

    Lo más lógico es incluir, a primera vista, un mapa de la ubicación de nuestro local y el horario que es lo que nuestros clientes en realidad necesitan conocer.

    De nada nos vale haber diseñado un sitio web realmente brutal si no conseguimos que los clientes nos contacten. Tenemos que lograr conversiones y, para esto, tenemos que ponérselo fácil al cliente: darles exactamente lo que ellos quieren.

    Una recomendación...

    Los formularios de contacto suelen ser herramientas muy poderosas y efectivas para lograr conversiones en nuestro sitio web pero, no siempre suelen ser "cómodos".

    Si quieres conseguir clientes, no le hagas rellenar un formulario de 20 campos preguntándole hasta el nombre de su perro. Un formulario de no más de 3 o 4 campos (nombre, teléfono, correo electrónico, selector de servicios o mensaje) será más que suficiente. Es la primera toma de contacto, así que no le agobies porque lo perderás.

    Tampoco obligues al usuario a ingresar todos los datos: si el teléfono es obligatorio, el correo no tiene por qué serlo y viceversa. Nuevamente repito, todo dependerá del tipo de negocio que tengamos y a unos les gusta hablar y a otros escribir.

    En la lección, formularios en WordPress, puedes encontrar una completa información para que aprendas a crear formularios.

    3.4 Página: Blog

    Esta si que es fácil. Es obvio que está página solo existirá si queremos integrar un blog en nuestro sitio web.

    En la lección, entradas en WordPress, veremos cómo crear la página del blog de nuestro sitio web.

    3.5 Otras páginas

    Además de las páginas que acabamos de ver, también existen otras páginas, no menos importantes, que tenemos que tener en cuenta en el desarrollo de nuestro sitio web.

    I. Páginas legales

    Como te he mencionado anteriormente, el objetivo fundamental de desarrollar un sitio web es el de conseguir clientes y ganar dinero.

    Como habrán personas y dinero (facturas, impuestos...) involucrados, es necesario incluir cierta información legal en nuestro sitio web para protegernos, tanto nosotros, como al cliente y/o usuario.

    Por lo general, estas páginas, suelen ir ubicadas en el menú del pié de página de nuestro sitio web.

    El nombre, uso y contenido de cada una de estas páginas variará según el país en el que te encuentres. Te recomiendo que acudas a un gestor o abogado para que te asesore y puedas cumplir con las leyes de tu país.

    II. Páginas de la tienda

    Las páginas de la tienda que aparecen en el Excel se crearán automáticamente cuando instalemos WooCommerce.

    En la lección, crear una tienda online con WordPress, veremos cómo crear y usar estas páginas en nuestro sitio web.

    III. Página 404

    Esta es una página que casi nadie suele tener en cuenta en el desarrollo de un sitio web. No es una página obligatoria pero, ¿sabías que esta página es una poderosa herramienta para el marketing?

    En la lección, crear una página 404 en WordPress, veremos cómo crear esta página y que importancia tiene en nuestro sitio web.

    4. Diseñando la portada de nuestro sitio web

    La página de inicio o "portada" (o Home en algunos países), es la página más importante de todo nuestro sitio web. Será por la que nos conozcan, la que compartiremos en redes sociales o la que aparezca en nuestras tarjetas de presentación.

    Una vez que hayamos diseñado todas las páginas internas de nuestro sitio web, conoceremos perfectamente todo el contenido. Por lo tanto, en esta página, tenemos que añadir todo ese contenido de una manera resumida.

    Básicamente, la página de inicio, está compuesta por los siguientes bloques:

    Si te fijas bien, en la página de inicio, hemos incluido un poco de cada una de las páginas internas que hemos diseñado añadiendo algunos bloques adicionales que nos ayudarán con el SEO y generarán confianza en el cliente.

    Anuncio publicitario

    5. Conclusión

    Después de haber leído esta emocionante lección, seguro que estarás preparad@ para diseñar todas las páginas de tu sitio web. Casi todo han sido recomendaciones que he querido compartir contigo y que he aprendido después de muchos años de experiencia.

    Tienes toda la libertad del mundo de hacerlo como mejor te parezca pero, el éxito o fracaso que tengas, dependerá de entender muy bien tu negocio y saber como llegar a tus usuarios y/o clientes.

    ¿Te ha gustado?

    Te estaría muy agradecido si pudieras valorar esta lección y compartirla en las redes sociales. De esta manera me animas a continuar trabajando en este curso de WordPress y ayudas a otras personas que desean aprender.

    (4 votos, promedio: 4.5 de 5)

    Share on facebook
    Facebook
    Share on twitter
    Twitter
    Share on linkedin
    LinkedIn
    Share on telegram
    Telegram
    Share on whatsapp
    WhatsApp
    Share on email
    Email

    Este curso es gratis y siempre lo será pero, mantenerlo, requiere de mucho tiempo y esfuerzo. Si te gusta el curso y te ha ayudado, considera invitarme un café haciendo un pequeño donativo a este proyecto que he creado con el para ti y muchas personas que desean aprender. Las donaciones me ayudan a seguir trabajando en este fantástico curso gratuito. ¿Me invitas un café?.

    Suscríbete y aprende WordPress desde cero.

    No me gusta el SPAM y se que a ti tampoco. Sólo recibirás información útil sobre WordPress.

    Al enviar, confirmas que has leído y aceptas la política de privacidad. Conoce nuestro compromiso con tu privacidad.

    Comparte tu experiencia

    Deja un comentario si tienes alguna duda o cuéntanos cómo ha sido tu experiencia.

    guest
    0 Comentarios
    Inline Feedbacks
    Ver todos los comentarios
    0
    ¿Dejas un comentario? Gracias!x
    ()
    x
    Ir arriba

    Tratamiento de datos personales

    • Responsable: MARIA ANTONIETA BEAUTY CONCEPT, S.L.
    • Finalidad: Suscribirte a la lista de correos electrónicos.
    • Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en legal@gianoliveira.com, así como el derecho a presentar una reclamación ante una autoridad de control.
    • Destinatarios: Los datos no se cederán a terceros salvo en los casos en que exista una obligación legal.
    • Información adicional: En mi política de privacidad encontrarás información adicional sobre la recopilación y el uso de su información personal incluida información sobre acceso, conservación, rectificación, eliminación, seguridad y otros temas.