Tutoriales

Cambios básicos

Antes de entrar a Elementor, que el lo centrar, vamos a repasar algunos cosas básicas del sitio.

Publicidades (rev. 12/12)

Las publicidades, como siempre, están en «Apariencia – Widgets». Allí verán que los lugares en los que aparecerán en el sitio, están debidamente nombrados. 

Al momento de hacer este tutorial, en cada sección hay un html personalizado con tres publicidades en el mismo widget, encerrados por la etiqueta <centrar></centrar>, esto para que se muestren centrados en una misma fila si la pantalla lo permite. Si ubicamos algo fuera de esta, el elemento se alineará en la izquierda en una nueva fila.

Tengan presente que, si agregamos otros widgets, estos se agregarán por debajo.

Esta sería la forma correcta de agregar las publicidades:

				
					<center>
<a href="https://mapainversiones.obraspublicas.gob.ar/" target="_blank"><img decoding="async" src="https://amvcaba.com.ar/wp-content/uploads/2023/06/banner-ciudad-junio-2023.gif" alt="Publicidad AVM"></a>
<a href="https://bit.ly/3TSRTWM" target="_blank"><img decoding="async" src="https://amvcaba.com.ar/wp-content/uploads/2023/10/B_Dengue_mosquito_300x250-1.gif" alt="Publicidad AVM"></a>
<a href="https://bitly.ws/Zah8" target="_blank"><img decoding="async" src="https://amvcaba.com.ar/wp-content/uploads/2023/11/300x250.gif" alt="Publicidad AVM"></a>
</center>
				
			

De ser ancha la pantalla, se ven las tres horizontales. Probablemente ahora vean dos arriba y una abajo. Si abren esta página en móvil, las tres están centradas y en vertical.

Publicidad AVM Publicidad AVM Publicidad AVM

Imágenes destacadas

Las imágenes destacadas usaban el plugin llamado «Nelio», este fue discontinuado y sus características pasaron a otro bastante más complejo, «Nelio Content», que es pago. Encontramos el «FIFU» (featured image from url) que hace lo mismo pero bastante mejor.

La cuestión con Nelio, aparte de no recibir ya actualizaciones, es que no nos permitía mostrar esa destacada en ningún lado. No cuenta con ninguna clase de shortcode, o algo que nos permita enganchar esa url de ninguna forma. Revisar su documentación solamente confirmó que no se lleva bien con ningún constructor de sitios. Tal vez «Nelio Content» si, pero no nos vamos a enterar nunca.

Estos sistemas de imagen destacada por ulr están muy bien en papeles, pues nos salvan de llenar el disco del servidor, pero traen algunos problemas. Seguramente ya se los habrán planteado inicialmente cuando buscaron opciones. Solamente repaso que si una url se cae o si del servidor existe algún freno a mostrar sus imágenes en otro sitio (lo que es lógico), nos vamos a encontrar con que esa destacada está rota. Y cualquier constructor o tema va a mostrar esa imagen rota, no tiene forma de usar una de respaldo, como en el caso de que directamente no la tuviera (que es más sencillo) tal como lo hace «automátic», el plugin que levanta del feed.

Sacando eso, está bastante bien, y «Fifu» tiene actividad reciente y actualizaciones, así que por un buen tiempo no debería ser problema.

Menús (o menúes)

Usamos dos clases de menú que se modifican, como siempre, en «Apariencia < Menú». El Principal (cabecera) que se usa en el header y en el lateral del popup, y un segundo en las páginas de archivo, mostrando las categorías. De agregar nuevas categorías o querer mostrar otras de las que dejé, de allí mismo se cambia.

Elementor

Lo que esencialmente hace Elementor, es permitirnos crear plantillas (o templates), que serán base para todas las páginas del sitio. Así, la plantilla de posts, de páginas individuales, archivos, etcétera.

Además de estas, Elementor nos permite crear el contenido de cada página, esto es, lo que anteriormente hacían con el editor clásico (ahora editor Gutenberg, aunque si les interesa podemos poner el clásico por plugin). Entonces, cuando vemos una página como la de «nosotros» o «contacto», lo que tenemos en funcionamiento es una plantilla de páginas individuales (que marcan posición de título, bajada, imagen destacada y últimos posts), y un contenido, que es la página de contacto, nosotros o cualquier post que creamos con wordpress.

Esto no significa que tengan que hacer todas las nuevas páginas con elementor. Al contrario, por defecto, las páginas siguen haciéndose con el editor de WP, simplemente ahora tienen la opción de usar elementor para reemplazar el editor Gutenberg, pues el primero es bastante más completo en widgets y (a mi gusto) más ágil para trabajar, pero si no lo usaron nunca, lleva un tiempito acostumbrarse (como todo en realidad, no es difícil ni nada por el estilo).

