¿Quieres construir tu propia página web de manera sencilla🤗, rápida🏎, GRATIS🤑 y a TU MANERA✨? Sí, sí, además de facil y gratuito lo puedes hacer como a ti te de la gana. No te pierdas pues este tutorial sobre cómo montar tu propia página web con WordPress:⏬⏬

En este tutorial te enseñaremos a crear tu propia web de forma muy muy fácil con WordPress, además que aprenderás a personalizarla a tu manera. Es simple, es facil, es rápido, y como la mayoría de cosillas que enseñamos en LLobregat Digital: ¡¡Es GRATIS!!🤑

1. Acceder al administrador

Bueno, lo primero obviamente es acceder al administrador de WordPress, ya que, el hecho de que estés visualizando la página no significa que puedas editarla, no. Tan solo la estás previsualizando, como lo haría un usuario. Así que, desde la Home de tu sitio, en la barra de URL añade ⏩/wp-admin⏪. Entonces te pedirá el usuario y la contraseña. Por lo que más quieras RECUERDA siempre tener estas credenciales apuntadas en un lugar seguro, si las pierdes… Bueno, esto no es un simple «Cambiar la contraseña» En serio, hagas lo que hagas ❌NUNCA pierdas las credenciales de tu página web❌.

🔒🔒Para guardar tus credenciales de forma segura a nivel que ni el Pentágono, existe una sistema de almacenamiento que ofrece las siguientes carcterísticas:

Sí, estoy hablando del papel, un simple bloc de 📖papel y a ver quien te hackea eso. 😎

«Espera… Firulais, ¿que es eso que tienes en la boca? ¡Suelto eso, chico! ¡Perro malo! Profe, mi perro se comió mis contraseñas y no puede hacer las tareas de WordPress.» 😫

De acuerdo, es a prueba de hackers, pero no de perros🐶.

A lo que íbamos, una vez hayas introducido correctamente tus credenciales, ya podrás editar tu página a tu estilo y manera.

2. Instalación del tema y plantilla

⇒Tema

Bien, ahora que estamos ya en el escritorio de WordPres, debemos instalar un temita sobre el que trabajar, para ello ,desde el menú de la barra lateral izquierda nos vamos a Apariencia▶Temas y le damos a Añadir Nuevo tema. Para poder seguir bien el tutorial se recomienda usar esta web para el aprendizaje de WordPress principalmente e instalar el mismo tema y plantilla, ye que de lo contrario podrían surgir diferencias. Como crear una web con WordPress es sencillo, ya si eso se crerá una de verdad tras el tutorial, pero debemos ser pacientes y aprender primero para luego ya aplicar lo aprendido.

En este caso instalaremos Astra, que es un tema gratis, a la vez que bonito y sencillo, así que si no nos sale entre los temas visibles pues simplemente lo escribimos en el buscador y ahí estará. Y al igual que con los plugins. Instalar y Activar. Si no se activa está ahí pero no está puesto. Es como si te vas a la tienda de ropa y te compras una camiseta, vale, TIENES la camiseta, pero si no te la pones no se te ve puesta, está ahí en el armario (o tirada en la silla). Pues lo mismo ocurre aquí.

⇒Plantilla

Para instalar las plantillas de Astra mejor le damos desde el menú del escritorio sobre el recién aparecido icono de Astra, una vez en la pantalla de Astra, en Plugins útiles, le damos a instalar a Plantillas de inicio. En la siguiente pantalla, nos pregunta como queremos construir la web, pues le decimos que con Plantillas de inicio clásicas (lo de la IA es de pago). después de esto nos preguntará que constructor queremos usar, pues seleccionamos el Editor de bloques, que es el clásico por defecto de WordPress, y que sea el «por defecto» no lo hace nada manco, además de ser 100% gratis, es muy facil de usar y es la mejor opción de cara a compatibilidad con otros plugins.

Después finalmente nos dejan escoger una plantilla. Hay muchas que son de pago, pero muchas otras son gratis y son la mar de chulas. para este tutorial hemos seleccionado la plantilla LearnDash Academy.

⇒Personalización inicial

Una vez escogida la plantilla, se nos pide una ligera personalización inicial. Nos lo podemos saltar, pero si ya tenemos un logo que poner, vamos a ponerlo ya. Aunque sea un logo de prueba. Simplemente subimos la imagen, un png, para que tenga el fondo trasnparente, que si no «se nos verá el cartón» y una vez subido el logo, pues le ajustamos el tamaño.

