Cómo crear una página web de comercio electrónico B2B desde cero: una guía paso a paso, desde la elección del servidor hasta el lanzamiento completo

En esta era de expansión hacia los mercados internacionales, contar con un sitio de comercio electrónico B2B de alta conversión es la base para generar consultas específicas desde el extranjero y fortalecer el valor de marca. Sin embargo, para muchos profesionales del comercio internacional que trabajan por cuenta propia y propietarios de fábricas sin experiencia previa, crear un sitio web a menudo implica costos de subcontratación exorbitantes que pueden ascender a decenas de miles de dólares, o el dolor de cabeza de lidiar con códigos complejos.

Para superar estas barreras técnicas, este tutorial ofrece una solución a medida para la creación de sitios web dirigida a principiantes absolutos que te permitirá “superar a la competencia”. Dejaremos atrás por completo el engorroso método tradicional de codificación manual y te guiaremos para que domines la “combinación perfecta” de herramientas de creación de sitios web, ampliamente reconocida dentro de la comunidad global de sitios web independientes como la más eficiente y vanguardista:

Hostinger (el alojamiento web con la mejor relación calidad-precio para un alcance global) ➕ WordPress (el creador de sitios web de código abierto más potente) ➕ Elementor (el mejor editor visual de arrastrar y soltar del mundo) ➕ Elementor Template Kits (kits de plantillas premium para empresas listas para usar).

Gracias a esta arquitectura subyacente, cuya eficacia ha sido demostrada por innumerables empresas de éxito que se han expandido al extranjero, incluso si eres un principiante absoluto sin ningún conocimiento de programación, podrás crear rápidamente un sitio web B2B de nivel empresarial —uno que se cargue a la velocidad del rayo, cuente con una estética sofisticada y esté diseñado para captar consultas internacionales— simplemente siguiendo la guía paso a paso, como si estuvieras armar un rompecabezas. Evita dar vueltas, no te dejes engañar y toma el control real de tus activos digitales fundamentales.

¿Estás listo? ¡Empecemos oficialmente este viaje para crear un sitio web de alta calidad!

🛠️ Paso 1: Elige un proveedor de alojamiento web y un nombre de dominio

Hay innumerables proveedores de alojamiento web en el mercado, pero muchos principiantes en el comercio internacional suelen caer en la trampa de optar por servidores en la nube profesionales que son extremadamente caros y difíciles de usar. Para quienes se dedican al comercio internacional o están expandiéndose a mercados extranjeros, el rendimiento del servidor determina directamente la rapidez con la que los visitantes internacionales pueden acceder a su sitio web. Hoy me gustaría recomendar Hostinger, ampliamente reconocido por millones de administradores web de todo el mundo como el rey indiscutible de la relación calidad-precio.

Sus principales ventajas son su excelente relación calidad-precio y su panel de control minimalista y fácil de usar (hPanel), ideal para quienes se inician en el comercio internacional; además, su red global de servidores es perfecta para empresas que se expanden al extranjero.

1. Elige el plan comercial que ofrezca la mejor relación calidad-precio

En esta página, te recomiendo encarecidamente que elijas el “Plan Business” desde el principio. Muchos principiantes eligen el paquete más básico para ahorrarse unas pocas libras, solo para descubrir que, una vez que suben unas cuantas imágenes de productos en alta resolución, el sitio se vuelve extremadamente lento. El Plan Business ofrece el equilibrio perfecto entre rendimiento y precio, con una potencia de procesamiento de CPU superior y almacenamiento NVMe ultrarrápido: la base esencial para garantizar que tu sitio se cargue al instante, mejorar tu posicionamiento SEO en Google y retener a los clientes internacionales.

Para ser sincero, muchos principiantes se sienten indecisos a la hora de elegir un plan de alojamiento web. La diferencia de precio mensual entre los planes Premium y Business es de solo uno o dos dólares, así que si un amigo me preguntara, normalmente le daría este consejo sincero:Si es posible, opta directamente por la versión comercial Esto no es un discurso de ventas; son simplemente las lecciones que hemos aprendido a base de mucho esfuerzo a partir de nuestros propios errores:

1. En primer lugar, la velocidad de cargaLos visitantes extranjeros suelen tener poca paciencia a la hora de navegar por sitios web; si la página tarda más de tres segundos en cargarse, simplemente la cerrarán. La versión comercial utiliza almacenamiento NVMe ultrarrápido e incluye una red de aceleración global sin costo adicional. Es como construir una autopista para tu sitio web; este tipo de ventaja de velocidad subyacente es muy difícil de lograr posteriormente con simples ajustes en el código.
   
2. En segundo lugar, ofrece a los recién llegados la oportunidad de enmendar sus errores“Cuando estás empezando a crear un sitio web, es inevitable que te encuentres con algunos contratiempos; a veces, un solo clic en el lugar equivocado puede dejar tu sitio con una pantalla en blanco. El Plan Básico solo realiza copias de seguridad una vez a la semana, pero el Plan Empresarial realiza copias de seguridad automáticas todos los días. ¿Tu sitio se bloquea? Solo tienes que iniciar sesión en el panel de administración y restaurarlo con un solo clic. Con esta red de seguridad, puedes explorar todo lo que quieras.
   
