Como agregar un botón personalizado en Divi

  • Autor Autor Nikkygeek
  • Fecha de inicio Fecha de inicio
Nikkygeek

Nikkygeek

Eta
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola amigos les hago una consulta como puedo poner un boton como en el de la imagen que voy a dejar y que lleve a una pagina X con los enlaces de las descargas... estoy trabajando DIVI, quizas sea más facil.
 

Adjuntos

  • Screenshot 2024-01-16 at 20-59-53 AWO-PGME-ELMG-DFR - Multipaste.webp
    Screenshot 2024-01-16 at 20-59-53 AWO-PGME-ELMG-DFR - Multipaste.webp
    75,1 KB · Visitas: 17
  • Screenshot 2024-01-16 at 20-59-41 Descargar A Way Out PC Full Español Sin Denuvo.webp
    Screenshot 2024-01-16 at 20-59-41 Descargar A Way Out PC Full Español Sin Denuvo.webp
    12,9 KB · Visitas: 17
Hola amigos les hago una consulta como puedo poner un boton como en el de la imagen que voy a dejar y que lleve a una pagina X con los enlaces de las descargas... estoy trabajando DIVI, quizas sea más facil.
Hola,

Para agregar un botón personalizado en Divi, puedes seguir estos pasos:

1. Abre el constructor de Divi en tu página.

2. Selecciona el módulo de "Botón" o "Button" en la sección de elementos.

3. En la configuración del módulo de botón, puedes personalizar el texto, el estilo y los colores según tus necesidades.

4. Una vez hecho esto, ve a la pestaña de "Enlace" en la configuración del módulo de botón.

5. Introduce la URL de la página a la que deseas que el botón lleve.

6. Si deseas abrir la página en una nueva pestaña del navegador, puedes habilitar la opción "Abrir en una nueva ventana del navegador".

7. Por último, guarda tus cambios y actualiza tu página para ver el botón personalizado en acción.

Recuerda que Divi te brinda opciones de diseño y personalización avanzadas, por lo que también puedes agregar estilos personalizados utilizando CSS si lo deseas. Espero que esto te ayude a agregar un botón personalizado en Divi. ¡Buena suerte con tu proyecto!
 
Buscas una función que te muestre los enlaces después de dar click al botón, o solo quieres crear un botón que al dar clic te lleve a una página y te muestre los enlaces o lo que tú quieras?
 
me sumo a la pregunta del amigo alex
 
Buscas una función que te muestre los enlaces después de dar click al botón, o solo quieres crear un botón que al dar clic te lleve a una página y te muestre los enlaces o lo que tú quieras?
Si exactamente.
 
Te ayudo en la parte de la seccion de descarga, agrega el siguiente codigo en tu archivo functions.php:
PD: el paste lo vende @kj2
LEER COMPLETO
PHP:
<?php
function descarga_shortcode($atts, $content = null)
{
    extract(
        shortcode_atts(
            array(
                'label' => '',
                'link' => ''
            ),
            $atts
        )
    );
    if (empty($label)) return '<fieldset>
    ' . apply_filters('the_content', $content) . '
    <p class="info" style="text-align: center;">
        <a href="' . $link . '" target="_blank" rel="noopener nofollow">Ver Enlaces</a>
    </p>
</fieldset>';
    return '<fieldset>
                <legend>' . $label . '</legend>
                ' . apply_filters('the_content', $content) . '
                <p class="info" style="text-align: center;">
                    <a href="' . $link . '" target="_blank" rel="noopener nofollow">Ver Enlaces</a>
                </p>
            </fieldset>';
}
add_shortcode('descarga', 'descarga_shortcode');
Y tambien agrega el siguiente css:
CSS:
*{
  box-sizing: border-box;
}
:root {
    --main-color: #8b0000;
    --main-color-2: #4b0000;
    --main-color-3: maroon;
}
fieldset {
    padding: 1.4em;
    margin: 0 0 1.5em;
    border: 1px solid #ccc;
}
legend {
    font-weight: 700;
    font-size: 1.2em;
}
.info {
    background: var(--main-color);
    background: -moz-linear-gradient(top,var(--main-color-3),var(--main-color-2));
    background: -webkit-gradient(linear,0% 0%,0% 100%,from(var(--main-color-3)),to(var(--main-color-2)));
    border: 1px solid #6b0000;
    border-radius: 0.5em;
    box-shadow: 0px 5px 10px rgba(0,0,0,.5);
    color: #fff;
    margin: 1em auto;
    font-size: 17px;
    padding: 1em;
    font-weight: 700;
    text-decoration: none;
}
.info a {
    color: #e2edf3;
    text-decoration: none;
}
.info a:hover {
    color: #e2edf3;
    border-bottom: 1px solid #fff;
}

Para utilizarlo debes agregar el shortcode con el siguiente formato utilizando un bloque Shortcode:
PHP:
[descarga label="Version 1.2.0.2 ElAmigos" link="https://v4.pastepc.net/?v=567"][/descarga]
Si quieres agregar algun comentario o informacion adicional puedes hacerlo dentro del shortcode asi (utilizando custom html):
PHP:
[descarga label="Version 1.2.0.2 ElAmigos" link="https://v4.pastepc.net/?v=567"]
El Repack Incluye:
1. Algo.
2. Algo.
3. Algo.
[/descarga]
O la tercera forma seria agregando dos bloques shortcode
el primero para abrir:
PHP:
[descarga label="Version 1.2.0.2 ElAmigos" link="https://v4.pastepc.net/?v=567"]
aqui puedes agregar otros bloques tipo parrafo o lista
y otro bloque para cerrar:
PHP:
[/descarga]

Una imagen de como se ve: (es en un wordpress propio)
descarga shortcode.webp
 
Atrás
Arriba