Después podemos escoger la 🎨paleta de colores que va a usar la web. ¿Significa que solo podremos usar esos colores? No, podremos personalizar cada elemento de nuestra web, simplemente es bastante recomendable seguir los colores de una determinada plantilla y no desvincularse mucho de esta, para que a nivel de diseño se vea genial. La otra opción previa de personalización que nos da es la elección de la 🅰fuente que usaremos en nuestra web. La estilo de letra, vamos.

Una vez hayamos puesto un logo, elegido una pleta de colores y una tipografía, le damos a Continuar. Podemos tanto omitir la instalación de plugins que se nos pide como el dar nuestros datos (con los que nos spamearán, más que nada). Cualquier plugin que podamos necesitar para nuestra web puede ser instalado más tarde según haga falta. Así que le damos a Enviar y crear mi web. ⏳Esperamos un poquito… (Pacieeencia)

Y ya está creada. Y hasta aquí el tutorial de Crea tu pág.. ¡¡Que es broma🥳!! Ahora viene lo mejorcito. El añadir nuestro contenido, nuestro estilo, crear nuestro menú. Hasta ahora tan solo hemos creado una web base sobre la que trabajar y ya.

3. Editar la página

Bueno, acabamos de crear la web base, pero obviamente no tiene ni el el contenido quie deseamos aplicar ni el estilo😑. Es como haber comprado una libreta a la que vamos a llenar de textos, esquemas, dibujitos, listas de la compra etc. Ahora mismo la web tiene unos elementos y contenidos por defecto que vienen a mostrar el potencial que puede llegar a tener. Obviamente en los siguentes pasos modificaremos, borraremos y añadiremos nuevos elementos a nuestra web.😉

Para empezar, tan solo hay que darle a Editar la página, en la barra superior de nuestro WordPress. Omitimos el tour, ya que para algo desde Llobregat Digital ofrecemos tutorial por video y por escrito🤓.

⇒Contenedores

El elemento en sí más relevante del constructor del bloques son los contenedores. La construcción de nuestra página web se basa principalmente en contenedores (bloques) que contienen los diversos elementos de nuestra web y también contienen contenedores, y a su vez estos pueden contener más elementos o más contenedores(¿Ha quedado claro?). Se trata de una estructura puramente jerárquica. De hecho podemos visualizar esta jerarquía la barra lateral izquierda que nos aparece al pulsar las 3 rayitas del menú superior, o Shift+Alt+O.

Estos contenedores son 📦CAJAS, cajas que contienen (válgame la redundancia🙄…) otras cajas o elementos. Cajas que apilamos a nuestra manera que que nos permiten que nuestros elementos estén correctactamente ordenados, que nos permiten mover con ellas todos los elementos de dentro tan solo moviendo la caja, cajas sobre las que aplicar un estilo que se aplique a todo su contenido, cajas que duplicar con todo su contenido, cajas sobre las que aplicar como se organizará su contenido (columnas, filas, márgenes, pading, etc) ¡¡CAJAS!! 📦📦📦📦📦📦📦¡¡ORDEN!!

Y dentro de estos contenedores podemos organizar el contenido en tanto número de columnas o de filas, podemos añadir unos espacios concretos entre los elementos, unos tamaños. Por ejemplo, podemos crear un contenedor, y dentro de este, tres contenedores en linea ( a 3 columnas). Cada uno de estos contendores internos puede ser una imagen, con un párrafo debajo y un botón. ¿Que tan solo queremos 2? Borramos uno de los contenedores internos. ¿Qué queremos más? Duplicamos uno de las contenedores internos. Así de simple.

Por esto es importante ‼no dejar ningún elemento suelto en nuestra web‼, que todo esté en contenedores, aunque sea 1 solo elemento por un contenedor, da igual. Y también, desde el menú lateral izquierdo, el que muestra la jerarquía, que cada contenedor tenga un nombre con el que identificarlo a este y a su contenido de forma facil, que si no esto va a ser un caos, de verdad.

⇒Limpiando la web

Seguramente no todos los elementos que hay en la landing page, (así llamamos a la primera página de nuestra web, la página principal, la que hace de portada, la que contiene el acceso a la mayoría de contenido, la que debe verse con mejor diseño, la más decisiva, la página lider, la PRINCIPAL🌟). Por tanto, podemos empezar a borrar algunas cosillas. Aqui podemos empezar a ver de forma más práctica lo que vienen a ser los contenedores, podemos borrar tan solo algún contendor más interno, o alguno más general. Podemos duplicarlos también si nos interesa y se nos manetndrá con la disposición de su contendor general.

