Lección 07

Crear secciones en Elementor

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.

Índice del contenido
    Add a header to begin generating the table of contents

    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.

    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.

    Editando una página con Elementor
    Editando una página con Elementor

    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.

    Creando una sección con Elementor
    Creando una sección con Elementor

    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.

    1.2 Desde el área de contenido

    Otra forma de crear una sección con Elementor es desde el área de contenido.

    Creando una sección con Elementor
    Creando una sección con Elementor

    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!

    Estructuras de secciones en Elementor
    Estructuras de secciones en Elementor

    Para finalizar, hacemos clic sobre la estructura que queramos para comenzar a añadir el contenido.

    Anuncio publicitario

    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:

    Propiedades de una sección en Elementor
    Propiedades de una sección en Elementor
    Añadir una sección con Elementor
    Añadir una sección con Elementor

    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:

    Únete al clic derecho
    Únete al clic derecho

    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:

    Menú de edición de una sección en Elementor
    Menú de edición de una sección en Elementor

    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.

    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.

    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.

    3.1 Disposición

    En este apartado podemos controlar el funcionamiento que tendrá la sección.

    Editar sección en Elementor: Disposición
    Editar sección en Elementor: Disposició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.

    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.

    Editar sección en Elementor: Estilo
    Editar sección en Elementor: Estilo

    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.

    3.3 Avanzado

    Por último tenemos el apartado que pone todo en su lugar: Avanzado.

    Editar sección en Elementor: Avanzado
    Editar sección en Elementor: 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.

    Curso de WordPress

    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.

    4. Sección interior en Elementor

    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.

    Sección interior en Elementor
    Sección interior en Elementor

    Si seleccionamos este widget y lo arrastramos al área de contenido veremos lo siguiente:

    Insertar una sección interior con Elementor
    Insertar una sección interior con Elementor

    Se ha creado una sección con 2 columnas dentro de la sección principal que tiene la siguiente jerarquía:

    Jerarquía de una sección interior con Elementor
    Jerarquía de una sección interior con Elementor

    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:

    Insertar varias secciones interiores con Elementor
    Insertar varias secciones interiores con Elementor

    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.

    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).

    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

    6. Conclusión

    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.

    ¿Te ha gustado?

    Te estaría muy agradecido si pudieras valorar esta lección y compartirla en las redes sociales. De esta manera me animas a continuar trabajando en este curso de Elementor y ayudas a otras personas que desean aprender.

    (4 votos, promedio: 5 de 5)

    Share on facebook
    Facebook
    Share on twitter
    Twitter
    Share on linkedin
    LinkedIn
    Share on telegram
    Telegram
    Share on whatsapp
    WhatsApp
    Share on email
    Email

    Este curso es gratis y siempre lo será pero, mantenerlo, requiere de mucho tiempo y esfuerzo. Si te gusta el curso y te ha ayudado, considera invitarme un café haciendo un pequeño donativo a este proyecto que he creado con el para ti y muchas personas que desean aprender. Las donaciones me ayudan a seguir trabajando en este fantástico curso gratuito. ¿Me invitas un café?.

    Suscríbete y aprende Elementor desde cero.

    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.

    Comparte tu experiencia

    Deja un comentario si tienes alguna duda o cuéntanos cómo ha sido tu experiencia.

    guest
    0 Comentarios
    Inline Feedbacks
    Ver todos los comentarios
    0
    ¿Dejas un comentario? Gracias!x
    ()
    x
    Ir arriba

    Tratamiento de datos personales

    • Responsable: MARIA ANTONIETA BEAUTY CONCEPT, S.L.
    • Finalidad: Suscribirte a la lista de correos electrónicos.
    • Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en legal@gianoliveira.com, así como el derecho a presentar una reclamación ante una autoridad de control.
    • Destinatarios: Los datos no se cederán a terceros salvo en los casos en que exista una obligación legal.
    • Información adicional: En mi política de privacidad encontrarás información adicional sobre la recopilación y el uso de su información personal incluida información sobre acceso, conservación, rectificación, eliminación, seguridad y otros temas.