Hablamos de Joomla!

Cómo crear artículos en Joomla y editar los contenidos de tu web

Cómo crear artículos en Joomla y editar los contenidos de tu web

Introducción

Uno de las grandes dudas que nos plantean algunos de nuestros clientes es, si serán capaces de mantener ellos mismos los contenidos de su web, una vez que esta esté puesta en línea y se le entregue. Pues bien, nuestra respuesta siempre es "SÍ".

En este artículo te vamos a mostrar paso a paso como puedes modificar los artículos creados con el gestor de artículos de Joomla!. Aprenderás cómo editar texto existente, incorporar nuevo texto, añadir imágenes, dar formato a listas, resaltar texto, crear enlaces, y mucho más.

Paso previo, prepara tus textos e imágenes con antelación

Mantener actualizados los contenidos de tu web es una tarea muy sencilla. Solo necesitas estar habituado a algún procesador de textos, por ejemplo Microsoft Word, y a un editor de imágenes.

Con estas herramientas, debes elaborar con antelación tanto los textos como el material gráfico que quieras incorporar a la web. Escribe tus textos en cualquier editor que te sea cómodo, y luego solo tendrás que copiar y pegar en su lugar de destino.

Si la preparación de las imágenes te resulta un problema, puedes consultar nuestro artículo «Cómo optimizar las imágenes para tu web y mejorar el rendimiento», en el que te detallamos algunos recursos online que te harán más sencillo este paso.

Acceso y navegación

Una vez tengas preparado el material, llega el momento de entrar al panel de control de tu web para incorporar estos nuevos contenidos. Hay dos formas de acceder: desde el lado de administración o "backend", y desde la parte pública o "frontend". A continuación te explicamos ambas opciones:

  • Acceso Backend:
    • Teclea "https://midominio.es/administrator" en tu navegador habitual y accede con los datos que tu desarrollador web te haya facilitado.

  • Acceso Frontend:
    • Busca el botón o enlace de acceso e introduce los datos que tu desarrollador web te haya entregado para esta área de edición.

Tipos de acceso para la edición de articulos Joomla

Ten en cuenta que ambos accesos son distintos, y por tanto pueden tener diferentes permisos para entrar por uno u otro lado. En caso de duda consulta con tu desarrollador.

Una vez hayas accedido, tendrás que navegar para localizar la página donde quieres realizar las modificaciones.

Si están en el backend, ve a Menú > Contenidos > Artículos y aquí busca directamente el artículo que deseas modificar (utiliza las herramientas de búsqueda) o haz clic en el botón "Nuevo".

edicion articulos joomla desde backend

Si estás en el frontend, navega hasta la página que deseas modificar y encontrarás el botón "editar". Si lo que quieres es crear un nuevo artículo, entonces tu desarrollador debe haber dejado un enlace preparado desde alguno de los menús de tu web a tal efecto. En caso de duda, consulta con tu desarrollador.

boton edicion articulos joomla desde frontend

Reconociendo el área de edición

A partir de ahora vamos a dirigir todas las explicaciones a un Nuevo Artículo desde el backend. Esta formación es la base de la edición de cualquier artículo. Te va a servir tanto para modificar un artículo ya existente en el backend, como para editarlo o crearlo desde el frontend, ya que sus áreas de edición son muy similares.

Hecha esta aclaración, avanzamos un poco más pasamos a la pantalla de Nuevo Artículo, que contiene opciones para clasificar y nombrar el artículo, editar su contenido y seleccionar diferentes parámetros.

Observa a continuación en la siguiente imagen los diversos botones, campos y pestañas de la parte superior, la central con el área de edición propiamente dicho, y los botones y desplegables de la zona derecha.

pantalla nuevo articulo joomla

