- \n
- Modifique la familia de fuentes, el tama\u00f1o de fuente y el color de cualquier texto<\/li>\n
- Cambiar colores e im\u00e1genes de fondo<\/li>\n
- Ajustar el espaciado entre cualquier elemento<\/li>\n<\/ul>\n
Y eso es solo una muestra de las incre\u00edbles personalizaciones posibles.<\/p>\n
\u00bfQu\u00e9 no es CSS Hero?<\/h2>\n
No puede crear nuevas plantillas o dise\u00f1os completamente nuevos con CSS Hero. Para eso est\u00e1n los creadores de p\u00e1ginas como Elementor<\/a>.<\/p>\n
En general, si desea realizar un cambio en su sitio que requiera agregar contenido nuevo, CSS Hero no es la herramienta adecuada. Si desea realizar una modificaci\u00f3n puramente visual como cambiar el color o el tama\u00f1o de un elemento, CSS Hero es perfecto.<\/p>\n
C\u00f3mo usar CSS Hero<\/h2>\n
Si bien viene con un mont\u00f3n de opciones, usar CSS Hero<\/a> es en realidad muy sencillo.<\/p>\n
Haz clic aqu\u00ed para probar CSS Hero por ti mismo<\/a><\/p>\n
Instalaci\u00f3n<\/h3>\n
CSS Hero se carga a trav\u00e9s del men\u00fa Complementos como cualquier otro complemento. Una vez instalado, aparecer\u00e1 un bot\u00f3n pidi\u00e9ndole que obtenga una clave de licencia.<\/p>\n
![\"C\u00f3mo](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0bab38c4.png\")
<\/a><\/p>\nHacer clic en este bot\u00f3n lo lleva a una p\u00e1gina en su sitio con otro bot\u00f3n para hacer clic, y luego se activa la licencia.<\/p>\n
![\"C\u00f3mo](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0bca53eb.png\")
<\/a><\/p>\nNo puede ser m\u00e1s sencillo.<\/p>\n
La interfaz<\/h3>\n
Una vez que se active CSS Hero, su sitio tendr\u00e1 un nuevo elemento Editar con CSS Hero agregado a la barra de herramientas de administraci\u00f3n.<\/p>\n
![\"C\u00f3mo](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0be832d5.png\")
<\/a><\/p>\nAl hacer clic aqu\u00ed, acceder\u00e1 a la interfaz de dise\u00f1o de CSS Hero.<\/p>\n
![\"C\u00f3mo](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0c0c755d.png\")
<\/a><\/p>\nEstoy mostrando CSS Hero con nuestro tema gratuito Ignite<\/a><\/p>\n
La interfaz es similar a la del Personalizador (tratada en nuestra gu\u00eda b\u00e1sica de personalizaci\u00f3n<\/a> ). Hay un panel a la izquierda con las herramientas de personalizaci\u00f3n y una vista previa a la derecha que se actualiza en vivo a medida que realiza modificaciones. Al igual que el Personalizador, ninguno de estos cambios es visible para sus visitantes hasta que haga clic en el bot\u00f3n Guardar y publicar.<\/p>\n
Seleccionar un elemento<\/h3>\n
El proceso de personalizaci\u00f3n con CSS Hero comienza seleccionando un elemento.<\/p>\n
A medida que mueva el mouse por la vista previa del sitio, ver\u00e1 un contorno azul que define los elementos seleccionables. Hacer clic en cualquier elemento le permitir\u00e1 editarlo. As\u00ed es como seleccionar\u00eda el encabezado del tema Ignite:<\/p>\n
Personalizar elementos del sitio<\/h3>\n
Una vez que se selecciona un elemento, las propiedades personalizables se agregan al panel izquierdo.<\/p>\n
![\"C\u00f3mo](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0c41dda0.png\")
<\/a><\/p>\nEstas mismas propiedades est\u00e1n disponibles para todos los elementos.<\/p>\n
Estas son todas las diferentes personalizaciones que puede hacer a cualquier elemento usando CSS Hero.<\/p>\n
Echemos un vistazo m\u00e1s de cerca a algunas de estas propiedades para que pueda tener una idea de c\u00f3mo se puede utilizar para personalizar su sitio.<\/p>\n
Cambiar fuentes<\/h4>\n
Con el encabezado seleccionado, puedo elegir la opci\u00f3n Tipograf\u00eda y luego seleccionar una nueva fuente. La fuente seleccionada se aplicar\u00e1 autom\u00e1ticamente a todo el texto que se encuentre en el encabezado. Esto es mucho m\u00e1s r\u00e1pido que intentar asignar una fuente al men\u00fa o al t\u00edtulo del sitio individualmente.<\/p>\n
CSS Hero te da acceso a un conjunto de fuentes del sistema (fuentes instaladas en tu sistema operativo) y algunas de las fuentes m\u00e1s populares de Google Fonts<\/a>. Tambi\u00e9n hay un "administrador de fuentes" que le permite agregar cualquier fuente de Google Fonts a su sitio con el clic de un bot\u00f3n.<\/p>\n
Cambiar los colores del texto<\/h4>\n
Otra personalizaci\u00f3n com\u00fan que CSS Hero puede manejar es cambiar el color del texto en el sitio.<\/p>\n
Para cambiar el color del texto de cualquier elemento del sitio, selecci\u00f3nelo, elija la opci\u00f3n Tipograf\u00eda y haga clic en la configuraci\u00f3n de color. CSS Hero te ofrece un selector de color simple que puedes usar para cambiar r\u00e1pidamente el color.<\/p>\n
Personalizar bordes<\/h4>\n
El tema Ignite tiene un borde naranja en la parte superior del sitio. Esto es tan f\u00e1cil de cambiar como cualquier color de texto con CSS Hero<\/a>.<\/p>\n
Puedo seleccionar el encabezado, elegir la opci\u00f3n Bordes y luego seleccionar el icono del borde superior para editar solo el borde superior. El color se puede cambiar usando la misma opci\u00f3n de selector de color disponible para cambiar los colores del texto.<\/p>\n
Agregar una imagen de fondo<\/h4>\n
Puede cambiar el color de fondo de cualquier elemento o aplicar una imagen de fondo.<\/p>\n
Si desea un aspecto texturizado, puede agregar una peque\u00f1a imagen de fondo y hacer que se repita vertical y horizontalmente. Tambi\u00e9n puede crear una imagen de fondo est\u00e1tica que ocupe todo el fondo del sitio. CSS Hero te brinda todos los controles que necesitas para agregar una imagen de fondo con cualquier tipo de posicionamiento y tama\u00f1o que desees.<\/p>\n
![\"C\u00f3mo](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0c873f76.png\")
<\/a><\/p>\nSi bien puede cargar cualquier imagen que desee, CSS Hero tambi\u00e9n tiene una integraci\u00f3n con Unsplash<\/a> que le brinda acceso a miles de fotograf\u00edas gratuitas de alta resoluci\u00f3n, lo cual es extremadamente conveniente.<\/p>\n
Ajustar el espaciado<\/h4>\n
La \u00faltima caracter\u00edstica de personalizaci\u00f3n en CSS Hero que cubrir\u00e9 son las propiedades de espaciado.<\/p>\n
El margen se utiliza para crear espacio entre elementos. Por ejemplo, puedo disminuir el espacio sobre este bot\u00f3n y aumentar el espacio debajo de \u00e9l usando la propiedad margin CSS.<\/p>\n
Por otro lado, el acolchado se utiliza para crear espacio dentro de los elementos. Puedo aumentar el relleno en los cuatro lados del bot\u00f3n para hacerlo m\u00e1s grande y m\u00e1s f\u00e1cil de hacer clic.<\/p>\n
\u00bfY sabes qu\u00e9 es a\u00fan m\u00e1s impresionante?<\/p>\n
Estos cambios se aplican autom\u00e1ticamente a todos los botones "Leer m\u00e1s" del sitio, por lo que solo necesito hacer este ajuste una vez.<\/p>\n
Opciones adicionales<\/h2>\n
CSS Hero tambi\u00e9n tiene secciones para modificar el radio del borde (esquinas redondeadas) y los estilos de lista, pero no los usar\u00e1 con tanta frecuencia.<\/p>\n
Tambi\u00e9n hay una secci\u00f3n Extras que incluye algunas propiedades aleatorias como opacidad, sombras de cuadro y visibilidad (ocultar cualquier elemento), por nombrar algunas.<\/p>\n
![\"C\u00f3mo](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0cc7fd09.png\")
<\/a><\/p>\n\u00bfDeber\u00edas usar CSS Hero?<\/h2>\n
Si solo tiene un pu\u00f1ado de ajustes para realizar, puede ser dif\u00edcil justificar la compra de un nuevo complemento. Por ejemplo, si solo desea cambiar el tama\u00f1o del t\u00edtulo de su sitio, probablemente podr\u00eda enviar un correo electr\u00f3nico al desarrollador de su tema para obtener un fragmento de CSS para hacer esto.<\/p>\n
Dicho esto, CSS Hero solo cuesta $ 29, lo que lo hace muy asequible. La alternativa es resolver las cosas por su cuenta, lo que podr\u00eda llevar horas. No podr\u00e1 contratar a un desarrollador para que trabaje en su sitio por $ 29.<\/p>\n
Haga clic aqu\u00ed para ver CSS Hero ahora<\/a><\/p>\n
Si con frecuencia desea realizar personalizaciones en su sitio, creo que una licencia para varios sitios est\u00e1 bien garantizada para garantizar que siempre pueda realizar los cambios que desee en el dise\u00f1o de su sitio.<\/p>\n
En conclusi\u00f3n, CSS Hero<\/a> es una excelente herramienta para la personalizaci\u00f3n de sitios y ocupa un nicho importante. Para personalizaciones dr\u00e1sticas del sitio, querr\u00e1 seleccionar un nuevo tema<\/a> o aprender a usar un creador de p\u00e1ginas<\/a>.<\/p>\n
Haga clic aqu\u00ed para encontrar m\u00e1s formas de personalizar su sitio<\/a>.<\/p>\n