Tiempo lectura: 
10 comentarios
07/09/2020
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:
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:
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:
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:
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.
Te dejo un ejemplo de pƔgina con elementos animados:
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) 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:
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 š
Un compendio de buenas ideas para armar un proyecto web.
Gracias por compartirlo Max, saludos.
Me alegro que te guste Manfred š
Gracias por pasarte y comentar!
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Ć?
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!
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
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
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!
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!
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!
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