¡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.

Añadir iconos al menú superior Divi

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.

¿Aun no tienes Divi?

Hazte ya con el theme de WordPress más potente de la historia.

¡Lo quiero!

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
 
 
 
<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>
 
 
 
 
 <!-- #et-info -->

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:

1
2
3
4
5
6
7
8
9
#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.

1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, average: 5,00 out of 5)
Cargando…

Miguel de Pineda Peñuela

Consultor SEO, soy un apasionado de cosas tan variopintas como el diseño web en WordPress, las redes sociales, la política o la Historia. Licenciado en Periodismo por la Universidad de Sevilla he trabajado en diferentes agencias de comunicación digital.

SEO Wolf Newsletter

Suscríbete a nuestra Newsletter

Únete a nuestra lista de correo para recibir las últimas noticias y actualizaciones de nuestro equipo.

Gracias por suscribirse