Índice de contenidos

  • Páginas
    • Creación y edición de páginas
      • Enlaces permanentes (URL)
      • Atributos de la página
      • Opciones de la cabecera de la página
      • Opciones de CTA a pie de página
      • Yoast SEO
    • Bloques de página
    • Bloques de página reutilizables
    • Editor de contenidos (WYSIWYG)
    • Estilos de contenido
    • Tablas
  • Tipos de entradas personalizadas
    • Productos
    • Entradas del blog (Color Science Essentials)
    • Historias de clientes**
    • Cursos**
    • Eventos**
    • Preguntas frecuentes**
    • Comunicados de prensa**
    • Biografías de los equipos**
    • Localizaciones**
  • Biblioteca de medios de comunicación
  • Menús
    • Edición de menús
    • Menú de redes sociales
    • Mega Menú**
    • Menú de Soluciones Empresariales vs. Menú del Sitio de la Empresa**

Páginas

Creación y edición de páginas

Para crear una nueva página, vaya a Páginas > Añadir nueva Para editar una página existente, vaya a: Páginas > busque la página que desea editar > Editar

  • Introduzca un título en el campo que dice “Añadir título”.
    • Este será el H1 de su página.
  • Al hacer clic en el icono del engranaje de la esquina superior derecha se abrirán los ajustes del documento. Desde aquí, puede actualizar la URL y los atributos de la página.
  • Permalink – Aquí puede actualizar la URL de la página. Nota: Al guardar el borrador o publicar la página se generará automáticamente una URL basada en lo que se introduzca en el campo del título. Si desea cambiar o ajustar esta URL, puede hacerlo en la sección “Permalink”.
  • Atributos de la página – Aquí es donde puede asignar una página madre.
    • Si asigna una página a una página padre, cambiará la estructura de la URL de la página.
    • Si la “página nueva” se asigna a la “página antigua”, su URL cambiará a página antigua/página nueva.
    • Puede establecer el orden de las páginas en la navegación visual en Apariencia > Menús. (indicaciones más abajo)
  • Opciones de la cabecera de la página – Desplácese al final de la página hasta la sección “Banner”, donde debería ver las opciones para los siguientes campos:
      • Anulación del H1 (que anula el H1 establecido en el título de la página)
      • Copia del párrafo de introducción
      • Imagen del héroe
      • Enlace CTA
  • Opciones de CTA a pie de página – Desplácese hasta el final de la página hasta la sección “CTA a nivel de página”.
    • Aquí, debería ver las siguientes opciones:
      • Mostrar CTA global (muestra la CTA global que se edita en Opciones > CTA global)
      • Ocultar (para páginas que no deben mostrar ningún CTA a pie de página)
      • Sobrescribir (Lo que le permitirá especificar un CTA de pie de página único para esa página en particular)
  • Yoast SEO – Desplácese hasta el final de la página hasta la sección “Yoast SEO”. Aquí debería ver las opciones para editar el título SEO y la meta descripción.
    • Añade un título y una meta descripción específicos para la página.
    • Utiliza la pestaña de compartir en redes sociales en Yoast para establecer contenido específico para Facebook y Twitter.
    • También puede ocultar páginas del mapa del sitio y de la búsqueda de Google:
      • Vaya a la pestaña “Configuración avanzada” en Yoast.
      • Seleccione la configuración No (Index) y No (Follow) ocultará las páginas del mapa del sitio y de la búsqueda de Google

Bloques de página

