Intro

Cuando montas un negocio o una startup, necesitas tener presencia online desde el primer momento: algo profesional, fácil de mantener y directo.

Para eso hemos creado la plantilla Business One Page, que además incluye soporte multiidioma.

En este post te la presentamos, y también puedes ver este vídeo sobre como funciona

Estructura de la plantilla

La plantilla está pensada para presentar tu negocio de forma clara y mantenerlo sin complicaciones.

Empieza con una sección Hero, donde colocamos el mensaje principal: un título directo, un subtítulo que explica tu propuesta de valor, imágenes y un call to action visible para guiar al usuario.

Después nos encontramos con la sección de servicios, pensada para explicar de forma sencilla qué ofrecemos, a quién va dirigido y en qué nos diferenciamos. Es una sección directa y fácil de leer.

La siguiente parte es la sección de contacto, con un formulario integrado para que puedan escribirnos sin salir de la web.

Además, la plantilla incluye un header y un footer:

• En el header mostramos el nombre de la empresa y la navegación básica.

• En el footer aparecen el nombre de la empresa, los enlaces a redes sociales y la política de privacidad, que es una página totalmente personalizable.

Todo el diseño es responsive, se adapta a móviles / tablets, y permite personalizar colores y fuentes para ajustarse a tu imagen corporativa.

Con esta estructura tienes lo esencial, sin ruido ni complejidad innecesaria.

Creando el proyecto desde cero

Para crear el proyecto partimos de Content Island.

Si no tienes cuenta, puedes crear una gratuita en contentisland.net.

Una vez dentro, pinchamos en añadir proyecto.

y se nos abrirá un wizard que nos irá guiando.

Lo primero darle un nombre y elegir crearlo desde una plantilla (en nuestro caso el nombre será mi-landing).

Seleccionamos Business One Page y confirmamos.

En este momento Content Island crea el proyecto con la estructura y contenido de ejemplo listos para personalizar.

Además, la plantilla nos proporciona directamente el comando para crear la solución en Astro y ejecutarla en local.

Copiamos el comando y nos vamos a Visual Studio Code.

Creando la solución en VScode

En nuestro caso tenemos VS Code abierto en la carpeta donde queremos crear el proyecto.

Abrimos el terminal, ejecutamos el comando, y el CLI de Content Island nos hace una serie de preguntas:

Indicamos que el proyecto se cree en la carpeta actual usando ".", si queremos crearnos una subcarpeta, solo tenemos que indicar el nombre de dicha carpeta.

También nos pide si queremos instalar las dependencias del proyecto (si no lo hacemos ahora podemos hacerlo manualmente nosotros).

Con eso solo queda lanzar: npm run dev

Al abrir el navegador en http://localhost:4321 ya podemos ver la web funcionando.

A partir de aquí empieza la parte interesante: personalizar el contenido.

Cambiar idioma al Español

Lo primero, si te fijas la web sale en inglés, vamos a ponerle en español, para ello volvemos a Content Island, seleccionamos el tab general y borramos el lenguaje inglés. Y cambiamos el idioma

Y guardamos

Nos vamos a VSCode y reiniciamos el proyecto con npm run dev de nuevo, con esto se generan las páginas en Español, si nos vamos al navegador podemos ver que ya está actualizada la web.

¡¡Vamos a por el contenido!!.

Favicon y metadatos

Volvemos a Content Island, seleccionamos el tab de Content y elegimos la entrada General, por comodidad vamos a elegir la vista de árbol, borramos el favicon que hay de prueba.

Podemos seleccionar nuestro fichero desde el explorador de ficheros u arrastrar o soltar.

Y cambiamos el favicon de la web, por nuestro logo (recomendado en formato SVG).

Le damos a publicar nuestro cambio.

Volvemos a nuestro sitio y refrescamos nuestra web y veremos el nuevo favicon.

Y para cambiar el título de la página, nos vamos a PageMeta, elegimos Home, y cambiamos:

Title

Basefactor - Consultoría IT y gestión de contenido

La descripción para SEO también la vamos a cambiar

Description