Te explicamos cómo debes proceder en cada uno de estos parámetros:

  1. Introduce un título en el campo Título. Esto se usa cuando se muestra el título del artículo. (Requerido)
  2. Introduce un alias en el campo Alias. El alias se usa para referirse al título y es importante para las URLs Amigables con los Buscadores. Si no introduces nada, Joomla! lo generará para ti.
  3. En la pestaña Contenido:
    • Introduce tu contenido usando el editor. En la sección "Insertar contenido en el editor y dar forma a tu texto" te lo explicamos con detalle.
    • Selecciona el Estado: Publicado, No publicado, Archivado o Papelera.
    • Selecciona una Categoría usando los menús desplegables. (Requerido)
    • Selecciona la configuración Destacado, para mostrar o no el artículo en la página de inicio.
    • Acceso: Público, Registrado, Súper Usuarios, etc. Por lo general, aquí no debes tocar nada, salvo que quieras hacer algún contenido accesible solo a usuarios registrados.
    • Selecciona el Idioma al que está asignado el artículo, solo si tu web está en varios idiomas, sino déjalo como está.
    • Puedes agregar Etiquetas a tu artículo. Para crear etiquetas separadas, presione Intro después de introducir cada palabra clave individual.
    • También puedes agregar una Nota de versión a tu artículo.
  4. En la pestaña Imágenes y enlaces:
    • Introduce la Imagen de introducción, es la que aparecerá en tu listado de artículos como presentación del mismo.
    • Introduce la Imagen de cabecera del artículo, es la que aparecerá en la vista completa de tu artículo en la parte superior.
    • Puedes seleccionar las imágenes desde tu servidor (previamente subidas con el gestor Multimedia o por FTP), o bien subirlas desde tu ordenador.
    • Es recomendable rellenar el Texto alternativo y el Subtítulo, a fin de hacer tu web más accesible a personas con cierta discapacidad.
    • En la parte de Enlaces por ahora no debes hacer nada.
  5. En la pestaña Opciones:
    • Todos los parámetros que aparecen en esta pestaña se refieren únicamente al artículo en cuestión. Lo normal es configurar esta parte desde el elemento de menú, por lo que nuestra recomendación es no tocar aquí nada, salvo que quieras hacer una salvedad para un artículo en concreto. Consulta con tu desarrollador si tienes dudas.
  6. En la pestaña Publicación:
    • Los campos relacionados con las fechas son personalizables. Puedes modificarlas a tu gusto para iniciar o finalizar una publicación en determinadas fechas, o para modificar la fecha de creación.
    • Introduce en la Metadescripción el párrafo que sirva de introducción a cada artículo, visible a las arañas de los motores de búsqueda, y que sirva para captar la atención de los usuarios que encuentran este artículo a través de sus búsquedas.
    • Introduce las Metapalabras clave que consideres oportunas.
    • El resto de campos puedes dejarlos como están.
  7. En las pestañas de Opciones de la pantalla de edición y Permisos, no toques nada.
  8. Para guardar tu artículo:
    • Haz clic en el botón Guardar de la barra de herramientas para guardar tus cambios, pero seguir en la pantalla de edición del Artículo.
    • Haz clic en el botón Guardar y Cerrar de la barra de herramientas para guardar los cambios y volver a la pantalla del Gestor de Artículos.
    • Haz clic en el botón Guardar y Nuevo de la barra de herramientas para guardar tus cambios y crear un nuevo artículo.
    • Haz clic en el botón Guardar como copia de la barra de herramientas para guardar los cambios en un articulo duplicado del original y seguir en la pantalla de edición del Artículo.
    • Haz clic en en botón Cerrar de la barra de herramientas para cerrar sin guardar los cambios y volver a la pantalla del Gestor de Artículos.
  9. Un mensaje verde indicará que el artículo se ha guardado correctamente.
    • Si no has completado los campos Título de Artículo o Categoría, aparecerá un mensaje de error rojo que indica la información que falta.

Insertar contenido sin formato en el editor

A la hora de crear el contenido de un artículo, no te recomendamos que te pongas a redactarlo directamente desde el editor de tu web. Lo más aconsejable es, como te adelantamos al principio de este artículo, que lo hagas a través de un editor tipo Word o similar, donde puedas revisar su ortografía y realizar los cambios que precise hasta que obtengas el texto final.

Dicho esto, una vez tengas listo tu texto, vamos a explicarte cómo colocarlo dentro de tu artículo.

Si no lo sabes, detrás de los contenidos web que ves a través de un navegador hay código. Cuando pegas fragmentos de texto desde tu editor al de artículos Joomla!, es posible que queden incrustados en el código tipos de formato del editor de origen. El resultado esto se traduce en que cuando guardes y visualices tu nuevo contenido, vas a descubrir que aparecen tipografías, tamaños de letra, colores u otros formatos no esperados, que nada tienen que ver con la identidad de tu web.

