Editor 6 - Ejemplo: Cómo crear un Portafolio personal

Puedes echarle un vistazo al sitio web del ejemplo siguiendo este enlace: Beekayers Fotografía

Puedes descargar los archivos usados para crear este sitio haciendo click aquí.

Antes de comenzar a construir tu sitio web, es una buena idea tomar esto en consideración:

1. Escribe todo el texto que añadirás en el contenido en un documento de Word
2. Haz una lista de las páginas que necesitarás
3. Reune todas tus imágenes en una misma carpeta en tu ordenador y dale un nombre descriptivo a cada imagen.

Cada uno de estos pasos te ahorrará tiempo después cuando estes haciendo tu sitio web.

1. Selecciona un tema en blanco.
2. Elige las páginas para tu sitio. En este caso solo necesitarás una página para empezar.
3. Crea tu sitio.

La primera vez que entres a tu sitio web, verás el contenido por defecto (1). Borra el contenido para que podamos comenzar a trabajar en el nuevo diseño.

Las páginas web en BaseKit consisten de 1 o más filas.

1. Haz clic en el botón Edición de filas / columnas
2. Haz clic en el icono de Visibilidad de filas
3. Selecciona las filas que quieras en tu sitio. (Si lo deseas en este momento puedes cambiarles el nombre haciendo clic sobre el nombre de la fila).

Para este ejemplo necesitamos:

• Header
• Feature
• Feature 2
• Main
• Footer

En la pestaña de Fondo (1) ajusta el ancho del sitio web a 840px (2).

Para importar imágenes a tu sitio, haz clic en la pestaña MEDIA (1) y luego haz clic en el botón AÑADIR (2).

1. Selecciona la carpeta donde guardaste los archivos para este proyecto
2. Selecciona la imagen para el encabezado.
3. Haz clic en 'Abrir'

1. Pasa el puntero por encima de una fila para ver el icono de configuración de la fila. Haz clic en el icono de configuración
2. Selecciona el estilo 'header' para aplicarlo a esta fila o crea un estilo nuevo.
3. Haz clic en el icono de ajustes de ese estilo

1. En los ajustes del estilo de fila, selecciona 'imagen' como el tipo de fondo
2. Arrastra tu imagen a la caja de imagen
3. Ajusta la imagen para centrarla
4. Guarda tus cambios

Ahora como puedes comprobar, la imagen aparece en tu encabezado.

Sube un patrón a tu editor. Si no tienes ningún patrón puedes encontrar unos muy buenos en ava7patterns o en su lugar puedes usar un color sólido o una imagen.

1. Haz clic en la pestaña de fondo
2. Selecciona 'imagen' en el menú desplegable
3. Haz clic en el patrón y arrastralo a la caja de imagen
4. Marca las 2 casillas para hacer que el patrón se repita en todo el fondo de tu sitio web

Sigue el mismo proceso con el resto de tus filas y añade distintos estilos a cada una. En este ejemplo puedes ver dos estilos de fila creados con imágenes y 3 creados con colores sólidos.

Si deseas saber más acerca de estilos, echale un vistazo a nuestros Tutoriales de Diseño de sitios web, temas y estilos

En el panel de navegación del sitio, haz clic en una página para duplicarla.

En la página 'Servicios' no necesitaremos la fila llamada 'feature', así que haz clic en el icono de Visibilidad de filas y desmarca la casilla de esa fila (1).

Duplica la página Servicios hasta completar la estructura de tu sitio web.

Después de crear todas las páginas para tu sitio web, podemos comenzar a añadir contenido. Ve a la página BeeKayers Fotografía.

En la pestaña de WIDGETS (1) selecciona el widget de Carrusel (2) y arrastralo a la segunda fila de tu sitio web (3).

1. Haz clic en el icono de ajustes del Widget de Carrusel
2. Añade tantas páginas como necesites haciendo clic en el botón 'Añadir' (en este ejemplo usamos 4)
3. Arrastra y suelta las imágenes dentro de tu carrusel
4. Selecciona un intervalo de tiempo para que cambien tus imágenes
5. Desmarca las casillas de Indicadores de página y los botones de Siguiente y Previo

Lo que obtendrás es un banner de imágenes que aparecerá en la parte de arriba de tu sitio web.

El menú de navegación que se muestra en el sitio web fue hecho con imágenes creadas en Photoshop. Esto nos permite usar una tipografía que no se encuentre disponible en la mayoría de los navegadores web.

Tienes una alternativa más sencilla, que es usar el Widget de Menú de Navegación, pero tus opciones de tipografía serán reducidas.

Antes que nada, sube los botones que conformarán tu menú de navegación. Aquí he subido dos imágenes por cada botón. Ejemplo: Servicios y Servicios-ro (para crear el efecto rollover).

Queremos que el menú de navegación sea igual en cada página, así que vamos a usar un Widget de Plantilla. Esto significará que cuando edites un widget de plantilla, este se modificará en cualquier página donde lo hayas agregado.

1. Crea un Widget de Plantilla llamado 'Menú de navegación'.
2. Arrastra el Widget de Plantilla a la fila que contiene el estilo de tu barra de navegación.

1. Arrastra un Widget de Columnas dentro del Widget de Plantilla.
2. Divide el Widget de Columnas en 5 columnas.
3. Añade una imagen a cada una de las columnas.
4. Añade un Widget de Barra de búsqueda en la última columna.

1. Selecciona la primera imagen.
2. Haz clic en el icono de ajustes.
3. Selecciona la imagen para el rollover.
4. Arrastra la imagen a la primera caja para crear un rollover.
5. Añade un link a esta imagen.

