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.
Contenido
¿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.
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.
- 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.
- 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).
¿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.
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“:
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…
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.
¡¡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!!
32 comentarios en «Curso Básico de Elementor – Clase 2: Secciones y Columnas»
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
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 🙂
Hola Francisco, yo también tenía la misma duda, para modificarlo entra a las opciones de columna y modifica los valores del acolchado.
Saludos.
Hola, buenas no se si te sirve de utilidad aún pero podrías darle una altura mínima del contenedor de la sección.
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!
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.
Espero que te sirva 😉
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
Hola Cristian,
Tienes que darle al botón rojo con el símbolo “+” y te aparece la sección que quieres con las 3 columnas.
Un saludo 😉
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?
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 😉
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.
Hola Benito,
Gracias a ti por pasarte por el blog 😉
Para el tema del ancla de menú, te paso este video tutorial que te va venir muy bien: https://www.youtube.com/watch?v=ZIdppV7MbD8
Espero que te ayude.
Un abrazo!!
Hola jessi, una consulta. Quiero guardar un diseño básico de botón para que pueda usarlo en otros landings. Cómo podría hacerlo?
Gracias de antemano.
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!! 😉
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
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 😉
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!
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!
Hola Jessi !
Estoy revonando mi web y quisiera vincular una página con otra a través de la url pero no hay manera… Quizás hay algo que no hago bien…
Gracias.
Montse
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!!
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
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!!
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!
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 😉
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.
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!
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.
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!
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.
Es una informacion muy útil !
Gracias
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.
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