Cómo Crear Tu Primer Sitio Web

Transcripción

1 Realizado por LuisHuergo.com para: Cómo Crear Tu Primer Sitio Web Guía Básica Paso a Paso Con esta guía podrás crear tu primer sitio y comenzar a tomarle confianza a la herramienta de Webpresario y Ganancias Locales basada Worpress. Existen algunas otras maneras de configurar un Sitio, pero siguiendo esta guía, podrás hacerlo por primera vez y comenzar a aprender el manejo de la plataforma. ATENCIÓN: Recuerda NUNCA actualizar la versión de Wordpress hasta que Webpresario lo indique, de lo contrario podrías dañar el sistema. También te sugiero como regla general, NO BORRAR NADA hasta que estés completamente seguro de lo que estás haciendo. Comencemos! Primer Paso: Ingresamos al sistema y nos prepararnos para Crear el Sitio. Ingresa en tu sistema creador de sitios: con el usuario y contraseña que te fue enviada por mail con el siguiente asunto: IMPORTANTE: Entrega de Tu Sistema Para Crear Sitios Web y Alojamiento (Ganancias Locales) Al ingresar deberás moverte al panel Administrador de la Red haciendo Clic en Hola y luego en Administrador de la Red Como se indica en la imagen siguiente:

2 Luego verás el panel que se muestra abajo y deberás hacer Clic en Sitios y luego en Todos los Sitios Ahora deberás escoger el tema que quieres usar para tu Cliente, para elegir un tema debes hacerlo entre, Profesional, Tarjeta, Spa, Academia o Dentista. Puedes tener una vista previa de cada uno de ellos haciendo Clic en Visitar cuando pasas el mouse sobre el área del tema como se muestra abajo. Una vez escogido el tema que usarás debes hacer clic en Replicate. Para este ejemplo elegimos Academia.

3 Luego verás la siguiente pantalla: Completa el campo New Site Address con el nombre que se verá al comienzo de la URL del Sitio. Completa el campo New Site Title con el Título del Sitio. Por ejemplo, el nombre de la empresa. Por último completa el campo New Site Admin con TU dirección de como administrador del Sitio. Ahora da Clic en Replicate Now.

4 Segundo Paso: Ya has creado tu primer Sitio y estás listo para personalizarlo para tu cliente. Luego de haber dado clic en Replicate Now debes hacer clic nuevamente en Todos los Sitios Ahora verás el listado de los Sitios y al final tu nuevo Sitio Replicado. Recuerda que elegimos Academia y el titulo fue Prueba de Academia. Da clic en Escritorio dentro de tu sitio como indica la flecha.

5 Bien! Estás dentro del escritorio de tu nuevo Sitio y comenzaremos a personalizarlo. Te recomiendo abrir el Sitio haciendo clic, con la tecla derecha de tu mouse sobre el titulo del Sitio, donde se muestra en la imagen, y abre el Sitio en una pestaña nueva. Esto te permitirá ir monitoreando los cambios. Tercer Paso: Como metodología de trabajo comenzaremos a personalizar de Arriba hacia abajo y de Izquierda a derecha. Personalizando los botones Sociales.

6 Para personalizar los Botones Sociales, debes hacer Clic en Theme Settings Siempre, dentro del escritorio de tu nuevo Sitio. Luego verás la siguiente pantalla, debes hacer clic en Opciones Sociales

7 Luego, completa los campos de las redes sociales en las que tu cliente esté registrado, con la URL corriespondiente. Verás una larga lista de posibilidades. Por defecto y como ejemplo, el tema tiene rellenos los campos de Twitter, Facebook y Google+, te sugiero que por lo menos completes esos tres, son las principales redes sociales utilizadas. Luego da clic en el botón superior a la derecha que dice Opciones para guardar. Quizás te preguntes cómo optengo las URLs detu cliente.

8 En Twitter debes ingresar con su usuario y contraseña y luego ir a perfil ahora copia la URL del navegador y pégala en el campo de URL de Twitter. Ahora repite el prceso en Facebook y Google+. Recuerda dar clic en Opciones para guardar al terminar. Puedes refrescar el Sitio que tienes abierto y ver si los botones dirigen bien. Personalicemos la imagen central: Este ejemplo te servirá para almacenar y utilizar luego cualquier imagen dentro de tu nuevo Sitio.

