Skip to content

2. Edición de Páginas y Entradas

La diferencia entre Paginas y Entradas radica en que las entradas son para noticias, artículos e información ligada a una fecha que podemos clasificar con categorías y etiquetas, mientras que las páginas son información casi perenne y permanecen de forma estática en el tiempo.

2.1 Crear y Editar Paginas

Para poder crear y editar tanto paginas como entradas, utilizaremos el modelo Gutenberg que viene por defecto, sin embargo existen otros métodos como Elementor.

2.1.1 Editar la Pagina Home - Bloque o Section 1

Ahora colocamos el mouse encima de Home y presionamos en Edit con la tecla Ctrl presionada para que abra dicha pagina en una pestaña dieferente en el navegador

Se verá de la siguiente manera:

Vamos a entender los elementos y herramientas de diseño en dicha pagina:

Ahora observemos como modificamos en forma general cada bloque, elementos u objetos de la pagina.

Cada bloque o elementos puede tener hijos y estos a su vez pueden ser padres de otros hijos y asi sucesivamente, lo que quiere decir que los puedo seleccionar y editar o cambiar de forma directa en la pagina o en la vista general del documento como se identifica en la siguiente imagen.

Por ejemplo cambiemos en primer lugar el titulo de la primera imagen:

Ya mencionamos que tenemos dos formas de seleccionarla y luego cambiarla.

Seleccionamos el titulo, luego en los puntos seguidos verticales como se indica en la imagen y elegimos duplicar.

Seleccionamos el segundo elemento duplicado, y cambiamos en H1 por H2 para reducir el titulo, quiere decir que a medida que aumento el H disminuyo el tamaño del titulo y luego hago la alineación del texto en alinear el texto al centro según te indicamos en la flecha en la imagen.

Reemplace el segundo titulo con alguna frase que refuerce el nombre de su empresa o negocio.

Ahora cambiaremos el fondo de la pantalla, para ello seleccionamos la section, realice los pasos que le indica imagen.

Seleccionamos los pasos de las flechas y seleccionamos el archivo de imagen por la que deseamos cambiar.

existen muchas plataformas y paginas de las que se pueden descargar buenas imágenes, fotos, iconos y videos gratuitos, las cuales mencionaremos a continuacion. Adicionalmente también se pueden cambiar las imágenes por la opción de biblioteca de medios, en los cuales puedo subir n numero de imágenes del sitio y lo seleccionamos os de ese medio.

https://icons8.com/icons/set/facebook--static--blue

https://www.flaticon.com/

https://www.freepik.es/

https://www.canva.com/

Es muy fácil utilizarlas, en el caso de Canva, puedes ir a YouTube y estudiar un poco la plataforma, sin embargo mas adelante les mostraré algunos funcionalidades interesantes.

Para mi caso, utilicé https://www.freepik.es/ y busqué con la frase: tecnologia desarrollo

Dando muy buenos resultados en las imágenes mostradas, luego se presiona clic:

Para guardar todo, presione el botón Actualizar en la parte superior derecha.

Cambios generados, presentados a continuación

Nota: También puede tomar fotos con cámaras profesionales o de un dispositivo celular y adicionarlos a un elemento de imagen.

2.1.2 Editar la Pagina Home - Bloque o Section 2

Simplemente se cambia el texto de cada elemento:

2.1.3 Editar la Pagina Home - Bloque o Section 3

Tenemos una Section con tres hijos llamados Section Column,

Y cada Section Column tiene cuatros hijos

  • Un Icono

  • Espacio en blanco

  • Un Encabezado o Titulo

  • Un Párrafo.

Estos elementos de Section Column, se pueden eliminar si solo queremos dos o se pueden duplicar si se quieren mas de tres. En mi caso voy a utilizar cuatro Section Column, por lo cual selecciono el ultimo Column Section, presiono en los puntos suspensivos y selecciono Duplicar.

Ahora puede observar que en lugar de tres column section hay cuatro, en que desee menos, seleccione eliminar, obviamente teniendo el column section seleccionado.

Ahora cambiamos los iconos y los elementos de párrafos y encabezados correspondientes en cada column section.

Para cambiar los iconos por otros que corresponda a lo que queremos representar se procede hacer los siguiente:

Se selecciona el icono que queremos cambiar y se procede según imagen:

Entre las opciones 3 y 4, se combina segun lo que se prefiera, es decir si optamos en la opción 3 por FontAwesome, presenta en la opcion 4 unos iconos.

Y si seleccionamos en la opción 3 themesle Icons presenta otra cantidad de iconos diferentes a los anteriores.

Resultado de cambios

2.1.4 Editar la Pagina Home - Bloque o Section 4

Esta sección no la deseo utilizar por lo cual la borro mediante la siguiente opción.

2.1.5 Editar la Pagina Home - Bloque o Section 5 y 6

Esta sección la utilizaremos para crear nuestro acerca de, que trata de mostrar todo lo que hacemos, teléfonos de contacto por cada dependencia linea de portafolio de servicios, ambiente, infraestructura, equipos, entre otros.

Selecciono la sección 5 y los elementos, para cambiar los elementos correspondientes según la imagen.

Ahora cambiemos el fondo de esta seccion 5.

En la seccion 6, tenemos la siguiente estructura, realice lo pertinente y adapte a sus necesidades.