Diseño Web WordPress

Paso a paso, crearemos una página web barata, sencilla y funcional

Coste Total:   14,52 €

Hosting                     →    14,52 € el primer año

Dominio                    →    Incluido con el Hosting

Tema WordPress        →    Gratuito

Tiempo total empleado:   14 horas

Etapas previas             →  2 horas

Configuración del sitio   → 5 horas

Añadir contenidos         →  7 horas

Decidimos construirla con WordPress porque es el gestor de contenidos más versátil por lo que se puede usar para todo tipo de sitios web.

 

    ▶︎  ETAPAS PREVIAS

– Temática: Vamos a crear una web para un establecimiento hotelero imaginario al que vamos a llamar «Hostal Total».

– Palabras claves: Hemos seleccionado unas pocas palabras claves entre las que se encuentra «Alojamiento en …»,   «Hotel en …», «Alojamiento barato en …» y algunas otros términos más específicos.

– Hosting: Hemos contratado el hosting en IONOS 1&1.

– Dominio: Hemos adquirido el dominio «www.hostaltotal.com» en IONOS 1&1.

– Estructura: Hemos planificado la estructura básica del sitio web que constará de 4 páginas (Inicio, Servicios, Tarifas y Contacto).

 

1  ►  Elegimos hosting y dominio

Hemos elegido IONOS 1&1 para el hosting y el dominio por la única razón de que es el más barato del mercado. Además, según diversas opiniones, su servicio técnico ha mejorado bastante. Hemos optado por la oferta «Business» porque creemos que es la que más se ajusta a nuestras necesidades. Puedes contratarlo aquí:  IONOS-Business ⏎

Factura hosting

Esta es la factura que tendremos que abonar mensualmente durante el primer año. Después el precio será de 8 € + IVA mensualmente.

Al inscribirnos en IONOS, para adquirir hosting y dominio, se nos solicitan nuestros datos (nombre, dirección, email, etc.), se nos adjudica un ID de usuario, que es un número de 9 cifras y, por último, elegimos una contraseña de acceso a nuestra cuenta de IONOS.

2  ► Elegimos WordPress

Accedemos a la plataforma de IONOS. Aquí podemos elegir entre dos opciones:

● Usar el constructor visual de IONOS.

● Usar WordPress.

Nos decantamos por WordPress porque nuestro objetivo es hacer una página web de la mayor calidad posible al menor coste posible. Tanto el constructor visual como WordPress son gratuitos pero la calidad de éste último es indudablemente mayor.

Instalar WordPress

Esta es la página de IONOS donde se nos da la opción de seleccionar WordPress o un constructor visual.

Diseño web con WordPress

¡Ojo! En este paso te dan la opción de elegir entre un diseño WordPress gestionado o un diseño WordPress clásico. Si eliges el gestionado, IONOS te promete actualizarlo, optimizarlo, incluirte plugins, etc. Este servicio se cobra aparte, por supuesto. Digamos que IONOS es el Ryanair de los hosting, te van cobrando por cada servicio que incluyas. Elije la segunda opción. Ese trabajo, que promete hacer IONOS, fácilmente podemos hacerlo nosotros mismos.

3  ► Instalamos WordPress
Título de página de WP
Datos para diseño web en WP

Al instalar WordPress se nos pide que le demos un nombre a la página. Elegimos como nombre «Hostal Total». Luego se nos pide un nombre de administrador y una clave.

Quede claro que este nombre y clave son diferentes a los que hemos elegido para nuestra cuenta de IONOS. Es decir, tenemos una cuenta en IONOS y otra en WordPress.

  Clicamos en «editar página web».

Editar pagina web
Elegir tema WP

En este paso podemos elegir un tema de WordPress provisionalmente. Después podremos cambiar al que más nos guste. Así que, en principio, hemos elegido la primera opción.

Nota: Sería aconsejable que tanto la cuenta de WordPress como la de IONOS la guardemos en los marcadores o favoritos de nuestro navegador con el fin de tenerlas a mano.

4  ► Accedemos a WordPress

Ahora ya podemos acceder a nuestro escritorio de WordPress desde vamos a realizar todas las tareas de construcción de una página web. El panel de opciones (a la izquierda) nos permite configurar nuestro sitio.

Escritorio WordPress

En este artículo te explicamos todas las funcionalidades del escritorio de WordPress: Escritorio WP ⏎

5  ► Ajustes generales

