{"id":2012,"date":"2015-07-29T10:25:24","date_gmt":"2015-07-29T08:25:24","guid":{"rendered":"http:\/\/dejujo.com\/?p=2012"},"modified":"2026-04-21T00:27:31","modified_gmt":"2026-04-20T22:27:31","slug":"wordpress-css-cambia-el-aspecto-de-tu-pagina","status":"publish","type":"post","link":"https:\/\/dejujo.com\/staging\/2015\/07\/29\/wordpress-css-cambia-el-aspecto-de-tu-pagina\/","title":{"rendered":"WordPress CSS &#8211; Cambia El Aspecto De Tu P\u00e1gina"},"content":{"rendered":"<p><span style=\"font-size: 12pt;\">Hola gente, hoy quiero ense\u00f1aros un Plugin WordPress fant\u00e1stico para poder modificar el aspecto de nuestro blog, como cambiar las fuentes, el color, los m\u00e1rgenes internos como externos, dar sombras, digamos que podemos modificar nuestro tema de la manera que m\u00e1s nos guste.<\/span><\/p>\n<p><span style=\"font-size: 12pt;\">Antes de continuar os dejo un V\u00eddeo Tutorial sobre el post<\/span><\/p>\n<p style=\"text-align: center;\"><!--more--><\/p>\n<p><iframe title=\"WordPress CSS \u2013 Cambia El Aspecto De Tu P\u00e1gina\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/Im4wF9FHKpE?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<h1>\u00a0<\/h1>\n<h1>WordPress\u00a0CSS<\/h1>\n<p><span style=\"font-size: 12pt;\">Como dije antes podemos cambiar el aspecto totalmente de nuestro tema, para ello necesitamos un Plugin que vais a poder descargar desde <a target=\"_blank\" href=\"https:\/\/dejujo.com\/staging\/plugins\/\" rel=\"noopener\">Recursos<\/a>, tendr\u00e1s que estar registrado para poder descargar el Plugin.<\/span><\/p>\n<p><span style=\"font-size: 12pt;\">El Plugin que vamos a usar es\u00a0<a target=\"_blank\" href=\"http:\/\/www.csshero.org\/\" rel=\"noopener\">CSS Hero<\/a>, vamos\u00a0a instalar y activarlo.\u00a0Se nos crea un acceso directo desde el men\u00fa de la izquierda.<\/span><\/p>\n<p><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/lh3.googleusercontent.com\/neuoeUtJiJO1g1IbitYYhp-UpRG8B3a2lhrbRhCibwk=w160-h166-no\" alt=\"wordpress css\" width=\"160\" height=\"166\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-size: 12pt;\">Tendremos que aceptar que somos conscientes que utilizando \u00e9ste plugin cambia el aspecto original de la plantilla.<\/span><\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/lh3.googleusercontent.com\/x5k94EWofhBtwAn3S-EyHVbD4XnuaoAGAVSy74kOrO4=w676-h215-no\" alt=\"wordpress css\" width=\"676\" height=\"215\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-size: 12pt;\">Una vez aceptado, podemos abrir nuestra p\u00e1gina y veremos como se a agregado un boton azul, al darle clic de despliega una barra.<\/span><\/p>\n<p><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/lh3.googleusercontent.com\/HwVavxk2SKsqnSYEqafbuRG6Lq6huQ7HoENxhLJInyo=w169-h441-no\" alt=\"wordpress css\" width=\"169\" height=\"441\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-size: 12pt;\">Para que no se haga largo, voy a explicar lo principal de \u00e9ste <em><strong>plugin<\/strong><\/em>, para ello vamos a dar clic sobre el bot\u00f3n azul, y nos dice que demos un clic sobre una parte de la web que queramos cambiar. Al dar clic sobre cualquier parte de la p\u00e1gina aparecer\u00e1 en nuestra ventana de <em><strong>CSS HERO<\/strong><\/em> un bot\u00f3n Site Body, y desde ah\u00ed podremos cambiar todo el aspecto de nuestra web.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/lh3.googleusercontent.com\/EiAO1cHizZAsR3QyH7_RKvsZKs5ttmPAyHxfaQCrGzY=w310-h416-no\" alt=\"wordpress css\" width=\"310\" height=\"416\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-size: 12pt;\">Ahora empieza lo interesante, podemos ir uno por uno e ir cambiando el aspecto. Vamos a ir explicando cada parte<\/span><\/p>\n<p><span style=\"font-size: 12pt;\"><strong>Text:<\/strong> Desde aqu\u00ed podremos cambiar gran parte del aspecto de la p\u00e1gina<\/span><\/p>\n<ul>\n<li><span style=\"font-size: 12pt;\">Cambiar el color<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">La fuente\u00a0<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">El tama\u00f1o<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">Estilo de las fuentes<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">Text Decoration<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">M\u00e1rgenes<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">Espacio entre letras<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">Espacio entre palabras<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">Text Shadow (sombra)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-size: 12pt;\">Como si fueses un experto en WordPress CSS, podr\u00e1s ir cambiando poco a poco la parte que quieras.\u00a0<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/lh3.googleusercontent.com\/WmWhF68XReoQggAxk-TiBt7RJuVs9odBsUn_GbWV4B8=w308-h553-no\" alt=\"wordpress css\" width=\"308\" height=\"553\" \/><\/p>\n<p><span style=\"font-size: 12pt;\"><strong>Bordes:<\/strong>\u00a0Podemos dar bordes a cualquier parte de nuestra p\u00e1gina, como si solo quieres darle un margen solo a la izquierda.<\/span><\/p>\n<ul>\n<li><span style=\"font-size: 12pt;\">Border Style<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">Border Width<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">Border Color<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">Border Top Style<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">Border Top Width<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">Border Top Color<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">Border Right Style<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">Border Right Width<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">Border Right Color<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">Border Bottom Style<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">Border Bottom Width<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">Border Bottom Color<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">Border Left Style<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">Border Left Width<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">Border Left Color<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/lh3.googleusercontent.com\/aEY0BS462uWi70Gw9eFWVRxEp9QbBmHr9NwMo2VaWG8=w310-h539-no\" alt=\"wordpress css\" width=\"310\" height=\"539\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-size: 12pt;\"><strong>Size:<\/strong>\u00a0Desde aqu\u00ed podemos dar tama\u00f1o tanto de altura como de ancho.<\/span><\/p>\n<ul>\n<li><span style=\"font-size: 12pt;\">Height<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">Min Width<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">Min Height<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">Max Width<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">Max Height<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/lh3.googleusercontent.com\/xxB7R8MzwPIh9c0ASaw99ck3ULBs-sbCA6A3Lqqt1Rs=w307-h504-no\" alt=\"wordpress css\" width=\"307\" height=\"504\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-size: 12pt;\"><strong>Padding:<\/strong> Es la propiedad CSS que estable el espacio de relleno requerido por todos los lados de un elemento.<\/span><\/p>\n<ul>\n<li><span style=\"font-size: 12pt;\">Padding Top<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">Padding Right<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">Padding Bottom<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">Padding Left<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/lh3.googleusercontent.com\/wztfkggAVL57rKDdJR6ImBw30ObATw-H5OptYQON9rM=w308-h508-no\" alt=\"wordpress css\" width=\"308\" height=\"508\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-size: 12pt;\"><strong>List:<\/strong> Si tuvi\u00e9semos listas podr\u00edamos darle estilos.<\/span><\/p>\n<ul>\n<li><span style=\"font-size: 12pt;\">List Style Position<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">List Style Image<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">List Style Type<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/lh3.googleusercontent.com\/BJM0A5Dsudm09GFfBEcFlAzO0s-KuMWjcx6pUkieJcE=w308-h508-no\" alt=\"wordpress css\" width=\"308\" height=\"508\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-size: 12pt;\"><strong>Background:<\/strong> Podemos cambiar el fondo de nuestra p\u00e1gina o agregarle una imagen.<\/span><\/p>\n<ul>\n<li><span style=\"font-size: 12pt;\">Background Color<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">Background Image<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">Background Repeat<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">Background Attachment<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">Background Size<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">Background Position<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/lh3.googleusercontent.com\/xz-PVIe4ARGJrhP69aw584pr-ShtkJm7dyi10VvFLI0=w302-h468-no\" alt=\"wordpress css\" width=\"302\" height=\"468\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-size: 12pt;\"><strong>Borde Radius:<\/strong> Podemos redondear las im\u00e1genes y darle formas.<\/span><\/p>\n<ul>\n<li><span style=\"font-size: 12pt;\">Border Radius<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">Border Top Left Radius<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">Border Top Right Radius<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">Border Bottom Right Radius<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">Border Bottom Left Radius<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/lh3.googleusercontent.com\/B5crqDvSXNa6TI9ynyDo-iQYxub7rxetDr4gVVvmf7Q=w309-h495-no\" alt=\"wordpress css\" width=\"309\" height=\"495\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-size: 12pt;\"><strong>Margin:<\/strong> Dar m\u00e1rgenes a nuestro sitio<\/span><\/p>\n<ul>\n<li><span style=\"font-size: 12pt;\">Margin Top<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">Margin Right<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">Margin Bottom<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">Margin Left<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/lh3.googleusercontent.com\/mYbEILnEr5N8NZn7Lmr2SANJswyI0qild8v_vrsDOko=w308-h496-no\" alt=\"wordpress css\" width=\"308\" height=\"496\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-size: 12pt;\"><strong>Position:<\/strong> Para dar posici\u00f3n a nuestra p\u00e1gina.<\/span><\/p>\n<ul>\n<li><span style=\"font-size: 12pt;\">Position: hay 5 opciones, relative, absolute, relative, fixed e inherit<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">Top<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">Right<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">Bottom<\/span><\/li>\n<li><span style=\"font-size: 12pt;\">Left<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/lh3.googleusercontent.com\/uM8b83lafRV8unI4ZFTc_WPJJuTnh553qa58uZ_hHQ8=w303-h536-no\" alt=\"wordpress css\" width=\"303\" height=\"536\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-size: 12pt;\">Estas son las opciones que tenemos para cambiar el aspecto de nuestra web, seremos unos expertos en <em><strong>CSS WordPress<\/strong><\/em>, ahora que pasa? si te gusta como ha quedado solo tienes que dar en SAVE y autom\u00e1ticamente quedar\u00e1 guardado.<\/span><\/p>\n<p><span style=\"font-size: 12pt;\">Para evitar posibles errores o si luego te arrepientes, te recomiendo que siempre hagas primero un Backup as\u00ed evitas cualquier problema.<\/span><\/p>\n<p><span style=\"font-size: 12pt;\">Ya sabes, si quieres el <em><strong>Plugin<\/strong><\/em> ve al men\u00fa de <a target=\"_blank\" href=\"https:\/\/dejujo.com\/staging\/plugins\/\" rel=\"noopener\">Recursos<\/a> donde podr\u00e1s descargarlo.\u00a0<\/span><\/p>\n<p><span style=\"font-size: 12pt;\">Espero que os sirva, recordad que el Plugin no es funcional completamente, siempre puedes comprarlo si te gusta. No soy responsable lo que hagas en tu Web,<\/span><\/p>\n<p><span style=\"font-size: 12pt;\">Si te gust\u00f3 el post&#8230;solo tienes que compartirlo y darme un like, recuerda que tengo mi canal de <strong><em>Youtube<\/em><\/strong>, <a target=\"_blank\" href=\"https:\/\/www.youtube.com\/channel\/UC-4hv4p3FtOv-UmWEkpyQcg\" rel=\"noopener\">El Canal de JuJo<\/a>. Nos vemos en la pr\u00f3xima.<\/span><\/p>\n<p><span style=\"font-size: 12pt;\">Si quieres leer m\u00e1s post interesantes debajo tienes enlaces que te llevar\u00e1n a ellos.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hola gente, hoy quiero ense\u00f1aros un Plugin WordPress fant\u00e1stico para poder modificar el aspecto de nuestro blog, como cambiar las fuentes, el color, los m\u00e1rgenes internos como externos, dar sombras, digamos que podemos modificar nuestro tema de la manera que m\u00e1s nos guste. Antes de continuar os dejo un V\u00eddeo Tutorial sobre el post<\/p>\n","protected":false},"author":1,"featured_media":25716,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[4,240,241,242,243,64,35,50,6,8,244,245],"class_list":["post-2012","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-community-manager","tag-css","tag-css-wordpress","tag-css3","tag-pagina-web","tag-plugin","tag-plugin-wordpress","tag-plugins-wordpress","tag-redes-sociales-2","tag-social-media","tag-web-site","tag-wordpress-css"],"_links":{"self":[{"href":"https:\/\/dejujo.com\/staging\/wp-json\/wp\/v2\/posts\/2012","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dejujo.com\/staging\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dejujo.com\/staging\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dejujo.com\/staging\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dejujo.com\/staging\/wp-json\/wp\/v2\/comments?post=2012"}],"version-history":[{"count":1,"href":"https:\/\/dejujo.com\/staging\/wp-json\/wp\/v2\/posts\/2012\/revisions"}],"predecessor-version":[{"id":30492,"href":"https:\/\/dejujo.com\/staging\/wp-json\/wp\/v2\/posts\/2012\/revisions\/30492"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dejujo.com\/staging\/wp-json\/wp\/v2\/media\/25716"}],"wp:attachment":[{"href":"https:\/\/dejujo.com\/staging\/wp-json\/wp\/v2\/media?parent=2012"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dejujo.com\/staging\/wp-json\/wp\/v2\/categories?post=2012"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dejujo.com\/staging\/wp-json\/wp\/v2\/tags?post=2012"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}