Documental encyclobjects: 05 Diseño y personalización

Documental encyclobjects: 05 Diseño y personalización

Documental encyclobjects: 05 diseño y personalización ya hemos comentado en algunas ocasiones. La idea que tenía rondando por la cabeza era la revista Orologi. En esa revista, el protagonista no era el diseño (por cierto, mínimo, pero super elegante), eran los relojes, las imágenes. Todo el color, el dinamismo, la seducción…, todo estaba en las imágenes, ellas eran las auténticas protagonistas de la revista. Eran imágenes sobre un folio en blanco con un texto claro, profesional y sugerente.

Pero claro, Orologi solo presenta relojes, encyclobjects.com juega en un campo más grande, con más y diferentes objetos, más colores, más detalles, más información e interacción… ¿Cómo diseñar y presentar, todo este contenido, en un continente de una manera ordenada, completa, sencilla y sugerente? ¿Sencillo? No lo sé.

Sé que la mayor parte de las cosas está ya inventada, por lo que la observación era mi mejor alternativa, así que me puse a fisgar publicaciones (en papel e internet) y llegué a una conclusión que confirmaba mis sospechas. Si el protagonista es el producto, la imagen, la noticia, dejémosle todo el protagonismo y sólo resaltemos nuestro logotipo como imagen de marca.

• Logotipo y paleta de colores

Encyclobjects es un acrónimo inventado. El Diccionario RAE define acrónimo: 2. m. Vocablo formado por la unión de elementos de dos o más palabras, constituido por el principio de la primera y el final de la última, o frecuentemente, por otras combinaciones. El caso es que «suena» a enciclopedia de objetos, que es exactamente lo que se quiere transmitir. Lo que pasa, que en el fondo, es «lo que me pasa», es que me gustan las complicaciones y, en inglés, me parecía más internacional.

Como el dominio es encyclobjects.com, para el logotipo me pareció oportuno seguir con el nombre encyclobjects, ya que se trata, primero, de ratificar el acrónimo (enciclopedia de objetos), y segundo, hacer sonar  encyclobjects como una palabra corta y fácil de recordar con la suma de palabras encyclopedia + objects. De esta forma evitaba buscar un objeto, u otra imagen/forma/icono que evocara a una enciclopedia de objetos.

El nexo de unión, la o, divide el acrónimo en 2 partes con el mismo número de letras (encycl o bjects), curioso ¿verdad?. Para el logo tendría que buscar algo singular para esa letra «o». Al principio pensé en [encyclobjects], y luego buscando, buscando… (lógicamente en imágenes libres de derechos), encontré una bola de billar de color naranja con un símbolo de encendido (Power). Con unos pocos ajustes la puse en el centro, un poco más grande «et voilà», el logotipo creado.

Para el Favicon (miniatura del logotipo que aparece en las pestañas del navegador), eliminé el texto dejando únicamente los corchetes que envuelven la bola de billar con el símbolo de encendido. De esta forma remarcaba más el carácter digital del magazín.

Con el logo ya diseñado, decidí una  paleta de colores más intensa para la cabecera, muy marcada por el color azul marino que sería el fondo del menú principal y el logotipo. Y otra paleta de colores básicamente neutra para el contenido, menús y enunciados. Esta segunda paleta ha tenido ligerísimas modificaciones (algunas transparencias) respecto de la que viene de serie en Extra (es muy dificil mejorar lo inmejorable).

Os dejo la codificación de las paletas de colores:

– Encabezado: Violeta: rgba(92,6,186,0.76), Azul marino: #070f6b, Naranja Logotipo: #fe702e, Naranja submenú: rgba(247,131,0,0.93), Verde Logotipo: #2a8e7a, Blanco texto y menús: rgba(255,255,255,0,6), Blanco enlace texto y menús: #ffffff

– Contenido: Fondo: rgba(201,192,237,0), Texto navegación fija: rgba(255,255,255,0.6), Enlace navegación fija: #ffffff, Fondo navegación fija: #3e5062, Texto: rgba(5,5,5,0.6), Enlace de texto: rgba(239,83,4,0.78), Texto de encabezado: rgba(0,0,0,0.75), Color de acento: #00a8ff

Pie de página: Texto: rgba(255,255,255,0.6), Texto de encabezado: rgba(255,255,255,0.6), Enlace de texto: #ffffff, Fondo barra inferior: rgba(0,0,0,0.3).