3. Por último, está el costo económico oculto. El creador de sitios web de arrastrar y soltar que utilizaremos más adelante consume muchos recursos, y la Edición Comercial cuenta con potencia de procesamiento más que suficiente para garantizar que no experimentes ningún retraso al trabajar en el backend. Además, si optas por la Edición Básica, terminarás gastando cientos de dólares en plugins individuales más adelante si deseas habilitar las “copias de seguridad diarias” y la “aceleración global”. Si se tiene en cuenta todo esto, adquirir la Edición Comercial desde el principio es, en realidad, la opción más rentable y sin complicaciones.
   

Crear un sitio web es como construir una casa: si se sientan unas bases sólidas desde el principio, te sentirás mucho más seguro a la hora de crear contenido y atraer tráfico más adelante.

2. Duración de la suscripción y cómo obtener descuentos

En cuanto a la duración de tu suscripción, te recomiendo encarecidamente queSelecciona directamente 48 meses (4 años) La razón es sencilla: la regla no escrita en el sector del alojamiento web es que “la compra inicial es barata, pero las renovaciones son caras”.

El bajo precio que ves ahora mismo es una oferta especial para nuevos clientes. Si te suscribes solo por un año, el precio volverá a la tarifa estándar cuando renueves el año que viene, que suele ser dos o tres veces más cara. Al optar por el plazo completo de 48 meses, disfrutarás de tres ventajas importantes:

• Precio unitario más bajo: Por solo unos pocos dólares al mes de media, es la mejor relación calidad-precio.
  
• Asegúrate el precio bajo durante 4 años: Asegúrate este “precio de ganga” durante cuatro años completos, para que no tengas que preocuparte por las elevadas tarifas de renovación en los próximos años y puedas dedicarte a tu negocio con tranquilidad.
  
• Prueba y error sin riesgo: Incluye una garantía de devolución del dinero de 30 días sin preguntas. Incluso si cambias de opinión sobre la creación de un sitio web después de la compra, puedes solicitar un reembolso sin ningún tipo de presión. Puedes hacerlo directamente a través de ZLink’sEnlace de descuento exclusivoVisita el sitio web de Hostinger para comprar y disfrutar de un descuento del 20 %.
  

Además del bajo precio original para nuevos clientes a 48 meses, ¡hay un descuento adicional sobre el precio total! Todas estas medidas te han ayudado realmente a ahorrar una cantidad significativa de dinero, minimizando los costos iniciales de prueba y error que conlleva la creación de un sitio web.

Los usuarios nacionales pueden optar por pagar a través de Alipay, lo cual resulta bastante cómodo. Una vez completado el pago, puedes comenzar a configurar el servidor e instalar el sistema del sitio web.

⚙️ Paso 2: Instalar WordPress

Los pasos concretos son los siguientes:

1. Accede al panel de control de la cuenta y agrega un sitio web

Una vez que el pago se haya procesado correctamente, el sistema te redirigirá automáticamente al panel de control de Hostinger (hPanel). En la barra de navegación situada en la parte superior de la página, haz clic en la opción “Sitios web”. En la lista de páginas, verás el paquete “Alojamiento web para empresas” que acabas de adquirir. Dentro del área de la ficha correspondiente a ese paquete de alojamiento, haz clic en el botón “Añadir sitio web” para iniciar el asistente de creación de un nuevo sitio web.

2. Elige un creador de sitios web y configura los ajustes

En la pantalla de selección del creador de sitios web que aparecerá a continuación, solo tienes que seleccionar WordPress . Siga las instrucciones que aparecen en pantalla para completar las siguientes configuraciones básicas una tras otra:

• Idioma del panel de administración de WordPress: Según tus preferencias personales, selecciona el idioma de la interfaz del panel de administración del sitio web en el menú desplegable (por ejemplo, “Chino (China)” o «Inglés»).
  
• Dirección de correo electrónico del administrador: Introduzca su dirección de correo electrónico principal del trabajo (por ejemplo, zlink@gmail.com, tal y como se muestra en el ejemplo). Esta dirección de correo electrónico se utilizará para recibir notificaciones importantes del sistema procedentes del sitio web, consultas a través de formularios y para la recuperación de contraseñas, entre otros fines.
  

3. Asignar o seleccionar un nombre de dominio temporal

En esta pantalla, el sistema te pedirá que indiques la URL del sitio web. Dependiendo de cómo tengas todo preparado, puedes elegir entre las dos opciones siguientes:

• Añadir y registrar un nombre de dominio: Si ya has elegido el nombre de dominio oficial de tu marca, puedes introducirlo aquí directamente para reclamar el dominio gratuito incluido en tu paquete de alojamiento (como se muestra en el ejemplo, zlink2026.com, que es gratuito durante el primer año).
  
• Utiliza un nombre de dominio temporal: Si aún no has elegido un nombre de dominio adecuado, no hay necesidad de quedarte atascado en esta etapa. Simplemente haz clic en el enlace “Usar un dominio temporal” en la parte inferior derecha de la página. El sistema te asignará automáticamente una dirección temporal para que la uses mientras tanto. Puedes usar este dominio temporal para acceder al panel de control de WordPress y empezar a crear tu sitio y subir contenido. Una vez que hayas elegido un dominio permanente, podrás vincularlo y sustituirlo; este proceso no afectará tu progreso ni los datos existentes.
  

