Crear una página en WordPress [De la A a la Z]

Con más Con 1400 millones de sitios web en todo el mundo en 2018, es completamente normal tener dificultades para destacar rápidamente. Obviamente el número es el único factor a considerar, necesitas tener un sitio web impecable para asegurar tu éxito en internet. Por ello, el diseño de cada una de las páginas de tu web no debe tomarse a la ligera. De hecho, los visitantes no necesariamente pasarán por su página de inicio antes de tener la información que están buscando. Además, es probable que todas las páginas indexadas de su sitio web se beneficien del tráfico directo. Por lo tanto, debe ofrecer una experiencia de usuario óptima en la página de inicio como en todas las demás. Y esto obviamente implica establecer un diseño adecuado y receptivo con información relevante. Para ello, me encargaré de mostrarte las mejores prácticas así como los diferentes pasos para crear tu primera página desde la página de inicio. Además, te invito a consultar el video que agregué a este artículo para seguir el proceso directamente.

Crear una página en WordPress

Entonces, para eso, les di una presentación rápida, en powerpoint para presentar los diferentes elementos que encontré:

¿Por qué es importante diseñar correctamente cada página de tu sitio web?

A menos que tenga un sitio de una página o de una página, tiene una o más páginas que acompañan a su página de inicio. Estos te permiten brindar mucha más información sobre tus productos, tus servicios o sobre temas cuando tienes un blog.  

Y una vez indexados por los motores de búsqueda, aparecen en los resultados cuando los internautas realizan búsquedas relacionadas con sus temáticas.

Por lo tanto, todos son puertas para tu sitio web y debes cuidar de diseñar bien cada uno de ellos. De lo contrario, corre el riesgo de perder tráfico significativo en páginas mal diseñadas, especialmente cuando su sitio comienza a ganar autoridad.

Además, tenga en cuenta que El 57% de los visitantes que visitan un sitio web con un diseño mal diseñado no lo recomiendan. Si bien su tasa de conversión puede aumentar hasta 5,5 gracias a las recomendaciones personalizadas.   

Por lo tanto, si desea ganar visibilidad rápidamente y mejorar el rendimiento de su sitio web, debe ofrecer una excelente experiencia de usuario y ciertas prácticas pueden ayudarlo.

Buenas prácticas para tener las mejores páginas web A la

hora de crear un sitio web solemos centrarnos en su estética, siendo su ergonomía la que te permitirá mejorar su tasa de conversión. Estoque su estructuración y diseño debe estar pensado de acuerdo a la experiencia del usuario.

Para eso, reúno aquí algunas buenas prácticas a adoptar y que probablemente te permitantener las mejores páginas, teniendo en cuenta la temática de tu sitio web.

Haz una proyección de tus páginas

El principal consejo que te puedo dar es que hagas maqueta de su sitio web. Este es un paso crucial en la creación de su sitio web, ya que le permite tomarse el tiempo para pensar las cosas y crear el mejor sitio web para su proyecto.

Al final, tendrás un resultado preciso que te permitirá ser mucho más rápido en el diseño efectivo de tu sitio web.

Manténgalo simple

Su diseño no es lo que los visitantes de su sitio web llegan a admirar. De hecho, quieren encontrar información específica o, en algunos casos, realizar una determinada acción. Por lo tanto, le sugiero que considere la simplicidad como regla general paraproporcionar una navegación fácil y agradable.

En este sentido, utilice únicamente elementos que tengan una función real para los usuarios y tenga cuidado de evitar aquellos que puedan hacer que su sitio sea demasiado complejo. De lo contrario, corre el riesgo de dañar la experiencia del usuario, lo que probablemente tenga un impacto muy significativo en el rendimiento de su sitio web.

Establece una jerarquía visual

Los diferentes elementos de tus páginas web deben estar bien jerarquizados y organizados visualmente. En efecto, los visitantes deben capturar automáticamente los elementos más importantes de la página para que puedan, de forma sencilla y fluida, encontrar lo que buscan.  

Así que actúa sobre aspectos como tamaños, colores, diseño, botones, llamadas a la acción… para tener éxito en tu jerarquía y organización.

Ofrezca un sistema de navegación intuitivo

