Soporte » Plugins y Hacks » Poner zona de widget debajo de cabecera de pagina principal

  • alvaros

    (@alvaros)


    Buenas a todos.
    Estoy utilizando el tema «customizr».
    Este tema permite 5 zonas de widgets. Dos en los laterales y 3 en el footer.

    Quisiera poder poner un widget de redes sociales justo debajo de la cabecera de la página principal. Es decir, tendría que añadir una nueva zona de widget justo ahí.
    Cómo puedo conseguirlo?
    A través de la instalación de algún plugin o con código?

    Saludos y gracias.

Viendo 12 respuestas - de la 1 a la 12 (de un total de 12)
  • Hola!
    Buena elección de tema 🙂

    ¿Tal vez no te sirve la sección por defecto para redes sociales de la cabecera?
    Mira este ejemplo

    por favor avísame si eso te sirve.

    Saludos

    • Esta respuesta fue modificada hace 7 años por Jorge Calle. Razón: Imagen añadida
    Iniciador del debate alvaros

    (@alvaros)

    Hola @geost .
    Lo primero, muchas gracias por contestarme.

    Exacto eso lo tuve en cuenta, no obstante me gustaría tener el botón de las redes sociales más visible, justo debajo de la foto de cabecera de mi página principal.
    Alomejor con algún page builder podría conseguirlo?

    Gracias

    Hola @alvaros,

    De nada 🙂

    Me gustaría tener más claro el panorama para ver cómo puedo ayudarte. ¿Te gustaría tener tus íconos de redes sociales en la sección que muestro aquí? screenshot

    Por lo general si el tema no posee su propio page builder es poco probable que lo puedas integrar por parte de un tercero. De todas maneras investigaré sobre eso.

    Saludos

    Iniciador del debate alvaros

    (@alvaros)

    Gracias por contestar @geost .
    SIento mucho la tardanza en mi réplica.

    Exacto, justo ahí es donde quiero tener el icono de redes sociales?
    Tiene alguna solución?

    Gracias de nuevo.

    Moderador LGrusin

    (@lgrusin)

    No tiene por qué ser un widget, puede ser un menú o simplemente añade el código fuente en HTML de los iconos sociales debajo de la cabecera.

    Un saludo

    De nada @alvaros 🙂

    Tal y como dice @lgrusin. Lo más simple y rápido es añadir un pedazo de código HTML.

    Cuéntame, ¿estás familiarizado con HTML?

    El código HTML que necesitas vendría a ser algo como este, tienes que editar los enlaces (href) con las direcciones de tus redes sociales. Cada bloque que empieza con una etiqueta de enlace <a es un ícono.

     <div class="social-block">
        <div style="text-align: center; padding: 30px 0 35px 0; font-size: 30px;">
    
    <a rel="nofollow" class="social-icon icon-facebook-official" title="Síguenos en Facebook" aria-label="Síguenos en Facebook" href="https://facebook.com/tu-fan-page" target="_blank"><i class="fa fa-facebook-official"></i></a>
    
    <a rel="nofollow" class="social-icon icon-twitter" title="Síguenos en Twitter" aria-label="Síguenos en Twitter" href="https://twitter.com/tu-twitter" target="_blank"><i class="fa fa-twitter"></i></a>></div>
        </div>
    

    De todas formas, te daré instrucciones para que tengas una solución de donde partir. Para esto te recomiendo que uses un tema hijo para que no se te pierdan los cambios que vamos a hacer al tema en una actualización del mismo, más información aquí.

    Vamos con los pasos:

    1. En el Escritorio de WordPress ingresa a Apariencia->Editor. En el panel lateral derecho donde dice Elige tema a editar; selecciona Customizr. Abajo donde dice Plantillas da clic en la que lleva el nombre czr-front.ph.
    2. Una vez que se ha abierto este archivo usa la opción Buscar del navegador (aplasta ctrl+F), escribe o pega lo siguiente y da enter/intro para buscar:
      <!-- /#customizr-slider -->
    3. Abajo de la línea que acabamos de ingresar pega el código HTML que te indiqué arriba.
    4. Finalmente al final de la página del editor da clic en Actualizar archivo
    Iniciador del debate alvaros

    (@alvaros)

    Hola @geost
    Muchisímas gracias por tu explicación, además, no conocía los tema hijo y contigo los he aprendido.
    En cuanto llegue a casa pruebo lo que dices y te comento.

    Muy bien explicado, muchas gracias de nuevo!

    Hola,

    Gracias por tus comentarios @alvaros

    Ok, me cuentas cómo te va con eso 🙂

    Iniciador del debate alvaros

    (@alvaros)

    Hola de nuevo @geost

    Lo he probado y funciona correctamente! Muchas gracias!!

    Ahora me pregunto como podría darle color a los iconos así como tamaño personalizado.

    Un saludo y gracias de nuevo.

    Hola @alvaros

    ¡Genial! De nada. Por cierto acabo de darme cuenta que se me ha ido un > de más en </a>>, sería bueno que lo borres por favor 😉

    Ahora, para lo que es tamaño puedes cambiar el valor numérico en font-size: 30px;.

    Para lo que es color hay que modificar el código de la siguiente forma:

    1. Nos concentramos en este pedazo de código para cada red social:
      <i class="fa fa-facebook-official">
    2. Y lo modificamos añadiendo style="color: #335795;" la parte importante que debes tener en cuenta aquí es el código del color #335795, se llama hexadecimal. Si no estás muy familiarizado con el tema te recomiendo usar esta web para buscar el color y copiar el código HEX. Nuestro pedazo de código quedaría así:
      <i style="color: #335795;" class="fa fa-facebook-official">

    Puedes hacer el proceso para cada ícono. Cuéntame si todo marcha bien 🙂

    Saludos

    • Esta respuesta fue modificada hace 7 años por Jorge Calle. Razón: edición código
    Iniciador del debate alvaros

    (@alvaros)

    Todo correcto amigo @geost ! Muchísimas gracias!

    Chévere @alvaros. Qué bueno que todo haya funcionado 🙂

Viendo 12 respuestas - de la 1 a la 12 (de un total de 12)
  • El debate ‘Poner zona de widget debajo de cabecera de pagina principal’ está cerrado a nuevas respuestas.