• Personalización del tema

Extra, de Elegant Themes, es una plantilla personalizable 100%. En el menú de WordPress se ubica el menú básico de Extra, en él está el Personalizador del tema. A pantalla completa nos aparecerá la página de inicio y el menú del personalizador a la izquierda. Los ajustes que realicemos aparecerán de inmediato en la página seleccionada, siendo así más sencillo comprobar el resultado del ajuste. Si el ajuste es correcto, lo podremos guardar con el botón Publicar.

Además, en la parte inferior del menú disponemos de 3 tipos de visualización: escritorio, tablet y móvil. También podemos ocultar el menú para ver nuestra web a pantalla completa.Todos los ajustes que podemos realizar están ordenados de la siguiente manera:

– Ajustes generales: Diseño, Tipografía, Ajustes de fondo.

– Ajustes de cabecera y navegación: Formato de cabecera, Barra de menú principal, Barra de menú secundario, Ajustes de navegación fija , Ajustes de elementos de cabecera.

– Ajustes de pie de página: Diseño, Tipografía, Elementos de pie de página, Barra inferior.

– Botones: Estilos de botón, Estilos de botón al pasar el puntero.

– Redes sociales: Inclusión de las URL de cada red social incorporada.

– Identidad del sitio: Título, Lema e Icono del sitio (Favicon)

– Accesibilidad (Opcional): Ajustes de ubicación y estilos del icono de One Click Accessibility

– Imagen de fondo: Si se desea una imagen de fondo se puede ubicar, redimensionar, etc…

– Menús: Puedes configurar y gestionar menús en 3 ubicaciones mostrar menús en 3 ubicaciones y puedes configurar varios menús.

– Widgets: Dependiendo de las columnas del pié de página y de la elección o no de barras laterales, puedes configurar diferentes widgets en varias ubicaciones.

– Ajustes de la página de inicio: Últimas entradas, página estática o diseño de Extra. Para entrada puedes seleccionar una página.

– The Events Calendar (Opcional): Ajustes de las diferentes visualizaciones de los eventos, sus categorías y el calendario.

– Woocommerce (Opcional): Una vez que instalas el plugin de Woocommerce podrás personalziar algunas funciones de Woocommerce para incluirlas con el diseño de Extra.

– CSS adicional: Además de los ajustes propios de Extra, podrás añadir estilos de tu cosecha agregando CSS adicional al tema.

Esta es la parte visual de la personalización del tema Extra de Elegant Themes, pero no has teminado de personalizar y ajustar totalmente el tema. Para configurar bien Extra es imprescindible seguir la documentación que proporciona Elegant Themes.

• Creación de páginas, entradas y menús.

Para WordPress, todo son entradas, y aunque establece diferencias entre entradas, páginas, eventos y proyectos, a nivel motor, son lo mismo. Por otra parte, y para entrar de lleno en el tema, una de las características de WordPress es la posibilidad de llegar a un sitio por diferentes caminos. Todo en busca de la navegación y de hacer más atractiva la visita de los usuarios. En el caso de encyclobjects.com, la estructura de páginas y menús se ha realizado así:

– Páginas: Espacios destinados a: Página de inicio, información legal, información de la empresa, interacción (formularios), e-commerce (productos), navegación, servicios, utilidades y aterrizaje.

• Página de inicio: Portada.
• Información legal: Aviso legal, Términos y condiciones, Privacidad (UE), Privacidad (UK), Política de cookies (UE), Política de cookies (UK), Responsabilidad.
• Información de empresa: Nosotros, Idea, Método, Contenido, Política de Calidad, Entradas, Protagonistas, Autores, Eventos, Proyectos, Actividad, Afiliación, Banco de pruebas, e-commerce, Email marketing, Publicidad, Redes Sociales.
• Interacción: Contacto, Inicio de Sesión, Registro de usuario, Perfil, Cambiar Contraseña, Contraseña perdida.
• e-commerce: Tienda (páginas de producto), Mi cuenta, Lista de deseos, Carrito, Finalizar compra.
• Navegación: Mapa del sitio.
• Servicios: Planes de suscripción, Programa de puntos, Envíos, Devoluciones y reembolsos.
• Utilidades: Preguntas frecuentes, Enlaces, Archivos de utilidad
• Aterrizaje (landing pages): Bienvenido al boletín de noticias

– Entradas: Espacios destinados a las publicaciones: Artículos con imágenes y texto, Podcasts y Vídeos. Siempre se ubican en contenedores, por ejemplo una página, una categoría una etiqueta, o bien una selección, etc…)

– Eventos: Espacios destinados a la presentación y promoción de eventos. Se ubican bien en el Calendario de Eventos (Página Eventos), en una selección de fechas, en una categoría o en una etiqueta.

– Productos: Son espacios que presentan una ficha de un artículo para su venta, bien directa o por afiliación. Se ubican en la página de Tienda, en categorías de producto o etiquetas de producto. También aparecen en páginas de búsqueda.

– Proyectos: Espacios destinados a la presentación de proyectos. Se ubican bien en categorías o habilidades de proyecto.

Como podréis comprobar, un sitio con las características de encyclobjects.com precisa de muchas páginas, y ordenarlas bien es primordial para facilitar una navegación fluida y fácil a nuestros usuarios. Para ofrecer una buena navegación, hemos preparado 4 menús que hemos ubicado en 5 zonas y los detallamos así:

• Menú principal: Situado en el encabezado con el fondo de color Azul marino.
• Menú secundario: Situado en el encabezado (Menu hamburguesa) con el fondo Violeta. Segunda ubicación en pie de página con el nombre Compañía.
• Menú Pie de página: Situado bajo el pie de página fondo Gris Marengo.
• Menú Zona clientes: Situado en el pie de página con el nombre Zona clientes.

Un detalle importante a señalar es, y siempre tiene que ser un objetivo para cualquier creador de contenido, es sugerir continuamente a nuestros usuarios para que inicien sesión cada vez que visitan nuestros espacios de comunicación. En el caso de encyclobjects.com, además de obtener puntos de recompensa, la interactuación ahorra tiempos y mejora la experiencia de navegación. Ahora bien, ¿cómo sabe un usuario que está conectado? En nuestro caso hemos utilizado código para que, una vez conectado el usuario, la palabra Acceso del menú principal se transforme en su nombre de usuario.

• Divi Builder

WordPress tiene un antes y un después de Divi Builder, el constructor visual más utilizado en la realización y diseño de espacios web. Si, desde los comienzos, WordPress era un software que podíamos utilizar las personas sin conocimientos de programación, a partir de la irrupción de las plantillas Divi, y la posterior presentación del Constructor Divi, diseñar páginas web con WordPress es todavía más fácil.

Divi Builder viene a ayudar. Sirve para personalizar todavía más la plantilla Extra (o cualquier otra plantilla Divi), y convertir un espacio web en cualquier cosa imaginable ¡sin conocimientos de programación!

El contenido de WordPress utilizando Divi Builder se estructura en secciones, filas y módulos.

• Secciones: en Azul, contienen una unidad completa (página, entrada, etc…) o una unidad parcial. Disponen de ajustes individuales (contenido, diseño y avanzado) y contienen filas.
• Filas: en Verde, de carácter horizontal, pueden contener 1,2,3, 4 o más columnas, del mismo tamaño o diferente. Dispone igualmente de ajustes individuales (contenido, diseño y avanzado) y, a su vez, cada columna puede contener uno o más módulos, que son las herramientas que contienen las funciones.
• Módulos: en Gris marengo: Son los recipientes funcionales donde se ubica el contenido. Hay módulos de (Anuncio breve, Audio, Botón, Buscador, Carrusel, Galería, Imagen, Menú, Suscripción, Texto, Vídeo, etc… hasta más de 40 funcionalidades) También hay módulos de Woocommerce. Cada módulo tiene a su vez sus ajustes individuales (contenido, diseño y avanzado)

Tanto las secciones, como las filas y los módulos disponen de herramientas de edición que permiten guardar en la biblioteca, copiar, pegar, desactivar e incluso generar contenido mediante inteligencia artificial. Estas funciones nos permiten ahorrar mucho tiempo en tareas de repetición.

Por sus enormes posibilidades de diseño, ajustes y edición, es conveniente estudiar la documentación de Divi Builder e incluso visualizar tutoriales. El aprendizaje es rápido, pues es una herramienta muy intuitiva y conjugado con el carácter visual de su aplicación, se obtienen los primeros resultados pronto.

Extra, la plantilla magazín de Elegant Themes, dispone además de un Constructor de Categoría, de menor tamaño que Divi Builder pero muy práctico para configurar y diseñar rápido las categorías de tu WordPress.