Entramos en «Ajustes» y comenzamos por «Ajustes generales».

 

Ajustes generales WordPress

Aquí vamos a añadir en «Descripción corta» una frase breve sobre el tema de nuestro sitio. Por ejemplo «Hostal con encanto en Web Total».

También podemos decidir si cualquiera puede o no registrarse en nuestra web.

Elegimos un formato de fecha y hora y la zona horaria que nos corresponde.

Y por último, no olvidemos guardar los cambios.

 

 
6  ► Ajustes de escritura

Ahora vamos a «Ajustes de escritura». Lo único que haremos es añadir algún otro «Servicio de actualización». Nuestra web, en principio, no incluirá un blog con entradas, así que no tocaremos en este apartado nada más, de momento. Más adelante, sería del todo deseable que la web contuviese un blog.

 

Servicios de actualización

7  ► Ajustes de privacidad

El resto de opciones de ajustes los dejaremos, de momento, tal como están por defecto. Sólo deberíamos incluir una página de política de privacidad, obligatoria por la Ley de protección de datos. Para ello vamos a «Ajustes de Privacidad».

Creamos una nueva página de política de privacidad. Por defecto existe ya una bastante completa que aparece automáticamente cuando pulsamos el botón de «Crear nueva página». No obstante, aquí os adjuntamos una que es la que hemos incluido en Hostaltotal.com. Sólo es necesario cambiar el nombre:

Política de privacidad HT ⏎

Ajustes de privacidad
8  ► Plugins

A la izquierda del escritorio de WordPress encontramos las diferentes opciones para administrar y gestionar nuestra página. En primer lugar hemos clicado en «Plugins».

Plugins instalados

¡Oh, sorpresa! Pese a que habíamos elegido la opción de «WordPress no gestionado» vemos que IONOS se ha ocupado de llenarnos nuestro escritorio de plugins. 

Vamos a borrarlos casi todos. Para ello primero habrá que desactivarlos. 

Una vez que hemos eliminado los plugins que teníamos por defecto, vamos a añadir estos otros.

Instalar un plugin es muy fácil. Desde el escritorio en la opción «Plugins» clicamos en «Añadir nuevo» e iniciamos una búsqueda del plugin elegido. Lo instalamos y lo activamos. 

Algunos plugins no necesitan configuración pero la mayoría sí.

Así que en este artículo te detallamos como configurar cada plugin y porque razón los hemos elegido:  Plugins WP ⏎

Deberías configurar y activar en este momento, al menos, «Child Theme Configurator» ⏎

¿Son demasiados plugins? Tal vez sí. Pero todos son necesarios si no queremos complicarnos demasiado. Más adelante veremos si no ralentizan la carga de la página.

La razón de incluir el plugin «Editor clásico» es que en el momento actual la nueva versión de  WordPress está dando problemas. A la espera de una nueva actualización que los corrija, nos decantamos por el editor clásico. Y además, es más sencillo de usar.

Principales plugins WordPress

 

9  ► Páginas provisionales

Primero vamos a crear nuestra página de inicio provisional

Diseño WordPress - Añadir página en WordPress

Para ello nos dirigimos al panel de opciones de la izquierda del escritorio y en «Páginas» clicamos en «Añadir nueva». De momento, sólo vamos a crear la página pero no vamos a editarla. Basta con que pongamos el título: «Inicio» en el bloque superior. ¡Y a guardar! Siempre «Guardar» o «Publicar» o «Actualizar», según el caso. ¡Que no se nos olvide!

Añadir otra página en wordpress
Nueva página WP

En este paso podríamos crear el resto de las páginas que hemos determinado para nuestra web. En este caso: «Servicios», «Tarifas» y «Contacto». Sólo con caracter provisional antes de incluir nuestros contenidos en cada una de ellas. Esto es con vista a poder crear el menú unos pasos más tarde.

10  ► Ajustes de lectura

Una vez que hemos creado nuestra página de inicio, vamos a «Ajustes de lectura».

Configurar ajustes de lectura

En «Tu portada muestra» seleccionamos «Una página estática». En «Portada» optamos por «Inicio» como página de portada.

Después, sólo debemos guardar cambios.

Ajustes de lectura
11  ► Temas

En «Apariencia» vamos a «Temas». Habíamos elegido el primero de la lista, que se llama «Pure & Simple». Parece indicado para nuestro objetivo de crear una página sencilla y barata. Hay que tener en cuenta que es un tema gratuito. 