Una vez que su página está configurada, puede empezar a construir su página con bloques de página.

  • Haga clic en el icono negro + debajo del título de la página.
  • Aquí, debería ver algunas opciones para elegir los bloques de la página para agregar a la página. Puede elegir entre estos 6 bloques de página utilizados más recientemente o seleccionar “Examinar todo” para ver todas las opciones de bloques de página.
  • Añada el estilo de bloque de página que desee.
  • Cada bloque de página tendrá diferentes opciones en función del estilo que sea.
  • En la pestaña de ajustes:
    • Editar la configuración de ese bloque de página en particular
    • La configuración variará en función del tipo de bloque de páginas que haya elegido. Normalmente, los ajustes aquí incluirán el color de fondo, las opciones de columna y las opciones de estilo de diseño.
  • En la pestaña de contenido:
    • Añada el contenido correspondiente.
    • Al igual que la pestaña de configuración, el diseño de la pestaña de contenido variará en función del estilo de bloque de página que haya elegido.
  • Puedes cambiar el orden de los bloques de la página con los iconos ∧ y ∨.

Bloques de página reutilizables

Para ciertos bloques de la página, como un CTA en el pie de página, es posible que desee crear un bloque reutilizable. Un bloque reutilizable es un bloque individual que se puede añadir a varias páginas con el mismo contenido en todas las instancias. Si se actualiza un bloque reutilizable en una ubicación, se actualizará en todas partes.

Para crear un bloque reutilizable:

  • Ir a: Gutenblocks > Bloques reutilizables > Añadir nuevo
  • Serás llevado a un editor de gutenberg donde puedes añadir y construir un bloque reutilizable, como lo harías con cualquier otro bloque
  • Una vez que el contenido esté dispuesto de la manera deseada, asigne un nombre al bloque
  • Publicar el bloque

Para añadir un bloque reutilizable a una página:

  • Vaya a la página en la que desea que se encuentre el bloque reutilizable
  • Haga clic en el icono naranja + de la esquina superior izquierda, igual que para introducir un bloque normal
  • Pase a la pestaña “Reutilizable”.
  • Seleccione el bloque que desea añadir.
  • Observará que el bloque reutilizable tiene un borde amarillo brillante alrededor y un mensaje de advertencia. Esto es sólo para recordarle que el bloque es un bloque reutilizable y podría existir en otra parte del sitio.

Editor de contenidos (WYSIWYG)

Introducción de contenidos en el editor de contenidos:

  • Puede escribir el contenido directamente en el editor WYSIWYG o copiar/pegar desde un procesador de textos.
  • Si está copiando y pegando contenidos, utilice siempre el botón “Borrar formato” después de pegar. También puedes “pegar como texto plano”.
  • Utilice el botón “Caracteres especiales” (Ω) para sustituir cualquier carácter especial del contenido pegado. Si no, la codificación puede ser diferente.

Estilos de contenido

Para obtener más información sobre todos los estilos de contenido posibles para su sitio, visite la página de estilos de contenido.

  • Estilos de cabecera
    • Los diferentes estilos de cabecera están precargados en el menú desplegable “Párrafo” y están etiquetados (Cabecera 1, Cabecera 2, etc.)
    • No tendrá que seleccionar nunca el h1, ya que el nombre de la página o el título se creará automáticamente el h1 para esta página.
    • Resalte el texto y luego seleccione el estilo de cabecera deseado.
  • Estilos de formato
    • En el menú desplegable “Formatos” están precargados diferentes estilos de formato.
    • Añada el estilo del texto de introducción resaltando el texto y seleccionando “Texto de introducción” en el menú desplegable.
    • Convierta los enlaces en botones resaltando el texto del enlace y seleccionando “Botón” o “Botón secundario” en el desplegable.

Tablas

Las tablas se utilizan en muchos lugares del sitio. Tiene tres opciones para crear tablas, en función de la ubicación:

  • Tablas WYSIWYG
  • Tablas de TablePress
  • Mesa Gutenburg Mesas de bloque

Nota: Todas las mesas deben recibir el mismo estilo. Puede utilizar los códigos cortos y para conseguir los símbolos de la marca de verificación y la X para los gráficos de comparación.

