Curso Básico de Elementor – Clase 2: Secciones y Columnas

Curso Básico de Elementor

En esta segunda clase del Curso Básico de Elementor Page Builder, repasaremos los principales elementos con los que podemos diseñar una página con este plugin.

Para empezar vamos a distinguir los 2 componentes básicos que utilizaremos casi siempre con este maquetador: las secciones y columnas.

Si te perdiste la clase número 1, accede aquí para verla.

Antes de nada, tenemos que saber que significan estos dos conceptos.

¿Qué es una Sección?

La sección, es el contenedor principal donde puedes ir añadiendo elementos o columnas, dependiendo del diseño que vayas a realizar en esa página en concreto de tu página web.

elementor page builder

Ajustes de las Secciones

  • Disposición: Dentro de este apartado, podrás extender la sección, editar el ancho del contenido, los espacios entre columnas, el alto, la posición del contenido, establecer etiquetas HTML.

Curso Básico Elementor

  • Estilo: Como su nombre lo indica, con estos ajustes, podrás editar los estilos: en el fondo de la sección podrás poner colores, colocar fotografías, vídeos o degradados. También establecer estilos a las capas de fondo, bordes, incluir formas del divisor y editar los colores de la tipografía.

Curso Básico Elementor

  • Avanzado: Con este ajuste, podrás incluir márgenes y rellenos para la sección (en px o %). Además podrás editar en vivo las versiones responsive de esa sección en los distintos dispositivos (escritorio, tablet y móvil).

Curso Básico Elementor

¿Qué es una Columna?

La columna es un bloque que puedes incluir dentro de una sección. Pero no sólo puedes crear una, sino que puedes añadir dos, tres o las que quieras. Dentro de las columnas, puedes añadir los distintos elementos que tiene este maquetador, que veremos más adelante.

elementor page builder

Ajustes de las Columnas

Al igual que las secciones, las columnas también incluyen sus ajustes específicos, tal y como explique en el apartado de las secciones, por tanto, podrás realizar las modificaciones que necesites en las pestañas de:

  • Disposición: ajustes de espacio, posición del contenido, anchos, extensión…
  • Estilo: colores, fotografías, degradados, capas de fondo, formas para la columna.
  • Avanzado: márgenes, rellenos y edición de la versión responsive para dispositivos.

Después de tener claro en que se diferencian las secciones y las columnas, vamos a ver como implementarlas en una página.

Como Crear una Página en Blanco con Generatepress para Diseñar con Elementor

Como te he dicho, antes tenemos que configurar nuestra página en blanco para trabajar, así que vamos a seguir los siguientes pasos:

  • Crear una nueva página a través del menú escritorio de WordPress: “Páginas>>>Añadir Nueva“.
  • Poner un título a la nueva página creada y darle al botón de “Guardar“.
  • Si usas la versión gratuita del tema de Generatepress, en la barra lateral derecha del mismo editor de la página en cuestión, puedes picar la opción “Desactivar Elementos>>>Título del contenido” para tener un lienzo totalmente en blanco antes de pasar al modo de edición con Elementor. Le damos a “Sólo Guardar” de nuevo.
  • Después, sólo tendrás que pulsar el botón que está justo debajo del título principal de la página “Editar con Elementor“.
  • Si no vas a usar barra lateral en la página que estás diseñando, con las opciones propias del tema de Generatepress, también puedes hacer que el Sidebar no aparezca, haciendo que el lienzo abarque todo el ancho total que hayas establecido en el propio personalizador de la plantilla, según la dimensión que hayas establecido en la opción de Generatepress, “Diseño de Pantalla>>>Contenedor>>>Ancho del Contenedor“. Para ello, sólo tienes que picar en la zona derecha del editor de la página creada: “Disposición de la barra lateral>>>Contenido (sin barras laterales).

No te preocupes si te agobias con lo que acabas de leer…

Aquí tienes un vídeo, donde explico todo esto detenidamente.

Una vez tengamos listo el lienzo para diseñar nuestra página, verás que tienes dos opciones: “Agregar Nueva Sección” o “Añadir Plantilla“:

Curso Básico de Elementor

1) Agregar nueva sección: Si quieres crear una página desde cero según tus habilidades o la estructura que hayas preparado, puedes hacer clic añadiendo una nueva sección, y a partir de ahí incluir las columnas o elementos que necesites para llegar a tu objetivo de diseño. Puedes incluir una única columna, o dos y tres, con distintas configuraciones…

