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

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

1. Utilice el Switcher Editor

El « Switcher Editor » le permite mover el selector de idioma directamente sobre una vista previa de su sitio web, arrastrándolo y soltándolo en la posición deseada.

Para utilizarlo, siga nuestra guía específica: «¿Cómo se utiliza el Switcher Editor?»

⚠️ La herramienta « Switcher Editor » solo se puede utilizar en sitios web activos y de acceso público. No se puede utilizar en sitios web protegidos con contraseña ni en sitios web locales. Además, debe introducir la URL de su sitio web en su cuenta de Weglot Dashboard > Configuración > General.

2. Utilice elementos de enlace lingüístico

Puede crear sus propios elementos de idioma en el menú nativo de su sitio web y vincularlos a Weglot mediante los enlaces de idioma.

Por ejemplo, puede crear una opción de menú llamada «Idiomas» con «Inglés» y «Francés» como subopciones y utilizar los siguientes enlaces:

• Inglés: #Weglot-en
• Francés: #Weglot-fr

La W mayúscula en Weglot  es obligatorio.

El valor después de #Weglot-  corresponde al código de idioma. Por ejemplo, en  es inglés y fr  es francés.

Puede consultar el código correspondiente a cada idioma disponible en nuestra lista de idiomas disponibles.

Para obtener más información sobre los «hooks» de enlaces de idioma, consulte nuestra documentación para desarrolladores: «Hooks de enlaces de idioma».

3. Utilice la opción «weglot_here»

Puede colocar el selector de idiomas de Weglot en un lugar concreto añadiendo el siguiente elemento HTML a su código fuente, en el lugar donde desee que aparezca el selector:

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

Weglot mostrará automáticamente el selector de idioma dentro de este elemento.

4. Utilice la opción de cambio de canal

También puede colocar un selector de idioma dentro de un elemento concreto de su sitio web utilizando el switchers  opción en su Weglot.initialize()  configuración.

Su integración con Weglot debería incluir un script similar a este:

<script type="text/javascript" src="https://cdn.weglot.com/weglot.min.js"></script>

<script>
  Weglot.initialize({
    api_key: "your_api_key",
  });
</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
        }
    }
]
});

Sustituya "your_api_key"  con su clave API de Weglot.

La configuración importante para la posición del selector de idioma es:

destino: «.header-nav»

El target  El valor debe ser el selector CSS del elemento en el que desee colocar el selector de idioma.

⚠️ Para encontrar el selector CSS (el "objetivo"):

• Haga clic con el botón derecho del ratón en el elemento en el que desee 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 > Selector de copia
• 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 sobre Squarespace y Webflow

Squarespace

Si utiliza la integración nativa de Weglot en Squarespace, el selector de idiomas se gestiona directamente desde Squarespace.

Puede personalizarlo desde la configuración de idioma de Squarespace. Para obtener más información, consulte la documentación de Squarespace: «Creación de un sitio web multilingüe con Weglot».

Tenga en cuenta que la integración nativa de Weglot con Squarespace está disponible actualmente para la versión 7.1 de Squarespace.

Webflow

Si utiliza Webflow, también puede utilizar el kit de interfaz de usuario Weglot de Finsweet para crear un selector de idioma personalizado.