⇒Banner

Imagina que estamos construyendo nuestra web con bloques y contenedores. Los banners son como esos contenedores VIP que capturan la atención del usuario, ya sea en la parte superior de la página (header), en el lateral (sidebar), o en el pie de página (footer). Estos banners pueden contener imágenes, textos llamativos, animaciones o gráficos que invitan al usuario a realizar una acción, como hacer clic para obtener más información o comprar un producto. 🎯🛒

Por ejemplo, podríamos tener un banner principal que a su vez contiene tres contenedores internos: uno con una imagen de producto, otro con una descripción, y un último con un botón de «Comprar ahora». ¿Necesitamos modificar el diseño? ¡No hay problema! Podemos mover, duplicar o eliminar estos contenedores internos según nuestras necesidades.

Es crucial mantener cada elemento dentro de su propio contenedor para asegurar un diseño ordenado y coherente. ¡Nada de elementos sueltos como calcetines perdidos en la lavandería! Y para no perderse en el caos de elementos y contenedores, es fundamental asignar nombres claros y descriptivos a cada uno desde el menú lateral izquierdo. Así, mantendremos nuestra web organizada y funcional. 📋✔️

¡Y así de importante y flexible es el uso de banners en nuestra página web! ¡Parece complicado pero no, en realidad es pan comido! 🍞

Después de toda esta parrafada acerca de la importancia del banner, seguro que te mueres de ganas de crear tu propio banner, ¿eh? No te preocupes, es la mar de fácil. Tan solo debes seleccionar el elemento que desees modificar y desde el menú lateral derecho, en Estilo encontrarás un montón de opciones de estilo. Sí, ¡OJITO, OJITO, OJITO! 👀 El estilo de los elementos del constructor de bloques está ahí en ese menú. Esto no tan solo se aplica al área del banner. ¿Qué no entra ahí? Cabecera y footer, que por si no te has fijado, no puedes hacer modificación alguna, pero tranqui, que luego te explicamos cómo. Todo a su debido tiempo. ⏳

♦Espacios

Bueno, aún así, un banner como tal tiene, digamos, unas características propias de un banner, lo que lo hacen un banner. (Válgame la redundancia🙄…) Una característica es que es de ancho completo, o sea, que va a ocupar siempre el ancho de la página, como las señoras mayores cuando salen a pasear en grupito y da igual si la calle es estrechita o tiene 3 km de ancho, el grupo de señoras siempre va a ocupar el ancho entero de la acera (y encima tomándose el paseo con toda la calma del mundo). 👵👵👵 Pues sí, así es el banner. ¡Va a ocupar todo el ancho de la página! 🌐

♦Imagen

También suele tener una imagen de fondo, pero ¡ALTO AHÍ! 🚨 Como también tiene texto, y queremos que este sea perfectamente LEGIBLE, la imagen muchas veces necesitará un color de fondo para que sus elementos propios no destaquen tanto y no afecten a la legibilidad del texto del banner. Para ello, vamos a ver cómo se cambia una imagen de fondo. Tan sencillo como seleccionar el contenedor del banner y en Estilo cambiar la imagen de fondo por la que queramos. ¡PUM! 💥 Así de simple. A ver, procuremos que sea de más o menos la misma proporción que el banner, ¿eh? ¿Cómo es el banner? Pues algo largo más o menos, pero no muy fino tampoco. No vayamos a ponerle una imagen cuadrada, ni alta, ni muy fina.

Bueno, de todas formas, en Estilo siempre podemos trastear un poquito algunos parámetros de la imagen de fondo o hasta elegir otros elementos como fondo, que no sea una imagen necesariamente, como por ejemplo un fondo liso, un degradado o un video incluso. 🎨📹

♦Superposición

Como se ha comentado antes, es como, por así decirlo, una capa que añadimos por encima de la imagen para impedir que esta pueda afectar a la legibilidad del texto o distraiga la atención de otros elementos clave como los botones. Además, todo sea dicho, añade estilo a la imagen en sí, sobre todo si como superposición añadimos un degradado bien chulo, nos puede servir hasta para dar como un filtro. 🎨✨ Por eso es importante su uso, especialmente cuando la imagen es una fotografía o una imagen muy compleja en sí.

♦Texto

