Concepto visual de las secciones

Desde un punto de vista puramente visual o de diseño, y de acuerdo con nuestro modelo conceptual de cuadrícula, una sección equivale, grosso modo, a una fila. La sección puede tener cualquier altura, puede estar formada por una o varias columnas, y puede ocupar todo el ancho de la página o solo un determinado porcentaje de esta.

Una página web puede estar formada solo por una sección, pero lo más habitual es que esté formada por varias secciones. A su vez, las diferentes secciones de una página web pueden tener o no el mismo número de columnas. Por último, los bordes de las columnas de las diferentes secciones de una página web no tienen por qué coincidir verticalmente entre sí:

Concepto organizativo de las secciones

Una sección no es solo una fila o franja horizontal, sino un elemento dotado de una dimensión estructural y organizativa. Para hablar en sentido estricto de una “sección”, es necesario que este elemento desempeñe una clara función en el sitio web, tanto a nivel de diseño como de contenido.

Un ejemplo de este concepto puede verse en la página de inicio de este sitio web: dejando aparte el menú de cabecera, y el pie de página, que son elementos estructurales básicos equivalentes a secciones, el contenido de la página está organizado en seis áreas horizontales consecutivas (seis secciones): presentación, contenido, metodología, localización, calendario de las sesiones y profesor del curso. Las ultimas cinco secciones están enlazadas entre sí mediante un menú de anclaje vertical.

La entrada Secciones de una página web se publicó por primera vez en Curso de WordPress 2020.

Funcionamiento general del plugin Atomic Blocks

Los alumnos y alumnas del curso no deben sentirse abrumados ante la variedad y aparente complejidad de los bloques de este plugin; de hecho, para una persona habituada a trabajar con el editor actual de WordPress, el uso de los bloques de Atomic Blocks no es difícil, pero requiere práctica, paciencia y mucha atención a los detalles.

Lo primero que vamos a hacer es mostrar el funcionamiento general del plugin una vez activado, y para ello vamos a presentar sus bloques y la forma de acceder a ellos. El screencast que incluimos a continuación muestra cómo hacerlo.

Uso de las secciones y los diseños

La forma más sencilla y productiva de comenzar a trabajar con los bloques de Atomic Blocks es utilizar el botón de Layouts, que aparece en la parte superior del editor de WordPress. Una vez que se instala y activa el plugin Atomic Blocks, cuando pulsemos sobre este botón se abrirá una ventana modal que muestra una serie de diseños organizados en tres pestañas:

• Sections, que equivalen a secciones de página.
• Layouts, o diseños completos de varios tipos de páginas.
• Favorites, o favoritos. Esta pestaña aparece vacía hasta que marquemos un diseño o sección como favorito, para lo cual hay que hacer clic sobre el icono con forma de corazón que vemos bajo cada diseño.

Si hacemos clic sobre cualquiera de los diseños que acabamos de mencionar, ese diseño se incluirá en el editor de WordPress, y podremos comenzar a trabajar y experimentar con él, tal como nos muestra el siguiente vídeo:

Quienes se desenvuelvan con comodidad en inglés, también pueden consultar estos otros dos videotutoriales, que explican cómo utilizar los diseños (layouts):

Prácticas con diseños y bloques de Atomic Blocks

Con el fin de demostrar algunas de entre las muchas posibilidades que ofrece este plugin, vamos a realizar ejercicios con dos elementos prediseñados (la sección de cabecera, y la de miembros del equipo) y con uno de los bloques más distintivos del plugin, el de cuadrícula de entradas.

Sección de cabecera

La primera de las secciones con las que vamos a trabajar, denominada Cabecera héroe, está formada a su vez por un bloque contenedor de Atomic Blocks (AB Container), dentro del cual se insertan otros bloques que ya conocemos:

• Bloque de titular.
• Bloque de párrafo.
• Bloque de botón.

El bloque contenedor dispone de opciones que permiten determinar la imagen de fondo, el color de superposición y su opacidad, el margen exterior y el margen interior («relleno» o «padding»), etc. Haciendo un uso inteligente de estas opciones, es muy fácil crear bonitas y expresivas imágenes de cabecera, tal como muestra este screencast:

Sección de miembros del equipo

Podemos repetir el procedimiento con otro elemento prediseñado, que en este caso será el de la sección Miembros del equipo. Cuando lo insertemos, veremos que este es un diseño mucho más complejo, formado por una jerarquía de bloques anidados (columnas avanzadas, contenedor, cajas de perfil de autor, etc.), lo cual permite crear diseños muy sofisticados. Al principio puede parecer complicado manejar esta estructura, pero una vez que practiquemos con ella no resultará tan difícil.

Bloque de cuadrícula de entradas

El tercer elemento de Atomic Blocks con el que vamos a practicar no es un diseño predefinido, sino uno de los bloques más potentes de toda la colección, que se llama AB Post And Page Grid. Como,su nombre indica, este bloque permite generar cuadrículas de entradas muy elegantes y vistosas, que se pueden utilizar para crear listados de artículos, organizados por tipos de contenido, fechas, categorias, etc.

Utilizados en lugares estrategicos del sitio web, como por ejemplo la página principal, este bloque de cuadrículas es capaz de dar a cualquier sitio web un toque muy elegante y profesional.

Otros bloques de Atomic Blocks

Dado el escaso tiempo de que disponemos, es imposible mostrar cómo se utilizan todos los bloques de este plugin. No obstante, los vídeos que ofrecemos a continuación permitirán que los alumnos y alumnas del curso se hagan una idea cabal de todas sus posibilidades y afiancen sus habilidades en el uso de los bloques de Atomic Blocks.

La entrada Uso de los bloques de Atomic Blocks se publicó por primera vez en Curso de WordPress 2020.

Las secciones

Si concebimos una página web como una estructura con disposición de cuadrícula o rejilla, una sección es un bloque de contenido que se extiende horizontalmente de izquierda a derecha. En la primera sesión de este curso ya vimos que, para poder ser considerada propiamente como una sección, el bloque de contenido debe combinar objetivos funcionales y un diseño distintivo, aspectos ambos que permitirán identificar inequívocamente este elemento en la página web.

Elementor permite crear un número indefinido de secciones en una misma página, con las mismas anchuras y alturas o cada una de ellas con medidas diferentes. Dentro de las secciones se pueden insertar columnas verticales que, a su vez, pueden albergar elementos de contenido o widgets.

Creación y funcionamiento de las secciones

Para crear una sección, basta con pulsar sobre el icono con forma de cruz que aparece en la zona de edición de Elementor. Al hacerlo, se abrirá una ventana modal que permite seleccionar, de entre doce modelos diferentes, el número y disposición de las columnas que formarán la estructura de la sección.

Las secciones se pueden ordenar y reordenar en la página web utilizando la técnica de arrastra y soltar. Al principio, esta operación resulta un poco difícil, sobre todo para las personas que no están acostumbradas a esta técnica, pero enseguida se le coge el tranquilo. La ordenación de secciones también se puede llevar a cabo mediante el navegador de Elementor, que resulta muy útil cuando el diseño de la página es complejo y está formado por un gran número de elementos.

Manipulación de las secciones

En el editor de Elementor cada sección se identifica mediante un contenedor o caja cuyo borde es de color azul y en cuya parte superior hay un bloque con tres iconos. Al pulsar sobre ellos se activan diferentes funciones:

• El icono con forma de cruz sirve para añadir una nueva sección, que se dispondrá por encima de la sección sobre cuyo icono se ha pulsado.
• El icono con forma de cuadrícula de puntos permite seleccionar la sección. Si se hace clic con el botón derecho en este icono, se podrán efectuar diversas operaciones sobre la sección, como por ejemplo editarla, duplicarla, borrarla, guardarla como plantilla, añadir una nueva columna, pegar o reiniciar los estilos, etc.
• El icono con forma de aspa sirve para eliminar la sección.

Propiedades de las secciones

Cuando se selecciona una sección, el área de configuración y propiedades de Elementor se transforma y, en lugar de mostrar los widgets disponibles, muestra las propiedades de la sección, organizadas en tres pestañas: Diseño, Estilo y Avanzado. Esta misma estructura tripartita se repite cuando accedemos a las propiedades de las columnas y los widgets.

