Personaliza el código de tu tema Extra

Procédure

Introducción

LWS le ofrece 3 plugins premium de Elegant Themes (Divi, Bloom y Monarch). Estos se actualizan regularmente. Una vez que sea cliente de LWS, tendrá acceso gratuito a estos plugins eligiendo la distribución 'Divi Builder' cuando instale el CMS Wordpress con nuestro Auto-Instalador.

Si usted tiene un paquete cPanel o ya ha instalado Wordpress con esta distribución, pero no tiene acceso a todos los temas o actualizaciones, por favor háganoslo saber dándonos los datos de acceso al área de administración de su sitio Wordpress para que un técnico pueda actualizar la licencia.

Por favor, tenga en cuenta: necesitará contratar una licencia de Elegant Themes para beneficiarse del soporte. LWS no ofrece soporte para estos productos.

Personalice el código de su tema Extra

Puedes utilizar el módulo Código para añadir HTML personalizado y/o shortcodes de WordPress a tus diseños. En el ejemplo anterior, hemos añadido un formulario de suscripción por correo electrónico utilizando un shortcode proporcionado por el plugin de suscripción por correo electrónico, Bloom.

Cómo añadir un módulo de código a su página

Antes de que puedas añadir un módulo de código a tu página, primero tendrás que cambiar al Constructor Divi. Una vez que el tema Extra haya sido instalado en tu sitio web, notarás un botón Usar Construc tor Divi arriba del editor de publicaciones cada vez que crees una nueva página. Haz clic en este botón para activar el Constructor Divi, dándote acceso a todos sus módulos. Luego haz clic en el botón Usar Constructor Visual para iniciar el constructor en modo visual. También puedes hacer clic en el botón Usar Constructor Visual mientras navegas por tu sitio web en la parte frontal si has iniciado sesión en tu panel de control de WordPress.

Una vez que haya entrado en el Constructor Visual, puede hacer clic en el botón gris + para añadir un nuevo módulo a su página. Los nuevos módulos sólo se pueden añadir dentro de las filas. Si está comenzando una nueva página, no olvide añadir primero una fila a su página.

Localice el módulo de código en la lista de módulos y haga clic en él para añadirlo a su página. La lista de módulos permite realizar búsquedas, lo que significa que también puedes escribir la palabra "código" y hacer clic en el botón Intro para encontrar y añadir automáticamente el módulo de código. Una vez añadido el módulo, aparecerá una lista de opciones para el módulo. Estas opciones están separadas en tres grupos principales: Contenido, Estilo y Avanzado.

Ejemplo de uso: Añadir una hoja de estilo externa para animar el contenido de una página individual

En este ejemplo, voy a añadir un script de enlace para importar Animate.css para añadir efectos de animación a los elementos de la página. Como el archivo Animate. css tiene mucho código, tiene sentido cargarlo sólo en la página que necesito.

Simplemente añada una sección normal y una fila de ancho completo (1 columna) y añada el módulo Código.

En el cuadro de texto de contenido, añada el fragmento de código.

Ahora todo lo que tienes que hacer es añadir algunas clases CSS para animar cualquier elemento de tu página de clases CSS a tu página. En este ejemplo, voy a hacer que el botón rebote cuando se cargue la página.

En la configuración del módulo del botón, en la pestaña Avanzado, introduce las dos clases "animado" y "rebote" en el cuadro de texto de clases CSS.

Ahora el botón rebota cuando se carga la página.

Conclusión

Gracias por seguir este tutorial.

Utiliza el módulo de código para colocar código personalizado en tu página, como HTML y JS, o introduce códigos cortos de terceros.

Hasta pronto para un nuevo tutorial ;)

Para saber más sobre el tema Extra y cómo utilizarlo

Crear un blog con el tema Extra

El módulo de texto Extra

> Consulta nuestra sección de ayuda del tema Extra