En este artículo te explicamos qué son los temas de WordPress y cuales, en nuestra opinión, son los mejores:  Temas ⏎

 

Elegir tema WP

Podemos ir activando o desactivando los diferentes temas para comprobar cual se ajusta mejor al diseño que queremos para nuestra web. Si ningún tema nos gusta, entonces, podemos buscar otro diferente en el repositorio de WordPress donde hay cientos.

 

Ahora vamos a ver como luce el tema que tenemos activo.

Para ello sólo tenemos que clicar en «Visitar sitio»

Ver página WP
Apariencia tema Pure&Simple

De esta forma es como aparece el tema que hemos elegido. Parece un formato adecuado para una web de un hotel así que nos quedaremos con él. Además, si como su nombre promete es un tema «Puro y Simple», se ajusta perfectamente a nuestro objetivo de hacer una web lo más sencilla posible.

Como hemos construido un tema hijo, podemos hacer ahora las personalizaciones que consideremos oportunas. Esto es, si has configurado ya «Child Theme Configurator».

¿Qué es un tema hijo? Puedes encontrar esa información en este artículo:  Tema hijo ⏎

12  ► Personalizar – Opciones

Vamos a empezar la tarea de personalizar nuestro sitio web. Es decir, vamos a adaptarlo a nuestros gustos, objetivos y necesidades. Esto es con carácter general para todo el sitio web.

 

Personalizar Diseño WordPress

Para ello tenemos que entrar en «Apariencia» y de ahí a «Personalizar».

Opciones de personalización del tema

Estas son las opciones de personalización que nos brinda este tema. No son muchas pero parecen suficientes para lograr nuestro objetivo.

Lo primero que observamos es que el tema no está totalmente traducido al español. ¡No importa! No resulta difícil de entender.

Hay que tener en cuenta que las «personalizaciones» que realicemos aquí serán visibles en todas las páginas de nuestro sitio.

Después, añadiremos el contenido específico de cada página.

Para una información más completa sobre las opciones de personalización de este tema puedes visitar este artículo:  Tema Pure&Simple ⏎

13  ► Personalizar – Identidad del sitio

Comenzamos por «Identidad del sitio» donde encontraremos diversas opciones para configurar la entidad del sitio.

Identidad del sitio

En esta sección «Identidad del sitio», podemos ir probando que aspectos nos gustan más: qué tamaño de título, qué color de fondo, qué altura de cabecera, etc.

Para Hostal Total hemos incluido un icono que es una versión en miniatura de nuestro logotipo que será visible en el navegador y en algunas aplicaciones.

En este módulo de personalización podemos hacer cambios en los aspectos generales del sitio. Por ejemplo, vamos a probar a insertar un logo que hemos diseñado previamente.

1- Clicamos en «Seleccionar imagen».

Logo diseño wordpress

Nota: En este artículo te damos claves para diseñar tu  logotipo ⏎

2- Seleccionamos «Subir archivo» y de ahí la opción «Seleccionar archivo». Vamos a la carpeta donde hemos guardado nuestro logo y lo subimos.

Subir imagen diseño WordPress

3- Al subir tu archivo debes introducir el nombre que le has dado, un texto alternativo y una breve descripción. Esto es importante de cara a facilitar la tarea a Google para identificar nuestros contenidos.

Título y texto alternativo de imagen

Comparamos resultados 

Con el logo en la cabecera de la página

Sin el logo en la cabecera de la página

Con logo en cabecera
Sin logo en cabecera

Definitivamente, nos gusta más sin el logo, así que simplemente, se lo quitamos. Ahora podemos ir probando las diferentes opciones que tenemos aquí. Lo mejor es que mientras personalizamos en «Apariencias- Personalizar» podemos ver en tiempo real los cambios que vayamos realizando de modo que, si no nos gustan, podemos descartarlos fácimente. Esto no sucede en el escritorio de WordPress donde tenemos que visualizar con «Vista previa» los cambios que vayamos realizando.

Color de fondo de la cabecera

Probamos ahora a cambiar el color de fondo de la cabecera (Header Background Colour).

Color cabecera predeterminado

¡Sólo era por probar! Resulta horrible. Lo descartamos y punto. Sólo tenemos que clicar en «Predeterminado».

14  ► Personalizar – Basic settings

