Transcripciones
1. Introducción: Hola, soy Sarah. Soy diseñador y desarrollador front-end con sede en Toronto. Como compañera de novia para ser, sé lo importante que es mantener tus costos al mínimo y mantener todo súper simple. Con este curso, te voy a mostrar, cómo crear un sitio web para tu boda de principio a fin. Todo, desde comprar el dominio hasta entrar en vivo. Al finalizar el curso, tendrás una página web donde tus invitados podrán RSVP así
como conocer todo lo que necesiten para el gran día. No necesitas saber codificar para crear este sitio. El tema es totalmente personalizable para adaptarse a tu boda y responde a todos los tamaños de pantalla.
2. Compra un dominio: Lo primero que debes hacer es comprar un nombre de dominio. Lo más común que hay que hacer es usar los nombres de los novios. Si vas a godaddy.com, puedes buscar un nombre de dominio y ver si está disponible. Como puedes ver, busqué a Kevin y Sarah, kevinandsarah.com se había ido, pero elegí ir con kevinandarh.rocks solo para ser lindo. Entonces puedes añadirlo a tu carrito. No obstante, es posible que quieras ir a comprar hosting primero, y luego obtienes el nombre de dominio gratis. No obstante, ya tengo hosting con GoDaddy, así que sólo voy a comprar el nombre de dominio. Sí necesitas comprar hosting, lo contrario tu sitio no será visualizable. Puedes seguir al carrito. Una vez que tengas todos los artículos que necesites y checkout usando PayPal o tarjeta de crédito. También puedes elegir entre un año a cinco años. Yo sólo elegí un año porque no lo necesitaré después de la boda, pero siéntete libre de elegir más de ustedes quieres guardarlo como recuerdo. Una vez que hayas comprobado, todo debería estar bien para ir y pronto recibirás un e-mail con toda la información sobre tu nueva página web. Lo siguiente que quieres hacer es dar click en tu nombre en la parte superior derecha y elegir visitar mi cuenta. Aquí es donde vas a encontrar todos tus productos, información sobre tu dominio así como tu hosting. Aquí es donde vamos a empezar a meternos en cómo agregar la página de WordPress a tu sitio.
3. Configurar el alojamiento: Lo siguiente que queremos hacer es poner el hosting con el nombre de dominio. Si haces clic en la parte superior derecha y vas a “Mi Cuenta”, verás tu alojamiento web en la segunda fila, haz clic en eso y elige “Administrar”. Una vez que estés en la página de hosting, verás una lista de todos tus dominios, tengo bastantes, pero puede que solo tengas uno. Para agregar un dominio a tu hosting, haz clic en “Añadir Dominio” y escribe el nombre del sitio web que acabas de adquirir. Para mí es kevinandsarah.Rocks. Tan pronto como escriba la primera letra, se poblará debajo. Después elige un nombre para tu carpeta. Esto puede ser lo que quieras, algo que sea fácil de recordar, y haga clic en “Ok”. Cuando estás escribiendo el nombre debajo del campo de dominio, si no se pobló eso significa que aún no estaba listo. A lo mejor volverías en unas horas para ver si está ahí, porque a veces puede tardar un poco más. Una vez que se añada, lo verás aparecer en tu lista. Dirá “Pendiente” bajo el estatus. Esto también lleva algún tiempo. Normalmente recibirás un correo electrónico, la notificación de que está listo.
4. Instalar Wordpress: Ahora que el hosting está terminado, podemos instalar WordPress. Si vas a la parte superior izquierda
del menú verde de navegación y haces clic en Inicio, verás esta página. En el lado derecho, verás opciones y ajustes. Haga clic en Wordpress. Ahora puedes gestionar tus aplicaciones de WordPress. Por lo que querrás hacer clic en instalar. Se desea elegir el nombre de dominio de
la página web de la boda y luego se quiere poner un directorio. El directorio es donde se va a vivir tu sitio de WordPress. Yo quiero que sea en la página en la que la gente aterriza cuando teclean kevinandsarah.rocks. De todas formas podrías querer que sea kevinandsarah.rocks/boda. Para llegar a la ruta principal, que sería kevinandsarah.rocks, solo déjalo en blanco. También es necesario agregar tu nombre de administrador y contraseña de administrador. Esto es lo que necesitarás para iniciar sesión en el sitio de WordPress para realizar cualquier cambio, subir fotos, todas las cosas que vamos a hacer en el futuro. También necesitarás agregar tu correo electrónico y podrás escribir un título de blog. Pero no se preocupe, siempre se puede cambiar esto más tarde una vez que iniciemos sesión en el sitio de WordPress. Cuando tengas todos los campos rellenados, pulsa Ok. Como puedes ver, dice que WordPress se está instalando. Esto también lleva algún tiempo. Así que siéntate, relájate y espera a que el correo diga que está listo.
5. Ingresar de Wordpress: Una vez instalado WordPress, podemos iniciar sesión y realizar algunos cambios. Si estás escribiendo tu página web de bodas en este momento, esto es lo que verías. Un tema inconcluso, sin embargo, para realizar cambios, querrás iniciar sesión. Por lo que querrás ir a la dirección de tu sitio web slash wp dash admin. Cuando llegues a la página de inicio de sesión, vas a ver el nombre de administrador así como la contraseña de administrador. Si recuerdas, los configuramos cuando estamos configurando la aplicación de WordPress en Go Daddy. Escriba la contraseña y su nombre de usuario y haga clic en Iniciar sesión. Ahora estás en WordPress, aquí es donde vamos a construir tu sitio. Asegúrate de marcar esta página, a veces es difícil recordar la dirección larga que necesitas escribir para llegar hasta aquí.
6. Compra un tema: Ya estás listo para agregar un tema. Hay un montón de temas por ahí, para su compra y de forma gratuita. El que estoy usando en este tutorial es de themeforest.com. Si vas a themeforest.com, y tecleas Lily, en la barra de búsqueda, encontrarás este tema. Elegí este tema porque es hermoso y me gustó mucho la línea de tiempo cerca de la parte inferior que muestra todos los eventos importantes de ti y de tu novia para ser o novio para ser esposa de ser. Este tema tiene todo desde tu registro de fiestas
nupales, ubicación de RSVP, así como cualquier otro detalle que quieras agregar. Este es un tema pagado. Hay pros y contras sobre temas pagados y gratuitos. Compras de tema pagado es genial porque obtienes el apoyo. Si tienes alguna pregunta, puedes enviar un correo electrónico al desarrollador y generalmente son bastante buenos para responder. Personalmente tuve una pregunta sobre este tema y envié un correo electrónico al desarrollador y él fue realmente rápido con la respuesta y respondió mis preguntas. Puedes pagar usando PayPal o tarjeta de crédito. Una vez que hayas pagado, verás un botón Descargar donde podrás descargar el tema a tu computadora.
7. Instala el tema de Wordpress: Tu siguiente paso es subir el tema a WordPress. Cuando lo descargues, tendrás un archivo ZIP como el de mi escritorio. Tendrás que hacer doble clic en eso para descomprimirlo. Cuando abras el archivo, verás un montón de otros archivos. Si abres documentación, verás una página index.html. Haga doble clic en eso, y se abrirá en su navegador. Este es un tutorial rápido para mostrarte todo lo que necesitas saber sobre este tema. En la primera parte se muestra cómo subirlo a WordPress. El tema que quieres subir a WordPress es el archivo lily.zip. Entra en tu Panel de WordPress, y ve a Apariencia, Temas. Haga clic en Agregar nuevo. Aquí es donde puedes subir un tema o usar uno de los tres temas de WordPress. Se pueden ver algunos de ellos en la primera página, y también se pueden buscar temas en la barra de búsqueda. Vamos a usar el que descargamos de ThemeForest. Para ello, quieres hacer clic en el botón Subir tema en la parte superior izquierda. A continuación, haga clic en Elegir archivo y seleccione la carpeta y, a continuación, lily.zip. Haga clic en Instalar ahora. Cuando esté hecho, podrás hacer clic en Activar. También te vas a dar cuenta de que este tema requiere unos cuantos plugins para ejecutar todas las diferentes características que te muestra. Si haces clic en Visitar sitio, verás cómo se ve sin los plugins y sin ningún contenido.
8. Instala Plugins de tema: Ahora quieres instalar todos los plugins con el fin de tener la RSVP,
fotos, todas esas cosas divertidas. Haga clic en Iniciar instalación de plugins. Verás una lista de los plugins, seleccionarás todos y en el menú de acciones masivas,
elige Instalar y, a continuación, haz clic en Aplicar. Se tarda unos minutos en instalar todos los plugins. Una vez terminado, tendrás una lista de todo lo que has instalado, y un enlace para volver al instalador. Haga clic en el enlace para volver al instalador. Aquí verás todos los plugins que acabas de instalar. Pero notarás que dice, la instalación aún necesita ser activada. Todos tus plugins están ubicados en el menú de la izquierda. Haga clic en Plugins instalados. Aquí encontrarás una lista de todos los plugins instalados en tu sitio de WordPress. Algunos de ellos están ahí por defecto desde GoDaddy o WordPress. Hay algunos que yo personalmente eliminaré, porque cuantos más plugins más peso hay en tu sitio y más lento será. Entonces sólo guarden lo que sea necesario. Ahora mismo estoy seleccionando todas las que acabamos de instalar, y desde el menú Acciones a granel, estoy dando click en Activar. Una vez que hayas tocado Apply, verás que hay algo de información en la parte superior. Akismet es para regular los comentarios de spam. No planeo tener una sección de comentarios en mi página web, así que solo voy a ignorar ese mensaje y pasar al mensaje de Jetpack. Necesitarás conectar el wordpress.com para que este plugin funcione. Tengo una cuenta, así que solo voy a iniciar sesión con mi nombre de usuario y contraseña. No obstante, si no lo haces, hay un enlace para crear uno ahí mismo. Una vez que hayas iniciado sesión, verás este mensaje, y si haces clic en Jumpstart, podrás ajustar algunos de los ajustes con Jetpack. Algunas de ellas no necesitarás. Puedes apagar muchos de ellos y solo ayudar con la espera y carga de tu sitio nuevamente. Entonces estoy desactivando las estadísticas del sitio, compartiendo, publicando, post
relacionado, mejor distribución, porque ninguna de estas es realmente necesaria. Yo solo quiero que las personas que están invitadas a mi boda vayan a este sitio web. Ahora todo está instalado, y estamos listos para seguir adelante.
9. Instala contenido de demostración: La forma más fácil de ver el sitio web es verlo con algún contenido demo. Este tema viene con contenido demo con el fin de darte una guía de donde puedes poner algunas fotos o algún texto y simplemente darte una mejor idea de cómo puede verse al final. Para importar este contenido, vaya a Herramientas, Importar. Verás una lista de diferentes opciones de importación. Haga clic en WordPress. Tendrás que instalar el Importador para poder importar este contenido. Adelante y haga clic en Instalar, haga clic en Activar y ejecute Importador. Te voy a mostrar un rápido antes y después. Si recuerdas, así era nuestro sitio antes del contenido. Ahora da clic en Elegir archivo y vamos a importar el contenido en la carpeta. En la carpeta del tema, verás un archivo XML. Elija eso y haga clic en Abrir. A continuación, haz clic en Subir archivo e importar. A continuación verás una página con algunos ajustes. Se desea revisar la descarga e importación de archivos adjuntos, luego seleccionar uno de sus usuarios existentes y pulsar “Enviar”. Se tarda un poco en importar, pero una vez hecho, te
lo dirá y ya estás listo para ver el nuevo sitio web. Da clic en Refrescar en el sitio web, y puedes ver ahora que hay algún contenido ahí dentro. No se ve como lo hizo en el ejemplo, pero estamos llegando. Si haces click en una de las publicaciones, podrás ver algún texto y tal vez algunas fotos.
10. Personajes básicas: Ahora que tenemos algún contenido demo, debemos personalizarlo para que esté más en línea con nuestro tema de boda. Así que ve a “Apariencia” y haz clic en “Personalizar”. Aquí tienes un menú con algunas opciones. Lo primero que queremos hacer es cambiar el aspecto de la página cuando se carga. Ahora mismo mostraba todas esas cajas. Pero queremos una página de inicio que tenga una imagen de función grande. Así que haga clic en “Página principal estática”, y luego en pantallas de primera página, elija “Página estática”. En primera página del menú desplegable, selecciona “Página de inicio”. Este es un avance de cómo se verá el sitio web. Ahora ves un lugar donde vas a tener la gran imagen de la página principal. Si lo ves en vivo, verás que está ahí. También queremos cambiar el título y el lema. Ahora mismo dice sólo otro sitio de WordPress. Aquí puedes poner la fecha de tu boda como se ve en el ejemplo. Si miras por el menú, hay un montón de opciones y vamos a llegar a esas pronto. Asegúrate de pulsar “Guardar” y “Publicar” para guardar todos los cambios que acabas de realizar. Aquí te mostramos un resumen rápido de los ajustes en el menú. Si eliges colores, puedes ver aquí que puedes cambiar el color del texto,
tu color de acento, tu color de fondo, y ves todos los cambios en el lado derecho. También puedes cambiar tu imagen de encabezado aquí. Puedes tener la imagen de fondo ser una presentación de diapositivas, donde tienes múltiples imágenes girando una tras otra. Elegí apagar la presentación de diapositivas. El contenido demo incluye fotos con dimensiones sobre ellas. Esto te ayudará y elegir las fotos correctas. También puedes entrar en “Ajustes”, “General”, aquí es donde cambias algunas de las cosas de detrás de escena, como la dirección de correo electrónico asociada a la cuenta. También puedes cambiar el título y el lema aquí, la forma en que se muestran las fechas en las entradas del blog. También puedes entrar en la sección de escritura y lectura y cambiar cualquier configuración ahí dentro. No obstante, para este tutorial, no
estaré cambiando ninguna de esas configuraciones. Entonces siéntete libre de dejarlos solos por ahora.
11. Agrega contenido: Ahora necesitamos agregar algún contenido. Para ello, vaya a Apariencia y haga clic en Widgets. Este tema funciona con widgets con el fin de obtener todas esas características que ves en la Página Principal. Verás en el lado izquierdo una lista de un montón de widgets que puedes arrastrar por allá. Ubicado cerca de la parte inferior, vas a ver todos los widgets que vinieron instalados con este plugin. Todos empiezan con Themechills. Estos son los que ves en la Página de inicio en el sitio de demostración. Queremos arrastrarlos hasta ese directorio. He añadido tres widgets. Para comprobarlos, voy a dar clic en Visitar sitio. Debería ver un temporizador, algunos eventos y un mapa. Si te desplazas hacia abajo, ahí está tu temporizador de cuenta atrás, ahí está tu lista de eventos y tus mapas deberían estar ahí, pero aún no está listo para ser instalado. Ahora voy a añadir el resto de los widgets a la sección.
12. Galería de fotos de la página de Homepage: El primer apartado o widget en el que vamos a trabajar son fotos. Esta es la zona donde tienes un desplazamiento horizontal de algunas fotos tuyos y de tu otra significativa. Puedes titular esta sección con lo que quieras. También puedes agregar una descripción. Copié y pegué uno ahí dentro. También querrás agregar un botón o llamar a la acción menos para obtener
más información sobre la recepción para invitados que no pueden llegar a la boda de destino. Tendrás que poner una URL para que el botón funcione. Si no tienes una ahora porque la página aún no está lista, solo déjala para más tarde. Si vas a este sitio y haces clic en “Actualizar”, verás el texto que acabas de introducir justo ahí. Ahora necesitamos agregar nuestras fotos. En el lado izquierdo, si haces clic en “Fotos”, verás una lista del contenido demo que ya está ahí dentro. Podemos simplemente editar estos en lugar de añadir nuevas fotos. Simplemente elige uno y haz clic en “Editar”. Ya verás en el lado derecho, hay una imagen de característica. Aquí es donde la imagen realmente va a aparecer en la página web. Elimino esa imagen de característica y cambio el título a fiesta de compromiso. Y voy a añadir una imagen de característica. Y esta imagen va a ser en la fiesta de compromiso. Haga clic en “Examinar” y luego vaya a través de sus carpetas y compruebe la imagen que desee. Tengo unas cuantas que voy a subir a unas que tienen que ver con esta sección de fotos. Eso lo voy a hacer ahora. Muestra múltiples imágenes al golpear comando y seleccionar con mi ratón. Después de que hayan terminado de subir, elegí la que quería ser la imagen de característica para esta sección de fotos. Selecciona eso y luego pulsa “Establecer imagen destacada”. Haga clic en “Actualizar” para guardar sus cambios. Vuelve a las fotos y haz lo mismo por tantas fotos como tengas. Cuando hayas terminado, vuelve al sitio y haz clic en “Actualizar”. Las fotos aparecen debajo del texto y puedes verlas desplazándote hacia la izquierda o hacia la derecha.
13. Cuenta de calendario y de cronogramas: A continuación, vamos a sumar la cuenta regresiva y los eventos. El conteo regresivo es esa sección con los días, meses, y horas antes de la boda. Por lo que en el área de widgets bajo “Apariencia” en la sección Página de inicio, abre el menú desplegable del temporizador de cuenta regresiva. Aquí puedes poner en la fecha para la boda y la hora. Debajo del temporizador hay dos spots para mensajes. primer campo es un mensaje para cuando la cuenta regresiva haya terminado, y el de abajo es el mensaje que se va a mostrar con tu cuenta regresiva. Se puede ver que tiene los días, horas, minutos, y segundos en ese orden. Definitivamente puedes cambiar esos solo copiando y pegando en el lugar que quieras. Si refrescas tu página, verás la cuenta regresiva con el fondo gris en medio
de tu sección de fotos y la sección de eventos. Ahora vamos a actualizar los eventos. Puedes agregar un título si quieres, pero voy a elegir no hacerlo. el lado izquierdo, voy a dar clic en “Eventos” para entrar y cambiar los que están con el contenido demo. Al igual que el primero y haga clic en “Editar”. Aquí es donde se puede cambiar el título así como cambiar la descripción y agregar una imagen de característica. Voy a subir archivos de la misma manera que lo hizo su última vez. Apenas agarrando unos pocos para esta sección a la vez. Entonces una vez que hayan terminado de subir, voy a elegir el para este evento que quiero ser la imagen característica. Cuando hayas terminado, haz clic en “Actualizar”. Un pequeño consejo, si pasas el ratón y haces clic en “Actualización rápida”, puedes hacer algunas pequeñas actualizaciones aquí, como la fecha y el título. Continúa con el resto de los títulos del evento y cámbialos para que se ajusten a tu página web. Asegúrate de obtener las fechas correctas porque así se
van a mostrar en el sitio de principio a fin. Cuando hayas terminado, deberías poder pulsar “Refrescar” y revisar tu nueva línea de tiempo.
14. Llamado y fiesta de boda: Hay un par de otras características que podemos agregar, una siendo la llamada y la otra siendo tu fiesta nupcial. En widgets bajo la página de inicio, se
puede ver la sección de llamada. Esto es básicamente sólo un texto extra. Cualquier cosa que quieras que vaya con ese fondo Grey, igual que la cuenta regresiva. El tripulante está bajo perfiles. Aquí es donde vas a poner todas tus fotos y bios de padrinos y damas de honor. Puedes agregar un título y simplemente pulsar “Guardar”. Después, desde el lado izquierdo, haga clic en “Perfiles”. Aquí tienes un montón de ejemplos ya ahí dentro. Vamos a hacer lo mismo y sólo editar los que ya están ahí. Simplemente elige uno y haz clic en “Editar”. Cambia el nombre en la parte superior y la pequeña descripción sobre ellos. Entonces en la imagen de característica, es
lo mismo que los eventos, solo sube algunas imágenes y selecciona la correcta. Establezca la imagen de la función, y haga clic en “Actualizar”. Sigue haciendo esto por todas tus damas de honor y padrinos hasta que termines. Si necesitas agregar más personas de las que tienes en los ejemplos, solo tienes que hacer clic en “Añadir perfil” en la parte superior izquierda junto al título del perfil. Cuando hayas terminado, pulsa “Refrescar” y deberías ver todas las fotos que aparecen debajo de tu llamada. Si pasas por encima de ellos, llegarás a ver el nombre y la descripción rápida, y podrás hacer click sobre ellos para ver más sobre esa persona. También hay algo de navegación en la parte inferior. Se puede pasar por la siguiente o la anterior dama de honor o padrinos.
15. Mapa de locación: Ahora vamos a añadir un mapa para la ubicación de la boda. Bajo apariencias en widgets, bajo página de inicio, verás el mapa,
desplegable, puedes agregar un título, y luego también tendremos que agarrar un código para ponerlo en la sección de incrustar o códigos cortos. Si vas a la página de plugins y encuentras el plugin de mapa que instalamos llamado Responsive Styled Google Maps. Haz clic en “Ajustes”, aquí tienes tu mapa, aquí es donde vas a elegir el color del puntero, el color de fondo, y también donde vas a introducir la dirección para que las personas encuentren tu boda. Todos los estilos de mapa están en este desplegable, seleccioné el número 8. Hay muchas otras opciones, pero en realidad solo necesitas cambiar los colores y asegurarte de poner en la dirección correcta. Cuando tengas todo configurado como te gusta, asegúrate de ir a la derecha en el cuadro gris oscuro, selecciona todo ese texto y cópialo. Después vuelve a tus widgets y abre los widgets de la página de inicio en la sección de mapa, y pega esa información en la sección de inserción o código corto, pulsa “Guardar”. Refresca tu página web y echa un vistazo a tu nuevo mapa. Ahí está. Si haces clic en el icono del puntero pequeño, vas a obtener la dirección con un enlace a direcciones.
16. RSVP e Instagram: Ahora vamos a sumar una forma para los invitados RSVP y seguir adelante en Instagram. En los widgets, esta sección de tecnología es donde va a ir el formulario de contacto real. Estaremos yendo por el lado izquierdo y haga clic en Contactar y haga clic en Editar bajo RSVP. Este es el formulario de RSVP. Aquí es donde vas a elegir lo que quieres que pongan. En este momento donde tienen nombre completo, correo electrónico, estarás atendiendo así como opciones de menú. También querrás cambiar la dirección de correo electrónico en el apartado de dos, porque quieres que se envíe la RSVP a tu dirección de correo electrónico. También puedes cambiar el cuerpo del mensaje. Cuando termines, pulsa Save. Asegúrate de copiar y pegar el código del formulario de contacto en el fondo azul y vuelve a los widgets. Debajo de textos, vas a pegar ese código en la sección de contenido y luego golpear guardar. Si refrescas tu página, verás el formulario de contacto ahí mismo. Instagram es bastante fácil, todo lo que tienes que hacer es poner un hashtag, hit save y todas las fotos que tienen ese hashtag van a aparecer en tu sitio web. Basta con tener en cuenta que las fotos que están en una cuenta privada no se mostrarán. Tienen que ser públicos para poder presentarse en tu página web.
17. Imagen de encabezado de la página de origen: Para cambiar la imagen del encabezado, debes entrar en apariencia, personalizar. Elige la imagen del encabezado del menú de la izquierda. Como mencioné antes, hay una imagen de portador de lugar con dimensiones. Queremos subir una imagen con las mismas dimensiones. Hay dos maneras de hacerlo. Uno, puedes llevar tu foto a Photoshop, ajustar las dimensiones ahí. Usando la herramienta de recorte, cámbiala a 1920 por 1080. Quieres asegurarte de guardar para web porque quieres que el tamaño de la imagen sea lo más pequeño posible. En las opciones guardar para web, en la parte superior derecha, verás un desplegable para el tipo de imagen así como la calidad de la imagen. Yo elijo alto, pero pensé que todavía era demasiado alto, así que entonces elegí medio. Se puede ver que disminuyen el tamaño del archivo. Ahora voy a seguir adelante y guardar eso para mi página de inicio. Como dije antes, no tengo una presentación de diapositivas, así que haz clic en agregar nueva imagen, subir archivos, selecciona el archivo que acabas de guardar, luego pulsa seleccionar y recortar. Después golpea salto de recorte si ya está recortado y ahí lo tienes. Ahí está tu imagen. Si no tienes Photoshop, puedes hacerlo fácilmente en WordPress. Elija la imagen a tamaño completo y haga clic en seleccionar y recortar. En la siguiente página, vas a tener la opción de cambiar las dimensiones de la imagen. Se puede ver que ya hay un tamaño precargado para esta sección. Simplemente muévelo hasta que obtenga un lugar que le guste, luego seleccione imagen de recorte. Deseas asegurarte de eliminar la imagen de positor con las dimensiones para poder ver la nueva imagen que subiste en tu sitio web. Si actualizas la página, deberías ver la nueva imagen en segundo plano ahora. Ahora, vamos a añadir el texto encima de la imagen de fondo. Haga clic en Header Hero Text, escriba lo que le gustaría que aparezca sobre la imagen. Cuando termines con eso, puedes agregar un botón para debajo del texto. Elegí poner aquí un botón RSVP. En el menú desplegable, puedes elegir la página enlazada a la que quieres que te lleve el botón, y luego puedes escribir el texto que quieras mostrar en el botón. No olvides golpear guardar y publicar.
18. Menús de navegación: Vamos a añadir los menús que ves en la parte superior derecha de la página web. En el mismo menú de personalización, elige “Menús”, luego elige “Ubicaciones del menú”. Debajo del menú desplegable, haz clic en “Menú superior”. Se puede ver en el lado derecho dónde va a aparecer este menú. Hay algunos elementos predeterminados ahí ahora mismo: blog, registro, línea de tiempo. Si regresas, y luego eliges el menú, puedes decidir si quieres quedarte con esos o quitarlos. No voy a tener un blog, así que lo eliminé. También puedes agregar más elementos de menú haciendo clic en el botón Añadir menú. Puedes agregar un enlace personalizado, puedes agregar publicaciones, puedes agregar las páginas que ya has creado, hay un montón de opciones para elegir para poner en tu menú superior a la derecha. También puedes arrastrar los elementos del menú alrededor para ponerlos en un orden diferente. Cuando haya terminado, haga clic en Guardar y publicar.
19. Registro de regalo: Para el registro, vamos a tener una página separada. No va a estar en la página de inicio. Vas a poder llegar desde el menú superior derecho. Si hace clic en el enlace “Registro” en este momento, verá esta página. Te está diciendo que tienes que descargar otro plugin. Este lo tienes que descargar por separado fuera de WordPress. Elige descarga gratuita, e ingresa en tu dirección de correo electrónico. Deberías obtener un enlace en tu e-mail para descargar el plugin. Una vez descargado, vaya a la página Plugins y haga clic en subir plugin. Haga clic en “Elegir archivo” y seleccione el archivo bean-registry.zip, haga clic en “Instalar ahora” y cuando termine, haga clic en “Activar Plugin”. Ahora cuando vayas a este sitio y hagas clic en la página “Registro”, deberías ver algunas imágenes con tiendas y logotipos para ir a tu registro. Para cambiarlos, vamos a entrar en páginas y hacer clic en “Editar” en Registro. Verás un montón de códigos cortos en esta página. Aquí es donde vas a cambiar el nombre de la tienda. Para obtener una lista de los nombres de las tiendas que se ofrecen, selecciona la carpeta de imágenes en el archivo que acabas de descargar. Verás una lista de todos los diferentes logotipos que ofrecen. Copia y pega ese nombre de archivo en el código corto de WordPress. En el lugar donde hay dos hashtags, ahí es donde vas a poner la dirección para llegar a tu registro. Una vez que pulsas “Actualizar”, el enlace debe actualizarse y debes ver el nuevo logotipo en tu sitio. Cuando el invitado haga clic en ese logotipo, entonces
deben ser llevados a su registro.
20. Agregar una nueva página: Es posible que desee agregar una nueva página a su sitio. En el menú de la izquierda, haz clic en “Páginas”, “Añadir nuevo”. Ingresa el título de tu página en la parte superior. Cuando haya terminado, haga clic en “Publicar”. Es posible que desee agregar esta página a su menú. Así que ve a Apariencia, Personalizar. Haga clic en “Menús”, seleccione “Menú superior”. Voy a sustituir el Menú Línea de Tiempo por este nuevo. Así que eliminé eso, y ahora hago clic en “Añadir elementos”, escojo “Páginas”, agarrar “Detalles”, y pulsar “Guardar”. Ahora deberías verlo en la parte superior derecha. Al hacer clic en la Página “Detalles”, probablemente solo vayas a ver una página vacía con un titular. Para agregar contenido, basta con introducir toda la información en el cuadro blanco debajo del título. Aquí es donde voy a poner los detalles de la ceremonia, la ubicación del hotel, así como la cena después. Si desea agregar estilo a su texto, haga clic en el icono, para abrir la barra de herramientas debajo. Después agrega encabezados o color o tamaño de fuente y centro o a la izquierda alinea tu texto si lo deseas. También puede agregar un enlace resaltando el texto y usando el icono del enlace para agregar la dirección.
21. Personalización de Css: En esta última sección, voy a mostrar cómo hacer alguna personalización avanzada. Lo primero que te voy a mostrar es agregar fuentes personalizadas. Entra en Plugins y busca fuentes de Google y encuentras un plugin llamado fuentes WP Google. Haga clic para activar el plugin. Una vez que esté listo. Puedes ir a ella por el lado izquierdo y hacer clic en “Google Fonts”. El resto de las personalizaciones requieren cambios en CSS. Para ello, tengo algunos pasos esbozados aquí, y básicamente son los mismos pasos para cada vez que queremos cambiar algo. Es mejor si usas un navegador Chrome o Firefox. Cuando encuentre ese elemento web que desea cambiar, botón derecho en él y haga clic en Inspeccionar elemento o Inspeccionar dependiendo del navegador en el que se encuentre. Utilicé la imagen de fondo como ejemplo aquí. Una vez que hayas presionado Inspect, verás que aparece una ventana emergente de la barra de herramientas del desarrollador con un montón de código HTML y CSS. Después querrás encontrar el HTML que va con los elementos que quieres cambiar. Entonces a partir de ahí, haces clic en eso y luego cambias los valores CSS. Después copia y pega eso y lo trae a la sección CSS en WordPress.Tendremos un archivo para que descargues en proyectos que tiene todos los cambios CSS que hice si quieres aplicar los mismos. Este es un rápido antes y después. Así es como se ve la fuente estándar. Si haces clic derecho en él y haces clic en inspeccionar, puedes ver qué estilo de texto es, es un H3. Esto es importante saber para que sepas qué fuente poner con qué estilo. Despegue H3 para cambiar el encabezado. Si quieres ver los estilos de fuentes que tiene Google Fonts, ve a google.com/fonts. Aquí puedes desplazarte por todas las diferentes fuentes de estilo, luego cuando vuelvas al plugin puedes elegir esa desde el menú desplegable. Cuando haya terminado, haga clic en “Guardar todas las fuentes”. Si actualizas tu página, deberías ver una fuente nueva. Ahora vamos a añadir una imagen personalizada para mostrar cuando el invitado haga clic en el icono del mapa. Voy a buscar en el Tropicana y agarrar su logotipo de Google Images y guardarlo en mi computadora. Entonces voy a abrir una nueva pestaña con la Mediateca. Después sube la imagen que acabamos de guardar, haz clic en la imagen para abrirla, y luego haz clic en “Ver página de datos adjuntos”. Haga clic derecho en la imagen y haga clic en “Abrir imagen en Nueva pestaña”. Aquí puedes copiar y pegar la barra de direcciones superior, pegarla en la dirección que está en el cuadro de descripción. Simplemente voy a volver a seleccionar mis colores, y después asegurarme de copiar el texto en el cuadro gris para sobrescribir el texto antiguo. Vuelve a Widgets, abre Página de inicio, abre Mapa y reemplaza el texto antiguo por el nuevo texto. Haga clic en “Guardar”. Si refrescas la página y haces clic en el icono del mapa, deberías ver la nueva imagen. Ahora vamos a cambiar la flor rosa que aparece en el divisor bajo los títulos. Para ello voy a agarrar un icono de flaticon.com. Busqué corazón y encontré uno con anillo de compromiso con un corazón en la parte superior. Si haces clic en el ojo, deberías poder descargar un archivo PNG con el color que elijas. Haga clic en “Descargar gratis”, y si hace clic derecho e Inspeccionar elemento, verá que está configurado como una imagen de fondo llamada lily.svg. Eso vamos a sustituir por nuestra nueva imagen. Vamos a hacer eso yendo a godaddy.com,
entra a administrar tu sitio web de alojamiento, y luego haciendo clic en Administrador de archivos. Cuando estés aquí, debes navegar al sitio web de la boda, abrir esa carpeta, abrir wp-content, luego Temas, y luego el nombre de tu tema que es lirio. Después abre Image y verás el archivo lily.svg, así que vas a arrastrar tu nuevo archivo a esa carpeta. Para poner esto en su lugar vas a querer entrar en editor de apariencia. Verás una lista de páginas en el lado derecho, te desplazas todo el camino hacia abajo puedes hacer clic en style.css. Antes de realizar algún cambio una buena idea es copiar todo el texto de la página que estás cambiando y pegarlo en un archivo de texto. Por si acaso estropeas algo puedes volver a colocarlo a cómo fue originalmente. Una vez que ese archivo esté abierto, si haces clic en Apple F para buscar en el archivo y luego escribe lirio, te llevará a ese estilo. Después puedes cambiar el lily.svg por el nombre de tu nuevo archivo. Cuando hayas terminado, refresca la página y comprueba si aparece el icono. Para mí no lo hizo. Todavía está ahí pero está escondido en el fondo. Voy a cambiar el tamaño de fondo al 100 por ciento. Ahí está. Tendrás que copiar toda esa sección de texto donde solo cambias el tamaño de fondo, ahora necesitamos agregar ese estilo que acabamos de cambiar. Si vas a la apariencia y haces clic en editar CSS, tienes una página CSS en blanco. Pegue el texto que acaba de copiar en el editor de hojas de estilo CSS. Guarda la hoja de estilo y sigue adelante. Vamos a añadir más estilos. Voy a cambiar la superposición en la imagen de fondo. Está un poco oscuro así que hice clic en eso, fui a inspeccionar elemento y luego encontré el color de fondo era un gris opaco, estoy cambiando eso a transparente por lo que es un poco más brillante. Vas a querer hacer lo mismo y resaltar el texto para que puedas copiarlo y luego pegarlo en el editor CSS. Ahora voy a cambiar el tamaño de la fuente para los encabezados. Pero cuando hago clic derecho y hago clic en Inspeccionar Elemento, puedo ver que el tamaño de la fuente es un poco grande así que lo bajé un REM, y ahora todo encaja dentro de la línea. También voy a cambiar el tamaño de fuente y el color de fuente de la navegación superior derecha. Era un poco demasiado ligero así que lo cambié al color 666666. De nuevo, elimina todo lo que no estés usando cuando lo pegues todo de nuevo a la hoja de estilo. Ahora voy a cambiar el color de ese borde muy claro alrededor a un color blanco sólido. Estoy cambiando el color transparente RGBA a blanco, que es FFFFFF. Ahora, solo estoy cambiando la altura de la imagen de fondo porque me pareció que era un poco grande, así que la cambié de 800 píxeles a 700 píxeles. Ahora mismo estoy cambiando el color de fondo de la cuenta
regresiva al mismo color que el gris que está detrás de él. Primero fui a revisar los elementos de fondo gris y encontré qué color de gris es, y luego fui al fondo blanco y cambié eso para que fuera igual. También estoy cambiando el tamaño de la fuente porque son un poco pequeñas así que voy a hacerlo un poco más grande. Algo de lo que me gustaría deshacerme es el copyright en el pie de página. Compré el tema así que tengo los derechos para usarlo. Simplemente voy a poner un estilo display none en el pie de página para que nada aparezca en la parte inferior.
22. Resumen: Para terminar, este es un ejemplo de cómo se verá el sitio web terminado. Al final, te voy a mostrar las diferentes resoluciones de tamaño de pantalla, cómo se verá en tabletas, y dispositivos móviles. Si agarras las asas de tu navegador y desliza el navegador a un tamaño un poco más pequeño, verás que se convierte en una vista de tableta y luego lo traes aún más pequeño y vas a ver que va todo el camino al móvil. A medida que mueves tu navegador, notarás que el sitio se ve bien sin importar en qué tamaño de pantalla lo veas.
Sarah Trafford, Designer