A fin de evitar que añadas un texto con datos ocultos, te vamos a dar tres recomendaciones, para que elijas la que mejor se adapte a ti:

  1. Si sabes algo de HTML, puedes pegar los datos pulsando la pestaña "Code"o en el icono de edición HTML que tenga el editor de tu web, y después hacer una limpieza manual.
  2. Pega los datos en un blog de notas como paso intermedio entre tu editor y el de Joomla! Vuelves a seleccionar todo el texto, lo copias y al pegarlo en el editor de Joomla! Ya lo tendrás totalmente limpio.
  3. Utiliza la herramienta de limpieza de código del editor, que te permite eliminar el formato de los datos que hayas pegado. Selecciona el texto y haz clic en el botón de formatear texto y/o limpizar HTML.
edicion articulos joomla pegar limpiar texto

En las webs de nuestros clientes solemos instalar el Editor JCE, más potente que el que trae Joomla! de forma nativa. Este componente, por lo general, ya limpia los datos que pegas en el editor de manera automática, más si lo haces a través de botón "Paste as plain text" situado en su caja de herramientas. También incorpora un botón de borrado de formato y limpieza de HTML que te puede resultar útil.

Cuida la jerarquía de títulos y subtítulos

Una vez tengas ya tu contenido pegado en el editor, debes tener en cuenta que es muy importante realizar una estructuración de forma adecuada. Para ello, divide el contenido en párrafos o grupos de párrafos y después asígnales títulos y subtítulos.

Este paso es importante que lo tengas muy en cuenta si deseas tener unos titulares que posicionen bien tus artículos. En el desplegable "Format" vas a ver que tienes hasta 6 tipos de títulos o "headings" en inglés. Su relevancia va en función del tamaño de letra, es decir, el H1 es el más relevante y por lo general es el título de tu artículo, después está el H2 que se suele asignar al título de tu blog o sección. Y a partir de aquí tienes del H3 al H6 para crear la jerarquía de títulos de tu artículo.

edicion articulos joomla headings

Algo que debes recordar y poner en práctica en todos tus contenidos, es cuidar siempre que te sea posible el orden de jerarquía de los titulares. Es decir, si creas una sección con un título H3, y dentro de ella tienes por ejemplo dos sub-secciones del mismo nivel, sus subtítulos deben ser H4.

Si quieres tener bien controlada la jerarquía de los "headings" de tu web, te recomendamos utilizar la extensión Headings Map, disponible tanto para Chrome como para Firefox.

En la siguiente imagen puedes ver cómo hemos estructurado de forma correcta unos párrafos y sus títulos.

edicion articulos joomla estructura titulos

Nota: Una página de tu web solo debe contener un H1. El resto de headings se pueden utilizar de forma repetida dentro de un artículo, pero siempre es recomendable respetar la jerarquía de niveles de la que te hemos hablado.

Dar formato al texto acorde a los estilos de tu web

A la hora de dar formato a tus contenidos, es de suma importancia mantener siempre el estilo propio de tu web y de tu identidad corporativa. Porque nada hay más negativo para una imagen de marca que tu web aparezca todo desordenado, con multitud de tipos y tamaños de letra diferentes, colorido estridente o sin relación con los colores de tu marca, etc.

Pues bien, en el editor de artículos tienes a tu disposición muchas posibilidades con las que dar formato a tus textos. Estas opciones han sido configuradas en la fase de desarrollo de tu web en la plantilla en uso, por lo que al aplicar estos estilos, tus contenidos van a resultar de manera automática formateados, y siempre guardarán la línea estética de tu marca.

Cualquier editor tiene los estilos más habituales: negrita, cursiva, subrayado, tachado, subíndice y superíndice. Estos botones se muestran de manera muy intuitiva en la caja de herramientas del editor, por lo que no te resultará difícil identificarlos. Usa los estilos que quieras para dar formato a tus textos, y resaltar todo aquello que desees dar mayor visibilidad.

edicion articulos joomla estilos basicos

Alineaciones y sangrías

Las Alineaciones y las Sangrías son otros elementos con los que también puedes dar formato a tu contenido.

