Tutoriales

En cada uno de mis proyectos procuro que mi cliente aprenda y sepa manejar su  propia página, desde como entrar al sistema hasta como modificar el contenido de cada una de sus paginas, entre otras cosillas.

Pero se que como es algo que no manejan diariamente lo suelen olvidar, por lo que aquí les dejo algunos temas explicados e  incluso con algunos vídeos tutoriales, para que lo puedan consultar cuando lo necesiten.

Bloque 1

Temas Generales

Paso 1.- Teclear en la ventana del nevegador el dominio de su pagina seguido del siguiente texto /wp-admin 

Ejemplo: www.mi-sitio-web/wp-admin

Paso 2.- Aparecerá la siguiente imagen, y procederemos a teclear el usuario y password que se les proporciono.

Paso 3.- Listo! verán una ventana como esta, a la cual le llamaremos escritorio.

Empezaremos por definir que es el Blog.

El blog es una serie de publicaciones y cada una de estas publicaciones se les suelen  llamar entradas, artículos o posts. Nosotros utilizaremos el termino de entrada.

Cada entrada esta compuesta principalmente de:

  • Título
  • Contenido
  • Imagen destacada
  • Categoría a la  que pertenece
  • Etiquetas.

Así que sin mas preámbulos, les dejo un vídeo de como dar de alta una entrada al Blog.

En ocasiones necesitaremos de realizar una entrada igual a una anterior pero solo cambiaremos ciertos datos, y no queremos perder tiempo en hacer  de nuevo la estructura y diseño.

Nota: Esta funcionalidad solo aparecerá en las paginas que cuenten con ella.

Para ello solo necesitamos entrar en el escritorio y   seleccionar en el menú izquierdo ENTRADAS y luego posicionaremos el cursor en la entrada a clonar y aparecerá unas opciones y seleccionaremos clonar.

Aparecerá una nueva entrada igualita pero con la palabra borrador a un lado, como se muestra en la siguiente imagen

Lo siguiente es entrar a editarla, cambiar todo excepto lo que se desea conservar.

Se graba y listo!

 

Aveces se requiere hacer enlaces a otras paginas o a otras secciones, para ello:

Paso 1: Entrar a youtube y seleccionar el video a enlasar.

Paso 2: Abojito del video hay un boton que dice Compartir, ahi darle click  y seleccionar la opcion que dice insertar.

Paso 3: Copiar el codigo que aparece ya sea seleccinadolo o dando click al boton copiar

Paso 4: Ir a la entrada donde se colocara el vídeo y pegar lo que se copio anteriormente en la pestaña de html.

Una vez pegado el código cambiaremos el elemento width por 100%

Ejemplo…. si dice width=»640″

debe quedar width=»100%»

El sitio web esta compuesto de varios dispositivos electrónicos que se van actualizando constantemente por lo que nosotros requerimos de actualizarlos en nuestro sitio web también… para ello lo primero que tenemos que hacer es una copia de seguridad del sitio y la base de datos.

Aquí les dejo el vídeo de como programar y restaurar copias de seguridad.

Una vez respaldado el sitio web lo que procede es actualizar los plugins, en el siguiente video les muestro como y por que hay que actualizar los plugins.

Las imágenes juegan un papel muy importante en todo sitio web, pero aparte de la calidad tenemos que cuidar su tamaño y peso, por que al final del día esto repercute en la carga de la pagina. 

Así que aquí les dejo unas recomendaciones para ello.

1.- No utilizar un tamaño de imagen mas grande de lo necesario.

¿Como saber que tamaño es el necesario? Si tenemos una imagen  que cubre la 5ta parte de una pantalla de escritorio, pues sacamos su proporción y esa sería su  tamaño máximo.

Ejemplo:  Si consideramos una pantalla de escritorio  de 1680px x 1050px, y nuestra imagen cubre la quinta parte, nuestro tamaño máximo recomendable seria  aproximadamente de 336px x 210px.   

¿Por qué tomamos la pantalla de escritorio de referencia? porque seria la pantalla mas grande. Las imágenes se pixelean (osea se ven feas) cuando pasamos de un tamaño chico a hacerlas grande, no así en caso contrario.

2.- Podemos reducir las imágenes en peso pasándolas por la aplicación de www.tinypng.com, ella las reduce sin perder gran calidad, y es muy fácil de usar.

Bloque 2

Editando Contenido

En ocasiones vamos a tener que echar mano del codigo html para editar texto. Los códigos html son el lenguaje universal que se utiliza para programar y elaborar sitios web.

Este codigo para que se pueda leer,  generalmente tienen una etiqueta de inicio y una de cierre.

Cada etiqueta va encerrada entre los signos de < (menor que) y > (mayor que)… la etiqueta de cierre se acompaña ademas de un / (slach)

