Añadir iconos a la barra superior de Divi

¡Hola de nuevo! Hoy os traemos otro truco para el theme de WordPress Divi. Si tienes un negocio local seguramente necesitarás ofrecer cierta información a tus usuarios como los días y horas de apertura o la ubicación del mismo. Aunque está información puedas incluirla en el cuerpo de la web es mejor resaltarla y que este siempre a la vista.

Aunque Divi nos permite incluir elementos en una barra superior, solo podemos incluir mail y número de teléfono por defecto. Así que vamos a mostraros cómo añadir más iconos e información a la barra superior.

Como puedes ver en la imagen inferior, para este ejemplo hemos incluido, además del teléfono y el correo que vienen por defecto, la ubicación y los horarios de apertura y cierre.

Para lograr esto solo debemos seguir unos sencillos pasos con los que podremos añadir toda la información que queramos. Lo primero que debemos hacer es acceder vía FTP a nuestra web y seguir la ruta wp-content -> themes -> Divi  y descargar el archivo header.php. Un vez hecho esto debemos subir este archivo a nuestro tema hijo y abrirlo.

Una vez abierto el archivo debemos buscar el id et-info que es la etiqueta dentro de la que se construyen los elementos del menú superior y replicar. Para facilitarlo os dejo el código que hemos usado en este ejemplo.

<div id="et-info">				
	<?php if ( '' !== ( $et_phone_number = et_get_option( 'phone_number' ) ) ) : ?>
		<span id="et-info-phone"><?php echo esc_html( $et_phone_number ); ?></span>
	<?php endif; ?>
 
	<?php if ( '' !== ( $et_email = et_get_option( 'header_email' ) ) ) : ?>
		<a href="<?php echo esc_attr( 'mailto:' . $et_email ); ?>"><span id="et-info-email"><?php echo esc_html( $et_email ); ?></span></a>
	<?php endif; ?>
 
	<?php if ( '' !== ( $et_location = et_get_option( 'header_location' ) ) ) : ?>
		<span id="et-info-location"><?php echo esc_html ( 'C/Dirección, 7' ); ?></span></a>
	<?php endif; ?>
 
	<?php if ( '' !== ( $et_location = et_get_option( 'header_horario' ) ) ) : ?>
		<span id="et-info-horario"><?php echo esc_html ( '13:00-16:00|20:30-23:30' ); ?></span></a>
	<?php endif; ?>
 
	<?php if ( '' !== ( $et_location = et_get_option( 'header_apretura' ) ) ) : ?>
		<span id="et-info-apertura"><?php echo esc_html ( 'Domingo 13:00-16:00 | Lunes Cerrado' ); ?></span></a>
	<?php endif; ?>
 
	<?php if ( true === $show_header_social_icons ) { get_template_part( 'includes/social_icons', 'header' ); } ?>
</div>

Dando estilos a la barra superior de Divi

Si os fijáis, hemos incluido un id diferente a cada uno de los elementos que vamos a colocar en el menú. Esto es necesario ya que ahora incluiremos por CSS el icono que va con cada texto e iremos centrando nuestra información. Para este caso concreto hemos usado este código:

#et-info { float: left; }
#et-info-phone, #et-info-email, #et-info-location, #et-info-horario, .et-cart-info span { position: relative; }
#et-info-phone:before { content: "\e090"; position: relative; top: 2px; margin-right: 2px; }
#et-info-phone { margin-right: 13px; }
#et-info-email:before { content: "\e076"; margin-right: 4px; }
#et-info-location:before { content: "\e081"; margin-right: 4px; margin-left: 13px;}
#et-info-horario:before { content: "}"; margin-right: 4px; margin-left: 13px;}
#et-info-apertura:before { content: "p"; margin-right: 4px; margin-left: 13px;}
#top-menu-nav > ul > li > a:hover, #et-secondary-menu > ul > li > a:hover, .fullwidth-menu a:hover, #et-info-email:hover, #et-info-location:hover, #et-info-horario:hover, #et-info-apertura:hover, .et-social-icons a:hover { opacity: 0.7; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }

Usar iconos de FontAwesome

Para este ejemplo hemos usado los iconos de la librería de Divi, que son los que están en el CSS como content: /nº/;. Pero si queremos tener mayor variedad podemos usar otros iconos. Lo primero que tenemos que hacer es instalar la librería de FontAwesome en nuestro tema hijo de Divi y luego poner el identificador del icono cambiando la fuente por la de FontAwesome.

Miguel de Pineda

Consultor SEO, dando vueltas en Google desde 2013. He trabajado en varias agencias de Marketing Digital, con clientes y proyectos propios. Focalizado en SEO para ecommerce desde 2015.