Rediseño de su sitio web de WordPress (para agregar un toque personal)

Ninguna otra plataforma le otorga el poder de personalizar el aspecto de su sitio web como WordPress. Es una de las razones por las que WordPress es popular entre editores y desarrolladores web por igual..


Puede tomar un tema WP básico (y monótono), agregar un logotipo, editar algunas líneas de código, cambiar su CSS y tener un sitio web profesional (pero agradable) en muy poco tiempo. Es un trabajo fácil y este tutorial le mostrará cómo hacerlo..

¿Estás listo? Comencemos con lo primero primero; los colores.

Diseñando un esquema de color

Al desarrollar un esquema de color para su sitio de WordPress, hay muchas cosas a considerar. Piense en ello como pintar su casa o su tienda de piedra y mortero. Debe determinar el color que irá en sus paredes y el color que desea para sus puertas..

La forma en que pinta sus exteriores e interiores dependerá de un par de factores que serán sus preferencias personales..

Colorear tu sitio de WordPress tampoco es diferente. ¿De qué color quieres tus enlaces? Su experiencia, ¿cómo la hará más atractiva y dejará boquiabiertos a sus competidores? ¿Qué colores complementarán (o incluso potenciarán) su mensaje? ¿Cómo quieres tu texto? El cielo es el límite para la elección de colores que puede usar en su sitio WP.

Debe determinar todos los colores que usará desde el principio. Te recomendaría que solo te quedes con tres colores, pero puedes usar tantos colores como quieras.

Simplemente no exagere o terminará diluyendo su mensaje de marketing en todo ese color. Después de todo, un exceso de cualquier cosa es venenosa, así que no importa los colores que elija, es importante asegurarse de que haya armonía.

Es mejor usar la mayoría de los colores donde la mayoría de la gente los verá (y con suerte) los amará. Estoy hablando de su logotipo y cabecera. Estas áreas son exactamente donde necesita más colores; el resto de su sitio web puede ser menos colorido pero más informativo.

216 colores versus 12 colores

Todos estamos familiarizados con los doce colores elementales, pero la web está llena de colores y sus diferentes tonos. Por esta misma razón, elegir el color que irradiará calidez personal mientras se crea un aspecto profesional puede ser una tarea difícil..

Sin embargo, tienes suerte, porque pesqué en Internet y encontré las siguientes herramientas para comenzar:

KULER

Kuler

Kuler fue diseñado por Adobe para ayudar a los desarrolladores web a crear esquemas de color de primera clase. Kuler es una herramienta en línea, lo que significa que puede llevarlo y usarlo desde cualquier lugar, pero también hay una aplicación de escritorio para ayudarlo a desarrollar esquemas de color directamente desde su escritorio. Además, si tiene una ID de Adobe, puede guardar sus esquemas de color con un solo clic.

Hay varias reglas de color para utilizar con Kuler, que incluyen monocromática, compuesta, complementaria, análoga y tríada, entre otras..

Mira Kuler.

TABLA DE COLOR HTML

Conocer los colores que usará es solo la mitad del trabajo. Para implementar sus colores, debe traducirlos a códigos HTML.

carta de colores html

Aquí es donde entra en juego la Tabla de colores HTML. Es una tabla colorida con más de 200 (216 códigos de colores web en realidad). Armado con la tabla, ningún color bajo el sol debería resultar difícil de implementar.

Los códigos funcionarán con HTML, CSS, Adobe PhotoShop y otras herramientas de manipulación gráfica, por lo que tiene toda la libertad del mundo para jugar con sus colores tanto como desee.

Mira la tabla de colores HTML.

GENOPAL

Si necesita ayuda para elegir colores, GenoPal es la aplicación que desea. Es una aplicación web muy simple que “fija” paletas de colores a la ventana de su navegador. A medida que elige los colores, aparecen en su navegador en forma de “notas adhesivas” de colores. ��

genopal

Con GenoPal, puede aumentar el brillo y controlar la saturación del tono, para obtener exactamente el tono que desea.

En su sitio web, hay una aplicación móvil en camino. Una vez que se inicia, le permitirá llevar la aplicación y desarrollar colores en su dispositivo móvil. Su diseño es ingenioso, y el hecho de que esta aplicación realmente funcione es una clara señal de que GenoPal significa negocios.

COLORHEXA

ColorHexa es la versión en línea de placa de pintura del artista. Este sitio web le permite mezclar colores simplemente ingresando códigos de colores. Su aplicación previa es la herramienta de combinación de colores, pero también tienen un generador de gradiente y un sustractor de color. ¿No es ese genio puro en el trabajo aquí??

