Si tienen cualquier duda sobre el funcionamiento de la web o necesitan ayuda en algo fuera de este manual manden un correo [email protected]
Para ingresar al escritorio de WordPress es necesario acceder a través del siguiente enlace: https://www.salomoconsulting.com/login
Nosotros no usaremos todo los que nos ofrece WordPress ya que no es necesario para el funcionamiento de la web. En este caso nos concentraremos en el menú lateral derecho que tiene la navegación principal del sitio. Páginas y Apariencia será lo mas utilizado en este manual. Para conocer a mas detalle lo que WordPress ofrece recomiendo visitar https://codex.wordpress.org/es.
En Páginas podremos mirar lo que se tiene creado y la opción de agregar una nueva.
Para crear una página, mirar el siguiente video que explica como crear la página con mejor configuración para usar Elementor. También explica el funcionamiento de Elementor, sus funciones básicas y como trabajar con templates (plantillas).
En el siguiente enlace podrán encontrar mas videos e información de las funcionalidades de Elementor:
La página web consiste de tres partes:
Las tres partes se editan de la misma manera pero la localización de cada una es diferente, es importante especificar esto por que no se podrá editar ese contenido aunque se mire mientras se edita en una página en Elementor.
Las secciones de cabecera y pie de página se encuentran en Apariencia. Sin dar clic y solo pasar el puntero del ratón activara el menú secundario. Ahí nos interesa dar clic en Header Footer Builder (es un plugin que nos permite editar estas dos secciones con Elementor).
Nos mostrará un contenido muy similar a la sección de Páginas. No será necesario crear uno nuevo por que ya están creadas las dos necesarias.
Para editar la cabecera pasaremos el cursor sobre el y nos mostrará varias opciones en azul, clic en la última opción «Editar con Elementor».
La primera tiene el logotipo del Sitio. El logotipo se cambia en «Apariencia» En las opciones del Tema.
La segunda es el menú, el contenido se agrega/cambia también en Apariencia/menú.
Se puede agregar mas contenido a su gusto. Por el momento vamos a Apariencia a mostrar donde cambiar Logo y Menú.
En el escritorio de WordPress, al pasar el puntero de raton sobre la sección de apariencia nos mostrará un sub-menu con:
Nos enfocaremos en Personalizar y Menús.
Al dar clic en personalizar nos mostrara una interfaz parecida a Elementor, pero en este caso no podremos editar o usar mucho de las herramientas que nos dan por que usamos Elementor para la elaboración del sitio.
Identidad del sitio es donde podremos cambiar el nombre del sitio, una descripción del sitio, cambiar logo con su versión de retina (equipos con una pantalla de gran resolución, equipos reciente de apple) y poner un icono del sitio.
Al terminar basta con pulsar el botón de Publicar para actualizar el sitio y salir con en el botón de la X.
Lo segundo es Menús. Al dar clic nos mostrará dos columnas «Agregar artículos al menú» y «Estructura del menú».
Cuando se crea una paginas, entrada o categoría aparecen en el apartado correspondiente. Al seleccionar el elemento que queremos agregar al presionar el botón de añadir al menú se vera reflejado.
Si queremos agregar un enlace externo del sitio, en enlace personalizado nos permite agregar una dirección web y el texto que se mostrará.
En estructura del menú nos muestra varias pestañas que nos permite cambiar el texto de cada uno, quitarlo y moverlo sin arrestarlo.
Si arrastramos un elemento podemos colocarlo debajo de otro, creando un submenú.
Guardamos y los cambios se verán reflejados.
Volvemos a Header Footers Builder, ahora a editar el Pie de página.
Para editar el pie de página pasaremos el cursor sobre el y nos mostrará varias opciones en azul, clic en la última opción «Editar con Elementor».
Arriba del formulario de contacto miramos un rectángulo gris con un ancla a la mitad esto es el «Ancla Menú». Nos permite crear la función de «llamar» a elementos en la página. En el siguiente video se explica paso a paso como se realiza.
En varias partes de la página web usamos este elemento para crear pequeños menús en donde nos vemos necesario dar una facilidad mayor al usuario.
En la parte final tenemos una lista de información de contacto. Al dar clic sobre la lista, nos cambiara el área de trabajo en la parte izquierda. Nos permite duplicar o agregar un elemento. Al dar clic sobre un elemento podemos cambiar icono, texto y enlaces.
Una vez terminado los cambios, actualizamos la página con el botón verde en la parte inferior.
En el menú de hamburguesa en la parte superior izquierda (Tres reyes en horinzontal), nos dará la opción de salir al escritorio de wordpress en un botón azul.
El formulario de contacto se edita con el plugin de Contact Form. Este se encuentra en su propia sección en el escritorio de WordPress.
Esto será una explicación para editar solamente el texto que se muestra de manera visual en la página web. Se tomó la decisión de un diseño personalizado y que funcionara mejor para el sitio, se trabajo con código HTML y CSS. Es básico lo que se usa pero se recomienda no realizar cambios.
Para mas informacion recomiendo visitar la página oficial de Contact Form https://contactform7.com/docs/
Primero vamos al menú de Páginas. Basta con dar clic sobre la sección de Páginas en el lado derecho del menú. En la siguiente sección vamos a editar la página Inicio con la opción de Elementor.
En la parte superior miraremos tres pestañas
Lo siguiente a editar es el Slider . Al dar clic sobre el slider, la barra de la izquierda cambiara y nos mostrara el contendio dividido en 4 barras.
Al dar clic sobre uno nos mostrara los que se puede cambiar o agregar en lo que permie el widget.
Si desea cambiar o agregar una imagen, lo recomendado en tamaño es «1200px * 412px». Se puede agregar una imagen de tamaño diferente pero es muy probable que el sitio cambie el diseño.
Se puede cambiar titulo y agregar una descripción que solo aparece cuando el puntero del ratón pasa encima del slider.
También permite agregar un enlace y el texto del botón.
Justo debajo nos agrega dos apartados más:
La siguiente sección cuenta con una estructura de 4 columnas, contiene 4 iconos con el titulo de cada servicio que ofrece el consultorio y justo debajo una frase con acción que dirige hacia el contacto.
Al dar clic sobre un icono nos mostrará los cambios que se puede realizar
Para cambiar el color del icono, tipografías y tamaño del texto es en el apartado de «Estilo».
Cada icono en el listado se edita de manera independiente.
Al dar clic derecho nos mostrará primero «Settings» con las opciones para cambiar cuantas opiniones se mostrarán, auto reproducir, velocidad y varias más.
«Items» es la segunda opción, en donde cambiaremos el contenido, esta con la opción de quitar la imagen por si no queremos agregar una imagen de la persona/empresa.
El resto es bastante parecido a los iconos de servicios. Colores y textos se edita en la sección de «Estilo».
Editaremos el Pop Up actual por tener ya la configuración para que funcione o simplemente se quiera quitar.
En la barra lateral, tendremos el apartado de «Popup Maker», plugin que se agregó para tener los Pop Up.
Al pasar sobre el con el puntero del ratón, nos mostrará sus opciones. Nos interesa la segunda opción «Todas las ventanas emergentes».
Tendremos una vista similar al apartado de Páginas. Es bastante similar si funcionamiento, solo que no se usa Elementor para crear un Pop Up, se usará el editor clásico de WordPress. Clic en Cursos para editarlo.
Si se quiere quitar. Presionar la opción de «Enviar a la Papelera».
Tendremos la opción de cambiar el nombre del Pop Up, agregar un titulo, cambiar el contenido y justo de bajo «Ajustes de Pop Up». Esta ultima sección nos permite configurar, donde se va a mirar el pop up, duración en lo que tarda en salir y estilo.
Nos concentraremos en el contenido del Pop Up.
Podemos quitar el contenido, dando clic sobre la imagen. Aparece un menú que nos da la opción de posicionar la imagen y al final una X para eliminar.
Para agregar una imagen, presionamos el botón «Añadir objeto» en la parte superior derecha. Nos mostrará la biblioteca de medios, basta con arrastrar una imagen para subir el archivo.
Seleccionamos la imagen en el espacio de trabajo. En el menú de herramientas de la parte superior, nos da la opción de agregar enlaces, en el icono de Clip/Separador.
Esta sección cuenta con un titulo y un menú de los servicios. Se edita de la misma manera que un Titulo y un Icono (este muestra todos los iconos en un mismo lugar por ser un listado y no un icono independiente pero el funcionamiento es el mismo)
El listado de iconos tiene una funcionalidad agregada. Funciona como un menú dentro de la página. Al dar clic sobre cualquiera te llevará a la parte correspondiente, esto funciona con el widget «Ancla de menú».
El ancla de menú esta repartido en cada sección a la cual queremos que el listado de iconos nos traslade, cuando se de clic sobre el.
El widget de «Ancla Menú» se encuentra en la segunda sección después de los widgets pro.
Al agregar un ancla de menú nos permite agregar una palabra la cual funcionara como enlace para que el menú superior funcione como desplazador al dar clic sobre la sección que busque el usuario.
La segunda parte para que funcione el ancla de menú es el listado de iconos. Al dar clic sobre el nos mostrará el contenido. Dentro del contenido nos dará la opción de ingresar un enlace. No agregaremos un enlace web como tal. Basta con agregar un «#» antes de la palabra que usamos en el menú de ancla. Con eso basta para realizar la función de menú dentro de una página.
La siguiente sección cuenta con dos columnas:
La primera mitad cuenta con un slider, tiene el mismo funcionamiento al que se encuentra en la pagina principal pero sin las imagenes. Se recomienda no agregar imagenes por que cambiara el concepto de diseño que se maneja.
La segunda mitad cuenta con una imagen, al dar clic sobre la imagen, nos mostrará en la barra de la derecha la misma imagen con opción de cambiarla.
Al dar clic, nos abrirá una ventana. Se puede cambiar la imagen una de la galería de medios o cargar una propia, basta con arrastrar la imagen desde su computadora y se subirá de manera automática.
Aplicar el efecto de sombreado que tienen algunos elementos. Recomiendo ver el siguiente video.
Cuenta con un titulo, una lista de iconos con función de menú y una imagen.
La siguiente sección cuenta con tres titulos, estás divididos de esa manera para poder personalizar las partes que se quiere resaltar.
Lo siguiente son los cursos. Todos tienen el mismo funcionamiento.
Tiene dos columnas la primera cuenta con una imagen, titulo, lista de iconos y un texto. Todo se edita de la misma manera que el resto.
La segunda columna cuenta con una sección interior con un color amarillo. Si se quiere cambiar el color, basta con dar clic en el botón azul que sobresale al poner el puntero del ratón sobre la sección interior.
En la pestaña de Estilo nos mostrará la opción de cambio de color de fondo.
La parte final cuenta con un texto con la función de menú de ancla para mandar al usuario al contacto.
Tiene un titulo que se edita de la misma manera que el anterior.
Sigue una sección de dos columnas. Las dos tienen el mismo contenido un titulo y un texto (Widget texto).
El texto al dar clic sobre el nos muestra un editor de texto clasico de WordPress. Se puede editar la tipografía y el color en la pestaña de «Estilo».
Dentro tenemos do sección interior. La primera contiene una imagen y un titulo. Después está otra sección interior de dos columnas, con dos widgets de texto.
La parte final es una sección de dos columnas con un titulo y un listado por igual.
Es el plugin que nos permite tener en funcionamiento la tienda, las configuraciones de inicio ya están agregadas.
Informaremos de las cosas necesarios para el funcionamiento de la tienda
Para revisar los productos recibidos ve a la sección «WooCommerce» y después clic en «Pedidos».
Se encontrará la lista de pedidos. Cada nuevo pedido será agregado como «Procesando» si Stripe no tiene problemas con el pago. Al dar clic sobre un pedido nos mostrará la información sobre el cliente que nos servirá para comunicarnos con el, en caso de que sea necesario.
Al revisar el pedido y comprobar que está bien, seleccionamos el pedido y a cambiamos su estado de Procesando a Completado. El cliente recibirá un correo avisando que su pedido a sido completado.
Para crear una página de producto ve a la sección «Productos» y después haz clic en el botón «Añadir Producto».
Escribe el nombre de tu producto y añade una descripción
Asigna una categoría a tu producto. Si fuese necesario puedes asignar varias categorías a un mismo producto, aunque suele ser mejor usar subcategorías.
Muestra una imagen destacada de tu producto. Para ello, ve a la sección «Imagen destacada» que verás a la derecha, clic en «Asignar imagen destacada» y sube la foto del producto que desees destacar. Esta será la foto principal del producto que primero verán los clientes que entren a tu web.
Abajo de esa sección se encuentra la opción de agregar más imágenes en caso de necesitar una galería del producto.
WooCommerce nos da diferentes opciones para los productos, en nuestro caso nada mas usaremos el producto simple. Salomó Consulting no enviará productos fisicos así que será necesario habilitar la opción de Virtual.
Abajo agregamos el precio final y en caso de tener un descuento abajo de agrega el precio reducido. Esto será todo para agregar un producto, en la parte superior derecha está el botón de publicar.
Para agregar una entrada en la sección de Blog, en el escritorio de WordPress vamos a Entradas y luego a Añadir nueva.
Nos encontraremos con un editor similar a Word, donde iremos colocando el texto de nuestro post.
Deberemos colocar el título del post. Abajo del titulo podemos agregar el contenido dependiendo de la escritura que se tenga.
Si se desea agregar una imagen tenemos un icono de + arriba a la izquierda, que nos dará la opción de agregar una imagen y varias opciones más como tablas, citar o verso .
Una vez veamos que nuestra publicación está lista presionamos el botón de publicar.