Si no tiene un sitio web de una sola página, lo invito a hacerlo para que los visitantes puedan moverse fácilmente de una página a otra. La idea es que puedan moverse de un punto a otro sin esfuerzo y sin preguntarse dónde hacer clic.

Para ello, opta por una estructura de árbol muy sencilla con un máximo de tres niveles y no dudes en utilizar netlinking para enlazar las páginas de tu web. Además, asegúrese de que su menú de navegación sea claramente visible e integre un menú de navegación en el pie de página de su sitio web si es posible.

Su sitio debe ser «coherente»

Además de una fácil navegación, lo invito a asegurarse de que todos los elementos de sus páginas o de todo su sitio web sean coherentes. De hecho, necesita lógica y consistencia en cada página, pero también la necesita al pasar de una página a otra en su sitio web.

Esto se refiere principalmente a los elementos gráficos de su sitio web, a saber:

• Las fuentes utilizadas;
• Los colores ;
• Ilustraciones;
• Etc…

De hecho, no se trata de tener exactamente el mismo diseño en todo el sitio web, especialmente cuando tiene una gran cantidad de páginas. La clave es lograr el equilibrio adecuado y no confundir a los usuarios cuando navegan de una página a otra.

Optimizar la accesibilidad en diferentes soportes

A través de uno de sus estudios, Mobify ha observado que el 30% de los internautas abortan una transacción si una web no se ajusta correctamente al formato de su móvil. Y cuando sabemos que este soporte tecnológico es el primero que consume más tráfico de internet con una cuota de 51,6%, se vuelve importante profundizar en el tema.

De hecho, las páginas de su sitio web deben poderadaptarse al tamaño de todas las pantallas para ofrecer una experiencia de usuario óptima. De más, Google presta mucha atención a la capacidad de respuesta de los sitios, ya que clasifica en primer lugar a los que lo son en detrimento de los que no lo son.

Si desea que su sitio web sea receptivo, consulte este artículo que te muestra paso a paso cómo hacerlo.  

Respeta las convenciones o estándares web

Los internautas ya conocen una serie de convenciones en materia de diseño web y te aconsejo que las respetes. Estos incluyen:

• Colocar el logotipo en la parte superior izquierda o en el centro de la página y agregar el enlace a la página de inicio;
• Coloque el menú de navegación principal en la parte superior o en el lado izquierdo de la página;
• Configure los enlaces para que cambien de color cuando los usuarios pasen el mouse sobre ellos.
• Etc…

Aunque a veces es tentador querer ser original, no cometas el error de modificar estas convenciones. De hecho, cambiarlos corre el riesgo de hacer perder el tiempo a los visitantes o causar confusión, lo que afecta la experiencia del usuario.

Crea páginas relevantes

Una página web se crea para proporcionar una información determinada y debes asegurarte de que así sea. De hecho, si planea agregar páginas a la página de inicio, probablemente sea porque desea brindar más información sobre sus servicios, sus productos o un elemento determinado. Para ello, deberá dar respuesta a puntos como:

• La relevancia de la página para los internautas;
• Lo que sus visitantes necesitan saber;
• Información que probablemente les dé confianza;
• La información que los inspirará a tomar acción.     

Ponte en la piel de tus visitantes

Debido a que creen que los sitios web no están interesados ​​en su experiencia, el 68% de los visitantes no convierten, según vitaminat Cuando piensas en el diseño de tu sitio web, debes ponerte en el lugar de tus visitantes ya que, en última instancia, es para ellos que lo estás haciendo.

En esta lógica, primero debes conocer las preferencias de tu target. Pero siempre puede realizar pruebas después o solicitar comentarios para mejorar la experiencia del usuario. Para ello:

• Pide la opinión de tus familiares;
• Solicite comentarios de sus visitantes;
• Analiza el comportamiento de tus visitantes con herramientas como huevo loco ;
• Etc…

Después de tener una idea clara de la presentación de su página, ahora puede pasar a la fase real de su creación y estos son los pasos.

Creación de la página de la Agencia SEO de Twaino: Los pasos para crear la segunda página de su sitio web usted mismo

Antes de crear la segunda página del sitio web de mi Agencia SEO, Twaino.com, tuve la oportunidad de hacer dos cosas, entre ellas:

• El modelo de las páginas de mi sitio web;

• La página de inicio de mi sitio web.

Estos dos elementos me permitirán crear rápidamente la segunda página de mi sitio. Y esto, en la medida en que el modelo me dé una idea precisa del resultado y la página de inicio me sirva de modelo o apoyo.

Además, uso el tema «Avada» que me permite tener el complemento «Fusion Builder» que me será útil para modificar la nueva página de mi sitio web. También tenga en cuenta que para este proceso, cuento tres pasos principales que incluyen:

• La creación de un modelo desde la página de inicio  
• La creación de bloques para mostrar en pantallas medianas y grandes
• La creación de bloques para mostrar en pantallas pequeñas

Sin embargo, primero debe iniciar sesión a su Tablero.

Inicie sesión en el panel de control de su sitio web

Para crear la segunda página de su sitio web, debe acceder a la consola de WordPress.

Para ello, simplemente complete en su navegador, la entrada “…./wp-admin” en la URL de su sitio web. El mío es, por tanto, “ https://twaino.com/wp-admin ”.

En la página de inicio de sesión, complete los cuadros con sus credenciales y luego valide para acceder al tablero.

1) Crear una plantilla desde la página de inicio

Esto es para duplicar la estructura de su página de inicio para usarla como plantilla en una nueva página.

1-1) Acceda a los componentes de su página de inicio  

En la barra lateral derecha de su Tablero, haga clic en la sección «Páginas» y luego en «Todas las páginas». Tendrá acceso a todas las páginas de su sitio web, incluida la que tiene el título «Inicio»: esta es su página de inicio.

Luego haga clic en «Editar» que aparece tan pronto como pasa el mouse sobre el título de la página.

Tienes en la página siguiente, todos los constituyentes o bloques de tu página de inicio, y ésta, en el plugin «Fusion Builder».

1-2) Cree un modelo desde la página de inicio

Verifique que la ventana «Constructor» esté activa y haga clic en el tercer icono que está en la misma línea y en el lado derecho.

Entonces tiene cinco ventanas en esta nueva interfaz, a saber:

• Demostraciones;
• Plantillas;
• Contenedores;
• columnas;
• Elementos.

Seleccione «Plantillas», si aún no lo ha hecho, y cree una nueva plantilla desde esta página.

Tienes que nombrar esta plantilla en la casilla reservada a tal efecto y hacer clic en “Guardar plantilla”.

Yo, nombro la mía «Página de inicio de Twaino» y guardo.

1-3) Crear una nueva página

Para crear una nueva página, puede hacer clic en la ventana «+ Crear» que se encuentra completamente en la parte superior y al lado de «Ver página».

También puede crear una nueva página haciendo clic en la opción «Agregar» en la sección «Páginas» ubicada en la barra lateral izquierda.

Asigne un nombre a la nueva página ingresando su título en el primer cuadro ubicado justo debajo de «Agregar una nueva página». Yo llamo a la mía “Agencia SEO”.

Encontrará que, de forma predeterminada, «Fusion Builder» no está activo. Para activarlo, haga clic en el botón azul «Editar con Fusion Builder» y aparecerán sus diversas opciones.

1-4) Cargue el modelo guardado en la nueva página

Haga clic en el tercer icono que se encuentra en la misma línea que la ventana «Constructor». En el apartado “Plantilla”, tienes la plantilla que tenías guardada y pulsas la opción “Cargar”.

Aparece un menú que le permite elegir cómo cargar el modelo en cuestión. Estos son:

• Reemplazar todo el contenido de la página: Que reemplaza todo el contenido que ya existe en la página;
• Insertar encima del contenido actual: inserte el contenido encima del contenido;  
• Insertar debajo del contenido actual: inserte el contenido debajo del contenido.

Tomo la primera opción para la plantilla «Página de inicio de Twaino», que por lo tanto reemplaza todo el contenido y me trae todas las partes que tuve que crear en mi página de inicio.

Luego lo publico a ver que tal. Para hacer esto, haga clic en el botón azul «Publicar» ubicado en la esquina inferior derecha y luego haga clic en «Vista previa».

A mi nivel, tengo la página «Agencia SEO» con la URL https://twaino.com/agence-seo/, que se ve exactamente como la página de inicio de mi sitio web.