Por favor, espere a que finalice la instalación.

4. Omite el asistente de configuración del sitio web y ve directamente a WordPress

Una vez completada la configuración del dominio, el sistema te redirigirá a la pantalla “Elegir método de creación del sitio web”. En la parte principal de la página aparecerán dos opciones: “Crear un sitio web con IA” y “Sitios web y temas prediseñados”.

En este paso, no marques ninguna de las opciones anteriores. Mira directamente en la parte inferior derecha de la página y haz clic “Pasarse a WordPress” Botón.

Instrucciones y justificación: El enfoque principal de este tutorial consiste en crear desde cero un sitio de comercio electrónico B2B/B2C de alta conversión mediante el uso de los kits de plantillas de Elementor. Al evitar los temas generados por IA y prediseñados que ofrecen los proveedores de alojamiento, te aseguras de comenzar con un entorno de WordPress completamente limpio. De esta manera, se evita la instalación de plugins y código innecesarios y redundantes, sentando así las bases para crear un sitio web de alto rendimiento y altamente personalizable.

(Consejo adicional: si los requisitos de tu proyecto actual son bastante básicos y solo necesitas crear rápidamente un sitio web personal o de presentación, haz clic aquí para ver el tutorial del creador de sitios web con un solo clic de Hostinger AI). Una vez que hayas iniciado sesión correctamente en el panel de administración de WordPress, debemos realizar algunas tareas clave de configuración inicial.

🧰 Paso 3: Implementar el motor de Elementor

El creador de sitios web viene preinstalado con varios temas básicos anuales (como “2025”, etc.). Para garantizar una velocidad de carga óptima y una total libertad de personalización al utilizar el editor de páginas más adelante, nuestra prioridad principal es sustituir el marco subyacente del sitio web por el tema más ligero y limpio disponible.

1. Instala y activa el tema Hello Elementor Clean

Sigue los pasos que se indican a continuación para realizar la operación en el panel de administración:

1. Ir a la configuración del tema: En el menú de navegación oscuro situado a la izquierda del panel de control de WordPress, busca y haz clic en “Apariencia”. El sistema te redirigirá automáticamente a la página de administración de “Temas”.
   
2. Añadir un nuevo tema: Haz clic en la parte superior de la página o debajo del área de contenido “Instalar un tema (Añadir nuevo tema)” Haz clic en el botón para acceder a la biblioteca de temas.
   

3. Buscar e instalar: En la lista «Popular» de la página de la biblioteca de temas, busca el que se llama “Hola, Elementor”(que puede aparecer como “Hola, Elementor” en la interfaz en chino). Si no lo ves en la página de inicio, puedes buscarlo utilizando el cuadro de búsqueda de la derecha.
   
4. Habilitar tema: Pasa el cursor sobre la ficha del tema “Hello Elementor” y, a continuación, haz clic primero en “Instalar” botón. Una vez que el sistema haya terminado de descargar, el botón cambiará a “Habilitar”Haz clic de nuevo para activar el tema.
   

Instrucciones de uso y consideraciones técnicas: Hello Elementor es un tema “esqueleto” desarrollado por el equipo oficial de Elementor específicamente para funcionar con su editor visual. Elimina casi todo el código de estilo predefinido y las funciones no esenciales, reduciendo el tamaño del código al mínimo. Usar este tema es como tener un “lienzo” completamente en blanco y sin tocar; no solo elimina por completo los retrasos en la carga causados por el código redundante, sino que también ofrece el entorno subyacente ideal para obtener una puntuación alta en las evaluaciones de Google PageSpeed.

2. Instala el creador de sitios web principal: Elementor Basic

En primer lugar, debes instalar la versión básica gratuita directamente desde el panel de control de WordPress:

1. Ir a la gestión de complementos: En la barra de navegación de la izquierda del panel de administración, haz clic en “Complementos -> Añadir nuevo complemento” 。
   
2. Buscar e instalar: Escribe una palabra clave en el cuadro de búsqueda de la derecha “Elementor”. En los resultados de la búsqueda, busca el complemento con el ícono rosa y el nombre completo “Elementor Website Builder – más que un simple creador de páginas”.
   
3. Instalar y habilitar: Toca los siguientes elementos en la ficha del complemento, en este orden: “Instalar ahora”Una vez completada la instalación, haz clic en “Habilitar” 。
   

3. Obtener e instalar Elementor Pro

Para disfrutar de un diseño visual de nivel empresarial, la personalización de temas en todo el sitio (Theme Builder) y la integración dinámica de datos, necesitarás la versión Elementor Pro. Hay dos formas de obtener la versión Pro:

• Opción A: Suscríbase a través del sitio web oficial (recomendado para empresas con un presupuesto suficiente): Puedes adquirir una licencia original en el sitio web oficial de Elementor; los precios suelen empezar en 14,99 £ al año (lo que equivale a poco más de 400 RMB).
  
• Opción B: En Centro de recursos de ZLinkDescarga la versión compatible con la licencia GPL (recomendada para que los principiantes experimenten y mantengan los costos bajos)Aquí puedes descargar la versión de código abierto de Elementor Pro GPL —que ha sido sometida a una exhaustiva auditoría de seguridad por parte de nuestro equipo técnico y tiene todas las funciones totalmente activadas— de forma gratuita (o a un costo muy bajo).
  