Todos los aspectos de funcionamiento de las secciones que acabamos de describir se muestran en el siguiente screencast.

Las columnas

Las columnas son los bloques verticales que forman las secciones. Como acabamos de ver en el epígrafe anterior, las columnas se crean automáticamente cuando el usuario selecciona el diseño de una sección. Elementor identifica las columnas mediante un contenedor delimitado por un borde negro punteado, en cuyo ángulo superior izquierdo aparece un icono característico.

Si hacemos clic sobre el icono de una columna, veremos cómo Elementor muestra sus propiedades en el área de configuración, organizadas en las mismas tres pestañas (Diseño, Estilo y Avanzado) que ya hemos visto al tratar las secciones. Por otro lado, si pulsamos con el botón derecho del ratón sobre el icono de la columna, podremos acceder a funciones como duplicarla, borrarla, añadir una nueva columna, pegar o reiniciar los estilos, etc.

El funcionamiento de las columnas puede verse en el screencast que incluimos a continuación.

Los widgets

Los widgets de Elementor (que no son lo mismo que los widgets de WordPress) son los diferentes bloques de contenido que se pueden incluir dentro de las columnas. Si accedemos al área de configuración y propiedades de Elementor, comprobaremos que disponemos de un enorme conjunto de widgets, organizados en diversas categorías (una organización que recuerda mucho a la del insertador de bloques de WordPress). La última categoría es la de los widgets de WordPress, que se pueden utilizar no solo del modo habitual, sino también dentro de cualquiera de los artículos elaborados con Elementor.

Relación de widgets de Elementor

No disponemos de tiempo ni espacio suficientes como para detallar todos los widgets con que cuentan Elementor y Elementor Pro, pero tampoco lo consideramos necesario, porque la mayoría tienen unos títulos muy intuitivos que permiten identificarlos sin posibilidad de error. En cualquier caso, remitimos a los alumnos y alumnas de este curso a la documentación de Elementor, que es sin lugar a dudas el mejor recurso para encontrar información exhaustiva sobre los widgets y cualquier otro aspecto del uso de Elementor.

Cómo se añaden y se manipulan los widgets

Una vez definida un sección (que al menos ha de tener una columna), los widgets se crean mediante una técnica tan simple como efectiva: arrastrarlos con el ratón desde el área de configuración y propiedades hasta la columna donde se desean insertar. Elementor marca la zona de inserción del widget con un tono azul característico, lo cual permite añadirlo con gran precisión.

Una vez insertado un widget, Elementor lo identifica con un icono característico que tiene forma de lápiz y está situado en el ángulo superior derecho de un contenedor bordeado por una línea azul.

Mediante las técnicas que ya hemos descrito al tratar sobre secciones y columnas (es decir, arrastrar y soltar, y pulsar con el botón derecho del ratón), los widgets se pueden reordenar, borrar, pegar y copiar, etc. Al igual que ocurre con las secciones y columnas, cuando se hace clic sobre un widget, el área de configuración y propiedades del editor de Elementor adopta la disposición tripartita de configuración que ya hemos visto, la cual permite acceder a las tres pestañas (Diseño, Estilo y Avanzado) en que se organizan sus propiedades.

El funcionamiento de los widgets puede verse en el screencast que ofrecemos a continuación.

Complejidad y simplicidad de Elementor

Como puede deducirse de las explicaciones y screencasts que hemos incluido en este artículo, el editor de Elementor es, a pesar de su aparente complejidad, muy fácil de manejar, ya que tanto las secciones como las columnas y los widgets se utilizan de la misma manera, y sus respectivas opciones y configuraciones están organizadas de forma homogénea.

Lo más difícil de Elementor es comprender la organización en secciones, columnas y widgets, y aplicar esta organización a los hábitos de composición de cada usuario. No obstante, una vez entendido este mecanismo, Elementor y Elementor Pro son muy fáciles de utilizar. Otra cosa muy distinta es dominar la enorme cantidad de funcionalidades y opciones de ambos plugins, o tener buenas ideas, creatividad y buen gusto a la hora de ponerlas en práctica.

La entrada Secciones, columnas y widgets se publicó por primera vez en Curso de WordPress 2020.