Cómo hacer un sitio web comercial: ¡una guía de video completa paso a paso!

Ofertas de WordPress


Normalmente nunca comenzaría una publicación tan dramáticamente, pero MALDITA tenemos algo especial para ti hoy: una completa paso a paso video guía (sin omitir nada) para crear un sitio web profesional de WordPress para pequeñas empresas!

Sin embargo, lo que hace que este video sea tan especial es esencialmente tres cosas: 1. El hecho de que así es exactamente como nosotros mismos lo haríamos (y somos, ejem, casi expertos en esto); 2. El nivel de detalle al que entramos: el video dura una hora y media, y creamos un ejemplo de sitio web para pequeñas empresas de principio a fin; y 3. Que el video está dirigido a principiantes completos, personas que muy probablemente no hayan hecho nada como esto antes (y todavía ven la idea de crear un sitio para ellos como algo realmente desalentador).

Simplemente siguiendo, haciendo clic donde hacemos clic, y pensando un poco en cambiar algunos aspectos para adaptarse a su propio negocio, con suerte podrá crear un sitio web de WordPress igualmente fantástico (y técnicamente excelente)!

¿Entonces, Qué esperas? Empezar!

Cómo hacer un sitio web profesional para negocios con WordPress:

Enlace directo para ver el video en Vimeo.

