- Paso 1: A\u00f1adir un bloque de cubierta<\/a><\/li>
- Paso 2: Insertar una imagen<\/a><\/li>
- Paso 3: A\u00f1adir un t\u00edtulo a la imagen (opcional)<\/a><\/li>
- Paso 4: A\u00f1adir un bot\u00f3n sobre la imagen<\/a><\/li>
- Paso 5: Personalizar el dise\u00f1o<\/a>
- 5.1 Personalizar el texto del t\u00edtulo<\/a><\/li>
- 5.2 Personalizar el bot\u00f3n<\/a><\/li>
- 5.3 Personalizar el bloque de cubierta general<\/a><\/li><\/ul><\/li>
- Paso 6: Vista previa y publicaci\u00f3n<\/a><\/li><\/ul>\n\t\t\t<\/div>\n\t\t<\/div><\/div>\n\n\n
\n\n\n\nPaso 1: A\u00f1adir un bloque de cubierta<\/strong><\/h2>\n\n\n\n
Para empezar, abre la p\u00e1gina o la entrada en la que quieras colocar tu imagen preferida con el bot\u00f3n. En el editor de WordPress, haz clic en el bot\u00f3n \"+\" para a\u00f1adir un bloque y busca \"Portada\". Una vez que lo encuentres, selecciona el bloque Portada. <\/p>\n\n\n\n
![\"A\u00f1adir](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/1-6-1024x541.png\")
<\/figure>\n\n\n\n
\n\n\n\nPaso 2: Insertar una imagen<\/h2>\n\n\n\n
Una vez que hayas a\u00f1adido el bloque, tienes que cargar<\/strong> su imagen elegida o elija una de la Mediateca<\/strong>. Esta imagen servir\u00e1 ahora de fondo para su dise\u00f1o.<\/p>\n\n\n\n
![\"Insertar](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/2-3-1024x461.png\")
<\/figure>\n\n\n\n
\n\n\n\nPaso 3: A\u00f1adir un t\u00edtulo a la imagen (opcional)<\/strong><\/h2>\n\n\n\n
Una vez colocado el bloque de portada, ver\u00e1s que dentro de la imagen aparece el texto \"Escribir t\u00edtulo...\". Haz clic en este texto y escribe el t\u00edtulo o encabezado que quieras mostrar sobre la imagen. <\/p>\n\n\n\n
![\"A\u00f1adir](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/3-new-1024x538.png\")
<\/figure>\n\n\n\n
\n\n\n\nPaso 4: A\u00f1adir un bot\u00f3n sobre la imagen<\/strong><\/strong><\/h2>\n\n\n\n
Una vez que el bloque Portada est\u00e9 listo, haz clic en la imagen y aparecer\u00e1 el insertador de bloques. Ahora haz clic en el signo '+', busca \"Botones\" y a\u00f1ade el bloque.<\/p>\n\n\n\n
![\"A\u00f1adir](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/4-2-1024x473.png\")
<\/figure>\n\n\n\n
\n\n\n\nPaso 5: Personalizar el dise\u00f1o<\/strong><\/h2>\n\n\n\n
Para afinar cada detalle, hemos separado esta secci\u00f3n en 3 partes. Empezaremos por el t\u00edtulo, luego los botones y terminaremos con el bloque general de la portada para obtener un aspecto profesional. <\/p>\n\n\n\n
5.1 Personalizar el texto del t\u00edtulo<\/strong><\/h3>\n\n\n\n
Haz clic en el texto que pusiste como T\u00edtulo dentro del bloque Portada para seleccionarlo. Utiliza la barra de herramientas del bloque para ajustar el estilo del texto: negrita, cursiva o alineaci\u00f3n. Si quieres m\u00e1s personalizaci\u00f3n, ve a la configuraci\u00f3n del bloque en la barra lateral derecha para cambiar el tama\u00f1o de la fuente, el color y la tipograf\u00eda. <\/p>\n\n\n\n
![\"Personalizar](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/5.1-3-1024x586.png\")
<\/figure>\n\n\n\n5.2 Personalizar el bot\u00f3n<\/strong><\/h3>\n\n\n\n
Seleccione el bloque de botones, escriba el texto que desea mostrar y vinc\u00falelo a la p\u00e1gina o URL correspondiente haciendo clic en el icono de cadena. (1)<\/strong> en la barra de herramientas. Utilice la barra de herramientas de bloque para alinear el bot\u00f3n y ajustar su estilo.<\/p>\n\n\n\n
![\"Personalizar](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/5.1-new-1024x591.png\")
<\/figure>\n\n\n\nAhora, navegue hasta el panel de configuraci\u00f3n de bloques en el lado derecho. En Ficha General<\/strong> (1) permite ajustar la anchura del bot\u00f3n en relaci\u00f3n con su contenedor, y el bot\u00f3n Ficha Estilos<\/strong> (3) le permite personalizar los estilos, colores, tipograf\u00eda, dimensiones y borde del bot\u00f3n. <\/p>\n\n\n\n
![\"Personalizar](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/5.2-new-1-1024x615.png\")
<\/figure>\n\n\n\n5.3 Personalizar el bloque de cubierta general<\/strong><\/h3>\n\n\n\n
Haga clic en el bloque Portada para acceder a su configuraci\u00f3n en el men\u00fa Ficha General<\/strong>. A partir de ah\u00ed, ajuste el Configuraci\u00f3n del dise\u00f1o<\/strong> para restringir los bloques anidados, active la opci\u00f3n Fondo fijo<\/strong> para mantener el fondo inm\u00f3vil mientras se desplaza o el bot\u00f3n Antecedentes repetidos<\/strong> si su imagen es m\u00e1s peque\u00f1a que el bloque y necesita ser colocada en mosaico para rellenar el espacio, y establezca la opci\u00f3n Punto Focal <\/strong>para mantener visibles las zonas importantes de la imagen.<\/p>\n\n\n\n
![\"Personalice](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/5.3-1-1024x714.png\")
<\/figure>\n\n\n\nA continuaci\u00f3n, cambie a Ficha Estilos<\/strong>. A partir de ah\u00ed, puedes ajustar el color general, la opacidad, la tipograf\u00eda, la dimensi\u00f3n, la relaci\u00f3n de aspecto, el borde y mucho m\u00e1s. <\/p>\n\n\n\n
![\"Personalice](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/5.3.2-1024x909.png\")
<\/figure>\n\n\n\n
\n\n\n\nPaso 6: Vista previa y publicaci\u00f3n<\/strong><\/h2>\n\n\n\n
Vuelva a recorrer toda la p\u00e1gina para asegurarse de que tanto el bot\u00f3n como la imagen aparecen como se pretend\u00eda. Cuando todo parezca correcto, publica o actualiza el contenido para que est\u00e9 activo.<\/p>\n\n\n\n
![\"Demostraci\u00f3n](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/Demo.gif\")
<\/figure>\n\n\n\n
\n\n\n\nConclusi\u00f3n<\/h4>\n\n\n\n
La posibilidad de a\u00f1adir un bot\u00f3n sobre una imagen en WordPress abre posibilidades creativas para hacer tu contenido m\u00e1s interactivo y visualmente atractivo. El bloque Portada de WordPress permite superponer botones a las im\u00e1genes y crear dise\u00f1os interactivos y visualmente atractivos sin necesidad de herramientas o c\u00f3digos adicionales. Ofrece una flexibilidad total para personalizar t\u00edtulos, botones y detalles de dise\u00f1o para que resulte f\u00e1cil alinear tu contenido con las tendencias de dise\u00f1o modernas. Siguiendo esta gu\u00eda, puede conseguir un resultado profesional que mejore tanto el dise\u00f1o como la funcionalidad de su sitio web. Siguiendo esta gu\u00eda, el dise\u00f1o de su sitio puede destacar con una mejor navegaci\u00f3n y un acabado refinado.<\/p>","protected":false},"excerpt":{"rendered":"
For numerous WordPress enthusiasts, the ability to add a button over an image is essential to make content more interactive and attractive. Their motivations may stem from the desire to enrich user interactions, leverage WordPress\u2019s capabilities, or address constraints in themes or plugins. Whether it\u2019s to improve user navigation, overcome layout challenges, or simply to […]<\/p>\n","protected":false},"author":9,"featured_media":5274,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[7],"tags":[],"class_list":["post-5252","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to"],"featured_image_src":"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/buttons-over-image-850-x-335-px.png","author_info":{"display_name":"Moinul Islam","author_link":"https:\/\/tableberg.com\/es\/author\/marufmoinul27\/"},"_links":{"self":[{"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/posts\/5252","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\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/comments?post=5252"}],"version-history":[{"count":11,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/posts\/5252\/revisions"}],"predecessor-version":[{"id":5280,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/posts\/5252\/revisions\/5280"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/media\/5274"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/media?parent=5252"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/categories?post=5252"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/tags?post=5252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- 5.2 Personalizar el bot\u00f3n<\/a><\/li>
- Paso 2: Insertar una imagen<\/a><\/li>