En este apartado tenemos diferentes opciones básicas de los diferentes elementos de nuestra web. Esas opciones son:

– Anchura de la página – Blog con o sin barra lateral – Estilos de blog – Contenido o resumen para el blog. – etc.

 

Configuraciones básicas diseño wordpress

Deberíamos marcar la primera opción para ocultar los contenidos que aparecen en el sitio por defecto, es decir, los que vienen asociado al tema que hemos elegido.

Las opciones que se encuentran entremedias son para configurar los estilos del blog así que, de momento, no nos interesan.

En «Your Copyright Name» debemos añadir el nombre de nuestra web.

15  ► Personalizar – Sticky menu

Este es un efecto por el cual el menú queda fijo en la pantalla cuando haces scroll, es decir, cuando te desplazas por la página hacia abajo.

Sticky menu

Por el momento no se puede percibir el efecto del Sticky menu hasta que creemos nuestro menú.

16  ► Personalizar – Colours

En esta sección podemos cambiar el color de los diferentes elementos de la página. Algunas opciones no podremos aún previsualizarlas hasta que no añadamos nuestros contenidos.

Color de fondo de menu

Con «Menu background»cambiamos el color de fondo del menú.

Seleccionar color de fondo del menú
Color de fondo del pie de pagina

Con «Bottom widgets background»cambiamos el color de fondo de los botones a pie de página.

Seleccionar color de fondo del pie de pagina
17  ► Personalizar – Mobile Navigation Colours

En esta sección podemos cambiar el color de algunos elementos para la versión para móviles.

Color de fondo del menú para moviles

Con «Toggle Menu Background»cambiamos el color de fondo del menú para móviles.

Seleccionar color de fondo del menú para moviles
Apariencia color de fondo del menú para moviles
Controles diseño web en los diferentes dispositivos

Debajo de todas las opciones de personalización se encuentran los controles que nos muestran como se ve la web en los diferentes dispositivos.

18  ► Personalizar – Navmenu  Position

Esta sección no podemos configurarla porque es exclusivamente para la versión premium.

 

19  ► Personalizar – Social Networking

Esta sección nos permite conectar la web con nuestras redes sociales.

 

Redes sociales en sitio web

En«Social Networking» podremos crear enlaces a nuestras cuentas de las diferentes redes sociales: Twitter, Facebook, Google+, Linkedin, etc.

Existe también la opción de ocultar la barra de redes sociales: «Hide socialbar».

20  ► Personalizar – Imagen de cabecera

Aquí podemos subir una imagen de cabecera para nuestro sitio web.

 

Imagen de cabecera
Imagen de cabecera con fondo blanco

En «Imagen de cabecera « podemos optar por insertar una imagen de cabecera o bien dejar el fondo en blanco.

 

21  ► Personalizar – Imagen de fondo

 Aquí podemos subir una imagen de fondo para nuestra página web.

 

Imagen de fondo diseño wordpress

En «Imagen de fondo» podemos insertar una imagen de fondo para nuestra web. 

Aunque realmente está imagen sólo es visible si optamos por un diseño en caja. Por lo tanto, en principio, podemos dejarlo tal como está.

 

22  ► Personalizar – Menús

Ahora vamos a crear al menos un menú para nuestra web. Para «Hostal Total» vamos a crear un menú principal y otro para el pie de página.

Previamente hemos creado las siguientes páginas: Inicio – Servicios – Tarifas – Contacto – Política de privacidad.

 

Crear nuevo menu
Personalizar menu
Añadir elementos al menu principal

En primer lugar, clicamos en «Crear un nuevo menú».

En «Nuevo menú»  nombramos nuestro menú como «Principal» y lo ubicamos en «Primary Menu». Y clicamos en «Siguiente».

Clicamos en «Añadir elementos».

Personalizando menu principal
Personalizando menu pie de pagina

Elegimos elementos para crear el menú principal.

 Elegimos elementos para crear el menú de pie de página.

Apariencia menu principal
Apariencia menu pie de pagina

 

23  ► Personalizar – Widgets

En esta sección podemos añadir widgets a nuestra página. Estos son: Imagen, Texto, Menú, Galería de imágenes, Calendario, Formulario de búsqueda, Video, Comentarios recientes, etc.

Nota: Un widget es una aplicación que permite un fácil acceso a una funcionalidad o elemento determinado.

Personalizar widgets
Banner imagen de portada

«Banner» hace referencia, aquí, a la imagen de portada.

