Categoria: Plugins, Wordpress

L

as herramientas disponibles en Worpress para maquetar una web son múltiples. Se pueden encontrar como plugins (gratuítos como Page Builder o de pago como Visual Composer, entre otros) o incorporados en algunos temas Premium (Avada, Jupiter).

Estos plugins son de gran ayuda para la maquetación web, pero hay algunas cosas que debemos tener en cuenta si queremos una web con diseño One Page, que muestre diferentes presentaciones según el dispositivo en que se visualice la web y un menú con efecto ascensor (ver elenalasierra.com).

De ello hablaré en esta entrada, basándome en mi  experiencia y en cómo he ido mejorando el modo de maquetar mis sites para optimizar mi rendimiento.

Para comenzar dividiremos nuestra pagina (con el maquetador) en tantas secciones como queramos enlazar desde el menú.

Por ejemplo, para desarrrollar una web One Page cuyo menú conste de los siguientes enlaces : INICIO, SOBRE MI, PORTFOLIO, BLOG y CONTACTO necesitaría crear estas 5 secciones con las que deseo enlazar (este ejemplo es el de mi pagina de Web Developer, puedes enlazar desde el menú superior).

Si trabajamos con Visual Composer crearé las secciones INICIO, SOBRE MI, PORTFOLIO, BLOG y CONTACTO con el elemento ‘Page Section’  (otros plugins denominan a este elemento de modo similar) y asignaré a cada sección creada un identificador diferente a cada una de ellas.  Este identificador lo utilizaremos después para  crear nuestro menú desde el menú principal de WordPress: Apariencia/ Menú y dirigir a una sección u otras las consultas que realicen  los usuarios de nuestra web.

Visual Composer

A continuación dividiremos cada sección en filas con el elemento ‘Row’ o ‘Fila’ de nuestro maquetador, tantas filas como visualizaciones distintas tendrá la sección en los diferentes dispositivos .

Por ejemplo, es habitual que una página contenga una sección que contiene un slide, pero este slide es sustituido por otro tipo de contenido en su versión para móvil. En este caso la sección (llamémosla ‘SLIDE’) contendrá 2 filas, una de ellas incluirá el slide y la seleccionaremos con la opción de que se oculte en los dispositivos móviles. A la otra fila le marcaremos la casilla de mostrar sólo en los dispositivos móviles.

Procediendo de igual modo para todas las secciones conseguiremos que nuestro menú enlace perfectamente con la sección y fila adecuada, en función del dispositivo desde el que visualicemos las página.

Por último, comentar que no todos los maquetadores disponen de la opción de crear secciones (sí disponible en Visual Composer). En este caso probar a crear  Filas dentro de otra Fila, con lo que el elemento ‘Page Section’ lo sustituiriamos por una ‘R0w’ (fila) que contendrá a su vez las restantes filas a mostrar en los diferentes dipositivos.

Post recomendados
Showing 3 comments
  • Sebastián
    Responder

    Muy buen aporte, gracias por el post.

  • Javier
    Responder

    Gracias por darme la oportunidad de conocer un plugin sin coste para maquetar una página- saludos

Deja un comentario