«¡Compra esto!», «Ve a la tienda«, «Bienvenid@s«. El texto nos invita normalmente a alguna acción o bien nos comunica, como es el caso de «Bienvenid@s», un agradecimiento. Como hemos mencionado antes, es IMPRESCINDIBLE su buena legibilidad. Por eso mismo hemos añadido cuidadosamente la superposición a la imagen, para que el texto se pueda leer mejor. 📝👀

Realmente, no tiene mucho secreto: fuente, tamaño, color, estilo, interlineado, alineación. Son los parámetros clásicos de todo editor de texto que se lo valga. ¿Necesitas un nuevo párrafo? No hay problema, tienes dos maneras:

1. Si ya estás dentro de un contenedor, pulsa Enter y automáticamente se te creará un nuevo párrafo, es como muy «por defecto«. ⌨️
2. En el menú izquierdo, al pulsar + puedes añadir un montón de tipos de bloques distintos. Entre ellos está el Párrafo. Así que ¡PUM!💥 Supersencillo.

Normalmente en un banner lo bueno es centrar el texto, y que tanto el estilo, color, tamaño y fuente CONTRASTEN con el fondo.

Otro temita IMPORTANTE en cuanto a texto a la hora de crear tu web son los ENCABEZADOS. Y es que en cuanto a texto refiere existen por un lado los párrafos, por otro lado los encabezados. Sirven para jeraquizar el contendio, pero también sirven para el correcto posicionamiento de tu sitio web. O sea, que su uso es MUY RELEVANTE. Van de h1 a h6, siendo el 1 el más relevante y principal. Eso sí, ojito porque siguen una normativa y su uso ABUSIVO puede desposicionar la página. Si no pondriamos toda la web a h1 y hala, weeeee!! Pues ❌NO❌, no se puede. Aquí va un resumen básico de la normativa:

Si quieres modificar la tipografía a tu gusto, tan solo ve al menú lateral derecho mientras estás sobre un bloque de párrafo. En la pestaña Bloque verás unos puntos suspensivos en vertical al lado de la palabra Tipografía. Bien, pues ahí encontrarás varias opciones. 🔍

Seguramente, los tamaños por defecto que vienen no te acaben de convencer. Bien, pues, si pulsas sobre el botoncito que hay justo encima de los tamaños de texto, ahí podrás concretar un tamaño exacto a tu gusto. 🎯

♦Encabezados

Otro temita ‼IMPRESCINDIBLE‼ a destacar acerca del diseño web es el tema de los encabezados. Los encabezados son un elemento IMPORTANTÍSIMO a la hora no tan solo de jerarquizar el contenido sino también de POSICIONAR TU SITIO WEB. Ahora bien, no puedes usarlos de forma abusiva, debes cumplir una normativa:

⏬Aquí tienes un ejemplo de la estructura jerárquica de una página:⏬

¡Vale, vaaale, sí, llegados a este punto te estarás preguntando, «😫sí vale, normativa bla bla bla, jerarquía bla bla bla, pero dime cómo se ponen en WordPress«. Pero es que es IMPRESCINDIBLE que te expliquemos todo esto antes de que pongas encabezados a tutiplén sin control, ya que el uso indebido te desposiciona la web, y luego viene cuando «¿😭Por quéeee, si mi web es superchula, por qué no se posiciona?» Porque sencillamente, el uso incorrecto y abusivo de los encabezados ha tumbado el buen posicionamiento. Así que ahora sí que estás preparad@. _{(No sé por qué me viene Lord Illidan Stormrage a la mente…)} 😅👾

Colocar un encabezado en WordPress es hipersimplísimo😊 a más no poder. Por un lado, puedes convertir un párrafo en un encabezado pulsando en ¶ mientras estás en el bloque de texto y luego cambiándolo al tipo de encabezado deseado desde el menú del bloque. ¡Así de fácil!

La otra forma y más recomendada es crear un nuevo bloque como Encabezado, ya que esta te permite más opciones de Estilo de encabezado.

⇒Vídeo

Obviamente, todo buen sitio web tiene que tener aunque sea un vídeo 🎞, ¡¿y el tuyo no va a ser diferente, ¡¿verdad?! Bien, lo importante aquí es comprender una cosa: ❌NO SUBAS DIRECTAMENTE❌ el vídeo a tu web, sino ponlo como vídeo incrustado. Un vídeo incrustado es en realidad un enlace al vídeo alojado en otra web, como por ejemplo YouTube. ¿Y por qué hacer eso? Muy simple, un vídeo requiere bastantes recursos y si lo subes directamente a tu web, esta podría volverse más lenta y los tiempos de carga afectarían al SEO. Peeero, en cambio, si es solo un enlace y el vídeo está en otra web, pues ya no estás sobrecargando tu propia web.