Call to action o llamada a la acción

Ubicaciones de los «Widgets».

Las diferentes opciones de «Widgets» hacen referencia a las distintas ubicaciones que pueden tener los mismos.

En «Banner» tenemos que subir una imagen de portada que sustituya a la que aparece por defecto. Lo ideal es redimensionar esa imagen de modo que tenga el mismo tamaño que la que vamos a sustituir.

Sustituir la imagen de portada del tema

Clicamos en «Añadir Widget», seleccionamos «Imagen», subimos la imagen que queramos y, si es necesario, la editamos para elegir el tamaño indicado.

Editar imagen de portada

Instrucciones detalladas para subir y editar imágenes aquí:  Imágenes en WP ⏎

Ocultar widget en determinadas paginas
Mostrar widget en determinadas paginas

Ahora bien, como ya hemos indicado, las opciones que establezcamos desde aquí, es decir, desde «Personalizar», van a ser visibles en todas las páginas de nuestra web.

Es por ello que hemos añadido el plugin «Widget Options» porque gracias a él podremos indicar para que páginas dicho widget permanecerá oculto.

Para hacerlo así, sólo tendremos que marcar en «Hide on checked pages» dentro de «Post Types» las páginas en las que queremos excluir el banner.

En nuestro caso queremos que esta imagen de portada a ancho completo aparezca sólamente en nuestra página de inicio.

Por ello marcamos todas las otras páginas y dejamos «Inicio» sin marcar.

 

24  ► Personalizar – Ajustes de Portada

Esta sección repite las opciones de «Ajustes de lectura» del escritorio de WordPress que ya ha sido configurado. Por tanto, podemos saltarnos este paso.

 

25  ► Personalizar – CSS adicional

Aquí podemos añadir código CSS que tiene por objeto crear estilos en nuestros contenidos. En principio, no es necesario añadir ningún CSS a no ser que queramos cambiar alguna característica de los estilos definidos por el tema como tipografía, color, tamaño, etc.

 

CSS adicional diseño wordpress

Si no deseas añadir CSS para configurar el tamaño y tipo de letra puedes escribir en un procesador de texto tipo Office para editar tus textos y luego copias y pegas en el cuadro de texto del widget.

En primer lugar, hemos usado un CSS para definir un estilo diferente en el formulario de contacto.

El tema que usamos, «Pure&Simple», a diferencia de otros, no nos permite elegir la tipografía o el tamaño de las letras. Por ello hemos insertado unas líneas de código para aumentar el tamaño de las mismas ya que las que aparecen por defecto en el cuerpo de texto son demasiado pequeñas.

Aumentar tamaño texto «Call to action»:

#cta p {
margin: 0 auto 1.3rem; font-size: 1.2rem;
line-height: 1.3; }

Aumentar tamaño texto «Featured Top»:

#featured-top-group {
font-size: 1rem; }

Para conocer las opciones de personalización de todas las secciones de «Pure&Simple» puedes visitar este artículo:  Tema Pure&Simple ⏎

      ▶︎  Apariencia General

 

Ya hemos configurado la «Apariencia» general de nuestro sitio web. Sólo hemos añadido unos mínimos contenidos como son: Título, Menú y una Imagen de portada (Banner) para la página de inicio. El resto de contenidos podemos añadirlos bien desde «Apariencia – Personalizar» (incluyendo uno por uno cada widget de texto o imagen) o bien desde el escritorio de WordPress. Haremos ambas cosas, es decir, construiremos desde «Apariencia» y desde el escritorio.

 

Importante: Mientras estamos añadiendo contenido a nuestra web debemos ponerla en «Modo Mantenimiento».

Para ello podemos usar cualquier plugin de mantenimiento como, por ejemplo, «Simple Wp Maintence Mode», que no requiere ninguna configuración. Sólo debemos recordar activarlo o desactivarlo según nos interese.

También podemos hacerlo con el plugin «All in one WP security» en su apartado «Mantenimiento». Aquí puedes ver las instrucciones para su configuración:    All in one WP ⏎

Así es como aparece el sitio web por el momento

Apariencia provisional de la pagina

CON ESTOS 25 PASOS HEMOS CONFORMADO NUESTRA PÁGINA WEB

AHORA SÓLO NOS QUEDA AÑADIR CONTENIDOS

▶︎ AÑADIR CONTENIDOS

