¿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, notas publicitarias, testimonios o cualquier otro módulo dentro de cualquier otro módulo con un editor de texto. ¿Qué pasaría si pudiera colocar esos módulos dentro de su 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 shortcode con un solo módulo o un diseño y luego pegue ese shortcode dentro del editor de texto de un módulo. Funciona con Divi, Extra y cualquier tema que use el complemento Divi Builder.
En esta descripción general del complemento, probaremos los códigos cortos de AC y veremos algunas de las cosas que se pueden hacer con él y veremos lo fácil que es usarlo. Las imágenes de mis páginas de muestra fueron tomadas de Unsplash.com.
Cargue y active el complemento de forma normal. 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 LISTO dentro del mensaje. El mensaje desaparecerá y ahora puede usar AC Shortcodes.
Crear un código corto
Se agrega un nuevo elemento de menú al menú Divi en el tablero (vaya a Tablero, Divi, AC Shortcodes). Al hacer clic en esto, se abrirá el menú AC Shortcodes donde puede crear códigos cortos. Cualquier código abreviado que haya creado se mostrará aquí en la lista. Para crear un nuevo código abreviado, haga clic en Crear un código abreviado.
Esto lo lleva a un editor donde puede elegir construir con Divi Builder. El shortcode se proporciona a la derecha. Puede copiar y pegar esto en el contenido de otro módulo. Simplemente cree un diseño usando Divi Builder y haga clic en Crear para guardarlo.
Una vez que haya creado sus códigos abreviados, 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 abreviados 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 módulos de mapa, galería y llamada a la acción, y un menú de ancho completo en una sección de ancho completo. He hecho que el fondo sea transparente para que se muestre el estilo en la página misma, y le he dado al módulo 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 abreviado 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 Tabs es uno de los más fáciles de ver cómo funcionan los shortcodes. Normalmente, el módulo de 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é sucede 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 shortcode 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 mostrar como códigos cortos.
Este diseño utiliza una sección especializada con una imagen, un blog, un portafolio y un formulario de contacto. Lo he colocado 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 las pestañas abriría algunas oportunidades para mostrar información, formularios, CTA y mucho más.
También puede usar los códigos abreviados en sus barras laterales pegándolos dentro de un widget de texto.
Aquí se muestra el mapa 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 el shortcode. En este ejemplo, eliminé el fondo que había agregado a la sección en el shortcode del mapa. He configurado el fondo para que sea transparente. El mapa ahora se muestra sin fondo.
Aquí he agregado 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 AC es colocarlos dentro de las páginas de productos de WooCommerce.
He colocado un código abreviado para un control deslizante con dos diapositivas en el área de descripción del producto. Cada diapositiva utiliza 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 gradientes de fondo nuevamente.
Uso de códigos cortos de CA con extra
Aquí hay un vistazo al módulo de pestañas en Extra. Está usando la barra lateral con códigos cortos en varios widgets de texto para mostrar el mapa y los módulos de 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 mapas usando el complemento Divi Builder con el tema Twenty Seventeen . Este es en realidad un código abreviado de pestaña que tiene un código abreviado de mapa dentro de él. Un shortcode dentro de un shortcode. ¿Cómo podría resistirme?
Los códigos abreviados para las 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 use Divi o Extra. Con el complemento Divi Builder, el menú de códigos cortos de AC aparecerá en Apariencia en el tablero.
Documentación
La documentación se proporciona en el menú Códigos cortos de CA. 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:
- Descripción general
- Documentación
- Compatibilidad
- Uso de plantillas
A la derecha hay enlaces para ver un video y una publicación de blog.
Licencia
AC Shortcodes incluye una licencia ilimitada. Puedes instalarlo en tantos sitios web como quieras para ti y tus 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 abreviados dentro de otros módulos y barras laterales abre un nuevo mundo de posibilidades de diseño. Los ejemplos que he creado en este punto destacado del complemento solo están arañando la superficie. El complemento en sí es fácil de usar y solo requiere habilidades de Divi Builder y la capacidad de copiar y pegar un código abreviado. 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 usted! ¿Has probado los códigos cortos de AC? Cuéntanos tu experiencia en los comentarios.
Imagen destacada a través de Photoroyalty / shutterstock.com