Otra integración - ¿Cómo cambiar la posición del conmutador de idiomas?

En este artículo, aprenderá a cambiar la posición del conmutador de idiomas de Weglot si utiliza una integración diferente a WordPress y Shopify.

1. Utilice el Switcher Editor

El editor del conmutador 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 utilizar el editor de conmutadores?

⚠️ 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, cree un menú de elementos"Idiomas" con "Inglés" y "Francés" como submenús.

Inglés tendrá el enlace #Weglot-es y el francés tendrá el enlace #Weglot-fr

Tenga en cuenta que la mayúscula en la ' W' es importante

Si tiene algún problema para encontrar el shortcode correcto, puede escribir aquí su idioma y utilizar el shortcode relacionado: https://weglot.com/documentation/available-languages/

3. La opción Weglot_here

Puede pegar el código siguiente en su código fuente en el lugar en el que desee que aparezca el conmutador de idiomas:

<div id="weglot_here"></div>

4. La opción del conmutador

También puede integrar el conmutador manualmente en cualquier elemento presente en su sitio web añadiendo el icono conmutadores opción a su Weglot.initialize código

Para ello, vaya a la página donde se encuentra su fragmento de código Weglot Debería ver el siguiente código (con su propia clave 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 éste determina la ubicación de su conmutador de idiomas. Debe sustituirlo por el selector CSS del elemento padre en el que desea colocar 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 sobre el elemento en 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 class="menu">

objetivo: "nav.menu",

Puede encontrar más información sobre este método en nuestra documentación para desarrolladores

5. Información adicional (Webflow y Squarespace)

Si utiliza Squarespace, el conmutador de idiomas aquí lo gestiona directamente Squarespace, por lo que le recomendamos que siga su documentación.

Si utiliza Webflow, no dude en probar esta guía. Le permitirá crear conmutadores de idioma de aspecto agradable para su sitio web.