{"id":3487,"date":"2025-02-17T03:05:58","date_gmt":"2025-02-17T03:05:58","guid":{"rendered":"https:\/\/tableberg.com\/?p=3487"},"modified":"2025-04-23T09:37:44","modified_gmt":"2025-04-23T09:37:44","slug":"como-anadir-una-tabla-de-precios-con-ribbon-en-wordpress","status":"publish","type":"post","link":"https:\/\/tableberg.com\/es\/how-to-add-a-pricing-table-with-ribbon-in-wordpress\/","title":{"rendered":"C\u00f3mo a\u00f1adir una tabla de precios con cinta en WordPress"},"content":{"rendered":"<p>La presentaci\u00f3n de sus tablas de precios es importante para influir en los clientes. Una forma eficaz de mejorar las tablas de precios es incorporar una cinta. Visualmente, se trata de una llamativa pancarta de etiquetas que se despliega en diagonal sobre una tabla para destacar ofertas, descuentos y caracter\u00edsticas espec\u00edficas.<\/p>\n\n\n\n<p>Tanto si promociona un descuento por tiempo limitado, una funci\u00f3n especial o paquetes muy vendidos, una cinta bien colocada puede influir instant\u00e1neamente en los clientes potenciales para que tomen decisiones. <a href=\"https:\/\/wordpress.org\/plugins\/tableberg\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Tableberg<\/a> es un plugin intuitivo y potente para hacerlo.<\/p>\n\n\n\n<p>En este post, le mostraremos c\u00f3mo a\u00f1adir una tabla de precios con cinta en WordPress con Tableberg.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"C\u00f3mo a\u00f1adir una tabla de precios con cinta en WordPress\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/SSv8XHstwLQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Una vez que tengas el plugin instalado en tu sitio, entra en el siguiente tutorial.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Paso 1: A\u00f1adir el bloque Tableberg al editor<\/h2>\n\n\n\n<p>El complemento a\u00f1ade un bloque denominado <strong>Tableberg<\/strong> a la biblioteca de bloques de Gutenberg. A\u00f1ade el bloque al editor simplemente pulsando <strong>el icono m\u00e1s (+)<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor.webp\" alt=\"A\u00f1ade el bloque TableBerg a tu editor de Gutenberg\" class=\"wp-image-481\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Establece el n\u00famero de columnas y filas que necesitas para tu tabla. Para este tutorial, vamos a establecer <strong>3*1<\/strong> para columnas y filas.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Select-the-number-of-rows-and-columns.webp\" alt=\"Establecer el n\u00famero de filas y columnas\" class=\"wp-image-3014\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Select-the-number-of-rows-and-columns.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Select-the-number-of-rows-and-columns-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Select-the-number-of-rows-and-columns-1024x522.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Select-the-number-of-rows-and-columns-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Select-the-number-of-rows-and-columns-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Puede ver que el dise\u00f1o b\u00e1sico de la tabla de precios se ha creado con columnas y una fila.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Rows-and-columns-selected-for-designing-Icon-Boxes.webp\" alt=\"Se a\u00f1aden columnas y filas al editor\" class=\"wp-image-3113\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Rows-and-columns-selected-for-designing-Icon-Boxes.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Rows-and-columns-selected-for-designing-Icon-Boxes-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Rows-and-columns-selected-for-designing-Icon-Boxes-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Rows-and-columns-selected-for-designing-Icon-Boxes-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Rows-and-columns-selected-for-designing-Icon-Boxes-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Paso 2: A\u00f1adir contenido a la tabla<\/h2>\n\n\n\n<p>Una tabla de precios suele incluir nombres de productos, im\u00e1genes, precios, precios con descuento y botones CTA. Veamos c\u00f3mo a\u00f1adirlos a la tabla.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">A\u00f1adir el nombre del producto<\/h3>\n\n\n\n<p>Tableberg te permite a\u00f1adir diferentes tipos de bloques a sus celdas como el editor de bloques de Gutenberg. A\u00f1ade el <strong>Bloque de p\u00e1rrafos<\/strong> para escribir el nombre del producto. (Por defecto, el bloque de p\u00e1rrafo se a\u00f1ade a las celdas de la tabla).<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-paragraph-block-to-the-pricing-table.webp\" alt=\"A\u00f1adir el bloque de p\u00e1rrafo a la tabla de precios\" class=\"wp-image-3488\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-paragraph-block-to-the-pricing-table.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-paragraph-block-to-the-pricing-table-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-paragraph-block-to-the-pricing-table-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-paragraph-block-to-the-pricing-table-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-paragraph-block-to-the-pricing-table-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Escriba el nombre de su producto en la celda. Alinee el texto en el centro, p\u00f3ngalo en negrita, cambie su color y modifique su tama\u00f1o utilizando las opciones que se muestran en la imagen siguiente.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Write-the-products-name-and-customize-it.webp\" alt=\"Escriba el nombre del producto y personal\u00edcelo\" class=\"wp-image-3490\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Write-the-products-name-and-customize-it.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Write-the-products-name-and-customize-it-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Write-the-products-name-and-customize-it-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Write-the-products-name-and-customize-it-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Write-the-products-name-and-customize-it-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">A\u00f1adir la imagen del producto<\/h3>\n\n\n\n<p>A\u00f1ada el bloque Imagen a la tabla de precios.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Image-block-to-the-pricing-table.webp\" alt=\"A\u00f1adir el bloque Imagen a la tabla de precios\" class=\"wp-image-3491\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Image-block-to-the-pricing-table.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Image-block-to-the-pricing-table-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Image-block-to-the-pricing-table-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Image-block-to-the-pricing-table-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Image-block-to-the-pricing-table-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>El bloque de imagen le permitir\u00e1 cargar la imagen del producto. Cambie el tama\u00f1o de la imagen seg\u00fan sea necesario y alin\u00e9ela adecuadamente.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"523\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Upload-the-product-image-1024x523.webp\" alt=\"Cargar la imagen del producto\" class=\"wp-image-3493\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Upload-the-product-image-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Upload-the-product-image-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Upload-the-product-image-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Upload-the-product-image-18x9.webp 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Upload-the-product-image.webp 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">A\u00f1adir un precio anterior<\/h3>\n\n\n\n<p>Mostrar la diferencia entre el precio anterior y el actual es una buena forma de resaltar el descuento. As\u00ed que vamos a a\u00f1adir un precio anterior debajo de la imagen del producto.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-a-Previous-Price.webp\" alt=\"Escriba el precio anterior\" class=\"wp-image-3494\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-a-Previous-Price.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-a-Previous-Price-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-a-Previous-Price-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-a-Previous-Price-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-a-Previous-Price-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>A\u00f1adir un efecto de tachado al precio anterior puede llamar la atenci\u00f3n de la gente. Para ello, <strong>seleccione el precio<\/strong> con el cursor. <strong>Haga clic en<\/strong> el <strong>M\u00e1s opciones<\/strong> en la barra de herramientas.<\/p>\n\n\n\n<p><strong>Ir a<\/strong> el <strong>Destaque<\/strong> y <strong>Opciones de tachado<\/strong>. Podr\u00e1s cambiar el color del precio y a\u00f1adir un tachado.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-strikethrough-effect-to-the-price.webp\" alt=\"A\u00f1adir el efecto de tachado al precio\" class=\"wp-image-3495\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-strikethrough-effect-to-the-price.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-strikethrough-effect-to-the-price-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-strikethrough-effect-to-the-price-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-strikethrough-effect-to-the-price-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-strikethrough-effect-to-the-price-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">A\u00f1adir el precio actual del producto<\/h3>\n\n\n\n<p>Ahora, a\u00f1ada el precio actual del producto en un tipo de letra comparativamente m\u00e1s grande para que pueda llamar la atenci\u00f3n de la gente.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Current-Price-of-the-Product.webp\" alt=\"A\u00f1adir el precio actual del producto\" class=\"wp-image-3496\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Current-Price-of-the-Product.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Current-Price-of-the-Product-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Current-Price-of-the-Product-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Current-Price-of-the-Product-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Current-Price-of-the-Product-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">A\u00f1adir un bot\u00f3n CTA<\/h3>\n\n\n\n<p>Al final de todo el contenido, a\u00f1ada el <strong>Bloque de botones<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-button-block-to-the-pricing-table.webp\" alt=\"A\u00f1adir el bloque de botones a la tabla de precios\" class=\"wp-image-3497\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-button-block-to-the-pricing-table.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-button-block-to-the-pricing-table-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-button-block-to-the-pricing-table-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-button-block-to-the-pricing-table-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-button-block-to-the-pricing-table-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Cambie el color de fondo del bot\u00f3n, el color del texto, el tama\u00f1o de la tipograf\u00eda y el relleno. Realice estos cambios como desee.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Customize-the-CTA-button-of-the-pricing-table.webp\" alt=\"Personalizar el bot\u00f3n CTA de la tabla de precios\" class=\"wp-image-3498\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Customize-the-CTA-button-of-the-pricing-table.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Customize-the-CTA-button-of-the-pricing-table-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Customize-the-CTA-button-of-the-pricing-table-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Customize-the-CTA-button-of-the-pricing-table-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Customize-the-CTA-button-of-the-pricing-table-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Paso 3: A\u00f1adir espacios entre los bloques<\/h2>\n\n\n\n<p>As\u00ed pues, el contenido de la columna est\u00e1 listo. Pero como puedes ver, todos los bloques est\u00e1n demasiado congestionados. Tenemos que a\u00f1adir espacio entre ellos para crear un aspecto m\u00e1s fresco.<\/p>\n\n\n\n<p>Para ello, <strong>seleccione la columna concreta<\/strong>. A continuaci\u00f3n, vaya al <strong>Ficha Estilos<\/strong>. Come to the <strong>Espacio entre bloques<\/strong> desplazando la pesta\u00f1a. Aumenta el espacio a\u00f1adiendo un valor en la casilla.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-Spaces-Between-the-Blocks.webp\" alt=\"A\u00f1adir espacios entre los bloques\" class=\"wp-image-3499\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-Spaces-Between-the-Blocks.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-Spaces-Between-the-Blocks-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-Spaces-Between-the-Blocks-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-Spaces-Between-the-Blocks-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-Spaces-Between-the-Blocks-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Del mismo modo, a\u00f1ada contenido a las dem\u00e1s columnas. Pero para ahorrar tiempo, puedes duplicar la columna y luego actualizar el contenido. Aqu\u00ed tienes una gu\u00eda sobre <a href=\"https:\/\/tableberg.com\/es\/docs\/como-duplicar-una-columna-de-fila\/\" target=\"_blank\" rel=\"noreferrer noopener\">c\u00f3mo duplicar una columna y una fila Tableberg<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Fill-the-other-columns-of-the-pricing-table.webp\" alt=\"Rellene las dem\u00e1s columnas de la tabla de precios\" class=\"wp-image-3500\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Fill-the-other-columns-of-the-pricing-table.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Fill-the-other-columns-of-the-pricing-table-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Fill-the-other-columns-of-the-pricing-table-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Fill-the-other-columns-of-the-pricing-table-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Fill-the-other-columns-of-the-pricing-table-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Paso 4: A\u00f1adir radio a las columnas de la tabla<\/h2>\n\n\n\n<p>Puede mejorar la est\u00e9tica a\u00f1adiendo un radio de borde a las columnas de la tabla. <strong>Select<\/strong> el <strong>Icono de Tabelberg<\/strong> en la barra de herramientas. <strong>Ir a<\/strong> el <strong>Ficha Estilos<\/strong>. <\/p>\n\n\n\n<p>Despl\u00e1cese y <strong>venir a<\/strong> <strong>Espacio entre celdas<\/strong>. Arrastrando la opci\u00f3n correspondiente, puede a\u00f1adir espacios entre las columnas de la tabla.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-Radius-to-the-Table-Columns.webp\" alt=\"A\u00f1adir radio a las columnas de la tabla\" class=\"wp-image-3501\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-Radius-to-the-Table-Columns.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-Radius-to-the-Table-Columns-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-Radius-to-the-Table-Columns-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-Radius-to-the-Table-Columns-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-Radius-to-the-Table-Columns-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p><span style=\"box-sizing: border-box; margin: 0px; padding: 0px;\">Ver\u00e1 el&nbsp;<strong>Borde de la mesa<\/strong>&nbsp;justo debajo. <strong>Establecer<\/strong> que desee <strong>Valor del radio<\/strong> para<\/span>r tanto el borde interior como el exterior. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-redius-to-the-table-columns.webp\" alt=\"A\u00f1adir redius a las columnas de la tabla\" class=\"wp-image-3502\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-redius-to-the-table-columns.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-redius-to-the-table-columns-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-redius-to-the-table-columns-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-redius-to-the-table-columns-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-redius-to-the-table-columns-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>As\u00ed, podr\u00e1 preparar su tabla de precios.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Paso 5: A\u00f1adir una cinta a la tabla de precios<\/h2>\n\n\n\n<p>Seleccione la columna a la que desea a\u00f1adir una cinta. Pulse el icono m\u00e1s (+) y busque el icono <strong>Bloque de cintas<\/strong>. A continuaci\u00f3n, haga clic y el bloque a la columna.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Select-a-column-to-add-a-ribbon.webp\" alt=\"Seleccione una columna para a\u00f1adir una cinta\" class=\"wp-image-3503\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Select-a-column-to-add-a-ribbon.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Select-a-column-to-add-a-ribbon-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Select-a-column-to-add-a-ribbon-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Select-a-column-to-add-a-ribbon-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Select-a-column-to-add-a-ribbon-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>La cinta se a\u00f1adir\u00e1 a la tabla. A continuaci\u00f3n, desde el <strong>Ficha Configuraci\u00f3n<\/strong>seleccione el Tipo de cinta, el Texto de la cinta, el Lado y la Distancia. <\/p>\n\n\n\n<p>A continuaci\u00f3n, personalice el texto y el color de fondo desde el men\u00fa <strong>Ficha Estilos<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Customize-the-ribbon-on-the-pricing-table.webp\" alt=\"Personalizar la cinta de la tabla de precios\" class=\"wp-image-3504\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Customize-the-ribbon-on-the-pricing-table.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Customize-the-ribbon-on-the-pricing-table-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Customize-the-ribbon-on-the-pricing-table-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Customize-the-ribbon-on-the-pricing-table-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Customize-the-ribbon-on-the-pricing-table-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>As\u00ed pues, su tabla de precios est\u00e1 lista con un lazo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00a1Cerrando!<\/h2>\n\n\n\n<p>Espero que te haya gustado este tutorial. Pero hay varios puntos que debes recordar. Aseg\u00farate de que tu tabla est\u00e1 limpia y despejada. Los dise\u00f1os minimalistas de mesas de precios siempre impactan a los clientes potenciales.<\/p>\n\n\n\n<p>En segundo lugar, utilice un texto claro y conciso que conecte al instante con los visitantes de la web. si es posible, a\u00f1ada algunas ventajas\/caracter\u00edsticas de los productos en la tabla. Si quiere abarcar varios planes en sus tablas de precios, es mejor mostrarlos con un conmutador.<\/p>\n\n\n\n<p>Aqu\u00ed tiene una gu\u00eda sobre <a href=\"https:\/\/ultimateblocks.com\/how-to-create-a-pricing-table-with-toggle-switch-in-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">c\u00f3mo crear una tabla de precios con el conmutador en WordPress<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>The presentation of your pricing tables is important in influencing customers. One powerful way to enhance pricing tables is by incorporating a ribbon. It&#8217;s visually a striking banner of labels displayed diagonally across a table to highlight specific offers, discounts, and features. Whether you are promotion a limited-time discount, special feature, or hot-selling packages, a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3508,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[7],"tags":[86,113],"class_list":["post-3487","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","tag-pricing-tables","tag-ribbon-block"],"featured_image_src":"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/How-to-Add-a-Pricing-Table-with-Ribbon-in-WordPress.webp","author_info":{"display_name":"Istiak Rayhan","author_link":"https:\/\/tableberg.com\/es\/author\/wpx_irayhan\/"},"_links":{"self":[{"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/posts\/3487","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/comments?post=3487"}],"version-history":[{"count":5,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/posts\/3487\/revisions"}],"predecessor-version":[{"id":8451,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/posts\/3487\/revisions\/8451"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/media\/3508"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/media?parent=3487"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/categories?post=3487"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/tags?post=3487"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}