Resaltado del complemento Divi - Códigos cortos de CA

¿Alguna vez ha necesitado colocar un módulo Divi, o incluso un diseño completo, dentro de otro módulo Divi? Imagine las posibilidades de diseño de colocar mapas, formularios, contadores, anuncios publicitarios, testimonios o cualquier otro módulo dentro de cualquier otro módulo con un editor de texto. ¿Qué pasaría si pudieras colocar esos módulos dentro de tu barra lateral? Un complemento de terceros llamado AC Shortcodes hace exactamente eso.

AC Shortcodes es un complemento de terceros de Ayanize que convierte los módulos Divi en códigos cortos para que pueda colocarlos dentro de otro módulo. Cree un código corto con un solo módulo o un diseño y luego pegue ese código corto dentro del editor de texto de un módulo. Funciona con Divi, Extra y cualquier tema que utilice el complemento Divi Builder.

En esta descripción general del complemento, probaremos AC Shortcodes y veremos algunas de las cosas que se pueden hacer con él y veremos lo fácil que es de usar. Las imágenes de mis páginas de muestra fueron tomadas de Unsplash.com.

Instalación del complemento de códigos cortos de CA

Sube y activa el complemento como de costumbre. Una vez que el complemento se haya activado, verá un mensaje para volver a guardar sus enlaces permanentes. Esto asegurará que el complemento funcione correctamente. Haga clic en Actualizar enlaces permanentes dentro del mensaje. Esto lo llevará a la configuración de enlaces permanentes. Haga clic en Guardar cambios en la parte inferior de la página y luego haga clic en HECHO dentro del mensaje. El mensaje desaparecerá y ahora puede usar códigos cortos de CA.

Creando un shortcode

Se agrega un nuevo elemento de menú al menú Divi en el tablero (vaya a Tablero, Divi, Códigos cortos AC). Al hacer clic aquí, se abrirá el menú de códigos cortos de CA donde puede crear códigos cortos. Los códigos abreviados que haya creado se mostrarán aquí en la lista. Para crear un nuevo código corto, haga clic en Crear un código corto.

Esto lo lleva a un editor donde puede elegir construir con Divi Builder. El código abreviado se proporciona a la derecha. Puede copiar y pegar esto en el contenido de otro módulo. Simplemente cree un diseño con Divi Builder y haga clic en Crear para guardarlo.

Una vez que haya creado sus códigos cortos, los verá en la lista en el menú del tablero. Aquí puede editar, eliminar y copiar el código abreviado para pegarlo en su contenido. Los códigos cortos se pueden usar dentro de los módulos Divi Builder, dentro del editor estándar de WordPress (cuando se usa Divi o Extra) o dentro de los widgets de texto (requiere Divi o Extra).

Ejemplos de códigos cortos de CA

Para mis ejemplos, creé una página de blog Divi estándar con un encabezado de ancho completo. Creé un fondo degradado para la sección.

Encabezado de ancho completo

Esta es la página de muestra. Quiero reemplazar el encabezado estándar con un nuevo encabezado usando módulos que normalmente no se pueden colocar dentro del área del encabezado.

Este es el diseño del schortcode. Incluye los módulos Mapa, Galería y Llamada a la acción, y un menú de ancho completo en una sección de ancho completo. Hice que el fondo sea transparente para que se muestre el estilo de la página y le di al módulo de menú de ancho completo un fondo degradado para que se muestre sobre el estilo del fondo.

La página en sí incluye un módulo de texto donde coloqué el código corto y un módulo de blog. Estas secciones proporcionarán el estilo de fondo.

Aquí hay un vistazo al nuevo encabezado. Es fácil imaginar las posibilidades de lo que se puede hacer con este encabezado.

Pestañas

El módulo de pestañas es uno de los más fáciles de ver cómo funcionan los códigos cortos. Normalmente, el módulo Pestañas le permite colocar cualquier tipo de contenido en una pestaña que podría colocar dentro de un editor. Esto incluye texto y medios como imágenes, videos, etc. ¿Qué pasa si desea colocar mapas, formularios de contacto, CTA o cualquier otro módulo Divi? ¡Vamos a hacerlo!

Creé varios códigos cortos de módulos y pegué cada uno en una pestaña separada. Algunos de los módulos incluyen su propio estilo de fondo.