colorhexa

¿Cómo funciona el ColorHexa Blender? Todo lo que tiene que hacer es escribir sus códigos de color separados con un “+” y ColorHexa hace el resto del trabajo. Por ejemplo, probé:

# ff0000 + # 0000ff + # ff00ff y obtuve # aa00aa. Además, le brindan una página completa de información de color (en su color final, por ejemplo, # aa00aa). Esta es una herramienta que debes probar para experimentar la combinación de colores como nunca antes.

Mira ColorHexa.

ULTIMATE CSS GRADIENT GENERATOR

generador de gradiente de color definitivo

Esta es probablemente la mejor herramienta en cuanto a generar gradientes de color. Está completamente en línea y le ayuda a generar puntos medios refrescantes y sus correspondientes códigos CSS. También proporcionan complementos de Chrome y Firefox para permitirle integrar la aplicación a su navegador para un acceso más fácil y rápido.

Hay un área de vista previa donde puede ver su gradiente, por lo que todo lo que tiene que hacer es generar su gradiente según lo considere adecuado y copiar pegar El código CSS generado. Es realmente tan fácil y tienen más colores de los que jamás usarás.

Echa un vistazo a Ultimate CSS Gradient Generator.

Escoger fuentes

Ahora que le he mostrado cómo elegir y combinar colores como Picasso, juguemos con las fuentes.

Sus colores y diseño web atraerán a las personas, pero son sus palabras, es decir, sus páginas y publicaciones las que harán que las personas se queden.

Estamos ocupados creando nuestras mejores historias en todo momento, por lo que la mayoría de nosotros olvidamos que las fuentes también importan. Pero la fuente que elija influye en cómo las personas interactúan con su sitio web. Con las fuentes correctas, su público objetivo querrá quedarse y eventualmente hacer clic en sus otras páginas, que es exactamente lo que desea. Compromiso.

Hay un millón y una de fuentes, pero desafortunadamente, un usuario solo verá las fuentes que están instaladas en su máquina. Si la fuente que usa no está instalada en sus máquinas, verán una alternativa cercana (o una fuente completamente diferente), que no tendrá el mismo efecto que deseaba.

“Jugar con fuentes es como jugar con fuego. A veces puede encender una coincidencia en una página web, una bengala de texto bonito. Otras veces, puede quemar toda la casa “. – Lorelle de cameraontheroad.com.

Puede controlar sus fuentes (y crear el efecto que desee) con su hoja de estilo. En su tema, la hoja de estilo suele ser style.css archivo. Puede usar este archivo para controlar el color de sus fuentes, tipo de fuente / familia de fuentes, tamaño de fuente y otros aspectos de la fuente elegida.

El siguiente es un buen ejemplo:

#menu {font-family: Arial, Helvetica, Sans-serif, Verdana, "Times New Roman"; tamaño de fuente: 0.8em; de color negro;}

El código anterior establecerá el tamaño de fuente en su menú a 0.8em y establecerá el color en negro. También establecerá la fuente en Arial, pero si el usuario no tiene Arial en su máquina, Helvetica se hará cargo. Si no tienen Helvetica o Arial, Verdana, Sans-serif o Times New Roman se harán cargo.

Al controlar las fuentes, puede crear una apariencia más consistente.

Sin embargo, para resolver el problema de la inconsistencia de fuentes de una vez por todas, puede usar fuentes incrustadas. Al usar fuentes incrustadas (o externas), el usuario no necesita tener la fuente en su máquina.

Además, es un trabajo fácil.

Todo lo que tienes que hacer es abrir tu style.css y pon el siguiente código en la parte superior.

@ font-face {font-family: Museo300; src: url ("fonts / museo300-regular.ttf") formato: ('truetype'); font-weight: normal;}

NOTA: Debe definir el nombre y la ubicación de su fuente. En el ejemplo anterior, “Museo300” es la fuente, que se guardó en una carpeta llamada “fuentes”.

Para utilizar la fuente en su sitio web, por ejemplo, puede escribir:

body {font-family: Museo300;}

Puede usar una fuente incrustada para cualquier elemento en su sitio web. Por ejemplo…

#menu {font-family: Museo300;}

… configurará Museo300 en su menú.

El método anterior significa que debe descargar la fuente y cargarla en su servidor, lo que si me pregunta es bastante tedioso.

sin embargo, yNo necesita descargar ninguna fuente externa que desee usar.