Curso Básico de Elementor

2) Añadir plantilla: Si por lo contrario prefieres partir de una plantilla base e ir retocando según tu estilo, puedes elegir una gratuita de las que dispone Elementor en su Biblioteca. Recuerda que las que poner “PRO”, corresponden a las de la versión premium del plugin. También puedes elegir las plantillas que hayas creado previamente para insertarlas en dicha sección.

Curso Básico de Elementor

 

¡¡Y ésto es todo por hoy!!

En la siguiente clase del Curso Básico de Elementor, verás los distintos elementos que dispone este plugin, que podrás añadir en las secciones o columnas que vayas creando para el diseño de tu página.

¿A qué es fácil? 🙂

Si te apetece, dime que te ha parecido estas dos primeras clases en los comentarios.

Nos vemos!!

5/5 - (2 votos)
Compartir en facebook
Facebook
Compartir en twitter
Twitter
Compartir en linkedin
LinkedIn
Compartir en pinterest
Pinterest
Compartir en whatsapp
WhatsApp
Jessica Berlar

Jessica Berlar

Soy diseñadora web especializada en la creación de cursos y academias online con WordPress. Mi misión es ayudar a otras personas a generar ingresos con la venta de sus productos y servicios a través de su página web profesional.

32 comentarios en «Curso Básico de Elementor – Clase 2: Secciones y Columnas»

  1. Hola Jessica, como hago para modificar el largo de una columna? Porque de un lado estoy poniendo los posts y del otro lado info como quien soy (reducido), los datos para suscripcion, el link de facebook, quiero poner tambien el de instagram pero es como que me queda fuera del contenido.
    Como ajusto eso? Gracias

    Responder
    • Hola Francisco,

      Elementor te permite ajusta el ancho de la columna, pero no el largo. Desconozco si puedes hacerlo a través de código, pero lo que puedes hacer es jugar con los márgenes y los rellenos en el apartado “Avanzando” para ajustar las distancias entre los elementos que vayas insertando. También puedes colocar una columna justo debajo de la que ya tengas para añadir el bloque de contenido que quieras. Espero haberte podido ayudar. Un saludo y gracias por pasarte por el blog 🙂

      Responder
  2. Hola!
    estoy creando una academia online con Learnpress, pero me encuentro con que este plugin no me permite crear las lecciones con Elementor, ni tampoco editar las páginas que por defecto crea learnpress, como perfil del alumno, información de los cursos… ¿es porque son incompatibles o por otro motivo? Si instalo learndash, tendré el mismo problema con Elementor?
    Gracias!

    Responder
    • Hola Noelia,

      En principio no deberías tener problemas. Tendrías que habilitar las opciones donde quieras maquetar con Elementor, dentro de “Elementor>>>Ajustes>>>General>>>Tipos de contenido”, tienes que hacer clic en los cuadros de lecciones, cursos y exámenes.

      Te dejo captura de pantalla.

      Captura

      Espero que te sirva 😉

      Responder
  3. Hola una pregunta, como puedo generar 3 columnas con la nueva version de elementor, por que ahora solo aparece una estructura de 2 partes y no encuentro la estructura que necesito. Gracias

    Responder
  4. Hola, muchas gracias por el tutorial.

    Una consulta, cuando estoy creando una sección, no puedo agregar un título y debajo 4, 3 o las columnas que sean, es decir no puedo crear dos filas dentro de una sección.

    Es básicamente para que tenga el mismo fondo, el título y las secciones debajo.

    Se puede?

    Responder
    • Buenas tardes Víctor,

      En una sección puedes insertar el widget que quieras: un título, columnas, imágenes, etc.

      Para crear dos filas de contenido en una misma sección, entiendo que tendrás que colocar un elemento justo debajo del otro, no se si me explico.

      Una vez tengas los widgets colocados de esa sección concreta, podrás darle el mismo fondo en los ajustes de estilo.

      Espero que te sirva.

      Un saludo 😉

      Responder
  5. Hola:
    gracias por el tutorial, pero tengo una pregunta que no veo que hayas explicado y que me gustaría usar en mi web.
    En esta lección tienes al principio un recuadro de CONTENIDO, con varias anclas dentro de la página. ¿Me podrías indicar cómo hacer un recuadro así?
    Gracias. Un saludo.

    Responder
    • Hola Jayl,

      Puedes guardar secciones o páginas enteras que hayas diseñado en el menú de abajo a la izquierda, en el botón de “guardar como plantilla”. En este caso, como se trata de un botón, cuando lo insertes, ponte encima de éste y pulsa botón derecha del ratón, y te saldrá un pequeño secundario, que te dará la opción “guardar como global”, para almacenar ese elemento como widget y poder usarlo en otras páginas. Así podrás reutilizarlo cuantas veces quieras en cualquier página de tu proyecto, e incluso exportarlas e importarlas a otras webs totalmente distintas que usen Elementor.

      Espero que te ayude.

      Un abrazo!! 😉

      Responder
  6. HOLA Jessi, estoy tratando de poner 12 columnas en una sección, pero solo puedo hasta 10, hay alguna manera de poner más?… gracias

    Responder
    • Hola Diego,

      Lo único que se me ocurre es incluir dos elementos del widget básico de “columnas” dentro de una columna que ya está en la sección; para así aumentar de 10 a 12.

      No sé si puede servirte de solución.

      Un abrazo 😉

      Responder
  7. Hola Jessi, ¡gran trabajo el que haces!

    Quiero agregar una sección de noticias o entradas recientes en el inicio de mi página, pero únicamente encuentro que puedo hacerlo desde la opción “Wordpress”. Al incluirla, no me aparecen las imágenes en miniatura, sino únicamente los títulos en texto con un hipervínculo, ¿hay alguna forma de agregar esta sección con Elementor en la que se vean las imágenes de las notas?

    ¡Gracias!

    Responder
    • Hola Andrés,

      Muchas gracias por tus palabras 😉

      Te recomiendo te instales el plugin gratuito de “WP Show Posts” del mismo creador de GP, para crear esa sección de noticias o entradas recientes, copias el shortcode que te da y lo pegas en la página en cuestión con Elementor, a través del propio widget del mismo plugin que te aparece en el apartado WP, o con el widget de shortcode.

      Espero que te sirva.

      Un abrazo!

      Responder
    • Hola Montse,

      Si estás usando Elementor puedes copiar la URL y ponerla por ejemplo en un botón para redirigir a la página que quieras.

      No sé si te refieres a esto mismo.

      Un abrazo!!

      Responder
  8. Hola Jessica, dos preguntas, he probado Envato Element y veo que 1.- logran que aparezca las opciones de la columna (la pestaña que sale siempre en la parte superior de las columnas con tres figuras, un signo de +, 9 puntos que es el menu y la “X” para cerrar) en la parte interna de la columna, sabras por casualidad como se hace?? 2.- tambien he notado que logran insertar una columna dentro de una columna, tambien quisiera saber como logran hacerlo ya que arrastrando la columan dentro de otra no la toma

    Responder
    • Hola Rosman,

      No he probado Envato Element, pero en cuanto al tema de la columna que comentas de Elementor, hay un widget dentro del maquetador que te permite insertar columnas dentro de una sección, y puedes crear tantas como quieras.

      Puedes personalizar tanto la sección, la columna en sí misma y el elemento widget en cuestión que hayas introducido en ese espacio; así como duplicarlos (supongo que refieres a esto en el punto 1).

      Espero que te ayude.

      Un abrazo!!

      Responder
  9. Hola Jessi .
    Gracias por tu post! Estoy creando un portfolio en el que en la version Escritorio las imagenes estan a secciones de tres imagenes ( columnas verticales ) y otras secciones de 1 imagen vertical y 1 horizontal.
    Mi idea es que quede todo simétrico y bonito.
    Mi duda es al pasar a la versión tablet, me gustaría que aqui la vista fuera de a 2 columnas verticales.
    Además tambien, en la columna de 1 imagen vertical y 1 imagen horizontal al pasar a tablet se desorganiza y no pone las dos imagenes juntas como se ve en la versión escritorio.
    Alguien tiene alguna sugerencia? graciAs!

    Responder
    • Hola Juan Pablo!
      Gracias por pasarte y me alegra que te sirva el post.
      En principio con las versiones responsive de momento Elementor no ha incorporado la opción de poder transformar los diseños en los distintos dispositivos, pero ayer publicaron una nueva opción que lo mismo te puede servir.
      Te dejo link al vídeo: https://www.youtube.com/watch?v=1vOLOueRDaw
      Estos chicos de Elementor no paran!!
      Un abrazo 😉

      Responder
  10. Hola vi el artículoy la verdad hay algo que no puedo hacer. Pregunto ¿Si inserto una sección con dos columnas, en la columna derecha coloco una imagen y en la izquierda escribo una cabecera, debajo un pequeño texto y debajo de ese texto quiero poner 3 columnas (esto seria dentro de la columna izquierda)? ¿Se puede hacer eso? Porque solo me deja insertar una sección con dos columnas y no la tres columnas que necesito. Espero una ayuda para lograr eso o alguna idea. Saludos cordiales.

    Responder
  11. Hola Jessica!

    Tengo una consulta con el plugin de elementor, ya que antes estaba usando el plugin beaver builder y éste sí tiene la opción.

    Quiero crear una sección que sea global, es decir, la quiero incluir en varias páginas y que esta sección si la edito que cambie en todas las paginas done tengo definida ésta sección como global, sin que yo tenga que entrar en cada página y editarla. En el footer si veo que lo puedo editar con elementor o el encabezado y ponerlo como general, pero seria por una parte que yo quiera, o poder crear varias.

    Espero haberme explicado bien,

    Gracias,

    Un saludo!

    Responder
  12. Buenas tardes;
    Estoy tratando de hacer una web, no tienda online, sobre un negocio en la que entre otros muchas páginas habrá algunas con productos solamente.
    Mi problema es el siguiente, quiero mostrar los productos a 4 columnas en el PC, ( bien sea con una sección de 4 columnas y una imagen en cada una, bien sea una galería de 4 columnas ), pero en el móvil no lo consigo, en el móvil me sale siempre un columna solo, una imagen, debajo otra, etc. Llevo semanas buscando y no he encontrado por ningún sitio la forma de que aparezcan los productos de dos en dos. ¿ Hay alguna forma de hacerlo ?. Agradecería mucho su ayuda. Saludos.

    Responder
  13. Srta. Berlar, Excelente contenido de verdad muchas gracias…

    Mi duda es la siguiente: los divisores de forma se pueden aplicar a un modulo o columna dentro de una sección de Elementor?

    Saludos!

    Responder
  14. Hola Jessica, muy bien explicado! Yo tengo una duda y quería ver si me lo puedes solucionar. En mi caso uso Generatepress, y al editar una página con elementor quiero que se me quede en pantalla completa. Lo he configurado como ancho completo, altura ajustar a la pantalla, etc… Pero al usar el header de generatepress me desplaza esta sección quedando un trozo de sección por debajo de la pantalla. Sabrías solucionarlo?
    Gracias y un saludo.

    Responder
  15. Hola, en la última versión de elementor no encuentro como cambiar de posición, los editores de las secciones, por lo general agregas una sección y los editores de la misma salen arriba, pero quiero que estén abajo ¿sabes cómo hacer eso?

    gracias.

    Responder
  16. Buen dia
    Istale el Elementor Pro gratuitot de AGosto 2020, pero no puedo hacer que la seccion tenaga el mismo tamaño de la columna alguien me puede ayudar

    Responder

