Saltar al contenido

CSS Tips

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;
}

Centrar Footer

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;
}
}

Footer Personalizado

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:

Imágen de Fondo en Footer

/* 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 border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on the border-color value
ridge - Defines a 3D ridged border. The effect depends on the border-color value
inset - Defines a 3D inset border. The effect depends on the border-color value
outset - Defines a 3D outset border. The effect depends on the border-color value
none - Defines no border
hidden - Defines a hidden border

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;
}

Aquí tienes ésta herramienta para que puedas elegir el color que más te guste y copiarlo para añadir a tu propiedad

    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

    Página creada por FernanTEC - ¿Quieres saber más?