Para el diseño de las paginas me valgo de una herramienta (plugin) denominado Elementor, el cual toma su nombre por que es un conjunto de elementos que se manipulan por separado.

En este fragmento de página de un de mis clientes te muestro  algunos de los elementos que contiene:

Ahora, para editar la pagina hay que seleccionar la, pero para no batallar en buscar cual es la página, les voy a enseñar un truquito.   Estando en el escritorio, nos vamos a la esquina superior izquierda en donde aparece el nombre del sitio y al posicionarnos en el aparecerá una opción que dice  Visitar el Sitio, le damos click en esa opción.

Ahora nos aparecerá nuestro sitio web,  la única diferencia es que nos aparece un menú adicional horizontal en la parte de arriba de color negro con letras blancas.

Vista de cerquitas se verá asi

Entonces le damos click a Editar con Elementor y pasaremos a ver la página a editar con una barra lateral izquierda adicional.

Ahora, para editar un elemento solo hay colocarse encima del y seleccionarlo dándole un click y ese momento en nuestra barra lateral izquierda nos aparecerá las opciones a modificar a ese elemento.

Cada elemento generalmente contiene las tres mismas propiedades a modificar: Contenido, Estilo y Avanzado.

Observe que el elemento a modificar aparecerá en un recuadro de color azulito y en la barra lateral izquierda indica el nombre del elemento que se está seleccionado listo para modificar.

Entonces dependiendo del elemento aparecerán sus opciones.

El Editor Elementor contiene a la fecha mas de 35 elementos, aquí solo les mostrare algunos de ellos, de hecho cada elemento es muy intuitivo, solo es cuestión de experimentar a moverle y no tenerle miedo, total todo se puede ir deshaciendo con nuestro ya famosisimo Ctrl+Z.

Para continuar con este tutorial nos vamos auxiliar de un video que muestra los elementos básicos del Elementor y como editarlos, aunque lo ideal es vieran todo el video completo,  aquí les dejo su índice por si se quieren ahorrar tiempo.

Minuto        Elemento

00:30  Encabezados

04:34  Columnas

05:38  Imágenes

06:15  Editor de Texto

07:34  Video

08:28  Botones

11:18  Separadores

12:58  Cuadro de Imagen

 

Bloque 3

Tienda en Línea

Para entrar a dar de alta los productos, seleccionar la opción Productos que se encuentra en el menu de la barra lateral izquierda del escritorio, se desplegara un submenu donde eligiremos la opcion Agregar nuevo.Posteriormente entraremos directamente a la pantalla donde capturaremos todos los datos del nuevo producto.

 

A continuación les dejo un vídeo tutorial que nos mostrara como dar de alta un producto simple.

 

 

Por ultimo, una vez agregado el primer producto, para agregar otro, existen dos opciones: haciendo click en donde dice Agregar Nuevo en la parte superior de la pantalla,  o donde dice Agregar Nuevo en el menú izquierdo del escritorio, como se muestra en la siguiente pantalla.

Un producto variable es aquel que maneja varios colores o tamaños y dependiendo de esto muchas veces también varia su precio.

A continuación les dejo un vídeo que explica como daremos de alta este tipo de producto.

 

Bloque 4

Correo Electrónico

Una vez que ya compramos nuestro dominio y nuestras cuentas de correo, toca como configurar nuestro correo para poder visualizarlo en nuestro celular.

Aqui nos vamos a valer de una pagina que nos llevara de la mano para realizar  esta tarea, por lo que teclearemos en nuestra barra del navegador la siguiente liga: www.emailwizard.co

A continuación nos aparecerán las siguientes pantallas, donde iremos siguiendo las flechitas rojas que se muestran en las imágenes.

Luego les aparecerá una pantalla donde eligirán la imagen de su dispositovo, y listo…siguen las instrucciones que les marca. Suerte.

 

 

Una vez que ya compramos nuestro dominio y nuestras cuentas de correo toca como configurar nuestro correo para poder visualizarlo.

Existen varios tipos de correo, aquí vamos a ver como configurar el  correo denominado Business Email, este tipo de correo es el que requiere de una aplicación de mensajería para poder visualizar los correos, la mas conocida de ellas es la denomina Outlook de Microsoft y esa es la que vamos a ver aquí.

Así que lo primero que tenemos que tener a la mano es que versión de Outlook tiene nuestra computadora.

El siguiente paso vamos abrir una pagina que nos llevara de la mano para realizar la configuración, por lo que teclearemos en nuestra barra del navegador la siguiente liga: www.emailwizard.co

A continuación nos aparecerán las siguientes pantallas, donde iremos siguiendo las flechitas rojas

En la siguiente pantalla seleccionaremos dependiendo la versión de outlook con la que contemos en nuestra computadora.

Ojo: Si tu outlook es 2013, sigue los pasos del 2016. 

y a partir de aquí, seguiremos las instrucciones que nos da esta pagina. Suerte y animo, tu puedes!