¿Te cuesta mostrar bloques de código limpios y legibles en tus páginas Elementor?
No eres el único. Si necesitas mostrar tutoriales HTML, incrustar código JavaScript o mostrar ejemplos CSS, las opciones predeterminadas de Elementor a menudo se quedan cortas.
Para añadir código a una página en Elementor, instale Element Pack y active el widget de código fuente. Configure y seleccione el idioma del código . A continuación, personaliza la pestaña de contenido. Una vez hecho esto, publica la página.
En esta guía tutorial detallada, le mostraremos un proceso paso a paso sobre cómo puede agregar código a la página en elementor.
Así que, ¡empecemos!
Cómo añadir código a una página en Elementor (paso a paso)
Antes de sumergirnos en la solución, examinemos por qué el enfoque estándar de Elementor para añadir código HTML en una página Elementor no satisface las necesidades modernas de desarrollo web:
- Limitaciones de los widgets HTML
- Sin estilo de código incorporado
- Problemas de soporte multilingüe
- Conflictos de trazado y diseño
Así pues, la solución más eficaz para utilizar código personalizado en Elementor consiste en aprovechar un widget especializado diseñado específicamente para la visualización de código. El widget Source Code de Element Pack Pro aborda todas las limitaciones de las opciones predeterminadas de Elementor a la vez que sigue las mejores prácticas de desarrollo de WordPress.
Así pues, vamos a dar los pasos necesarios para añadir código a tus páginas Elementor.
Paso 1: Instalar y activar Element Pack Pro
Antes de poder utilizar el widget Código fuente, debe instalar y activar Element Pack Pro:
- Obtener Element Pack Pro de su sitio web oficial y descargue el archivo zip del plugin
- Instalar el plugin:
- Vaya a su panel de WordPress
- Vaya a Plugins > Añadir nuevo
- Haga clic en Subir Plugin botón
- Seleccione el archivo zip Element Pack Pro que ha descargado
- Haga clic en Instalar ahora
- Activar el plugin:
- Tras la instalación, pulse Activar Plugin
- Introduzca su clave de licencia cuando se le solicite (se encuentra en su correo electrónico de confirmación de compra)
- Haga clic en Activar licencia para desbloquear todas las funciones premium
Una vez activado, tendrá acceso a Más de 80 widgets premium incluido el potente widget de código fuente.
Paso 2: Insertar el widget de código fuente
Abra su Elementor Editor y vaya a la página en la que desea añadir el fragmento de código.
- En la barra de búsqueda de widgets, escriba "Código fuente" para localizar el widget
- Busque el logotipo Element Pack Pro en la esquina superior derecha para asegurarse de que está seleccionando el widget correcto. La amplia colección de Element Pack Pro
- Arrastrar y soltar el widget de código fuente en la ubicación deseada de la página
El widget aparecerá con el estilo predeterminado, listo para su personalización.
Este método le asegura que está utilizando un widget que sigue Directrices para el desarrollo de plugins de WordPress para un rendimiento y una seguridad óptimos.
Paso 3: Configurar la pestaña Contenido
Navegue hasta el Contenido para configurar la visualización del código:
3. 1: Seleccione su estilo predefinido
Elija entre temas diseñados por profesionales que reflejan los entornos de desarrollo más populares:
- Por defecto: Aspecto limpio y minimalista adecuado para la documentación
- Oscuro: Perfecto para sitios web modernos y de temática oscura (preferidos por 90% de los desarrolladores según la encuesta de Stack Overflow)
- Coy: Fondo sutil y claro con reflejos suaves
- Funky: Colores vibrantes para proyectos creativos y tutoriales
- Mañana por la noche: Tema oscuro popular entre los desarrolladores
3.2: Activar el botón Copiar
Active esta función para facilitar a los visitantes la copia de código. Esto mejora significativamente la experiencia del usuario, especialmente para el contenido del tutorial y es esencial para la aplicación eficaz de fragmentos de código Elementor.
3.3: Elija su lenguaje de programación
Seleccione el idioma adecuado para resaltar correctamente la sintaxis:
- Ejemplos de marcado HTML para estructuras web
- CSS para demostraciones de estilo
- JavaScript para ejemplos de código interactivo (utilizado por 63.61% de desarrolladores según la encuesta de Stack Overflow de 2024)
- Tutoriales de PHP para secuencias de comandos del lado del servidor
- Ejemplos de Python para la ciencia de datos y la automatización
- C++ para contenidos de programación de sistemas
- Y muchas más opciones soportadas por el Documentación Element Pack Pro
3.4: Introduzca su código fuente
Pegue su código en el campo designado. El widget aplica automáticamente el formato adecuado en función del idioma seleccionado, siguiendo los siguientes pasos Normas de codificación PHP de WordPress por coherencia.
3.5: Resaltar líneas específicas (opcional)
Utiliza la función de resaltado de líneas para resaltar secciones importantes del código. Funciona como un resaltador físico, llamando la atención sobre las líneas clave del bloque de código.
Paso 4: Personalizar la pestaña Estilo
Ajuste la apariencia de su bloque de código mediante la función Estilo ficha:
Elemento Ajustes Configuración
- Altura: Ajuste la altura del bloque de código para acomodar su contenido manteniendo la legibilidad.
- Propiedades fronterizas: Elija el tipo, la anchura y el color del borde para que coincida con el diseño de su sitio.
- Radio del borde: Crea esquinas redondeadas para un aspecto moderno
- Acolchado: Ajuste el espaciado interno para una legibilidad óptima siguiente Directrices de espaciado de WordPress
- Margen: Controlar el espaciado externo con respecto a otros elementos de la página
- Tipografía: Personalice la familia de fuentes, el tamaño, el grosor y la altura de línea para obtener la máxima legibilidad.
Copiar estilo de botón - Estado normal
- Color: Definir el color predeterminado del texto de los botones
- Fondo: Elija colores sólidos o degradados para el fondo del botón
- Frontera: Configurar el aspecto y el color del borde
- Radio del borde: Ajustar el redondeo de las esquinas de los botones
- Relleno y margen: Ajuste de la separación entre botones
- Caja Sombra: Añade profundidad con efectos de sombra
- Tipografía: Personalizar las propiedades del texto de los botones
Copiar estilo de botón - Estado Hover
- Color Hover: Definir cambios de color del texto al pasar el ratón
- Fondo Hover: Establecer transiciones de color de fondo
- Borde flotante: Modificar la apariencia de los bordes durante el hover
- Caja Sombra: Crea efectos de sombra dinámicos para la interacción
Paso 5: Vista previa y optimización
Tras la configuración, previsualice su bloque de código para garantizar una presentación óptima en los distintos dispositivos. El widget de código fuente gestiona automáticamente el diseño adaptable, pero es posible que desee ajustar el espaciado o el tamaño de la fuente para la visualización móvil.
Consejos avanzados para fragmentos de código Elementor
Optimizar el rendimiento de la página
Cuando añada varios bloques de código a una misma página, tenga en cuenta las estrategias de optimización del rendimiento recomendadas por los expertos en rendimiento de WordPress:
- Utilizar la minificación de código en fragmentos grandes para reducir el tiempo de carga de la página.
- Supervise Core Web Vitals y aumentar la velocidad de carga de las páginas mantener la clasificación en los motores de búsqueda
Mejores prácticas de SEO para el contenido de códigos
Los contenidos técnicos se benefician de un formato y una estructura adecuados de acuerdo con Directrices SEO de Google:
- Incluya palabras clave relevantes de forma natural en sus explicaciones de código
- Utilice una estructura de encabezamientos adecuada alrededor de los bloques de código siguientes Normas de documentación de WordPress
- Aplicar el marcado de datos estructurados al contenido de los tutoriales mediante Esquema.org
Dónde colocar el código personalizado en Elementor
La colocación estratégica de sus bloques de código mejora tanto la experiencia del usuario como el rendimiento SEO:
- Secciones didácticas: Coloque los ejemplos de código inmediatamente después del texto explicativo
- Páginas de documentación: Utilice bloques de código para ilustrar el uso de la API o ejemplos de configuración.
Para ver ejemplos completos de aplicación, visite Páginas de demostración de Element Pack Pro para ver el widget de código fuente en acción.
Integración con el flujo de trabajo de desarrollo de WordPress
Añadir código de seguimiento en Elementor
Para fines analíticos y de marketing, puede utilizar el widget de código fuente para mostrar ejemplos de implementación de seguimiento, lo que ayudará a los usuarios a comprender la colocación correcta del código. Las soluciones de seguimiento más populares son:
- Google Analytics 4 aplicación
- Píxel de Facebook integración
- Códigos de seguimiento de eventos personalizados
- Herramientas de mapas de calor como Hotjar o Huevo loco
Elementor Añadir código a los escenarios de cabecera
Aunque el widget de código fuente muestra el código visualmente, es posible que también necesite añadir código funcional a la cabecera de su sitio. Para ello, combine las capacidades de visualización del widget con:
- Funciones avanzadas de Element Pack Pro para una gestión integral del código
- Ganchos y filtros de WordPress para personalizaciones a nivel de tema mediante la función API de plugins de WordPress
- Plugins de cabecera/pie de página especializados para la inyección de código en todo el sitio
Integración personalizada de CSS y JavaScript
El widget se integra perfectamente con las funciones CSS y JavaScript personalizadas de Elementor, lo que le permite:
- Muestra ejemplos de CSS personalizados mientras los aplicas a tu diseño
- Muestre la funcionalidad de JavaScript con ejemplos de código
- Demostración de técnicas de diseño adaptativo con ejemplos reales
Resolución de problemas comunes
Problemas de visualización de códigos
Si su código no se muestra correctamente:
- Verifique que la selección de idioma coincide con su tipo de código
- Compruebe si hay caracteres especiales que deban escaparse
- Garantizar una sangría adecuada para las estructuras de código anidadas.
- Pruebe la compatibilidad en distintos navegadores con ¿Puedo utilizar para soporte de funciones
Capacidad de respuesta móvil
Asegúrese de que los bloques de código funcionan en todos los dispositivos:
- Pruebas en dispositivos móviles reales, no sólo en herramientas de navegación
- Ajuste el tamaño de las fuentes para facilitar la lectura en móviles: la fuente 16-20px
- Considerar el desplazamiento horizontal para bloques de código anchos
- Botones de copia táctiles
Preguntas frecuentes
¿Puedo utilizar este widget en la versión gratuita de Element Pack?
El widget Código fuente está disponible exclusivamente en Element Pack Pro. La inversión proporciona acceso a más de 80 widgets premium y opciones avanzadas de personalización que amplían significativamente las capacidades de Elementor para el Más de 18 millones de sitios web utilizando Elementor de forma global.
¿Es seguro este widget para añadir JavaScript o PHP?
El widget de código fuente está diseñado únicamente para su visualización y no ejecuta código. Esto hace que sea completamente seguro para mostrar cualquier tipo de código sin problemas de seguridad, abordando las vulnerabilidades que afectan a Más de 43.000 sitios WordPress al día según las estadísticas de Wordfence.
¿Puedo añadir varios bloques de código en una página?
Absolutamente. Puede añadir un número ilimitado de widgets de código fuente a una sola página, cada uno con su propio estilo y configuración de idioma. Esta flexibilidad lo hace perfecto para tutoriales y documentación exhaustivos.
¿Afectará esto a la velocidad de mi página o al SEO?
El widget de código fuente está optimizado para mejorar el rendimiento y sigue las mejores prácticas de SEO. Si se utiliza correctamente, puede mejorar la visibilidad de su contenido en los motores de búsqueda, ya que proporciona ejemplos de código legibles y bien estructurados que mejoran la participación del usuario y satisfacen las necesidades de los usuarios. Principales datos vitales de la web de Google requisitos.
¿Puedo exportar o hacer una copia de seguridad de mis bloques de código?
Sí, todos los widgets de código fuente se almacenan en la base de datos de WordPress y pueden exportarse utilizando las herramientas de exportación estándar de WordPress o Sistema de plantillas de Element Pack Pro. Esto garantiza que sus ejemplos de código se conserven durante las migraciones o copias de seguridad del sitio.
Conclusión
Aprender a añadir código a una página en Elementor requiere las herramientas y el enfoque adecuados. Mientras que las opciones por defecto de Elementor proporcionan una funcionalidad básica, la visualización profesional de código exige soluciones especializadas que puedan manejar la complejidad del desarrollo web moderno.
El widget de código fuente de Element Pack Pro transforma tus capacidades de presentación de código y mejora las funciones de interacción con el usuario.
Si quiere probarlo antes de comprarlo, consulte el demostraciones en directo para ver el widget de código fuente en acción en diferentes casos de uso y escenarios de diseño.