– (nota: créditos de video para Topher DeRosia – creador de HeroPress

Transcripción del video:

En este video, le mostraré cómo hacer un sitio web profesional para negocios con WordPress. Iremos paso a paso y no dejaré nada fuera. El negocio que vamos a utilizar como modelo es un espacio de coworking. Si desea echar un vistazo a la versión final de este sitio web, puede visitar coworkerpro.com. Los elementos que vamos a poner en este sitio podrían usarse en cualquier sitio de negocios. Hay un llamado a la acción. Un poco acerca de nosotros. Algunos miembros del personal, testimonios y un formulario de contacto, así como varias otras páginas. Sea cual sea su negocio, al final de este video, debe tener un sitio web de primer nivel para él. Vamos a alojar nuestro sitio en Siteground. Y echaremos un vistazo a todo lo que tienen para ofrecer, y lo fácil que es poner las cosas en marcha. Vamos a instalar algunos complementos adicionales para ayudar, y vamos a utilizar el tema Hestia de Themeisle. Hestia nos permite usar el personalizador integrado en WordPress para editar cada parte de la página, directamente desde la parte frontal. También veremos varias herramientas que pueden ayudar a que nuestro sitio funcione más rápido y mejor. Veremos el optimizador propio de Siteground. Conectaremos Google Search Console y Google Analytics, así como Yoast SEO, para la optimización de motores de búsqueda. Y luego usaremos el complemento Jetpack de Automattic para administrar el correo no deseado, las copias de seguridad y algunas estadísticas adicionales. Si sigue, en solo un par de horas, debe tener un sitio web de negocios completo, hermoso, funcional y listo para usar. Entonces empecemos. Lo primero que queremos configurar es el alojamiento web. Ahora el alojamiento web es donde su sitio va a estar en Internet. Es algo así como conseguir un garaje de alquiler para guardar tus cosas. Alquilas un poco de espacio, pones tu sitio web en él y la gente puede visitarlo. El sitio que vamos a usar se llama Siteground. Son un excelente anfitrión con excelentes precios y muchas características que realmente me gustan. Pero antes de comenzar aquí, quiero mostrarle algo en WinningWP.com. Siteground y WinningWP tienen un acuerdo en el que puede ahorrar% de descuento en su alojamiento en Siteground. Además, WinningWP obtiene una pequeña porción del dinero que va a pagar. Este dinero se destina a crear videos como este, por lo que es realmente una situación en la que todos ganan, donde obtienes alojamiento económico, excelente contenido y WinningWP también se pone un poco. Ahora, para usar este acuerdo, todo lo que tiene que hacer es ir a esta página, habrá un enlace debajo del video. Y haga clic en aplicar el cupón. Y ahí estamos, dice, un trato especial para los visitantes de WinningWP.com. Y elegiremos un plan. El plan que vamos a seguir es el plan GrowBig. Tiene suficientes características adicionales sobre StartUp que realmente me gustan. Pero GoGeek es realmente para sitios un poco más grandes de lo que vamos a construir. Así que escojamos GrowBig. Y haremos clic para comenzar. Ahora parte del proceso para este video es registrar un nuevo nombre de dominio. Si ya tiene un nombre de dominio registrado, Siteground tiene una excelente documentación aquí sobre cómo apuntarlo a su sitio o transferir el nombre a Siteground. Cualquiera de los dos funciona muy bien y tienen buena información sobre cómo hacer ambos aquí mismo. Vamos a obtener uno nuevo, y será coworkerpro.com. Ahora, este dominio cuesta $. un año. Y cuando lo piensas, como precio anual, eso no es mucho. Hagamos clic en continuar. Aquí dice, felicidades, nuestro nombre de dominio está disponible. Ahora, vamos a crear una cuenta en Siteground. Primero, ingresamos una dirección de correo electrónico y luego una contraseña para Siteground. Esta no es una contraseña para su nombre de dominio, o para FTP o algo así, es solo para iniciar sesión en Siteground. A continuación, ponemos información personal. A continuación, ingresaremos la información de nuestra tarjeta de crédito. Y aquí, vamos a decir que nuestra dirección de facturación es la misma que figura en la información de contacto anterior. Y ahora, vamos a revisar qué es lo que estamos comprando. Estamos obteniendo el plan GrowBig. Nuestro centro de datos estará en Chicago. Eso está bastante cerca de donde estoy. Pero tiene una opción, podrían ser otros lugares, todo lo que tiene que hacer es hacer clic en este botón. Estoy comprando un plan mensual por $. un mes, así que ahora me van a cobrar $ .. Agregue a eso el registro del nombre de dominio por $ .. Además, realmente queremos privacidad del dominio. Esto evita que los spammers rastreen el registro de dominio en busca de direcciones de correo electrónico. Por último, está el escáner del sitio Siteground. Esto monitorea su sitio en busca de ataques y ataques y cosas por el estilo. Vale la pena, te pone un paso por delante de los malos. Entonces, mi total será $ … Pero lo bueno es que esto paga todo el año, por lo que no tienes que pensarlo nuevamente por un año. Confirmamos los términos del servicio y hacemos clic en pagar ahora. Y nuestro pedido ha sido enviado. Podemos iniciar sesión en nuestra área de clientes de inmediato. Sin embargo, los nombres de dominio pueden tardar hasta horas en registrarse. Por lo tanto, nuestro nombre de dominio no funcionará de inmediato. Ahora que hemos creado nuestra cuenta Siteground, podemos ir al nombre de dominio que creamos y ver este marcador de posición. Todos los nuevos nombres de dominio en Siteground obtienen un marcador de posición como este, y permanecerá allí hasta que instalemos nuestro propio sitio web. Entonces, para nuestro próximo paso, sigamos adelante e instalemos WordPress. Primero, vayamos a Siteground.com e inicie sesión con la cuenta que creamos anteriormente. Ahora que hemos iniciado sesión, aquí mismo en el panel principal, hay una pequeña alerta que dice que tiene una nueva cuenta de alojamiento que aún no ha configurado. Y si hacemos clic en ver, nos da varias opciones. Podríamos comenzar un nuevo sitio web, transferir un sitio web o decir que no necesitamos ayuda ahora. O podríamos hacer clic en esta pequeña flecha y esto volverá más tarde. Pero vamos a seguir adelante y comenzar un nuevo sitio web. Queremos WordPress. Y ahora estamos poniendo información de la cuenta de WordPress. Entonces esto será para WordPress en nuestro sitio. Y haremos clic en confirmar. Y ahora dice que solicitó instalar WordPress en su cuenta. Y luego debemos confirmar que hemos leído y aceptamos los términos de servicio de Siteground. Voy a dejar eso como un ejercicio para ti. Y ahora, haremos clic en configuración completa. Y ahora lo que está haciendo es crear una base de datos para nosotros, instalar WordPress y conectar los dos, utilizando la información que acabamos de ingresar. Y ahí estamos. Podemos proceder a nuestra área de clientes. Pero ahora, si volvemos a nuestra página web y volvemos a cargar, verá que tenemos un blog. También notará que estamos ejecutando HTTPS, lo que significa que crearon un certificado SSL para nosotros. Te mostraré dónde sucede eso, para que sepas cómo hacerlo si alguna vez lo necesitas. En el área de usuario de Siteground, vamos a mis cuentas. Y luego ve a cPanel. Siempre queremos acceder a cPanel de forma segura, así que adelante y elija recordarlo. Ahora hay muchas cosas en esta página, pero también hay una búsqueda maravillosa aquí. El certificado SSL que tenemos proviene de Let’s Encrypt. Así que escribiremos L-E-T, y ahí estamos, nos filtramos hacia abajo. Y aquí puede ver nuestro certificado SSL para coworkerpro. Pero Siteground lo configuró para nosotros, por lo que no debemos preocuparnos por eso. Solo quería que pudieras ver dónde está, porque es importante. Así que ahora, iniciemos sesión en WordPress y hagamos una configuración menor. Este es el nombre de usuario y la contraseña que creé hace unos momentos. Ahora, algo más que Siteground hizo por nosotros es instalar Jetpack. Veremos la configuración un poco más tarde. Voy a cerrar la barra de bienvenida y la barra de Jetpack, y ahora tengo una instalación muy vasta de WordPress. Entonces, una de las primeras cosas que queremos hacer es ir a Configuración → Enlaces permanentes, y queremos el nombre de la publicación, porque hace URL más simples y fáciles de leer. También es mucho mejor para la optimización de motores de búsqueda, y eso puede ser realmente importante. Luego iremos a la discusión, y por ahora, desactivaremos los comentarios, porque no queremos que nadie tropiece en este sitio web y use comentarios, porque probablemente serán spam. Iremos a la lectura. Y vamos a desalentar la visibilidad del motor de búsqueda por ahora, porque no estamos listos para ser públicos. Ahora, no lo olvide, una vez que haya terminado con su sitio y esté listo para funcionar, regrese a esta página Configuración → Lectura y desmarque desalentar a los motores de búsqueda de indexar este sitio. Porque entonces, Google podrá ir a buscarte. Luego, queremos eliminar el contenido predeterminado que viene con WordPress. Hay una publicación con un comentario. Y si desechamos esa publicación y la desechamos, entonces el comentario va con ella, así que no necesitamos buscar ese comentario y eliminarlo. Pero ahora vayamos a las páginas, y no se encuentran páginas. Entonces, si miramos nuestra página de inicio, debería verse bastante soso. Nada Encontrado. Hay algunas cosas en la barra lateral, vamos a ocuparnos de eso. Simplemente vaciaremos eso de inmediato, y luego, tendremos una pizarra limpia. Y ahí está. Un sitio vacío, perfecto para llenar nuestro contenido. Ahora, nuestra página de inicio no tendrá un blog. Eso va a ser una parte separada del sitio. Pero en este momento, nuestra página de inicio es un blog. Así que cambiemos eso. Lo primero que haremos es crear dos páginas. Llamaremos a este hogar, y simplemente lo publicaremos. Y luego haremos otro, y nuestro sitio no tendrá un blog, tendrá una sección de noticias, así que llamaremos a esto Noticias. Así que ahora tenemos dos páginas, Inicio y Noticias. Pero ahora tenemos que decirle a WordPress cómo usarlos. Ahora, vamos a Configuración → Lectura. Y justo aquí, dice que se muestra Tu página de inicio, y en este momento, son Tus últimas publicaciones. Pero en su lugar, vamos a elegir una página estática. Y para la página de inicio, elegiremos Inicio, y para la página de publicaciones, elegiremos Noticias y guardaremos los cambios. Ahora, si vamos a ver la página web, está nuestra página de inicio. Y nuestro sitio todavía se llama mi blog y mi blog de WordPress, pero vamos a cambiar eso en solo unos minutos. Ahora que tenemos las configuraciones más básicas realizadas en nuestro sitio, vamos a instalar un par de complementos que nos ayudarán a avanzar. El primero se llama TinyMCE Advanced. Ahora TinyMCE es el nombre del editor que usa WordPress. Si alguna vez ha hecho una página o publicación, ha utilizado TinyMCE. Si editamos esta página, la verá aquí mismo. Por defecto, tiene esta barra. Si hace clic en este botón, llamado alternar barra de herramientas, obtenemos una segunda barra. Pero TinyMCE Advanced agrega aún más. Aquí hay una lista desplegable para diferentes tipos de encabezados, y hay un menú de navegación aquí de todo tipo de otras herramientas. Así que instalemos esto muy rápido. Vamos a complementos, agregamos nuevos, y podemos buscar complementos, y ahí está. Haremos clic en instalar ahora y activar. Y ahora, si vuelvo a las páginas y edito la página de inicio, verá que tenemos un menú desplegable para fuentes, encabezados, y podríamos usar tablas y todo tipo de otras cosas. Y esto será útil más tarde. Ahora el otro complemento que vamos a instalar se llama My Eyes Are Up Here. Y este es un complemento realmente genial que ayuda a recortar fotografías. Normalmente, si tiene una fotografía que es alta y angosta, y le pide a WordPress que haga un cuadrado, recorta el cuadrado del centro. Sin embargo, con My Eyes Are Up Here, detecta inteligentemente rostros humanos. Me gusta esto. Y luego crea miniaturas adecuadas. Además, si no hay personas, tiene la opción de colocar este punto rosa en el lugar que desee y asegurarse de que esa parte de la fotografía esté siempre en la imagen. Entonces, si tiene una fotografía con montañas y una autopista, y desea recortarla para que solo vea las montañas, simplemente puede seleccionar el área de la montaña, y cuando WordPress recorte, mantendrá las montañas. Este complemento es realmente útil al hacer archivos de personal y galerías de personas, porque WordPress siempre tendrá su cara. Así que vamos a instalar esto. Allí, ahora está instalado. Ahora hay algunos otros complementos aquí que me gustaría revisar muy rápido. Hello Dolly viene con cada instalación de WordPress, y no la necesitamos. Así que vamos a deshacernos de eso. Akismet lo usaremos más adelante en el video. Se usa para evitar el correo no deseado. Jetpack también viene con una serie de herramientas, y las revisaremos más adelante. Y luego, SG Optimizer es para acelerar su sitio en Siteground. Tiene un excelente plugin de almacenamiento en caché y una serie de otras cosas que veremos más adelante. A continuación, vamos a instalar nuestro tema. El tema que vamos a usar se llama Hestia. Y viene de Themeisle. Esta es la página en Themeisle.com. Y viene en dos versiones, una versión de pago y una versión gratuita. En este video, vamos a usar la versión gratuita. Pero quería mostrarte algunas de las cosas que puede hacer. Estamos viendo a Hestia. Y esta página de inicio fue construida sin ninguna codificación. Es totalmente compatible con los creadores de páginas, pero no vamos a usar uno en este video, porque no lo vamos a necesitar. Hestia es genial sin ella. Funciona maravillosamente con el personalizador. Y es extremadamente popular. Lo vamos a obtener de WordPress.org y utilizaremos la versión gratuita. Hay más, las instalaciones de la versión gratuita. Así que iremos al tablero, luego a la apariencia y luego a los temas. Añadir nuevo tema. Y busca a Hestia. Y ahí está. Hacemos clic en instalar y activar. Y ahí estamos. Vayamos a la página de inicio y veamos cómo se ve. Aquí está el título del sitio. Y este es un título de página, y podríamos cambiarlo en el personalizador. Viene integrado con algunas cosas, como esta área de blog, y un pie de página poblado con algunas fotos. Vamos a cambiar su aspecto, agregaremos un menú y le haremos varias cosas. Pero primero, mientras estamos aquí en el área del tema, vamos a eliminar todos los temas adicionales excepto uno. Así que borremos y. Y la razón por la que estamos eliminando algunos es que, si alguna vez hay un problema de seguridad, podríamos ser susceptibles a él, aunque no estemos usando el tema. Ahora es poco probable que haya un problema de seguridad en aquellos que no se solucionaron rápidamente. Pero, por otro lado, si no los tenemos en absoluto, entonces no tenemos que preocuparnos por eso. Entonces, ¿por qué guardamos uno extra? Siempre desea un tema adicional, porque si algo le sucede a su tema principal, como si se elimina o se corrompe, su sitio recurrirá al tema secundario. Luego podrás verlo y acceder al área de administración. Así que comencemos a construir nuestra página de inicio. Lo primero que haremos es hacer clic para comenzar a usar Hestia. Y lo que esto realmente hace es llevarnos a esta página en apariencia. Y tiene información sobre cómo comenzar, pero tiene dos acciones recomendadas. Y vamos a hacer los dos. Orbit Fox Companion es un complemento que agrega algunas características de la página principal. Es gratis y podemos instalarlo aquí mismo. Y ahí estamos. El siguiente se llama Pirate Forms, y esto hace un formulario de contacto. Ahora, Pirate Forms no es tan grande y complicado como otras formas como Gravity Forms o Ninja Forms. Pero para nuestros propósitos, será un pequeño gran formulario de contacto. Dicho esto, Hestia Pro es totalmente compatible con todos los complementos de formularios más grandes. Entonces, si los necesita, ciertamente puede usarlos con Hestia. Bajo complementos útiles, vemos cosas como creadores de páginas y complementos de traducción. No vamos a utilizar ninguno de esos para nuestro diseño aquí. Entonces, lo siguiente que queremos hacer es ir a la página de inicio. Y casi todo lo que hacemos en la portada se hará a través del personalizador, que puede encontrar aquí. Haremos clic en personalizar. Y ahora, podemos pasar por el menú de aquí a la izquierda, o podemos hacer clic en todos los pequeños lápices azules para cambiar las cosas. Los lápices hacen que sea muy agradable encontrar cosas en el menú complicado. Una de las primeras cosas que haremos es cambiar el diseño del sitio. En este momento, está en caja y tiene este borde aquí a la derecha. Si vamos a la configuración de apariencia, en general, podemos desmarcar el diseño en caja. Y ahora se va a lo ancho. Vamos a seguir compartiendo íconos y queremos habilitar el desplazamiento hacia arriba. Eso pone un pequeño botón aquí, para ayudarnos a volver a la cima. Ahora, lo siguiente que queremos hacer es cambiar la identidad de nuestro sitio. En este momento, es simplemente mi blog. Vamos a cambiarlo a Coworker Pro. Y así como así, ha cambiado. Y luego, para el lema, que no vamos a ver en la página de inicio, pero que aparecerá aquí en la barra de herramientas, vamos a escribir Coworking en su mejor momento. Luego haremos clic en Publicar. Publicar es como guardar tu trabajo. Ahora, notará que no actualizó la barra de título con esto, porque el personalizador solo puede recargar la página de inicio. Así que cerrémoslo muy rápido. Y ahora puedes ver, Coworking en su mejor momento, justo allí. Y volveremos al personalizador. Ahora cambiemos nuestro fondo, y ese es este lápiz aquí mismo. Podemos cambiar la imagen. Y voy a subir uno. Todas las imágenes que estoy usando para este video provienen de unsplash.com, que es un gran lugar para obtener imágenes libres de regalías. Así que haré clic en abrir. Y voy a sacar el título, porque eso no es bueno para los lectores de pantalla. Pero voy a poner algo de texto alternativo aquí. Siempre quieres poner texto alternativo en todas tus imágenes. Luego hago clic en elegir imagen. Y ahí estamos. Ahora cambiemos este texto. Entonces la siguiente línea será: Ven a trabajar con nosotros. Allá estamos. Ahora cambiemos este botón. Haga clic aquí y nos llevará hasta aquí. Ahí, ahora dice aprender más. Nos gusta el centrado, y para la URL, lo dejaremos solo por un minuto. En realidad, haremos un enlace a un punto más abajo en la página más adelante. Pero por ahora, lo dejaremos solo. Pero no queremos que este botón sea rosa, queremos que sea azul. Así que voy a retroceder fuera de aquí, y vamos a ir a colores y cambiar nuestro color de acento a este azul. Puedes elegir el color que quieras. Acabo de elegir este porque me gusta. Y luego haremos clic en publicar. Y cerraremos esto. Y ahora nuestra parte superior está casi lista. Nuestras fuentes son demasiado atrevidas aquí. Vamos a arreglar eso. Volveremos al personalizador. Así que ahora, vamos a la configuración de apariencia, la tipografía, y luego voy a elegir el tamaño de fuente. Y aquí están las secciones de la página principal, y aquí está la sección del título grande. Solo lo haremos un poco más pequeño. Menos tres, publiquemos. Cierra esto. Ahí, ahora todo está en una línea, como queremos. Ahora, antes de crear un menú, vamos a trabajar en la construcción del resto de estas secciones. Ahora que hemos terminado nuestra sección superior, pasemos a la segunda sección. Ahora estamos construyendo un sitio para un lugar de coworking, por lo que queremos convencer a las personas de que deberían venir a trabajar aquí. Así que cambiemos estos elementos a las cosas que queremos que digan. Haremos clic en personalizar y luego haremos clic en este lápiz junto al encabezado. Y aquí podemos poner un montón de texto. Opcionalmente, cualquiera de estas secciones se puede deshabilitar. Podríamos deshacernos de todo juntos, y lo haremos más tarde con un par de ellos. Así que cambiemos este título. Allí. Y luego cambiaremos el texto debajo de él también. La vida independiente tiene muchas ventajas, y trabajar desde casa en pijama es una de ellas. Entonces, ¿por qué deberías venir a trabajar con nosotros? Luego tenemos tres secciones aquí, y aquí están las tres áreas de administración para esas secciones. Así que abramos el primero, y los iconos están controlados por una fuente. Ahora, una de las razones por las que te gustaría trabajar en una oficina de coworking es la gente. Así que hagamos clic aquí y encontremos un pueblo. Cualquiera de estos funcionaría. Vamos a elegir este. Y lo dejaremos con ese color rojo, pero cambiaremos esto para que sea gente. Y cambiaremos este texto para decir que las personas que trabajan aquí son inteligentes, serviciales y atentas. Nos ayudamos mutuamente a resolver problemas y tratar con clientes gruñones. Y podríamos hacer este enlace en algún lugar, pero no lo haremos, lo dejaremos solo. Así que cerraremos ese, y abriremos el siguiente. Otra razón por la que desea trabajar en una oficina de coworking es el equipo. No quieres una máquina de fax en casa, ¿quién lo quiere? Pero algún día vas a necesitar uno. Así que cambiemos esto a una caja de herramientas. Se llama maletín, pero parece una caja de herramientas. Y eso es lo suficientemente bueno para mí. Lo dejaremos en azul y escribiremos el equipo aquí mismo. Y pondremos un texto nuevo. Tenemos una máquina de fax y una bonita impresora láser, y una sala de conferencias con un teléfono de conferencia. Cosas que probablemente no tengas ni quieras en casa. Y nuevamente, dejaremos este sin un enlace. Y la tercera característica seguirá siendo el soporte. Excepto que no es soporte técnico. No estamos hablando de soporte técnico, sino de apoyo emocional. La gente necesita personas a su alrededor para mantenerse cuerdo. Todos estamos cuerdos. La mayor parte del tiempo Ahora me gustaría señalar aquí que hay un botón de campo de eliminación aquí en cada uno de estos, para que pueda hacer dos, o solo uno si lo desea. Y también hay una nueva función para agregar, por lo que puede agregar un cuarto, un quinto, un sexto, etc. Ahora, haga clic en publicar. Y cerraremos esto. Y ahí lo tenemos, por qué deberías venir a trabajar con nosotros. Pequeños efectos en cada uno de los iconos, y el texto se ve hermoso. Ahora, antes de comenzar la siguiente sección de la página, me gustaría configurar la fuente predeterminada para todo el sitio. Y es bastante simple. Vamos a personalizar, configuración de apariencia, tipografía. Y voy a elegir cabaña. Y voy a elegir lo mismo aquí. Y ahora, todo está usando la cabina. La diferencia es sutil, pero está ahí. Ahora, la siguiente sección en la que vamos a trabajar es la sección acerca de, y es esta pequeña astilla aquí. Ahora esta sección realmente extrae su contenido de la página de inicio, la página en WordPress llamada inicio. Entonces vamos a ir al tablero y abrir esa página. Y en este momento, está en blanco. Ahora, como notaron, el título de la página no se está utilizando en ningún lugar aquí, por lo que realmente no importa cuál sea. Así que vamos a poner algo de texto aquí. Y ahora, quiero que sea un tamaño de encabezado uno y centrarlo. Luego pongamos algo de texto debajo. Queremos un mensaje de texto que haga que las personas sientan que quieren ser parte de nuestra comunidad. Así que vamos a poner este texto. Todos los viernes hacemos un almuerzo grupal y varias personas participan en la cocina de nuestra cocina. Comemos juntos como un grupo muy unido de amigos que se fortalecen y se ayudan a crecer. Ahora, hagamos esto un poco más grande. Y centrarlo. Ahora notará que nuestros tamaños de fuente están en puntos en lugar de píxeles. En realidad queremos píxeles. Así que iremos a la configuración y abriremos la configuración avanzada de TinyMCE en una nueva pestaña. Y luego, aquí, vamos a hacer clic en los tamaños de fuente, y vamos a usar px. Entonces ahora hacemos clic en guardar cambios. Y voy a actualizar esto, lo que actualizará la página. Y ahora, podemos resaltar todo este texto y elegir px. Y eso es exactamente lo que queremos allí. Así que ahora hagamos clic en actualizar y veremos la página. Eso es bastante hábil, pero queremos un poco más de texto debajo de esto. Volvamos a nuestro editor, y quiero bastante espacio, así que voy a hacer esto y pegarlo aquí. Y ahora, vamos a hacer esto también px. Y también centrado, y no vamos a hacer de este un enlace todavía, porque la página a la que va no existe. Pero aún queremos un poco más de relleno debajo. Así que ahora hago clic en actualizar. Y ahi vamos. Pero quiero que sea un poco más grande. Así que simplemente hagamos de esto un H. Bueno, vamos a dar formato claro y comenzar de nuevo. Entonces, ahora es un H tres, y vamos a centrarlo nuevamente. Y hago clic en actualizar. Así que ahora, volvamos a cargar. Aquí vamos. Y más tarde, una vez que creamos algunas subpáginas más, volveremos y haremos de este un enlace a la página acerca de. Así que esta es nuestra sección acerca de. Cada comunidad y sitio de coworking quiere mostrar algunos de sus miembros. Puede ayudar a las personas a sentirse bienvenidas. Así que vamos a cambiar esta página de personal en una página de miembros. Y lo haremos haciendo clic en personalizar, luego volveremos a esa sección y haremos clic para conocer a nuestro equipo. Y ahora, estamos editando esta sección. Cambiemos para conocer a algunos de nosotros. Y luego pondremos un subtítulo diferente. Nuestros miembros son un grupo diverso de desarrolladores, diseñadores, gerentes de proyectos y muchos otros oficios. Nuestra lista de miembros es aproximadamente% mujeres, y tenemos una amplia gama de etnias representadas. Así que tenemos cuatro valores predeterminados aquí, y aquí mismo puedes ver las cuatro secciones. Y hay un enlace para agregar un nuevo miembro del equipo. Así que abramos el primero. Cambiemos el nombre a Tina. Y el subtítulo será diseñador slash artist, y también cambiaremos su imagen. Y eliminamos el título, y siempre ponemos texto alternativo en cualquier imagen que cargue. ¿Y recuerdas que instalamos My Eyes Are Up Here? Hay dos vistas previas diferentes que hizo. Ahora, en este caso particular, su rostro ya estaba en el centro, por lo que realmente no importaba. Pero importará en otras imágenes que carguemos. No necesitamos elegir una alineación o tamaño ni nada, porque el tema lo elige para nosotros. Entonces haremos clic en Insertar en la publicación, y ahí está Tina. Pongamos una mejor descripción para Tina. Ahora notarás que este es un área de texto, por lo que puedes tomar esta pequeña cosa aquí y deslizarla hacia abajo si es necesario. Tina pasa sus días creando obras de arte digitales. Su arte ha sido exhibido en el Carnegie Hall y el Museo de Arte de Londres. Me gustaría señalar que todos los que voy a poner aquí están hechos. Y reiteramos nuevamente que todas mis imágenes provienen de Unsplash. Ahora podríamos hacer un enlace si Tina tenía su propia página, pero no la tiene, por lo que dejaremos el enlace vacío. Y luego, vamos a elegir sus redes sociales. Podemos elegir entre un icono y luego poner una URL. Y voy a dejarlos como predeterminados, porque Tina realmente no tiene redes sociales, porque yo la inventé. Pero si desea deshacerse de uno, puede hacer clic en el icono Eliminar, y ahora LinkedIn se ha ido de Tina. Si desea agregar algo más, puede hacer clic en Agregar icono y buscar alguna otra red social. Así que esa es Tina. Te mostraré uno más. Y luego, a través de la magia de la edición, haz los otros dos por ti, porque se harán exactamente lo mismo. Nuestras próximas personas serán en realidad una compañía de tres hermanas. Y aquí nuevamente, podemos elegir lo que queremos que sea el foco de la imagen. Haremos clic en Insertar en la publicación, y están nuestras tres hermanas. Son una empresa de marketing. Y ahora dice que Juanita, Juliette y Jacqueline son tres hermanas que comenzaron su propia empresa de marketing. Trabajan principalmente con jóvenes artistas y músicos del centro de la ciudad. Ahora notarás que todas estas otras imágenes son cuadradas, pero esta no, es un poco más corta. Esta bien. Sin embargo, todos tienen el mismo ancho, y nuestro tema lo restringirá. Todos deben ser del mismo ancho, pero podrían ser un poco más altos o más bajos. Así que ahora voy a hacer los próximos dos. Ahora tengo una sección que muestra algunos de los miembros de nuestra comunidad. Como puede ver, es fácil agregar más y cada uno es bastante flexible. Así que ahora, haga clic en publicar, cierre el personalizador y asegúrese de que se vea bien a todo lo ancho. Seguro que sí. Ahora que hemos terminado con esta sección, podemos pasar a la siguiente. Cada vez que vendes un producto, la gente querrá ver testimonios. Quieren saber de las personas que han realizado la compra y ver qué piensan. Así que nuestra próxima sección será una sección de testimonios. Y el valor predeterminado se llama, lo que dicen los clientes, pero vamos a cambiar el nuestro. Vamos a comenzar haciendo clic en personalizar y nos desplazaremos hacia abajo. Y haremos clic aquí, lo que dicen los clientes. Similar a todas las otras secciones, puede deshabilitar. Y por defecto, hay tres testimonios, pero podría agregar más. Así que cambiemos lo nuestro de lo que dicen los clientes a lo que dicen los miembros. Y luego, para nuestro subtítulo de sección, rara vez necesitamos comercializar, ya que nuestros miembros tienden a decirles a todos que saben qué gran lugar es este para trabajar. Así que ahora, obtengamos nuestros propios testimonios. Yendo a cambiar de imagen. Y notará que automáticamente lo pone en un círculo para nosotros. Nuestra imagen original era un cuadrado. Elegí mantener el primer nombre, e incluso el subtítulo, ya que encaja. Pero pondremos nuestro propio texto. Me encanta que me respeten las personas que me rodean. Ser mujer en los negocios a menudo significa tratar con personas que no creen que deba estar aquí. Pero en Coworker Pro encajo. Y, de nuevo, podría haber un enlace, pero no estamos enlazando en ningún lado, por lo que podemos dejarlo en blanco. Hagamos a nuestra próxima persona. Ahí, ahora hemos elegido a Hanson. Y pondremos su nombre. E inserte en la publicación. Y de nuevo, vamos a usar solo nombres de pila, y en lugar de que sea un artista independiente, lo llamaremos ingeniero de dibujo. Y luego pondremos nuestro propio texto. La atmósfera de juventud y emoción en este espacio es intoxicante. Estas personas están cambiando el mundo, y yo puedo estar allí para ver que suceda. Y luego cambiaremos el tercero. Vamos a cambiar la imagen. Navega aquí Vamos a poner en nuestro texto alternativo. E inserte en la publicación. Dejaremos a Natalya como profesional independiente. Elimina el apellido y pon nuestro propio texto. Los almuerzos de los viernes con el grupo son los mejores. Me encanta la cocina grupal y el sentimiento de familia que proviene de todos alrededor de la mesa. Y eso es todo, ahora tenemos nuestra área de testimonios. Publicaremos, cerraremos el personalizador. Y luego desplácese hacia abajo para ver cómo se ve en la pantalla panorámica. Y se ve genial. Hay una sección más que debemos hacer, y ese es el pie de página. Pero primero, voy a señalar que debido a que no queremos un blog en esta página, podemos ir al personalizador, y vamos hasta el área del blog, y haremos clic en el pequeño ojo aquí. Y ahora se ha ido. Y ahora tenemos este pie de página que está preparado principalmente para nosotros. Pero publiquemos. Y cierre esto, y vea cómo se ve. Va directamente de los testimonios al pie de página. La edición del pie de página en Hestia es ligeramente diferente de las otras secciones. Todavía usa el personalizador, pero tiene algunos gadgets diferentes. Vamos a ver. Al hacer clic en personalizar, luego iremos hasta el final. Y solo hay un enlace de edición en este pie de página completo. Así que hagamos clic. Aquí, puede cambiar la imagen de fondo al igual que todas las otras imágenes que hemos cambiado. Voy a dejar este porque me gusta el paisaje urbano, pero puedes poner cualquier cosa en el fondo que desees. Ahí está el título, póngase en contacto, lo dejaremos, porque eso encaja. Pero luego el subtítulo, vamos a poner que la recepción se atiende de: a.m. a: p.m. Hora estándar del Este. Luego tenemos aquí un título de formulario, y eso es justo aquí. But to determine what form goes right here, we click this little tab right here. And it’s simply a short code. Which means you could put in any short code, and it could render any number of things there. It could render another form or a bunch of information. You may recall near the beginning of this video that we installed the Pirate Forms plugin to go with Hestia. That’s because it’s using it right here. And as you can see, it is a perfectly functional small simple form. So we’re going to leave it. But now, we want to edit this content. So we’re going to click right here, edit. And it pops up here. I’m going to put in a different address, because I’m not in Romania. And I’m going to put in different contact information. But I like give us a ring and find us at the office, those fit nicely. And then, when we’re done, we click edit again, and it goes away, and you can see our new information here. And that’s it for the footer, just like that. Just a little bit of text touch-up, and we left the form alone, and we’re all set. So let’s publish. And close the customizer, and see how it looks. Just great. Now that we have the footer done, let’s look at adding a menu right up here. And most of the menu right now is going to link to various parts of the homepage. In a few minutes, we’ll add some actual pages, and we’ll add those to the nav then. But for now, we’re merely going to make a nav that lets us move around the homepage. Now, the first thing we want to do is get a list of the links that we’re going to use in our nav. And I’ll show you how we’re going to do it. Scroll to the second section. Why you should come work with us. Now this is the only part of the whole video that even looks at code. In your browser, we’re going to right click, right here in this white space, and go to inspect. And the first thing it comes up to is a section. And these sections right here, there’s a list of them, are the things we’re looking for. They’re just under the main div. Now, each section has an ID. This one that we clicked on is features. Next is about. Then there’s team, then there’s testimonials, and lastly, there’s contact. If this all sounds familiar, it’s because it’s the sections of the homepage. So you want to write down on a piece of paper, or a text file on your computer, the names of these IDs. Go ahead and hit pause and write them down. Once you’ve gotten them written down, let’s go back to our browser. Now we’re going to use the customizer. So we click customize. And one of our options right here is menus. Right now, there are only two menus. There’s a default top bar, currently set to very top bar menu, which actually isn’t being used on our theme right now. It has a phone number and an email address that we could use if we wanted. But we’re not going to. And there’s also a socials top menu, and so you could put social networks in the top bar. And we’re not going to do that right now either. We’re going to create a new menu, and we’re going to call it primary menu. And we’re going to click the primary menu checkbox. And that’s what’s going to make it appear right here. So let’s click next. And now we can add items. Now, rather than use the suggested pages and links that we have here, we’re going to create custom links. And we’re going to link to the various sections of our page. Now the first one was called features. And we’re going to use the ID that we pulled out of the code. We’re going to start with a slash, which means, on the homepage, then we’re going to put in a hashtag, which means, go to an ID. And we’re going to type features. And then we’ll click add to menu. So let’s look at just that one for right now. Click publish, and we’ll leave the customizer. So now we have features, and if we click it, it beautifully scrolls right down to the features section. So now, all we need to do is the same thing for all the other sections. So let’s go back to the customizer again. We’ll go back to the menus. We’ll edit our primary menu. And add items. All of these are going to be custom. Now the next ID we have is about. However, we really called that section community. So the link text is going to be community. Add to menu. The next one had an ID of team, but again, we’re going to deviate just a little bit and call it members in the menu. Then we’ll add to menu. The next one is testimonials. And we’ll leave that one called testimonials. And lastly, we’re going to have contact. So now, let’s click publish. And there’s our nav. We can even click while in the customizer, and have it jump around. Now one more thing we want to add to the nav is a little search option off here to the right. So we’re going to actually leave the primary menu, and go to header options. And under navigation, we can enable search in menu. And now, we have a little glass here. So now, we’ll click publish. And close the customizer. And here we have a beautiful nav that lets us jump around the homepage. Now, we’re also going to create some subpages that are actually different pages from the homepage, and we’ll come back to the nav and add those to it when we do that. Now that we are nearly finished with the homepage, let’s build the news page. Before we get started, I want to remind you of a couple things. We’ll go to settings, reading, and I’ll point out that our posts page is actually a news page. So let’s go to pages, and edit the news page. And you’ll note that we can’t put any text in here, because it’s supposed to be an archive. But let’s view it. The posts will go here, and we have this horrible pink bar at the top. We are using the page’s title, and fortunately, we can also use the featured image. So let’s upload a nice featured image. There’s our alt text, and we set the featured image, and update. And now, we’ll go look at it. And there we are. Now as long as we’re here, let’s add it to the menu. We’ll go to customize, menus, primary menu. Add items. And we’ll add our news page, except we want it here at the top. Then we hit publish, and close the customizer, and now we have a news item. And it goes to this page. So let’s create our first post. We’ll click add new, and there is nothing unique about posts in Hestia. This is % stock WordPress. So if you’re familiar with WordPress, you know how this works. Let’s go ahead and make one. Our coworking space has a new refrigerator. The old one saw its last ham sandwich last Friday. And we’ll put an image at the top of the post. And put in our alt text. And that’s too small, so we’ll click the pencil, and we’ll go to large. And we’ll center it. And click update. And there we are. I’m also going to set it as the featured image, and you’ll see why in a moment. So I don’t need to upload it again, it’s already there. We’ll add a new category called kitchen. Publish. And now, when we reload our news archive, there we are. Now this image is the featured image. If we hadn’t set one, then this text would slide all the way to the left, which is usually fine, but it looks really sharp with a featured image. If we click, it also puts the featured image in the bar at the top, so that’s something to remember. Now, you’ll note that it says uncategorized, and we made one for kitchen, so let’s go back. And there we are, we have proper category right there. Now, before we get too much farther, I want to fix the nav in the footer. I want it to replicate what’s in the header, so I’m going to go to customize, and go to menus, and click on primary. And you’ll note that it’s already set to primary, but if I also set it to footer, you can see that it’s now down there at the bottom. So now, I’ll publish and close this, and there, now we have the same nav at the top and the bottom. I’d like to show you one more option with the blog page. And then we’re going to create an about page. Right here on the homepage, we’re going to click customize. And then we’re going to go to front page sections. The sections that are bolded are the sections that we have built. The ones that are grayed out are sections that could exist, but don’t, because we never turned them on. The ribbon simply gives you a background image, and a place to put in some text and a button. The clients bar allows you to post icons of your clients. Subscribe allows you to put in a subscribe form, and then blog is where I was headed here, allows you to put in a blog section. So I’m going to unclick disable section, and we’ll scroll down. And while you were away, I added a second blog post. So we have one here for the kitchen, and a new member. And we can make this say news. And there we are, now we have a news section on our homepage. And if we decide we don’t want that, we click the little I, which checks this, and I’m going to click publish. And now we’re back to where we were, but now you’ve seen how easy it is to add a news section to the homepage. But now, let’s create an about page. Again, there’s very little custom about pages in Hestia. So if you’ve ever built a page, you know how it works. Here’s our about text. We’ll create a featured image, and I’m going to use the same image as the homepage header, for some continuity. And now, let’s view that page. And there it is. And now, let’s put it in the menu. We’ll go to customize. Menus, primary menu. Add items, and we’ll add this about page. We want about way up here at the top. So then we’ll publish, and then close the customizer bar. And there we have about. So let’s test these items. We’ll go first to contact. Which takes us to the homepage, and the footer. Then there’s testimonials, members, community, features, news, and about. And if we want the top of the homepage, we simply click the logo, and there we are. Now, our site is essentially finished. The next things we’re going to do all relate to maintenance items, like setting up stats, SEO things, etc. But our site is built and our content is done. So let’s get started on our maintenance. The first maintenance thing we’re going to look at relates to caching, which helps your site go faster. Caching typically means keeping a copy of your page stored on the server, so that it can serve it faster without having to build it all from the database. Normally, I prefer a plugin called WP Rocket. It’s really excellent. However, many hosts, including Siteground where we’re hosting, cache for you, and you don’t need a plugin at all, and I’d like to go over that with you. If we go to dashboard, then at the bottom, there’s SG Optimizer. And there are several things here that we can do. Let’s configure the SuperCacher Config. Right now, Dynamic Cache is on, and that means when it builds a page and sends it out, it keeps a copy, so that the next person doesn’t have to build the page. The cache is also automatically flushed at the right times, so that if you make a change to a page, it doesn’t keep serving the old one. And you have a button here to manually purge it if you want to. You can choose to exclude some URLs from dynamic caching. But then there’s a section here called Memcached settings, and this stores in the server’s memory some of the frequently executed queries to the database. So we’re going to turn this on, and you’ll note that it says, you must enable Memcached from your cPanel. So let’s go to cPanel. We’ll go to Siteground.com and click login. Then we go to my accounts. Go to cPanel. And then over here in the search bar, we’re going to hit cache. And then click SuperCacher. And right here is level three, Memcached. And we’re going to turn it on, by clicking right here. And now, we’ll simply reload this page rather than click the button again, and now we’ll click the button. And now it’s enabled for our site. There’s a button here to test caching for the site, if we click test URL, it says it’s cached. So now we have two different layers of caching enabled, and it should make the site go much, much faster. But in addition to caching, there’s HTTPS Config. And this is already set properly, and you probably should never touch it. This requires that your site operate on HTTPS. Without this, it could operate on either HTTP or HTTPS. But we never want it on HTTP only. So we’re going to leave this just the way it is. Lastly, there’s PHP Config. We want to be running on at least PHP seven. Right now, we’re at ., and we’re going to leave it there, because that’s better than PHP seven. PHP seven is worlds faster than PHP five. And PHP five is pretty common on a lot of servers. So if your server’s on five, ask your host about moving to seven. Or, if you’re here on Siteground, you can switch. So now we’ve gone through the sections of the Siteground optimizer, and the only thing we changed was, we turned on Memcached. Next, let’s talk about getting the site connected to the search engines. First, we’re going to connect the site to various Google properties. Within WordPress, we’re going to use plugins to do that, but before we can use the plugins, we actually have to create the accounts in Google. If you already have an account in Google, you can use it. I’m going to start from scratch. You can use a single Google account across all of Google’s properties. So it doesn’t matter which one you start with. We’re going to start here with Google Analytics. So I click sign in, and then analytics, and we’re going to create an account. And here you can use either an existing email address, or create a Gmail account. I’m going to create a Gmail account. Then we’ll put in our password, and click next. I would recommend putting in your phone number and recovery email address, but you don’t have to. You do need to tell them when you were born. Then there’s their privacy and terms, and click I agree, and now we have a Google account, and now we can sign up for Google Analytics. We’re doing a website, not a mobile app. We’re going to create an account name and a website name, and then we have to tell it where our site is. Choose an industry category, and time zone. And then we have some data sharing options. You’ll want to read these over and decide for yourself if you wanna share this data with Google. I’m going to say okay, and I’m going to click to get tracking ID. But before we can do that, we have to agree again to the terms and services, and click I accept. Now this is our tracking ID. And in the bad old days, you would have to copy either this or all of this code, and figure out how to wedge it into your website somehow. But we’re going to use a cool plugin in just a few minutes. But before we get there, I’m also going to connect with Google Search Console. It used to be called Google Webmaster Tools, but now they call it Search Console. Now, because we’re already logged in with Analytics, we can simply click search console. And they want our password again. And they really want us to give them a recovery phone number and email, which I recommend you do, but I’m not going to bother, because I’m not going to be using this domain very long. And then we tell them where our website is. And click add a property. Now, in order to verify to the Search Console that we own this property, we need to do any number of several things. The recommended method is uploading an HTML file. Among the alternate methods is Google Analytics, and we’re going to use that in just a few minutes, once we connect our Analytics account. So as of right now, we have created a Gmail account and connected it with Google Analytics and Search Console. Now we need to connect those two things to our website. So let’s get going on that. The first plugin we’re going to connect is called MonsterInsights. We’ll go to our dashboard, plugins, add new. And there it is, Google Analytics for WordPress by MonsterInsights. We’ll install and activate. And right at the top, it says that we should configure the settings. The first thing we’re going to do is authenticate with our Google account. If you ever connected your Twitter account to any other site or anything like that, this is very similar. We choose our account. We tell it what it’s allowed to do. And then we pick the profile that we have under that username. Right now, there’s only the one, so we’re going to choose all website data. And if at any time, you don’t want to do this, you can click cancel, but we’re going to complete authentication. And now, our profile is active, with this UA code. You can click verify credentials, and it will say that it is done. And now our site is set up with Google Analytics, just like that. There are some other things that can be done. You can pay for a version of MonsterInsights Pro, and get some added features. If you wish, you can allow them to do usage tracking. And you can optionally have it do automatic updates. Now, if we go over to tracking, we have some options. For example, if an administrator or editor is logged in, then they are not tracked. That way, you don’t artificially boost your own traffic. You can enable demographics, and you can do things with link attribution and file downloads, etc. I’m not going to change any of the defaults, they’re great. The defaults are perfect in MonsterInsights. Now that we’ve connected our site to Google Analytics with MonsterInsights, we’re going to connect it to Search Console with Yoast SEO. So let’s go to plugins and add new. And search. And there it is, we’ll click install now, and activate. Now the first thing you’ll note is that there are some notifications at the top. The first thing it says is that we’re blocking Google, which is true, and is fine for now, we want to do that. But right here, the next thing they want us to do is connect with Google Search Console, so let’s click that. To allow Yoast SEO to fetch your Google Search Console information, please enter your Google authorization code. Click this button. Choose the account that we are working with. And then, we’re going to allow Yoast. And it gives us this big long code. Then we can close this window, and paste it here. And authenticate. And now, we have authenticated, and we don’t need to do any of these methods. Now that our site is connected to Google Search Console, Google can know much, much more about our website, and all of the tools built into Yoast will work even better. So we’ll take a look at those tools next. The next plugin we’re gonna look at here is called Jetpack. Now Jetpack was installed for us by Siteground. But it’s just a regular plugin. If you go to installed plugins, you’ll see it right here, and if you don’t have it, you can simply install it like a regular plugin. Now Jetpack is a little but different from most plugins. It’s actually a collection of plugins. And what makes it unique is that most of the things that Jetpack does is heavy lifting, heavy work, and it does it out on the WordPress.com servers, so that it doesn’t weigh down your server. It can do things like website statistics, image compression, spam fighting, comments filtering, etc. The first thing we need to do is connect Jetpack to a WordPress.com account. Now you might think that creating a WordPress.com account means getting a blog there, but it doesn’t have to. You can simply have an account there to use with Jetpack. So let’s click set up Jetpack. And here, we can either log into an existing .com account, or create a new one. We’re going to create a new one right now, and we’re going to click sign up here in the top right. We’ll put in our email address, choose a username, and then a password, and then we’ll create our account. And then it immediately begins connecting our website with Jetpack. Now by default, Jetpack is free. But there are upgrades available. Down at the bottom here is a button that says start with free. And there we are, now we’re connected. By default, nothing is turned on. But they recommend that all of these things be turned on. Many of them are good, and I like them. But I recommend reading through them, and making sure that you want what’s there. For example, we don’t need a contact form. We have Pirate Forms from Themeisle. So I’m not going to click activate recommended features. I am going to go to site stats, and it’s automatically set up. We could click configure, and set up some settings. We can have a chart showing hours of views in the admin bar. We can decide who gets counted, even if they’re logged in. One of the ways it works is by putting this little tiny image on the page. It’s not required, but it’s helpful, so I tend to leave it there. And then, here we get to decide who’s allowed to view stats. Right now, it’s only the administrator. Because we just set this up, there’s nothing to display yet. But it says your stats will begin to appear here within minutes, and that’s one of the reasons that I like including Jetpack stats in addition to Google Analytics. With Google Analytics, you get to either watch real-time stats, or you wait until tomorrow to find out what today’s stats are. You can’t look hour by hour today, and see how you’re doing as the day goes on. With Jetpack stats, you can do that. You can look every minutes, and see how your stats are growing. This can be useful when you’re doing a large push on your website. Another great thing that Jetpack can do is filter spam, and it does it using the companion plugin called Akismet. If we go to plugins, you’ll see that it’s right here. Akismet comes with WordPress. Now Akismet is also a service. It processes the spam on an outside server, so that it doesn’t bog your server down. So let’s activate Akismet. And then, right at the top here, we can set up our account. Now because we’re connected with Jetpack, we can simply click connect. Otherwise, we could sign up with a different email address, or get an API key. So I’m just going to connect with Jetpack. Now Akismet has a variety of pricing models. There’s enterprise, for larger sites. There’s $ per month per site for smaller commercial sites. And then, there’s name your price. And what’s interesting is that you can name a price of zero, if you wish. So let’s click get personal. And then right up here is the slider. If we drag this down to zero, the credit card information goes away. Now it says, you may not do this if you have advertising, you sell products, or you publish information about your business or service. Now something very important to note here is that this only works if you do not have advertising, you do not sell products, and you don’t publish information about your business or service. Our site is advertising a commercial space, that’s what it is. So we’re not going to do the free one. But we can choose $ a year, which is $ a month, which is not very much. If you find that it’s blocking lots and lots of spam for you, I would recommend paying more for the service. They’re nice enough to allow you to choose, and they’re providing you great service. So give them what you can. Now because our site is not a real site for a real service, I’m going to choose the free one. But if you’re building a site for a real business, you’ll need to pay for Akismet. Now that it’s processed, we can activate this site. In the background here, you can see the API key that was an option earlier, and it put it into our site for us. Now optionally, it can also show the number of approved comments beside each comment author. So not only does it block spam, it approves quality posts. By default, Akismet takes your spam and puts it in the spam folder. Right now, our setting is that the most egregious spam gets automatically deleted, and does not go into the spam folder. If you really need to see all of it, then you can click this option right here. And now that Akismet is set up, we shouldn’t get any spam at all on our website. If we do, then we have the option to mark it as such, and it will communicate to Akismet, hey, you missed this one, and Akismet learns. That’s how it gets so good. Next, let’s look at backups. For backups, we’re going to use the backup system built into Jetpack. And it used to be called VaultPress, but now it’s just called Jetpack backups. But you may still see VaultPress around. Let’s go to the Jetpack dashboard. And here at the top, there’s a tab that’s called plans. Now the backups for Jetpack are not free. However, their personal plan, the cheapest one, does include full off-site backups. Now these are nightly backups, you get one a day. If you go to the more expensive plans, then you can get real-time backups, where you just push a button and it does a backup right there when you ask. We’re going to do the personal one, and it comes with priority email support, which is pretty useful. So let’s click upgrade to personal. Now this took us to our account on WordPress.com. You may recall, we had to create this account in order to connect Jetpack to our site. So this is the same site. Now I’m going to fill out this form, and click pay. Now that we’ve clicked purchase, it’s setting up a number of things for us. It set up the daily offset backups, with a -day backup archive. That means you can recover your site up to days back, but not , so if you miss something for days, too bad. Unlimited backup storage space, that’s really important. If you are a musician or a photographer and you have a ridiculous amount of data, unlimited storage space is a big deal. Automated restores, which means you don’t have to do anything really, if you just want to restore, you click a button and it does its thing. You don’t have to download zip files and mess around with things. It comes with spam protection, easy site migration, if you’re going to move somewhere, and priority support. So now let’s go back to our site. Now we’ll still here in our dashboard, and we’re still looking at the plans. But now, there’s an option to manage your plan. Remember how I said Jetpack backups were called VaultPress? With here we are, we have a VaultPress menu item. If we click it, you’ll see that VaultPress is backing up my data right now. It’s done with uploads, and it’s going to work on the rest next. Something important to note. The first backup backs up everything, but in the future, it only backs up changes. So the first one is probably going to be quite slow. But from then on, they should be very speedy. The next thing important to know is that you can close this window. It’s not dependent on your browser being open. It’ll do its thing. And they’re going to email us when it’s done. Another cool thing is we can set up remote access, so that you don’t have to be at your computer to restore your site. Right now, we have a license for one site. It says we’ve never backed up, ’cause it’s still in process. If we upgrade our plan, then they will do a security scan on the backup, and let us know if it finds anything wrong. Let’s go to settings. And there’s a wide variety of things that you can do here. We’re not going to cover them all, because it could get really deep. But you can set up SSH access, so that VaultPress can access your site’s server. Now Siteground does offer SSH, but not all sites do. If not, you could set up SFTP, or regular FTP. Or you could say, “I want to restore my site to some other server.” This is really handy when actually moving servers. If we were to leave Siteground and go to some other host, we could say to VaultPress, hey, go install my site over there, and it could do that. It also knows who we are, what account this is. If we go to activity, it tells us that it’s done a full sync of uploads. We’ll look at our backups, and there probably isn’t any yet. You can still see this icon spinning. Now we need to set up access for VaultPress to access our server better, and that takes us right back to here. Now to allow VaultPress to access our website, we’re going to enable SSH. That stands for secure shell, and it’s a secure way for VaultPress to log in to our site and work on it. So we’re going to click right here, and then we need to fill in our server information. Now some of this we’re going to get from Siteground, because that’s where our site is hosted. So let’s go to Siteground, and log in. Now, setting up SSH isn’t very difficult, but there are a number of steps. So if you follow closely, it should work just great. I’m going to click on my accounts, and go to cPanel. Now in this search right here, we’re going to type SSH. And there’s one icon left. Click that. Now what we want to do is upload a public key. If we go back to VaultPress, and click show public key, it’s right here. We just copy everything in the black here, and on Siteground, paste it here. We don’t put anything in the allowed IP address field. Then click upload. And now our key has been successfully added to our account. If we go back, you can see it right here. So now, we need to go back to our cPanel home. Now to find our username and password, we’re going to go back to my accounts. Which actually leaves cPanel, and we’re going to click right here, information and settings. Now, VaultPress wants a server address, port number, and a username and password. For the server address, we’re going to use our FTP server. Our port number is . This is not standard for SSH, it’s custom to Siteground. And you can find that information in the Siteground documentation. Our username is our cPanel username. Because we’re using a public key, we shouldn’t need a password. So let’s click save. And now it works. I’d like to reiterate that because we used our public key, we don’t need to put our password in. That’s the way keys work. So now, VaultPress can connect directly to our server, and work with the files that it finds there. So just a quick review of what we did here at VaultPress. We went to settings, and we set up SSH, so that it can log in. The other things are interesting, but not vital. We can look at our backups, we can look at our activity. And you can see what it did and when it did it. But let’s go back to our website. Then we’ll go into the admin area, and we’ll go to Jetpack, VaultPress, and on this page, you can see an ongoing progress of how it’s doing. Now that we have finished backups, our site is complete. Everything is done. Let’s do a quick summary of what we’ve built. The first thing we did is set up an account on Siteground. Then they walked us through a wizard which set up our hosting, installed WordPress, set up SSL for secure browsing, and helped us buy a domain name. At that point, we had a plain WordPress site, with default theme and original content. The next thing we did is install some plugins that we knew we were going to need. We installed TinyMCE, so that we had a few extra buttons here, and then we also installed My Eyes Are Up Here, so that we could install images of people and make sure their faces were in the pictures. The next thing we did is pick our theme, and we chose Hestia from Themeisle. It proved to be pretty flexible, and I’m very happy with it. Then we built our homepage, and we went through section by section and used the customizer to create each of these elements. We didn’t have to do any coding to build this entire site. We also made a couple of regular pages with normal content on them. Once we were done building the site, we added on some extra tools. We went through the Siteground Optimizer. Most quality WordPress hosts these days have something similar, so if you host somewhere else, make sure you look for a tool similar to this. We connected to the Google Search Console, as well as Google Analytics. And then we also hooked up Yoast SEO, so that we would have good search engine optimization. Then lastly, we configured Jetpack. Siteground installed it for us. If your host does not, you can install it like a regular plugin. But Jetpack gave us Akismet for spam, its own built-in stats program, and lastly, VaultPress for backups. So now we have a complete site, it’s fully functional, and has a robust back end to keep it working smoothly. I hope you enjoyed building your site as much as I enjoyed building this one. Remember to check out the links in the description for discounts, as well as locations for each of the pieces of software we used. And if you’re interested in learning more about WordPress, and further improving and progressing your site, come take a look through some of the other content we offer over on WinningWP.com.

Ver más videos …

Cualquier cosa para agregar?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me