Así que si quieres poner un vídeo en tu web, simplemente crea un nuevo bloque, selecciona YouTube incrustado si el vídeo está en esa plataforma, y luego simplemente pega la URL. ¡Y ya está, simplísimo! Luego si quieres, puedes dar un poco de estilo al blqoue cambiando el color de fondo, añadiendo texto, etc.

⇒Botones

¿Qué página web es una página web sin mínimo un botón que pinchar🚨? Bueeeno, obviamente pues se trata de otro elemento MUY MUY facil de colocar, hacer funcionar y editar en el constructor de bloques de WordPress.

Colocar botones es tan sencillo como de nuevo crear un nuevo bloque, esta vez de botones. Hay 2 bloques llamados botones, ambos difieren en como le podemos dar estilo. En el videotutorial se escogen los pequeños. pero también está bien probar y experimentar un poco, al fin y al cabo eliminar elementos en WordPress es superfacil, así que no perdemos nada por trastear un poco a ver que opción nos gusta más.

En ambas opciones aparece una especie de caja contenedora con un solo botón. es hora de ir a la jerarquía y desplegar esa caja para ver como contiene un botón. Si lo seleccionamos y le damos a duplicar, se hará una copia justo al lado. Luego ya en el menú de estilos podemos cambiar su apariencia a nuestro antojo.

Obviamente, el botón tiene que llevar a algún lado al pulsar sobre él. Bueno, tan sencillo como pegarle la URL de destino. En el menú de botones escogido para el videotutorial, podemos darle a la cadenita en el menú contextual o hacer Ctrl+K. En el otro menú de botones, en cambio, habrá que pegarle la URL desde el menú lateral derecho, en General, hay que scrollear un poco y luego desplegar contenido (sí, no está muy a la vista que se diga…)

Sea cual sea la opción que elijamos, una cosita clara, debemos pensar como queremos que se nos abra el enlace. ¿En la misma pestaña o en una nueva pestaña? Si es dentro de la misma web, suele ser dentro de la misma pestaña, pero si es a una página de descargas o una página externa, lo mejor es que se abra en una nueva pestaña. En serio, como usuari@s que somos de contenido web, nos 😡cabrea bastante cuando nos sacan de una web para mandarnos a otra. Pues NO, si es una página extrena, se tiene que abrir en una nueva pestaña.

En el menú de botones del videotutorial, una vez hemos añadido una URL podemos acceder a la opciones del enlace clicando sobre el botón y dándole al lapicito✏, una vez ahí se marca Abrir en nueva pestaña y ya. En el otro menú de botones, simplemente justo debajo de donde colocamos la URL podemos activar la opción Abrir en nueva pestaña.

A parte de estas funcionalidades básicas podemos elegir bastante a nuestro gusto el estilo y disposición de los botones. Si queremos añadir un botón más, pues duplicamos un botón (no la caja de botones, ojito👁), si queremos restar un botón pues lo seleccionamos y fuera. Si queremos deshacernos del menu entero, borramos la caja pues. Ojito con borrar solo los botones individuales y no la caja, porque esta se nos quedará por ahí vacía creando espacios bien rarotes.

4. Personalizar

Es posible que a estas alturas ya te ha dado el ansia por querer personalizar a tu gusto la cabecera, por crear el menú con los enlaces que TÚ quieres, por dar tu toque único y personal a la parte más funcional de tu web. Hasta ahora no has poido porque tan solo estabamos personalizando el conetnido. ¡Pero tranqui, enseguida nos vamos a dar un toque personal y único a todos estos elementos cruciales en nuestra página web!

Lo primero que tienes que hacer es, en la parte superior de la pantalla, darle a donde pone ⏩Personalizar, así, como un poco chiquitito está, la verdad. Siendo algo tan crucial deberían anunciarlo con bombos y platillos pero bueno🙄.

⇒Cabecera

