Índice · 2018. 8. 21. · 3.4-) dar clic en ¿necesitas una cuenta?, (no confundir con la cuenta...

1

Índice

1- ) Introducción. ….………………………………………………………………………………………………

2- ) Objetivos. ….………………………………………………………………………………………………………

3- ) Sincronizar sitio con cuenta de Wordpress.

3.1-) Administrador de Mipymes, se le asigna la dirección web del sitio al nuevo usuario. …....

3.2-) Ingresar a tu cuenta y administrar tu sitio. ……………….…………………………………………………….

3.3-) Conectar Jetpack. ……………………………………………….…………………………………………….…………….

3.4-) ¿Necesitas una cuenta? ……………………………………….…………………………………………….…………..

3.5-) Ingresar un nombre de usuario, una contraseña y registrar. …………………………….………….…

3.6-) Confirmación de tu registro. ………………………………………………………………………….…………….…

3.7-) Confirmar Correo electrónico. ………………………………………………………………………………………..

3.8-) Cuenta activada. ……………………………………………………….…………………………………………………….

3.9-) Cuenta Wordpress sincronizada con tu sitio. ……………..……………………………….………………….

4- ) Configurar la Apariencia de nuestro sitio.

4.1-) Modificar la cabecera de nuestro sitio (Título del sitio, lema y logo). ……………………………..

4.2-) Modificar colores del fondo, letras de la cabecera e insertar logos (Header). ………………..

4.3-) Modificar colores del fondo (Background) del cuerpo de la página. ………………………………

4.4-) Modificar colores del fondo y letras del (Footer) pie de Página. …………………………………….

4.5-) Modificar colores del fondo y letras del (Typography) cuerpo de la página. …………………..

4.6-) Modificar colores del fondo y letras de (Buttons) Botones. ……………………………………………

4.7-) Modificar ubicación de columnas (Layout) disposición. …………………………………………………

5- ) Creación de Páginas y Menús.

5.1-) Creación de Páginas para nuestro. …………………………………………………………………………………

5.2-) Ingresamos en la sección de Páginas. …………………………………………………………………………….

5.3-) Añadir nueva Página. ……………………………………………………………………………………………………..

5.4-) Insertar el título de la Página, su contenido. …………………………………………………………………..

5.5-) Creamos e insertamos el menú de navegación para nuestro sitio. ………………………………...

5.6-) Indicar que la pagina Nosotros sea la página principal (Inicio) al abrir nuestro sitio. ………

5

5

6

7

7

8

8

8

9

10

11

13

15

16

17

17

18

18

18

19

20

23

3

4

2

6- ) Creación de Galerías de Fotos.

6.1-) Agregar galería de imágenes (Opción 1). ……………………………………………………………………….

6.2-) Agregar galería de imágenes (Opción 2). ……………………………………………………………………….

7- ) Inserción de Widgets. ……………………………………………………………………………

8- ) Creación de formulario Contacto.

8.1-) Agregar formulario Contacto. ………………………………………………………………………………………..

8.2-) Creamos una página para nuestra sección Contacto. …………………………………………………….

8.3-) Agregamos el título de nuestra página. ………………………………………………………………………….

8.4-) Indicamos el correo donde deseamos que nos llegues las consultas. …………………………….

9- ) Creación de catálogos para productos.

9.1-) Asistente de configuración Woocommerce. ………………………………………………………………….

9.2-) Creamos nuestro Primer producto. ……………………………………………………………………………….

9.3-) Agregamos la página tienda a nuestro sito. …………………………………………………………………..

9.4-) Carrito de Compras. ………………………………………………………………………………………………….....

9.5-) Agregar la página Mi cuenta a nuestro sitio. …………………………………………………………………

10- ) Insertar nuestras Redes Sociales.

10.1-) Agregar nuestras redes sociales con widgets en el sidebar. ……..…………..……………………… 10.2-) Agregar nuestras redes sociales en nuestra página. ………………………………………………………

25

28

31

33

34

35

36

38

41

46

47

54

56

57

3

1- ) Introducción.

Viendo la importancia de las nuevas tecnologías en el mundo

