Páginas de destino. Tercera parte: editar los ajustes de los elementos de su página de destino

Ahora que ya ha creado las secciones de su página de destino, ha llegado el momento de llenarla de elementos como texto, imágenes o botones. En este artículo aprenderemos a configurar las secciones, las filas, las columnas y los elementos para crear una página de destino sin igual.

Hemos elaborado una serie de artículos para ayudarle a crear sus páginas de destino. 

💡 Información relevante
Las páginas de destino solo están disponibles para los planes Premium y Empresa.

En este tutorial veremos:

Ajustes comunes

Las secciones, filas y columnas, e incluso los elementos, comparten ciertos ajustes. En primer lugar, describiremos los ajustes comunes y, a continuación, nos ocuparemos de los específicos.

Espacios

mceclip2.png

Primero, deberá decidir si quiere editar los márgenes y los espacios de separación verticales u horizontales

El margen es un espacio en la parte exterior de algo, mientras que el espacio de separación es el espacio en el interior de algo.

  • Margen: sirve para crear el espacio alrededor de un elemento, fuera de cualquier borde definido.
  • Espacio de separación: crea el espacio que hay dentro de su elemento, entre el icono y los bordes.

Puede elegir entre diferentes tipos de espacios desde el XS (el más pequeño) hasta el XL (el más grande).

Visibilidad

Estos ajustes no tienen ningún impacto visual en el editor. Afectarán únicamente a las páginas publicadas para que no pierda de vista el contenido que hay en el editor.

  • Ocultar en tabletas: puede controlar la visibilidad de cada sección de su página de destino por dispositivo, dentro de la sección de editar. 
  • Ocultar en móviles: puede controlar la visibilidad de cada sección de su página de destino por dispositivo, dentro de la sección de editar.

Color de fondo e imagen de fondo

Desde aquí puede añadir un color de fondo y añadir distintos grados de transparencia.

Para la imagen de fondo, puede añadir una imagen desde su ordenador, desde nuestra galería de imágenes o usando una dirección URL. Nuestra galería de imágenes contiene cientos de fotografías de stock (sin derechos de autor) que puede usar para su página de destino.

💡 Información relevante
El color de su texto cambiará automáticamente en función del color de fondo.

Secciones

Propiedades de la sección

Aquí es donde puede ponerle un nombre a cada sección. El nombre aparecerá en el panel izquierdo de navegación.

💡 Información relevante
Le recomendamos que cambie los nombres de sus secciones para navegar mejor entre estas.

Estilo

Haga clic en Estilo para mostrar los ajustes de estilo:

mceclip1.png
  • De un borde al otro: esto afecta al espaciado horizontal entre los diferentes lados de la sección.
  • Altura total: esto muestra la imagen como una imagen completa.
  • Parallax de fondo: el «parallax» es una técnica de diseño gráfico para que la imagen de fondo se mueva más lentamente que el contenido cuando bajemos o subamos dentro de la página.

Filas

Puede editar los ajustes de navegación de una fila en la pestaña de diseño del panel izquierdo como vimos en Páginas de destino. Segunda parte: definir la estructura de su página de destino. También puede usar la ruta que aparece en la parte superior de la pantalla al hacer clic en un elemento.

mceclip5.png

Color de fondo, espacios y visibilidad

Los primeros parámetros coinciden con los de Ajustes comunes que hemos visto más arriba.

Avanzado

mceclip3.png
  • Esconder los canales entre las columnas: esto sirve para mostrar el espacio (canal) entre las columnas.
  • Redondear los bordes: esto permite redondear las esquinas de la fila.

Columnas

Estilo

En la pestaña de Estilo, podrá:

2020-11-12_12-04-05.png
  • Cambiar el tamaño: elegir el ancho de la columna.
  • Tamaño para móviles: elegir el ancho de la columna en los móviles.
  • Editar los bordes: esto permite redondear las esquinas de la columna. 

Color/imagen de fondo, espacio y visibilidad

Estos parámetros coinciden con los Ajustes comunes que hemos visto más arriba. 

Texto

Puede modificar el estilo del texto usando la barra de formato. Basta con seleccionar el texto que quiera editar y aparecerá la barra. Puede acceder a más opciones haciendo clic en los tres puntitos que hay en la esquina superior derecha.

