Pegue el código en un widget de texto normal y eliminará el formato, dejando un bloque ilegible. El Widget de cod sursă, un widget Pro en Complementos maestros para Elementor, soluciona eso: muestra su código con resaltado de sintaxis adecuado, números de línea, un tema de idioma y un botón de copia, para que los lectores puedan tomar un fragmento con un solo clic.
Está diseñado para tutoriales, documentación y blogs de desarrolladores, en cualquier lugar donde necesite mostrar PHP, JavaScript, CSS, HTML u otro idioma de forma limpia. Pegas el código, eliges un idioma y un tema y configuras el botón de copia, todo desde el panel Elementor. A continuación se muestra una ejecución de cada configuración.
Qué hace el widget de código fuente #
El widget toma un bloque de código y lo representa con resaltado de sintaxis codificado por colores según el idioma que elija. Puede numerar las líneas, aplicar uno de varios temas del editor y agregar un botón de copiar a la carpeta que confirma cuándo se ha copiado el código.
Tiene tres pestañas: Contenido para el código, idioma y botón de copia, Estilo para el contenedor y apariencia del botón, y Avanzado para las opciones habituales de Elementor.
Antes de empezar #
- WordPress con Elementor instalado y activo.
- Complementos maestros Pro instalado con una licencia activa, ya que el código fuente es un widget Pro. ¿Nuevo en el complemento? Ver el guía de instalación.
- El fragmento de código que desea mostrar.
Cómo agregar el widget de código fuente #
En el editor Elementor, abra el Elementos panel y búsqueda Código fuente, o desplácese hasta la sección Complementos maestros. Arrástrelo a su página. Se carga con un fragmento de muestra para que pueda ver el resaltado de inmediato.
Agrega tu código y elige un idioma #
Abre el Contenido pestaña. El Código fuente la sección contiene todo. Pegue su fragmento en el Código fuente box, luego configure el idioma y el tema encima.
- Cod: el lenguaje a resaltar, uno de 75, como PHP, JavaScript, CSS o HTML. Esto establece cómo se aplican los colores.
- Tema: la combinación de colores del bloque (que se cubre a continuación).
- Cod surs: el fragmento en sí, con una opción Escribir con IA si necesita un ejemplo rápido.
Elige un tema #
El Tema dropdown establece la combinación de colores del bloque de código. Incluye Default, Dark, Funky, Okaidia, Twilight, Coy, Solarized light, Tomorrow y una opción personalizada, para que puedas hacer coincidir el bloque con una página clara u oscura.
Cambiar el idioma y el tema juntos le da a cada fragmento el aspecto correcto. Aquí hay un fragmento de JavaScript sobre el tema Oscuro.
Configure el botón copiar #
El botón Copiar es lo que hace que el widget sea útil para tutoriales. Debajo del cuadro de código están los controles del mismo.
- Activați butonul de copiar: muestra u oculta el botón copiar a portapapeles.
- Habilitar número de línea: activa o desactiva los números de línea de la izquierda.
- Visibilidad del botón: muestra el botón Siempre o sólo al pasar el cursor.
- Posición del botón: colócalo en una esquina, como la superior derecha.
- Copiar el texto del botón y después del texto del botón copiado: la etiqueta antes y después de una copia, como Copiar código y Copiado.
Cuando un visitante hace clic en el botón, la etiqueta cambia a su texto Después de copiar para confirmar que la copia funcionó.
Estilo el bloque de código #
El Estilo la pestaña se divide en Contenedor y Botón, plus Patrones cuando el libre Patrones la extensión está encendida. El Contenedor la sección controla el marco del bloque de código.
- Altura: cubra la altura del bloque y deje que el código largo se desplace.
- Relleno y margen: espaciado dentro y alrededor de la cuadra.
- Tipo de borde y radio de borde: el contorno y las esquinas redondeadas.
- Sólo tema personalizado: fondo, tipografía, color del texto y color del número de línea. Personalizado muestra el código en un color, sin resaltado de palabras clave.
El Botón la sección estiliza el botón de copia: su tipografía, color de texto, color de fondo, relleno, borde y radio. No hay colores flotantes separados.
El resultado en la página #
Publique o obtenga una vista previa y los renderizadores de código resaltados, con números de línea y un botón de copia funcional. A continuación se muestra un fragmento de CSS sobre el tema Oscuro con el botón que muestra su estado Copiado.
Casos de uso comunes #
- Tutoriales y publicaciones instructivas los lectores de códigos compartidos pueden copiar.
- Documentación de complementos y temas con ejemplos de configuración o gancho.
- Blogs de desarrolladores mostrando fragmentos en PHP, JavaScript o CSS.
- Bases de conocimiento con comandos copiar y pegar.
- Páginas de aterrizaje demostrar una llamada API o código de inserción.
Consejos para trabajar con el widget de código fuente #
- Haga coincidir el idioma con el código. La configuración correcta del código es lo que hace que el resaltado sea preciso.
- Elija un tema que se ajuste a la página. Utilice un tema oscuro en las secciones oscuras y uno claro en las páginas blancas.
- Mantenga visible el botón copiar. Configure la visibilidad del botón en Siempre para tutoriales para que los lectores lo detecten.
- Limite la altura para fragmentos largos. Una altura fija con desplazamiento evita que un bloque largo se apodere de la página.
- Escriba etiquetas de botones claras. Copie el código y copied cuéntele a los lectores exactamente lo que sucedió.
Preguntas frecuentes #
¿cuál es el widget de código fuente en los complementos maestros?
Es un widget Master Addons Pro para Elementor que muestra código con resaltado de sintaxis, números de línea, un tema de idioma y un botón de copiar a portapapeles. Pegas un fragmento, eliges el idioma y el tema y configuras el botón de copia, todo desde el panel Elementor, sin necesidad de complementos ni códigos cortos.
¿Qué lenguajes de programación destaca?
Elige uno de los 75 idiomas en el menú desplegable Código, incluidos PHP, JavaScript, CSS, HTML, Python, SQL y YAML. La elección establece cómo se aplican los colores de sintaxis, por lo que el fragmento lee como lo haría en un editor de código.
¿Pueden los lectores copiar el código con un clic?
Sí. Active el botón Habilitar copia y aparecerá un botón de copiar a portapapeles en el bloque. Estableces su posición, cuando se muestra, y el texto antes y después de una copia, como Copiar código y Copiado, que confirma el clic trabajado.
¿Puedo mostrar números de línea en el bloque de código?
Sí. El interruptor Habilitar número de línea en la pestaña Contenido agrega números en el lado izquierdo del bloque. Facilitan la referencia a una línea específica en un tutorial y puedes desactivarla para una apariencia más limpia.
¿Puedo cambiar el tema de color del código?
Sí. El menú desplegable Tema ofrece Predeterminado, Oscuro, Funky, Okaidia, Crepúsculo, Tímido, Luz solarizada, Mañana y Personalizado. Elija uno que coincida con una página clara u oscura, o use Personalizado para configurar sus propios colores de fondo y texto en la pestaña Estilo. Personalizado muestra el código en un color, sin resaltar palabras clave.
Envolviendo #
El widget Código fuente convierte un fragmento sin formato en un bloque limpio y resaltado que los lectores pueden copiar con un solo clic. Pegue su código, configure el idioma y el tema, active los números de línea y el botón de copia, luego diseñe el contenedor para que coincida con su página. Para una comparación con el widget Code Highlight de Elementor Pro, consulte Widget de bloque de código Elementor página. Para conocer otra forma de presentar contenido estructurado, consulte Widget de tabla dinámica, navega por completo Widgets y extensiones de complementos maestros, y comprueba el página de precios por lo que incluye cada plan.
