¡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.
¿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″]
0 comentarios