DiseƱar un sitio 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!

PubliƩ par Max CamuƱas sur vendredi 8 septembre 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

You have Successfully Subscribed!

Pin It on Pinterest

Share This