globalizado, muchas empresas han detectado la evidente

problemática que presentan al no poseer una página web y la

utilidad que esta brindaría a sus clientes.

El hecho de tener una página Web es muy importante porque

como una Empresa con énfasis de progresar con las nuevas

tecnologías es fundamental el poseer y manejar los recursos

tecnológicos; ya que actualmente es indispensable manejar las

TICS.

4

2- ) Objetivos.

1. Crear una página web para interactuar, dar a conocer la

importancia de poseer una y las oportunidades que esta

brinda.

2. Implementar nuevas tecnologías que contribuya al

mejoramiento del entorno social de nuestra institución,

exhibiendo nuestra Empresa a nivel regional, nacional e

internacionalmente.

3. Enriquecer nuestro aprendizaje a través de la utilización de

la página web en nuestra Empresa.

5

3- ) Sincronizar sitio con cuenta de Wordpress.

3.1-) Una vez que el Administrador de Mipymes habilite la página web, se le asigna la dirección

web del sitio al nuevo usuario.

http://www.mipymes.gov.py/prueba/

3.2-) Para Ingresar a tu cuenta y administrar tu sitio debes agregar al final del dominio “/wp-

admin” quedando como ejemplo: http://miempresa.senatics.gov.py/sitio/wp-admin. Ingresar

tu usuario y password (Asignada por el Super-Administrador de Mipymes via mail, cuyo

password puede ser modificada no así el nombre del usuario).

6

Una vez en el panel de administración del sito, debe vincular tu sitio con Wordpress para

múltiples beneficios y facilidades mediante el Plugin JetPack que se encuentra en la parte

izquierda, hacer clic en el mismo.

3.3-) Dar Click en Conectar Jetpack.

7

3.4-) Dar Clic en ¿Necesitas una cuenta?, (no confundir con la cuenta del usuario del sitio web

con la cuenta de wordpress).

3.5-) Automáticamente ya aparece el correo correspondiente, debe ingresar un nombre de

usuario, una contraseña y registrar.

8

3.6-) La confirmación de tu registro será enviado a su mail.

3.7-) Confirmar dando clic en Correo electrónico.

3.8-) Tu cuenta fue activada dar Clic en Aprobar.

9

3.9-) Tu cuenta Wordpress ya se encuentra sincronizada con tu sitio.

4- ) Configurar la Apariencia de nuestro sitio.

10

4.1-) Modificar la cabecera de nuestro sitio, debe ingresar en Personalizar que se encuentra en

la parte superior de tu sitio.

2.2-) Modificar el logo ingresaremos en “Título del sitio, lema y logotipo”

11

4.2-) Modificarlos colores del fondo y letras de la cabecera.

12

13

4.3-) Modificarlos colores del fondo (Background) del cuerpo de la página.

14

15

4.4-) Modificarlos colores del fondo y letras del (Footer) pie de Página.

16

4.5-) Modificarlos colores del fondo y letras del (Typography) cuerpo de la página.

17

4.6-) Modificar colores del fondo y letras de (Buttons) Botones.

4.7-) Modificar ubicación de columnas (Layout) disposición.

18

5- ) Creación de Páginas y Menús.

5.1-) Creación de Páginas para nuestro sitio debemos ingresar a título de nuestra web en este

caso “Prueba Aprendiendo”.

5.2-) Ingresamos en la sección de Páginas.

5.3-) Una vez dentro vamos en Añadir nueva.

19

5.4-) Insertamos el título de la Pagina, su contenido (Podemos agregar imágenes hasta adaptar

como te es más factible) y le damos actualizar.

Quedando como resultado:

Ya tenemos nuestra primera página!.

20

5.5-) Creamos e insertamos el menú de navegación para nuestro sitio.

21

Ingresamos en +Anadir menú.

Ponemos en título a nuestro menú en este caso se llamara Menú Principal y le damos Clic en

Crear menú

Indicamos que nuestro menú sea el primario.

22

Ingresamos en Añadir Items. Luego en página se despliega las páginas que tenemos creado.

