Cap altra plataforma us proporciona el poder de personalitzar l’aspecte del vostre lloc web com WordPress. És una de les raons per les quals WordPress és popular entre editorials i desenvolupadors web.
Podeu agafar un tema WP bàsic (i negre), afegir un logotip, editar unes quantes línies de codi, canviar el vostre CSS i tenir un lloc web amb aspecte professional (encara que personal). És un treball fàcil i aquest tutorial us mostrarà com fer-ho.
Estàs preparat? Comencem amb les primeres coses; els colors.
Contents
Dissenyar un esquema de colors
En desenvolupar un esquema de colors per al vostre lloc WordPress, hi ha moltes coses a considerar. Penseu en això com pintar casa vostra, o la vostra botiga de pedra i morter. Heu de determinar el color que passarà a les vostres parets i el color que voleu a les vostres portes.
La forma de pintar els seus exteriors i interiors dependrà de quants factors són les vostres preferències personals.
Tampoc és diferent pintar el vostre lloc de WordPress. De quin color voleu els vostres enllaços? Els vostres antecedents, com el fareu més atractiu i deixeu la boca a la competència? Quins colors complementaran (o fins i tot potenciaran) el missatge? Com voleu el vostre text? El cel és el límit a l’elecció dels colors que podeu utilitzar al vostre lloc web WP.
Heu de determinar tots els colors que emprareu des del principi. Us recomanaria que us enganxeu només a tres colors, però sou lliure d’utilitzar tants colors com vulgueu.
Simplement, no s’excedeixi o acabaràs diluint el teu missatge de màrqueting amb tot aquest color. Al cap i a la fi, un excés de res és verinós, de manera que, independentment dels colors que trieu, és important assegurar-vos que hi hagi harmonia.
El millor és utilitzar la majoria dels colors on la majoria de la gent els ve (i esperem) que els encanten. Estic parlant del vostre logotip i puntal. Aquestes zones són exactament les que més colors necessiteu; la resta del vostre lloc web pot ser menys vistós però més informatiu.
216 colors versus 12 colors
Tots coneixem els dotze colors elementals, però el web està ple de colors i les seves diferents tonalitats. Per aquest motiu, escollir el color que generarà calidesa personal mentre es crea un aspecte professional pot ser una tasca difícil.
No obstant, esteu d’enhorabona, perquè vaig pescar a Internet i vaig trobar les eines següents per començar:
KULER
Kuler va ser dissenyat per Adobe per ajudar els desenvolupadors web a crear esquemes de colors de primera classe. Kuler és una eina en línia, el que significa que podeu transportar-la i utilitzar-la des de qualsevol lloc, però també hi ha una aplicació d’escriptori que us ajudarà a desenvolupar esquemes de colors des del vostre escriptori. A més, si teniu un ID d’Adobe, podeu desar els esquemes de colors amb un sol clic.
Hi ha diverses regles de color a utilitzar amb Kuler, incloent-hi monocromàtic, compost, complementari, analògic i triat..
QUADRE DE COLOR HTML
Saber els colors que utilitzaràs és només la meitat de la tasca. Per implementar els vostres colors, heu de traduir-los a codis HTML.
Aquí és on entra el gràfic de colors HTML. És un gràfic amb colors amb més de 200 (216 efectivament) codis de colors web. Armat amb el gràfic, cap color sota el sol hauria de ser difícil d’implementar.
Els codis funcionaran amb HTML, CSS, Adobe PhotoShop i altres eines de manipulació gràfica, de manera que teniu tota la llibertat del món per jugar amb els vostres colors tant com vulgueu.
Consulteu el gràfic de colors HTML.
GENOPAL
Si necessiteu ajuda per recollir colors, GenoPal és l’aplicació que vulgueu. És una aplicació web molt senzilla que “clava” paletes de colors a la finestra del navegador. A mesura que trieu els vostres colors, apareixen al navegador en forma de “notes enganxoses” de colors. ��
Amb GenoPal, podeu augmentar la brillantor i controlar la saturació de la tonalitat, de manera que obtindreu exactament l’ombra que desitgeu.
Al seu lloc web, hi ha una aplicació per a mòbils. Un cop llançada, us permetrà portar l’aplicació i desenvolupar colors al dispositiu mòbil. El seu disseny és enginyós i el fet que aquesta aplicació funcioni és un signe clar que GenoPal significa negoci.
COLORHEXA
ColorHexa és la versió en línia del web la placa de pintura de l’artista. Aquest lloc web us permet barrejar colors amb només introduir codis de color. La seva aplicació de previsió és l’eina de combinació de colors, però també tenen un generador de degradats i un subtractor de colors. No és que aquest geni pur funciona aquí?
Com funciona el Blender ColorHexa? Tot el que heu de fer és escriure els vostres codis de color separats amb un “+” i ColorHexa fa la resta del treball. Per exemple, vaig provar:
# ff0000 + # 0000ff + # ff00ff i vaig aconseguir # aa00aa. A més, us proporcionen una pàgina sencera d’informació de color (al vostre color final, per exemple, # aa00aa). Aquesta és una de les eines que has de provar per combinar colors com mai.
GRADIENT GENERADOR DE CSS ULTIMATS
Probablement és la millor eina pel que fa a generar degradats de color. Està completament en línia i us ajuda a generar punts mig refrescants i als corresponents codis CSS. També proporcionen complements de Chrome i Firefox per permetre’t integrar l’aplicació al navegador per obtenir un accés més fàcil i ràpid.
Hi ha una zona de previsualització on veieu el vostre degradat, de manera que només heu de generar el degradat a mesura que cregueu adequat i copiar enganxar el codi CSS generat. És molt fàcil i tenen més colors que mai.
Consulteu el generador de gradients CSS final.
Tria de tipus de lletra
Ara que us he mostrat com triar i combinar colors com Picasso, anem a jugar amb els tipus de lletra.
Els vostres colors i el seu disseny web atrauran les persones, però les vostres pàgines i publicacions són les vostres paraules, és a dir, les vostres pàgines i publicacions.
Estem ocupats en crear les nostres millors històries en tot moment, de manera que la majoria oblidem que els tipus de lletra també importen. Però el tipus de lletra que trieu influeix en la interacció entre la gent amb el vostre lloc web. Amb els tipus de lletra adequats, el públic objectiu voldrà mantenir-se i, finalment, fer clic a les altres pàgines que és exactament el que voleu. Compromís.
Hi ha un milió i un tipus de lletra per fora, però malauradament, un usuari només veurà els tipus de lletra instal·lats al seu equip. Si el tipus de lletra que utilitzeu no està instal·lat a les seves màquines, veuran una alternativa propera (o una lletra completament diferent), que no tindrà el mateix efecte que voleu.
“Jugar amb tipus de lletra és com jugar amb el foc. De vegades pot encendre un partit en una pàgina web, un escumós de bonic text. Altres vegades, pot cremar tota la casa. ” – Lorelle de cameraontheroad.com.
Podeu controlar els vostres tipus de lletra (i crear l’efecte que desitgeu) amb el vostre full d’estil. Al vostre tema, el full d’estils sol ser el estil.css dossier. Podeu utilitzar aquest fitxer per controlar el color dels vostres tipus de lletra, tipus de font / font-family, mida de font i altres aspectes del tipus de lletra escollit.
El següent és un exemple:
#menu {font-family: Arial, Helvetica, Sans-serif, Verdana, "Times New Roman"; font-size: 0.8em; color: negre;}El codi anterior establirà la mida del tipus de lletra del vostre menú en 0,8em i el color serà negre. També establirà el tipus de lletra a Arial, però si l’usuari no té Arial a la seva màquina, Helvetica es farà càrrec. Si no tenen Helvetica o Arial, Verdana, Sans-serif o Times New Roman, es faran càrrec.
Controlant els tipus de lletra, podeu crear un aspecte i consistència més consistents.
Tanmateix, per solucionar el problema de la inconsistència de tipus de lletra una vegada per totes, podeu utilitzar tipus de lletra incrustats. Si utilitzeu tipus de lletra incrustats (o externs), l’usuari no ha de tenir el tipus de lletra a la seva màquina.
A més, és un treball fàcil de pesar.
Tot el que heu de fer és obrir el vostre estil.css i poseu el codi següent a la part superior.
@ font-face {font-family: Museo300; src: format url ("fonts / museo300-regular.ttf"): ('truetype'); font-pes: normal;}NOTA: heu de definir el nom i la ubicació del vostre tipus de lletra. A l’exemple anterior “Museo300” hi ha el tipus de lletra, que s’ha desat en una carpeta anomenada “fonts”.
Per utilitzar el tipus de lletra al vostre lloc web, per exemple, podeu escriure:
cos {font-family: Museo300;}Podeu utilitzar una font incrustada per a qualsevol element del vostre lloc web. Per exemple…
#menu {font-family: Museo300;}… configurarà Museo300 al vostre menú.
El mètode anterior significa que heu de descarregar el tipus de lletra i carregar el mateix al vostre servidor, cosa que si em pregunteu és bastant tediosa.
malgrat això, iNo heu de descarregar cap tipus de lletra externa que vulgueu fer servir.
Simplement podeu enllaçar amb els tipus de lletra de la secció del vostre cap (header.php) així:
Com i on afegiu la línia anterior? Heu d’obrir el vostre Tauler d’administració de WordPress -> Aparença -> Editor -> header.php
Si no voleu o no podeu editar el fitxer header.php, només cal que importeu els tipus de lletra escrivint la següent línia a la vostra estil.css:
@import url (http://fonts.googleapis.com/css?family=over+the+rainbow);
L’exemple anterior us permetrà utilitzar el format Sobre l’arc de sant Martí tipografia de Google des de qualsevol lloc del vostre lloc. Per exemple, si voleu utilitzar Over The Rainbow a tot el lloc web, podeu utilitzar aquest codi:
body {font-family: "Over the Rainbow";}Google proporciona més de 600 famílies de fonts gratuïtes, així que juga fora!
Actualització (12/07/13): Si voleu afegir fonts de Google al vostre lloc de WordPress fàcilment, podeu fer servir la funció Plugin de tipografia de Google. A més d’això, podeu obtenir més informació sobre els tipus de lletra de Google i com implementar-los en aquesta Millora de la tipografia del vostre lloc web de WordPress amb fonts de Google de Tom Ewer.
Més recursos per jugar amb tipus de lletra
- Guia imprescindible de @ font-face
- Documentació oficial sobre font-face
- Escoles W3: Tipus de lletra CSS
- Camera On The Road: Experiments CSS: tipus de lletra web i tipus de lletra incrustats
Plugins de WordPress per afegir fonts
I, per a aquells que no vulgueu cavar en codi, sempre podríeu instal·lar un complement de WordPress per fer alguns dels vostres efectes elevats. A continuació, es mostren alguns dels complements de lletra gratuïts més populars de WordPress.com:
T’ho estàs passant bé? Posem-nos en marxa…
Format i data d’hora
Heu estat en un lloc de WordPress que mostrava la data o l’hora amb un to realment agradable que us feia sentir com un paratge complet del vostre lloc? Els propietaris d’aquests llocs només van jugar amb una una sola línia de codi i ara no podreu obtenir prou de les seves dates. Haha.
Bones notícies, podeu editar-les aquesta línia de codi i sorprèn també els teus lectors.
En el seu Panell de comandes WP, navegueu a Aparició, i després a Editor com es mostra a continuació:
Un cop allà, podreu veure una llista dels vostres fitxers .php a l’extrem dreta:
Feu clic a una publicació única (single.php) i, un cop oberta, obriu la barra de cerca prement Ctrl + F. A la barra de cerca que apareix, escriviu:
el temps
Immediatament trobareu una línia que podria semblar a una cosa següent:
Ara, l’àrea que voleu editar és (“F Y”).
Permeteu-me presentar aquesta secció per donar-vos alguna cosa més carnal.
La “F” de (“F Y”) significa Nom complet del mes i la “Y” representa la Any en 4 dígits. Per tant, si utilitzeu (“F Y”), la vostra data serà:
Setembre de 2013
Si introduïu una coma entre F i Y, hauríeu de tenir una cosa com:
Setembre, 2013
Si voleu afegir el dia i altres elements, podeu utilitzar els caràcters següents:
l = Nom complet del dia (minúscula L)
F = mes
j = El dia del mes (la data)
Y = Any en 4 dígits
y = Any en 2 dígits
Podeu trobar més personatges a la taula següent:
I aquí, alguns exemples:
Recordeu editar només els caràcters entre claudàtors (“F Y”) i, prendre nota, no suprimiu les cometes. No dubteu a utilitzar tants personatges com vulgueu aconseguir l’efecte que desitgeu i no oblideu guardar-ho tot quan hagi acabat.
A més, podeu eliminar la data suprimint …
… Com ho vaig fer al meu bloc no fa gaire. �� Ara, tot el que obtinc és Publicat per Fred en la categoria tan i tan … bla, bla. Sense dates en absolut.
Ets alimentat per la propera part? Millor seràs.
No he trobat la funció_hora?
No està bé, ja que ara fa molts temes que utilitzen la funció_date () en lloc de la funció_temporada (), que és una bona pràctica. Si el vostre tema està fent servir la funció_data (), no haureu de fer cap edició, ja que simplement podeu canviar la manera com es mostren les dades al tauler a la secció “Configuració-> General”..
Ús de les imatges
Probablement és la part més fàcil (i la més curta) d’aquest tutorial. Però si realment ets nou a WordPress, afegir imatges pot ser un repte.
WordPress us permet afegir imatges mitjançant l’utilitat de càrrega o (botó Afegeix suports) quan creeu una publicació o pàgina nova. Tot el que heu de fer és col·locar el cursor on voleu que la imatge estigui a la publicació o a la pàgina i, a continuació, feu clic a “Afegeix un suport”..
Un cop s’obri la utilitat de la càrrega, podeu afegir altres detalls com el títol, la mida, els enllaços i l’alineació.
Aquesta zona es troba a la part dreta de la utilitat de càrrega.
Per obtenir més informació sobre com afegir imatges, consulteu els recursos següents:
- WordPress: utilitzant imatges
- Disseny del tema (afegir imatges)
- Mida i qualitat de la imatge
- Optimització d’imatges de WordPress
- Edició d’imatges a WordPress
I si no esteu segur d’on trobar algunes imatges gratuïtes fantàstiques, feu una ullada a la publicació que vam escriure les portades dels millors recursos d’imatge per a WordPress.
Veure? Et vaig dir que serà la més curta ��
Afegir un Favicon
Abans d’oblidar-nos del tot de les imatges, creem i afegim un favicon al vostre lloc de WordPress. Un favicon (o icona de favorits) és la icona usada per marcar un lloc web.
Un favicon ajudarà els vostres lectors a identificar visualment el vostre lloc web.
Generalment, un favicon és un fitxer gràfic quadrat de 16 x 16 píxels amb l’extensió .ico. L’extensió significa icona.
Com crear un favorit
Podeu crear el vostre favorit en línia o mitjançant programes d’edició d’imatges com GIMP, o qualsevol altre que us permeti desar fitxers .ico. La majoria dels serveis en línia són gratuïts.
Tot i que la imatge sol ser molt petita (16 per 16 píxels), el favicon hauria de representar el vostre bloc en la seva totalitat. La imatge o el text que feu servir per crear el vostre preferit han de representar el vostre negoci en línia.
Si utilitzeu un editor d’imatges:
- Retalleu o afegiu espai en conseqüència perquè la vostra imatge quedi quadrada
- Redimensiona la imatge a 16 x 16 píxels i
- Desa la imatge com a favicon.ico
Els serveis en línia que podeu utilitzar per crear favicons inclouen (però no limitadament):
Un cop hàgiu creat el favicon, us permetran descarregar-lo al vostre ordinador, així que no us preocupeu.
Com instal·lar el Favicon a WordPress
Si hi ha un altre punt de referència a la carpeta principal del tema, haureu de suprimir-lo mitjançant el client FTP o qualsevol mètode disponible. Es recomana als clients FTP perquè són fàcils d’utilitzar i podreu trobar el fitxer que busqueu ràpidament.
Per a aquest tutorial, he utilitzat faviconer.com per crear un favicon per al meu bloc i Filezilla per eliminar els favicons existents.
Amb el fitxer favicon.ico a la mà, pengeu el mateix a la carpeta principal del tema. Aquesta és la carpeta on s’emmagatzema el tema actual.
A continuació, pengeu una altra còpia del vostre favicon a la carpeta arrel (generalment public_html) o al directori principal on es guarda el vostre lloc, de manera que podreu veure el vostre favoricon quan escriviu vostraite.com/favicon.ico. Això afegirà automàticament la vostra llista de preferència als vostres canals.
Un cop acabeu la càrrega, és el moment perquè el vostre favoricon.ico funcioni. Això és el que heu de fer:
Afegir el Favicon mitjançant un complement
La millor manera d’afegir el vostre favorit és mitjançant un complement. Recomanaria fer servir “Tot en un FaviconPlugin ”per a un ús més avançat per a un enfocament molt senzill que podeu utilitzar“El Favicon més senzill“Complement que no té cap opció de fons, només has de penjar un fitxer anomenat favicon.ico al lloc correcte del servidor.
Afegint el favicon manualment a la plantilla
Hi ha qui pot preferir (tot i que no és la millor manera) afegir els seus favicons manualment a la plantilla, per fer-ho, seguiu els passos següents:
- Inicieu la sessió al vostre panell
- Desplaceu-vos a Aparició
- Després a Editor (Editor de temes)
- Cerqueu i obriu header.php (capçalera) dossier
Afegiu aquesta línia al fitxer de capçalera (preferiblement a la part superior on veieu un altre Etiquetes:
Desa un cop fet.
Actualitza el navegador per veure els canvis nous.
En aquest moment, hauríeu de poder canviar els colors, escollir millors tipus de lletra, formatar les dates i l’hora, utilitzar imatges i afegir un punt de mira.
Conclusió
Hi ha molt a debatre sobre com redissenyar el lloc de WordPress que seria un servei (per a vosaltres) intentar cobrir tot en una sola publicació.
Per beneficiar-vos al màxim, és millor dividir el tutorial en diverses parts (aquesta és la primera part). Compartirem més trucs de redisseny a mesura que arribin els dies, així que sigueu pendents. L’objectiu d’aquests tutorials és ajudar-vos a crear el millor lloc de WordPress que hi hagi mai i deixar-vos més feliços perquè ho heu fet tot pel vostre compte.
Si voleu compartir les vostres opinions o afegir alguna cosa a la discussió, no dubteu a deixar el vostre comentari a la secció de comentaris que hi ha a continuació.!
