Share
Le mostraremos cómo puede realizar cambios visuales serios en sus sitios web de WordPress sin ninguna experiencia previa de CSS. Pero primero, tomemos un minuto para una pequeña apreciación de WordPress.
Antigua interfaz de wordpress¿Recuerda esto? Así es como se veía WordPress cuando nos enamoramos por primera vez. Once años más tarde, seguimos enamorados, pero (afortunadamente) ha cambiado tanto que apenas es reconocible..
Desde una simple plataforma de blogs hasta el sistema de gestión de contenido más popular del mundo, WordPress es ahora la base de cientos de miles de sitios web populares con un ejército de desarrolladores que trabajan en la plataforma, y un ejército de desarrolladores que crea tantos temas y complementos para es que venderlos es un trabajo de tiempo completo para mucha gente. Themeforest es probablemente la tienda de temas más famosa en línea, y cuentan con casi 20,000 temas, de los cuales la mayoría son para WordPress. Para poner eso en perspectiva, puede tener un sitio web completamente diferente cada día durante 54 años!
Sería difícil encontrar un producto comparable, pagado o gratis, que lo haga tan fácil paralos no codificadores pasan de cero a un sitio web completamente funcional con la misma facilidad.
En los últimos años, hemos visto que la personalización de WordPress es aún más fácil, gracias a la creciente lista de creadores de páginas que ayudan a los usuarios a reunir sus propios diseños con facilidad. Combine estas potentes herramientas de arquitectura con la creciente lista de complementos de seguridad, para compartir y comentar, es muy sencillo crear el sitio que siempre ha deseado..
Todo lo mencionado arriba te dará el 90% del camino; Todo el contenido que necesita, en una plataforma de confianza; Se ve casi perfecto gracias al arduo trabajo de los desarrolladores que crean excelentes temas y complementos.
Pero incluso con los mejores temas siempre querrá hacer pequeños cambios. Pequeñas ediciones visuales para hacer tuyo un tema, diferente a cualquier otra cosa. Ya sea redondeando las esquinas o engrosando los bordes o cambiando la sombra alrededor de un objeto, son estos cambios los que hacen que un gran tema sea perfecto.
Todos los cambios mencionados anteriormente se reducen apersonalizando CSS. Bastante fácil si eres un diseñador o un desarrollador, pero te gusta intentar leer la matriz si no lo eres..
Hacer cambios de CSS solía significar el uso de herramientas diseñadas para desarrolladores, herramientas como Inspectores del navegador para encontrar el relevante Selectores de CSS Y manipulándolos manualmente. Luego tendría que copiar ese CSS como texto, pegarlo en un editor de texto para asegurarse de que solo tuviera la información que necesitaba y que no hubiera seleccionado las opciones del navegador como casillas de verificación o los nombres de las hojas de estilo. Luego, crearía un tema secundario para su sitio de WordPress y lo copiaría allí, o usaría los cuadros CSS personalizados que ahora vienen con tantos temas. Es un proceso muy largo. Con tantos pasos, su exposición a cometer errores aumenta considerablemente y la resolución de problemas puede ser un problema..
Al igual que los creadores de páginas hicieron más fácil cambiar la estructura de un sitio de WordPress, CSS Hero hace posible la edición visual. Como no diseñador, puede mirar a un rincón y pensar "hacerlo curvo, no puede ser tan difícil", pero luego inspecciona el código necesario para hacer ese cambio y es desalentador;
La interfaz del héroe CSSUsar CSS Hero se siente más como usar Photoshop o un producto similar. Los controles deslizantes le permiten ajustar elementos como el relleno, los márgenes, la nitidez de las esquinas y los tamaños de fuente, mientras que las paletas de colores le permiten ajustar el aspecto predeterminado para que se adapte mejor al estilo y al tema de su marca.
Incluso los diseñadores veteranos y los gurús de CSS aprecian la interfaz fácil de usar en tiempo real. Simplemente hace que las cosas sean más suaves, más rápidas y más fáciles de ajustar..
¿Cuan sencillo? Tan fácil como instalar un plugin.
CSS Hero no incluye un manual de instrucciones largo porque no lo necesitarás. Le mostraremos cómo puede personalizar su sitio en un par de minutos..
Botón de perno CSS HeroCada personalización comienza con el clic de un rayo azul. Esto abre el menú de personalizaciones de CSS Hero en la parte frontal de su sitio web, sin perder el tiempo en el tablero de instrumentos, realizando cambios y luego volviendo al frente para ver qué aspecto tienen. Observa cómo suceden los cambios a medida que los haces..
Lo que hagas con el CSS depende de ti, déjalo en CSS Hero y funcionará como un encanto sin necesidad de realizar ninguna otra acción. También puedes copiarlo en untema infantil o su panel CSS personalizado. Tu CSS, tus reglas. Saltemos directamente a las ediciones!
Para esta demostración estamos usando el tema Divi de Elegant Themes. Este es uno de los muchos temas de Hero-Ready (lo que significa que hemos agregado todos los selectores que necesitas para que funcione de inmediato). Si no estás usando un tema Hero-Ready, aún puedes agregar tus propias clases e ID directamente en CSS Hero, o usar Modo cohete, pero vamos a llegar a eso más tarde.
Con la excepción de agregar un par de páginas y una publicación de blog, hemos empezado con Divi casi como está. Queremos mostrarte lo que hace CSS Hero a un tema nuevo. Estamos usando una publicación de blog como ejemplo porque quizás sea por defecto, la parte más sencilla de Divi. Es la única sección en la que no puede usar el generador de páginas incorporado, por lo que definitivamente aquí desea agregar sutoques personales.
En primer lugar, queremos cambiar ese encabezado (es muy plano), pero hay una pequeña línea gris debajo de lo que sucede. Vamos a usar CSS Hero para agregar una sombra debajo de ella y levantarla de la página. CSS Hero viene con un montón de opciones para agregar diferentes tipos de sombras, todas las cuales se pueden modificar para ayudarte a obtener el efecto deseado.
Sombra de la cajaA continuación vamos a cambiar el color muy ligeramente a blanco roto. Puede usar el selector de color incorporado para realizar estos cambios, o si está trabajando fuera de un esquema de color, simplemente puede ingresar los valores RGBA o HEX. Ambos son compatibles y son fáciles de ingresar.
Cambiar el color de fondo del encabezadoA continuación, nos dirigiremos a la sección del cuerpo del blog, haciendo clic en él para que CSS Hero pueda mostrarnos las opciones disponibles. Desde aquí vamos a cambiar el color de fondo a un gris más oscuro. Ahora nuestro encabezado se destaca y una vez que realicemos los cambios adicionales, también lo hará nuestro contenido y la barra lateral..
Al cambiar el fondo del área izquierda a blanco, realmente queda fuera de la página, pero el color se diluye un poco en el borde, por lo que le hemos dado un borde más oscuro de solo 1 píxel de grosor. Un pequeño ajuste en el radio del borde le da a la sección una buena curva y el ajuste del relleno hace que sea un borde agradable alrededor del contenido.
Hemos cambiado las fuentes del título a Helvética. Una de las más de 100 fuentes de Google que se muestran en el menú desplegable de fuentes en CSS Hero, pero si desea agregar una de las otras 550 fuentes de Google, es fácil hacerlo..
Cambia la fuente: Helvetica
Cambia el fondo a gris
Añadir 1px de borde
Añadiendo 20px de relleno
Añadiendo radio de bordeDe forma predeterminada, Divi agrega la imagen destacada de una publicación de blog debajo del título en todo su ancho. Esto ocupa mucho espacio por encima del pliegue y elimina el texto fuera de la vista. Hemos utilizado CSS Hero para cambiar el ancho al 50% y hacer flotar la imagen a la derecha. Al establecer el nuevo altura de la imagen a auto ha mantenido su relación de aspecto y la imagen se ve perfecta en todos los dispositivos. También hemos añadido un poco de relleno a la imagen para que el texto no se siente a su lado. Agregar esquinas ligeramente curvas a la imagen usando el control deslizante del radio del borde en CSS Hero fue todo lo que se necesitó para que esta imagen se vea perfecta.
Cambiar el tamaño de la imagen destacada y agregar un radio de bordeAlgunas otras pequeñas ediciones con CSS Hero incluyen el uso de mayúsculas y minúsculas en el texto meta, cambiando el color y el borde del botón "enviar comentario" y estamos muy contentos con el aspecto de la sección izquierda. Si lo comparamos con el aspecto que tenía antes, puede ver que se ha logrado una gran mejora en cuestión de minutos..
Meta ahora en mayúsculasLuego pasamos a la barra lateral, que de nuevo, por defecto, es bastante simple. Al utilizar las mismas técnicas utilizadas para editar nuestra sección de la mano izquierda, pudimos aplicar rápidamente un borde curvo y un fondo oscuro que ayudan a que esta sección salte de la página. Cambiamos las fuentes de los títulos para que coincidan con nuestras personalizaciones actuales y les dimos un color pálido para que destaquen sobre el fondo oscuro..
Cambiamos los colores de los enlaces para hacerlos más claros y los apuntamos específicamente para cuando el usuario se desplaza y establece un color diferente. Nos deshicimos del azul eléctrico estándar y fuimos con algo un poco más acorde con el tema. Si lo desea, también puede configurar un color diferente para activo enlaces y enlaces que habían sido visitó en el pasado usando CSS Hero.
La barra lateralA través de la utilidad de exportación CSS Hero, podemos ver lo que acabamos de crear en nuestro sitio, en el lado del código..
Esto puede ser útil para aquellos que quieren comenzar a entender CSS, así como para los desarrolladores que solo quieren exportar el código generado y copiar y pegar donde quieran..
Fragmento de todo el CSS, generado por CSS Hero.
Incluso puede usar nuestra nueva herramienta de inspección para examinar el CSS que ha creado y familiarizarse con la forma en que se realizan estos cambios. También puede utilizar el inspector para realizar pequeños cambios en su CSS, como ajustar el tamaño de fuente, la curva o el grosor de un borde, o cualquier otra cosa. Cuanto más cómodo se obtiene con CSS, más útil se vuelve la herramienta de inspección..
Con todo, estas personalizaciones tardaron poco más de cinco minutos. Cinco minutos para cambiar por completo casi todos los elementos de la publicación del blog..
Héroe listo Los temas son buenos para salir de la caja como se mencionó anteriormente. La mayoría de los temas populares de WordPress están preparados para héroes, incluidos Generatepress, Enfold, Genesis framework, Pagelines DMS, WooCommerce plugin y LayersWP.
Esto significa que no es necesaria ninguna configuración, pero si lo es, también es fácil. Hay dos maneras de hacerlo.
Una función relativamente nueva y una que nos gusta mucho, el modo Rocket, buscará automáticamente en la hoja de estilo de su tema en busca de selectores válidos. Una vez encontrado, los agregará a CSS Hero y permitirá que su tema no preparado para héroes funcione extremadamente bien sin más configuraciones. Si por alguna razón su tema se muestra incompatible con el modo Rocket, puede agregar sus selectores con la herramienta de configuración incorporada..
El Configurador RápidoSi conoce las clases y los ID que utiliza su tema, puede agregarlos manualmente a CSS Hero y seleccionarlos como lo haría con cualquier otro elemento en un tema preparado para héroes. ¿Necesitas ayuda para encontrarlos? Pruebe la herramienta de elemento de inspección en la mayoría de los navegadores o busque en la hoja de estilo de su tema cualquier cosa que tenga un punto (.) Delante o un hashtag (#). Alternativamente, la mayoría de los temas de gama alta incluirán documentación, ya sea dentro del tema en sí o en su sitio web con los selectores relevantes que necesita.
Anteriormente mencionamos los beneficios estructurales de usar un generador de páginas para acelerar / facilitar el proceso de creación de páginas en WordPress. Pero todavía querrás controlar cómo se ven, ¿verdad? Lo mismo puede decirse de los complementos que crean formularios, agregan tablas, etc..
Esa es una de las razones por las que hemos mirado más allá de los temas al crear CSS Hero. Podrás usarlo de inmediato, tal como se muestra al editar la página del blog, con un montón de recursos geniales de WordPress. Beaver Builder, un creador de páginas muy popular, es totalmente compatible con CSS Hero, al igual que Visual Composer y el Formulario de contacto 7. Comprueba si los complementos que estás utilizando son compatibles aquí.
¡Eso es todo! Sin siquiera saber CSS (o cualquier otro lenguaje de programación), puede crear un sitio web de WordPress altamente sensible y totalmente personalizado. Si lo hace, o ha creado algo utilizando CSS Hero, asegúrese de informarnos en los comentarios. Nos encantaria verlo!
Accentsconagua