La configuración de la alineación de texto suele definirse por defecto en todos nuestros desarrollos web a la izquierda, salvo que nuestros clientes nos indiquen otra cosa. Si este es tu caso, y es lo que deseas, cuando edites tus textos debes tener en cuenta que no es necesario que utilices el botón de alinear a la izquierda, y si desconoces el tipo de alineación que tiene tu web por defecto, consulta a tu desarrollador antes de proceder a alinear por tu cuenta tus contenidos.

Alinear los textos de forma manual solo es recomendable si deseas crear una alineación específica a una parte concreta de texto, bajo alguna circunstancia especial, pero nunca como forma habitual.

En la actualidad, lo más recomendable en web es alinear a la izquierda y no de forma justificada (alineado a la vez por el lado izquierdo y derecho). A pesar de que a algunas personas les gusta ver un texto justificado, estudios realizados han demostrado que la alineación a la izquierda es la más sencilla de leer. Además, para pantallas pequeñas como sucede en los móviles, los textos justificados muchas veces dejan espacios en blanco desproporcionados entre palabras, lo que dificulta la lectura, además de resultar poco estético.

edicion articulos joomla alineaciones

En cuanto a las Sangrías, los dos botones que te señalamos en la imagen siguiente te servirán para desplazar el texto un nivel hacia la derecha, o hacia la izquierda, por cada "clic" que le des.

edicion articulos joomla sangrias

Crear y editar listas

Puedes crear listas ordenadas (numeradas) y desordenadas usando los botones Lista ordenada y Lista desordenada en la barra de herramientas del editor.

Se puede crear una lista usando el tipo de lista predeterminado, o eligiendo un tipo de la lista desplegable.

Para crear una lista, escribe o selecciona el texto para que sea el primer elemento de la lista. Haz clic en el botón de lista requerido (Ordenado o Desordenado) o selecciona el tipo de lista en el menú desplegable.

Para crear el siguiente elemento de la lista, presiona la tecla Intro. Si presionas la tecla Intro cuando un elemento de la lista está vacío, el cursor se moverá fuera de la lista.

edicion articulos joomla crear editar listas

Para eliminar un elemento de la lista, presiona la tecla Retroceso hasta que se elimine el elemento. Si presionas el botón de lista en un elemento de la lista, se eliminará el elemento de la lista.

Una lista se puede convertir de Ordenada a Desordenada (y viceversa) o de un tipo a otro, haciendo clic en el botón de lista requerido o seleccionando el tipo de lista requerido.

Insertar enlaces externos e internos

El cuadro de diálogo de Enlace se utiliza para insertar y editar enlaces en una selección de contenido, como texto (una palabra, frases o párrafos completos) o una imagen. Además, incluye un navegador de enlaces único que facilita la creación de un enlace a: un elemento de contenido, una sección, una categoría, un contacto, un enlace web o un elemento de menú en tu sitio web. También tiene funciones para crear enlaces de direcciones de correo electrónico, anclas y un conjunto completo de campos para insertar opciones avanzadas.

Cuando necesites crear un enlace externo a una frase o una palabra del texto, procede de la siguiente manera:

  1. Selecciona algún texto, una imagen o algún otro elemento en el artículo para crear el enlace, o coloca el cursor en el artículo donde desea que se inserte el enlace.
  2. Haz clic en el icono de "Enlace" (icon link) de la caja de herramientas del editor.
  3. En "URL" introduce la url de destino y "Texto" debe mostrar el texto que previamente has seleccionado para el enlace.
  4. Introduce un título para el enlace en el campo "Título "(opcional).
  5. Después despliega el campo "Target" y selecciona "Open in new window" cuando tu enlace no pertenezca a tu web, sino que sea un enlace externo.
  6. Haz clic en "Insertar" (botón azul).

Mira el siguiente vídeo para entenderlo mejor:

Para crear un enlace interno, tienes que acceder a las carpetas que te permiten localizar contenidos existente (Contacts, Content, Menu o Tags). Veamos cómo:

  1. Selecciona algún texto, una imagen o algún otro elemento en el artículo para crear el enlace, o coloca el cursor en el artículo donde desea que se inserte el enlace.
  2. Haz clic en el icono de "Enlace" (icon link) de la caja de herramientas del editor.
  3. Si el elemento seleccionado es una selección de texto, el texto se podrá editar en el campo "Texto". Si la selección es un elemento que vincula una imagen, el campo "Texto" se desactivará con la etiqueta "Selección de elemento". Si no se realizó ninguna selección, escribe algo de texto en el cuadro de texto.
  4. Busca el elemento de contenido al que deseas vincular mediante el árbol de carpetas. Si se trata de una página de tu web que está enlazado mediante un elemento de menú, busca en la carpeta "Menu", y si es un artículo de tu blog o que no está en ningún menú, busca mejor en la carpeta "Content".
  5. Introduce un título para el enlace en el campo Título (opcional).
  6. Después despliega el campo "Target" y selecciona una opción (para enlaces internos recomendamos seleccionar la opción "Open in current window").
  7. Haz clic en "Insertar" (botón azul).

Mira el siguiente vídeo para entenderlo mejor:

Insertar imágenes

Como ya te adelantábamos al principio de este tutorial, contamos con que al llegar aquí ya tienes tus imágenes optimizadas y listas en tu servidor.

Con el Image Manager del editor JCE vas a poder realizar con sencillez:

  • Subir imágenes.
  • Crear carpetas.
  • Cambiar el nombre, cortar, copiar, pegar y eliminar carpetas e imágenes.
  • Insertar imágenes en artículos.

Para insertar una imagen entre párrafos de tu texto, procede de la siguiente manera:

  1. Selecciona la imagen en el Explorador de archivos haciendo clic en su nombre. Los campos "URL", "Texto alternativo" y "Dimensiones" se actualizarán con las propiedades de las imágenes.
  2. Ajusta las propiedades de la imagen según sea necesario.
  3. Haga clic en el botón "Insertar" en la parte inferior del cuadro de diálogo.

En el siguiente vídeo puedes ver cómo hemos colocado una imagen al principio y a la izquierda del texto, y otra en medio de dos párrafos y centrada. Ambas van a tener un sencillo borde de color gris, la delimitación de márgenes necesarios y sus etiquetas "Texto alternativo". Además, como una es algo grande porque también se utiliza en otra sección de la web, la vamos a redimensionar directamente con el Image Manager.

URL: el campo URL representa el atributo src de la imagen y es la ruta relativa a la imagen en el servidor.

Texto alternativo: esto representa el atributo "alt" y define una breve descripción de la imagen.

Dimensiones: el ancho y alto de la imagen, en píxeles. Si la casilla de verificación proporcional está marcada, los cambios en un valor se verán afectados automáticamente en el otro. De forma predeterminada, se insertará una imagen sin ancho ni alto, a menos que se editen los valores originales.

Margen: representa la cantidad de espacio (en píxeles) entre la imagen y los elementos circundantes. Si la casilla "Igualar" está marcada, todas las posiciones de los márgenes usarán el mismo valor.

Alineación: la posición de la imagen en relación con el texto circundante.

Bordes: crea un estilo de borde en la imagen con opciones de ancho, estilo y color. Ten cuidado de mantener los estilos de tu marca.

Insertar "leer más"

Este tipo de función solo es visible para la vista de una categoría en formato blog, es decir, en la típica página de blog donde ves los últimos artículos publicados con su imagen en miniatura, su título y a veces un pequeño párrafo de introducción, para acabar con un botón "Leer más" o similar. En la vista de un artículo completo no son visibles.

El uso de la función Leer más...:

  1. Coloca el cursor de edición en el lugar del texto donde deseas que aparezca el mensaje "Leer más...".
  2. Has clic en el botón Leer más botón debajo del cuadro de texto o en el botón de la barra del editor. La etiqueta del mensaje "Leer más...", se inserta.
  3. La etiqueta del mensaje "Leer más..." puede ser seleccionado, y movido o eliminado.
  • Pilar Dávila Consultora de Estrategias Digital y Fundadora de Davelia Agencia de Marketing Digital. Ayudo a negocios como el tuyo, a digitalizarse y mejorar su presencia online para que conectan con su audiencia, y que les hagan conseguir más clientes y más ventas.

Comentarios gracias a CComment

Davelia and this site is not affiliated with or endorsed by The Joomla! Project™. Any products and services provided through this site are not supported or warrantied by The Joomla! Project or Open Source Matters, Inc. Use of the Joomla!® name, symbol, logo and related trademarks is permitted under a limited license granted by Open Source Matters, Inc.

logo davelia diseño web creativo