Este hermoso dibujo en paint, debería aclarar las cosas:

La plantilla contiene elementos comunes o estáticos, que se modificarán con la información dinámica que le demos mediante la creación de un post o página en el editor de WordPress. Si creamos una página, se nos asignará por defecto la Plantilla de Páginas, mientras que si hacemos un nuevo post, la plantilla por defecto será la de posts. Simple.

Al crear posts o páginas habrán notado el apartado de plantilla debajo de la url y autor. Las plantillas por defecto serán siempre las que hice con elementor, así que no hay que hacer nada raro.

Además de esta por defecto, elementor cuenta con dos más: ancho completo, (la que se usamos para la home y esta de tutoriales) usa la página completa sin usar platilla,  el contenido de lo creado ocupa toda la pantalla sumando solamente el header y footer; y canvas o lienzo, que ocupa el 100% de la altura, esto es, no hay header ni footer, solamente el contenido del post o página.

El último que dice tema, es la plantilla que viene con el tema. Así, si instaláramos zox de nuevo, las notas o páginas se mostrarían con el template de dicho tema. Ahora mismo el tema Hello no tiene plantillas, así que mejor no usar esa opción.

Editar plantilla o página

Para modificar cualquier cosa creada por Elementor, el acceso al editor siempre va a ser el mismo. En la barra de administración, en el botón «Editar con Elementor».

Si lo que queremos es editar la página creada con elementor, en este caso «nosotros», clickeamos en el botón mismo. Si es una plantilla, la buscaremos en el desplegable del mismo botón (en la imagen, el template de página individual).

Y no mucho más. Después de unos segundos tendría que haber cargado el editor de Elementor.

Para guardar lo hecho, verán en la parte inferior izquierda el botón de «actualizar», que de estar rosa o verde (dependiendo el fondo del sitio) nos permitirá guardar lo hecho. Sino, en la flechita hacia arriba, guardamos como borrador para seguir trabajando en otra sesión donde nos quedamos. 

En ese mismo desplegable de «actualizar», definir como plantilla sirve para aplicar el template a otra parte del sitio, se me ocurre ahora si quieren general un banner que van a replicar en otras partes. Pero eso es un poco avanzado ya, aunque nada que un par de videos de youtube no pueda solucionar.

Editor de Elementor

Como la idea de este tutorial no es enseñarles a usar Elementor (lo que sería excesivo), sino a corregir algunas cosas puntuales de necesitarlo, voy a explicar por arriba cómo funciona el editor, y pasaré a los casos concretos, usando como ejemplo la página de «nosotros».

Este es el editor de Elementor, el contenido a la derecha y una barra de herramientas a la izquierda, que pasará de barra de widgets, a configuración del widget columna o sección, dependiendo qué tengamos seleccionado.

El editor funciona por secciones a modo de fila, que contienen columnas (cuantas queramos o clonemos), dentro de las cuales arrastraremos nuestros widgets.

Si queremos ubicar widgets de forma vertical (por el motivo que sea), lo haremos creando nuevas secciones o ingresaremos (desde la derecha) una «sección interior», que es una sub-sección que contiene más columnas.

  1.  Controles de sección (aplica también a secciones interiores). El «+» nos permite agregar otra encima de ella, los 6 puntos moverla y la «x» borrarla.
  2. Controles de columna. Arrastrando podemos moverla paralelamente o a otra sección.
  3. Controles de widget. También para mover, y para editar en la barra lateral.
  4. El botón actualizar cambiará a rosa o verde cuando haya algo que guardar.
  5. Cuando estemos editando algún widget, sección o columna, este botón nos transformará la barra lateral en la barra de widgets, para elegir otro.
  6. A los widgets podremos buscarlos por nombre o haciendo scroll por la lista.

Editar widget

Posándonos sobre el widget que queremos editar, le daremos al botón derecho del ratón y nos abrirá un menú contextual con varias opciones.

Además de «editar widget» que es lo que nos interesa ahora mismo, tenemos copiar, pegar, borrar, y copiar estilo, que es muy útil cuando tenemos que armar varios widgets con las mismas características. Así, por ejemplo, en el caso de los integrantes de la comisión directiva, tenemos varios widgets de imagen, título y texto. Si quisiéramos cambiar el tamaño del texto en todos, lo que tenemos que hacer es configurar correctamente uno de ellos, copiar y pegar el estilo en el resto. De esta forma todos tendrán el mismo tamaño, pero distinto contenido (el original de cada uno).

