Documento de actualización de contenidos del sitio web graphoscc.com

Transcripción

1 Documento de actualización de contenidos del sitio web graphoscc.com Preparado por Emiliano Rodríguez Documento de actualización de de sitio web. v3.0 para Wordpress con template Divi

2 Índice de Contenido 1. Estructura de construcción del sitio web 3 2. Entrar al CMS del sitio web Como crear o modificar una página o entrada. 7 Edición simple 9 Edición con el Divi Builder 11 Para agregar una imagen o un archivo Cómo cambiar la imagen del carrusel o slider. 17 2

3 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. 5. Administración de medios. Son todos los archivos documentales que se quieran subir al sitio web como fotografías, videos, audios, documentos, archivos comprimidos, etc, y que en su conjunto 3

4 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) Para efectos de este documento solo contendrá la administración de contenido de páginas, entradas y medios. 4

5 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. Cuando se carga la dirección en el navegador, aparece la siguiente pantalla, ahí se solicita las claves de acceso al sitio web. 5

6 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, El contenido del sitio se maneja de manera independiente a como se presenta por lo que se puede actualizar la presentación de modo rápido y fácil, al igual que se puede trabajar dinámicamente con el contenido en tiempo real. 6

7 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. Cuando el navegador carga la información veremos esta pantalla. Aquí está las páginas que actualmente tiene el sitio 7

8 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 o crear una entrada (blog) tenemos que seguir los mismo pasos que para una página pero dentro de la sección entradas 8

9 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+. Imagen destacada. Esta es importante porque dará a la página o post una imagen introductoria al estilo de una revista o periódico, esta imagen asignada a la página o artículo, es independiente de las imágenes 9

10 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. Para publicar la información solo se hace click en publicar o actualizar dependiendo de que sea lo que estemos realizando. 10

11 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. Divi builder esta basado en un diseño modular acomodado secciones que su vez tienen filas y columnas de información. Cada sección puede dividirse en columnas. Esta funcionalidad será explica más a detalle más adelante. 11

12 Para agregar una imagen o un archivo Se puede hacer directamente desde la venta de edición de texto. o en el menú de wp. 12

13 Esto nos llevara a una pantalla donde podremos subir el archivo o imagen que queremos que aparezca en el texto publicado. Al seleccionar que queremos subir un archivo nos desplegará la siguiente ventana. 13

14 Sobre la caja punteada podemos arrastrar el archivo que queremos subir, o bien podemos buscarlo oprimiendo Select files o buscar archivos. Una vez que selecciones el archivo y termine de subir correctamente aparecerá aquí. 14

15 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. Para insertarla en la publicación solo debemos seleccionar y presionar insert into post. 15

16 Cuando la insertemos la imagen aparecerá en la pantalla de edición del post, ya sea como imagen o como texto dependiendo de la forma en la que estemos editando el texto. 16

17 Cuando presionemos publicar el post quedará publicado con la imagen o con el archivo. 4. Cómo cambiar la imagen del carrusel o slider. Para cambiar la imagen del carrusel del sitio haya que haber ingresado a la administración del sistema. Existe dos formas de hacerlo. 17

18 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. o una vez que se ha ingresado al sitio web, en la parte superior del sitio aparecerá una sección de administración. 18

19 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. La sección en este caso se llama Banner Home 19

20 Los recuadros tienen dos opciones de edición, la primera que son tres rayas una encima de otra es la de editar. La segunda que parece una venta superpuesta a otra es la opción de duplicar. Al presionar editar aparece la siguiente pantalla. 20

21 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: es la imagen de fondo que queremos que tenga nuestro banner 21

22 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. Background color, en caso de no tener una imagen se muestra este color de fondo. 22

23 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 MP4 y WEBM, estas opciones permiten colocar un video como fondo del banner en lugar de una imagen, MP4 y WebM son dos formatos que permiten que esta opción se vea en la mayoría de los navegadores. En caso de usar un video de fondo, es muy recomendable usar también una imagen, ya que los navegadores móviles, no puede ver esta funcionalidad, por lo que aparecería la imagen de fondo como alternativa. 23

24 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. Content, si queremos que aparezca más información dentro del banner, aquí la podemos colocar y editar de manera básica. 24

25 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 configuración de banner o cambios en otra parte del sitio. 25

26 IMPORTANTE: todos los cambios realizado en cualquier sección del administrador además de ser salvados dentro de la propia sección, para que se publiquen tendrán que ser publicados en el administrador de wordpress, en caso contrario se perderán. 26