➤ Todas las páginas

 Vamos a añadir el contenido que queremos que aparezca en todas las páginas de nuestra web. Por lo tanto, no tendremos que hacer uso de las opciones del plugin «Widget options» para ocultar o mostrar elementos.

Desde«Apariencia – Personalizar» iremos añadiendo widgets de imagen y texto a nuestra página.

 

Ubicación de widgets en portada

En estas imágenes se ven las diferentes ubicaciones de los widgets.

Ubicación de widgets en pagina

1 ⚈ Comenzamos añadiendo un widget de texto en «Call to Action». Para ello vamos a «Personalizar» a la sección «Widgets» y de ahí a «Call to Action».

Nota: «Call to action» es el elemento que aparece, a ancho completo, justo debajo de la imagen de portada.

Añadiendo contenidos en diseño wordpress

Clicamos en «Añadir Widget» y seleccionamos «Texto».

Si deseas un tamaño o una tipografía diferente para el cuerpo de texto, puedes editarlo previamente en un procesador de texto (tipo Office) y luego pegarlo en el cuadro de texto, como ya hemos indicado anteriormente.

Añadiendo contenidos en diseño WP

Añadimos un título y un texto. No olvidemos clicar en «Hecho» y luego en «Publicar».

Nota: No es necesario en este caso ocultar el widget desde «Hide on checked pages» ya que queremos que aparezca en todas las páginas de la web.

Así es como aparece ahora el widget «Call to action» en todas las páginas de la web. 

En vez de un texto se puede optar por una imagen. 

También es posible añadir una imagen más un texto como haremos en otras páginas de la web.

Añadiendo llamada a la acción

Tanto en un texto como en una imagen siempre es posible insertar un enlace desde el editor.

Puedes elegir si deseas que se abra en la misma pestaña o en otra diferente.

Añadir enlace en wordpress
Insertar enlace desde el editor

2 ⚈ Añadimos un texto en «Featured Bottom 1» para que aparezca al final de todas las páginas. Para hacerlo, repetimos los pasos que hemos realizado anteriormente, es decir, clicamos en «Añadir widget», seleccionamos la opción «Texto», incluímos el texto en el cuadro correspondiente, clicamos en «Hecho» y después a «Publicar».

Así es como aparece el texto en todas las páginas de la web. En la parte inferior de la página.

Añadir texto en la parte inferior del sitio web

3 ⚈ Incluimos una galería de 3 imágenes en «Bottom 1» y otra galería de 3 imágenes en «Bottom 2».

Así es como aparecen las galerías de imágenes en todas las páginas de la web. En la parte inferior de la página, justo arriba del pie de página.

Añadir galería de imágenes en el sitio web
➤ Página de Inicio

Vamos a construir nuestra Página de Inicio desde «Apariencia – Personalizar» añadiendo widgets de imagen y texto a nuestra página.

En la Página de Inicio ya habíamos añadido un banner como imagen de portada y lo hemos configurado de modo que aparezca exclusivamente en esa página y no en el resto de ellas. Ahora vamos a añadir otros contenidos.

 

1 ⚈  En «Featured Top 1» hemos incluido primero una imagen, luego un texto, después otra imagen y así sucesivamente. Por el contrario en «Featured Top 2» hemos comenzado por un texto, después una imagen, otra vez un texto, etc. La idea de usar esta disposición, alternando imagen y texto, tiene como objeto dar un aspecto un poco menos rígido a la página y saltarnos, en la medida de lo posible, las limitaciones de estructura que nos impone el tema. En cualquier caso, estos elementos se pueden reordenar para estructurarlos como mejor nos parezca.

No hemos usado «Featured Top 3» ni «Featured Top 4″ porque los elementos se van reduciendo a medida que se añaden para ajustarse al tamaño de la página. Es decir, a mayor número de elementos, más pequeño es el tamaño de los mismos.

Añadiendo imagen

 

Continuamos en «Widgets».

 

Ahora vamos a «Featured Top 1».

 

Clicamos en «Añadir widget» y seleccionamos «Imagen».

Editando imagen
Subiendo archivos a diseño wordpress

Una vez que hayamos subido la imagen, tal vez tengamos que editarla para elegir el tamaño que deseemos. Para ello clicamos en «Editar Imagen» y seleccionamos las nuevas dimensiones pero hemos de tener en cuenta que serán escaladas, es decir, permanecerán proporcionales en altura y anchura.

