✅¿No sabes CSS? No pasa nada ➡️ YELLOW PENCIL WORDPRESS

Empezamos una nueva sección premium donde vamos a ver el plugin YELLOW PENCIL para WordPress con el cual podemos editar el CSS de nuestra página web de una manera muy sencilla sin necesidad de tener conocimientos de este lenguaje. Además de poder editar de forma sencilla aprenderemos CSS al visualizar el código mientras hacemos los diferentes cambios.

CARACTERÍSTICAS

YellowPencil es un complemento de editor de estilo CSS de WordPress que le permite personalizar el diseño de su sitio web en tiempo real.

El complemento le permite personalizar cualquier página y tema sin codificación . Haga clic en un elemento y comience la edición visual. Ajusta colores , fuentes , tamaños , posiciones y mucho más. Tome el control total sobre el diseño de su sitio web con más de 60 propiedades de estilos.

Visual CSS Editor
YellowPencil proporciona todo lo que necesita para personalizar el diseño de su sitio. El complemento viene con características avanzadas como cambio de tamaño visual, arrastrar y soltar, herramienta de medición , así como un recurso de toneladas de patrones de fondo, fuentes de Google y paletas de colores de tendencia, también tiene una herramienta de respuesta avanzada que le permite personalizar su sitio para cualquier tamaño de pantalla .

Características clave
Personaliza cualquier página, cualquier elemento
Personalizar la página de inicio de sesión de WordPress
Selectores automáticos de CSS
Más de 60 propiedades CSS
Arrastrar y soltar visual
Edición de margen visual y relleno
Editor de CSS en vivo
Vista previa en vivo
Administra los cambios
Historial de deshacer / rehacer
Exportar archivo de hoja de estilo
Herramientas de diseño

El complemento le proporciona herramientas avanzadas y bibliotecas listas para usar para diseñar su sitio web sin esfuerzo.

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

Alcance muchos recursos de diseño con un solo clic. ¡Personalice el diseño de su sitio web para satisfacer sus necesidades!

Más de 800 fuentes de Google
Más de 300 patrones de fondo
Unsplash imágenes de fondo
Material y paletas de colores planos.
Más de 50 animaciones
Propiedades CSS: 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
Propiedades CSS: 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

Compatible con cualquier tema y complemento
Esto funciona a la perfección con casi cualquier tema y complemento de WordPress. Puede usarlo para editar las páginas que creó con los creadores de páginas.

Compatible con todos los constructores de páginas
El complemento le permite personalizar las páginas creadas con el editor de bloques Gutenberg, Elementor u otro generador de páginas. Vuelva a diseñar su sitio web hoy.

¿Como funciona esto?
El complemento genera códigos CSS como un desarrollador web profesional en segundo plano mientras edita la página web visualmente.

El complemento no modifica ningún archivo de tema, en lugar de cargar los códigos CSS generados en el sitio web de forma dinámica para que pueda administrar los cambios en cualquier momento.

 

COMPRAR PLUGIN

 

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.

*Esta sección se irá actualizando regularmente con nuevos videos semanales.

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.