Añadimos Solo 2 Paginas Nosotros y Pagina de Ejemplo (Podemos agregar la cantidad de

páginas que deseamos).

Obs.: si deseamos un menú desplegable o sub menú tan solo hay que mover el elemento a la

derecha

23

5.6-) Indicar que la pagina Nosotros sea la página principal (Inicio) al abrir nuestro sitio.

Vamos a menu deplegamos la opcion Nosotros.

Escribimos Inicio, cambiando así el nombre de nuestro Menú Nosotros por Inicio, no altera el

título de nuestra página.

24

Vamos a la opción “Ajustes” luego “Lectura”, marcamos “Una página estática” seleccionamos

“Nosotros” luego guardamos los cambios realizados.

Finalizando los pasos anteriores la Pagina Nosotros queda como Inicio de nuestro sitio.

25

6- ) Creación de Galerías de Fotos. (Existen 2 formas).

6.1-) Creamos una Página para nuestra galería vamos al título de nuestra web en este caso

“Prueba Aprendiendo”.

Ingresamos en la sección de Páginas.

Una vez dentro vamos en Añadir nueva.

4.2-) Agregar galería de imágenes (Opción 1).

26

En la parte inferior Ingresamos en ADD GALLERY IMAGES (Agregar imágenes a la galería).

Se abre una ventana con las imágenes que subimos en nuestro sitio, podemos seleccionar el

que queremos o subir nuevas imágenes.

27

Una vez Seleccionado las imágenes le damos Publicar.

Ya tenemos nuestra Página Galería de imágenes.

28

6.2-) Agregar galería de imágenes (Opción 2).

Vamos a Jetpack elegimos configuración.

En Tiled Galleries le damos activar.

29

Ingresamos en la sección de Páginas.

Una vez dentro vamos en Añadir nueva.

Vamos en Añadir objeto.

30

Ingresamos en Crear galería y seleccionamos o subimos nuestras imágenes.

31

7- ) Inserción de Widgets.

32

Entramos en Siderbar y vemos los widgets que pueden ser agregados o sacados de esa sección.

33

8- ) Creación de formulario Contacto.

8.1-) Agregar formulario Contacto.

Vamos a Jetpack elegimos configuración.

En Contact Form le damos activar.

34

8.2-) Creamos una página para nuestra sección Contacto debemos ingresar a título de nuestra

web en este caso “Prueba Aprendiendo”.

Ingresamos en la sección de Páginas.

Una vez dentro vamos en Añadir nueva.

35

8.3-) Escribimos el título de nuestra página en este caso Contactos, luego ingresamos en

“Añadir Formulario de Contactos”.

Una vez establecido los campos que deseamos le damos “Notificaciones por correo

electrónico”.

36

8.4-) Introducimos el correo donde deseamos que nos llegues las consultas y tiutlo del asunto,

luego del damos en Guardar.

Damos clic en Añadir este formulario en mi entrada.

37

Clic en publicar

Ya tenemos nuestro Formulario Contacto!.

38

9- ) Creación de catálogos para productos

(WooCommerce).

9.1-) Asistente de configuración Woocommerce. Para crear nuestra tienda de catálogos vamos

a ingresar en “Ejecutar Asistente de Configuración”. Otra opción sería estando en la página del

administrador del sitio en este caso la dirección sería

http://miempresa.senatics.gov.py/prueba/wp-admin/ agregar al final admin.php?page=wc-

setup quedando nuestra dirección así: http://miempresa.senatics.gov.py/prueba/wp-

admin/admin.php?page=wc-setup

Clic en Vamos Allá.

39

Se crea automáticamente 4 paginas (Tienda, Carrito, Finalizar compra y Mi cuenta).

Configuramos la localización de la tienda, tipo de moneda, las unidades de peso, medida de

nuestros productos así como los separadores de miles y decimales para los precios.

40

41

Una vez terminado los pasos de configuración nos vamos al final de la página donde dice

“Volver al escritorio de WordPress”.

7.2-) Creamos nuestro Primer producto. Vamos a la sección productos luego añadir productos.

42

Agregamos el título y una descripción de nuestro producto.

Más abajo insertamos el precio.

