Cree bonitas mesas <\/strong> Una vez que tengas los plugins instalados en tu sitio, sigue el siguiente tutorial.<\/p>\n\n\n\n A\u00f1ada el Bloque Tableberg<\/strong> al editor.<\/p>\n\n\n\n Defina el n\u00famero de filas y columnas de su sitio web en funci\u00f3n del n\u00famero de cuadros de caracter\u00edsticas que desee crear.<\/p>\n\n\n\n Como vamos a crear tres cuadros de caracter\u00edsticas, hemos seleccionado el n\u00famero de columnas y filas 2*2.<\/p>\n\n\n\n Se ha a\u00f1adido el n\u00famero definido de filas y columnas.<\/p>\n\n\n\n Un cuadro de caracter\u00edsticas no tiene sentido sin una imagen del producto correspondiente. A\u00f1ada la Bloque de im\u00e1genes<\/strong> a una celda adecuada.<\/p>\n\n\n\n A\u00f1ade una imagen a una celda adecuada. Puede cambiar el tama\u00f1o de la imagen arrastrando el icono circular. <\/p>\n\n\n\n La clasificaci\u00f3n por estrellas es una forma intuitiva de expresar la calidad y popularidad de un producto. Tambi\u00e9n ayuda a captar clientes. Por tanto, a\u00f1ada la Bloque de estrellas<\/strong> a la mesa.<\/p>\n\n\n\n Desde debajo del Ficha Configuraci\u00f3n<\/strong> en la barra lateral derecha, establezca los valores del bloque Calificaci\u00f3n por estrellas. Incluso puede cambiar el tama\u00f1o del bloque si es necesario.<\/p>\n\n\n\n Con un bot\u00f3n CTA, puede motivar a los usuarios a comprar o visitar la p\u00e1gina del producto. Para ello, a\u00f1ada el bot\u00f3n Bloque de botones<\/strong> bajo la calificaci\u00f3n.<\/p>\n\n\n\n Ir a la Ficha Estilos<\/strong>manteniendo seleccionado el bloque de botones. <\/p>\n\n\n\n Desde aqu\u00ed, puede cambiar el bot\u00f3n\u00a0color del texto, color de fondo, tama\u00f1o, relleno,\u00a0<\/strong>un<\/span>d radio seg\u00fan sea necesario.<\/p>\n\n\n\n Como necesita m\u00e1s espacio para a\u00f1adir la lista de caracter\u00edsticas y la descripci\u00f3n, es mejor unir dos celdas. Seleccionar celdas<\/strong> con el cursor mediante manteniendo pulsada la tecla Shift<\/strong>.<\/p>\n\n\n\n Haga clic en Editar tabla<\/strong> en la barra de herramientas. Pulse el bot\u00f3n Opci\u00f3n de fusi\u00f3n<\/strong> en la lista.<\/p>\n\n\n\n A\u00f1ada el Bloque de p\u00e1rrafos<\/strong> para escribir texto en el cuadro de caracter\u00edsticas.<\/p>\n\n\n\n Es mejor mostrar las caracter\u00edsticas del producto en una lista. Por lo tanto, a\u00f1ada las Bloque Lista estilizada<\/strong>.<\/p>\n\n\n\n Espero que puedas listar las caracter\u00edsticas de tu producto como en la imagen de abajo. Puede cambiar el icono de la lista, aumentar su tama\u00f1o,<\/strong> y modificar su color<\/strong>.<\/p>\n\n\n\n Por \u00faltimo, a\u00f1ada una breve descripci\u00f3n de su producto utilizando el bloque P\u00e1rrafo bajo la lista de caracter\u00edsticas.<\/p>\n\n\n\n Por lo tanto, el contenido de su caja de caracter\u00edsticas est\u00e1 listo. Ahora vamos a personalizar las cajas un poco m\u00e1s.<\/p>\n\n\n\n Tableberg permite personalizar tanto el externo<\/strong> y bordes interiores<\/strong>. <\/p>\n\n\n\n Ir a la Ficha Estilos<\/strong>. Despl\u00e1zate un poco hacia abajo. Tendr\u00e1s estas opciones. Establezca los colores que desee<\/strong> y grosor de los bordes<\/strong>.<\/p>\n\n\n\n Una cinta es una peque\u00f1a etiqueta o banderola decorativa que ayuda a resaltar informaci\u00f3n importante, como descuentos, novedades, etc. A\u00f1ada la Bloque de cintas<\/strong> a la celda m\u00e1s cercana.<\/p>\n\n\n\n Ir a la Ficha Configuraci\u00f3n<\/strong>escriba un copia de cinta<\/strong> y arreglar su posici\u00f3n<\/strong> en el cuadro de caracter\u00edsticas.<\/p>\n\n\n\n Por \u00faltimo, vaya a la p\u00e1gina Ficha Estilos<\/strong>. <\/p>\n\n\n\n Seleccione texto<\/strong> y color de fondo<\/strong> para la cinta.<\/p>\n\n\n\n Vaya a la p\u00e1gina de vista previa. Ver\u00e1s que la funci\u00f3n funciona bien.<\/p>\n\n\n\n Espero que te haya gustado este art\u00edculo. Puedes hacer m\u00e1s dise\u00f1os con el plugin Tableberg. Por ejemplo, explora dos posts m\u00e1s antes de salir. Esos puestos son:<\/p>\n\n\n\n Si tiene alguna pregunta sobre el plugin, h\u00e1ganosla llegar a trav\u00e9s del cuadro de comentarios. Nos pondremos en contacto con usted muy pronto con una respuesta satisfactoria.<\/p>","protected":false},"excerpt":{"rendered":" A feature box is a designed area on a web page that draws attention to specific content, products, and services. Feature boxes are designed with elements like images, icons, concise text, and buttons. Tableberg is a multipurpose table-builder plugin. It can help you create wonderful layouts for your feature boxes. In this tutorial post, we’ll […]<\/p>\n","protected":false},"author":1,"featured_media":3189,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[7],"tags":[10,109,102],"class_list":["post-3138","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","tag-customize-table","tag-customize-web-pages","tag-web-design"],"featured_image_src":"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/How-to-Add-Feature-Boxes-in-WordPress-website.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\/3138","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=3138"}],"version-history":[{"count":4,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/posts\/3138\/revisions"}],"predecessor-version":[{"id":9030,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/posts\/3138\/revisions\/9030"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/media\/3189"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/media?parent=3138"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/categories?post=3138"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/tags?post=3138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Con el editor de bloques<\/strong><\/p>\n\n\n\n![\"\"](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Tableberg.png\")
<\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\nPaso 01: A\u00f1adir el bloque Tableberg al editor<\/h2>\n\n\n\n
![\"A\u00f1ade](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor.webp\")
<\/figure>\n\n\n\n![\"Establecer](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Select-the-number-of-rows-and-columns.webp\")
<\/figure>\n\n\n\n![\"Se](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Rows-and-columns-are-added.webp\")
<\/figure>\n\n\n\nPaso 02: A\u00f1adir una imagen de producto a la caja<\/h2>\n\n\n\n
![\"A\u00f1adir](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Add-a-Product-Image-to-the-Box-1.webp\")
<\/figure>\n\n\n\n![\"Cambiar](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Resize-image-into-the-feature-box.webp\")
<\/figure>\n\n\n\nPaso 03: A\u00f1adir una clasificaci\u00f3n por estrellas<\/h2>\n\n\n\n
![\"A\u00f1adir](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Add-a-star-rating-to-the-feature-box.webp\")
<\/figure>\n\n\n\n![\"Establecer](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Set-value-for-the-Star-Rating-block.webp\")
<\/figure>\n\n\n\nPaso 04: A\u00f1adir un bot\u00f3n CTA<\/h2>\n\n\n\n
![\"A\u00f1adir](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Add-a-CTA-Button-to-the-Feature-Box.webp\")
<\/figure>\n\n\n\n![\"Personalizar](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Customize-the-button-on-the-feature-box.webp\")
<\/figure>\n\n\n\nPaso 05: A\u00f1adir la lista de caracter\u00edsticas y la descripci\u00f3n<\/h2>\n\n\n\n
![\"Combinar](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Merge-cells-for-the-feature-box.webp\")
<\/figure>\n\n\n\n![\"A\u00f1ade](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Add-the-Paragraph-block-to-the-feature-box-to-add-text.webp\")
<\/figure>\n\n\n\n![\"A\u00f1adir](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Add-the-feature-list-to-the-feature-box.webp\")
<\/figure>\n\n\n\n![\"Enumere](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/List-your-product-features.webp\")
<\/figure>\n\n\n\n![\"A\u00f1ada](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Add-a-short-description-about-your-product.webp\")
<\/figure>\n\n\n\nPaso 06: Personalizar los bordes de los cuadros de caracter\u00edsticas<\/h2>\n\n\n\n
![\"Personalizar](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Customize-the-Feature-Box-Borders.webp\")
<\/figure>\n\n\n\nPaso 07: A\u00f1adir cinta al cuadro de caracter\u00edsticas<\/h2>\n\n\n\n
![\"A\u00f1adir](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Add-Ribbon-to-the-Feature-Box.webp\")
<\/figure>\n\n\n\n![\"Definir](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Set-the-ribbon-text-and-its-position-on-the-feature-box.webp\")
<\/figure>\n\n\n\n![\"Elige](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Choose-color-the-ribbon.webp\")
<\/figure>\n\n\n\nPaso 08: Vista previa del cuadro de caracter\u00edsticas<\/h2>\n\n\n\n
![\"Vista](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Preview-the-Feature-Box.webp\")
<\/figure>\n\n\n\nConclusi\u00f3n<\/h2>\n\n\n\n
\n