9 En el caso de las imágenes para esta sección del Sitio, debes tener en cuenta que deben tener una medida especifica en pixeles de 980 x 400 Para subir una imagen debes hacer clic en multimedia y luego en Añadir nuevo Verás la siguiente pantalla: Da clic en añadir archivos. Se abrirá la ventana de tu PC para escojas la imagen que quieres subir. Da clic en la imagen y luego en abrir. En la siguiente imagen verás luego la foto que has subido y los detalles. Coloca siempre un texto alternativo que describa la imagen (Te ayudará en la estructura y posicionamiento del Sitio) y da clic en Guardar todos los cambios. Puedes subir una foto para sea estática o varias para que se muestren a través del Slide.

10 Luego de guardar los cambios volverás a la pantalla de Multimedia y verás la lista de tus imágenes y en primer lugar la última que subiste. Ahora haz clic en editar pasando el mouse sobre la zona de la foto que quieres colocar en el inicio de tu Sitio. Verás nuevamente el detalle de la foto, copia la URL del archivo que se ve debajo. Luego da clic en Diapositivas y luego en Añadir nueva.

11 Ahora verás la pantalla siguiente: Primero coloca el nombre de la secuencia de fotos en el Slide, te sugiero Sile 4 ya que tienes 3 imágenes pre cargadas con esa secuencia. Segundo pega la Url que copiaste antes del archivo a utilizar. Por último Deja la opción en Show y luego da clic en establecer la imagen destacada. Verás el siguiente cuadro de dialogo, da clic en Librería multimedia

12 Ahora verás la lista de tus imágenes, debes hacer clic en Mostrar en la que estás colocando. Verás los datos de la foto y das clic en Usar como imagen destacada y luego en cerrar (X)

13 Finalmente verás todos los datos de tu foto y da clic en publicar Ahora verás la lista de tus imágenes seleccionadas para el Slide.

14 En este punto si refrescas el sitio, verás la o las imágenes que has agregado entre las pre seleccionadas. Para quitar las pre seleccionadas, puedes borrarlas o editarlas y ponerlas en borrador. Luego elige Borrador en cuadro que se ve abajo y dale clic a actualizar

15 No se mostrarán todas las imágenes que estén en Borrador Personalicemos el texto debajo de la imagen: Este sector es ideal para colocar un lema descripción corta de de empresa.

16 Para acceder al área donde puedes personalizar este texto debes hacer clic nuevamente en Theme Settings y luego en Opciones Principal del Inicio En el cuadro que se resalta debes colocar el texto que quieres que se vea en ese sector. No olvides dar clic en el botón Opciones para guardar y luego refresca el Sitio para ver como queda. Personalizando la sección de HP Destacados:

17 Esta sección merece una pequeña explicación para que entiendas cómo funciona. Cada uno de los 3 sectores (Página de ejemplo, Sobre nosotros y Servicios) se pueden configurar para que muestren un pequeño texto descriptivo, como se ve, pero al hacer clic en el título, ser direccionados a otro sector del sitio (Otra página) donde por ejemplo, se amplié la información. Personalicemos uno de ellos para que veas cómo se hace. En primer lugar da clic en HP Destacados y verás la lista de lo que ya se han incluido. En principio, te sugiero editar estos ya que los tenemos a la mano. Entonces da clic en Editar, como ya sabes pasando el mouse por la zona del elemento.

