Al elegir una de las plantillas disponibles en HostGator Studio, puede modificar todos los elementos para personalizar y aplicar la identidad visual de su negocio.

En la parte de texto, es posible cambiar la fuente, el tamaño de las letras, la posición, incluir enlaces, entre otros ajustes.

Para realizar esta edición, ya sea en una plantilla predeterminada o en un proyecto que desee iniciar desde cero, consulte el paso a paso a continuación: 

1En el Portal del Cliente, en el menú lateral, haga clic en Studio - También puede acceder desde la pestaña "Inicio" y luego en HostGator Studio:

2En la pantalla inicial de “HostGator Studio”, elija una plantilla prediseñada para comenzar a editar:

Si ya comenzó un proyecto anteriormente, haga clic en Proyectos y abra la plantilla que desea continuar:

3En la pantalla del editor, seleccione la opción que desee:

• Editar texto
• Añadir texto

Editar texto     

1En la plantilla, haga clic en el elemento que contiene una caja de texto o en el ícono de texto: 

2En el panel "Ajustes de texto", seleccione la opción de edición que desee utilizar: 

• Ordenar
• Alinear
• Definir transparencia
• Cambiar color
• Elegir fuente
• Estilo de fuente
• Cambiar tamaño
• Alineación del texto
• Estilo del texto
• Color de fondo
• Ajuste automático
• Agregar efeitos
• Añadir Enlace (Link)
• Eliminar

Ordenar     

Define la posición del texto en relación con los demás elementos de la plantilla:

1En el panel "Ajustes de texto", haga clic en Ordenar

2Luego, seleccione una opción:

• Hacia atrás - coloca el texto detrás de imágenes u otros elementos
• Hacia adelante - coloca el texto por encima de otros elementos 

Alinear      

Establece la posición del texto en relación con el espacio de la plantilla:

1En el panel "Ajustes de texto", haga clic en Alinear

2A continuación, haga clic en la opción que desee:

• A) Alinear a la izquierda: el texto toca el lado izquierdo de la plantilla;
• B) Centrar horizontalmente: el texto está en el centro de la plantilla, horizontalmente;
• C) Alinear a la derecha: el texto toca el lado derecho;
• D) Alinear en la parte superior: el texto toca la parte superior del margen;
• E) Centrar verticalmente: el texto está en el centro de la plantilla, verticalmente;
• F) Alinear en la parte inferior: el texto toca la parte inferior, en la base del proyecto.

Definir transparencia     

Establece la cantidad de texto visible en la plantilla - parcial o totalmente transparente

1En el panel "Configuración de texto", haga clic en Transparencia

2Luego haga clic en el botón, arrastre y suelte, hasta que sea transparente en el porcentaje que desea, siendo 0% completamente transparente

Cambiar color     

Para usar otro color en el texto:

1En el panel "Ajustes de texto", haga clic en Color

2Luego puedes agregar el color de varias maneras:

• A) Selector de color manual: arrastra la perilla hasta que alcance el tono que desea
• B) Con código HEX- código hexadecimal
• C) Colores predeterminados

A) Selector de color manual

1. En la barra de colores, arrastre la bola para elegir el color principal (rojo, azul, verde, etc.)

2. Luego, en el cuadrado grande, haz clic y arrastra el círculo blanco hasta que encuentres el tono y la intensidad del color (más claro, más oscuro o más vivo):

B) Con código HEX

Si ya ha definido el código de color (código hexadecimal), en el campo "HEX" informe que debe aplicar - Por ejemplo: para el blanco, el código a insertar es #FFFFFF

También puede ajustar manualmente los valores de rojo (R), verde (G) y azul (B) para encontrar el color que desee:

C) Colores predeterminados

En esta sección encontrará una paleta con colores ya hechos, haga clic en el color que quiere que se aplique.

Si quiere dejarlo sin colorear, haga clic en el recuadro blanco con una línea roja:

3Al elegir el color, se agrega automáticamente al elemento de texto:

Otras acciones que puede hacer al elegir el color son:

• Marcar un color como favorito: Haga clic en el icono del corazón para guardar el color como favorito y usarlo más fácilmente más adelante:

Para volver al menú de configuración de texto, haga clic en la flecha para expandir o dentro de la plantilla sobre el texto:

Estilo de fuente    

Permite elegir el tipo de grosor de la fuente, por ejemplo: regular, negrita, clara, entre otros.

Para usar otro estilo en el texto:

1En el panel "Configuración de texto", haga clic en el estilo de fuente, por ejemplo, Regular, que varía según la fuente de la plantilla

2Luego haga clic en la flecha para elegir otra variación - Si está disponible

Cambiar tamaño     

Establece el tamaño de fuente del texto:

1En el panel "Configuración de texto", haga clic en el campo numérico

2A continuación, haga clic en la opción que desee:

• "+" para aumentar el tamaño de la fuente
• "–" para disminuir el tamaño de la fuente

Alineación del texto     

Ajusta la posición del texto dentro del espacio del cuadro de texto:

1En el panel "Ajustes de texto", haga clic en Alinear texto (icono de líneas) y elija la opción que desee:

• Izquierda: alinea el texto a la izquierda dentro del espacio del cuadro;
• Centrado: centra el texto dentro del espacio del cuadro;
• Derecha: alinea el texto a la derecha dentro del cuadro;
• Justificado: deja el texto alineado en ambos lados (izquierda y derecha)

2En el icono con flechas hacia arriba y hacia abajo para controlar el espacio interior entre el texto y los bordes del cuadro:

3A continuación, aplique formato al texto:

• Texto destacado (bold) (B): hace que el texto sea más fuerte y prominente
• Cursiva (I): Inclina el texto hacia la derecha, dando énfasis o estilo al contenido

Estilo del texto    

Permite elegir el tipo de estructura visual del texto, es decir, cómo aparecerá el texto en la plantilla o página.

1En el panel de edición situado encima del cuadro de texto, haga clic en Estilo

2A continuación, haga clic en la opción que desee:

• Título: hace que el texto sea más grande y resaltado - se usa para los títulos principales
• Subtítulo: un poco más pequeño que el título - se usa para subtítulos o secciones
• Párrafo: formatos como texto corrido - Ideal para oraciones o descripciones
• Normal: estándar, texto sin formato
• Lista: organice el contenido con viñetas (en temas)

Color de fondo     

Permite aplicar un color de fondo detrás de la letra, como si fuera un resaltador

1En el panel de edición situado encima del cuadro de texto, haga clic en el icono con la letra "A" sobre un fondo de tablero de ajedrez (Color de fondo)

2Luego puedes agregar el color de varias maneras:

• A) Con código HEX: si ya ha definido el código de color (código hexadecimal), informe que se aplique:

 

• B) Colores estándar: colores predefinidos que vienen listos en la plataforma:

 

• C) Círculo de color: establezca un color personalizado, a través de:
  • Selector de color manual: arrastre el botón hasta que alcance el tono que desea
  • Con código HEX - código hexadecimal
  • Colores predeterminados

• D) No hay color detrás del texto: haga clic en el círculo blanco con una raya roja. Esto hará que el texto tenga el mismo color que el fondo de la página o de tu plantilla:

Ajuste automático     

Ajusta automáticamente el tamaño del cuadro de texto para que se ajuste al contenido o viceversa.

En el panel de edición, encima del cuadro de texto, haga clic en Ajuste automático

Añadir efectos     

Para cambiar los colores y la apariencia del texto:

1En el panel "Ajustes de texto", en "Añadir efectos", haga clic en el efecto que desee:

• A) Eliminar efecto: elimina cualquier efecto visual aplicado previamente al texto, como sombra o desenfoque, dejando el texto limpio:

• B) Desenfocado: aplica un desenfoque al texto:

• C) Sombra: agrega una sombra alrededor del texto, creando un efecto de profundidad que ayuda a que el texto se destaque sobre el fondo:

Añadir enlace (Link)    

Hay dos formas de añadir un enlace a una plantilla:

• A) Icono de enlace en el texto: para convertir palabras o frases en enlaces
• B) Sección "Agregar enlace": para agregar un enlace directo en un botón, imagen u otro elemento (como WhatsApp, sitio web o correo electrónico)

A) Icono de enlace en el texto  

Si desea insertar un enlace directamente en una palabra o frase, por ejemplo: convertir la palabra "cómo hacerlo" en un enlace a un artículo

1En el panel de edición, seleccione la palabra o frase que desea convertir en un enlace

2A continuación, encima del cuadro de texto, haga clic en Link

3Agregue la URL que desea utilizar

4Para finalizar, haga clic en Aplicar

Eliminar     

Para eliminar texto de la plantilla:

1En la plantilla para seleccionar el contenido, haga clic en el cuadro de texto 

2En el panel "Ajuste de texto" en la esquina superior derecha, haga clic en el icono de la papelera