Selecciona un Link Interno (1). Estabamos editando la imagen BeeKayers, así que selecciona esa página del menú desplegable (2). Guarda el link (3).

Sigue los mismos pasos para todas las imágenes en tu menú de navegación.

Ahora selecciona el Widget de Plantilla y bloquealo seleccionando el icono de bloqueo (1). Esto evitará que modifiques el widget accidentalmente.

Ahora puedes arrastrar este widget a todas las páginas de tu sitio.

Podemos comenar a añadir algo de contenido a nuestro sitio.

1. Haz clic en el icono de Guías Visuales (1) y acomodalas en tu sitio.
2. Añade unas cuantas cajas de texto e imagen. Puedes reemplazar su contenido por defecto con tu contenido personal.

Copia y pega el texto desde tu documento de Word a las diferentes cajas de texto en tu sitio web. Descubre más sobre como Crear o editar un estilo de tipografia.

La página de tu portafolio.

Hay muchas imágenes en esta página. Para que tu página se cargue más de prisa escala las imágenes a la medida correcta antes de importarlas a tu editor.

He usado un Widget de Columnas para crear la estructura de esta página.

Para añadir imágenes a tu estructura:

1. Arrastra la miniatura en blanco y negro al widget de columnas.
2. Haz clic en el icono de ajustes de esta imagen.
3. Tenemos otras dos imágenes, una para crear un rollover y el otro para crear una caja de luz.
4. Arrastra la miniatura a color a la primer caja.
5. Arrastra la imagen de mayor tamaño a la segunda caja.

Puedes probar tus imágenes usando el modo de Vista Previa. Cuando pases el puntero sobre una imagen deberás de ver como cambia de color.

Cuando hagas clic en una imagen, la imagen aparecerá más grande en una caja de luz.

Es una buena idea incluir tu dirección y un formulario de contacto en tu sitio web.

Con BaseKit puedes añadir un Widget de Google Maps o añadir la imagen de un mapa mostrando tu ubicación.

Ve Cómo crear un formulario

Puedes configurar los formularios para que cuando alguien responda uno, la respuesta te llegue a tu correo electrónico. Así sabrás inmediatamente cuando alguien pregunte por tus servicios.

Toda la información queda guardada en una base de datos. Si deseas acceder a ella:

1. Haz clic en el botón CONFIGURAR
2. Haz clic en Base de datos
3. Selecciona la base de datos en el menú desplegable.

Si quieres descargar los datos a tu ordenador en una hoja de cálculo, haz clic en Exportar datos (4).

Lo primero que tendrás que hacer es Añadir tu sitio web a Google.

Optimizar tu sitio le hará más sencilla a Google la tarea de elegir cuando mostrar tu sitio web en los resultados de búsqueda. Lo más importante que hay que saber a cerca de la optimización de tu sitio en los motores de búsqueda es que tu sitio debe de ser relevante y tener contenido original con enlaces de otros sitios apuntando hacia él. Todos quieren que su sitio esté enlistado en lo más alto de los resultados de Google, pero esto solo se puede alcanzar a través de un buen contenido, optimización y enlaces.

Haz clic en el botón CONFIGURAR (1) y después escribe un titulo y una descripción de tu sitio (2). El título debe incluir el nombre de tu organización y lo que haces. La descripción del sitio deberá de ser uno o dos enunciados que desees que aparezcan cuando se enliste tu sitio en los resultados de Google.

Haz clic en Guardar configuración (3) y habrás terminado.

Ve a CONFIGURAR (1) y haz clic en el botón Configurar SEO (2).

Los ajustes de SEO deberán hacerle más sencilla a Google la tarea de indexar tu sitio web. No olvides hacer clic en Guardar configuración (3) cuando termines.

Para configurar el SEO para páginas individuales de tu sitio, ve al modo de DISEÑO y haz clic en el botón de configuración de la página. Haz clic en SEO (1).

Configura las palabras clave para esta página (1). Usa palabras cortas para describir lo que hay en esta página que la hace diferente a las otras páginas. Usa algunas palabras - No existe un número definido de palabras que debas agregar, pero existe cierta ventaja si añades más palabras de las que necesita o repites una palabra.

El campo de descripción debe de describir lo que hay en esta página en uno o dos enunciados (2).

Haz clic en Guardar opciones (3).

Si ya posees un nombre de dominio con nosotros, ahora es cuando debes enlazar ese dominio con tu sitio web en BaseKit.

1. Haz clic en CONFIGURAR
2. Haz clic en Dominios para entrar en los ajustes de tu dominio
3. Haz clic en Añadir un dominio compradoa través de nosotros...
4. Haz clic en Asignar al sitio actual para completar el enlace.

Haz clic en el botón PUBLICAR (1) y habrás terminado. Ahora puedes accesar a tu sitio usando tu nombre de dominio.

Cuando hayas publicado tu sitio web con un dominio externo, los links en el menú de navegación tendrán que ser modificados. En lugar de apuntar a una página interna de BaseKit, necesitarán apuntar a un link externo.

1. Haz clic en la primer imagen de tu menú de navegación y haz clic en el icono de configuración
2. Haz clic en el botón Añadir para añadir un enlace
3. Escribe el link externo a tu página (ejemplo: www.beekayers.com, www.beekayers.com/servicios, www.beekayers.com/portafolio y www.beekayers.com/contacto )
4. Guarda el link
5. Publica tu sitio nuevamente.