🔐 Yellow Pencil – Plugin de WordPres para CSS

¡Iniciamos una emocionante sección premium dedicada al fascinante plugin YELLOW PENCIL para WordPress! Este sorprendente complemento nos permite editar el CSS de nuestra página web de manera sumamente sencilla, sin necesidad de tener conocimientos previos en este complejo lenguaje. No solo podrás personalizar tu sitio de forma fácil, sino que también aprenderás CSS visualizando el código mientras realizas los cambios.

Características Destacadas

Yellow Pencil es un editor de estilo CSS para WordPress que te brinda la capacidad de personalizar el diseño de tu sitio web en tiempo real. Con este complemento, podrás:

• Personalizar cualquier página y tema sin necesidad de codificación.
• Realizar ediciones visuales con un solo clic en elementos específicos.
• Ajustar colores, fuentes, tamaños, posiciones y más con más de 60 propiedades de estilos.
• Tomar control total sobre el diseño de tu sitio web.

Editor Visual CSS

Yellow Pencil proporciona todas las herramientas necesarias para que personalices el diseño de tu sitio de manera eficiente. Algunas de sus características avanzadas incluyen:

• Cambio de tamaño visual.
• Funcionalidad de arrastrar y soltar.
• Herramienta de medición para precisión.
• Recursos con toneladas de patrones de fondo, fuentes de Google y paletas de colores de tendencia.
• Herramienta de respuesta avanzada para personalizar tu sitio en cualquier tamaño de pantalla.

Características Clave

Con Yellow Pencil, tendrás acceso a una variedad de características clave que facilitan la personalización de tu sitio web:

• Personalización de cualquier página y elemento.
• Edición de la página de inicio de sesión de WordPress.
• Selectores automáticos de CSS.
• Más de 60 propiedades CSS.
• Edición visual de margen y relleno.
• Editor de CSS en vivo.
• Vista previa en vivo.
• Historial de deshacer/rehacer.
• Exportación de archivos de hoja de estilo.

Herramientas de Diseño Avanzadas

Este complemento ofrece herramientas avanzadas y bibliotecas listas para usar que simplifican el proceso de diseño:

• Inspector de elementos flexibles.
• Inspector de un solo elemento.
• Herramienta de respuesta.
• Herramienta de búsqueda de elementos.
• Herramienta de medición.
• Vista de estructura metálica.
• Herramienta de información de diseño.
• Generador de gradiente.
• Gerente de animación.
• Generador de animación.
• Activos de diseño.

Recursos de Diseño

Amplía tus recursos de diseño con un solo clic. Yellow Pencil te ofrece:

• Más de 800 fuentes de Google.
• Más de 300 patrones de fondo.
• Imágenes de fondo de Unsplash.
• Paletas de colores planos y materiales.
• Más de 50 animaciones.

Propiedades CSS Personalizables

Yellow Pencil permite la personalización de una amplia gama de propiedades CSS, entre ellas:

Texto

• Familia tipográfica.
• Peso de fuente.
• Color.
• Sombra de texto.
• Tamaño de fuente.
• Altura de la línea.
• Estilo de fuente.
• Texto alineado.
• Transformación de texto.
• Espaciado de letras.
• Espaciado de palabras.
• Decoración de texto.
• Guion de texto.
• Ajuste de línea.

Fondo

• Color de fondo.
• Imagen de fondo.
• Clip de fondo.
• Modo de mezcla de fondo.
• Posición de fondo.
• Tamaño de fondo.
• Repetir fondo.
• Adjunto de fondo.

Otras Propiedades CSS

• Margen.
• Relleno.
• Frontera.
• Radio de frontera.
• Posición.
• Anchura.
• Altura.
• Liza.
• Flexbox.
• Animación.
• Sombra de la caja.
• Transición.
• Filtrar.
• Transformar.
• Opacidad.
• Monitor.
• Cursor.
• Flotador.
• Claro.
• Visibilidad.
• Eventos de puntero.
• Desbordamiento.

Compatibilidad Total

Yellow Pencil es compatible con cualquier tema y complemento de WordPress. Funciona perfectamente con constructores de páginas como Gutenberg, Elementor y otros. ¡Diseña tu sitio web a tu manera hoy mismo!

Funcionamiento

Este complemento genera códigos CSS en segundo plano mientras editas visualmente tu página web. No modifica ningún archivo de tema; en cambio, carga dinámicamente los códigos CSS generados, permitiéndote administrar los cambios en cualquier momento. ¡Haz que tu sitio web destaque con Yellow Pencil!

REPASO GENERAL AL PLUGIN

En esta primera clase puedes ver el potencial de esta fantástica herramienta donde podrás poner prácticamente todo como quieras de tu web, con el color que quieras, agregar bordes, separaciones, cambios de posición, etc y sin necesidad de saber código CSS.

En las siguientes clases premium iremos profundizando más en la herramienta para que te conviertas en un experto del diseño.

RESPONSIVE TOOL

Continuamos con una clase más del curso de YELLOW PENCIL para WordPress y en esta ocasión vamos a ver la herramienta responsive que sirve básicamente para hacer cambios CSS en diferentes resoluciones utilizando breakpoints.

Con esta herramienta podremos cambiar de sitio o esconder elementos en dispositivos móviles solo por ejemplo, entre otras muchas más cosas.

ANIMACIONES PERSONALIZADAS

En este tercer video del plugin de CSS para WordPress YELLOW PENCIL vamos a centrarnos en la creación de animaciones en distintos elementos de nuestra web. Pueden ser títulos, párrafos, imágenes, contenedores, etc.

Podremos utilizar animaciones que vienen por defecto o crear las nuestras propias con secuencias de cambios de colores, movimiento de objetos o cualquier otra cosa que se te pase por la cabeza.

Además disponemos de una línea de tiempo donde enlazar unas animaciones con otras para dejar fluir toda nuestra imaginación.

MARGIN Y PADDING

Continuamos con una nueva clase de YELLOW PENCIL y hoy vamos a explicar que es el margin y que es el padding ya que son parámetros que se suelen confundir sobre todo al principio.

Veremos que tipos hay y sobre todo la diferencia entre los dos.

BORDES Y RADIOS

Nueva clase de YELLOW PENCIL y hoy vamos a ver como crear bordes a los diferentes elementos tanto arriba, abajo, izquierda o derecha o en los 4 lados.

Además veremos como redondear las esquinas de los bordes con el radio que nosotros queramos.

OCULTAR ELEMENTOS

Otra clase más de YELLOW PENCIL y hoy vamos a ver como ocultar elementos con CSS.

En el video veremos las diferencias entre las 2 formas que hay (display:none y visibility:hidden) y como afecta cada una de ellas.