[et_pb_section fb_built=\u00bb1″ _builder_version=\u00bb4.4.7″ custom_margin=\u00bb0px||\u00bb custom_padding=\u00bb||||false|false\u00bb hover_enabled=\u00bb0″][et_pb_row _builder_version=\u00bb4.4.7″ custom_padding=\u00bb|0px|24px|0px|false|false\u00bb hover_enabled=\u00bb0″][et_pb_column type=\u00bb4_4″ _builder_version=\u00bb3.25″ custom_padding=\u00bb|||\u00bb custom_padding__hover=\u00bb|||\u00bb][et_pb_text _builder_version=\u00bb3.27.4″]<\/p>\n
Al crear una publicaci\u00f3n en WordPress, puede cargar una imagen destacada que se muestra entre el t\u00edtulo y la copia del cuerpo. Para que Divi muestre su t\u00edtulo debajo de esta imagen, debe agregar una l\u00ednea de c\u00f3digo. Te mostramos c\u00f3mo y compartimos un estilo b\u00e1sico de subt\u00edtulos CSS. \u00a1Vamos!<\/strong><\/p>\n [\/et_pb_text][et_pb_slider show_pagination=\u00bboff\u00bb _builder_version=\u00bb3.19.18″ header_font=\u00bb||||||||\u00bb auto=\u00bbon\u00bb auto_speed=\u00bb5000″ auto_ignore_hover=\u00bbon\u00bb][et_pb_slide heading=\u00bbAntes\u00bb use_text_overlay=\u00bbon\u00bb text_overlay_color=\u00bbrgba(255,255,255,0.81)\u00bb admin_title=\u00bbF\u00f6re\u00bb _builder_version=\u00bb3.19.18″ header_level=\u00bbh2″ header_font=\u00bb|||on|||||\u00bb header_text_color=\u00bb#272727″ background_color=\u00bbrgba(31,186,205,0)\u00bb background_image=\u00bbhttps:\/\/divimundo.com\/wp-content\/uploads\/2019\/02\/2-image-caption-not-display.png\u00bb background_size=\u00bbcontain\u00bb background_layout=\u00bblight\u00bb]<\/p>\n El subt\u00edtulo no muestra \ud83d\ude41<\/p>\n [\/et_pb_slide][et_pb_slide heading=\u00bbDespu\u00e9s de #1″ use_bg_overlay=\u00bboff\u00bb use_text_overlay=\u00bbon\u00bb text_overlay_color=\u00bbrgba(255,255,255,0.81)\u00bb _builder_version=\u00bb3.19.18″ header_level=\u00bbh2″ header_font=\u00bb|||on|||||\u00bb header_text_color=\u00bb#272727″ background_color=\u00bbrgba(31,186,205,0)\u00bb background_image=\u00bbhttps:\/\/divimundo.com\/wp-content\/uploads\/2019\/02\/3-display-image-caption.png\u00bb background_size=\u00bbcontain\u00bb background_layout=\u00bblight\u00bb]<\/p>\n Dise\u00f1o de subt\u00edtulos predeterminado<\/p>\n [\/et_pb_slide][et_pb_slide heading=\u00bbDespu\u00e9s de #2″ use_text_overlay=\u00bbon\u00bb text_overlay_color=\u00bbrgba(255,255,255,0.81)\u00bb _builder_version=\u00bb3.19.18″ header_level=\u00bbh2″ header_font=\u00bb|||on|||||\u00bb header_text_color=\u00bb#272727″ background_color=\u00bbrgba(31,186,205,0)\u00bb background_image=\u00bbhttps:\/\/divimundo.com\/wp-content\/uploads\/2019\/02\/4-featured-image-css1.png\u00bb background_size=\u00bbcontain\u00bb background_layout=\u00bblight\u00bb]<\/p>\n Con CSS personalizado<\/p>\n [\/et_pb_slide][\/et_pb_slider][et_pb_text _builder_version=\u00bb3.27.4″]<\/p>\n \u00a1Importante! Aseg\u00farese de utilizar un tema secundario Divi<\/em>. De lo contrario, los cambios se sobrescribir\u00e1n la pr\u00f3xima vez que actualice Divi. Crea tu propio tema infantil gratis \u00bb<\/a><\/p>\n<\/blockquote>\n [\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=\u00bb1_2,1_2″ _builder_version=\u00bb3.25″][et_pb_column type=\u00bb1_2″ _builder_version=\u00bb3.25″ custom_padding=\u00bb|||\u00bb custom_padding__hover=\u00bb|||\u00bb][et_pb_text _builder_version=\u00bb3.27.4″]<\/p>\n Comienza creando una publicaci\u00f3n y despl\u00e1zate hacia abajo para configurar tu imagen destacada. No importa si creas la publicaci\u00f3n con Divi Builder o cualquier otro editor, siempre y cuando uses el tema Divi<\/a>.<\/p>\n [\/et_pb_text][\/et_pb_column][et_pb_column type=\u00bb1_2″ _builder_version=\u00bb3.25″ custom_padding=\u00bb|||\u00bb custom_padding__hover=\u00bb|||\u00bb][et_pb_image src=\u00bbhttps:\/\/divimundo.com\/wp-content\/uploads\/2019\/02\/set-featured-image-wordpress.png\u00bb alt=\u00bbEstablecer imagen destacada en WordPress\u00bb title_text=\u00bbEstablecer imagen destacada en WordPress\u00bb show_in_lightbox=\u00bbon\u00bb align_tablet=\u00bbcenter\u00bb align_phone=\u00bb\u00bb align_last_edited=\u00bbon|desktop\u00bb _builder_version=\u00bb3.23″ box_shadow_style=\u00bbpreset2″][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=\u00bb1_2,1_2″ _builder_version=\u00bb3.25″][et_pb_column type=\u00bb1_2″ _builder_version=\u00bb3.25″ custom_padding=\u00bb|||\u00bb custom_padding__hover=\u00bb|||\u00bb][et_pb_text _builder_version=\u00bb3.27.4″]<\/p>\n Seleccione una imagen existente o cargue una nueva imagen en la biblioteca multimedia de WordPress. Introduzca el t\u00edtulo deseado en el campo \u00abCaption\u00bb situado a la derecha de las im\u00e1genes. Haga clic en el bot\u00f3n \u00abEstablecer imagen destacada\u00bb<\/p>\n [\/et_pb_text][\/et_pb_column][et_pb_column type=\u00bb1_2″ _builder_version=\u00bb3.25″ custom_padding=\u00bb|||\u00bb custom_padding__hover=\u00bb|||\u00bb][et_pb_image src=\u00bbhttps:\/\/divimundo.com\/wp-content\/uploads\/2019\/02\/1-featured-image.png\u00bb alt=\u00bbElija la imagen destacada\u00bb title_text=\u00bbElija la imagen destacada\u00bb show_in_lightbox=\u00bbon\u00bb align_tablet=\u00bbcenter\u00bb align_phone=\u00bb\u00bb align_last_edited=\u00bbon|desktop\u00bb _builder_version=\u00bb3.23″ box_shadow_style=\u00bbpreset2″][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=\u00bb1_2,1_2″ _builder_version=\u00bb3.25″][et_pb_column type=\u00bb1_2″ _builder_version=\u00bb3.25″ custom_padding=\u00bb|||\u00bb custom_padding__hover=\u00bb|||\u00bb][et_pb_text _builder_version=\u00bb3.27.4″]<\/p>\n Desafortunadamente, esto no es suficiente para que se muestre el t\u00edtulo. Pero no te preocupes, s\u00f3lo toma unos minutos para arreglar. Comience descargando el archivo single.php<\/strong> desde el directorio \/wp-content\/themes\/Divi\/<\/em> en el directorio de su sitio web. Utilice un cliente ftp como FileZilla<\/a> o utilice el administrador de archivos en el panel de control de su cuenta de alojamiento web.<\/a><\/p>\n <\/p>\n [\/et_pb_text][\/et_pb_column][et_pb_column type=\u00bb1_2″ _builder_version=\u00bb3.25″ custom_padding=\u00bb|||\u00bb custom_padding__hover=\u00bb|||\u00bb][et_pb_image src=\u00bbhttps:\/\/divimundo.com\/wp-content\/uploads\/2019\/02\/2-image-caption-not-display.png\u00bb alt=\u00bbUtvald bild som inte visar bildtexten\u00bb title_text=\u00bbUtvald bild som inte visar bildtexten\u00bb show_in_lightbox=\u00bbon\u00bb align_tablet=\u00bbcenter\u00bb align_phone=\u00bb\u00bb align_last_edited=\u00bbon|desktop\u00bb _builder_version=\u00bb3.23″ box_shadow_style=\u00bbpreset2″][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=\u00bb3.25″][et_pb_column type=\u00bb4_4″ _builder_version=\u00bb3.25″ custom_padding=\u00bb|||\u00bb custom_padding__hover=\u00bb|||\u00bb][et_pb_text _builder_version=\u00bb3.27.4″]<\/p>\n Abra el archivo descargado y ed\u00edtelo en un editor, por ejemplo NotePad ++<\/a> para Windows o CotEditor<\/a> para Mac.<\/p>\n Encuentra esta l\u00ednea de c\u00f3digo:<\/p>\n … y agregue esta l\u00ednea de c\u00f3digo a continuaci\u00f3n:<\/p>\n Guarde y cargue su archivo actualizado single.php<\/strong> en su carpeta de temas de ni\u00f1o, por ejemplo \/wp-content\/themes\/your-childtheme<\/strong>\/<\/em><\/p>\n [\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/divimundo.com\/wp-content\/uploads\/2019\/02\/single-php-caption.png\u00bb alt=\u00bbL’gg en kod i single.php\u00bb title_text=\u00bbL’gg en kod i single.php\u00bb show_in_lightbox=\u00bbon\u00bb align_tablet=\u00bbcenter\u00bb align_phone=\u00bb\u00bb align_last_edited=\u00bbon|desktop\u00bb _builder_version=\u00bb3.23″ custom_margin=\u00bb||10px\u00bb box_shadow_style=\u00bbpreset2″][\/et_pb_image][et_pb_text _builder_version=\u00bb3.27.4″ text_font=\u00bb||||||||\u00bb text_orientation=\u00bbcenter\u00bb]<\/p>\n Single.php deber\u00eda tener un aspecto similar al siguiente cuando haya terminado. <\/em><\/p>\n [\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=\u00bb3.25″ locked=\u00bboff\u00bb][et_pb_column type=\u00bb4_4″ _builder_version=\u00bb3.25″ custom_padding=\u00bb|||\u00bb custom_padding__hover=\u00bb|||\u00bb][et_pb_text _builder_version=\u00bb3.27.4″]<\/p>\n La actualizaci\u00f3n surtir\u00e1 efecto en todas las publicaciones que contengan im\u00e1genes destacadas con subt\u00edtulos, independientemente de si se publicaron antes o despu\u00e9s de esta actualizaci\u00f3n.<\/p>\n [\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/divimundo.com\/wp-content\/uploads\/2019\/02\/3-display-image-caption.png\u00bb align_tablet=\u00bbcenter\u00bb align_phone=\u00bb\u00bb align_last_edited=\u00bbon|desktop\u00bb _builder_version=\u00bb3.23″ box_shadow_style=\u00bbpreset2″][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=\u00bb3.25″][et_pb_column type=\u00bb4_4″ _builder_version=\u00bb3.25″ custom_padding=\u00bb|||\u00bb custom_padding__hover=\u00bb|||\u00bb][et_pb_text _builder_version=\u00bb3.27.4″]<\/p>\n Pero el pie de foto se ve un poco aburrido, \u00bfverdad? Puede aplicar estilo al texto del t\u00edtulo mediante la clase CSS .custom_caption. <\/em>Aqu\u00ed hay un estilo simple que puede usar agregando el c\u00f3digo siguiente a Divi > Theme > Customizer CSS adicional. <\/em>Alinear\u00e1 el texto, lo har\u00e1 cursiva<\/em> y fijar el relleno y la altura de l\u00ednea (que es bueno si el t\u00edtulo de la imagen es lo suficientemente largo como para causar un salto de l\u00ednea).<\/p>\n [\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=\u00bb1_3,2_3″ make_equal=\u00bbon\u00bb _builder_version=\u00bb3.25″][et_pb_column type=\u00bb1_3″ _builder_version=\u00bb3.25″ custom_padding=\u00bb|||\u00bb custom_css_main_element=\u00bbmargin:auto;\u00bb custom_padding__hover=\u00bb|||\u00bb][et_pb_text _builder_version=\u00bb4.4.3″ background_color=\u00bb#f2f2f2″ custom_padding=\u00bb20px|30px|20px|30px|true|true\u00bb box_shadow_style=\u00bbpreset2″ locked=\u00bboff\u00bb]<\/p>\n .custom_caption {<\/em> [\/et_pb_text][\/et_pb_column][et_pb_column type=\u00bb2_3″ _builder_version=\u00bb3.25″ custom_padding=\u00bb|||\u00bb custom_padding__hover=\u00bb|||\u00bb][et_pb_image src=\u00bbhttps:\/\/divimundo.com\/wp-content\/uploads\/2019\/02\/4-featured-image-css1.png\u00bb alt=\u00bbCentrerad och kursiv bildtext\u00bb title_text=\u00bbCentrerad och kursiv bildtext\u00bb show_in_lightbox=\u00bbon\u00bb align_tablet=\u00bbcenter\u00bb align_phone=\u00bb\u00bb align_last_edited=\u00bbon|desktop\u00bb admin_label=\u00bbImage\u00bb _builder_version=\u00bb3.23″ box_shadow_style=\u00bbpreset2″ locked=\u00bboff\u00bb][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=\u00bb3.25″][et_pb_column type=\u00bb4_4″ _builder_version=\u00bb3.25″ custom_padding=\u00bb|||\u00bb custom_padding__hover=\u00bb|||\u00bb][et_pb_text _builder_version=\u00bb3.27.4″ text_font=\u00bb||||||||\u00bb text_orientation=\u00bbcenter\u00bb]<\/p>\n Eso es todo por ahora. \u00a1Buena suerte!<\/strong><\/p>\n [\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":" Agregue algunos fragmentos de c\u00f3digo y ver\u00e1 los subt\u00edtulos de la imagen destacada.<\/p>\n","protected":false},"author":1,"featured_media":30522,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[21,238,352],"tags":[],"class_list":["post-32299","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-divi-es","category-divi-2","category-tutoriales"],"_links":{"self":[{"href":"https:\/\/divimundo.com\/es\/wp-json\/wp\/v2\/posts\/32299","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/divimundo.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/divimundo.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/divimundo.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/divimundo.com\/es\/wp-json\/wp\/v2\/comments?post=32299"}],"version-history":[{"count":0,"href":"https:\/\/divimundo.com\/es\/wp-json\/wp\/v2\/posts\/32299\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/divimundo.com\/es\/wp-json\/wp\/v2\/media\/30522"}],"wp:attachment":[{"href":"https:\/\/divimundo.com\/es\/wp-json\/wp\/v2\/media?parent=32299"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/divimundo.com\/es\/wp-json\/wp\/v2\/categories?post=32299"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/divimundo.com\/es\/wp-json\/wp\/v2\/tags?post=32299"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
1. Agregue su imagen destacada<\/h2>\n
2. Agregue el t\u00edtulo de la imagen<\/h2>\n
3. Descargar single.php<\/h2>\n
3. Edita y sube single.php<\/h2>\n
print_thumbnail( $thumb, $thumbnail[\"use_timthumb\"], $titletext, $width, $height );<\/code><\/p>\necho '<p class=\"custom_caption\">'.get_the_post_thumbnail_caption().'<\/p>';<\/code><\/p>\n\u00a1Voil\u00e0! El t\u00edtulo ahora se muestra debajo de la imagen destacada<\/h2>\n
Bonus: Estilo de su imagen de leyenda con CSS personalizado<\/h2>\n
Css:<\/h3>\n
padding: 0px 8px;<\/em>
text-align: center;<\/em>
font-style: italic;<\/em>
line-height: 1.3em;<\/em>
}<\/em><\/p>\n