Inicio » Divi » Añadir iconos a la barra superior de Divi

Añadir iconos a la barra superior de Divi

Escrito por Miguel

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.

28 noviembre, 2016

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

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.

[ratings id=»1229″]

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.

Quizás también te guste…

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información básica sobre protección de datos Ver más

  • Responsable SEO Wolf .
  • Finalidad Moderar los comentarios.
  • Legitimación Tu consentimiento.
  • Destinatarios RAIOLA NETWORKS, S.L..
  • Derechos Acceder, rectificar y suprimir los datos.
  • Información Adicional Puedes consultar la información detallada en la Política de Privacidad.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Share This