Deja un comentario

Responsable>>> Jessica Berlar.
Finalidad>>> Gestionar el comentario que dejes aquí después de leer el post.
Legitimación>>> Consentimiento del usuario.
Destinatario>> Los datos que me vas a facilitar a través de este formulario de contacto, van a ser almacenados en los servidores de Siteground, mi proveedor de email y hosting, que también cumple con la ley RGPD. Ver política de privacidad de Siteground > https://www.siteground.es/privacidad.htm
Derechos>>> Podrás acceder, rectificar, limitar y suprimir tus datos personales escribiéndome a hola@jessicaberlar.com.

¿Quieres aprender a crear una web profesional con Elementor para ofrecer tus productos y servicios?

Pues esto te interesa…

ME APUNTO

Sólo tienes que dejar tu nombre y tu mejor correo electrónico para recibir el webinar gratuito ahora mismo.

  • Responsable: Jessica Berraquero Lara.
  • Finalidad: Darte acceso al webinar gratuito.
  • Legitimación: Consentimiento del usuario.
  • Destinatario: Los datos que me vas a facilitar a través de este formulario de contacto, van a ser almacenados en los servidores de Siteground, mi proveedor de email y hosting, que también cumple con la ley RGPD. Ver política de privacidad de Siteground > https://www.siteground.es/privacidad.htm
  • Derechos: Podrás acceder, rectificar, limitar y suprimir tus datos personales escribiéndome a hola@jessicaberlar.com.