10 ideas para maquetar y diseñar páginas en WordPress

Autor: Max Camuñas

Fecha: 03/10/2017

Diseñar una página web siempre implica crear una serie de páginas adicionales, como son el sobre mí, contacto, las páginas de servicios, portfolio y otras similares. Por ese motivo, en este artículo te traigo una serie de ideas para maquetar y diseñar páginas en WordPress.

Crear este tipo de páginas complementarias es fundamental para darle una estructura a un sitio web y mostrarle al usuario toda la información relacionada con tu negocio o proyecto.

Debes tener en cuenta que estas páginas deben seguir la estética e imagen de tu sitio web: mismos colores, mismo estilo para los fotografías, mismas o similares tipografías, textos, etc.

Para diseñar páginas en WordPres puedes usar los diferentes maquetadores visuales que existen en el mercado. Ya sabes que yo uso Divi (de Elegant Themes) en mis diseños.

Como no me quiero enrollar hablando sobre los diferentes maquetadores, te traigo unas cuantas ideas que te van ayudar a maquetar y diseñar páginas en WordPress.

¡Allá voy!

 

Ideas y ejemplos para maquetar y diseñar páginas en WordPress


 

1) Slider o carrusel de entradas

Los sliders o carruseles de entradas son muy habituales en los sitios web con estructura de blog.

Sirven para mostrar varias entradas de forma muy visual y con un gran tamaño, pues suelen disponer de una imagen con ancho completo, el título de post, la fecha y demás metadatos, y también un botón para acceder a su lectura.

Son un tipo de recurso de maquetación que no recomiendo para cualquier diseño, pues suelen consumir una gran cantidad de recursos y también de tiempo hasta que se deslizan todas las entradas.

Un ejemplo:

Ideas y ejemplos para maquetar y diseñar páginas en WordPress

 

2) Listados con varias columnas

Son listados son un recurso muy habitual a la hora de maquetar y diseñar páginas en WordPress.

Gracias a ellos puedes mostrar tus diferentes clientes, diseños, colaboraciones, trabajos, etc.

Si recurres a distribuir el contenido en varias columnas, conseguirás un diseño más atractivo y organizado.

Un ejemplo:

Ideas y ejemplos para maquetar y diseñar páginas en WordPress

 

3) Header o cabecera con ancho completo

Si hay una tendencia que predomina en el diseño web en estos momentos es la forma de plasmar diferentes elementos y contenido en un solo espacio de forma muy visual y creativa.

En ese sentido, es muy habitual encontrar sitios web que tienen cabeceras con ancho completo y en las que incluyen diferentes elementos: texto (títulos, subtítulos, descripciones, etc), botones, imágenes e incluso vídeos.

Algunos ejemplos:

 

4) Tablas de contenido

Las tablas también son un recurso muy utilizado en diseño web, ya que permiten ordenar y mostrar gran cantidad de información en un espacio reducido.

Son habituales para mostrar precios, listar contenido, características o detalles de un producto / servicio, etc.

Un ejemplo:

 

5) Iconos

Los iconos son un recurso gráfico que están muy de moda en diseño web para ilustrar, por ejemplo, servicios, apartados de una web o diferentes ideas.

Además, existen iconos de dos tipos: vectores e iconos web (los que incluyen las plantillas o maquetadores).

Un ejemplo de cada uno de ellos:

Ideas y ejemplos para maquetar y diseñar páginas en WordPress

Ideas y ejemplos para maquetar y diseñar páginas en WordPress

 

6) Galerías de imágenes

Las galerías son un recurso ideal para mostrar diferentes fotografías (ya hablé hace un tiempo de varios plugins para crear galerías de imágenes).

Son muy buena idea para páginas de fotógrafos o de cualquier servicio que se pueda mostrar como portfolio de trabajos.

Un ejemplo:

 

7) Cuadrículas o formato grid

Organizar el contenido en forma de cuadrícula o formato grid es un tipo de diseño que también está muy de moda.

Sirve tanto para mostrar entradas de un blog como para presentar diferentes servicios o apartados en una web.

Aquí te dejo varios ejemplos:

Ideas y ejemplos para maquetar y diseñar páginas en WordPress

Ideas y ejemplos para maquetar y diseñar páginas en WordPress

 

8) Pestañas

Otra forma muy interesante de presentar el contenido son las pestañas. Permiten organizar las entradas de un sitio web en función de diferentes temáticas, categorías o tipos de posts.

Aunque parezca un menú, realmente no lo es. Son diferentes pestañas dentro de una página de WordPress que muestran el contenido por categorías (en este caso, como es una web de viajes, por destinos turísticos).

Además, cada pestaña incluye una descripción del destino, un botón que te lleva a otra página donde hay más información sobre esa ruta y varias entradas en forma de cuadrícula (grid).

Aquí puedes ver un ejemplo:

 

9) Animaciones

Las animaciones son otro gran recurso visual que se suele usar para maquetar y diseñar páginas en WordPress de forma muy atractiva y visual.

