Share
Es un componente crítico para una exitosa carrera independiente tener un sitio web para detallar sus servicios y mostrar su cartera.
Con la amplia variedad de temas de WordPress de alta calidad disponibles, no hay ninguna razón por la que no pueda tener un excelente portafolio para su trabajo, incluso si no ha tenido experiencia previa en desarrollo web. Sí, puedes hacerlo tú mismo.
En este tutorial, tomaremos un tema de WordPress premium y trabajaremos en cada paso del proceso de personalización para desarrollar un sitio web para su cartera independiente.
Aquí hay dos consideraciones a tener en cuenta antes de abordar este tutorial:
Elegir el tema de WordPress adecuado para su cartera puede ser difícil. Le recomiendo que comience por navegar por la lista de temas de la cartera en Themeforest. Para este tutorial, usaré Scope, diseñado por Orman Clark (un autor reciente de "Power Elite" en Themeforest). Si bien los ejemplos serán específicos para Scope, los principios generales se aplican a cualquier tema que elija.
Compre y descargue el tema de su elección y descomprima el paquete del tema.
No te saltes este paso. Incluso después de completar cientos de instalaciones temáticas I todavía Lea primero la documentación. Si bien no toda la documentación se crea igual, en más casos, el desarrollador del tema hace todo lo posible para que la personalización sea lo más sencilla posible..
Inicie sesión en su administrador de WordPress y vaya a Apariencia> Temas. Haga clic en "Instalar temas" en la parte superior derecha de la interfaz.
A continuación, haga clic en Subir enlace y luego Elija el archivo. Busque la ubicación de su tema descargado recientemente y seleccione el archivo zip del tema.
Nota: Asegúrese de que el archivo zip que cargue solo contenga el tema real. La mayoría de los temas premium vienen empaquetados como un archivo zip con el propio tema comprimido dentro del paquete inicial. Después de descomprimir el archivo que descargó inicialmente, busque el archivo zip con el nombre del tema.
Ahora, haga clic Activar.
Con el tema activado, es hora de revisar las opciones del tema. Mientras que algunos autores de temas organizan opciones de temas en una ubicación diferente, enLa mayoría de los casos se puede acceder a las opciones yendo a Apariencia> Opciones de tema.
Explore las opciones y familiarícese con las personalizaciones que ofrece el tema..
Con el tema de alcance, nuestra gama de personalizaciones es relativamente limitada, ¡lo cual está bien! Es un gran tema listo para usar. Nuestro objetivo es implementar algunas actualizaciones de estilo y hacer que el tema sea nuestro. Desde Opciones de tema ir Opciones de estilo.
Para este tutorial, vamos a abordar tres personalizaciones diferentes:
El tema del alcance viene con un tono amarillo intenso para un color de relieve, que se muestra en el encabezado detrás del título, como el color de fondo de los iconos en todo el sitio, y en los enlaces cuando se pasa sobre ellos. Dentro Opciones de estilo añadir un color a través de la Resalte y enlace de color opción.
Puedes usar el Selector de color o introduzca un código de color manualmente. Usé Kuler.com para encontrar un tono de verde que me gustaba. Otros dos excelentes recursos para elegir colores son ColorSchemeDesigner.com y ColourLovers.com..
A continuación, reemplazaremos el color de fondo predeterminado con una imagen de fondo de nuestra elección. Scope ofrece varias opciones para trabajar con imágenes de fondo. Para este tutorial, vamos a agregar un patrón de repetición que llena el fondo. Primero, elija una imagen de fondo y haga clic en Cargar imagen, entonces, bajo Repetición de fondo predeterminada, escoger Repetir.
Los patrones de fondo son una gran manera de ir Encontré este patrón en SubtlePatterns.com, que es un excelente Lugar para encontrar patrones de uso gratuito. Otro buen recurso es DinPattern.com.
Nota: Si está interesado en utilizar imágenes de fondo completas, visite PhotoDune.net: puede obtener una excelente imagen de fondo sin royalties por $ 3 o $ 4, según el tamaño que elija. Una vez que hayas elegido una imagen, configura Posición de fondo predeterminadaa Pantalla completa.
El tema Scope ofrece la posibilidad de añadir nuestros propios CSS personalizado. Como último toque, vamos a cambiar el color de fondo en el pie de página. El valor hexadecimal se establece en # 222 por defecto. Cambiemos eso a un valor ligeramente más ligero de # 333.
Ahora, si eres nuevo en CSS, puede que te parezca griego. ¡No tener miedo! Puedes omitir el CSS personalizado por completo o, si te sientes más aventurero, echa un vistazo a este screencast que compuse sobre cómo experimentar con los estilos en Safari, Chrome y Firefox..
Más allá de lo que hemos cubierto aquí, también querrá cargar un logotipo o usar la opción de logotipo de texto sin formato que ofrece el tema Ámbito. El alcance también ofrece la posibilidad de establecer un "Título de encabezado" que aparece sobre su menú de navegación. Este puede ser un gran lugar para incluir un número de teléfono o un mensaje corto. Este también es un buen momento para colocar cualquier código de seguimiento analítico que tenga..
Si desea ir aún más lejos con las personalizaciones del tema, deberá ir más allá de las opciones del tema. Primero, si no planea actualizar el tema, puede editar los archivos del tema directamente y hacer cambios en el código. Si desea tener la posibilidad de actualizar en el futuro, configure un tema secundario y realice los cambios allí (recomendado).
Aquí hay algunos cambios que puede querer hacer:
El tema Ámbito, junto con la mayoría de los otros temas premium, proporciona una plantilla de página de inicio personalizada y opciones para administrar el contenido que aparece en la página de inicio. Primero, necesitamos crear una nueva página. Ir Páginas> Añadir Nuevo. Asigne un nombre a la página (la acabo de llamar "Página de inicio") y luego, en la Atributos de página menú, seleccione el Modelo menú desplegable y elija la Página de inicio modelo.
Siguiente, Publicar tu pagina. Ahora ve a Ajustes> Lectura. En la parte superior, verás Muestra la portada. Cambie el conmutador de "Sus últimas publicaciones" a "Una página estática", luego en "Página principal" elija su página de inicio recientemente creada de la lista desplegable y Guardar cambios.
Crear una buena página de inicio es un trabajo duro. Las primeras impresiones importan - mucho Cuando acabas de empezar, no tendrás mucho con qué trabajar. Sin embargo, si ya ha tenido mucha experiencia laboral, una página de inicio es un gran lugar para resaltar algo de esa experiencia al tiempo que atrae visitantes (y clientes potenciales) a su sitio..
Una buena página de inicio debe tener lo siguiente:
El tema de alcance (y la mayoría de los temas premium de estilo "Portafolio") tiene un enfoque muy visual para la plantilla de la página de inicio. Para aquellos de ustedes con un portafolio orientado a la vista, le recomiendo que siga las recomendaciones del tema y haga uso de los controles deslizantes y otras opciones de la página de inicio que ofrece el tema..
Una página "Acerca de" es muy importante. Cuando un cliente potencial te considera para un proyecto, quiere aprender lo que pueda sobre ti. Una página "Acerca de" le brinda la oportunidad de contar su historia y establecer una conexión personal.
Desde Páginas> Añadir Nuevo, cree una página llamada "Acerca de" (o quizás "Acerca de mí" o "Acerca de [Su nombre]") y comience a trabajar en el contenido.
Aquí hay algunas pautas a tener en cuenta:
Y aquí hay algunas ideas a considerar:
Una página de "Servicios" le permite a los clientes potenciales saber lo que usted ofrece y puede ayudarlos a decidir si usted es o no compatible con sus necesidades.
Para este tutorial, nos centraremos en crear una página de "Servicios" con los siguientes atributos:
Desde Páginas> Añadir Nuevo, Crea una página y dale un título apropiado. Desde Atributos de página escoger Ancho completo desde el Modelo desplegable.
La gente de WordPress.com describe un shortcode como "un código específico de WordPress que te permite hacer cosas ingeniosas con muy poco esfuerzo". La mayoría de los desarrolladores de temas premium proporcionan códigos cortos específicos del tema que puede utilizar dentro del tema. Para crear nuestro diseño de tres columnas vamos a hacer uso de códigos cortos.
Puede escribir los códigos cortos directamente en el Editor visual o, desde el menú del editor, hacer clic en el ícono del código corto (su disponibilidad y apariencia pueden variar de un tema a otro) para usar la interfaz de código abreviado incorporada del tema.
Puede tomar el código para un ejemplo de código abreviado de tres columnas aquí.
El tema de alcance y los temas de la cartera como este ofrecen la posibilidad de establecer una imagen de fondo personalizada por página. Para hacer uso de esto, desplácese hacia abajo debajo del editor principal y busque el Configuración de página panel. Si no está visible, vaya a Opciones de pantalla (esquina superior derecha) y asegúrese de que la opción "Configuración de página" esté marcada.
Dentro Configuración de página haga clic en el botón "Examinar" para cargar una imagen y luego haga clic en "Insertar para publicar" (dentro del cuadro de diálogo de administración de imágenes) para agregar la URL de la imagen al campo. En mi caso, ya que he elegido otra imagen de patrón, también estableceré "Repetición de fondo personalizada" en "Repetir". Si usa una imagen de tamaño completo, debe establecer "Posición de fondo personalizada" en "Pantalla completa" o "Centrado", según el tamaño de la imagen.
Una página de "Contacto" ofrece opciones de clientes potenciales para contactarlo.
Para este tutorial, nos centraremos en crear una página de "Contacto" utilizando la plantilla "Contacto", proporcionada por el tema de Alcance.
Desde Páginas> Añadir Nuevo, cree una página y asígnele un título apropiado (tal vez, "¡Contácteme!"). Desde Atributos de página escoger Contacto desde el Modelo desplegable.
Lo siguiente es el corazón de este tutorial: crear un índice de cartera y agregar entradas a nuestra cartera..
Para este tutorial, nos centraremos en lograr lo siguiente:
Desde Páginas> Añadir Nuevo, Crea una página y dale un título apropiado. Desde Atributos de página escoger portafolio desde el Modelo desplegable. La página de la cartera ahora mostrará automáticamente sus entradas a medida que las publique..
El tema de alcance hace uso de taxonomías personalizadas en WordPress para permitirle organizar las entradas de cartera por tipo. La mayoría de los temas de la cartera ofrecen una funcionalidad similar.
Desde el Carteras menú elegir Tipos de cartera.
Ahora, puede predefinir los tipos de entradas de cartera que espera publicar..
Aquí hay algunas sugerencias para tener en cuenta:
Desde Portfolios> Añadir Nuevo para crear su primera entrada de cartera. Dale un título apropiado y una descripción. Entonces desde el Tipo de cartera interfaz, elija el (los) tipo (s) apropiado (s), teniendo en cuenta que una entrada puede pertenecer fácilmente a más de un tipo.
A continuación, configure las opciones visuales para la entrada y cargue sus imágenes o, en función del "Tipo de cartera", puede incrustar un archivo de audio o video. En el tema Ámbito, las configuraciones están organizadas bajo la Ajustes de detalle de cartera justo debajo de la ventana principal del editor.
Por último, establece un Foto principal para su entrada, que se utilizará para representar la entrada en el índice de cartera.
El tema de alcance, junto con la mayoría de los temas de cartera, está diseñado para trabajar con un blog. Agregar un blog es una decisión relativamente importante y, para simplificar, vamos a suponer que lo has pensado detenidamente y decidiste que era una coincidencia..
Desde Páginas> Añadir Nuevo Crea una nueva página para tu blog. Déle un título y deje el contenido vacío. Esta página se convertirá en el índice para tus publicaciones de blog. A continuación, vaya a Ajustes> Lectura y elija la página que creó (la mía se tituló "Blog") en el menú desplegable "Página de publicaciones". Guarda tus cambios.
Ahora que tenemos algunas páginas con las que trabajar, es hora de agregar un menú. Desde Apariencia> Menús crear un nuevo menú (estoy llamando al mío "Navegación").
A continuación, asigne el menú al encabezado del tema usando la Menú Primaria desplegable.
Ahora, usa el Páginas widget, justo debajo Ubicaciones temáticas y Enlaces personalizados para asignar las páginas recientes que ha creado. En nuestro caso, que incluye "Blog", "Cartera", "Contacto", "Servicios" y "Acerca de". A continuación, arrastre y suelte cada elemento del menú para ordenarlos en consecuencia. Guardar cuando hayas terminado.
De forma predeterminada, el tema del alcance utilizará un conjunto de cuatro widgets básicos en las publicaciones de tu blog y la barra lateral de las páginas. Si bien es posible que desee dejarlos como están, es probable que desee personalizarlos..
El tema de Scope, y muchos similares, ofrecen múltiples conjuntos de ubicaciones de widgets. Para Scope, esas ubicaciones son:
Para personalizar los widgets, vaya a Apariencia entonces Widgets.
Trabajar con widgets está fuera del alcance de este tutorial, pero aquí hay algunas recomendaciones para tener en cuenta:
¡Uf! ¡Casi estámos allí! Ahora es el momento de dar un paso atrás y hacer una revisión.
Ir a través de cada página y entrada de cartera con una mentalidad de editor, en busca de contenido que necesita actualización y ajuste. Mire cada página como lo vería un cliente potencial, desafiándose para asegurarse de que sus ofertas de trabajo y servicio se presenten bien junto con un claro llamado a la acción.
A medida que revise, tome nota de las ideas para futuras actualizaciones y otras mejoras. Tenga en cuenta, quizás, lo que más le gusta del tema actual y lo que le gustaría ver mejorado en una versión futura (asegúrese de avisar al autor) o tal vez incluso en un tema nuevo completamente por el camino.
Una vez que haya completado una revisión personal, envíe su sitio web a algunos amigos y familiares de confianza y solicite comentarios. No se centre en los comentarios sobre la estética, sino en el contenido y la organización. Pregúntales si lo que haces y lo que ofreces se transmite claramente. Solicite cualquier sugerencia para mejorar el mensaje transmitido..
Una revisión por pares es importante y tiene el beneficio de ofrecer una perspectiva de terceros sobre su trabajo y, si está empezando, la primera lista de personas a las que solicita revisar su sitio puede incluso convertirse en sus primeros clientes..
Hemos cubierto mucho terreno. Ha pasado de un tema completamente nuevo a una cartera personalizada para su negocio independiente. Bien hecho!
¿Tener preguntas? Pregúntales en los comentarios a continuación. Si son técnico preguntas que le invitamos a formular, aunque por razones de conveniencia, dirija las preguntas específicas del tema a los propios autores del tema.
Accentsconagua