Somos Basefactor, consultora IT especializada en desarrollo de software y gestión de contenido. Descubre nuestras soluciones y servicios personalizados para llevar tus proyectos al siguiente nivel.

Le damos a publicar.

Refrescamos y podemos ver como se ha cambiado el título de la página.

Cambiamos el Header

En vez de que aparezca Nexus podemos poner el nombre de nuestra empresa.

Volvemos a Content Island, seguimos en la vista Content y seleccionamos la entrada Header. Dentro de Brand Navigation.

Y cambiamos el nombre por el de nuestra empresa, en este caso Basefactor, le damos a publicar los cambios.

Y cuando refrescamos, ahí tenemos el cambio en la cabecera

Pasamos a la Hero Section.

Aquí modificamos el título principal y el subtítulo para reflejar claramente a qué nos dedicamos.

Title

Somos Basefactor, consultora IT especializada en desarrollo de software y gestión de contenido.

Subtitle

Somos los creadores de Content Island, un headless CMS centrado en la simplicidad, la velocidad y la experiencia de desarrolladores y editores.

Las imágenes también se pueden cambiar, aunque en este caso las dejamos como están.

Volvemos a nuestro sitio, refrescamos y ya tenemos nuestro hero section.

Services Section

Aquí cambiaremos la descripción de servicios y borraremos todos los servicios que hay para introducir los nuestros.

Nos vamos a ServicesSection y aquí podremos ver la lista de servicios

Borramos los servicios, nosotros marcaremos que queremos borrar también el contenido. Y hacemos lo mismo para el resto:

Si te fijas services sale ahora con un símbolo de exclamación, ¿por qué? porque al menos debe de haber un servicio creado.

Vamos a ponernos a editar la ficha de un service section

El campo description lo cambiamos por lo siguiente:

Description

¿Quieres llevar la gestión de contenidos de tu proyecto al siguiente nivel? En Basefactor ofrecemos servicios personalizados de consultoría técnica:

Y nos ponemos a crear servicios

Name

Intragraciones con CMS headless

Title

Intragraciones con CMS headless

Description

Conectamos tu contenido con las mejores soluciones headless del mercado para una gestión eficiente y escalable.

alt

Intregración headless CMS

En features podemos destacar una lista con guiones de lo que resume el servicio que ofrecemos, en este caso lo dejamos en blanco. Y en reverse layout, ya veremos que podemos elegir entre mostrar la imagen a la izquierda o derecha. Eso lo veremos luego cuando tengamos todos los servicios.

Añadimos tres servicio más:

Name

Arquitectura y escalabilidad de proyectos JAMstack

Title

Arquitectura y escalabilidad de proyectos JAMstack

Description

Diseñamos arquitecturas robustas y escalables siguiendo las mejores prácticas de JAMstack para máximo rendimiento.

alt

Jam Stack Arquitectura

Name

Automatización de flujos de contenido

Title

Automatización de flujos de contenido

Descrition

Optimizamos y automatizamos tus procesos de contenido para mejorar la productividad del equipo y reducir tareas manuales.

Name

Desarrollo de frontends conectados a Content Island

Title

Desarrollo de frontends conectados a Content Island

Description

Creamos interfaces modernas y responsivas perfectamente integradas con tu arquitectura de contenido.

Ya está listo, esta vez tenemos varios cambios pendiente de publicar, tanto cada uno de los nuevos servicios como la services section que contiene la lista, ir publicando uno a uno los cambios sería algo tedioso y fácil de olvidar alguno, por lo que vamos a usar la funcionalidad de Bulk publish. Pulsamos sobre el botón

Y aquí podemos ver todos los cambios pendientes y publicamos.

Volvemos la navegador y podemos ver que la sección de servicios se ha actualizado.

Sólo hay un pequeño detalle, la lista se ve muy aburrida, vamos a jugar con la posición de la imagenes, para ello volvemos a Content Island, y alternamos la posición de las imágenes, en los pares a la derecha.

Cambiamos la propiedad reverse layout a true de los servicios 2 y 4 y el resto estará a false

