Blog de programación, errores, soluciones

Chose Language:
Author: Admin/Publisher |not checked

WordPress block themes – Predefined styles (Español)

Los block themes de WordPress tienen una serie de predefied stiles, estos estilos son agregados por defecto al crear las diferentes secciones de nuestro tema en WordPress. Aunque puede que no parezca importante saberlo, es bueno tener en cuenta que existen fuera del contexto gráfico que utilizamos (GUI – Graphic User Interface).

Blocks

blocks class
columns wp-block-columns wp-block-column
Headings(h1,h2,h3,h4,h5,h6) wp-block-heading
images wp-block-image
group wp-block-group
spacer wp-block-spacer
Social wp-block-social-links
list wp-block-list
hr wp-block-separator (must be in hr)
Media text Media text wp-block-media-text
Comments wp-block-comments
nav wp-block-navigation
login wp-block-loginout
button wp-block-buttons wp-block-button
Posts  
Post-featured-image wp-block-post-featured-image
Post content wp-block-post-content
Post title wp-block-post-title
Post excerpt wp-block-post-excerpt wp-block-post-excerpt__excerpt(p element)
Post autor   wp-block-post-author wp-block-post-author__avatar wp-block-post-author__content wp-block-post-author__name
Post autor name wp-block-post-author-name
avatar wp-block-avatar
category wp-block-post-terms
Site  
Site logo wp-block-site-logo
Site title wp-block-site-title
Site tagline wp-block-site-tagline

typography

Pre-styles alignment classes

Aligns class
left has-text-align-left
center has-text-align-center
right has-text-align-right
top is-vertically-aligned-top
Vertical-center is-vertically-aligned-center
bottom is-vertically-aligned-bottom

Pre-styles fonts size

Font size class
Small has-small-font-size
Medium has-medium-font-size
Large has-large-font-size
X-large has-x-large-font-size

Pre-style Colors typography

color class
white has-white-color
black has-black-color
cyan-bluish-gray Has-cyan-bluish-gray-color
Vivid purple has-vivid-purple-color
Vivid red has-vivid-red-color
Luminous vivid orange has-luminous-vivid-orange-color
Luminous vivid amber has-luminous-vivid-amber-color
Light green cyan has-light-green-cyan-color
Vivid green cyan has-vivid-green-cyan-color
Pale cyan blue has-pale-cyan-blue-color
Vivid cyan blue has-vivid-cyan-blue-color
Pale Pink has-pale-pink-color

Backgrounds

Pre-Style Colors Background

background Class name
white has-white-background-color
black has-black-background-color
cyan-bluish-gray has-cyan-bluish-gray-background-color
Vivid purple has-vivid-purple-background-color
Vivid red has-vivid-red-background-color
Luminous vivid orange has-luminous-vivid-orange-background-color
Luminous vivid amber has-luminous-vivid-amber-background-color
Light green cyan has-light-green-cyan-background-color
Vivid green cyan has-vivid-green-cyan-background-color
Pale cyan blue has-pale-cyan-blue-background-color
Vivid cyan blue has-vivid-cyan-blue-background-color
Pale Pink has-pale-pink-background-color

Shadows

Las sombras son algo especial wordpress no le assigna una clase como tal, sino que le agrega el style inline a el elemento que le asignemos la sombra.

default shadows style added
Natural box-shadow:var(–wp–preset–shadow–natural)
Deep box-shadow:var(–wp–preset–shadow–deep)
Sharp box-shadow:var(–wp–preset–shadow–sharp
Outlined box-shadow:var(–wp–preset–shadow–outlined)
Crisp box-shadow:var(–wp–preset–shadow–crisp)

otras sombras posibles son las customizadas pero tendras que crearlas por ti mismo en la parte de crear sombras

bordes

al igual que las sombras los bordes seran agregados con style por ejemplo el borde de arriba sera agregado de la siguiente manera

style="border-color:#000000;border-width:1px;border-radius:5px"
Category: wordpress
Something wrong? If you found an error or mistake in the content you can contact me on Twitter | @luisg2249_luis.
Recent articles