Antes que nada vamos a ir al ⏩Maquetador de Cabeceras, desde ahí podremos dar un retoques al logo, o cambiarlo si no nos gustó el que pusimos al principio. Para dar estilo en la cabecera, por ejemplo, si queremos darle un 🎨color de fondo. Podemos hacer ajustes varios de funcionalidad y diseño en la opción ⏩Personalizar cabecera transparente, para que funcione en las páginas que nos convenga o para darle pues nuestro estilo y personalidad. En color del menú, pues podemos cambiar el color del menú, elegir una transparencia, o incluso poner un fondito chulo (‼ojo con esta última opción, la cabecera es mejor que se vea limpia y ordenada sin muchos elementos, una imagen de fondo puede restar visibilidad a los elementos funcionales de esta, así que ojito👁).

♦Cambiar el color del icono

También puedes cambiar el color del icono si te apetece, siempre que sea un .png⏪. Pero ojito, cada icono responde a unos colores concretos de imagen de la empresa, así que cíñete siempre a los colores establecidos para el icono. En caso de que sea tu negocio, pues saber cuales son esos colores es cosa tuya, pero si estás haciendo la web para otra empresa o negocio, en teoría deberian haberte dado una manual de imagen corporativa o unas instrucciones de los colores a utilizar. En caso de no tenerlo claro, debes contactar con el cliente o clienta y aclarar dudas sobre como proceder.

Imagina tú ahora que haces la nueva wen de la Coco-Colla (evitando Copyright estilo ninja) y les cambias el icono a verde🟢… Pues, muy contentos no van a quedar, no🤔… Pero bueno, seguramente estamos hablando de una empresa que su manual de marca debe ser más tocho que La Biblia.

⇒Menú

Una vez hayas hecho todos los cambios que quieras en la cabecera, es hora de personalizar tu menú, sí, porque ¿tú has leído ese menú? ¿Qué tiene que ver todo eso con tu web😖? ¡Nada! Es como si tienes una pizzería🍕, te piden el menú y tú les traes el menú de una marisquería🦞. ¡No! ha llegado el gran momneto de hacer tú propio menú.

Lo primero de todo será (si te gustan los cambios recientes en la cabecera) que guardes lo que hayas realizado, que lo encontrarás por ahí arriba, como ⏩Publicar. Lo segundo es que salgas del menú de personalizar cabecera transparente, hazlo dandole en la flechita que hay al lado de «Cabecera transparente«, no a la X de más arriba que es muy tentadora y parece que te tenga que cerrar esta sección en concreto, pero la x en realidad te saca del menú Personalizar, así que ojito. 🟢Flechita bien, 🔴X mal. (lo digo por ampliamente retiterada experiencia con darle a la X).

Una vez hayas salido exitosamente (o sea, que no le hayas dado a la dichosa X más tentadora que un 🚨enorme botón rojo con el texto «NO PULSAR«) deberías encontrarte en el menú de Maquetador de cabeceras. Una vez ahí, le das a Menú principal, 🎇¡PAM!

Entonces, como vamos a editar el menú principal, le damos a ⏩Primary Menu, y una vez ahí yan solo ve moviendo los elementos del menú para ver que facil es cambiar el orden. Y si lo que quieres es crear un submenú, prueba a poner un elemento del menú un poco más hacia dentro, debajo del elemento de menú del que vaya a depender. Ya para sacarlo de submenú pues, al revés, coges el elemento del submenú y los colocas al mismo margen que el resto.

Pero como se ha dicho, no queremos esos elementos en nuestro menú, tan solo estábamos jugando un rato para que facil es cambiar el orden y crear o deshacer submenús. Así que, lamentándolo mucho, nos vamos a tener que librar de estos amiguetes😥. Para ello iremos uno a uno desplegándolos y dándole a ❌Eliminar. Los borramos todos excepto el 🏠Home, ya que toda buen web tiene sí o sí, un Home.

Ahora toca añadir nuestros elementos al menú, y WordPress es una plataforma tan requeteguay😊 que nos pondrá a disposción cada página que tengamos, aunque bueno, puede que a estas alturas aún no hayamos creado ninguna página, (😏traaanquis, esto se viene en la siguiente sección) así que de momento probaremos a volver a colocar en el menú alguna de las páginas de ejemplo. Tan sencillo como darle a Añadir elementos y ecoger una página de la lista, que son todas las páginas que tenemos. Eso sí, deberá estar como PUBLICADA, si está en borrador ❌NO aparecerá en la lista❌. En la siguiente sección se hablará más a fondo de esto.

También, desde este mismo menú podemos crear una nueva página que automáticamente se irá al menú, así que si no queremos trastear más con las páginas que vienen por defecto, y ya tenemos una idea de lo que queremos, pues lo creamos desde aquí y tan felices.

♦Links internos⬇

