¿Cómo personalizo el selector de idiomas?

Para adaptarse a su carta gráfica, es posible personalizar la apariencia del selector de idiomas. Para ello, wpLingua ofrece muchas opciones de diseño, así como la libertad de añadir su propio CSS personalizado.

1 - Personalizar el selector de idioma con opciones de diseño

Cuando vas a la wpLingua La pestaña Switcher, encuentra una pantalla con las diferentes opciones de personalización. El panel de diseño Switcher le ofrece 4 tipos de opciones:

1.1 - Tema del selector de idiomas

Esto le permite elegir los estilos de color y frontera del conmutador de idiomas.

Las opciones de color ofrecen 5 temas:

1. Luz: color blanco en el fondo del interruptor
2. Gris: gris fondo color
3. Oscuro: color negro fondo
4. Blur Black: transparente y borroso color de fondo con texto negro y fronteras
5. Blur White: transparente y borroso color de fondo con texto blanco y fronteras

Cada tema se desglosa por forma y estilo fronterizo:

6. Doble – Smooth: el interruptor será enmarcado por una doble frontera con esquinas redondeadas.
7. Doble – Plaza: doble frontera con esquinas cuadradas.
8. Simple – Smooth: frontera con esquinas redondeadas.
9. Simple – Plaza: frontera con esquinas cuadradas.

1.2 - Estilos del selector de idioma

Estas opciones le permiten definir el diseño de los idiomas en el conmutador...

1. Lista en línea: los idiomas están alineados entre sí.
2. Bloqueo: los idiomas se colocan en columnas, una debajo de la otra.
3. Desglose: los idiomas aparecen en un menú desplegable; esto se recomienda cuando su sitio ofrece varios idiomas.

1.3 – Nombre visual

Estas opciones le permiten elegir cómo debe escribir el nombre del idioma en el conmutador.

1. Nombre traducido: el nombre de los idiomas se traduce en el idioma original del sitio.
2. Nombre original: cada idioma conserva su nombre en su propio idioma (inglés, Français, 日本語, Português, Español, etc.)
3. ID de idioma: nombres de idiomas usan ID de idioma (FR, EN, DE, RU, etc.)
4. Sin pantalla: no hay texto, sólo se muestran banderas.

1.4 - Estilo de bandera

Estas opciones le permiten elegir la apariencia de las banderas en el conmutador.

1. Circle mostrará banderas redondas
2. Rectangular mostrará banderas rectangulares
3. Wave mostrará banderas onduladas
4. Sin pantalla no mostrará ninguna bandera, sólo se mostrará el nombre del idioma

2 - Personalizar las banderas del selector de idioma

Más allá de la forma de las banderas, también puede elegir la bandera para mostrar por idioma. Esto puede ser un deseo de usar una bandera que no sea bandera convencional. Por ejemplo, puede utilizar la bandera de los Estados Unidos o Australia para el idioma inglés, en lugar de la bandera de Gran Bretaña. O el de Canadá o Bélgica para el idioma francés, en lugar de la bandera de Francia... ¡Esto es posible!

2.1 - Elija su bandera preferida

1. Vaya a la pestaña wpLingua.
2. Haga clic en Editar Bandera.
3. Seleccione su bandera favorita y no olvide guardar sus cambios.
4. También es posible utilizar una bandera personalizada que importa en su biblioteca de medios.

2.2 - Utilizar banderas personalizadas

Para usar banderas personalizadas, primero debe importarlos en su biblioteca de medios, como sigue:

1. Ir a los medios de comunicación Ficha de la biblioteca y haga clic en Agregar Nuevo Archivo de medios.
2. Importe su bandera y haga clic en ella para abrir los medios. Ahora, puede hacer clic en Copiar URL para cortar.
3. Vaya a wpLingua ≤ wpLingua pestaña para pegar la URL de la bandera personalizada. Guardar cambios.
4. Ahora su interruptor muestra la nueva bandera.

Repita por cada idioma si es necesario.

3 - Personalizar el selector de idioma con CSS

Si desea que el diseño del conmutador de idiomas coincida con su carta gráfica, puede personalizarlo con CSS personalizado. Por supuesto, usted necesitará tener algún conocimiento de CSS, aunque abajo le daremos algunos consejos, ideal si usted es nuevo en CSS.

3.1 - Inspección de la consola del navegador

La consola del navegador es tu mejor amigo. Le ayudará a probar el CSS personalizado y ver su representación visual en vivo. He aquí cómo hacerlo:

1. Visite el extremo frontal de su sitio desde su navegador y haga clic con el botón derecho, y luego elija la opción Inspect. Aquí hay un ejemplo con Firefox, pero otros navegadores funcionan de la misma manera.
2. Haga clic en el icono de flecha. Esta herramienta le permite seleccionar fácilmente el artículo para inspeccionar. Por cierto, utilízalo para inspeccionar el conmutador de idioma (haga clic en el conmutador de idioma después de hacer clic en la herramienta Arrow).
3. A la izquierda de la consola es el código HTML, puede navegar para seleccionar otras etiquetas HTML si es necesario.
4. A la derecha de la consola es el código CSS. Incluso si no eres un capricho CSS, puedes cambiar fácilmente la apariencia en tiempo real. Por ejemplo, cambie el código de color hexadecimal de colores fronterizos, textos o fondos... No te preocupes, los cambios no se tienen en cuenta, es sólo para probar la apariencia, cuando recarga la página, el sitio vuelve a su estado inicial. Aproveche la oportunidad para modificar el conmutador según sus preferencias.
5. En tiempo real, visualiza la nueva apariencia del cambiador de idioma según sus modificaciones CSS.

3.2 - Añadir el código CSS a los parámetros de wpLingua

3.3 - Algunos extractos útiles de CSS

Para ayudarte, pensamos que estos pocos fragmentos de código CSS podrían ayudar:

En primer lugar, note que la clase CSS .switcher-content permite actuar en todo el bloque del conmutador de idiomas mientras que la clase .wplng-langague te permite actuar en los propios idiomas.

---

Por este ejemplo, el conmutador se definió con el tema Luz – Doble – Plaza. Para cambiar los colores de fondo y frontera del interruptor, aquí está el CSS:

.wplng-switcher.theme-light-double-square .switcher-content {
  background-color: #5e33d9;
  border: 1px solid #5e33d9;
}

Para cambiar el fondo y los colores fronterizos de los idiomas, aquí está el CSS:

.wplng-switcher.theme-light-double-square .switcher-content .wplng-language {
  border: 1px solid #5e33d9;
  color: #5e33d9;
}

---

Pero si hubieras elegido el tema Light – Simple – Smooth, por ejemplo, notarás que una de las clases CSS cambia (.theme-light-simple-smooth), así que tenga en cuenta al hacer sus modificaciones (de ahí la importancia de utilizar la consola del navegador para buscar las clases correctas de CSS). Aquí está el código que debe utilizar:

.wplng-switcher.theme-light-simple-smooth .switcher-content {
  background-color: #5e33d9;
  border: 1px solid #5e33d9;
}

.wplng-switcher.theme-light-simple-smooth .switcher-content .wplng-language {
  background-color: #ffffff;
  border: 1px solid #5e33d9;
  color: #5e33d9;
}

De lo contrario, para evitar apuntar a todas las clases de CSS, puede simplificar el código de esta manera sin olvidar añadir !important para ciertas reglas. El resultado será el mismo:

.switcher-content {
  background-color: #5e33d9 !important;
  border: 1px solid #5e33d9 !important;
}

.wplng-language {
  background-color: #ffffff !important;
  border: 1px solid #5e33d9 !important;
  color: #5e33d9 !important;
}

---

De esta manera, usted puede cambiar todo lo que el código CSS permite: añadir sombras, transiciones, estados en ratónover, etc.

/* add a shadow to the switcher */

.switcher-content {
  box-shadow: 5px 5px 0px 0px #5e33d9;
  transition: 500ms ease;
}

/* obtain a rounded switcher */

.switcher-content {
  border-radius: 100px;
}

---

Y para terminar con el código CSS personalizado, aquí está el que se utiliza en nuestro sitio:

.switcher-content {
  box-shadow: 8px 8px 0px 0px #bcfa99;
  transition: 500ms ease;
	
}

.switcher-content:hover {
  box-shadow: 10px 10px 0px 0px #bcfa99;
}

.switcher-content .wplng-languages .wplng-language:hover .language-name {
  color: #bcfa99;
}

4 - Elija la ubicación del selector de idioma

Ahora que su conmutador de idiomas está completamente personalizado, es el momento de definir su ubicación en su sitio!

4.1 - Visualización automática del selector de idioma

Vaya a la wpLingua Tapa de inserción de conmutador para elegir una ubicación predefinida.

4.2 - Insertar manualmente el selector de idioma mediante un shortcode

4.3 - Insertar el selector de idioma en el menú de navegación de un tema clásico

4.4 - Insertar el selector de idioma en el menú de navegación de un tema basado en bloques

5 - ¡Personalice completamente el selector de idioma con wpLingua!

Esperamos que esta guía le haya proporcionado una comprensión clara y completa de la personalización del conmutador de idiomas en wpLingua.

Recuerde, las opciones de flexibilidad y personalización ofrecidas por wpLingua están diseñadas para asegurar que su sitio web no sólo se comunica eficazmente en múltiples idiomas, sino que también mantiene una estética cohesiva y atractiva.

Si tiene más preguntas o necesita asistencia adicional, nuestro equipo de apoyo está siempre aquí para ayudar. Sus comentarios y percepciones son inestimables para nosotros mientras nos esforzamos continuamente para mejorar wpLingua.