Pero ojo, ¡mucho cuidado con ellas! porque las carga el diablo y no siempre quedan bien. Para usarlas hay que seguir ciertos criterios de diseño y animar aquellos elementos que realmente aporten valor y destaquen (no animar por animar sin criterio alguno).

Las animaciones están incluidas en la mayoría de plantillas de pago para WordPress, así como en los diferentes maquetadores visuales.

En el caso de que quieras animar elementos en tu sitio web, pero tu plantilla no las incluya y no utilices un maquetador, siempre puedes recurrir al código CSS.

En el siguiente vídeo puedes ver cómo funcionan las animaciones en Divi, el maquetador que yo utilizo, pero me consta que en otros como Elementor Pro este tipo de efectos son muy similares.

Así son las nuevas animaciones de Divi

Probando en mi nueva web las animaciones que acaba de lanzar Divi para módulos, filas y secciones.Un gran paso necesario ¡Me encantan!

Posted by Max Camuñas on Friday, September 8, 2017

 

Antes de pasar al siguiente y último recurso de diseño, no me quiero olvidar del efecto Parallax.

¿Qué es el efecto Parallax?

Se trata de un efecto que produce un desplazamiento de los elementos a una velocidad diferente al del resto de la página cuando el usuario se desplaza

Mira este ejemplo:

Ideas y ejemplos para maquetar y diseñar páginas en WordPress

 

10) Botones

Por último, otro recurso muy extendido son las llamadas a la acción que incluyen botones.

Se suelen utilizar como elemento único o como acompañamiento a títulos o llamadas a la acción.

Además, también sirven para colocar disparadores, es decir, ventanas emergentes que aparecen cuando se hace clic en un botón.

Aquí puedes ver un ejemplo:

Ideas y ejemplos para maquetar y diseñar páginas en WordPress

Por supuesto, existen un montón de recursos diferentes que puedes utilizar para maquetar y diseñar tus páginas en WordPress. En este listado he recogido los que son habituales en mis diseños 🙂

IMG: Shutterstock

8 Comentarios

  1. Manfred Camero

    Un compendio de buenas ideas para armar un proyecto web.
    Gracias por compartirlo Max, saludos.

    Responder
    • Max Camuñas

      Me alegro que te guste Manfred 🙂

      Gracias por pasarte y comentar!

      Responder
  2. RaMGoN

    Buena recopilación de recursos que aplicar en cualquier diseño web Max.

    La verdad es que bien utilizados, con una cierta jusitificación, y sin abusar dan un aspecto genial a una web.

    Me imagino que te estás reservando el cómo para otro post, ¿a qué sí?

    Responder
    • Max Camuñas

      Muchas gracias!

      Eso es, hay ciertos recursos, como las animaciones, con las que hay que tener cuidado.

      Lo cierto es que en estoy reservando un post sobre maquetación exclusiva en Divi 😉

      Un abrazo!

      Responder
  3. Dantes Peak

    Hola Max
    Gracias por el post muy útil de verdad, con esto da nuevas ideas para ir «llenando el sitio» que son útiles a la hora de diseñar o ver cómo se puede variar. Una parte también que se puede poner sería testimonios o llamados de suscripción creo yo. Y bueno todo lo demás está bueno manito arriba

    Responder
    • Max Camuñas

      Hola Dantes,

      Totalmente de acuerdo, los testimonios son fundamentales si ofreces algún servicio o vendes artículos.

      Las llamadas a la acción las he mencionado en el último punto 😉

      Gracias por pasarte! Saludos

      Responder
  4. Javier Mozos

    Hola Max!

    Acabo de descubrir tu blog y me encanta lo que veo, muy buenos consejos y muy prácticos, ya sé dónde acudir para temas de diseño web 😉

    Uno de los elementos que a mi pareced no pueden faltar es como comentas en el último punto, una llamada a la acción hacia el Leadmagnet.

    Bien sabes que sin una lista de suscriptores poco o nada podrás hacer esa pedazo de comunidad activa alrededor de tu marca.

    Para mi proyecto trabajo con Thrive architect, para mi nivel sobre diseño (que es nulo) me viene genial.

    Me guardo el Tip de las 8 para alguna ocasión, me ha gustado 😉

    Un saludo Max!

    Responder
    • Max Camuñas

      Hola Javier!

      Muchas gracias por pasarte por el blog y por comentar. Me alegro mucho que te guste el contenido!

      He estado viendo tu web y me ha gustado mucho también. Un diseño muy limpio y ordenado.

      Espero verte más por aquí.

      Abrazo!

      Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Para cumplir con el nuevo RGPD y que tus datos estén a salvo, debes leer y aceptar mi política de privacidad. Tus datos serán guardados en SiteGround y WordPress, mi proveedor de hosting y el CMS que utilizo en esta web.

Soy Max Camuñas y te doy la bienvenida a mi blog (mi casa).

Por aquí hablo sobre los temas que me apasionan: WordPress, Marketing, Social Media o Blogging.

Me encanta ayudar a otras empresas a marcas a crear el diseño de su web desde cero.

¡MÁS SOBRE MÍ!

masterclass
CÓMO PLANIFICAR TU PÁGINA WEB PARA QUE TU NEGOCIO BRILLE
¡accede gratis!