Otra integración - ¿Cómo cambiar la posición del conmutador de idiomas?
En este artículo, verá los diferentes métodos para cambiar la posición del conmutador de idiomas de Weglot si está utilizando una integración diferente a la de WordPress o a la Shopify
1. Utilice el Switcher Editor
2. Los ganchos de enlace de idiomas
3. La opción del conmutador
4. Información adicional (Webflow y Squarespace)
1. Utilice el Switcher Editor
El switcher editor le permite mover el conmutador de idiomas en contexto en su sitio web arrastrando y soltando el botón en una vista previa de su sitio web
Para utilizarlo, puede seguir este artículo: ¿Cómo se utiliza el Switcher Editor?
⚠️ Tenga en cuenta que su sitio web debe estar en línea y ser accesible para poder utilizar el Switcher Editor
2. Los ganchos de enlace lingüístico
Tiene la posibilidad de crear elementos lingüísticos en su menú nativo, por ejemplo, y vincularlos con los ganchos de traducción según esta guía
Por ejemplo, usted crea un menú de elementos " Idiomas" con "Inglés" y "Francés" como submenús.
El inglés tendrá el enlace "#Weglot-es" y el francés tendrá el enlace "#Weglot-fr"
Tenga en cuenta que la letra mayúscula de la ' W' es importante
Si tiene problemas para encontrar el código corto correcto, puede escribir su idioma aquí y utilizar el código corto relacionado: https://weglot.com/documentation/available-languages/
3. La opción del conmutador
También puede integrar el conmutador manualmente a cualquier elemento presente en su sitio web añadiendo la opción "Switchers" a su código Weglot.initialize
Para ello, vaya a la página en la que se encuentra su fragmento de código de Weglot Debería ver el siguiente código (con su propia clave de API en sustitución de YOUR_API_KEY):
<!--Start Weglot Script-->
<script src=“//cdn.weglot.com/weglot.min.js”></script>
<script id=“has-script-tags”>Weglot.initialize({ api_key:“YOUR_API_KEY” })</script>
<!--End Weglot Script-->
,
switchers: [
{
button_style: {
full_name: true,
with_name: true,
is_dropdown: true,
with_flags: true,
flag_type: "circle"
},
location: {
target: ".header-nav", // You'll probably have to change it (see the step below in order to find the correct CSS selector)
sibling: null
}
}
]
});
</script>
Importante: no olvide la coma después de su clave API.
El trozo de código que es importante aquí es el ".header-nav", ya que determina la ubicación de su conmutador de idiomas. Esto necesita ser reemplazado con el selector CSS del elemento padre donde usted quiere que se coloque el conmutador de idiomas.
⚠️ Para encontrar el selector CSS (el "objetivo"):
- Haga clic con el botón derecho del ratón en el elemento en el que desea colocar el conmutador de idiomas.
- Ir a "Inspeccionar"
- Utilice la flecha situada en la parte superior izquierda de la consola.
- Haga clic con el botón derecho del ratón en el elemento de la consola.
- Copiar > Copy selector
- Pegue el campo de destino del código entre las comillas dobles
Así, por ejemplo, si quiere añadirlo a su menú:
<nav>
target: ".menú",
Puede encontrar más información sobre este método en nuestra documentación para desarrolladores
4. Información adicional (Webflow y Squarespace)
Si está utilizando Squarespace, el conmutador de idiomas aquí es gestionado por Squarespace directamente, por lo que recomendamos seguir su documentación
Si utiliza Webflow, no dude en probar esta guía, ya que le permitirá crear algunos conmutadores de idiomas de buen aspecto en su sitio web.