Para crear secciones en Elementor vamos a activar la plantilla Elementor ancho completo para poder visualizar mejor el proceso.
Tabla de Contenidos
1. Crear una sección en Elementor
Lo primero, nos dirigimos al apartado Páginas >> Añadir nueva para crear una página. En el campo Añadir el título escribimos el título que va a tener la página y, en el bloque Atributos de página, seleccionamos la plantilla Elementor ancho completo.
Hacemos clic en Editar con Elementor para acceder al panel de edición.
Para crear una sección en Elementor podemos hacerlo de 2 maneras:
1.1 Arrastrando un widget
Si hacemos clic sobre un widget, Encabezado (por ejemplo) y, sin soltar el ratón, lo arrastramos y soltamos sobre el área de contenido, se crea una sección y dentro se encontrará el widget que hemos seleccionado.
Como puedes apreciar en la imagen, al arrastrar el widget, se ha creado una sección que es lo que queríamos. La sección es el recuadro de borde “azul” con la pestaña superior de 3 iconos.
1.2 Desde el área de contenido
Otra forma de crear una sección con Elementor es desde el área de contenido.
Haciendo clic + en el botón (Añadir nueva sección) Elementor nos mostrará una combinación de estructuras predefinidas donde, cada una de las estructuras, es una sección dividida en columnas.
Para finalizar, hacemos clic sobre la estructura que queramos para comenzar a añadir el contenido.
2. Propiedades de una sección en Elementor
Ahora que ya hemos creado una sección, vamos a ver las propiedades que nos ofrece. En la parte superior de la sección podemos apreciar una pestaña con 3 iconos:
Añadir sección
Haciendo clic en este icono, Elementor nos permitirá crear una nueva sección justo encima de la sección actual. Esto suele ser muy útil cuando tenemos un diseño con muchas secciones en una página
Editar sección
Haciendo clic en este icono, seleccionamos la sección. Además, podemos realizar las siguientes acciones:
I. Editar la sección.
Si hacemos clic sobre el icono de una sección, el panel de Elementor cambia y nos muestra todas las opciones de edición únicamente de la sección que hemos seleccionado.
II. Arrastrar la sección.
Otra acción que podemos realizar es arrastrar la sección. Seleccionamos la sección y, sin soltar el ratón, podemos moverla por encima o por debajo de otras secciones si queremos cambiar el orden del contenido en nuestra página.
III. Menú contextual.
Esta es una de las propiedades más interesantes de Elementor. La primera vez que estamos utilizando Elementor, si hacemos clic sobre el icono nos mostrará el siguiente aviso:
Desde la versión 2.1, Elementor añadió la característica del clic derecho. Si hacemos clic sobre el icono pero, con el botón derecho del ratón, veremos lo siguiente:
Elementor nos muestra un sencillo menú donde podemos realizar acciones adicionales en la sección como duplicarla, copiarla y pegarla, guardarla como plantilla y borrarla, entre otras.
Esta característica del clic derecho no solo funciona con las secciones. Funciona con “cualquier cosa” en Elementor: secciones, columnas y widgets. Es una maravilla que iremos viendo como sacarle provecho a lo largo de este curso de Elementor.
Borrar sección
Haciendo clic en este icono, podemos borrar la sección.
Si por error borramos una sección donde teníamos varias columnas y widgets, no te preocupes. Haciendo uso de la herramienta Historial , ubicada en la parte inferior del panel de Elementor, podemos deshacer los cambios y recuperarlo todo.
3. Ajustes de una sección en Elementor
Llegamos a la parte más importante de las secciones en Elementor: la edición. Aquí es donde las secciones cobran vida.
Como te he mencionado en el punto anterior, si hacemos clic en el icono Editar sección, el panel de edición de Elementor nos mostrará una serie de opciones donde podemos editar la sección.
3.1 Disposición
En este apartado podemos controlar el funcionamiento que tendrá la sección.
Extender la sección y Ancho del contenido se suelen utilizar cuando queremos que la sección tenga un ancho completo en la página (lo que se conoce como full width). También son muy útiles para secciones con fondos de color o imagen.
Por defecto, Elementor deja un espacio de 10px entre los widgets ubicados en las columnas y el borde de la sección. Con la opción Espacio entre columnas, podemos quitar ese espacio o modificarlo como queramos.
Con la opción Alto podemos indicar si queremos que la sección se ajuste a la pantalla (se ampliara la sección hasta cubrir la totalidad de la pantalla) o definir el valor de la altura que queramos.
Esta última opción es muy útil cuando diseñamos la página de inicio y queremos que la primera sección sea un Slider o un texto con un botón y una imagen de fondo (tipo presentación, también conocido como Hero).
La Alineación vertical suele ir de la mano con la opción Alto. De esta manera podemos indicar en que parte de la sección queremos que se muestren los widgets: arriba, medio o abajo.
El Desbordamiento en una característica que se emplea para evitar errores con algunos widgets en las versiones RESPONSIVE.
La Etiqueta HTML suele ser más utilizada por los programadores para personalizar el contenido con código CSS.
3.2 Estilo
Llegamos a la parte más divertida de todas: los estilos. En este apartado podemos editar colores, imágenes, bordes y formas de una sección. Todos estos ajustes son los que le dan personalidad a las secciones.
En las pestañas Fondo y Capa de fondo podemos asignar un fondo a la sección: colores, imágenes, vídeos y diapositivas.
En la pestaña Borde podemos crear todo tipo de bordes en una sección.
La pestaña Divisor de forma es una opción bastante peculiar ya que nos permite definir un diseño “diferente” a las secciones.
La última pestaña, Tipografía, no tiene mucho sentido utilizarla en una sección aunque puede ser útil dependiendo del tipo de diseño que estemos realizando.
3.3 Avanzado
Por último tenemos el apartado que pone todo en su lugar: Avanzado.
En la pestaña Avanzado podemos asignar valores de márgenes y rellenos (conocidos como margin y padding) a las secciones. Adicionalmente se pueden indicar un ID de CSS y Clases CSS si necesitamos personalizar aún más el diseño de las secciones.
Por último, existe un valor llamado Z-Index que es muy útil en algunas ocasiones. En la lección, divisor de forma en Elementor, también veremos cómo se utiliza este campo.
En la pestaña Efectos de movimiento podemos añadir animaciones a las secciones.
La pestaña Adaptabilidad es muy útil cuando diseñamos las versiones RESPONSIVE de nuestro sitio web.
Las pestañas Atributos y CSS personalizado son opciones que ayudan a mejorar el diseño de nuestras páginas. Estas opciones solo están disponibles con Elementor PRO y veremos como se usan en futuras lecciones.
4. Sección interior en Elementor
No se pueden dividir las secciones en “subsecciones” pero si se pueden CREAR secciones dentro de una sección. Además te prometí que te contaría como se hace. Así que vamos allá.
En la paleta de widgets BÁSICO existe un widget muy singular que desencaja del resto pero que realiza una función muy útil. Se trata del widget Sección interior.
Si seleccionamos este widget y lo arrastramos al área de contenido veremos lo siguiente:
Se ha creado una sección con 2 columnas dentro de la sección principal que tiene la siguiente jerarquía:
Ahora veamos otro ejemplo. Vamos a crear una sección de 3 columnas desde el área de contenido y vamos a arrastrar el widget Sección interior a cada una de las columnas (3 veces). Nos quedaría lo siguiente:
Vamos a tener una sección principal, con 3 secciones interiores y 3 pares de columnas independientes unas de otras.
Con este “simple” widget podemos crear estructuras complejas para realizar múltiples diseños en nuestras páginas.
5. Duplicar secciones en Elementor
En el menú contextual de la sección existe una opción llamada Duplicar. Esta opción funciona como un “copiar y pegar a la vez” y lo que hace es reproducir exactamente la sección que hemos duplicado (incluye TODO).