Una vez que hayas descargado el archivo .zip de Elementor Pro, vuelve al panel de administración de tu sitio web para completar la instalación:

1. Sube el archivo comprimido: Inténtalo de nuevo “Complementos -> Instalar complementos” página; esta vez, haz clic en la parte superior de la página “Plugin de carga” Botón.
   
2. Seleccionar e instalar: Haz clic en “Elegir archivo”, busca el archivo .zip de Elementor Pro que acabas de descargar en tu computadora (Nota: no descomprimas este archivo) y, a continuación, haz clic en “Instalar ahora” 。
   
3. Activar el complemento: Una vez finalizado el proceso de instalación, haz clic en el botón que aparece en la página “Activar complemento” Botón. Ya has desbloqueado por completo todas las funciones del creador visual de sitios web de WordPress más potente que existe en la actualidad.
   

🎨 Paso 4: Importar el paquete de plantillas empresariales

Para garantizar que el sitio web se cargue lo más rápido posible y siga siendo totalmente compatible con el plugin Elementor, en esta etapa estamos firmemente comprometidos aNo utilizar temas tradicionales de WordPress, sino que adopta un estilo más moderno y ligero Kits de plantillas 。

1. Visita ThemeForest para elegir un paquete de plantillas adaptado a tu sector

ThemeForest es el mercado más grande del mundo de recursos digitales y plantillas para sitios web, y reúne paquetes de plantillas de Elementor creados por los diseñadores más destacados del mundo.

1. Acceder a la plataforma: Abrir en el navegador Sitio web oficial de ThemeForest, o bien puedes ir aCentro de recursosElige lo que quieras: todos los kits están a mitad de precio. Si hay algo que no aparece en la lista, ponte en contacto con zlink y lo añadiremos a la tienda para ti, ahorrándote también el costo de la plantilla.
   
2. Clasificación precisa: En la barra de navegación superior o en el cuadro de búsqueda, especifica explícitamente la categoría de búsqueda como “Kits de plantillas” O busca directamente “Kits de plantillas de Elementor” 。
   
3. En combinación con la búsqueda por sector: Introduce palabras clave específicas en inglés relacionadas con tu sector en el cuadro de búsqueda. Por ejemplo, si te dedicas al comercio internacional de maquinaria y equipos, podrías buscar «Machinery Elementor Template Kit».
   

Criterios de evaluación y selección:

• Fíjate en lo esencial, no en las apariencias: Cuando veas una vista previa de una plantilla, no te limites a las imágenes de demostración originales ni a la combinación de colores predeterminada. Con Elementor Pro, puedes sustituir todas las imágenes, colores y fuentes con un solo clic más adelante.
  
• Céntrate en la lógica de conversión: Lo que debes tener en cuenta al evaluar esta plantilla esMarco de diseño(Por ejemplo, si la barra de navegación es clara, si hay un botón de llamada a la acción destacado en la primera pantalla, si la sección de especificaciones de la página de detalles del producto está bien organizada y si el formulario de consulta está situado en un lugar destacado, etc.)
  

Una vez que hayas encontrado un paquete de plantillas que te guste, te guiaremos paso a paso para que lo compres y lo descargues, y luego lo importes sin problemas a tu panel de control de WordPress recién creado, como si estuvieras armar un rompecabezas.

En este tutorial, veremos Astrobot Kit de plantillas para robots industrialescomo base para demostraciones. Con su diseño B2B limpio y de estilo industrial, este kit sirve como modelo ideal para sitios web independientes de alta conversión.

2. Instala el complemento de importación: Envato Elements

Aunque ya hemos instalado el motor de Elementor, WordPress no admite de forma nativa la importación directa de paquetes de plantillas en formato .zip. Por lo tanto, debemos instalar este complemento oficial y gratuito.

1. Visita la tienda de complementos: En el menú de la izquierda del panel de control de WordPress, haz clic en “Plugins -> Añadir nuevo” 。
   
2. Complemento de búsqueda: Escribe una palabra clave en el cuadro de búsqueda de la esquina superior derecha:Envato Elements 。
   
3. Instalar y habilitar: Busca el complemento «Template Kit – Import» con el ícono de la hoja verde y, a continuación, haz clic en “Instalar ahora”Una vez completada la instalación, haga clic en “Habilitar” 。
   

3. Compilación y subida de paquetes

En el panel de control de WordPress, haz clic en “Herramientas -> Kit de plantillas”Haz clic en el área de carga y selecciona el paquete .zip de Astrobot Core que descargaste. Una vez completada la carga, haz clic en “Ver kit instalado” para acceder a la interfaz de administración.

4. Configurar las dependencias del entorno (Requisitos de instalación)

Una vez importado el paquete, el sistema verificará el entorno de ejecución.

• Realizar la operación: Haz clic en el botón naranja que se encuentra en la parte superior de la página “Requisitos de instalación” 。
  
• Componentes de instalación: En la ventana emergente, haz clic en “Instalar arriba” 。
  
• Especificaciones técnicas: Por favor, espera a que se completen todas las barras de progreso. Este paso instalará automáticamente cualquier complemento o biblioteca de iconos adicional que requiera el paquete para garantizar que la página funcione correctamente. Si aparece un mensaje de error, simplemente actualiza la página.
  

5. Importar estilos de kits globales

Antes de desarrollar páginas concretas, es fundamental establecer un conjunto de normas visuales generales.

• Funcionamiento: Buscar en la lista de plantillas “Estilos de equipaciones internacionales” 。
  
• Haz clic para importar: Haz clic a continuación “Importar plantilla” 。
  
• Función: Este paso sincronizará las variables de color globales, las escalas de fuente y los estilos de botones definidos en el kit. Si omites este paso, las páginas que se importen posteriormente no mostrarán los efectos visuales predefinidos.
  

6. Importa las plantillas de página según sea necesario

Una vez completada la configuración general del estilo, puedes importar plantillas de página específicas una por una según las necesidades de tu sitio web.

• Selecciona una plantilla: Busca la página que necesites (por ejemplo, Inicio, Quiénes somos o Servicios) en la lista de plantillas.
  
• Ejecutar importación: Haz clic debajo de la tarjeta correspondiente “Importar plantilla” 。
  
• Ubicación de almacenamiento: Una vez importada, la plantilla se guardará automáticamente en la biblioteca “Mis plantillas” de Elementor.
  

Especificaciones técnicas: Recomendamos importar solo las páginas necesarias para la fase actual, a fin de mantener la base de datos organizada. La operación de importación no crea páginas de WordPress directamente, sino que las almacena como “borradores”, a los que habrá que recurrir al crear nuevas páginas en una etapa posterior.

7. Crea una página formal y aplica la plantilla

Una vez que hayas importado los recursos, deberás aplicarlos a los enlaces web correspondientes.

1. Crear una nueva página: Haz clic en el menú del panel de administración “Página -> Nueva página” 。
   

2. Configuración estándar: Escribe un título para la página (por ejemplo, Inicio) y, en la configuración de la derecha, cambia la “Plantilla” a “Elementor a ancho completo” 。
   

3. Abrir el editor: Después de hacer clic en «Publicar», haz clic en el botón de la parte superior “Editar con Elementor” 。
   
4. Insertar plantilla ：
   

• Haz clic en el ícono de la carpeta gris (Añadir plantilla) en el área de edición.
  
• Cambiar a “Mis plantillas” Pestaña.
  
• Busca la plantilla de página que importaste anteriormente y, a continuación, haz clic en “Insertar” 。
  

5. Operaciones masivas: Una vez que hayas terminado de insertar el contenido, haz clic en «Publicar» para guardarlo. Sigue los mismos pasos para importar las páginas «acercanos», «servicios», «equipo», «preguntas frecuentes» y «contáctanos».
   

⚠️ Nota: Manejo especial de las páginas de formularios En la página «contactus», busca el área del formulario después de la importación y haz clic editar formulario Inserta nuestro estilo de formulario.

Del mismo modo, haz clic en la carpeta y busca metformina Inserta la plantilla de apertura.

Después de insertarlo, haz clic en «Publicar» y, a continuación, haz clic en Actualizar y cerrar A continuación aparecerá un formulario; haz clic en «Publicar» en esta página.

📂 Paso 5: Configurar las categorías de productos y los menús

1. Establecer una estructura de categorización de artículos (lógica de gestión de productos B2B)

Los sitios web independientes B2B suelen utilizar el sistema de «entradas» de WordPress para gestionar de forma centralizada las noticias y los productos, de modo que puedan recuperarse y maquetarse fácilmente más adelante mediante el widget de entradas de Elementor.

Crear categorías principales

• Ruta: Haz clic en el menú del panel de administración “Artículos -> Categorías” 。
  
• Crear una categoría del blog: Escribe “Blog” (o “Centro de noticias”) en el campo «Nombre» y, a continuación, haz clic en «Añadir».
  
• Crear una categoría «Producto»: Escribe “Producto” (o “Centro de productos”) en el campo «Nombre» y, a continuación, haz clic en «Añadir».
  

Configurar subcategorías de productos (jerarquía principal-secundaria) Para facilitar a los clientes la búsqueda por categoría, es necesario crear subcarpetas dentro de «Producto»:

• Funcionamiento: Ingresa el nombre de la subcategoría (p. ej., piezas de producto1).
  
• Establecer padre: Selecciona “Producto” en el menú desplegable «Categoría principal».
  
• Repite la operación: Y así sucesivamente; crea otras subcategorías.
  

Ventajas técnicas: * Fácil de manejar: Al publicar productos como “entradas”, puedes aprovechar la función nativa de filtrado por categorías de WordPress. * Optimizado para SEO: Una estructura jerárquica clara (por ejemplo, /product/robots/) es más adecuada para el rastreo de los motores de búsqueda. * Acceso flexible: Más adelante, dentro de la página de Elementor, puedes especificar que solo se muestre el contenido de la categoría «Producto», creando así una página de lista de productos que se actualiza automáticamente.

2. Crear el menú de navegación principal

Una vez que se hayan importado y clasificado las páginas, tendrás que configurar la estructura de navegación del sitio web para que los usuarios puedan desplazarse entre las páginas del front-end.

1. Ir a la gestión del menú: Haz clic en el menú del panel de administración “Apariencia -> Menús” 。
   
2. Menú «Nuevo» y «Nombre» ：
   

• Nombre del menú: Escriba en el cuadro de texto Menú principal(o menú principal).
  
• Ubicación de la pantalla: En la sección “Configuración del menú”, marca la casilla “Título”(Algunos temas muestran esto como “Cabecera” o “Cabecera”).
  
• Ejecutar la creación: Haz clic en el botón azul “Crear menú” 。
  

3. Añadir un elemento de navegación ：
   

• Seleccionar página: En el panel “Páginas” de la izquierda, selecciona “Ver todo”.
  
• Marca la casilla: Marca las páginas que hayas creado y abierto anteriormente (como Inicio, Quiénes somos, Servicios, etc.).
  
• Añadir al menú: Haga clic “Añadir al menú” 。
  

Haz clic en «Categorías» y añade la categoría que acabas de crear.

4. Guardar configuración: Arrastra y suelta los elementos del menú en el panel de la derecha para reordenarlos (al arrastrar los submenús hacia la derecha se crea una estructura jerárquica). Cuando hayas terminado, haz clic en “Menú Guardar” 。
   

🏗️ Paso 6: Coordinar el marco visual de todo el sitio

Una vez que hayas terminado de importar las páginas básicas, tendrás que utilizar Elementor’s Creador de temas Arma las plantillas individuales para crear un sistema web completo, asegurándote de que el estilo sea coherente en el encabezado, el pie de página, las páginas de categorías y las páginas de detalles de los productos.

1. Implementar encabezados y pies de página en todo el sitio

• Ruta: Haz clic en el menú del panel de administración “Elementor -> Creador de temas” 。
  

• Plantillas relacionadas ：
  
• Haz clic en el módulo «Encabezado» y selecciona la plantilla de encabezado que importaste anteriormente del kit de Astrobot.
  

• En el editor, comprueba que el menú de navegación (Nav Menu) esté vinculado al “Menú principal” que creaste anteriormente.
  

• Haz clic en “Publicar” y, a continuación, añade lo siguiente en la ventana emergente «Condiciones de visualización» “Todo el sitio”(Todo el sitio web).
  

Repite los pasos anteriores para el módulo «Pie de página» a fin de asegurarte de que el pie de página se aplique en todo el sitio. Puedes hacer clic en el lado izquierdo para editar el contenido del texto, etc., y reemplazar «#» por el enlace real de la página para navegar a la página correspondiente.

2. Crear una plantilla para la página de categorías (Archivo)

La plantilla de la página de categorías determina cómo se muestra la lista cuando un usuario hace clic en “Centro de productos” o “Categorías de noticias”:

• Crear una nueva plantilla: Haz clic en el Creador de temas Archivo Módulo -> Añadir nuevo 。
  

• Estilo de llamada: Inserta la plantilla «Archive» del paquete.
  

• Haz clic en la sección «Entradas», ve a «Configuración», busca «Incluir categoría» y selecciona la categoría «Blog» que acabas de crear.
  

• Establecer condiciones: Haz clic en «Publicar» y configura «Condiciones de visualización» en «Categoría» ➡ «blog». La categoría «Blog» utilizará entonces esta estructura visual.
  

Creación manual de páginas de categorías de productos: Dado que muchas plantillas de sitios web de presentación no incluyen funciones para mostrar productos, crearemos aquí manualmente una página de categorías de productos. Vuelve al Theme Builder, busca «Archivo» y haz clic en «Añadir nuevo».

Inserta el mismo código en la plantilla del blog, sustituyendo elementos como el título por «nuestros productos».

Realiza algunos ajustes en la plantilla original: elimina los controles de la izquierda y arrastra las secciones de directorio y datos de contacto de la derecha hacia la izquierda.

Haz clic en el cuadrado gris del contenedor de la izquierda y, a continuación, establece el ancho de la columna en 30 en la columna de edición de la izquierda; la columna de la derecha se ajustará automáticamente a 70.

A continuación, toca el signo más situado en la esquina superior izquierda para buscar entradas de archivo Arrástralo hacia la derecha.

Haz clic en el control que acabas de arrastrar para cambiar la apariencia a tarjetasElimina todos los metadatos. Desactiva el resumen, la insignia, el avatar, etc.

Publica, selecciona los criterios de visualización tal y como se muestra en la imagen y selecciona «productos» y todos los subdirectorios que se encuentren dentro de ese directorio.

3. Diseño coherente: blog y páginas de detalles de productos (página individual)

La plantilla de la página de detalles se encarga de mostrar el contenido específico del artículo o producto:

Entrada individual (detalles del blog):

• Haga clic Entrada individual Módulo -> Añadir nuevo 。
  

• Inserta la plantilla de entrada individual correspondiente y configura los componentes dinámicos (como el título y el contenido de la entrada).
  

• Elimina el componente situado a la izquierda de la plantilla insertada y sustitúyelo por uno más estable Imagen destacada 和 Contenido de la publicación componente.
  

• Establecer condiciones: Categorías ➡ blog.
  

Publicación individual (Detalles del producto): Siguiendo la misma lógica, pasemos a la página de detalles del producto.

Después de insertar la plantilla de entrada única, borraremos todo el contenido del panel de la izquierda. A continuación, insertaremos la imagen destacada y los componentes del contenido de la entrada. Esto servirá como una página sencilla de detalles del producto.

Publicar y guardar; condiciones de visualización: la categoría «productos».

Valor tecnológico fundamental * Sincronización global: Basta con modificar la plantilla una sola vez para que los estilos de cientos o miles de páginas vinculadas en todo el sitio se actualicen automáticamente. * Bucle de retroalimentación visual: Asegúrate de que los encabezados, los pies de página y la estructura de diseño sean totalmente coherentes desde la página de inicio hasta las páginas de detalles de los productos de nivel más profundo. * Llenado dinámico: El sistema extrae automáticamente el texto y las imágenes de la sección “Artículos” del panel de administración y los inserta en plantillas predefinidas, logrando así una separación total entre la gestión de contenidos y la presentación visual.

En esta etapa, la arquitectura subyacente del sitio web, la categorización del contenido y la identidad visual general ya se han integrado por completo.

📝 Paso 7: Rellenar el contenido de los productos y del blog

1. Publicar entradas de blog

El blog se utiliza principalmente para compartir noticias del sector, información técnica y novedades de la empresa, con el objetivo de generar credibilidad profesional.

• Crear una nueva entrada: Haz clic en el backend “Artículos -> Escribir un artículo” 。
  

• Escriba el texto ：
  

• Título: Títulos optimizados para SEO que incluyan palabras clave del sector.
  
• Texto principal: Redactado con el editor nativo de WordPress o con Elementor; recomendamos incluir subtítulos H2/H3. En este caso, hemos utilizado Gemini para ayudarnos a redactar una entrada de blog; como puedes ver, Gemini ha generado automáticamente el título y el cuerpo del texto. Además, el cuerpo del texto incluye subtítulos H2/H3 con un formato estricto.

Cuando se trata de gestionar artículos largos de SEO y generar imágenes de productos de calidad profesional, Gemini Pro juega en otra liga; sin duda, es la herramienta preferida por los creadores de sitios web. Es posible que muchos principiantes tengan dificultades¿No se puede pasar a estas cuentas Pro AI sin una tarjeta de crédito internacional?Aquí les presento un servicio de recarga que me gustaría compartir con todos ustedes—Cine interestelar Esta es una plataforma sumamente confiable para compartir y suscribirse a cuentas extranjeras, que permite recargar tu cuenta directamente; es muy práctica.

• Pega el título y el texto del blog en el panel de administración,Categoría: Asegúrate de marcar «Blog». La entrada solo aparecerá en la página de la lista del blog si se marca esta opción.
  

• Imagen destacada: Sube una imagen de portada de aproximadamente 1200 × 800 píxeles. Esta será la única fuente de la imagen de vista previa que se mostrará en la página de la lista.
  

• Arrastra y suelta la imagen que acabas de crear para tu entrada de blog. Te recomendamos convertir el archivo al formato WebP, ya que esto ayudará a mejorar la velocidad de carga de tu sitio web. Solo tienes que introducir el título de la entrada de blog en los campos «Texto alternativo» y «Título» que se encuentran a la derecha para facilitar la optimización SEO.
  

• Publicado: Haz clic en “Publicar” en la esquina superior derecha.
  

• Una vez publicada, haz clic en «Ver» para confirmar que la aplicación se ha asignado a una categoría.
  

2. Publicación de contenido sobre productos (publicaciones de productos)

En un contexto B2B, publicamos nuestros productos como “artículos” para aprovechar su excelente indexabilidad SEO y sus capacidades de categorización y filtrado.

• Crear una nueva entrada: Haz clic en el backend “Artículos -> Escribir un artículo” 。
  
• Especificaciones de entrada: Para esta demostración, utilizaremos la IA para redactar los detalles del producto. Al crear tu sitio web, puedes enviar la información básica y las imágenes de tus productos a Gemini; así obtendrás descripciones de productos que parezcan más auténticas.
  

• Título: Nombre completo del producto + número de modelo principal.
  
• Texto principal: Recomendamos introducir los parámetros (especificaciones técnicas) en formato de tabla e insertar imágenes de los detalles del producto.
  
• Configuración clave ：
  
• Índice de categorías: Marque la casilla junto a «Producto» y su subcategoría correspondiente (por ejemplo, «Robots industriales»).
  

• Imagen destacada: Utiliza un fondo blanco o una imagen de fondo real y nítida (a efectos de esta demostración, seguiremos utilizando la imagen generada anteriormente). La relación de aspecto de las imágenes de portada de los productos en todo el sitio web debe ser uniforme (por ejemplo, 1:1 o 4:3) para evitar desajustes en las páginas de listado.
  

• Publicado: Haz clic en “Publicar”. La estructura básica del contenido del sitio web ya está completa.
  

🌐 Paso 8: Imagen de marca en todo el sitio y configuración final para el lanzamiento

1. Identidad del sitio y configuración del sitio

Inicia sesión en el panel de administración de WordPress y buscaConfiguración - General, agrega el título, el subtítulo y el ícono del sitio.

• Título del sitio: Ingresa el nombre de una marca o empresa (por ejemplo, ZLink Studio). Este título aparecerá en la parte superior de la pestaña del navegador.
  
• Eslogan del sitio: Introduzca una breve descripción (por ejemplo, «Soluciones industriales profesionales B2B»).
  
• Icono del sitio (favicon)Instrucciones: Sube una imagen cuadrada de al menos 512 × 512 píxeles.
  