2) La creación de bloques para visualización en pantallas medianas y grandes

«Fusion Builder» incluye los diferentes elementos que componen tu página web y bajando hasta la parte inferior, verás varias líneas en color azul. Estos son los diferentes bloques de la página y las modificaciones que hagas en este nivel se tendrán en cuenta en el renderizado final.

Además, dado que ha hecho un duplicado, solo necesita hacer cambios, no crear cada bloque desde cero.

Además, tuve la oportunidad de crear la «revolución del control deslizante» de esta nueva página y simplemente la cargaré. De hecho, es la parte de su página web que se encuentra justo debajo del menú de navegación. Aparece a los usuarios sin que tengan que desplazarse hacia abajo en la página.

Si desea hacerlo, simplemente puede editarlo desde la plantilla de su página de inicio. Sin embargo, si no sabes cómo hacerlo, te invito a consultar la creación de la “ Slider Revolution ”. Sigue los pasos para crear el tuyo propio para cada una de tus páginas.

2-1) Modificación del primer bloque

Hay varios bloques para este modelo, en particular el bloque de separación que deseo mantener. En este caso lo dejo y modificaré los demás bloques teniendo en cuenta mi modelo.

Despliego el contenido del segundo bloque “Agencia” haciendo clic en la pequeña flecha que está completamente a la derecha.  

2-1-1) Modificar el texto

Para modificar el texto, haga clic en el icono de edición que aparece cuando arrastra el cursor sobre la celda de texto.

Desplazándose un poco hacia abajo, verá el campo de texto donde puede ingresar texto nuevo y hacer el formato.

Luego haga clic en «Guardar» para guardar el nuevo texto.

2-1-2) Inserta una imagen

Tuve la oportunidad de hacer de antemano todas las imágenes que usaré y puedes hacer lo mismo para evolucionar más rápido.

Haga clic en el icono de edición que aparece cuando pasa el cursor sobre la celda de imagen junto a la celda de texto.

En la interfaz que se muestra, haga clic en el botón «Editar» ubicado justo debajo de la imagen anterior.

Luego tiene su «Biblioteca multimedia» en la que puede seleccionar directamente una imagen.

También puede importarlos haciendo clic en la ventana «Cargar archivos» ubicada justo al lado de «Biblioteca de medios».

Presione el botón «Seleccionar archivos» y busque en su computadora para tomar las imágenes que desee.

En este nivel, renombra tus imágenes, yo nombro las mías:

• Twaino the SEO jardineros;
• Referenciación natural SEO;
• clientes;

• experiencia de Google;

• Alejandro MAROTEL;
• Mariana Seiko Sakurada;
• Únete a nosotros.

Luego, inserto la imagen de «Twaino les jardiniers du SEO» y guardo para luego insertar la segunda imagen en la tercera celda ubicada en la segunda línea.  

También procedo a la inserción del segundo texto «Una referencia de excelencia» cuidando de hacer el formato necesario.

2-1-3) Insertar otras líneas de texto e imágenes

A nivel del modelo, hay una tercera línea que contiene una imagen y un texto. Para ahorrar tiempo en este nivel, duplique las celdas anteriores.

Para realizar esta duplicación, haga clic en el segundo icono que sigue directamente al de la edición y que aparece cuando pasa el ratón sobre la celda en cuestión.

A mi nivel, duplico una celda de texto y otra imagen que muevo hacia abajo. Uso el mismo principio que antes para cambiar el texto y la imagen. Así que tengo la tercera línea que incluye:

• El texto: Una agencia SEO escuchando a sus clientes;
• La imagen correspondiente.

Todavía creo una cuarta línea con:

• El texto: Una experiencia de Google;
• La imagen correspondiente.

Guarde las modificaciones y haga clic en «Vista previa» para ver la representación. El renderizado es bueno, excepto por la imagen de «Google», que es un poco demasiado grande.

2-1-4) Ajuste el tamaño de sus imágenes

Cuando note que el tamaño de una imagen es demasiado grande, haga clic en el icono de edición de su celda y presione el botón «Editar».

 

En su interfaz de «Biblioteca multimedia», verá la opción «Tamaño» a la derecha y justo encima del botón «Insertar en la página». Elija un elemento predeterminado que podría ser lo que desea.    

