En la lección anterior conocimos la función estructura de página de Elementor con la cual podemos utilizar 2 plantillas adicionales que ofrece Elementor para el desarrollo de nuestras páginas y entradas.
Para crear secciones en Elementor vamos a activar la plantilla Elementor ancho completo para poder visualizar mejor el proceso.
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.
Recuerda que esto lo hacemos para que Elementor quite la(s) barra(s) lateral(es) que viene(n) por defecto con el tema ya que, por lo general, las páginas no suelen incluir barra(s) lateral(es).
Puedes trabajar como más gustes ya que esto no influirá en el funcionamiento de las secciones.
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:
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.
A tener en cuenta...
Todos y cada uno de los widgets que componen Elementor se insertarán siempre, siempre, siempre dentro de una columna y, esta a su vez, se encuentra dentro de una sección: SECCIÓN >> COLUMNA >> WIDGET.
Las secciones y columnas son los elementos principales del diseño con Elementor y son los que permiten crear las versiones RESPONSIVE (móviles y tabletas) de nuestro sitio web.
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.
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.
Muy importante...
Las secciones solo se pueden dividir en columnas. No tiene sentido dividir una sección en "subsecciones" aunque existe una forma de crear secciones dentro de otra sección. Continúa leyendo para saber cómo se hace, lo prometo!
Para finalizar, hacemos clic sobre la estructura que queramos para comenzar a añadir el contenido.
Anuncio publicitario
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:
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.
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.
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.
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.
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.
La finalidad de esta lección es que aprendas a crear secciones y te familiarices con todas las propiedades y opciones que ofrecen las secciones en Elementor.
Para no alargar tanto la lección, vamos a mencionar las principales opciones de edición y, en futuras lecciones, haremos ejemplos prácticos del uso de cada una de estas opciones cuando comencemos a trabajar con widgets.
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.
En la lección, desbordamiento en Elementor, veremos con más detalles y ejemplos cómo utilizar esta opción.
La Etiqueta HTML suele ser más utilizada por los programadores para personalizar el contenido con código CSS.
La pestaña Estructura tendrá más sentido cuando hablemos de las columnas. En la lección, columnas en Elementor, veremos como utilizar esta opción.
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 lección, fondos con Elementor, veremos con más detalles y ejemplos cómo utilizar estas opciones en una sección.
En la pestaña Borde podemos crear todo tipo de bordes en una sección.
En la lección, bordes en Elementor, veremos con más detalles y ejemplos cómo utilizar esta opció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.
En la lección, divisor de forma en Elementor, veremos con más detalles y ejemplos cómo utilizar esta opción.
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.
En la pestaña Tipografía, Elementor cita la siguiente nota:
"El siguiente conjunto de controles está obsoleto. Esos controles solo son visibles si se han lanzado previamente."
Es posible que en futuras versiones esta característica desaparezca.
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.
Lectura recomendada...
En la lección del curso de WordPress, CSS para WordPress, puedes encontrar información sobre el uso de los márgenes y rellenos en un sitio web.
En futuras lecciones iremos jugando con estos valores con ejemplos prácticos para que te familiarices con su uso.
En la pestaña Efectos de movimiento podemos añadir animaciones a las secciones.
En la lección, animaciones en Elementor, veremos con más detalles y ejemplos cómo utilizar esta opción.
La pestaña Adaptabilidad es muy útil cuando diseñamos las versiones RESPONSIVE de nuestro sitio web.
En la lección, modo adaptable en Elementor, veremos con más detalles y ejemplos cómo utilizar esta opción.
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.
Si aún no tienes Elementor PRO este es el momento perfecto para que te hagas con este fantástico editor de contenidos.
Va a ser parte importante de este curso. Desarrollaremos muchas lecciones con este plugin para que aprendas a utilizarlo en su totalidad y sacar el máximo provecho para el desarrollo de sitios web 100% profesionales.
Como te comenté en el punto 1.2, 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:
Es muy importante tener en cuenta esta jerarquía al momento de diseñar las secciones. Ten en cuenta que la sección principal es la que manda y es donde se realizan los primeros ajustes.
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.
¡Ha que es una maravilla!
Con este "simple" widget podemos crear estructuras complejas para realizar múltiples diseños en nuestras páginas.
Información de interés...
Con Elementor solo se puede crear una sección interna dentro de una sección principal. No es posible crear una sección interna dentro de otra sección interna (lo que se conoce como secciones anidadas).
Sin embargo, existe un plugin muy potente que permite crear secciones anidadas "infinitas" en Elementor. Ya te hablaré de este plugin más adelante a medida que avancemos en el curso.
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).
He querido hacer énfasis en este concepto para que tengas claro que las secciones solo se duplican en formato VERTICAL, arriba y abajo. No tiene sentido ubicar 2 secciones principales en horizontal.
Anuncio publicitario
A que parece mentira que el hecho de crear una sección con Elementor tenga tanto de que hablar. Es por esto que quise hacer una lección hablando solo de secciones ya que la idea es que te familiarices muy bien con el uso de las secciones.
A medida que avancemos en este impresionante curso de Elementor, iremos viendo cómo utilizar todas estas fantásticas características y propiedades que nos ofrecen las secciones en Elementor.
No me gusta el SPAM y se que a ti tampoco. Sólo recibirás información útil sobre Elementor.
Al enviar, confirmas que has leído y aceptas la política de privacidad. Conoce nuestro compromiso con tu privacidad.
Hola!,
me gustaría saber más sobre el desbordamiento en las secciones, ya que tengo un problemita en mi web hahahaha
saludos!
Hola Francisco, en cuanto me sea posible creo una lección sobre ese tema que espero te pueda ayudar. Un saludo!