Muestre su título debajo de la imagen destacada en Divi Posts
Al crear una publicación en WordPress, puede cargar una imagen destacada que se muestra entre el título y la copia del cuerpo. Para que Divi muestre su título debajo de esta imagen, debe agregar una línea de código. Te mostramos cómo y compartimos un estilo básico de subtítulos CSS. ¡Vamos!
¡Importante! Asegúrese de utilizar un tema secundario Divi. De lo contrario, los cambios se sobrescribirán la próxima vez que actualice Divi. Crea tu propio tema infantil gratis »
1. Agregue su imagen destacada
Comienza creando una publicación y desplázate hacia abajo para configurar tu imagen destacada. No importa si creas la publicación con Divi Builder o cualquier otro editor, siempre y cuando uses el tema Divi.
2. Agregue el título de la imagen
Seleccione una imagen existente o cargue una nueva imagen en la biblioteca multimedia de WordPress. Introduzca el título deseado en el campo «Caption» situado a la derecha de las imágenes. Haga clic en el botón «Establecer imagen destacada»
3. Descargar single.php
Desafortunadamente, esto no es suficiente para que se muestre el título. Pero no te preocupes, sólo toma unos minutos para arreglar. Comience descargando el archivo single.php desde el directorio /wp-content/themes/Divi/ en el directorio de su sitio web. Utilice un cliente ftp como FileZilla o utilice el administrador de archivos en el panel de control de su cuenta de alojamiento web.
3. Edita y sube single.php
Abra el archivo descargado y edítelo en un editor, por ejemplo NotePad ++ para Windows o CotEditor para Mac.
Encuentra esta línea de código:
print_thumbnail( $thumb, $thumbnail["use_timthumb"], $titletext, $width, $height );
… y agregue esta línea de código a continuación:
echo '<p class="custom_caption">'.get_the_post_thumbnail_caption().'</p>';
Guarde y cargue su archivo actualizado single.php en su carpeta de temas de niño, por ejemplo /wp-content/themes/your-childtheme/
Single.php debería tener un aspecto similar al siguiente cuando haya terminado.
¡Voilà! El título ahora se muestra debajo de la imagen destacada
La actualización surtirá efecto en todas las publicaciones que contengan imágenes destacadas con subtítulos, independientemente de si se publicaron antes o después de esta actualización.
Bonus: Estilo de su imagen de leyenda con CSS personalizado
Pero el pie de foto se ve un poco aburrido, ¿verdad? Puede aplicar estilo al texto del título mediante la clase CSS .custom_caption. Aquí hay un estilo simple que puede usar agregando el código siguiente a Divi > Theme > Customizer CSS adicional. Alineará el texto, lo hará cursiva y fijar el relleno y la altura de línea (que es bueno si el título de la imagen es lo suficientemente largo como para causar un salto de línea).
Css:
.custom_caption {
padding: 0px 8px;
text-align: center;
font-style: italic;
line-height: 1.3em;
}
Eso es todo por ahora. ¡Buena suerte!
-->[/et_pb_code][/et_pb_column][/et_pb_row][et_pb_row use_custom_gutter="on" custom_padding_last_edited="on|phone" admin_label="Row - CONTENT" module_class="dvcs_card_featured" _builder_version="4.16" _module_preset="default" background_color="#521d91" use_background_color_gradient="on" background_color_gradient_type="circular" background_color_gradient_direction_radial="top left" background_color_gradient_stops="#4a42ec 0%|#521d91 100%" background_color_gradient_start="#4a42ec" background_color_gradient_end="#521d91" width="90%" max_width="1120px" module_alignment="center" custom_margin="|||||false" custom_margin_tablet="|||||false" custom_margin_phone="|||||false" custom_margin_last_edited="on|desktop" custom_padding="50px|32px|50px|32px|true|true" custom_padding_tablet="" custom_padding_phone="|22px||22px||true" link_option_url="https://diviguiden.se/divi" link_option_url_new_window="on" border_radii="on|8px|8px|8px|8px" global_colors_info="{}"][et_pb_column type="4_4" _builder_version="4.16" _module_preset="default" custom_padding="|||" global_colors_info="{}" custom_padding__hover="|||"][et_pb_text _builder_version="4.18.0" _module_preset="1397eec0-e19d-4e2f-ac5e-d5b2bde2b06f" text_font="|||on|||||" text_text_color="#96cbd6" text_font_size="12px" text_orientation="center" background_layout="dark" text_font_size_phone="12px" global_colors_info="{}"]
Enlace de afiliados
[/et_pb_text][et_pb_text admin_label="Text - MAIN" _builder_version="4.18.0" _module_preset="1397eec0-e19d-4e2f-ac5e-d5b2bde2b06f" text_font="||||||||" header_font="||||||||" header_2_font="|700|||||||" header_2_text_align="center" header_2_text_color="#ffffff" header_2_font_size="37px" max_width="85%" max_width_tablet="95%" max_width_phone="100%" max_width_last_edited="on|phone" custom_margin="-22px||6px|||" custom_margin_tablet="32px||10px" custom_margin_phone="0px||15px|" custom_margin_last_edited="on|desktop" custom_padding="|10px|12px|10px||true" custom_padding_tablet="|32px||32px||true" custom_padding_phone="|0px||0px" custom_padding_last_edited="on|tablet" header_2_font_size_tablet="31px" header_2_font_size_phone="19px" header_2_font_size_last_edited="on|desktop" header_2_line_height_tablet="" header_2_line_height_phone="1.4em" header_2_line_height_last_edited="on|desktop" global_colors_info="{}"]
806 875 clientes ya han desatado el verdadero potencial de WordPress. Descarga Divi y comienza a crear sitios web hermosos hoy.
[/et_pb_text][et_pb_button button_url="https://divimundo.com/divi/" url_new_window="on" button_text="EXPLORA DIVI AHORA" button_alignment="center" admin_label="Button - SIGN UP TODAY" _builder_version="4.18.0" _module_preset="default" button_text_color="#333333" button_bg_color="#F7F8FA" transform_translate_linked__hover="off" custom_margin="0px||0px|" custom_margin_tablet="0px||0px|" custom_margin_phone="0px||0px" custom_margin_last_edited="on|desktop" custom_padding="14px|32px|14px|32px|true|true" custom_css_main_element="font-weight:bold !important;" box_shadow_style="preset3" box_shadow_color="rgba(0,0,0,0)" box_shadow_horizontal_last_edited="off|desktop" global_colors_info="{}" transform_styles__hover_enabled="on" transform_scale__hover_enabled="on" transform_translate__hover_enabled="on" transform_rotate__hover_enabled="on" transform_skew__hover_enabled="on" transform_origin__hover_enabled="on" transform_translate__hover="0px|-1px" box_shadow_color__hover_enabled="on" box_shadow_horizontal__hover_enabled="on" box_shadow_color__hover="rgba(255,74,158,0.2)" box_shadow_horizontal__hover="0px" button_bg_color__hover_enabled="on|hover" button_bg_color__hover="#FFFFFF" button_bg_enable_color__hover="on"][/et_pb_button][et_pb_text admin_label="Text - SECONDARY" _builder_version="4.18.0" _module_preset="1397eec0-e19d-4e2f-ac5e-d5b2bde2b06f" text_font="||||||||" text_text_color="rgba(255,255,255,0.75)" text_font_size="18px" header_font="||||||||" text_orientation="center" max_width="850px" custom_margin="40px||32px||false" custom_margin_tablet="32px||32px||true" custom_margin_phone="15px||0px||false" custom_margin_last_edited="on|desktop" text_font_size_tablet="17px" text_text_align="center" global_colors_info="{}"]
Pruebe hoy y obtenga su dinero de vuelta dentro de 30 días si usted no está contento. 100% libre de riesgos.
[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built="1" _builder_version="4.17.4" _module_preset="default" background_color="#FFFFFF" custom_margin="||||false|false" global_colors_info="{}"][et_pb_row _builder_version="4.17.4" _module_preset="default" background_color="RGBA(255,255,255,0)" global_colors_info="{}"][et_pb_column type="4_4" _builder_version="4.16" _module_preset="default" global_colors_info="{}"][et_pb_text _builder_version="4.18.0" _module_preset="1397eec0-e19d-4e2f-ac5e-d5b2bde2b06f" header_2_font_size="32px" header_2_font_size_tablet="28px" header_2_font_size_phone="23px" global_colors_info="{}"]
Artículos Relacionados
[/et_pb_text][et_pb_blog posts_number="3" _builder_version="4.18.0" _module_preset="d557fc3a-2152-401e-a7c8-c8666bb17e64" read_more_font="|700||on|||||" read_more_letter_spacing="0.5px" read_more_line_height="3em" global_colors_info="{}" custom_css_title_last_edited="on|phone" custom_css_title_phone="margin-bottom:5px"][/et_pb_blog][et_pb_button button_url="@ET-DC@eyJkeW5hbWljIjp0cnVlLCJjb250ZW50IjoicG9zdF9saW5rX3VybF9wYWdlIiwic2V0dGluZ3MiOnsicG9zdF9pZCI6IjI5MDY2In19@" button_text="Más artículos" button_alignment="center" _builder_version="4.18.0" _dynamic_attributes="button_url" _module_preset="default" button_font="|700|||||||" custom_margin="||60px|||" global_colors_info="{}"][/et_pb_button][et_pb_divider color="#d6d6d6" _builder_version="4.16" _module_preset="default" global_colors_info="{}"][/et_pb_divider][et_pb_comments _builder_version="4.18.0" _module_preset="default" header_level="h6" header_text_color="#7d75d9" custom_button="on" button_font="|700|||||||" button_use_icon="off" hover_enabled="0" custom_css_reply_button="color:#fff !important;" custom_css_message_field="border-radius:10px;" global_colors_info="{}" custom_css_reply_button__hover_enabled="on|hover" custom_css_reply_button__hover="color:#fff !important;" button_text_color="#FFFFFF" sticky_enabled="0"][/et_pb_comments][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built="1" admin_label="Section - CTA BACKGROUND OVERLAY" module_class="dvcs-highlighted-overlay" _builder_version="4.16" _module_preset="default" background_color="rgba(78,47,188,0.8)" locked="off" global_colors_info="{}"][/et_pb_section]