En mi nivel, elijo el tamaño «400 * 265» de Avada. El renderizado es mucho mejor y aprovecho para centrar la imagen.

Para esta última acción, haga clic en el icono de edición y vaya a la opción «Alinear», luego seleccione «Centrar» y guarde.

También me ocupo de centrar todas las demás imágenes y reducir su tamaño.

2-2) Agregue el segundo bloque

Justo debajo del bloque «Agencia», agregaré el bloque «Mi equipo». Para ello, cambio el nombre del siguiente bloque a “Nuestro Equipo”. En este bloque, modifico la celda del texto ya presente insertando el título «Nuestro Equipo» con la escritura que lo acompaña. Mantengo el mismo formato ya que quiero tener el mismo resultado.

Ahora insertaré las dos imágenes que se suceden verticalmente con su texto.

2-2-1) Insertar una imagen

Tomo la celda que me va a servir para mi imagen y borro todas las demás celdas que no me van a servir. 

Luego establecí su proporción en «1/3» presionando el primer ícono en la esquina superior derecha de la celda.

  

Para agregar la imagen, haga clic en «+Elemento» que se encuentra en la celda y en la nueva página, busque el elemento «Imagen». Luego haga clic en el botón «Imagen» que aparecerá y presione el botón «Seleccionar imagen» que aparece en la nueva interfaz. Se muestra la «Biblioteca multimedia» y puede elegir la imagen que desee.

2-2-2) Insertar un texto

Para insertar el texto que sigue a esta imagen, duplica la celda y dale una proporción “2/3”. Luego haga clic en «+Elemento» y esta vez busque el botón «Texto».

Toque el elemento y la interfaz de configuración que sigue, agregue su texto y formatéelo.

Para la siguiente imagen y su texto, solo tienes que duplicar las anteriores y hacer los cambios.

En este nivel tengo:

• Mi imagen y un texto que me describe: “Alexandre MAROTEL,………”
• La imagen de Mariana y un texto que la describe: “Mariana Seiko Sakurada,……”.

Guarde las modificaciones y haga una vista previa para ver el renderizado.

2-3) Modificar un bloque con un color de fondo y un botón

Para ahorrar tiempo, te invito a tomar los bloques antiguos que más se parezcan a los que deseas crear. En mi nivel, el bloque «Únete a nosotros» que quiero crear tiene las mismas características que el «BLOG» del modelo.

Por lo tanto, opto por la modificación del bloque «BLOG» y elimino los bloques intermedios que ya no necesito. Estos son por ejemplo:

• Servicios;
• Servicios móviles;
• Separador.

2-3-1) Inserte el texto y la imagen

Para “Únase a nosotros”, hay tres elementos para insertar:

• Una imagen;
• Un texto con título;
• Un botón.

Primero, elimino las celdas que no necesito.

Inserto mi texto modificando el contenido anterior con el mismo principio.

También cambio la imagen y me cuido de darle la proporción de «½» a cada una de las dos celdas.

Luego coloco la celda de imagen a la izquierda y la celda de texto a la derecha.

2-3-2) Insertar un botón

Para insertar el botón, haga clic en «+ Elemento» ubicado en la celda de texto y busque el elemento del botón usando la barra de búsqueda. Haga clic en «Botón» que lo lleva a la interfaz de configuración.

Por defecto tienes las opciones de la ventana “General” y si ya tienes el enlace de tu botón, puedes ponerlo en la casilla reservada a tal efecto, cerca de la opción “URL del botón”.».

Ingrese el texto que aparecerá en el botón con la opción «Texto del botón».

En «Alineación», seleccione «Centro» para que el texto quede centrado en el botón.

2-3-3) Agregar espacio entre el botón y el texto

Siendo la distancia entre el texto y el botón muy pequeña, pondré un poco de distancia entre ellos. Para ello crearé un separador que se colocará entre estos dos elementos.

Entonces haga clic en «+ Elemento» y busque el elemento «Separador», luego haga clic en su botón. En la interfaz que viene, seleccione para la opción «Estilo», el menú «Sin estilo» en la ventana «General».

