cómo diseñar sección de llamada a la acción con gradiente animado en wordpress

«`html

Cómo diseñar sección de llamada a la acción con gradiente animado en WordPress

Paso 1: Crear una nueva sección en el editor de WordPress

1. Accede a tu panel de WordPress.
2. Navega a «Páginas» y selecciona la página donde deseas agregar la sección.
3. Haz clic en «Agregar bloque» y selecciona «Grupo» o «Sección».

Paso 2: Agregar el contenido de la llamada a la acción

1. Dentro del bloque de grupo, agrega un bloque de «Encabezado» para el título.
2. Agrega un bloque de «Texto» para la descripción.
3. Agrega un bloque de «Botón» para la llamada a la acción.

Paso 3: Estilizar la sección con CSS

    .cta-section {
        background: linear-gradient(270deg, #ff7e5f, #feb47b);
        padding: 50px;
        text-align: center;
        animation: gradient-animation 5s ease infinite;
    }

    @keyframes gradient-animation {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }

    .cta-section h2 {
        color: white;
        font-size: 2.5em;
    }

    .cta-section p {
        color: white;
        font-size: 1.2em;
    }

    .cta-section .wp-block-button__link {
        background-color: white;
        color: #ff7e5f;
        padding: 10px 20px;
        border-radius: 5px;
        text-decoration: none;
        transition: background-color 0.3s;
    }

    .cta-section .wp-block-button__link:hover {
        background-color: #ff7e5f;
        color: white;
    }

Paso 4: Aplicar la clase CSS a la sección

1. Selecciona el bloque de grupo o sección que creaste.
2. En el panel de configuración a la derecha, busca «Clase CSS adicional».
3. Escribe cta-section y guarda los cambios.

Paso 5: Publicar o actualizar la página

1. Haz clic en «Actualizar» o «Publicar» para guardar los cambios.
2. Visualiza la página para ver la sección de llamada a la acción con el gradiente animado.

«`