En «Hide Checked Pages» dentro de «Post Types» no olvidemos desmarcar la página de inicio y marcar el resto. De este modo la nueva imagen sólo aparecerá en la página de inicio pero no en las demás.

Después clicamos en «Hecho» (abajo del cuadro de diálogo) y finalmente a «Publicar».

2 ⚈ Repetimos la operación de insertar textos e imágenes en «Featured Top 1»«Featured Top 2» en la página de inicio. Lo importante es tener siempre en cuenta que tendremos que marcar o desmarcar páginas en «Hide checked pages» o «Show checked pages» para que los elementos se muestren sólo en este página y no en las demás.

3 ⚈ En «Featured Bottom 1» hemos incluido un texto y luego una imagen. No hemos usado aquí «Featured Bottom 2» ni ningún otro «Featured Bottom» porque queríamos que estos elementos tuvieran ancho completo.

 

Añadir imágenes y textos a WordPress
Imagen de anchura completa

 

➤ Página Servicios

1 ⚈ En la página «Servicios» primero hemos incluido un banner, como imagen de portada, tal como hemos hecho anteriormente en la página de Inicio. Recuerda editar la imagen para que se ajuste al tamaño deseado.

Crear una nueva pagina en wordpress

2 ⚈ El resto de esta página la vamos a construir desde el escritorio de WordPress en vez de hacerlo desde la sección de widgets de «Apariencia – Personalizar». 

Desde el escritorio de WordPress disponemos los textos y las imágenes tal como deseemos que figuren en la web. Seleccionamos «Full Width Page» para que la página tenga anchura completa. Finalmente, clicamos en «Actualizar».

Añadir contenidos desde el escritorio de wordpress

 

Para reducir o aumentar el tamaño de la imagen sólo tenemos que estirar o contraer desde los vértices.

Desde el cuadro que aparece arriba de la imagen podemos editarla y alinearla al centro, a la derecha o a la izquierda de la página.

 

Alinear y editar imagen wordpress

Para editar los textos usamos el cuadro superior del escritorio de WordPress.

Podemos alinear el texto al centro, a la derecha o a la izquierda de la página.

Editar textos

En este artículo te explicamos todas las funcionalidades del escritorio de WordPress: Escritorio WP ⏎

➤ Página Tarifas

1 ⚈ Esta página la vamos a construir desde la sección de widgets de «Apariencia – Personalizar». Usaremos 4 imágenes en «Featured Bottom 1» y 4 textos en «Featured Bottom 2».

De esta manera aparecen la primera imagen y el primer texto en la página «Tarifas».

No olvidemos marcar o desmarcar páginas en «Hide checked pages» o «Show checked pages» para que los elementos se muestren sólo en este página y no en las demás.

Insertar imagen y texto
➤ Página Contacto

1 ⚈ Esta página sólo contiene un texto y un formulario de contacto. Ambos los hemos añadido desde el escritorio de WordPress. Para insertar el formulario de contacto hemos usado el plugin «Contact Form 7». Aquí puedes aprender a usarlo: Contact Form 7

▶︎  POSICIONAMIENTO WEB E INDEXACIÓN

Ahora toca evaluar el SEO, es decir la optimización de la web de cara a los motores de búsqueda con el objetivo de mejorar su visibilidad en los resultados orgánicos de los buscadores. E indexar el sitio web para que esos motores de búsqueda rastreen e incluyan la web en su índice. Pero eso ya es otra historia que analizaremos aquí: Indexación ⏎

 

▶︎  RESULTADO

De esta forma tan sencilla hemos creado nuestro sitio web simple pero completo.

Si tienes dudas, por favor, envíanos un comentario y trataremos de ayudarte.

 WEBTOTAL pretende proporcionarte todas las herramientas para que seas tú [email protected] quien aborde la tarea de hacer tu propia página web. Si con todo ello aún encuentras dificultades para llevarla a cabo, podemos ayudarte.

Nuestras Ofertas

Básica

Pago único. Sin cuotas de mantenimiento. Transferimos el dominio y el hosting para que seas tú quien gestiones tu web.

Avanzada

Si necesitas más secciones o debes incluir funcionalidades muy concretas, por favor, solicítanos presupuesto sin ningún compromiso.

Tienda online

Si deseas crear una tienda online y ya dispones del catálogo de productos, puedes solicitarnos presupuesto sin compromiso.

Más información

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada.