Ideas para maquetar y diseƱar pƔginas en WordPress
Ideas para maquetar y diseƱar pƔginas en WordPress

10 ideas para maquetar y diseƱar pƔginas en WordPress

07/09/2020
Tiempo lectura:

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.

Ten 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 existen diferentes plugins «arrastrar y soltar» o maquetadores visuales. Si me lees habituamente, ya sabes que yo uso Divi (de Elegant Themes) en mis diseños.

Como no me quiero enrollar hablando sobre los diferentes builders, 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:

10 ideas 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:

10 ideas 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:

10 ideas para maquetar y diseƱar pƔginas en WordPress
10 ideas para maquetar y diseƱar pƔginas en WordPress

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:

10 ideas para maquetar y diseƱar pƔginas en WordPress

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:

10 ideas para maquetar y diseƱar pƔginas en WordPress
10 ideas 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:

10 ideas para maquetar y diseƱar pƔginas en WordPress

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:

10 ideas para maquetar y diseƱar pƔginas en WordPress
10 ideas para maquetar y diseƱar pƔginas en WordPress
10 ideas 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:

10 ideas para maquetar y diseƱar pƔginas en WordPress

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.

Te dejo un ejemplo de pƔgina con elementos animados:

10 ideas para maquetar y diseƱar pƔginas en WordPress

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:

10 ideas 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:

10 ideas 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 šŸ™‚

Summary
šŸŽØ 10 ideas para maquetar y diseƱar pĆ”ginas en WordPress
Article Name
šŸŽØ 10 ideas para maquetar y diseƱar pĆ”ginas en WordPress
Description
En este artƭculo te traigo una serie de ideas y ejemplos para maquetar y diseƱar pƔginas en WordPress: sobre mƭ, contacto, servicios, portolfio y otras.
Author
Publisher Name
Max CamuƱas
Publisher Logo

10 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
  5. Ricardo de la Rosa

    Excelentes ideas Max.

    En definitiva, elementos que nunca deben faltar al momento de estar elaborando un sitio web para que quede muy bien presentable.

    En lo personal, me gusta mucho añadir listados con varias columnas, cabecera y los botones para ir indicando la llamada a la acción, tal como lo comentario anteriormente.

    ĀæHay alguno en especial que siempre te guste incluir?

    Saludos!

    Responder
    • Max CamuƱas

      Hola Ricardo,

      Las voy usando todas en función de lo que requiera el proyecto, aunque soy muy fan de las animaciones y los iconos. De hecho, todas son capturas de webs que he diseƱado šŸ™‚

      ”Gracias por pasarte y comentar!

      Saludos

      Responder

Enviar un comentario

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

[Información BÔsica sobre Protección de Datos] Responsable: MÔximo Camuñas FernÔndez. Finalidad: moderar y responder comentarios. Legitimación: Consentimiento. Destinatarios: No se ceden a terceros. Se pueden producir transferencias. Derechos: PodrÔs ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en info@maxcf.es así como el derecho a presentar una reclamación ante una autoridad de control. 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.

¿Necesitas una pÔgina web, blog, landing o tienda online?
”PIDE TU
PRESUPUESTO!
masterclass

10 CLAVES PARA QUE TU WEB BRILLE CON LUZ PROPIA

MASTERCLASS: 10 claves para que tu web brille con luz propia

guĆ­a

PARA DISEƑAR LOGOTIPOS MEMORABLES

GUƍA para diseƱar logotipos memorables