Aprende a usar la Sección de Sitios Web

La funcionalidad de Sitios en Leadway te brinda las herramientas necesarias para crear experiencias web personalizadas, modernas y enfocadas en tus objetivos comerciales. Ya sea que quieras diseñar una página de inicio, una página de aterrizaje para captar prospectos o una serie de páginas para guiar al usuario a través de un embudo de ventas, esta sección lo hace posible sin necesidad de conocimientos técnicos.

¿Qué son los Sitios Web?

La sección de Sitios te permite crear páginas web orientadas al cliente dentro de Leadway. Puedes diseñar la página de inicio perfecta para tu negocio, crear páginas de aterrizaje para captar más prospectos y mucho más. Las posibilidades son infinitas.

En Leadway, existen dos tipos de constructores de sitios. Aunque son similares, cada uno tiene funcionalidades distintas. A continuación, te explicamos cada uno:

¿Cuál debo elegir? ¿Embudos o Sitios Web?

La elección entre Embudos y Sitios web depende del objetivo específico que tengas para tu página:

Embudos (Funnels)

Los embudos siguen una secuencia clara y directa de páginas, por lo que permiten realizar pruebas A/B (split testing).
Un embudo es una serie de páginas diseñadas paso a paso, normalmente utilizadas con fines específicos como captación de leads, agendamiento de citas, o ventas.

Vista de Embudos | Leadway

Sitios web (Websites)

Un sitio web permite construir páginas para cualquier uso, como una página principal para tu empresa, una sección de contacto o una galería de servicios.
A diferencia de los embudos, no siguen un camino secuencial, por lo que no incluyen pruebas A/B.

Vista de Sitios Web | Leadway

Comenzando con las Plantillas de Sitios Web

Al crear un nuevo sitio en Leadway, tendrás la opción de elegir entre cientos de plantillas prediseñadas. Estas plantillas están diseñadas para diferentes industrias, estilos y objetivos.

Una vez que selecciones una plantilla, puedes editar cualquiera o todas sus secciones según tus necesidades.

Te recomendamos explorar varias opciones para encontrar la que mejor se adapte a tu marca y propósito. ¡Hay una plantilla perfecta para cada tipo de negocio!

Una vez que selecciones la plantilla, esta se cargará automáticamente.

Si aún no lo has hecho, navega hacia una de las páginas del sitio haciendo clic en “Editar” para abrir el constructor de sitios y comenzar a editar esa página en específico.

Visión general del Constructor de Sitios

El Constructor de Sitios de Leadway comparte la misma funcionalidad y jerarquía de elementos que el Constructor de Embudos. Ambos permiten diseñar páginas de manera visual y eficiente.

Vamos a explorar cómo funciona el Constructor de Sitios y cómo puedes utilizarlo para crear sitios atractivos y funcionales.

Barra de navegación del Constructor

La barra de navegación del constructor se encuentra en la parte superior de la interfaz y te permite alternar entre las distintas funciones disponibles. A continuación, revisaremos cada una de estas pestañas para que puedas aprovecharlas al máximo.

Agregar un nuevo elemento

Filas y columnas son los bloques de construcción esenciales de tu sitio. Estas estructuras contienen los elementos que conforman el contenido visual y funcional de la página.

Para agregar un elemento (por ejemplo, una imagen), necesitas tener al menos:

• Una sección

• Una fila

• Una columna

Una vez que estas estructuras están en su lugar, se te solicitará agregar un elemento.

Cada elemento es único y cumple una función específica (texto, imagen, botón, formulario, etc.).

¿Cómo agregar un elemento?

1. En la parte superior derecha del editor del sitio, haz clic en “Agregar elemento”.

2. Se abrirá un panel con las opciones de elementos disponibles.

3. Selecciona el que desees y arrástralo al área del sitio donde quieres colocarlo.

Comprendiendo la jerarquía de elementos (Element Nesting)

En el constructor de sitios de Leadway, cada elemento que agregas a tu página debe estar contenido dentro de una estructura organizada. Esta estructura jerárquica garantiza que el diseño sea limpio, responsivo y funcional.

Para agregar cualquier elemento (como texto, imágenes o botones), necesitas lo siguiente:

1. Una Sección
2. Dentro de la sección, al menos una Fila
3. Dentro de la fila, al menos una Columna

Una vez configurada esta estructura (Sección > Fila > Columna), podrás añadir elementos desde la barra “+ Agregar elemento”.

Jerarquía visual: de mayor a menor

• Secciones (Verde)
• Filas (Azul)
• Columnas (Rosa)
• Elementos (Naranja)

Sobre secciones, filas y columnas...

• No puedes agregar una sección dentro de otra sección.
• Tampoco puedes agregar una fila dentro de otra fila, ni una columna dentro de otra columna.
• Igualmente, no puedes insertar un elemento dentro de otro elemento.