Simplemente puede vincular a las fuentes desde su sección head (header.php) de esta manera:

¿Cómo y dónde agrega la línea de arriba? Necesitas abrir tu Panel de administración de WordPress -> Apariencia -> Editor -> header.php

Si no desea o no puede editar su archivo header.php, solo importe las fuentes escribiendo la siguiente línea en su style.css:

@import url (http://fonts.googleapis.com/css?family=over+the+rainbow);

El ejemplo anterior le permitirá usar el Sobre el arcoiris fuente de Google en cualquier parte de su sitio. Por ejemplo, si desea utilizar Over The Rainbow en todo su sitio web, puede utilizar este código:

body {font-family: "Over The Rainbow";}

Google proporciona más de 600 familias de fuentes gratuitas, así que juega lejos!

Actualización (12/07/13): Si desea agregar fuentes de Google a su sitio de WordPress fácilmente, puede usar el Complemento de tipografía de Google. Aparte de eso, puede obtener más información sobre las fuentes de Google y cómo implementarlas en este tipo de letra Mejore su sitio web de WordPress con fuentes de Google por Tom Ewer.

Más recursos sobre jugar con fuentes

Complementos de WordPress para agregar fuentes

Y para aquellos que no quieren profundizar en el código, siempre pueden instalar un complemento de WordPress para hacer algo de trabajo pesado por usted. Estos son algunos de los complementos de fuentes gratuitos más populares de WordPress.com:

¿Te estás divirtiendo? Vamonos…

 Formato de fecha y hora

¿Has estado en un sitio de WordPress que muestra la fecha o la hora en un tono realmente agradable que te hizo sentir como un novato completo en lo que respecta a tu sitio? Los propietarios de estos sitios acaban de jugar con un sola línea de código y ahora no puedes tener suficientes fechas. Jaja.

Buenas noticias, puedes editar esta linea de codigo y sorprende a tus lectores también.

En tus Panel de WP, navegar a Apariencia, y luego a Editor Como se muestra abajo:

fecha de formateo

Una vez allí, podrá ver una lista de sus archivos .php en el extremo derecho:

publicación individual

Haga clic en publicación única (single.php) y una vez que esté abierta, abra la barra de búsqueda presionando Ctrl + F. En la barra de búsqueda que aparece, escriba:

el tiempo

Inmediatamente verá una línea que podría verse así:

Ahora, el área que desea editar es (“F Y”).

Permítame desarrollar esta sección para darle algo más carnoso para morder.

La “F” en (‘F Y’) significa Nombre completo del mes y la “Y” representa el Año en 4 dígitos. Por lo tanto, si usa (‘F Y’), su fecha se verá así:

Septiembre 2013

Si agrega una coma entre F e Y, debería tener algo como:

Septiembre 2013

Si desea agregar el día y otros elementos, puede usar los siguientes caracteres:

l = Nombre completo del día (minúscula L)

F = mes

j = El día del mes (la fecha)

Y = año en 4 dígitos

y = año en 2 dígitos

Se pueden encontrar más personajes en la tabla a continuación:

tabla de fecha de formateo

Y aquí, algunos ejemplos:

ejemplos de fecha de formateo

Siempre recuerda editar solo los caracteres entre paréntesis (“F Y”) y, tomar nota, no elimine las comillas simples. Siéntase libre de usar tantos personajes como desee para lograr el efecto que desee y recuerde guardar todo cuando haya terminado.

Además, puedes deshacerte de la fecha eliminando …

… como hice en mi blog no hace mucho. �� Ahora, todo lo que obtengo es Publicado por Fred en más o menos categoría … bla, bla, bla. No hay fechas en absoluto.

¿Estás alimentado para la siguiente parte? Más te vale.

No encontré la función_hora?

Eso está bien, porque muchos temas hoy en día usan la función_date () en lugar de la función_time (), lo que en realidad es una mejor práctica. Si su tema está utilizando la función_date (), no tendrá que realizar ninguna edición porque simplemente puede cambiar la forma en que se muestran sus datos en su tablero en “Configuración-> General”.

Usando imágenes

Esta es probablemente la parte más fácil (y más corta) de este tutorial. Pero si realmente eres nuevo en WordPress, agregar imágenes puede ser un desafío.

WordPress le permite agregar imágenes a través de la utilidad de carga o (botón Agregar medios) al crear una nueva publicación o página. Todo lo que necesita hacer es colocar el cursor donde desea que esté la imagen en su publicación o página, y luego haga clic en “Agregar medios”.

agregar medios

Una vez que se abre la utilidad de carga, puede agregar otros detalles, como su título, tamaño, enlaces y alineación.

utilidad de carga

Esta área se encuentra en el lado derecho de la utilidad de carga.

Para obtener más información sobre cómo agregar imágenes, consulte los siguientes recursos:

Y si no está seguro de dónde encontrar algunas imágenes gratuitas increíbles, consulte la publicación que escribimos que cubre los mejores recursos de imágenes para WordPress.

¿Ver? Te dije que será el más corto ��

Agregar un favicon

Antes de que nos olvidemos por completo de las imágenes, creemos y agreguemos un favicon a su sitio de WordPress. Un favicon (o icono de favoritos) es el icono utilizado para marcar un sitio web.

Un favicon ayudará a sus lectores a identificar visualmente su sitio web.

En general, un favicon es un archivo gráfico cuadrado de 16 X 16 píxeles con la extensión .ico. La extensión significa icono.

Cómo crear un favicon

Puede crear su favicon en línea o utilizando programas de edición de imágenes como GIMP, o cualquier otro que le permita guardar archivos .ico. La mayoría de los servicios en línea son gratuitos..

Si bien la imagen suele ser muy pequeña (16 por 16 píxeles), el favicon debe representar su blog en su totalidad. La imagen o el texto que use para crear su favicon debe representar su negocio en línea.

Si está utilizando un editor de imágenes:

  • Recorta o agrega espacio en consecuencia para asegurar que tu imagen sea cuadrada
  • Cambiar el tamaño de la imagen a 16 X 16 píxeles, y
  • Guarda la imagen como favicon.ico

Los servicios en línea que puede usar para crear favicons incluyen (pero no se limitan a):

Después de crear su favicon, le permitirán descargarlo a su computadora, así que no se preocupe.

Cómo instalar tu Favicon en WordPress

Si hay otro favicon en la carpeta principal de su tema, deberá eliminarlo utilizando su cliente FTP o cualquier método disponible para usted. Se recomiendan los clientes FTP porque son fáciles de usar y puede encontrar rápidamente el archivo que esté buscando.

Para este tutorial, usé faviconer.com para crear un favicon para mi blog y Filezilla para eliminar favicons existentes.

Con el archivo favicon.ico en la mano, cárguelo en la carpeta principal de su tema. Esta es la carpeta donde se almacena su tema actual.

Luego cargue otra copia de su favicon en la carpeta raíz (generalmente public_html) o en el directorio principal donde está almacenado su sitio, para que pueda ver su favicon cuando escriba yoursite.com/favicon.ico. Esto agregará automáticamente tu favicon a tus feeds.

Cuando termine de cargar, es hora de que su favicon.ico funcione. Esto es lo que debes hacer:

Agregar su Favicon usando un complemento

La mejor manera de agregar su favicon es usar un complemento. Yo recomendaría usar el “Favicon todo en uno“Complemento para un uso más avanzado para un enfoque muy simple que puede usar”El favicon más simple“Complemento que no tiene opciones de back-end, solo tiene que cargar un archivo llamado favicon.ico en el lugar correcto de su servidor.

favicon todo en uno

Agregar el favicon manualmente a su plantilla

Algunas personas pueden preferir (aunque no sea la mejor manera) agregar sus favicons manualmente a su plantilla, para ello siga los siguientes pasos:

  • Inicia sesión en tu Tablero
  • Navegar a Apariencia
  • Entonces a Editor (Editor de temas)
  • Encuentra y abre header.php (encabezado) archivo

Agregue esta línea a su archivo de encabezado (preferiblemente en la parte superior donde ve otros etiquetas:

Guardar una vez hecho. 

Actualice su navegador para ver sus nuevos cambios..

En este punto, debería poder cambiar sus colores, elegir mejores fuentes, formatear fechas y horas, usar imágenes y agregar un favicon.

Conclusión

Hay tanto que discutir sobre el rediseño de su sitio de WordPress que sería un mal servicio (para usted) intentar cubrir todo en una sola publicación.

Para beneficiarte al máximo, es mejor dividir el tutorial en varias partes (esta es la parte 1). Compartiremos más trucos de rediseño a medida que lleguen los días, así que esté atento. El propósito de estos tutoriales es ayudarlo a crear el mejor sitio de WordPress y dejarlo más feliz porque lo hizo todo por su cuenta..

Si desea compartir sus opiniones o agregar algo a la discusión, no dude en dejar su comentario en la sección de comentarios a continuación.!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map