Agregamos una descripción Corta del Producto.

43

Insertaremos imágenes a nuestro producto, ingresamos en “Añadir galería producto

imágenes”, que se encuentra en la columna derecha.

Se abre una ventana donde están las imágenes que subimos, seleccionamos la imagen que

deseamos y le damos Añadir a la galería.

44

Establecemos la imagen del Producto.

Seleccionamos nuestra imagen y hacemos clic en Establecer Imagen del Producto.

45

Agregamos la categoría que es opcional, si es que no existe ninguna categoría lo creamos. Le

damos Clic en Añadir nueva Categoría de Producto, escribimos el nombre y añadir.

Le damos clic en Publicar.

Ya tenemos cargado nuestro primer producto.

46

9.3-) Agregamos la página tienda a nuestro sito.

Tendremos que agregar la página tienda a nuestra barra de menú principal visto en el punto

anterior (5.5-) Creamos e insertamos el menú de navegación para nuestro sitio.)

Ya tenemos nuestro producto en la tienda.

47

9.4-) Carrito de Compras

Agregamos el carrito de compras hay 2 formas como página que sería agregar a nuestra barra

de menú principal y como widgets, en este ejemplo agregaremos como widgets.

Vamos a personalizar.

Hacemos Clic en la sección Widgets.

48

Hacemos clic en Sidebar

Nos vamos en Añadir Widget, buscamos Carrito WooCommerce seleccionamos, y hacemos clic

en guardar y publicar.

49

Ya tenemos agregado nuestro widget carrito de compras en nuestra página.

Le damos clic en ver carrito.

50

Estando dentro del carrito podemos ver la lista de lo que añadimos, en este caso Anillo de Oro

Blanco, se ve el precio, la cantidad de cada producto y un total. Le damos ir a la caja.

Estando en la página finalizar compra nos pide llenar los datos para poder establecer la

compra. Llenamos y damos clic en realizar pedido.

51

Nos presenta un Pedido Recibido donde nos muestra la lista de los productos comprados, los

datos del cliente y la dirección de facturación.

Revisamos el correo del administrador vemos que recibe una notificación de un nuevo pedido.

52

Revisamos el correo del cliente vemos que recibe una notificación sobre la confirmación de su

nuevo pedido.

Vemos que en la sección WooCommerce en pedidos que nos indica un icono rojo con un

número que hay un pedido.

53

Estando dentro de la sección pedidos podemos ver los detalles, vamos en ver.

Vemos el detalle del pedido.

Podemos seleccionar el estado del pedido indicando en este caso que ya fue completado y

guardar pedido.

54

Al cliente le llega una notificación indicándole que su pedido fue completado.

9.5-) Agregar la página Mi cuenta (Cuenta del Cliente) a nuestro sitio.

Tendremos que agregar la página Mi Cuenta a nuestra barra de menú principal visto en el

punto anterior (5.5-) Creamos e insertamos el menú de navegación para nuestro sitio). En este

caso mi cuenta será un subelemento de tienda.

55

La forma en que un cliente se puede registrar a nuestro sitio es cuando va a realizar un pedido

y finalizar la compra. Llena sus datos personales activa la casilla “crear cuenta” se despliega la

caja de texto para que ingrese una contraseña y luego debe dar clic en Realizar el Pedido.

56

10- ) Insertar nuestras Redes Sociales.

10.1-) Agregar nuestras redes sociales con widgets en el sidebar.

57

Ingresamos nuestras redes sociales que tenemos a disposición, le damos guardar y publicar.

Este mismo proceso podemos hacer para agregar en el pie de página.

10.2-) Agregar nuestras redes sociales en nuestra página Nosotros.

Vamos a la Pagina Nosotros (ver el punto 3 como ingresar a una página), una vez dentro en la

parte inferior habilitar “Mostrar botones de compartir”.

58

Ingresamos en Ajustes luego en Compartir.

Tenemos las opciones para conectar a nuestras redes sociales.

59

Arrastramos las redes que deseamos y luego guardamos los cambios.

Ya tenemos insertado nuestras redes sociales para compartir.