Text_set_up_EN.png

Imagen y logo

Las imágenes y los logos son la mejor manera de personalizar el diseño de sus páginas de destino y hacer que sean más atractivas.

Para añadir una imagen o un logo, puede escribir su dirección URL o hacer clic en AÑADIR (o en REEMPLAZAR) en el menú derecho. Se abrirá una ventana emergente para gestionar los archivos. Tiene las siguientes opciones:

  • Seleccionar un archivo desde su ordenador.
  • Seleccionarlo desde la galería de imágenes: en la parte izquierda del editor, aparecerá un menú para que busque imágenes sin derechos. Puede buscarlas por categorías (negocios, consultoría, ejercicio, marketing, negocios, servicios, etc.).

Una vez que haya seleccionado su imagen, tiene diferentes opciones:

Edit_Image_EN.png

  • Cambiar el tamaño: seleccione el tamaño de la imagen que se mostrará.
  • Texto alternativo: añada una etiqueta de texto alternativo para describir la imagen.
  • Enlace: añada un enlace de redirección.

Juegue con el estilo de sus imágenes y logos

  • Sombra de fondo: añada una sombra a la imagen.
  • Bordes: defina cómo de redondeados serán los bordes de la imagen.
  • Alineación: puede colocar la imagen a la derecha, en el centro o a la izquierda.

Botón

Puede usar el elemento de Botón para añadir un enlace a un sitio web o a otra sección. Añadir botones a las páginas de destino es una buena manera de destacar los enlaces específicos para que la gente haga clic.

Propiedades

Edit_Button.png
  • Llamada a la acción: escriba el texto que quiera mostrar en el botón de llamada a la acción.
  • Seleccionar una acción: elija entre tres tipos de acciones. Pueden ser, enlazar a una URL, vincular a una sección o enlazar a una página de este recorrido.

    Si selecciona Vincular a una sección, elija a cuál a partir del menú desplegable.

    Si selecciona enlazar a una página de este recorrido, selecciónela a partir del menú desplegable.

  • Elegir un destino: elija si quiere abrir el enlace en la pestaña actual o en una nueva.
  • URL (enlace): añada el enlace al que redirigirá el botón.

Juegue con el estilo de su botón

Haga clic en Estilo para cambiar el estilo del botón.

2020-11-12_11-41-22.png
  • Color: elija el color del botón.

  • Ancho total: defina si quiere que el ancho del botón ocupe toda la columna o no.

  • Relleno: seleccione si el botón estará relleno o vacío:
    mceclip0.png

  • Tamaño: cómo de grande quiere que sea el botón.

  • Forma: seleccione si el botón será cuadrado, redondo u ovalado.

  • Sombreado: añada una sombra más clara o más oscura.

Espacios y visibilidad

El resto de parámetros coinciden con los de los Ajustes comunes que hemos visto más arriba.

Divisor

Debajo de la pestaña de Estilo, elija cómo de grueso será su divisor: fino, grueso o muy grueso.

💡 Información relevante
Solo se puede añadir un divisor horizontal.

Formulario

Lea nuestra sección detallada sobre este aspecto en la Cuarta parte: añadir un formulario y usar las opciones avanzadas.

Icono

Ajustes de su icono

mceclip4.png
  • Reemplazar icono: si hace clic en el icono o en el botón de reemplazar, aparecerá una ventana emergente con la librería de iconos. Puede elegir entre más de 1400 iconos diferentes. Puede buscar los iconos por nombre gracias al cuadro de búsqueda. También puede filtrarlos por conjuntos de iconos.

  • Cambiar el tamaño: puede cambiar el tamaño del icono a su antojo.

  • Alineación: puede colocar la imagen a la izquierda, en el centro o a la derecha.

  • Enlace: añada una URL aquí.

Espacio

El resto de parámetros coinciden con los Ajustes comunes que hemos visto más arriba. 

Vídeo

En la pestaña de URL, añada un enlace a su vídeo. Puede usar un vídeo alojado en YouTube, Vimeo, Dailymotion, Canal+, Wista, Twitch, Youku y Coub.

⏩ ¿Qué es lo siguiente?