El pie de página personalizado te permite reemplazar el pie de página predeterminado de tu base de conocimientos por tu propio diseño HTML y CSS. A diferencia de las opciones predefinidas de pie de página , el pie de página personalizado te da control total sobre lo que aparece en la parte inferior de cada página, incluyendo grupos de enlaces de varias columnas, tu logotipo, el texto de derechos de autor, datos de contacto, iconos sociales o cualquier otro contenido que tu marca requiera. Construir un pie de página personalizado requiere conocimientos prácticos de HTML y CSS.
Cuándo usar el suelo personalizado
- Disposiciones de varias columnas : cuando necesitas organizar enlaces de pie de página en columnas etiquetadas (como Producto, Recursos y Empresa), el formato de fila única del pie de página básico no es suficiente.
- Diseño coherente con la marca : aplica los colores exactos de tu marca, fuentes y estilo visual al pie de página sin estar limitado por la estructura fija del pie de página.
- Contenido enriquecido en el pie de página : añade un logo, declaración de misión, direcciones de oficina, datos de contacto o iconos sociales incrustados más allá de los cuatro apoyados en el pie básico.
- Enlazar PDFs o archivos : incrusta enlaces a archivos almacenados en tu Drive directamente en el HTML del pie de página.
Cómo crear un rodapélago personalizado
- Navega a Configuración () > Sitio de la base de conocimientos en la barra de navegación izquierda del portal de la base de conocimiento.
- En el panel de navegación izquierdo, navega hasta personalización del sitio.
- Haz clic en el botón Personalizar sitio .
- Selecciona cabecera y pie de página del sitio desde el desplegable.
- Haz clic en la pestaña de Pie de página y elige la opción de Página Personalizado . Aparecen tres opciones:
- Tema A : un tema oscuro predefinido. Puedes editar el código proporcionado si es necesario.
- Tema B - un tema ligero predefinido. Puedes editar el código proporcionado si es necesario.
- Blank : un editor vacío para escribir tu propio pie de página HTML desde cero.
- Selecciona la opción que prefieras y añade o edita el código HTML y CSS.
NOTA
Un pie de página personalizado se aplica a todas las páginas de tu sitio de base de conocimiento.
Cómo guardar y publicar
- Utiliza el interruptor de Vista previa a la derecha para revisar tus cambios.
- Haz clic en Guardar para guardar tus cambios.
- Haz clic en Publicar para hacer cambios en directo.
Cómo enlazar un PDF o archivo en el pie de página personalizado
- Navega hasta Drive () en la barra de navegación izquierda del portal de la Base de Conocimiento y selecciona el archivo deseado. Aparece el panel de detalles del archivo .
- En la sección de Ubicación , haz clic en el icono Copiar para copiar el enlace del archivo.
- Navega a Configuración () > Sitio de la base de conocimientos > Personalización del sitio y haz clic en Personalizar sitio.
- Selecciona cabecera y pie de página del sitio desde el desplegable.
- Haz clic en la pestaña de Pie de página y elige la opción de Página Personalizado .
- Elige el tema que quieras.
- En la sección de código personalizado, pega el enlace copiado en la ubicación deseada como un
<a href>elemento.
Plantillas personalizadas para el pie de página
Las siguientes plantillas están listas para usar. Para implementar cualquier diseño, navega a Configuración () > Sitio de la base de conocimientos Personaliza encabezado y pie de página > > Pie de página > Página personalizado > En blanco, y pega el HTML y CSS en las secciones respectivas.
NOTA
Puedes ajustar estilos como colores, tamaños de fuente o espacios para que encajen mejor con tu marca.
Diseño de la base 1
Un pie de página de varias columnas con secciones de enlaces de Producto, Recursos, Alianzas, Empresa y Soporte, iconos de redes sociales, una entrada de correo electrónico y un botón de solicitud de demostración. Incluye una barra inferior con enlaces legales.
Código HTML
<div class="container">
<div class="footer">
<div class="footer-top">
<div>
<h4>PRODUCT</h4>
<ul>
<li>Features overview</li>
<li>Platform capabilities</li>
<li>Integrations</li>
<li>Plans and pricing</li>
<li>Use cases</li>
<li>Enterprise solutions</li>
<li>Industry applications</li>
</ul>
</div>
<div>
<h4>RESOURCES</h4>
<ul>
<li>Documentation</li>
<li>Blog and articles</li>
<li>Webinars and tutorials</li>
<li>Guides and ebooks</li>
<li>Community stories</li>
<li>ROI calculators</li>
<li>Newsletter archive</li>
<li>Help articles</li>
</ul>
</div>
<div>
<h4>PARTNERSHIPS</h4>
<ul>
<li>Partner program</li>
<li>Technology partners</li>
<li>Platform integrations</li>
<li>Developer resources</li>
<li>Partner directory</li>
<li>Affiliate program</li>
</ul>
</div>
<div>
<h4>COMPANY</h4>
<ul>
<li>About us</li>
<li>Our team</li>
<li>Careers</li>
<li>Media kit</li>
<li>Events and webinars</li>
<li>Customer highlights</li>
<li>Contact us</li>
</ul>
</div>
<div>
<h4>SUPPORT</h4>
<ul>
<li>Help center</li>
<li>Contact support</li>
<li>Community forum</li>
<li>System status</li>
<li>Release notes</li>
<li>Accessibility policy</li>
<li>API docs</li>
<li>Changelog</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<div class="footer-logo">
<span style="font-size:40px;font-weight:1200;color:#0042E4;">Company name</span>
</div>
<div class="icons">
<ul>
<li class="facebook"><a href="https://www.facebook.com"><i class="fab fa-facebook-f"></i></a></li>
<li class="linkedin"><a href="https://www.linkedin.com/in"><i class="fab fa-linkedin-in"></i></a></li>
<li class="twitter"><a href="https://www.twitter.com"><i class="fab fa-twitter"></i></a></li>
</ul>
<div class="footer-form">
<input type="text" id="fname" name="fname" placeholder="Enter your email" />
<button>Request a Demo</button>
</div>
</div>
</div>
<div class="footer-last">
<p>Terms of Service</p>
<p> Privacy Policy</p>
<p> Cookie Settings</p>
<p> Accessibility</p>
</div>
</div>
</div>
Código CSS
.footer {
padding-top: 112px;
}
.footer-top {
display: flex;
justify-content: space-between;
margin: auto;
width: 1225px;
}
.footer-top h4 {
font-size: 18px;
letter-spacing: 0.5px;
line-height: 23px;
font-weight: 600;
color: rgba(39, 40, 80, 1);
margin-bottom: 19px;
margin-top: 0px;
}
.footer-top ul {
list-style-type: none;
padding: 0px;
}
.footer-bottom {
display: flex;
justify-content: space-between;
position: relative;
width: 1225px;
margin: auto;
margin-top: 103px;
}
.footer-bottom ul {
list-style-type: none;
padding: 0px;
display: flex;
justify-content: center;
flex: 0 0 30%;
margin: 0px;
align-items: center;
}
.footer-bottom ul li a {
color: rgba(39, 40, 80, 1);
}
.footer-top ul li {
padding: 10px 0px 10px 0px;
font-size: 14px;
letter-spacing: 0.5px;
line-height: 19px;
font-weight: 400;
color: rgba(143, 143, 160, 1);
width: 185px;
}
.footer-last {
display: flex;
justify-content: flex-end;
width: 1225px;
margin-top: 25px !important;
margin: auto;
color: rgba(143, 143, 160, 1);
font-size: 14px;
margin-bottom: 76px;
}
.footer-last p {
flex: 0 0 13%;
color: rgba(143, 143, 160, 1);
font-size: 14px;
padding-left: 40px;
}
div.footer-bottom:before {
content: "";
position: absolute;
left: 0%;
right: 0;
bottom: 82px;
height: 5px;
width: 97%;
border-top: 1px solid #D9D9DF;
}
.icons {
display: flex;
flex: 0 0 50%;
align-items: center;
}
.footer-form button {
background-color: #0042E4;
color: white;
padding: 10px 16.34px 10px 16.5px;
font-size: 15px;
border: 0px;
font-weight: 700;
}
input#fname {
padding: 10px 100.84px 11px 16.6px;
width: 232px;
height: 40px;
font-size: 14px;
border: 1px solid RGB(193, 193, 204);
}
.fab {
font-family: "Font Awesome 5 Brands";
font-weight: 400;
font-size: 23px;
}
.icons ul li {
margin-right: 23px;
}
Diseño del rodapélago 2
Un pie de página mínimo con un gráfico SVG de fondo usando círculos y polígonos de colores, con texto de derechos de autor, política de privacidad y enlaces de términos de servicio centrados en la parte inferior.
Código HTML
<footer class="footer">
<div class="footer-background">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 200" preserveAspectRatio="none">
<!-- Colored Circles -->
<circle cx="120" cy="60" r="15" fill="#FFD166" opacity="0.6" />
<circle cx="400" cy="140" r="20" fill="#06D6A0" opacity="0.4" />
<circle cx="700" cy="100" r="10" fill="#EF476F" opacity="0.6" />
<circle cx="1050" cy="80" r="18" fill="#118AB2" opacity="0.5" />
<circle cx="1300" cy="130" r="12" fill="#073B4C" opacity="0.3" />
<circle cx="200" cy="180" r="10" fill="#FF9F1C" opacity="0.4" />
<circle cx="600" cy="190" r="14" fill="#8338EC" opacity="0.5" />
<circle cx="1000" cy="185" r="16" fill="#3A86FF" opacity="0.3" />
<!-- Polygons -->
<polygon points="250,160 260,140 270,160" fill="#FB5607" opacity="0.4" />
<polygon points="800,150 810,130 820,150" fill="#FF006E" opacity="0.5" />
<polygon points="1150,170 1160,150 1170,170" fill="#1982C4" opacity="0.3" />
</svg>
</div>
<div class="footer-content">
<div class="footer__col copyright">
<div class="footer__copy-links">
<a href="https://document360.com/privacy-policy" class="footer__copy-link">Privacy Policy |</a>
<a href="https://document360.com/terms-of-service" class="footer__copy-link">Terms of Service |</a>
<a href="tel:+1-800-000-0000" class="footer__copy-link">+1 800 000 0000</a>
</div>
<p>© 2025 Document360. All rights reserved.</p>
</div>
</div>
</footer>
Código CSS
.footer {
position: relative;
background-color: #fff;
color: #333;
padding: 60px 20px 40px;
text-align: center;
font-family: 'Segoe UI', sans-serif;
overflow: hidden;
}
.footer-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
}
.footer-background svg {
width: 100%;
height: 100%;
}
.footer-content {
position: relative;
z-index: 1;
}
.footer-content a {
color: #118AB2;
text-decoration: none;
}
.footer-content a:hover {
text-decoration: underline;
}
Diseño de la base 3
Un pie de página de ancho completo con fondo degradado, cuatro columnas (Empresa, Recibe ayuda, Compra online, Síguenos) y enlaces circulares de iconos para redes sociales. Utiliza la fuente Poppins y responde perfectamente.
Código HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Footer Design</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
</head>
<body>
<footer class="footer">
<div class="container">
<div class="row">
<div class="footer-col">
<h4>Company name</h4>
<ul>
<li><a href="#">about us</a></li>
<li><a href="#">our services</a></li>
<li><a href="#">privacy policy</a></li>
<li><a href="#">affiliate program</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Get help</h4>
<ul>
<li><a href="#">FAQ</a></li>
<li><a href="#">shipping</a></li>
<li><a href="#">returns</a></li>
<li><a href="#">order status</a></li>
<li><a href="#">payment options</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Shop online</h4>
<ul>
<li><a href="#">watch</a></li>
<li><a href="#">bag</a></li>
<li><a href="#">shoes</a></li>
<li><a href="#">dress</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Follow us</h4>
<div class="social-links">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>
Código CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
body {
line-height: 1.5;
font-family: 'Poppins', sans-serif;
background-color: #f4f4f9;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
max-width: 1170px;
margin: auto;
padding: 0 15px;
}
.row {
display: flex;
flex-wrap: wrap;
}
ul {
list-style: none;
}
.footer {
background: linear-gradient(135deg, #f3f4f6, #e5ecf9);
padding: 70px 0;
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
}
.footer-col {
width: 25%;
padding: 0 15px;
position: relative;
}
.footer-col h4 {
color: #333333;
font-size: 18px;
margin-bottom: 25px;
font-weight: 600;
position: relative;
padding-bottom: 10px;
}
.footer-col h4::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
background-color: #333333;
height: 2px;
width: 50px;
border-radius: 4px;
}
.footer-col ul li:not(:last-child) {
margin-bottom: 12px;
}
.footer-col ul li a {
font-size: 15px;
text-transform: capitalize;
color: #555555;
text-decoration: none;
font-weight: 300;
transition: all 0.3s ease;
display: block;
padding: 2px 0;
}
.footer-col ul li a:hover {
padding-left: 10px;
color: #1a1a1a;
}
.footer-col .social-links a {
display: inline-block;
height: 40px;
width: 40px;
background-color: #d1d5db;
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: #333333;
font-size: 18px;
transition: all 0.4s ease;
}
.footer-col .social-links a:hover {
background-color: #ffffff;
color: #4f46e5;
transform: scale(1.1);
}
@media(max-width: 767px) {
.footer-col {
width: 50%;
margin-bottom: 30px;
}
}
@media(max-width: 574px) {
.footer-col {
width: 100%;
}
}
Diseño de la base 4
Una disposición combinada de cabecera y pie de página. El encabezado utiliza un gradiente de coral a melocotón con enlaces de navegación. El pie de página utiliza un degradado azul claro con texto de derechos de autor y enlaces legales.
Código HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product name</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="na-header">
<div class="na-logo">Product name</div>
<div class="na-nav">
<a href="#">Contact Us</a>
<a href="#">Careers</a>
<a href="#">SDS</a>
<a href="#">About Us</a>
<a href="#">Where to Buy</a>
</div>
</div>
<div class="na-footer">
© 2024 by Product. All rights reserved.
</div>
</body>
</html>
Código CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
line-height: 1.6;
background-color: #fdfbff;
color: #2c2c2c;
}
.na-header {
background: linear-gradient(to right, #ff7e5f, #feb47b);
color: white;
padding: 20px 40px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.na-logo {
font-size: 26px;
font-weight: 700;
letter-spacing: 1px;
}
.na-nav a {
margin-left: 20px;
color: #ffffff;
text-decoration: none;
font-weight: 500;
font-size: 15px;
transition: all 0.3s ease;
position: relative;
}
.na-nav a::after {
content: '';
display: block;
height: 2px;
background: #ffffff;
width: 0%;
transition: width 0.3s ease;
position: absolute;
bottom: -4px;
left: 0;
}
.na-nav a:hover::after {
width: 100%;
}
.na-footer {
background: linear-gradient(to right, #f4f9ff, #e1ecf4);
color: #333333;
text-align: center;
padding: 20px 10px;
font-size: 14px;
border-top: 1px solid #d2dce7;
}
.na-footer a {
color: #0066cc;
text-decoration: none;
font-weight: 500;
}
.na-footer a:hover {
text-decoration: underline;
color: #004a99;
}
Diseño de pie 5
.png)
Una sección azul gris claro con dos paneles de tarjetas uno al lado del otro: una lista de actualizaciones de documentación más reciente con fechas y enlaces de lectura, y un panel de contacto con dirección, correo electrónico, teléfono y botones de Iniciar Prueba Gratuita / Reservar una Demo. Incluye una barra de derechos de autor en la parte inferior.
Código HTML
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document360 Highlights</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="custom-section">
<div class="custom-container">
<div class="article-box">
<h3 class="section-heading">Latest Documentation Updates</h3>
<ul class="article-list">
<li>
<p class="article-title">Using AI Writer to Generate Articles</p>
<p class="article-date">2 August, 2025</p>
<a href="#">READ MORE</a>
</li>
<li style="margin-top:15px;">
<p class="article-title">Enabling SSO with Azure AD in Document360</p>
<p class="article-date">19 July, 2025</p>
<a href="#">READ MORE</a>
</li>
<li style="margin-top:15px;">
<p class="article-title">Setting Up Custom Domain & SSL</p>
<p class="article-date">11 July, 2025</p>
<a href="#">READ MORE</a>
</li>
</ul>
</div>
<div class="contact-box">
<h3 class="section-heading">Get in Touch</h3>
<p>Document360</p>
<p>London, UK</p>
<a href="mailto:support@document360.com">support@document360.com</a>
<p class="contact-number">+XX XX XXXX XXXX</p>
<div class="button-group">
<button class="btn-filled">Start Free Trial</button>
<button class="btn-outlined">Book a Demo</button>
</div>
</div>
</div>
<div class="footer-info">
<p>©2024 Document360. All Rights Reserved.</p>
<div class="footer-links">
<a href="#">Privacy Policy</a>
<a href="#">Terms of Use</a>
<a href="#">Knowledge Base</a>
<a href="#">Security Center</a>
<a href="#">Contact Support</a>
</div>
</div>
</div>
</body>
</html>
Código CSS
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #f9f9f9;
color: #1a1a1a;
}
.custom-section {
background-color: #e6f0f3;
padding: 30px 20px;
}
.custom-container {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
gap: 40px;
}
.article-box,
.contact-box {
flex: 1 1 300px;
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}
.section-heading {
border-bottom: 2px solid #005f73;
padding-bottom: 5px;
display: inline-block;
margin-bottom: 15px;
color: #005f73;
}
.article-list {
list-style-type: none;
padding-left: 0;
}
.article-title {
margin: 5px 0;
font-weight: 600;
}
.article-date {
margin: 0;
font-size: 12px;
color: #666666;
}
.article-list a,
.contact-box a,
.footer-links a {
color: #0077aa;
text-decoration: none;
font-weight: 500;
}
.contact-number {
margin-top: 10px;
}
.button-group {
margin-top: 15px;
}
.btn-filled,
.btn-outlined {
padding: 10px 20px;
border: none;
cursor: pointer;
font-weight: 600;
border-radius: 4px;
}
.btn-filled {
background-color: #0077aa;
color: #ffffff;
}
.btn-outlined {
background-color: transparent;
color: #0077aa;
border: 1px solid #0077aa;
margin-left: 10px;
}
.footer-info {
margin-top: 40px;
font-size: 12px;
text-align: center;
padding-top: 20px;
border-top: 1px solid #cccccc;
color: #666666;
}
.footer-links {
margin-top: 15px;
}
.footer-links a {
margin: 0 10px;
}
Diseño del pie 6
Un pie de página en degradado azul verdoso claro con un gran encabezado, cuatro columnas de tarjetas (Servicios, Popular, Enlaces Útiles, Más) y una tarjeta de registro de la Comunidad con un botón con estilo. Los efectos de hover de las cartas añaden profundidad.
Código HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sample Footer</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="footer">
<div class="footer-content">
<h2>Workplace solutions and insights you can rely on.</h2>
<div class="footer-sections">
<div class="footer-column box">
<h3>Services</h3>
<ul>
<li>Sample service 1</li>
<li>Sample service 2</li>
<li>Sample service 3</li>
<li>Sample service 4</li>
</ul>
</div>
<div class="footer-column box">
<h3>Popular</h3>
<ul>
<li>Popular item 1</li>
<li>Popular item 2</li>
<li>Popular item 3</li>
<li>Popular item 4</li>
</ul>
</div>
<div class="footer-column box">
<h3>Useful Links</h3>
<ul>
<li>Sample link A</li>
<li>Sample link B</li>
<li>Sample link C</li>
<li>Sample link D</li>
</ul>
</div>
<div class="footer-column box">
<h3>More</h3>
<ul>
<li>Sample contact</li>
<li>Sample sustainability</li>
<li>Sample ESG</li>
<li>Sample compliance</li>
</ul>
</div>
</div>
<div class="footer-signup box">
<h3>Join Our Community</h3>
<p>Get the latest updates from Sample Product</p>
<button>Sign Up!</button>
</div>
</div>
</div>
</body>
</html>
Código CSS
body {
margin: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f0f4f8;
color: #2c3e50;
}
.footer {
background: linear-gradient(to bottom right, #dff6f0, #f1faff);
padding: 60px 20px;
text-align: center;
}
.footer h2 {
font-size: 28px;
margin-bottom: 50px;
color: #2c3e50;
}
.footer-sections {
display: flex;
justify-content: center;
gap: 50px;
flex-wrap: wrap;
margin-bottom: 40px;
}
.footer-column h3 {
color: #1baaa5;
margin-bottom: 15px;
font-size: 20px;
border-bottom: 2px solid #1baaa5;
display: inline-block;
padding-bottom: 5px;
}
.footer-column ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-column li {
margin-bottom: 10px;
font-size: 16px;
color: #34495e;
cursor: pointer;
}
.footer-signup button {
background-color: #1baaa5;
color: #ffffff;
padding: 12px 24px;
font-size: 16px;
font-weight: 600;
border: none;
border-radius: 8px;
cursor: pointer;
}
.box {
background-color: #ffffff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.box:hover {
transform: translateY(-5px);
box-shadow: 0 10px 18px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
.footer-sections {
flex-direction: column;
gap: 30px;
align-items: center;
}
}
Diseño de la base 7
Un pié de página en degradado en negrita de color verde a azul oscuro con una imagen de logo, una declaración de intenciones a la izquierda y tres columnas de enlaces (Sobre nosotros, Recursos, Enlaces rápidos) con animaciones de paso del cursor. Incluye una barra inferior de derechos de autor con enlaces de Términos, Privacidad y Cumplimiento.
Código HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Footer Sample</title>
</head>
<body>
<div class="custom-footer">
<div class="footer-container">
<div class="footer-logo">
<img src="https://placehold.co/150x150?text=Logo" alt="Brand Logo">
<p class="mission-statement">
Our Purpose<br>
<em>We aim to provide exceptional service and create value through innovation and dedication to excellence.</em>
</p>
</div>
<div class="footer-links">
<div class="footer-column">
<h4>ABOUT US</h4>
<ul>
<li><a href="#">Sample Link A</a></li>
<li><a href="#">Sample Link B</a></li>
<li><a href="#">Sample Link C</a></li>
<li><a href="#">Sample Link D</a></li>
<li><a href="#">Sample Link E</a></li>
</ul>
</div>
<div class="footer-column">
<h4>RESOURCES</h4>
<ul>
<li><a href="#">Help Center</a></li>
<li><a href="#">Documentation</a></li>
<li><a href="#">Sample Tools</a></li>
<li><a href="#">Community Forum</a></li>
<li><a href="#">Knowledge Base</a></li>
</ul>
</div>
<div class="footer-column">
<h4>QUICK LINKS</h4>
<ul>
<li><a href="#">Careers</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Legal</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2024 Sample Company | <a href="#">Terms</a> | <a href="#">Privacy</a> | <a href="#">Compliance</a></p>
</div>
</div>
</body>
</html>
Código CSS
body {
margin: 0;
font-family: 'Segoe UI', sans-serif;
background-color: #f5f7fa;
}
.custom-footer {
background: linear-gradient(135deg, #80d0c7, #13547a);
color: #ffffff;
padding: 40px 20px;
}
.footer-container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
max-width: 1200px;
margin: 0 auto;
gap: 30px;
}
.footer-logo {
flex: 2;
min-width: 260px;
}
.footer-logo img {
max-width: 160px;
margin-bottom: 20px;
}
.mission-statement {
font-size: 15px;
line-height: 1.7;
color: #fefefe;
}
.footer-links {
flex: 3;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 20px;
}
.footer-column {
flex: 1;
min-width: 180px;
background-color: rgba(255, 255, 255, 0.05);
padding: 20px;
border-radius: 10px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.footer-column:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.footer-column h4 {
font-size: 16px;
margin-bottom: 12px;
color: #ffd166;
}
.footer-column ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-column ul li a {
color: #ffffff;
text-decoration: none;
font-size: 14px;
transition: color 0.3s;
}
.footer-column ul li a:hover {
color: #ffeebb;
text-decoration: underline;
}
.footer-bottom {
text-align: center;
margin-top: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.3);
padding-top: 15px;
font-size: 14px;
}
.footer-bottom a {
color: #ffffff;
margin: 0 6px;
text-decoration: none;
}
@media (max-width: 768px) {
.footer-container {
flex-direction: column;
align-items: center;
}
.footer-links {
flex-direction: column;
}
}
Diseño de la base 8
Un pie de página en degradado pastel con cuatro columnas de tarjetas blancas (logotipo y contacto, Nuestros Servicios, Oficinas, Recursos) y un bloque de direcciones Visítanos con tarjetas para varias oficinas municipales. Incluye animaciones de vuelo en todas las cartas.
Código HTML
<footer>
<div class="footer-container">
<div class="footer-card footer-logo">
<img src="https://placehold.co/150x50?text=Logo" alt="Sample Brand Logo">
<p><i class="fas fa-phone"></i> Branch 1: <a href="tel:1234567890">123-456-7890</a></p>
<p><i class="fas fa-phone"></i> Branch 2: <a href="tel:9876543210">987-654-3210</a></p>
<p><i class="fas fa-envelope"></i> <a href="mailto:info@example.com">info@example.com</a></p>
<div class="social-icons">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-x-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<div class="footer-card">
<h3>Our Services</h3>
<ul>
<li><a href="#">Consulting</a></li>
<li><a href="#">Analytics</a></li>
<li><a href="#">Marketing</a></li>
<li><a href="#">Development</a></li>
</ul>
</div>
<div class="footer-card">
<h3>Offices</h3>
<ul>
<li><a href="#">Office A</a></li>
<li><a href="#">Office B</a></li>
<li><a href="#">Office C</a></li>
<li><a href="#">Office D</a></li>
</ul>
</div>
<div class="footer-card">
<h3>Resources</h3>
<ul>
<li><a href="#">Blog</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Privacy</a></li>
</ul>
</div>
</div>
<div class="footer-addresses">
<h3>Visit Us</h3>
<div class="address-block">
<div class="address-card">
<strong>City A</strong>
<p>123 Floor 6<br> abc</p>
</div>
<div class="address-card">
<strong>City B</strong>
<p>456 Street, 100<br>xyz area</p>
</div>
<div class="address-card">
<strong>City C</strong>
<p>789 Dr, Office dd<br> efg</p>
</div>
<div class="address-card">
<strong>City D</strong>
<p>xyz Tech Park<br>area, 00ab</p>
</div>
</div>
<p>Need help? <a href="#">Contact our support team</a></p>
</div>
</footer>
Código CSS
footer {
background: linear-gradient(135deg, #fdfcfb, #e2d1c3, #a1c4fd);
color: #2c3e50;
padding: 50px;
font-family: 'Segoe UI', sans-serif;
}
.footer-container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 30px;
}
.footer-card {
background: #fff;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
padding: 20px;
width: 22%;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.footer-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.footer-logo img {
max-width: 140px;
margin-bottom: 15px;
}
.footer-logo a {
color: #3498db;
text-decoration: none;
}
.social-icons {
margin-top: 15px;
display: flex;
gap: 15px;
}
.social-icons a {
font-size: 18px;
color: #3498db;
transition: color 0.3s ease;
}
.footer-card h3 {
font-size: 16px;
font-weight: bold;
margin-bottom: 12px;
color: #2c3e50;
}
.footer-card ul {
list-style: none;
padding: 0;
}
.footer-card ul li a {
color: #555;
font-size: 14px;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-card ul li a:hover {
color: #1abc9c;
}
.address-block {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.address-card {
background: #fff;
padding: 15px 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
width: 22%;
min-width: 200px;
}
Diseño de la base 9
Un pie de página en degradado azul claro con cuatro columnas de tarjeta blanca: una descripción del producto, enlaces rápidos, ubicaciones de oficinas y una sección de contactos con correo electrónico, teléfono, disponibilidad de soporte e iconos sociales con efectos circulares de estacionamiento.
Código HTML
<footer>
<div class="footer-container">
<div class="footer-box">
<h3>Product Name</h3>
<p>Sample product description goes here. This text is a placeholder for marketing content about your software or service.</p>
</div>
<div class="footer-box">
<h4>Quick Links</h4>
<ul>
<li><a href="#">About Product</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Testimonials</a></li>
</ul>
</div>
<div class="footer-box">
<h4>Our Offices</h4>
<p><strong>Head Office</strong><br>City<br>Country</p>
<p><strong>Branch Office</strong><br>Town<br>Country</p>
</div>
<div class="footer-box">
<h4>Contact</h4>
<p><i class="fas fa-envelope"></i> sample@email.com</p>
<p><i class="fas fa-phone"></i> +1 234 567 890</p>
<p><i class="fas fa-headset"></i> Support Available 24/7</p>
<div class="social-icons">
<a href="#" class="social-icon"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
<a href="#" class="social-icon"><i class="fab fa-linkedin-in"></i></a>
<a href="#" class="social-icon"><i class="fab fa-youtube"></i></a>
</div>
</div>
</div>
</footer>
Código CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');
body {
font-family: 'Poppins', sans-serif;
background-color: #f7f9fc;
margin: 0;
padding: 0;
}
footer {
background: linear-gradient(135deg, #f2f6fb, #e3f2fd);
color: #333;
padding: 50px 30px;
}
.footer-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 30px;
max-width: 1200px;
margin: 0 auto;
}
.footer-box {
flex: 1 1 22%;
background-color: #ffffff;
padding: 20px;
border-radius: 12px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
transition: transform 0.3s, box-shadow 0.3s;
}
.footer-box:hover {
transform: translateY(-5px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}
.footer-box h3,
.footer-box h4 {
margin-bottom: 15px;
color: #1a237e;
font-size: 18px;
}
.footer-box ul {
list-style: none;
padding: 0;
}
.footer-box ul li a {
text-decoration: none;
color: #1e88e5;
transition: color 0.3s;
}
.social-icons {
display: flex;
gap: 12px;
margin-top: 10px;
}
.social-icon {
background-color: #e1ecf9;
color: #1e88e5;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.social-icon:hover {
background-color: #1e88e5;
color: #ffffff;
transform: scale(1.1);
}
@media (max-width: 768px) {
.footer-container {
flex-direction: column;
align-items: center;
}
}
Diseño de la base 10
Un pié de página degradado de cian claro a verde con cuatro columnas: descripción del producto, enlaces rápidos (incluyendo un botón de Inicio de sesión con estilo), direcciones de oficina y una sección de contactos con iconos sociales. Adecuado para bases de conocimiento que necesitan un enlace de acceso al lector en el pie de página.
Código HTML
<footer>
<div class="footer-container">
<div class="footer-box">
<h3>Product Name</h3>
<p>Sample product description. Replace this text with real content about your company or service offering.</p>
</div>
<div class="footer-box">
<h4>Quick Links</h4>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="/Account/Login" class="login-link">Login</a></li>
</ul>
</div>
<div class="footer-box">
<h4>Offices</h4>
<p><strong>New England</strong><br>123 Main Street<br>Andover, MA</p>
<p><strong>Florida</strong><br>456 Ocean Drive<br>Tampa, FL</p>
</div>
<div class="footer-box">
<h4>Contact</h4>
<p><i class="fas fa-envelope"></i> contact@example.com</p>
<p><i class="fas fa-phone"></i> +1 234 567 890</p>
<p><i class="fas fa-headset"></i> 24/7 Support</p>
<div class="social-icons">
<a href="#" class="social-icon"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
<a href="#" class="social-icon"><i class="fab fa-linkedin-in"></i></a>
<a href="#" class="social-icon"><i class="fab fa-youtube"></i></a>
</div>
</div>
</div>
</footer>
Código CSS
footer {
background: linear-gradient(135deg, #e0f7fa, #f1f8e9);
color: #333;
padding: 40px 40px;
font-family: 'Poppins', sans-serif;
}
.footer-container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 30px;
}
.footer-box {
flex: 1 1 22%;
min-width: 220px;
}
.footer-box h4 {
font-size: 16px;
margin-bottom: 15px;
font-weight: 600;
color: #2e7d32;
}
.footer-box ul {
list-style: none;
padding: 0;
}
.footer-box ul li a {
text-decoration: none;
color: #0277bd;
transition: color 0.3s, padding-left 0.3s;
font-size: 14px;
}
.footer-box ul li a:hover {
color: #01579b;
padding-left: 8px;
}
.footer-box ul li a.login-link {
background-color: #64b5f6;
color: white;
padding: 6px 14px;
border-radius: 5px;
font-weight: 500;
display: inline-block;
}
.social-icons {
display: flex;
gap: 10px;
margin-top: 10px;
}
.social-icon {
background-color: #c8e6c9;
color: #2e7d32;
width: 38px;
height: 38px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
transition: background 0.3s, transform 0.3s;
}
.social-icon:hover {
background-color: #a5d6a7;
transform: scale(1.1);
}
@media (max-width: 768px) {
.footer-container {
flex-direction: column;
text-align: center;
}
}
Mejores prácticas
- Empieza desde una plantilla : incluso si planeas personalizar mucho el pie de página, empezar desde una de las plantillas proporcionadas es más rápido que escribir desde cero y garantiza una línea base funcional.
- Mantén el pie de página ligero : evita imágenes grandes o escrituras pesadas en el pie de página. Los pies de página se cargan en cada página, así que el rendimiento importa.
- Usa variables CSS para los colores de la marca : define los colores de tu marca como variables CSS en la parte superior de tu CSS para que puedas actualizarlas en un solo lugar si cambia tu paleta de marca.
- Prueba tanto en modo claro como oscuro : los fondos de pie de página y los colores de texto que se ven bien en modo claro pueden tener problemas de contraste en modo oscuro. Siempre previsualiza ambos.
- Comprueba la respuesta en móvil : usa
@media (max-width: 768px)puntos de interrupción para asegurarte de que el pie de página se apila bien en pantallas pequeñas.