CBSF -

<!DOCTYPE html>

<head>

<title>Guía de Instalación en WordPress – Bomberos</title>

<style>

:root {

–primary-color: #cf2029;

–bg-dark: #121212;

–card-bg: #1e1e1e;

–text-color: #ffffff;

–secondary-text: #b3b3b3;

–font-family: ‘Public Sans’, sans-serif;

}

body {

background-color: var(–bg-dark);

color: var(–text-color);

font-family: var(–font-family);

margin: 0;

padding: 20px;

line-height: 1.6;

}

.container {

max-width: 800px;

margin: 0 auto;

background-color: var(–card-bg);

padding: 40px;

border-radius: 12px;

box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);

}

h1 {

color: var(–primary-color);

border-bottom: 2px solid var(–primary-color);

padding-bottom: 10px;

margin-bottom: 30px;

}

h2 {

color: var(–primary-color);

margin-top: 40px;

}

.step {

margin-bottom: 25px;

padding-left: 20px;

border-left: 3px solid var(–primary-color);

}

.code-block {

background-color: #000;

color: #00ff00;

padding: 15px;

border-radius: 6px;

font-family: monospace;

overflow-x: auto;

margin: 15px 0;

font-size: 0.9em;

}

.highlight {

background-color: rgba(207, 32, 41, 0.2);

padding: 2px 6px;

border-radius: 4px;

color: var(–primary-color);

font-weight: bold;

}

ul {

list-style-type: none;

padding: 0;

}

li {

margin-bottom: 10px;

display: flex;

align-items: center;

}

li::before {

content: “•”;

color: var(–primary-color);

font-weight: bold;

display: inline-block;

width: 1em;

margin-left: -1em;

}

.footer {

margin-top: 50px;

text-align: center;

color: var(–secondary-text);

font-size: 0.9em;

}

</style>

</head>

<body>

<h1>Guía de Instalación en WordPress</h1>

<p>Para implementar el diseño de la página de reclutamiento y el formulario en tu sitio de WordPress, sigue estos pasos:</p>

<h2>1. Configuración de Estilos Globales</h2>

<p>Antes de añadir el contenido, configura los estilos base en tu tema:</p>

<ul>

<li><strong>Color Primario:</strong> <span class=”highlight”>#cf2029</span></li>

<li><strong>Fondo Oscuro:</strong> <span class=”highlight”>#1a1a1a</span></li>

<li><strong>Tipografía:</strong> <span class=”highlight”>Public Sans</span> (disponible en Google Fonts).</li>

<li><strong>Bordes:</strong> Redondeado de 8px para botones y campos.</li>

</ul>

</div>

<h2>2. Implementación del Formulario</h2>

<p>Añade un bloque de <strong>”HTML personalizado”</strong> en tu editor de WordPress y utiliza los códigos que generamos:</p>

<ul>

<li><strong>Paso 1:</strong> Copia el HTML del formulario y pégalo en el bloque HTML de la página.</li>

<li><strong>Paso 2:</strong> Ve a <strong>Apariencia > Personalizar > CSS adicional</strong> y pega el código CSS.</li>

</ul>

<p><em>Recomendación:</em> Usa plugins como “Contact Form 7” o “WPForms” para gestionar los envíos de los aspirantes.</p>

</div>

<h2>3. Galería y Testimonios</h2>

<p>Usa un constructor visual (Elementor, Divi o Gutenberg) para añadir las secciones de galería y testimonios:</p>

<ul>

<li><strong>Galería:</strong> Configura un carrusel con fondo oscuro y leyendas para cada foto.</li>

<li><strong>Testimonios:</strong> Crea tarjetas individuales con el color de fondo <span class=”highlight”>#1e1e1e</span> para que resalten sobre el fondo principal.</li>

</ul>

</div>

<h2>4. Optimización Móvil</h2>

<p>El diseño está optimizado para dispositivos móviles. Asegúrate de revisar la previsualización en WordPress para confirmar que los márgenes y tamaños se ajusten correctamente.</p>

</div>

</div>

</body>

</html>