TIPS Genéricos para el tema Orbital para poder configurar secciones y partes generales de Orbital, añadiendo una personalización súper propia y haciendo tu web única
Contenido de Orbital en ancho completo (Full Width)
Unas de las características de orbital es que se puede modificar su anchura desde las opciones de apariencia. ¿Pero quieres hacer una sección a anchura completa para diferenciar en formato desktop?. ÉSTO es lo que debes hacer:
*El CSS de Ajuste de Cuerpo General sirve para textos y encabezados, para el resto de módulos o bloques que queramos insertar, es necesario insertar previamente el bloque “Fondo” con la clase del CSS Bloque Fondo “fondowp” e insertar en su interior todos los bloques que deseemos de cualquier tipo. Ver Vídeo para + info
CSS Cuerpo General
/* ANCHO COMPLETO GENERAL */
#content-wrapper {
padding: 0px;
width: 100%;
overflow-x:hidden;
}
Para darle un margen al Footer:
/* CENTRAR FOOTER */
.site-footer {
width:80%;
margin:auto;
}
CSS Bloque Fondo
/* CLASE PARA BLOQUE FONDO */
@media (min-width: 1040px){
.fondowp {
height: auto;
min-height: auto;
}
.fondowp p {
width: 95%!important;
}
.fondowp .wp-block-cover__inner-container {
width: 80%!important;
}
}
@media (max-width: 1040px){
.fondowp {
height: auto;
min-height: auto;
}
.fondowp p {
width: 95%!important;
}
.fondowp .wp-block-cover__inner-container {
width: 95%!important;
}
}
Si quieres dar una imagen profesional y que una vez que alguien llegue hasta el final en tu web vea una buena imagen corporativa consonante con tu branding, te recomendamos los siguientes TIPS:
/* IMAGEN DE FONDO EN FOOTER */
.site-footer {
border-top: 0px;
background-image: url(https://tuweb.com/directorio/imagen.png);
background-size: cover;
background-position: bottom;
}
.widget-area {
background: transparent;
}
Recursos para Imágenes Gratis
Puedes descargar Imágenes en formato sin fondo (png o vectores como svg) con licencias gratuítas desde:
CSS TIPS Genéricos Orbital + Gutenberg
¿Quieres ver más trucos CSS para destacar el diseño de tu web de la manera más simple? mira éstos TIPS para que puedas combinarlos en los apartados que más te gusten en tus webs con orbital
Personalizar Columnas en Gutenberg
El bloque de Columnas de Gutenberg es muy práctico y personalizando un mínimo nuestras columnas podemos conseguir un toque distinto, combinando propiedades de bordes y fondos
CSS General Columnas
/* CSS para Delimitar Columnas */
.columnaswp {
border-radius: 20px;
border: 2px solid black;
padding: 1rem 1.2rem!important;
}
.columnawp1 {
border: 1px solid black;
padding: 10px;
margin: auto;
margin-top: inherit;
}
.columnawp1 p{
margin-bottom: 0.5rem;
margin-top: 0.5rem;
}
.columnawp2 {
border: 1px solid black;
padding: 10px;
margin: auto;
margin-top: inherit;
}
.columnawp2 p{
margin-bottom: 0.5rem;
margin-top: 0.5rem;
}
Propiedades CSS para Bordes
dotted- Defines a dotted borderdashed- Defines a dashed bordersolid- Defines a solid borderdouble- Defines a double bordergroove- Defines a 3D grooved border. The effect depends on the border-color valueridge- Defines a 3D ridged border. The effect depends on the border-color valueinset- Defines a 3D inset border. The effect depends on the border-color valueoutset- Defines a 3D outset border. The effect depends on the border-color valuenone- Defines no borderhidden- Defines a hidden border
Color de Fondo
El color de Fondo de la columna principal es posible seleccionarlo desde el editor de WordPress
Para las propiedades CSS .columnawp1, .columnawp2, etc… (depende el numero de columnas que tengamos duplicar ésto) es necesario aplicar la siguiente propiedad:
/* CSS para Fondo columnas independientes */
.columnawp1 {
background-color: #e0b706;
/*Añadir código hexadecimal del color que queramos*/
border: 4px outset;
padding: 10px;
margin: auto;
margin-top: inherit;
}
.columnawp1 p{
margin-bottom: 0.5rem;
margin-top: 0.5rem;
}
Selector de Color Hexadecimal
Aquí tienes ésta herramienta para que puedas elegir el color que más te guste y copiarlo para añadir a tu propiedad
Propiedad CSS Box Shadow
Si quieres un sombreado exterior alrededor de tus columnas, éste codigo puedes variarlo por color, tamaño y profundidad para obtener el efecto que desees:
/* CSS para Box Shadow*/ box-shadow: 0px 5px 1rem 1px #C1BCC1;
*Se debe añadir a cualquier propiedad css que tenga un punto delante como .columnaswp
- Optimizado para Gutenberg
- Soporte ilimitado
- Monetiza tu WEB
- Mejora los Rankings en Google
- Actualizaciones de por vida
Últimas Novedades de nuestro Blog
Mira los artículos de nuestro Blog con los mejores consejos tras la experiencia de uso del Tema Orbital enfocado a SEO y posicionamiento.
