Personalizar tu Web en WordPress
Como personalizar tu web en Wordpress con Themify Simple
Lee antes: Instalar un tema Gratis en Wordpress
Entrar a Wordpress localmente desde Bitnami ó desde nuestro Hosting.
Paso 1 – Skin
Vamos a Themify Simple –> Skins, seleccionamos el color que nos guste más y presionamos Save para grabar. Puedes verificar tu Web y volver a cambiar el color por otro, si así lo quieres.
Paso 2 – Páginas
Ahora creamos al menos dos páginas, nuestro Home (que es la pagina principal) y nuestro Blog (entradas de nuestra web). Puedes hacer cuantas quieras o necesites de la misma forma.
En la parte superior seleccionamos la opción +New, luego Page y el botón New, ponemos el nombre de la página y presionamos Publish.
Posteriormente vamos a Settings –> Reading y en Your homepage display seleccionamos A Static Page (select below) y colocamos la página Home para Homepage y la página Blog para Post Page.
En este video se muestran los pasos mencionados.
Para que no muestre el nombre de la página hacemos lo siguiente: En Themify Simple –> Themify Settings –> Default Layouts –> Default Page Layout en la segunda opción Hide Title in All Pages seleccionamos Yes y grabamos presionando Save.
Paso 3 – Menú
Ahora creamos un menú con las páginas creadas y lo asignamos como menú principal.
En la parte superior de tu sitio, bajo el nombre de tu Web, hay una lista de opciones desplegable, selecciona la opción Menus, y luego bajo Menu Structure en el campo Menu Name teclea un nombre de Menú, de la parte izquierda selecciona las páginas en el orden que quieras que aparezcan y selecciona la opción Main Navigation, luego Save Menu.
Además de páginas, los menús pueden contener categorías, tags, posts ó links customizables.
Paso 4 – Layout
Seleccionar Layout ó diseño para nuestra(s) página(s).
Visualiza tu sitio Web en la página Home o la que quieras diseñar. En la parte superior derecha presiona la última opción: Turn On Builder este será nuestro editor gráfico para actualizar páginas.
Ya que se selecciona aparece un circulo gris con un símbolo de más, ahí es donde están todas las herramientas de diseño, que podemos usar con solo arrastrar y soltar. Pero por el momento seleccionaremos un layout pre-diseñado.
Para esto, presionamos el botón Import Layout, como te darás cuenta hay un sin fin de diseños, así mismo puedes seleccionar por categoría. Como es una página principal seleccionaremos a una que se adapte a ello. Finalmente seleccionamos el botón Replace Layout. Luego presionamos Save para grabar y el botón X para cerrar y ver los cambios.
Si no te convenció el diseño, puedes seleccionar otro haciendo el mismo procedimiento.
Aquí otro ejemplo de selección de layout pre-diseñado para una página About. Solamente necesitaremos agregar nuestro propias imágenes y contenido.
Paso 5 – Header
Ahora personalizaremos nuestro Header o parte superior con redes sociales y si así lo requieres cambiar el Título y descripción de sitio Web.
Primero vamos a configurar nuestras redes sociales en: Themify Settings –> Social Links.
Una vez configurados nuestros Social Links, seleccionamos en la parte superior de nuestra Web la opción Customize, luego presionamos el simbolo de menor que < que aparece en la parte superior para ir hacia atrás, a las configuraciones principales del site, luego vamos al apartado Widgets, Social Widget, presionamos Add Widget, buscamos y seleccionamos Themify Social Links, presionamos Done y luego Publish para ver los cambios.
Para los títulos volvemos a presionar Customize, está vez seleccionamos Site Logo and Tag Line. Ahí podemos cambiar el Título de la Web en el apartado Site Logo, opción Site Title. Mientras que el Tag Line está en el apartado Tag Line, opción Text. También tenemos la opción de ocultarlo, opción None.
En este vídeo vemos los pasos mencionados.
Para terminar con el Header lo que haremos ahora es configurar nuestro encabezado para que este sea transparente en vez de sólido.
Visualizamos nuestra página Home, seleccionamos el botón Edit Page y utilizando el scroll hacia abajo buscamos el Themify Custom Panel, presionamos en la pestaña Page Appearance y seleccionamos la opción Transparent Background. Presionamos Update y luego View Page.
En este vídeo podemos ver los pasos mencionados.
Paso 6 – Footer
En este último paso veremos como agregar las redes sociales también en el pié de página o Footer.
Seleccionamos Customize, presionamos el signo menor que para ir hacia atrás, a las configuraciones principales, ahí presionamos Widgets y luego Footer Social Widget, presionamos el signo de más y seleccionamos el Widget Themify Social. Presionamos Done y Publish.
En este vídeo podemos ver los pasos mencionados.
Paso 7 – Contenido
Finalmente veremos como cambiar el contenido para personalizar aún más nuestra Web.
Primeramente nos aseguramos de activar la opción Turn On Builder.
Como personalizar contenido en Imágenes
Damos doble click a la imagen que queremos cambiar, sea cual sea el tipo de elemento si tiene una imagen nos mostrará la opción Imagen URL, y es ahí donde aparecerá la liga de su ubicación. Si no aparece en la primera pantalla al darle doble click, buscamos la pestaña Styling ya que la imagen tal vez este como un Background Image. Para cambiarla presionamos en la esquina al final del campo una cruz, esto hará que se elimine el llamado a esa imagen.
Ahora podemos poner el link de una imagen propia ó inclusive subir una nueva a nuestro Wordpress.
Para esto una vez que se borró el link anterior, seleccionamos el signo de + (browse library) ahí seleccionamos la pestaña Upload Files y luego presionamos el botón Select Files.
Posteriormente seleccionamos una imagen de nuestro equipo local y presionamos Insert File URL.
Existen opciones para visualizar imágenes, como la posición, centrado, gradiente, scrolling, que con el tiempo te familiarizarás viendo el ejemplo de los pre-diseños, pero esta es la base.
Hay diferentes bancos de imágenes que podemos utilizar dándole el crédito correspondiente al autor. Nuestro preferido es unsplash.
Como personalizar contenido en Texto
Para el caso del texto es mucho más sencillo ya que solo se tiene que dar doble click al texto que queremos cambiar y nos aparecerá una ventana en donde podemos cambiar el contenido.
Al terminar de modificar imágenes o texto no olvidemos presional el botones Done y Save, luego Cerramos (x) para ver los cambios.
Consideraciones Finales
Así como es importante entender el funcionamiento del Themify Builder, también son sus Themify Settings, donde también se puede ir entendiendo los diferentes opciones para diseño de las páginas.
En Default Layouts, por ejemplo, para nuestro blog podemos indicar si queremos Sidebar o no, mostrar los posts completo o solo en preview, si queremos ocultar o no autores, fechas de post, etc.
En Theme Settings por ejemplo si queremo podemos definir cuantos Widgets tendrá nuestro Footer, esta es la configuración:
Si quieres saber cuantos Widgets y en que ubicación de la página están puedes ir a Appearance –> Widgets. Los Widgets disponibles están en la parte izquierda y se pueden “arrastrar” hacia la posición requerida o de eliminarlos si así lo requerimos.
Esto solo es el inicio, con un poco de paciencia podrás ir descubriendo todas las potencialidades del Wordpress con el tema Simple de Themify.
Si buscas apoyo en la creación de tu web, cuento con todas las funcionalidades de la membresía master, en el que podrás elegir un sin número de temas, plug-ins y add-ons, contáctame aquí.