Las tablas WYSIWYG son las que hemos utilizado en las páginas de detalles de los productos. Estos pueden ser creados en cualquier WYSIWYG del sitio. Ejemplo en esta página.

  • En el WYSIWYG, seleccione el icono de la tabla en el editor.
  • Seleccione el número de columnas y filas que desea.
  • Introduzca su contenido en cada campo/celda de la tabla
  • Estilizar el contenido en consecuencia
  • Para obtener un fondo rojo en una fila, tendrá que asignarla como fila de cabecera. Para ello:
    • Coloque el cursor en una de las celdas de la fila de la cabecera
    • A continuación, vaya a la tabla > Fila > Propiedades de la fila de la tabla en el menú WYSIWYG de la parte superior
    • Entonces debería ver una opción para asignar el tipo de fila como “cabecera”
  • Si necesita asignar un color de fondo diferente (como un fondo gris para los subtítulos de las tablas):
    • Resalte las celdas de la fila que desea actualizar
    • A continuación, para ir Tabla > Fila > Propiedades de la fila de la tabla > Avanzado
    • Actualizar el color de fondo desde la herramienta de selección de color

Tablas de TablePress

  • Las tablas de TablePress pueden utilizarse en lugar de las tablas WYSIWYG. Esta sería una buena herramienta para las tablas que son particularmente complejas.
  • Para crear una nueva tabla de TablePress, vaya a TablePress > Add New Table
  • Construya la tabla como de costumbre (esto heredará el estilo de la tabla del sitio)
  • Una vez construida la tabla, toma el shortcode del campo “Shortcode” en la parte superior y colócalo en el WYSIWYG donde quieres que viva la tabla.

Mesa Gutenburg Mesas de bloque

  • Las tablas Gutenburg son las que hemos utilizado en las páginas de comparación de productos, como ésta. Tenga en cuenta que están configurados como un bloque y no como un WYSIWYG, por lo que no se pueden utilizar en las secciones de pestañas de las páginas de productos. Puede ver un ejemplo de ello en esta página.
  • Para añadir una de estas tablas a una página, haga clic en el icono naranja + de la esquina superior izquierda para añadir un nuevo bloque y seleccione el tipo de bloque “Tabla”.
  • Seleccione el número de columnas y filas
  • Se puede aplicar un estilo adicional a estas tablas haciendo clic en los tres puntos de los controles del bloque y yendo a “Mostrar más ajustes”. Aquí puede asignar estilos de tabla y establecer una fila de cabecera (roja).
  • Para los bloques de comparación, también puede incluir códigos cortos de identificación de productos en las celdas de la tabla para traer información sobre los productos, incluyendo la imagen, el nombre, la información de solicitud y las hojas de especificaciones.
    • Para encontrar el ID de un producto, navegue hasta la parte trasera del producto al que quiere enlazar.
    • A continuación, en la URL de su navegador, debería ver una parte de la URL que dice “post=” el siguiente número es el número de identificación de ese producto.

Tipos de entradas personalizadas

Productos

