Página principal
- 12 de agosto de 2022 Nuestro complemento Beaver Builder lo ayuda a crear sitios web completos con plantillas y módulos. Sin embargo, puede haber momentos en los que desee personalizar aún más su sitio. Con los códigos abreviados de Beaver Builder, puede agregar contenido adicional dentro de módulos, encabezados, pies de página y barras laterales.
En esta publicación, presentaremos los códigos abreviados de Beaver Builder y le mostraremos cómo insertarlos en su contenido. También exploraremos algunos ejemplos que podrían mejorar el diseño de su sitio web. ¡Saltamos!
Tabla de contenido
Si ha trabajado con sitios web de WordPress anteriormente, es posible que ya esté familiarizado con los códigos abreviados. Estos son pequeños fragmentos de código que agregan funcionalidad a su sitio.
En lugar de escribir todo en HTML usando el editor de código, simplemente puede insertar un código abreviado en su página. Este tendrá un slug o ID que corresponde a un elemento de Beaver Builder, como un módulo, una fila o una columna. También puede usar códigos abreviados para publicaciones, páginas o plantillas de diseño.
En este ejemplo, estamos agregando una fila guardada a un módulo HTML:
Cuando hacemos clic en Guardar , Beaver Builder convierte automáticamente el código abreviado en la fila guardada a la que corresponde:
Más adelante en la publicación, le mostraremos cómo agregar códigos cortos en el editor. Por ahora, analicemos los beneficios de usar códigos cortos de Beaver Builder.
Los códigos cortos pueden ser útiles para agregar elementos visuales a áreas basadas en texto. Por ejemplo, puede crear un módulo de precios y usar un código abreviado para agregar una foto del producto. De esta forma, no necesitará trabajar con dos módulos individuales (Precio y Foto) ya que se combinarán:
Los códigos cortos también le permiten insertar elementos de Beaver Builder en su contenido mientras trabaja con el Editor de bloques de WordPress. Esto significa que no necesitará cambiar al editor de Beaver Builder para agregar un módulo, una fila o una columna.
Puede agregar códigos abreviados a cualquier módulo de Beaver Builder con un campo de texto, incluidos:
Sin embargo, puede que no sea aconsejable agregar demasiados códigos abreviados. Esto podría aumentar los tiempos de carga ya que el servidor debe solicitar los archivos CSS y Javascript para cada shortcode. Recomendamos utilizar como máximo dos por página.
Hay muchos casos de uso para los códigos cortos de Beaver Builder. Veamos algunos ejemplos útiles.
Supongamos que tiene una tabla de precios con varias opciones de productos en una página de destino o una página de ventas. Simplemente puede enumerar los precios y luego indicar a los clientes que paguen con un botón en la parte inferior de la página. Sin embargo, los usuarios deberán desplazarse hacia abajo más, lo que podría dañar la experiencia del usuario (UX).
En su lugar, podría crear un botón de llamada a la acción (CTA) que invite a los clientes a comprar el producto. Esto se vinculará directamente a la página de pago para que los clientes no tengan que navegar más. Luego, puede agregar este botón a su tabla de precios con un código abreviado:
Recuerda personalizar el botón CTA para que coincida con tu marca visual.
Si tiene un sitio comercial, puede agregar algunas pestañas a su sección Acerca de. De esta manera, los usuarios pueden obtener más información sobre su empresa sin tener que desplazarse hacia abajo en la página.
Supongamos que también desea que los clientes potenciales se comuniquen con usted acerca de sus servicios tan pronto como terminen de leer. Los usuarios ya pasan tiempo cambiando entre sus pestañas. Dirigirlos a otra parte podría darles unos segundos adicionales para reconsiderar su decisión de comunicarse.
En su lugar, puede agregar un formulario de contacto a una de sus pestañas, usando un código abreviado:
¡Es fácil! Ahora los clientes pueden contactarte sin tener que salir de la página.
Al crear sus páginas, es posible que prefiera agregar imágenes y texto a un solo módulo. Aunque podría usar dos módulos separados, el contenido se dividiría y no podría colocar la imagen en el medio del texto.
La combinación de texto e imágenes es una forma efectiva de mostrar productos en su tienda en línea. Por ejemplo, puede agregar imágenes a su módulo Cuadro de precios para mostrar diferentes características del producto:
Teóricamente, podría armar este mismo diseño con diferentes módulos apilados uno encima del otro. Sin embargo, usar un shortcode de imagen puede acelerar el proceso de diseño.
También puede usar códigos abreviados de Beaver Builder cuando trabaje con el Editor de bloques. Esto podría ser particularmente útil si está escribiendo una publicación de blog y desea agregar elementos interactivos a su artículo.
Puede colocar fácilmente un módulo de Beaver Builder en la página sin salir del Editor de bloques. Simplemente inserte un bloque de Shortcode y pegue su código dentro:
Una vez que publique la publicación, el código abreviado mostrará el contenido en la parte delantera:
Por ejemplo, podría insertar un módulo de formulario de contacto. También puede agregar una llamada a la acción que dirija a los clientes a su tienda o un mapa integrado de la ubicación de su tienda.
Nuestro tema Beaver Builder viene con un código abreviado de fecha personalizado. Esto muestra la fecha actual en cualquier parte de su página, incluidos los encabezados, pies de página y barras laterales:
Este shortcode podría ser útil si ejecuta un sitio web de noticias. Puede agregar la fecha usando cualquiera de los siguientes códigos abreviados:
| Código corto | Formato |
| 2022 | 2022 |
| 22 | 22 |
| 14 de agosto de 2022 | 28 de julio de 2022 |
| domingo, 14 de agosto de 2022 | jueves, 28 de julio de 2022 |
| 14-08-2022 | 28-07-2022 |
| “8-14-22” | 7-28-22 |
| “14.08.22” | 07.28.22 |
También puede usar este código abreviado junto a su mensaje de derechos de autor en el pie de página. De esta manera, puede asegurarse de que esté siempre actualizado.
Acabamos de cubrir varios escenarios en los que los códigos abreviados de Beaver Builder pueden acelerar y simplificar su proceso de diseño. Ahora, veamos cómo agregarlos a su sitio:
Los códigos cortos no están fácilmente disponibles en su sitio web. Primero deberá guardar los elementos de Beaver Builder antes de poder insertarlos como códigos abreviados. Estos elementos pueden incluir:
Por ejemplo, supongamos que desea diseñar un módulo de formulario de contacto personalizado. Puede hacerlo navegando a Beaver Builder > Módulos guardados > Agregar nuevo :
Luego se le pedirá que asigne un nombre a su módulo y elija su tipo:
Haga clic en Agregar módulo guardado . En la página siguiente, seleccione Iniciar Beaver Builder para acceder al editor. Aquí, puedes personalizar el formulario de contacto a tu gusto:
Cuando esté listo, asegúrese de publicar su módulo. Ahora aparecerá en su página de Módulos guardados . Si está utilizando la última versión de Beaver Builder, podrá ver códigos abreviados generados automáticamente:
Si no puede ver la columna ShortCode , deberá crear el código manualmente. Para hacer esto, necesitarás el slug del módulo.
Si hace clic en el botón Editar debajo de su módulo, debería poder ver su slug. Si no puede verlo, abra el menú Opciones de pantalla y marque la casilla junto a Slug :
Ahora puedes usar el siguiente código para crear un shortcode para este módulo:
[fl_builder_insert_layout slug="my-post-slug"]Recuerde reemplazar "my-post-slug" con el slug de su módulo Beaver Builder. En nuestro ejemplo, se verá así:
[fl_builder_insert_layout slug="contact-form"]Eso es todo: ahora sabe cómo crear códigos abreviados para los módulos de Beaver Builder.
El paso final es agregar el código abreviado a su página. En la mayoría de los casos, este proceso implicará pegar el fragmento dentro del campo Texto de un módulo.
Aquí está nuestro ejemplo de tabla de precios anterior. Como puede ver, hemos agregado el código abreviado para el botón CTA en el cuadro de texto de la función 5 :
Dado que Beaver Builder utiliza un editor frontal, podrá ver su módulo guardado inmediatamente. En algunos casos (como cuando se usa un módulo HTML), es posible que deba guardar los cambios antes de que el shortcode se convierta en el elemento visual.
Los códigos abreviados de Beaver Builder le permiten agregar rápidamente módulos, filas, columnas o diseños guardados en diferentes partes de sus páginas. Puede usarlos para acelerar el proceso de diseño y crear hermosas páginas de WordPress.
En resumen, puede usar los códigos abreviados de Beaver Builder siguiendo estos sencillos pasos:
¿Estás listo para comenzar a crear impresionantes páginas para tu sitio? ¡Vea la lista completa de funciones fáciles de usar de Beaver Builder!
Beaver Builder proporciona códigos abreviados para elementos guardados, como módulos, filas, columnas y plantillas. Luego puede agregar estos fragmentos a campos y módulos basados en texto. Esto es posible tanto en el editor front-end de Beaver Builder como en el editor de bloques de WordPress. Además, los códigos abreviados le permiten usar sus otros complementos favoritos junto con Beaver Builder.
No necesita el tema oficial de Beaver Builder para usar códigos cortos. Puede crear páginas y agregar códigos abreviados con la mayoría de los temas utilizando el complemento del generador de páginas. Sin embargo, algunos códigos abreviados, como el código abreviado de fecha, solo funcionan con el tema Beaver Builder.
Beaver Builder es una herramienta de creación de páginas que le permite editar el área de contenido de las páginas y publicaciones utilizando módulos y plantillas. Por el contrario, Beaver Themer es un complemento adicional que le permite editar áreas de su sitio que normalmente están controladas por su tema, como encabezados, pies de página y barras laterales. Este contenido incluye plantillas de temas, partes de plantillas y cuadrículas de publicaciones.