Los módulos se muestran con las mismas características de diseño que creé para ellos. En este ejemplo, he usado un fondo degradado para la sección.

Esta pestaña utiliza un formulario de contacto. No le di ningún estilo especial.

Esta pestaña muestra una publicación de blog. He usado el fondo degradado para la página, pero ninguno para el código corto de la publicación del blog. Cada una de las pestañas tiene su propio color de fondo y estilos individuales porque se crean de forma independiente.

Incluso puede crear diseños completos para mostrarlos como códigos cortos.

Este diseño utiliza una sección especializada con una imagen, blog, portafolio y formulario de contacto. Lo coloqué dentro de la pestaña Diseño.

Aquí hay un vistazo al módulo de la tienda dentro de una pestaña. El uso de módulos dentro de pestañas abriría algunas oportunidades para mostrar información, formularios, CTA y mucho más.

Barras laterales y widgets

También puede usar los códigos cortos en sus barras laterales pegándolos dentro de un widget de texto.

Aquí el mapa se muestra dentro de la barra lateral izquierda. Puede ver que todavía tiene su estilo de fondo. Esto es fácil de cambiar.

Para actualizar el código abreviado, simplemente cárguelo desde la lista de códigos abreviados de CA y realice los cambios. Los cambios se reflejarán en todos los lugares donde se use shortcode. En este ejemplo, eliminé el fondo que había agregado a la sección en el código corto del mapa. He configurado el fondo para que sea transparente. El mapa ahora se muestra sin fondo.

Aquí agregué varios widgets más con módulos en la barra lateral.

Páginas de productos de WooCommerce

Uno de mis usos favoritos para los códigos cortos de CA es colocarlos dentro de las páginas de productos de WooCommerce.

He colocado un código corto para un control deslizante con dos diapositivas en el área de descripción del producto. Cada diapositiva usa su propia configuración.

Para este ejemplo, coloqué un diseño con un módulo de texto y un módulo de galería dentro de la breve descripción del producto. Y sí, estoy jugando con los degradados de fondo de nuevo.

Uso de códigos cortos de CA con extra

Aquí hay un vistazo al módulo de pestañas en Extra. Utiliza la barra lateral con códigos cortos en varios widgets de texto para mostrar el mapa y los módulos del formulario de contacto. Todo funcionó como se esperaba.

Uso de códigos cortos de CA con el complemento Divi Builder

Aquí está el módulo de mapa que usa el complemento Divi Builder con el tema Twenty Seventeen. Este es en realidad un código corto de pestaña que tiene un código corto de mapa dentro. Un shortcode dentro de un shortcode. ¿Cómo podría resistirme?

Los códigos cortos para barras laterales solo funcionan cuando se usa el tema Divi o Extra. Los códigos cortos también deben colocarse dentro de un módulo Divi Builder a menos que se utilice Divi o Extra. Con el complemento Divi Builder, el menú de códigos cortos de CA aparecerá en Apariencia en el tablero.

Documentación

La documentación se proporciona dentro del menú AC Shortcodes. En la esquina superior derecha de la pantalla, verá la palabra Ayuda. Haga clic aquí para abrir la pantalla de ayuda. Esto revela cuatro pestañas a la izquierda:

• Visión general
• Documentación
• Compatibilidad
• Uso de la plantilla

A la derecha hay enlaces para ver un video y una publicación de blog.

Licencia

AC Shortcodes incluye una licencia ilimitada. Puede instalarlo en tantos sitios web como desee para usted y sus clientes. Incluye actualizaciones de por vida y 6 meses de soporte.

Para comprar: este complemento de terceros está disponible en muchos de los mercados de Divi, así como en el sitio web del proveedor: Ayanize

Pensamientos finales

La capacidad de usar módulos Divi como códigos cortos dentro de otros módulos y barras laterales abre un nuevo mundo de posibilidades de diseño. Los ejemplos que he creado en este complemento destacado son solo una muestra de la superficie. El complemento en sí es fácil de usar, solo requiere habilidades de Divi Builder y la capacidad de copiar y pegar un código corto. Si está interesado en ampliar la utilidad de los módulos Divi, vale la pena echarle un vistazo a AC Shortcodes.

¡Nos gustaría saber de ti! ¿Has probado los códigos cortos de CA? Cuéntanos tu experiencia en los comentarios.

Imagen destacada a través de Photoroyalty / shutterstock.com