Luego, seleccione la ventana “Diseño” y en el nivel “Margen”, coloque la distancia que desee. Yo ingreso un valor de 5% y coloco el separador entre el botón y el texto.

Luego compruebo si la representación es agradable haciendo clic en «Vista previa», que es el caso

3) La creación de bloques para mostrar en pantallas pequeñas

Tenga en cuenta que la visualización en computadoras no siempre está optimizada para la visualización en teléfonos móviles. Para esto, debe crear bloques que se dedicarán a una visualización optimizada para dispositivos móviles. Puedes hacer uso de mi artículo sobre el tema que da mucho más detalle.

Para verificar la vista móvil de la página, puede:

• Usar su teléfono móvil para ver directamente cómo se ve;
• Reduzca la pestaña de su navegador a aproximadamente «2/3» del ancho de la pantalla de su computadora.

3-1) Duplica y modifica el primer bloque   

Para ir más rápido, simplemente duplica los bloques que creaste para la visualización predeterminada.

En mi caso, duplico el bloque “Agencia” y cambio el nombre del segundo a “Agencia Móvil”. Para este bloque que se acaba de crear, voy a su modificación haciendo clic en la pequeña flecha a la derecha para mostrar su contenido.

Luego realizo una reorganización de los textos e imágenes del bloque separando cada imagen con textos.

Además, hago clic en el icono de edición de la celda de texto para reducir su tamaño.

Para hacer esto, establecí el tamaño del título en «40 píxeles» en lugar de «50 píxeles».

3-2) Activar la pantalla del móvil

Para ver los cambios realizados, debe activar la pantalla del móvil. Entonces haga clic en el ícono de edición de bloques y en la ventana «General», baje al nivel de «Visibilidad del contenedor» para ver las tres opciones de visualización:

• Pantalla pequeña: para visualización en soportes de pantalla pequeña como los teléfonos;
• Pantalla Mediana: Para soportes con pantallas medianas como tabletas;
• Pantalla grande: para medios con pantallas grandes, como computadoras.

Seleccione el primero y asegúrese de anular la selección de los otros dos. Por lo tanto, tendrá la primera opción que se vuelve azul y las otras dos grises.

Esta acción muestra esta configuración solo en pantallas pequeñas, incluidos los teléfonos.

Luego guarde y obtenga una vista previa para ver la representación.

3-3) Crear el segundo bloque móvil

Quiero crear un nuevo bloque móvil para “Nuestro equipo”. Para ello, lo duplico y lo pongo en modo teléfono con el mismo método que antes.

En este nivel, mi imagen ya es demasiado grande para mostrarla en un teléfono. Para mantenerlo pequeño, lo insertaré directamente en la celda de texto que lo acompaña

Haga clic en el icono de edición de la celda de texto y, justo encima del campo de texto, presione el botón «Agregar medios».

Luego elige la imagen que deseas y tomo mi imagen y la alineo a la izquierda teniendo cuidado de reducir su tamaño a «80 píxeles».

Por otro lado, mueva el texto justo debajo de la imagen en el control para tener una representación agradable. Hago lo mismo con la segunda imagen y su texto teniendo cuidado de activar la pantalla en el móvil.

Además, el último bloque “Reclutamiento móvil” ya tiene un buen diseño y ya no necesito modificarlo. Todo lo que tienes que hacer es activar la vista móvil.

4) Verifique sus modificaciones

Después de todas estas modificaciones, asegúrese de verificar la visualización de la página en los diferentes medios. Esto le permite detectar el más mínimo problema y hacer las correcciones necesarias.

Ahí lo tienes, acabas de crear la segunda página de tu sitio web.

Conclusión

Después de crear la página de inicio, generalmente necesita crear las otras páginas de su sitio web. Estos se encargarán de brindar a tus visitantes información adicional sobre tus productos, tus servicios o incluso presentar los artículos de tu blog. Y una vez que los motores de búsqueda las indexan, estas páginas se convierten en puertas de entrada para los visitantes. Por esta razón, debe asegurarse de que cada uno de ellos esté bien diseñado y brinde la mejor experiencia de usuario. Para lograr este resultado rápidamente, le sugiero que primero cree la página de inicio perfecta que luego simplemente duplicará para usarla como modelo.

¡Nos vemos pronto para otro artículo!