Saltar al contenido

Comparte este post:

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
Índice de este artículo

Editor Clásico MDirector

Índice de este artículo

Alejandra Vasquez Mendez

¿Cómo utilizar el Editor Clásico? 

Editor Drag&Drop

Con este tipo de editor, crear o modificar tus plantillas es tan fácil como arrastrar y soltar los diferentes tipos de bloques y elementos disponibles:  

mceclip0.png

– Puedes añadir la estructura añadiendo bloques de columnas:

mceclip1.png

– Y a su vez, insertar los elementos que prefieras en cada columna:

mceclip2.png

– Puedes mover, duplicar, borrar o editar cada elemento de la plantilla:

mceclip3.png

Imágenes:

Desde este editor puedes:

  • Importar una imagen desde tu ordenador local o bien añadir la URL de una imagen.
  • Editar las medidas de la imagen (https://mdtr.io/NQyfT), bloquear o desbloquear el tamaño proporcional, regresar al tamaño original del archivo de la imagen y recortar un fragmento de la imagen.
  • Añadir un titulo, texto alternativo (alt.) y enlace para crear un hipervínculo desde la imagen.
  • Agregar espacios (padding) alrededor de la imagen.
mceclip18.png

Títulos y textos:

Con el editor de texto puedes:

  • Crear párrafos con estilos y una variedad de fuentes a escoger entre Fuentes web seguras y Google Web Fonts (https://mdtr.io/OXfLq).

         *Google Fonts: https://mdtr.io/4RzOH

         *Párrafos copiados desde otros sitios se les tiene que borrar el formato. (Word)

mceclip5.png

Estilos Comunes de cada columna:

Puedes añadir estilos comunes a todos los elementos dentro de cada columna.

mceclip6.png

Insertar un botón de llamada a la acción (CTA)

Paso 1

Arrastra el elemento botón dentro de tu área de trabajo.

mceclip0.png

Paso 2

 Pulsa en el icono del selector «Editar”

mceclip1.png

Se abre la ventana con las propiedades del elemento que puedes editar.

Editar Contenido:

mceclip2.png
  1. Editar el estilo del texto: escoge el color, la fuente, el tamaño y el grosor (Normal, bold, etc.) del texto, además puedes añadir espaciado entre las letras.
  2. Texto del botón: recomendamos colocar llamadas a a la acción cortas y fáciles de comprender. 
  3. Titulo: o texto alternativo, al añadir titulo el contacto podrá leer un texto explicativo sobre el botón. 
  4. Enlace del botón: URL donde queremos llevar al contacto al dar clic en el botón. 

Editar los estilos del botón:

mceclip3.png
  1. Escoge el color de fondo del botón
  2. Añade borde y edita el estilo del mismo.
  3. Añade padding (espacio) dentro del botón 

Editar los estilos comunes de bloque (se aplican a todo el bloque – caja contenedora):

mceclip4.png
  1. Escoge el color de fondo del bloque. 
  2. Edita la alineación del bloque (si deseas que el botón se alinea a la izquierda, al centro o a la derecha).
  3. Añade padding (espacio) al bloque – fuera del botón.
  4. Añade borde al bloque y edita el estilo del mismo.
  5. Clase del elemento: elemento basado en el contenido atributo class (esta información es útil cuando deseas añadir CSS personalizado al contenido que se encuentra en este elemento).
  6. ID del elemento:  elemento basado en el contenido del atributo id. (esta información es útil cuando deseas añadir CSS personalizado al contenido que se encuentra en este elemento).

Añadir estilos generales:

En los estilos generales, puedes otorgarle estilos a toda la plantilla desde un mismo lugar, si lo necesitas, puedes escoger qué tipo de letra, tamaños, colores y fondos tendrá la plantilla general.

mceclip7.png

Puedes añadir CSS adicional con la opción avanzada «Custom CSS» para saber cómo haz clic en el siguiente enlace: https://mdtr.io/fHc4r

¿Aún tiene dudas? Si tienes cualquier pregunta envíanos un correo electrónico a soporte@mdirector.com.

Comparte este post:

¿Todavía tenés dudas?