En link o enlace interno no es más que lo que acabamos de crear justo ahora: un enlace directo a cualquiera de nuestras páginas. Punto, no hay más.

Pero no todo en nuestro menú van a ser acceso directo a las páginas internas de nuestro sitio web ¿no? Quizás, como es el caso de Llobregat Digital, tenemos también un canal de YouTube, o quizás hay algo dentro de una página, una sección a la que sí o sí hay que redireccionar a la gente de forma directa sin necesidad de que tengan que scrollear. Todo esto tienen fácil solución en WordPress. Para ello están los links externos↗ y los links con ancla⚓.

♦Links externos↗

Este es el tipo de link que nos lleva fuera de nuestra web, en nuestro caso, a nuestro canal de YouTube. Es tan sencillo como darle a Añadir elementos y luego a Enlace personalizado. Ponemos la URL, escribimos el texto de como se verá el enlace y ya está, sin más complicación.😉

♦Link con ancla⚓

Y este es el link que nos lleva a una sección concreta dentro de una página, no al inicio de la página en sí. De nuevo vamos a Enlace personalizado, pero esta vez en vez de poner una URL pones # seguido de la ID de la sección (la cual aun NO has creado, tranqui). En el video tutorial la hemos hemos llamado #mapa, porque queremos que nos lleve a un mapa, punto y pelota. (¿Para qué nos vamos a complicar la vida?🙄). Luego en texto del enlace pues escribimos como se va a ver en el menú y ya. 😏No funciona, así que deja de pulsarlo de una vez. Tranqui, ahora tan solo ve de nuevo a editar tu Home o Página principal, por ahí en medio coge el contenedor que más rabia te dé y desde el menú lateral derecho, en Bloque, desplegando Avanzado, en ⏩Anclaje HTML pon el mismo nombre que pusiste en el menú pero sin el #, tiene que ser igualito.

5. Crear una página

¿Y qué necesita toda web personalizada además de un título propio, un icono propio, un estilo propio y un menú propio? Un contenido propio, ¿si no «paqué«? Bien, pues nos vamos al ⏩escritorio de WordPress, esta vez, si aún estamos dentro del menú Personalizar, guardamos los cambios si nos gustan y ahora sí que sí que le damos a la cruz de arriba a la izquierda, la de encima de dicho menú. Seguramente te manda a la pantalla de Vista previa, pues en la barra superior, a la izquierda le das al iconito del WordPress (W) y ya estarás en el escritorio de WordPress (luego cuando voy por la calle y me preguntan por algo que está a dos calles digo «no soy de aquí» solo por no saber indicar, en fin…🙄). También le puedes dar a la brujulita que al lado tiene el nombre de tu página, como más te guste.

Una vez en el escritorio de WordPress, en el menú nos vamos a ⏩Páginas y ¡tachán! Ahí están todas las páginas que hay ahora mismo en tu web, que van a ser las de ejemplo, y quizás una tuya si la creaste desde el menú. Bueno, ¿quieres ya tu propia página de contenido eh? ¡Pues dale a Añadir una nueva página! ¡Ya está!🌟

Ahora tan solo ve probando los distintos tipos de bloques, los patrones, y pon tu contenido hasta que la página esté a tu gusto.

6. Página de entradas

De todas formas, en un sitio web no todo el contenido se limita a páginas, también están por otro lado las entradas. ¿Cuándo es mejor usar uno u otro?🤔 Bueno, las páginas como tal son más para contenido que suele ser más fijo y estable y al que no se le va a añadir nuevo contenido casi nunca. por ejemplo, un curso que se forma fija cuenta con número limitado de lecciones y al que no vamos a añadir más lecciones, eso va con páginas. Por otro lado, y tal como estamos haciendo desde Llobregat Digital, que vamos añadiendo nuevo contenido de manera periódica, pues, para eso nos irá mejor usar entradas ¿Una de las ✔ventajas✔ principales de usar entradas frente a usar páginas en contenido que se actualiza de forma periódica? Con páginas siempre está todo el un sistema jerárquico de menús y submenús, y el nuevo contenido no destacaría. En cambio, las entradas se van mostrando cronologicamente (normalmente de más reciente a más antigua), y tan solo que el usuario o usuaria entre ¡PAM! 🌟Ya verá que hay nuevo contenido. Además, de que podemos categorizar y etiquetar con lo que si está buscando alguna información en concreto va a ser mucho más facil encontrar lo que busca.

