Manual de Diseño de Páginas Web – Creativo Online

Introducción

Este manual detalla los pasos necesarios para editar y configurar páginas web en WordPress para Creativo Online. Sigue cada paso cuidadosamente para garantizar un diseño profesional y funcional.

A. Cambiar Copyright

Reemplazar "WordPress Theme by CreativeThemes" por "Diseño web Creativo Online".
Tamaño de fuente: 12px
Color: #c2c2c2
Color de fondo de fila: #e3e3e3 (gris claro para la fila inferior)
Espaciado vertical de la fila 10 px

Paso 1: Integrar Icono del sitio

🔹 Ruta:
Administrador → Personalizar → Identidad del sitio

Generar el icono en Canva Usando un elemento del logotipo del cliente

Subir archivo PNG con fondo transparente.

Paso 2: Cambiar URL de Administrador

🔹 Ruta:
Administrador → Ajustes → WPS Hide Login

🔹 Acción:
Cambiar login por creativo y guardar cambios.

⚠️ Nota: Esto mejora la seguridad al ocultar el acceso al panel de administración.

Paso 3: Asignar Número de Teléfono en WhatsApp Click

🔹 Ruta:
Administrador → Click to Chat

🔹 Acción:

Agregar el número de teléfono (sin código de país, ya que el plugin lo añade automáticamente).
Guardar cambios.

Paso 4: Deshabilitar Plugins y Eliminar Política de Privacidad

A. Deshabilitar Plugins Innecesarios

🔹 Ruta:
Administrador → Plugins → Plugins Instalados

🔹 Plugins a desactivar:

Hostinger AI
Hostinger Easy Onboarding
Hostinger Tools

B. Eliminar Política de Privacidad

🔹 Ruta:
Páginas → Buscar "Privacy Policy" → Enviar a papelera

Paso 5: Crear Páginas con Plantillas

A. Páginas Requeridas

Crear las siguientes páginas con sus respectivas plantillas:

Inicio
Servicios / Productos / Cursos
Contacto
Aviso de Privacidad

⚠️ Nota: Los títulos deben estar en mayúsculas y minúsculas (ej: “Servicios”, no “SERVICIOS”).

B. Proceso de Creación

Copiar código de la plantilla:

Ingresar a: creativoplantillas.site/creativo
Usuario: sorianogab@gmail.com
Contraseña: UnMillon2025.
Seleccionar la plantilla correspondiente y copiar el código en “Editor de código”.

Pegar código en WordPress:

Ir a Páginas → Añadir nueva.
Cambiar al “Editor de código” (menú superior).
Pegar el código y guardar.

Ajustar Aviso de Privacidad:

Modificar datos de contacto, nombre del sitio y teléfono según corresponda.

Paso 6: Creación de Menús

A. Desactivar LiteSpeed Cache

🔹 Ruta:
Plugins → Plugins Instalados → LiteSpeed Cache → Desactivar

B. Crear Menú Principal

🔹 Ruta:
Apariencia → Menús

Nombre del menú: Principal
Añadir páginas en orden:
Inicio
Servicios / Productos / Cursos
Contacto
Guardar.

C. Crear Menú de Pie de Página

🔹 Mismo proceso, pero con las páginas:

Inicio
Servicios / Productos / Cursos
Contacto
Aviso de Privacidad

Paso 7: Personalizar Cabecera

NOTA: Ver referencias de páginas similares para inspirarte

🔹 Ruta:
Apariencia → Personalizar

A. Asignar Paleta de Colores

Seleccionar colores principales del sitio.

B. Configurar Barra de Cabecera

Asignar color según diseño (claro/oscuro).

C. Asignar Menú Principal

Tamaño de fuente: 13px
Formato de texto: Mayúsculas y minúsculas
Ajustar colores de enlaces (activo/inactivo).

D. Subir Logotipos

Crear 3 versiones del logo en Canva (200px de altura, fondo transparente):

Logo original (colores normales).
Logo blanco (para fondos oscuros).
Logo negro (opcional).

🔹 Asignar logo según diseño:

Si el fondo es claro → Logo original.
Si el fondo es oscuro → Logo blanco.
Ocultar “Título del sitio”.

E. Eliminar Botón de Búsqueda

Desactivar en personalización.

F. Configurar Botón de WhatsApp

Texto: Envía un WhatsApp
Color normal: #33c233 (verde WhatsApp).
Color hover: #0aa80a (verde más oscuro).
Si el fondo es oscuro, usar fondo blanco y texto verde.
Vincular URL de WhatsApp.

G. Agregar Teléfono en Fila Superior

Insertar módulo HTML con:

  Teléfono: [Número]

Tamaño de fuente: 17px
Peso de fuente: 700 (bold)
Ajustar color según fondo.

Paso 8: Personalizar y Configurar Pie de Página

🔹 Ruta:
Administrador → Personalizar → Pie de página

A. Estructura de 4 Columnas

Ajustar en diseño.

B. Color de Fondo

Usar #424242 (gris oscuro).

C. Subir Logo en Pie de Página

Subir logo blanco desde Medios → Añadir archivo.
Redimensionar según diseño.

D. Añadir Menú de Pie de Página

Seleccionar menú vertical.
Color de texto: Blanco.
Tamaño de fuente: 15px.

E. Redes Sociales

Eliminar Twitter (si no se usa).
Tamaño de iconos: 18px.

F. Datos de Contacto

🔹 Widget 4 (última columna):

<strong>CONTACTO <br></strong>
<i class="icon fa fa-phone" aria-hidden="true"> </i> <strong>Teléfono:</strong> [Número] <br> 
<i class="icon fa fa-envelope-o" aria-hidden="true"> </i> <strong>E-mail:</strong> [Correo] <br>
<i class="icon fa fa-map-marker" aria-hidden="true"> </i> <strong>Ubicación:</strong> [Dirección]

⚠️ Ajustar datos según cliente. – PUBLICAR

Paso 9: Integrar Icono del sitio