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%»
Para hacer una actualización del sitio web o para migrarlo de servidor se requiere primeramente realizar una copia de seguridad. Esto respaldará el sitio web y la base de datos.
Aquí les dejo el vídeo de como programar y restaurar copias de seguridad.
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.
Esta cuenta la crea el propio dueño de la página web para que el mismo se quede con el usuario y contraseña de google analytics, a mi como diseñador solo me tienen que entregar el código que se generó para agregarlo a la página y así quede la página enlazada y se registren los datos.
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!
Bloque 5
Inmobiliarias
La plantilla de una pagina web de Bienes raíces, maneja catálogos para el manejo de la ubicación de la propiedad (ciudad y/o colonia), para el tipo de inmueble (casa, departamento, local, etc) y para el estado del inmueble (en renta o en venta).
Y es lo primero que tenemos que alimentar antes de dar de alta las propiedades.
Entonces para darle mantenimiento a estos catalogos, por ejemplo que se quiera agregar una nueva colonia, hay que seguir los pasos que se muestran en el siguiente vídeo.
NOTA: El vídeo muestra como crear categorías a las entradas del blog… pero básicamente es lo mismo para el manejo de los catálogos…. solo que en lugar de entrar a categorías, entraremos en las siguiente opciones segun corresponda:
Estando en la pantalla principal del escritorio nos vamos a la opción de propiedades/añadir nuevo
Luego añadiremos el título y la descripción de la propiedad donde se muestra en la siguiente imagen
Posteriormente rellenaremos los campos correspondientes en las siguientes pestañas.
Luego procederemos a seleccionar el tipo, el estado y la ciudad o colonia de la propiedad según corresponda.
Nota: si no se encuentra la opción deseada ahí mismo se puede dar de alta dándole click en el texto correspondiente.
Ahora procederemos a dar de alta la imagen destacada, osea la imagen principal de la propiedad.
Por último, si ya tenemos todos los datos de la propiedad y la queremos publicar…. le damos click al botón de publicar.
Si solo queremos guardar los datos y no publicarla
Para modificar los datos de una propiedad, entramos al escritorio de wordpress y le damos click a la opción que dice propiedades esto nos desplegara la lista de todas las propiedades.
Después posicionamos el cursor sobre la propiedad que queramos modificar y se visualizara unas opciones, dentro de estas opciones esta la de editar…le damos click en esa opción y ya ahí podemos modificar cualquiera información de la propiedad.
Una vez que hayamos modificado no se les olvide darle click al botón de actualizar para que se graben los nuevos datos.