18 Cuando ingresas a la edición, verás el contenido que el elemento tiene ahora: (1) El Título. (2) Una imagen. (3) Texto. (4) La URL donde es dirigido el visitante cuando da clic en el título. Tú puedes reemplazar cada uno de estos contenidos, agregar otra foto o quitarla. Para agregar allí una imagen debes hacer clic en icono de Añadir una imagen y verás nuevamente el cuadro de dialogo para subir una de tu PC o tomarla de la Librería Multimedia como vimos en la página 12. Luego dar clic en Actualizar. Te sugiero dejar en blanco el campo (4) hasta que tengas definida la página hacia donde se re direccionará, una vez creada esa página, vuelves a la edición de este elemento y la agregas. Finalmente refresca nuevamente el Sitio y ve cómo ha quedado por si debes hacer cambios. Repite la operación para Editar Sobre Nosotros y Servicios. Personalizando el Portafolios: La opción de Portafolio puede serte muy útil pero también puedes no utilizarla si lo deseas. Te sugiero que la explores un poco para ver de que se trata. Para no usar el portafolio debes ingresar nuevamente en Theme Settings y luego en Opciones Principal del Inicio. Allí busca en la lista la Opción Activar/Desactivar último portafolio y elige Disable. Si deseas utilizarlo deja la opción en Enable. Puedes refrescar nuevamente el Sitio y ver como se ve de una u otra manera. Para Utilizar la opción de portafolio, haz clic en Portafolio como se muestra abajo y tendrás acceso a la lista de páginas que viene incluida. Aquí puedes Agregar nuevas o editar las existentes, como lo vimos en HP Destacados y a través de toda la guía.

19 Ten en cuenta que al Editar o crear una nueva página del portafolio, luego cambiar o agregar el título y el texto, que debes Destacar una Imagen, para ello haz clic en Establecer la Imagen Destacada dentro de Imagen Destacada Volverás a ver el cuadro de dialogo para subir una imagen de tu PC o tomarla de la Librería Multimedia, como hemos visto en la página 12 de esta guía. Elije la imagen y refresca el sitio para ver si debes hacer cambios. Personalizando el Pie de Página: Puedes optar por activar o desactivar la sección del Pie de Página (Footer) que se muestra en la siguiente imagen:

20 Para activar/desactivar esta sección debes hacer clic en Theme Settings y luego en Opciones del pie de pag y optar por Enable y Desable como se muestra abajo: Personalizando el FONDO de tu Sitio: Para cambiar la apariencia del Sitio, puedes cambiar el color o imagen de fondo. Puedes hacerlo desde Themme Settings y luego en Opciones de Estilo. Allí encontrarás la opción Background image selecciona entre una larga lista de posibilidades toma la que mejor concuerde con la imagen o gusto de tu cliente.

21 Recuerda dar clic en Opciones para Guardar y refresca el Sitio para ver el nuevo Fondo. Ya tienes personalizada la página de Inicio y debemos pasar al interior del Sitio. Personalizamos las páginas internas: Para personalizar las páginas debes hacer clic Paginas y verás la lista de las páginas ya creadas. Ya conoces el mecanismo para editar o crear una página nueva. Te sugiero al principio, no borrar ninguna de ellas, edítalas y colócalas en BORRADOR, si no quieres que se vean o modifica su contenido luego de que estés seguro de que estás editando la página correcta. El proceso para subir imágenes lo tienes en la página 9. Recuerda que también puedes hacerlo desde el Icono de Añadir imagen lo encontrarás siempre en la barra de herramientas en cualquier edición o creación de pagina, post, portafolio, etc. Explora el resto de los iconos pasando el mouse sobre ellos. Personalizando Menús: Para crear un menú personalizado debes hacer clic en Apariencia y luego en Menús luego haz clic en + para crear un nuevo Menú.

22 Ahora verás la siguiente pantalla: Completa el campo marcado con un nombre para tu menú y luego da clic en Crear menú. Ahora verás la siguiente pantalla:

23 Para añadir elementos al nuevo menú, sigue las instrucciones que se resaltan y luego da clic en Añadir al menú. Personalizando Widgets:

24 Para acceder al área de Widgets haz clic en Apariencia y luego en Widgets. Verás la siguiente pantalla: A la derecha verás la columna de Widgets que tienes disponibles en el Tema y a la izquierda todas las opciones de elementos que puedes incluir en ellos. Para incluir un elemento a un Widget arrástralo con el mouse y suéltalo dentro del Widget. Luego refresca el sitio y verás los cambios. Felicidades! Ya tienes los conocimientos básicos para crear nuevos sitios y ofrecerlos a tus clientes.