Para crear un nuevo producto, vaya a Productos > Añadir nuevo Para editar un producto existente, vaya a: Producto > busque el producto que desea editar > Editar

  • Creación y edición de productos
    • Introduzca el título de la entrada en el campo “Añadir título”.
    • Introduzca todo el contenido en el editor de contenidos (WYSIWYG).
    • Yoast SEO – Establece el título SEO y la meta descripción en la sección “Yoast SEO”.
    • Categorías – Asigna la categoría para este producto en la barra lateral derecha. (Para más información sobre las categorías de productos, véase más abajo)
      • Nota: La asignación de la categoría a un producto también significa que el “CTA del producto” de esa categoría aparecerá en la página del producto debajo de las imágenes/galería principal. En el caso de este producto, por ejemplo, asignarlo a la categoría Benchtop es lo que carga el “¿No sabe por dónde empezar?” debajo de la imagen. Más información sobre cómo editar ese contenido en la sección de abajo sobre la edición de las categorías de productos.
    • Establezca la imagen destacada que aparecerá en el héroe y en todos los bloques de alimentación de recursos como una miniatura para este producto.
    • Guarde y actualice el producto.
    • Una vez establecida la información básica del producto, desplácese hasta la sección “Contenido adicional de la página del producto” en la parte inferior. Aquí debería ver tres pestañas:
      • Pestaña de contenido – En esta pestaña, encontrará las opciones para editar los siguientes campos
        • Hoja de especificaciones
        • Breve extracto
        • Contenido superior
        • Contenido principal (cuerpo del texto)
      • Pestaña del carrusel de imágenes – En esta pestaña, encontrarás las opciones para editar y añadir al carrusel de imágenes + subtítulos en el área del héroe. Tenga en cuenta que la primera imagen del carrusel será siempre la imagen destacada que haya establecido en la barra lateral. No es necesario introducir la imagen destacada en los campos del carrusel.
      • Pestaña de pestañas – En esta pestaña, encontrará las opciones para editar los siguientes campos
        • “Añadir pestaña” para añadir una pestaña adicional al producto
        • Etiqueta de la pestaña
        • Contenido de la pestaña (Este WYSIWYG es donde se construirán la mayoría de las tablas para los productos)
  • Productos de enlaces externos
    • Algunos productos vivirán fuera del sitio y, por lo tanto, necesitarán un conjunto de enlaces externos en lugar de una página de aterrizaje.
    • Para ello, configure un producto como de costumbre, con el nombre, la imagen destacada y los extractos.
    • A continuación, en la barra lateral derecha, debería ver una sección que dice “Enlaces a páginas”. En esta sección, seleccione la opción “Una URL personalizada” para que el producto apunte a otro enlace en lugar de a una página de detalles.
  • Creación y edición de categorías de productos
    • Para crear una nueva categoría de productos, vaya a Productos > Categorías de productos. Para editar un producto existente, vaya a: Productos > Categorías de productos > busque la categoría que desea editar > Editar.
    • Establezca el nombre y el slug de la categoría
    • Para editar la “CTA del producto” que aparece en las páginas de detalles del producto, deberá ir a esa categoría de producto específica y editar el texto en el campo “CTA del producto” en el back end.

Entradas del blog (Color Science Essentials)

Para crear una nueva entrada, vaya a: Mensajes > Añadir nuevo Para editar un mensaje existente, vaya a: Posts > encuentra el post que te gustaría editar > Editar

  • Creación y edición de entradas de blog
    • Introduzca el título de la entrada en el campo “Añadir título”.
    • Introduzca todo el contenido en el editor de contenidos (WYSIWYG).
    • Yoast SEO – Establece el título SEO y la meta descripción en la sección “Yoast SEO”.
    • Categorías y etiquetas: añada categorías y etiquetas según sea necesario en la barra lateral derecha.
      • Vea más abajo las notas sobre la creación y edición de categorías y etiquetas del blog.
    • Establezca la imagen destacada que aparecerá en la página de todas las publicaciones de recursos como una miniatura para este elemento de publicación.
    • Guarda y actualiza el post.
  • Categorías del blog Para crear y/o editar una categoría del blog, vaya a:
    Entradas > Categorías.

    • Si intenta editar una categoría ya existente, también puede hacerlo en el mismo lugar.
    • Edita/añade la categoría que consideres oportuna. Para que una categoría aparezca en la página de aterrizaje del blog, primero debe aplicar esa categoría a una entrada del blog publicada.
  • Etiquetas del blog Para crear y/o editar una etiqueta del blog, vaya a: Entradas > Etiquetas.
    • Si está tratando de editar una etiqueta que ya existe, también puede hacerlo en el mismo lugar.
    • Edita/añade la etiqueta como creas conveniente.

Historias de clientes

Cursos

Eventos

Preguntas frecuentes

Comunicados de prensa

Biografías de los equipos

Ubicaciones

Biblioteca de medios de comunicación

Nota: Las imágenes deben ser recortadas y comprimidas antes de añadirlas a la mediateca. Se recomienda que las imágenes no superen los 250kb (aunque a veces es inevitable). Deberá recortar la imagen a la dimensión adecuada antes de comprimirla. Este sitio, tinypng.com, puede ser útil para comprimir el tamaño de los archivos de las imágenes. Para ver la Mediateca, vaya a: Media > Biblioteca

  • Para añadir nuevas imágenes y archivos, pulse el botón “Añadir nuevo” en la parte superior de la página. A continuación, haga clic en “Seleccionar archivos” o simplemente arrastre y suelte un archivo en la ventana.
  • Puedes añadir archivos directamente a una carpeta específica o arrastrarlos y soltarlos en la carpeta adecuada más tarde.
  • Puede hacer clic en cualquier elemento multimedia para editar los siguientes campos:
    • Texto alternativo
    • Título
    • Leyenda
    • Descripción
    • URL del archivo
  • Si está editando un PDF, el campo “URL del archivo” es el enlace que utilizará para enlazar directamente con el PDF.

Nota: La mediateca puede filtrarse por tipo o fecha y se puede buscar por título.

Formularios

Para crear y editar formularios, vaya a: Ninja Forms > Dashboard

  • Aquí debería ver todos los formularios de su sitio.
  • Haga clic en el icono del engranaje junto a su formulario para editar, duplicar, previsualizar y eliminar su formulario. También puede ver las presentaciones en este lugar.
  • Haga clic en “Añadir nuevo” o edite un formulario existente.
  • Ir a los “Campos del formulario”
    • Añada los campos de formulario que desee con el icono azul + en la esquina inferior derecha.
    • Una vez añadidos los campos de formulario deseados. Haga clic en “Publicar”. Nota: Este botón siempre dirá “Publicar”, incluso si el formulario ya ha sido publicado.
  • Vaya a la pestaña “Correo electrónico y acciones”.
    • Editar la redirección, el correo electrónico del administrador y la configuración del usuario del correo electrónico para cada formulario
      • Redirección – Redirige a la página de agradecimiento
      • Administración del correo electrónico – Puede personalizar la forma en que cada envío llega a su bandeja de entrada: desde el nombre, la dirección, hasta el correo electrónico (muy importante), el asunto y los campos.
    • La configuración avanzada que aparece debajo de la ventana html permite añadir parámetros adicionales de correo electrónico. Si un correo electrónico de respuesta automática, CC o direcciones de correo electrónico adicionales deben añadirse al formulario. Se puede hacer aquí frente a la creación de nuevas direcciones de correo electrónico.
    • Una vez completado el formulario, copie el código corto y péguelo en un editor de contenidos.

Menús

Para editar los menús, vaya a Apariencia > Menús Nota: El menú de redes sociales en el pie de página está en una ubicación diferente. Véase más abajo.

Edición de menús

  • Vaya al menú desplegable “Seleccione un menú para editar:” y elija el menú que desea editar.
  • Utilice los menús para organizar cómo quiere que se muestren los distintos menús.
  • Añadir elementos del menú –
    • Busque la página (u otro tipo de elemento de menú) que desee añadir a su menú en el área de selección “Añadir elementos de menú” de la izquierda.
    • Seleccione “Añadir al menú” y la página aparecerá en la parte inferior de ese menú.
    • Arrastra y suelta la página que has añadido al lugar del menú donde quieres que aparezca.
    • Para establecer algo como elemento de menú secundario, arrastre la página para que aparezca con sangría debajo de la página principal.
    • Haga clic en la flecha de la derecha del menú para ver más opciones. En esta área, puede editar los siguientes elementos:
      • Etiqueta de navegación (el texto que aparece en el propio menú)
      • Atributo del título
      • Una casilla para abrir los enlaces en una nueva pestaña
      • (opcional) Clases CSS
  • Una vez que tengas el. Si el menú es el que quieres, haz clic en el botón “Guardar menú” de la esquina superior izquierda.

Menú de redes sociales

Para editar el menú de medios sociales, vaya a: Opciones > Pie de página > Medios sociales

  • Introduzca los enlaces en los campos correspondientes clasificados por aplicaciones.
  • Actualice la página para guardar los cambios.

Mega Menú