¿Qué sí puedes hacer?

• Puedes agregar múltiples filas dentro de una sección.
• Dentro de cada fila, puedes agregar múltiples columnas.
• Dentro de cada columna, puedes agregar múltiples elementos.

? Recuerda: Para agregar un elemento (como texto, imagen, botón, etc.), debes tener al menos una sección, una fila y una columna creadas previamente.

Configuración de elementos

Para editar una sección, fila, columna o elemento específico, simplemente pasa el cursor sobre él y haz clic en el ícono de engrane que aparecerá.

Además, al hacer clic directamente sobre cualquier parte del elemento, se abrirá automáticamente el menú lateral de configuración en la parte derecha del editor.

Dentro de este menú de configuración, puedes agregar relleno (padding), ajustar márgenes, modificar la visibilidad y mucho más.

También encontrarás dos pestañas principales: “General” y “Avanzado”, que te ofrecen aún más opciones para personalizar y optimizar tu sitio según tus necesidades.

Relleno y Margen

Cuando deseas mover un elemento o agregar espacio entre elementos en tu página web, necesitarás ajustar el Padding o el Margin. Esto se realiza desde el menú de configuración del objeto; al hacer clic sobre el objeto, el menú lateral derecho se desplegará automáticamente.

Padding (Relleno):
Agrega espacio dentro de una sección, fila, columna o elemento. El padding crea espacio desde el borde exterior del objeto hacia adentro.

Margin (Margen):
Agrega espacio fuera de una sección, fila, columna o elemento. El margin crea espacio entre ese objeto y los que lo rodean.

Mover un elemento

Puedes mover un objeto dentro de tu página utilizando dos métodos sencillos:

Opción 1: Flechas arriba/abajo
Al pasar el cursor sobre el objeto, verás flechas para moverlo.
Haz clic en la flecha hacia arriba o hacia abajo para desplazar el elemento según su posición relativa con otros elementos cercanos.

Opción 2: Clic y arrastrar
También puedes mover un objeto manteniendo presionado el ícono de mover (normalmente representado por 6 puntos o líneas).
Arrástralo a la ubicación deseada y suelta el clic para colocarlo en su nueva posición.

Clonar un elemento

Al pasar el cursor sobre cualquier objeto, tendrás la opción de clonarlo, incluyendo todo lo que contiene en su interior.

Todos los ajustes y elementos dentro de la sección, fila, columna o elemento serán duplicados exactamente y colocados justo debajo del original.

Esto es especialmente útil cuando tienes un formato, diseño o contenido que deseas reutilizar en otra parte de la misma página o en otro sitio.

Eliminar un elemento

Si necesitas eliminar o quitar un objeto, simplemente pasa el cursor sobre él y selecciona el ícono de bote de basura. Esto eliminará el objeto de tu página.

? Si lo eliminaste por error, puedes usar las funciones de Deshacer/Rehacer para recuperarlo fácilmente.

Capas (Layers)

La función de Capas te permite visualizar todos los objetos de tu página y cómo están organizados dentro de la jerarquía de elementos del sitio web (Sección > Fila > Columna > Elemento).

Esta vista es especialmente útil cuando:

• Has movido un objeto por error y no logras encontrarlo.
• Un elemento está oculto en la vista móvil o de escritorio y no aparece en el editor.

Gracias a las capas, puedes identificar rápidamente la ubicación de cada componente y reorganizarlos si es necesario.

Páginas

Desde la pestaña Páginas, puedes ver y navegar entre las distintas páginas web de tu embudo o sitio web. Esta función te permite moverte rápidamente entre páginas cuando estás editando múltiples secciones dentro del mismo proyecto.

Puedes acceder a esta pestaña desde la barra de navegación del constructor, tanto en el centro como en el lado derecho de la interfaz.

Código de seguimiento (Tracking Code)

Si deseas agregar un código de seguimiento al encabezado (header) o pie de página (footer) de tu sitio web, puedes hacerlo desde la pestaña Código de seguimiento.

Esta función es útil para integrar herramientas como Google Analytics, píxeles de Meta, códigos de remarketing u otros scripts personalizados.

CSS Personalizado (Custom CSS)

Si deseas agregar estilos personalizados con código CSS a tu sitio web, puedes hacerlo desde la pestaña CSS personalizado.

Esta opción es ideal cuando necesitas personalizar aún más el diseño o comportamiento de tu sitio.

? Si no estás familiarizado con CSS, puedes consultar a un desarrollador para que te ayude a crear el código según tus necesidades específicas.

Tipografía (Typography)

Desde la pestaña Tipografía, puedes modificar la fuente predeterminada para los encabezados y el contenido de tu sitio web.

También puedes ajustar los colores del texto y de los enlaces, lo que te permite mantener coherencia visual y reforzar la identidad de tu marca en todo el sitio.