Inicio ┬╗ Divi ┬╗ A├▒adir iconos a la barra superior de Divi

A├▒adir iconos a la barra superior de Divi

Escrito por Miguel de Pineda

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