Puede ser también la opción más acertada si tenemos una sección de noticias, pues no vayamos ahí a acumular noticia tras noticia en un megamenú que día a día, noticia a noticia se nos haga infinito el menú con 50… 60.. 10.. 2000 elementos(¡¡Qué locura!!🤯) y luego a ver en que parte del menú encuentras tú las últimas noticias🤪. Que no… Que una sección de noticias tiene que ir SÍ o SÍ con uns sistema de entradas.

«Vale sí, ya me ha quedado claro porque la importancia de elegir cuando quiero entrada o página, pero dime como se pone esto de las entradaaaas😫»-Vaale, vale ya voy, no te me sulfures. Lo primero de todo que hay que comprender es que…Si nuestro sitio es una página web y no un blogg, entonces deberá tener una apartado blogg( en el caso que queramos un blogg). Es decir, podemos tener una página web con blogg incorporado. Y este blogg en realidad… (a ver como decirlo para que no suene estúpido…) este blogg estará contenido dentro de una página. ¡Sí señor! Así que nos vamos directitos a ⏩Crear una nueva página vacía de contenido y a la que llamaremos, noticias, cursos, lo que sea que vaya a contener, la guardamos y nos volvemos al ⏩escritorio de WordPress. Por ahora tan solo hemos creado la página donde vamos a contener ese blogg y punto, ahora vamos a decirle que ahí dentro va el blogg. para ello, en el menú nos vamos a Ajustes⏩Lectura y en Página de entradas, elegimos la página que acabamos de crear y ya está.

Bien pues, ahora tan solo hace falta añadirlo al menú ¿no? Desde el mismo escritorio de WordPress nos vamos a Apariencia⏩Personalizar y ahí de nuevo nos vamos a Menús y al Primary Menu, o como se llame tu menú principal, le añades la nueva «página» La pones en el orden que quieras y ya está, no hay más secreto.🤗

7. Pie de página

Y llegamos a la sección final de este «breve» tutorial, finalmente llegamos al footer. El footer es un es una parte que como su nombre (foot) indica, se refiere al pie🦶, al pie de la página. Por tanto siempre de los siempres se encuentra como el elemento más inferior. ¿Qué suele contener un footer? Un footer suele contener elmentos tales como el Menú Legal (ese sí que sí), datos de contacto de la empresa, el copyright, a veces otra vez el Menú principal, aunque no es estrictamente indispesable y algún pequeño banner sencillo a veces.

El footer quizás pueda ser un poco exasperante🙄, está como un tanto limitado, sobretodo cuando te has acostumbrado a la intuitiva y libre construcción por bloques, llega el footer y ¡PAM!🎇 Es como un jarro de agua fría. Por eso mejor nos limitamos a poner lo más básico y ya, al fin y al cabo es el pie de página, no necesitamos aquí crear a «Big foot«, todo lo importante ya se se dice en los otros elementos de la página, no seamos como esa señoras chismosa de la calle, que parece que te quieres despedir y te viene con «👵Uy, sí pero espero que no te conté lo que le pasó a al sobrino de la prima de la bisnieta segunda del primo de mi cuñado, ¿sabes de quien te habló ¿no? Sí mujer sí, la que (…corta ya…🙄😫)«. Pues eso, el footer es ya la despedida, por así decirlo, así que por favor: ⏩BREVEDAD⏪. ¿Quién fue a hablar de brevedad…?

Cuando nos metamos en el menú de footer veremos ahí, que además del editor visual, hay como unas franjas o filas, 3 franjas, para concretar. Vale, ahí irá lo que sea que vayamos a colocar, en esas tres franjas. Podemos restar franjas, pero no añadir más, es que si no ya dejaría de ser breve. Lo que sí que podemos añadir son columnas en cada franja, pero no nos pasemos.

¿Y cómo restar franjas? Fácil, las franjas sin elementos dentro NO se verán. Ya está. Ya para quitar un elemento tan facil como darle a la X. Pero bueno, aquí lo bueno es añadir elementos ¿no? Pues en una franja vacía le damos a + y a elegir. Sin más lío😉. Así que sencillamente, coloca y descoloca a tu antojo. Lo normal aquí sería poner un texto con datos de contacto de la empresa, redes sociales de la empresa, un menú legal (explicado en otro post) y el Copyright.

Y con todo esto ya sabes ahora hacer una web muy básica, a tu manera, de forma fácil, sencilla y gratis. A partir de aqui toca crecer y perfeccionar. ¡¡Nos vemos en el próximo tutorial!😊😊