Todos los menúes de widgets son similares en el sentido en que se tenemos tres partes. El «contenido», que será la imagen, texto o formulario (por decir algo), una pestaña de «estilo», en el definiremos la forma en que se mostrará ese contenido  (tipo de letra, ancho de la imagen, color del borde, etc.) y otra de «avanzada» relativa al widget como elemento dentro de la página o sección (posición, márgenes y bordes, color de fondo, css particular, condiciones de visibilidad, etc.).

No se me ocurre escenario en el que necesiten usar otra cosa que las primeras dos pestañas, así que a ellas me voy a limitar en los casos particulares.

Widget de imagen

 Pestaña Contenido:
  A. Para cambiar cualquier imagen del sitio, siempre que esté definida por Elementor, abriendo el editor le daremos click derecho a la que queremos cambiar y le damos a «Editar imagen». Esto nos abrirá el menú del widget en la izquierda.
  B. Dentro de la pestaña «contenido», posándonos sobre la foto, aparecerá la opción de «seleccionar imagen», lo que nos abrirá la biblioteca de wordpress. Seleccionamos o subimos la deseada, y actualizamos abajo en el botón rosa (como se ve en el cuarto cuadro de la captura).
  C. Salvo que sea una imagen desmesuradamente grande, conviene ponerla el resolución completa (en este sitio, por la traducción automática, dice «llena»). En todo caso, se puede poner actualizar y revisar la página en vivo para controlar el resultado final.
  D. Nos permite hacer varias cosas. Agregar enlace a la foto o activar la caja de luz.

Pestaña Estilo:
  E. Nos permite establecer alto, alto máximo, altura en pixeles, y la posición de la foto para el caso que que no entre toda la imagen en el cuadro.
  F. Cuando fijamos un número determinado en la altura de la imagen, nos aparecerá otra opción, que es el ajuste de la foto. Las opciones que nos da son contener (no importa el alto o ancho, la imagen siempre estará completa), cubrir (cubrirá la totalidad del espacio disponible con la foto, pero recortando en su altura) y rellenar (lo que hace es cubrir también todo el espacio disponible, pero estirando y deformando la imagen aunque sin cortarla). En cada situación particular tendrán que elegir el método correcto, pues no hay una fórmula que sirva para todos los casos (en general queda bien cubrir, pero cuando queremos que la imagen se muestre completa, no nos sirve).

Y estaríamos. Cambiada la imagen, configurada de ser necesario, y dándole a actualizar tendría que estar todo.

Una aclaración. La inmensa mayoría de las imágenes tienen que cambiarse con el editor de elementor, así las de la home, y las de contenido de las páginas individuales (nosotros, contacto, etc.). Pero las imágenes que están al lado de los títulos de esta últimas, son las imágenes destacadas de dichas páginas. Para editarlas, en el menú de administador, le damos a editar página,  y no editar con elementor.

Widget encabezado y texto

Tanto el encabezad como el editor de texto funcionan al clickear en el widget hasta que el cursor nos muestre que podemos escribir. Enter cambia de párrafo, y «shift+enter» hace el punto y aparte simple. Seleccionando el texto nos saldrá un menú contextual para la negrita, cursiva y subrayado y no mucho más. En ocasiones puede suceder que no podamos escribir. El ese caso, botón derecho, editar (texto o encabezado) y en la pestaña «contenido» podremos ingresar el texto que necesitemos. En el caso del encabezado será un simple campo, en el editor de texto será un editor clásico un poco más completo.

En estilo, tendremos la configuración de tipo de fuente, tamaño y color. Es exactamente el mismo en ambos, en lo relevante al menos.

Widget formulario

Habrán visto que los formularios no so de cf7, sino de elementor mismo. De querer modificar algo, deben abrir el editor en cada una de las páginas donde esté ubicado. Ahora mismo, home y socios para asociarse y en contacto. En los tres casos, recordar que es click en «editar con elementor», pues no son plantillas sino contenido y elementor ancho completo en la home.

  1. Como dije, nos vamos a la página en la que esté el formulario (en realidad en todas hay que hacer lo mismo, pero juro que sigue siendo menos molesto que cf7), y click en «editar con elementor».
  2. En el widget del formularios, botón derecho y «editar form».
  3. En contenido, nos vamos a limitar a «form fields», donde se encontrarán los campos. Agregamos, modificamos o eliminamos lo necesario.
  4. Email es la configuración del correo en sí que va a mandar el formularios. Ponemos a qué correo va a mandarse, desde qué dirección, los cam´pos que figurarán el el correo (ahora mismo manda todos), cc, bcc, y el reply que ahora está en field, o sea, el correo de aquel que completa el formulario. 

Search