Documento de actualización de contenidos del sitio web
graphoscc.com
Preparado por Emiliano Rodríguez
Índice de Contenido
1. Estructura de construcción del sitio web
3
2. Entrar al CMS del sitio web.
5
3. Como crear o modificar una página o entrada.
7
Edición simple
9
Edición con el Divi Builder
11
1. Estructura de construcción del sitio web
El contenido del sitio se divide en 8 partes básicas
1. Administración de Wordpress. La administración inherente al CMS (Content Management System) hora, idioma, permisos, estadísticas, conexiones a redes sociales, etc.
2. Administración de páginas y menús. Las paginas son aquellas partes del contenido de un sitio web cuya información no cambia constantemente, ni necesita ser dinámica por no cambiar
constantemente. Casi siempre va liga a las diferentes secciones o páginas del sitio web
3. Administración de entradas. las entradas son la información que se alimenta dinámicamente dentro del sitio y que cambia con una frecuencia alta, como lo pueden ser publicaciones de un blog o noticias.
4. Administración de proyectos. Los proyectos son entradas que conforman un portafolio de trabajos, la única diferencia con las entradas, es la manera en que el sitio permite mostrar un proyecto
gráficamente, lo que permite colocar una sección de portafolio de proyectos dentro del sitio independiente de la sección de noticias, blog o información.
forman una base de datos documental para poder ser usada dentro del sitio web en la publicación de notas o como banners, cabezas de sección, etc.
6. Administración de la Apariencia del sitio. La imagen del sitio y de como es presentado en los distintos navegadores y dispositivos móviles, Temas, CSS, etc.
7. Administración de Plug-ins. Son paquetes adicionales a la instalación predeterminada del CMS que añaden funcionalidad o capacidades al sitio web.
8. Administración de widgets. Estos son unidades de contenido que pueden agregarse o quitarse al sitio web, como pueden ser menús de navegación, calendarios, búsquedas, archivos de notas publicadas, categorías de información, alimentadores de información (instagram, facebook, twitter, etc)
2. Entrar al CMS del sitio web.
Para entrar al sitio de administración del sitio web se debe teclear la dirección:
graphoscc.com/wp-admin ó graphoscc.com/wp-login
en la barra de direcciones del navegador.
Una vez que se ingresa con las claves de acceso, se ingresa al sitio de administración de wordpress para el sitio web. En este lugar se administra el contenido y la apariencia del sitio web,
3. Como crear o modificar una página o entrada.
Dentro del panel de administración del lado izquierdo ingresar a la opción de página.
y la opción de crear una página nueva.
Si queremos editar una página ya creada basta con presionar sobre el nombre de esta, para que se abra la pantalla de edición.
Para crear una página nueva presionamos sobre el botón de añadir nueva, lo que nos abrirá la página de edición.
Para editar las páginas del sitio tenemos 2 opciones de edición, 1. la simple que es la edición por default del CMS, y
2. la edición del tema (Divi builder) con el que fue diseñado el sitio web, que es un método modular de diseño que permite lograr mejores resultados en el modo de presentación del sitio.
Edición simple
Aquí debemos colocar el título de nuestra página
y aquí vaciamos el texto de nuestra página. Arriba del campo donde escribimos nuestro contenido tenemos una serie de herramientas comunes a los editores de texto donde podemos editar nuestro texto con negritas, cursivas, justificaciones, añadir imágenes, videos, archivos, realizar el link a una sitio web o a otra parte del sitio, cambiar el color y el tamaño de la tipografía, etc.
Ademas de estos campos que son relativamente parecidos a un editor de texto o a lo que sería un editor de un correo electrónico, tenemos otros adicionales que nos sirven para darle presentación a la
información que estamos publicando.
El extracto que nos sirve para dar una introducción o resumen sobre nuestra publicación, generalmente para la publicación de páginas informativas no se utiliza porque resume el contenido del sitio cuando queremos en realidad que el usuario vea toda la información de golpe.
El selector de Sharing que solo hace que la información que publicamos aparezcan unos pequeños botones para que la gente que lea comparta en twitter, facebook, linkedin o goolge+.
que se puedan incluir en el artículo.
Por último, los atributos de página, aquí podemos manejar jerarquías, es decir si una página debería ir debajo de otra, las plantillas predeterminadas que harán que la información se muestre de una u otra forma, y el orden en caso de tener varias páginas subordinadas, esto establece que página va primero en la jerarquía.
Una vez que hemos escrito nuestro contenido y le hemos dado formato, podemos revisarlo dando click sobre el botón ver página.
eso nos dará una idea de como se verá la página sobre el diseño que tenga aplicado nuestro sitio web. Así podemos hacer correcciones y ajustes antes de publicar al sitio final.
Aquí igual existen otras opciones que podemos utilizar para:
Guardar como borrador la página que estamos realizando en caso de que no la hayamos terminado y necesitemos dejar de usar el administrador de contenidos.
La visibilidad que queremos que tenga la publicación que acabamos de realizar, que puede ser pública, privada, o protegida con contraseña; y publicar que da las opciones de hacerlo inmediatamente, o de programar una fecha y hora de publicación, lo que nos permite poder programar nuestros contenidos a futuro.
Edición con el Divi Builder
Para hacer esta edición hay que apretar el botón Use Divi Builder El sitio nos presentará esta pantalla.
Para agregar una imagen o un archivo
Se puede hacer directamente desde la venta de edición de texto.
Esto nos llevara a una pantalla donde podremos subir el archivo o imagen que queremos que aparezca en el texto publicado.
Sobre la caja punteada podemos arrastrar el archivo que queremos subir, o bien podemos buscarlo oprimiendo Select files o buscar archivos.
Para colocarlo en la publicación.
Debemos presionar add media o colocar objeto en la pantalla de edición de la publicación o post:
Aparecerá la siguiente pantalla.
Aquí podemos subir una imagen (upload files) o seleccionar una imagen de la biblioteca de imágenes previamente subidas. (media library)
La imagen seleccionada aparecerá con una palomita y un recuadro de color.
Cuando presionemos publicar el post quedará publicado con la imagen o con el archivo.
4. Cómo cambiar la imagen del carrusel o slider.
La primer es ubicar si el carrusel o slider está en una página o una entrada y dirigirse ahí por medio del menú de administración.
Ahí se puede directamente, editar la página, crear una página o entrada nueva y ver las estadísticas del sitio. En este caso presionamos editar página para cambiar la imagen del sitio web.
Cuando lo hacemos nos presenta la siguiente pantalla
Las secciones que aparecen en el divi builder, corresponder directamente con las secciones que vemos en nuestro sitio web.
Los recuadros tienen dos opciones de edición, la primera que son tres rayas una encima de otra es la de
Aquí están los diferentes slides, diapositivas o banners que aparecerán en el home del sitio web.
y las opciones de control del banner (flechas, controles, animación, tiempo de animación, etc)
Para cambiar un slide o banner, hacemos click en la opción de editar del slide, o en Add new slide para agregar un banner al home.
Si hacemos clic en editar aparece esta pantalla
Heading: es el título o texto principal de nuestro Banner
Button text: es el texto que aparecerá en caso de querer un botón
Button URL: es la dirección web a donde nos llevará ese botón al hacer click
Background image position, selecciona la alineación de la imagen de fondo
Background image size, permite seleccionar el ajuste de tamaño de la diapositiva, tiene varias opciones: Default, que ajusta la imagen deformándola para que ocupe todo el espacio del banner; cover, que cubre toda el área del banner; Fit, que ajusta el tamaño sin deformar la imagen hasta que cubre toda el área del banner a lo ancho, y actual size, que muestra toda la imagen sin deformarla ajustándola para que quepa completa dentro del área del banner.
Slide image, es una imagen adicional que se puede cargar encima de la imagen de fondo del banner, generalmente esta se usa para dar un efecto de profundidad con imágenes de fondo transparente. (png) Slide image vertical alignment, es la alineación vertical de la imagen , que puede ser hacia el centro del banner o hacia la parte inferior
Slide video: Al igual que el slide image, per en este caso con un video.
Image alternative text, nombre o texto alternativo para el banner , en caso de que se rompa el link esto aparece en el browser, también ayuda a las personas con capacidades diferentes ya que algunos browsers utilizan este texto para leer en voz alta los contenidos de un sitio web.
text color, que de acuerdo al color del fondo puede ser claro u obscuro.
Background video width: es la medida del ancho del video para que no se vea deformada en el banner Background video height: es la medida de la altura del video para que no se vea deformada en el banner Pause video, esta opción permite que el video realice una pausa en caso de activarse otro player.
Admin label, es el nombre que se le quiere dar a la sección en el administrador de WP, esto solo tiene propósitos de identificación y de organización.
Por último el botón save en verde, lo que nos permite guardar los cambios que realicemos dentro de cualquier sección de administración de contenidos.
Una vez que hemos realizado los cambios y salvado, el sito nos regresa a la pantalla de administración del banner.
Aquí podemos salvar y salir, ver un preview de nuestros cambios antes de publicarlos, y/o salvar y añadir a una librería de contenidos de nuestro sitio en caso de que vayamos a usar otra vez la misma