• Presentación visual: Este ícono aparecerá en el lado izquierdo de la pestaña del navegador, en la barra de marcadores y como ícono de acceso directo en la pantalla de inicio de tu celular.
  

Haz clic en «Guardar cambios» en la parte inferior.

2. Configurar una página de inicio estática

Para garantizar que los visitantes sean redirigidos directamente a la página de inicio designada cuando accedan al dominio principal (por ejemplo, gozlink.com), en lugar de a la página predeterminada de la lista de artículos, es necesario realizar la siguiente configuración:

• Ruta: Vuelve al panel de control de WordPress y haz clic en “Configuración -> Lectura” 。
  
• Configuración básica ：
  

• En “Apariencia de tu página de inicio”, selecciona “Una página estática” 。
  
• Inicio: Selecciona la página de inicio que has creado en el menú desplegable.
  

• Guardar: Haz clic en “Guardar cambios” en la parte inferior de la página.
  

3. Lista de ajustes básicos del sitio

Antes del lanzamiento oficial, te recomendamos que revises los siguientes ajustes estándar de WordPress:

• Enlaces permanentes: Ir a “Configuración -> Enlaces permanentes”, asegurándose de que la selección sea “Título de la entrada”. Esto garantiza una estructura de URL clara (por ejemplo, /producto/robots/), lo cual es beneficioso para el SEO.
  

• Configuración del foro: Ir a “Configuración -> Debate”Si se trata de un sitio web B2B puramente de presentación, recomendamosDesmarcar“Permitir que otros comenten las nuevas publicaciones” para evitar la acumulación de comentarios spam.
  

Tu sitio web B2B cuenta ahora con una identidad de marca completa, una estructura jerárquica clara y un sistema dinámico de publicación de contenido. Haz clic en el nombre del sitio en el panel de control de WordPress para ver tu sitio web.

4. Ajustes finales y actualizaciones de contenido antes del lanzamiento

• Sustitución de contenido y verificación de enlaces : Inicia sesión en el panel de administración de WordPress, haz clic en “Páginas” y sigue estos pasos para las páginas principales, como la página de inicio y «Acerca de nosotros»:
  

• Abrir el editor: Haz clic en “Editar con Elementor” debajo del título de la página.
  
• Reemplazar texto/imagen: Solo tienes que hacer clic en el texto o la imagen de marcador de posición de la página y, a continuación, introducir tu propio texto o subir nuevos recursos en el panel de la izquierda.
  
• Enlace al botón «Editar»: Haz clic en el botón (CTA) de la página e introduce la URL de la página interna correspondiente (por ejemplo, /contact/) o el enlace externo en el campo “Enlace” situado a la izquierda.Asegúrate de que se utilice la etiqueta `metform` en todos los formularios de contactoPor ejemplo, en el pie de página, debes usar Metform para crear un nuevo formulario que incluya un campo de correo electrónico y un botón de envío, a fin de reemplazar el existente, asegurándote de que todos los formularios se gestionen a través de Metform.
  

• Guardar: Una vez que hayas terminado de realizar los cambios, asegúrate de hacer clic en el botón azul “Actualizar” situado en la esquina inferior izquierda.
  

5. Configura la función de envío SMTP (fundamental para evitar la pérdida de mensajes)

Para asegurarte de que los formularios de consulta enviados por los clientes se reciban correctamente en tu dirección de correo electrónico, debes configurar el SMTP (en lugar de utilizar la función predeterminada de envío de correo electrónico del servidor):

1. Instala el complemento: Buscar e instalar WP Mail SMTP 。
   

2. Parámetros de configuración ：
   

• Selecciona tu proveedor de correo electrónico (por ejemplo, Gmail, Outlook o el correo electrónico de tu empresa).
  

• Introduce la dirección del servidor SMTP, el puerto y la contraseña de autenticación. En este ejemplo utilizaremos AliMail.
  

3. Correo electrónico de prueba: Envía un correo electrónico de prueba a través de Herramientas > Prueba de correo electrónico para comprobar que llega a la bandeja de entrada del destinatario (incluida la carpeta de correo no deseado), con el fin de asegurarte de que no se pierdan oportunidades de negocio. Un mensaje de «éxito» indica que la configuración SMTP se ha establecido correctamente.

4. Configura los ajustes de notificación del formulario Metform; esto debe hacerse para cada formulario.

• General: Cambiar el título a «Formulario del sitio web»

• Nota: Cambia el asunto del correo electrónico a «Consulta sobre el nuevo sitio web» y asegúrate de que tanto el campo del destinatario como el del remitente estén configurados con la dirección de correo electrónico de tu empresa.

• Una vez que hayas guardado los cambios, ve a la página «Contáctanos» de tu sitio web y envía el formulario para probarlo.

• Revisa tu correo electrónico del trabajo para ver si has recibido los detalles del formulario.

6. Resolución del nombre de dominio y lanzamiento oficial

Una vez que se haya finalizado el contenido del sitio web, realiza una revisión final para asegurarte de que todo funcione correctamente:

• Habilitar la indexación: Ve a “Configuración -> Lectura” y asegúrate de que “Por favor, no indexen este sitio” La opción está configurada enSin marcarpara que Google pueda empezar a rastrear el sitio web.
  

Con esto, tu sitio de comercio electrónico B2B ya está completamente configurado y oficialmente listo para ponerse en marcha.