Publicamos de nuevo por lotes y vemos el resultado.

Y ahora, volvemos a la web y hacemos un refresh

Y vemos que las imágenes están alternadas.

Sección de Contacto

Aquí vamos a cambiar el mensaje principal, nos vamos a Contact Section y cambiamos el título por:

Title

Contáctanos

Description

¿Tienes un proyecto en mente o necesitas soporte especializado?

Escríbenos a través del formulario de contacto y nos pondremos en contacto contigo lo antes posible.

Y le damos a publicar

Volvamos al navegador y hacemos un refresh

Sobre este Contact Form, la funcionalidad de envío la hemos dejado en blanco, para que elijas el servicio que mejor te venga, si no tienes claro cual usar, aquí tienes un post que te explica como funciona Resend y como integrarlo en tu proyecto Astro.

Formularios de contacto en astro con server actions y resend

Y el punto de entrada en el proyecto sería (en visual studio code) src/pods/home/components/Contact.astro. Y aquí tienes el handleSubmit que es la función que se ejecuta cuando pulsamos el botón de Enviar mensaje, y donde tendrías que meter tu código para integrarlo con resent o cualquier otro servicio.

Footer

En el footer configuramos el nombre de la empresa, los enlaces a redes sociales y el copyright.

Name

BASEFACTOR

Redes sociales: LinkedIn, X, GitHub (pondremos las de Content Island).

Linkedin

https://www.linkedin.com/company/content-island-hcms

X

https://x.com/content_island

Github

https://github.com/content-island

Podriamos también, borrar y añadir entradas (por ejemplo instagram) ponemos el svg, añadimos la url y adelante.

En copyright, ponemos BASEFACTOR.

Vamos a publicar por lotes, ya que hemos modificado más de una entrada.

Refrescamos y vemos que nos aparece el nombre de la empresa

y podriamos navegar a los diferentes enlaces de las redes sociales y vemos también el copyright.

Privacy Policy

La política de privacidad es una página editable; en este caso solo cambiamos el nombre de la empresa, aunque lo ideal es usar el texto legal real de tu negocio.

Nosotros cambiaremos el nombre de Content Island por Basefactor, pero podemos incluir imágenes, headings, negritas etc. Una vez tengamos los cambios, publicamos

En el navegador hacemos un refresh, y vemos el cambio

Theming

Aquí igual quieres adaptar el sitio a tu imagen corporativa, colores, fuentes...

Nos vamos a la sección Theming y podemos cambiar el color primario y tipografías.

Aquí actualizamos el color primario (#9d2593)

Y comprobamos cómo funciona tanto en modo claro.

Como en modo oscuro.

En la documentación hay combinaciones de colores ya probadas que funcionan especialmente bien. documentación a la business landing

Multiidioma

Como toque final, si tienes el plan Pro o superior, puedes activar soporte a múltiples idiomas.

Por ejemplo, añadimos Inglés, Catalán, Gallego y Euskera desde la sección General.

Vamos al visual studio code, reiniciamos la ejecución y en el navegador en la sección del footer, veremos los nuevos idiomas añadidos.

Para traducir el contenido usamos Smart Copy, que copia y traduce las entradas desde el idioma original, dejando una primera versión lista para revisar.

Nos vamos por ejemplo a Hero Section y pulsamos en el tab de Inglés y pulsamos sobre Smart Copy

elegimos como idioma de destino el Español, traducimos contenido...

Hacemos el mismo proceso para el resto de idiomas y guardamos los cambios.

Y aquí tenemos una primera versión lista para revisar. Vamos al navegador para mirar los cambios.

Ahora solo nos hace falta ir navegando por el resto de secciones e ir utlizando smart copy para copiar tanto las fichas generales, como cada elemento de la lista e ir traduciendolo a los diferentes idiomas.

Despliegue

Y si quieres ver como desplegar este proyecto en Vercel y además conectarlo con un web hook que permita que el sitio se actualice automáticamente al publicar cambios en Content Island, en nuestro canal de youtube puedes encontrar un vídeo que lo explica paso a paso