Guía de estilos y complementos

Este documento presenta una guía de estilos y referencia para ayudar a mantener la consistencia visual durante el proceso de creación de contenidos por parte del equipo de trabajo.

1 - Colores

1.1 - Colores de marca

1

Elemento de la lista #1

List Item Description
2

Elemento de la lista #2

List Item Description
3

Elemento de la lista #3

List Item Description

Amarillo ADC [#eac140]

Es color de marca principal de ADC e identifica a la marca.

Azul ADC [#4574b3]

Color de contraste para resaltar la relevancia de algunos elementos del diseño como encabezados, iconos y fondos. Es también el color por defecto para los enlaces en el texto.

Dark ADC [#070208]

Es el color por defecto para textos y encabezados. También puede ser utilizado para fondos y llamadas a la acción.

1.2 - Otros colores

Gris Light [#f2f2f2]

Color de fondo para secciones y como sustituto del blanco cuando el caso lo requiera.

Gris [#dbdbdb]

Color de borde para elementos, líneas y color de fondo en casos que se requiera.

Gris Dark [#7a7a7a]

Color de fondo para secciones y como sustituto del blanco cuando el caso lo requiera.

Azul Light [#96c8e0]

Color alternativo al Azul ADC.

Azul Dark [#255577]

Color alternativo al Azul ADC y actúa como su opción hover.

Verde ADC [#49bc85]

Color alternativo para CTA´s y elementos a diferenciar.

Rojo ADC [#e07360]

Color alternativo para CTA´s y elementos a diferenciar.

Pink ADC [#e072b9]

Color alternativo para CTA´s y elementos a diferenciar.

Violet ADC [#8c73d6]

Color alternativo para CTA´s y elementos a diferenciar.

1.3 - Colores hover

Los colores on hover [al pasar el mouse] indican que el elemento realizará una acción si se le hace clic, como en el caso de los botones.

Es importante no aplicar el efecto hover a elementos no clicables o que no realizan ninguna acción.

Amarillo ADC:HOVER [#e09c3c]

Color hover para el Amarillo ADC.

Azul ADC:HOVER [#255577]

Color hover para el Azul ADC.

2 - Tipografías

2.1 - Encabezados

Aquí se puede observar la apariencia de los diferentes encabezados H1 al H6. No es necesario agregar márgenes a los encabezados al crear textos salvo que se requiera por fines estéticos o funcionales específicos.

CUADRO DE EJEMPLOS

Encabezado H1

Encabezado H2

Encabezado H3

Encabezado H4

Encabezado H5

A tener en cuenta:

2.2 - Párrafos

Los párrafos en Elemntor se crean con el widget ¨Editor de texto¨queaparece en la imagen a continuación.

El tamaño y color de texto se han configurado de forma predeterminada y no es necesario modificarlo, salvo por el color cuando se utiliza sobre fondos oscuros.

CUADRO DE EJEMPLOS

Párrafo

Haz clic en el botón editar para cambiar este texto. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Párrafo a dos columnas

Haz clic en el botón editar para cambiar este texto. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Párrafo a tres columnas

Haz clic en el botón editar para cambiar este texto. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Para dividir el texto de forma automática en columnas se debe seleccionar la cantidad de columnas en la sección Estilo del widget Editor de texto.

Para divisiones más complejas donde se necesite separar el layout en columnas, la solución adecuada es aumentar la cantidad de columnas en una sección o utilizar una sección interior.

CUADRO DE EJEMPLOS

Párrafo sobre fondo oscuro

Haz clic en el botón editar para cambiar este texto. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

2.2 - Citas y Listas

Las citas y listas pueden ser agregadas directamente desde el editor del texto o utilizando los widgets personalizados de Elementor. A continuación se muestran ejemplos para cada caso.

CUADRO DE EJEMPLOS

Lista ordenada utilizando editor de texto

Elemento #1 de la lista
Elemento #2 de la lista
Elemento #3 de la lista

Lista no ordenada utilizando editor de texto

Elemento #1 de la lista
Elemento #2 de la lista
Elemento #3 de la lista

Cita utilizando editor de textos

Citas y elementos de lista utilizando Widgets de Elementor.

Cita utilizando widget

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

John Doe

Designer

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

John Doe

Designer

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

John Doe

Designer

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

John Doe

Designer

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

John Doe

Designer

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

John Doe

Designer

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

John Doe

Designer

Lista de elementos utilizando widgets

Los listados de elementos son creados utilizando el widget Listado de iconos de elementor.

¿Qué problemas solucionamos?
¿Cuál es el perfil de cliente potencial?
¿Qué servicios ofrecemos para solucionar los problemas de nuestros clientes?
¿Qué metodología utilizamos?
¿Qué productos ofrecemos para aumentar el valor?
¿Qué experiencia ofrecemos?

Checklist

Este es un tipo de lista especial, donde los alumnos pueden marcar los pasos a medida que los ejecutan y el sistema recuerda su selección.

Haz clic en el botón editar para cambiar este texto.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Ayuda a concretar ideas

List Item Description
Más tareas completadas

List Item Description
Mejor colaboración

List Item Description

Calendario Editorial

1

Elemento de la lista #1

List Item Description
2

Elemento de la lista #2

List Item Description
3

Elemento de la lista #3

List Item Description

1

Elemento #1

List Item Description

2

Elemento #2

List Item Description

3

Elemento #3

List Item Description

4

Elemento #4

List Item Description

5

Elemento #5

List Item Description

6

Elemento #6

List Item Description

1

Elemento de la lista #1

List Item Description
2

Elemento de la lista #2

List Item Description
3

Elemento de la lista #3

List Item Description

1 List Item #1
2 List Item #2
3 List Item #3
4 List Item #4
5 List Item #4
6 List Item #6

List Item #1
List Item #2
List Item #3

1

Elemento de la lista #1

List Item Description
2

Elemento de la lista #2

List Item Description
3

Elemento de la lista #3

List Item Description

Listas de precios

Item #1
$12
Lorem ipsum dolor sit amet, mea ei viderer probatus consequuntur, sonet vocibus lobortis has ad. Eos erant indoctum an, dictas invidunt est ex, et sea consulatu torquatos. Nostro aperiam petentium eu nam, mel debet urbanitas ad, idque complectitur eu quo. An sea autem dolore dolores.
Item #1
$12
Lorem ipsum dolor sit amet, mea ei viderer probatus consequuntur, sonet vocibus lobortis has ad. Eos erant indoctum an, dictas invidunt est ex, et sea consulatu torquatos. Nostro aperiam petentium eu nam, mel debet urbanitas ad, idque complectitur eu quo. An sea autem dolore dolores.
Item #1
$12
Lorem ipsum dolor sit amet, mea ei viderer probatus consequuntur, sonet vocibus lobortis has ad. Eos erant indoctum an, dictas invidunt est ex, et sea consulatu torquatos. Nostro aperiam petentium eu nam, mel debet urbanitas ad, idque complectitur eu quo. An sea autem dolore dolores.

Item #1
$12
Item #1
$12
Item #1
$12

Item #1
$12
Item #1
$12
Item #1
$12

Item #1
$12
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Item #1
$12
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Item #1
$12
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Item #1
$12
Item #1
$12
Item #1
$12

Item #1
$12
Item #1
$12
Item #1
$12

Para lograr efectos visuales más atractivos se pueden combinar las tablas de precios con otros elementos dentro de secciones o secciones interiores con divisores.

Nombre de la tabla de precios

Item #1
$12
Item #1
$12
Item #1
$12

Nombre de la tabla de precios

Item #1
$12
Item #1
$12
Item #1
$12

Líneas de tiempo

Prehistoria

Precedentes

Consejeros y guías como Dioses, sacerdotes, filósofos, chamanes...

Prehistoria

Siglo XIX - Revolución Industrial

Profesionalización

Surgen los primeros expertos en optimizar el trabajo de las grandes industrias aplicando el método científico. Taylor, Gilbreth, Gantt y Emerson son grandes personalidades de la época.

Siglo XIX - Revolución Industrial

1845

Empresas consultoras

Se comienzan a formar las primeras empresas consultoras como Deloitte (1845) y Price Waterhouse (1849) ofreciendo servicios de asesoría para estrategia global de negocios.

1845

1900

Expansión a otras áreas

Poco a poco comenzaron a surgir consultores especializados en distintas áreas, aunque generalmente enfocados al ámbito de los negocios y las instituciones. Ej. Consultores políticos, relaciones públicas, marketing, recursos humanos...

1900

1900 - 2002

Big Four

Las empresas más importantes en el mundo de la consultoría integral enfocadas al mundo de los negocios. Comenzaron siendo 8 pero tras una serie de fusiones por el aumento de la competencia, así como un famoso escándalo financiero, han acabado siendo 4.

1900 - 2002

2004 - Web 2.0

Negocios online

El nacimiento de Internet y el acceso a la red de forma generalizada, junto con el surgimiento de los blogs y las redes sociales, supuso una revolución que aún hoy vivimos, llena de continuos cambios. En este contexto nacen las startups (empresas de rápida creación y crecimiento), así como expertos en negocios y marketing digital. Pero también nos adentramos en un contexto ideal para vender servicios online que ha llevado al nacimiento de muchas más especialidades de consultores enfocados a otros nichos de mercado y sectores, como por ejemplo, los consultores nutricionistas.

2004 - Web 2.0

Hoy en día

El mayor reto de los consultores está en lograr rentabilidad de sus negocios más allá de las asesorías individualizadas que suponen una gran inversión de tiempo. De ahí surgen nuevos modelos de negocio como la creación de infoproductos formativos, ebooks y escuelas que se han convertido en verdaderos casos de éxito. Y en ADC hemos reunido todo el conocimiento que necesitas para crear un negocio de consultoría de éxito.

Prehistoria

Precedentes

Consejeros y guías como Dioses, sacerdotes, filósofos, chamanes...

Prehistoria

Siglo XIX - Revolución Industrial

Profesionalización

Surgen los primeros expertos en optimizar el trabajo de las grandes industrias aplicando el método científico. Taylor, Gilbreth, Gantt y Emerson son grandes personalidades de la época.

Siglo XIX - Revolución Industrial

1845

Empresas consultoras

Se comienzan a formar las primeras empresas consultoras como Deloitte (1845) y Price Waterhouse (1849) ofreciendo servicios de asesoría para estrategia global de negocios.

1845

1900

Expansión a otras áreas

1900

1900 - 2002

Big Four

1900 - 2002

2004 - Web 2.0

Negocios online

2004 - Web 2.0

Hoy en día

Descubrimiento

Necesito un cambio importante de hábitos en mi vida para mejorar mi salud, y por ello busco información en Internet. Durante el proceso, descubro a un profesional en Instagram que comparte consejos realmente valiosos.

Consideración

Gracias a los consejos que voy encontrando en Internet estoy haciendo pequeñas mejoras. Sin embargo, necesito un cambio más radical, una solución definitiva. Voy a valorar contratar los servicios de consultoría de un profesional.

Decisión

De entre todas las opciones que he valorado, la que más me encaja por la solución que ofrece y el precio adecuado a mis recursos es la de X consultor pues algunos de sus consejos han sido los más valiosos para mi.

Satisfacción

He conseguido tan buenos resultados que el dinero usado ha sido una de mis mejores inversiones. Recomendaré este consultor a mis conocidos y contrataré de nuevo sus servicios si lo necesito en un futuro.

3 - Videos

A continuación se muestran las distintas variaciones de widget de videos para utilizar en el sitio.

3.1 - Videos normales para lecciones

3.2 - Caja de video para lecciones

¡Aprende a venderte!

En este vídeo te explicamos cómo explicar tu trabajo de consultor para poder venderte y conectar con tus clientes. Símiles, frase rápida que te describa y más.
¡Dale a play!

Play Video

3.3 - Video Sticky para lecciones

Idealmente para lecciones largas donde el video está al inicio de la lección y el alumno debe hacer scroll para consumir el resto del contenido

3.4 - Reproductor para videos de Youtube

Independiente si la fuente del video es propia o de otro canal el botón de suscripción mostrará el canal vilmanunez.

4 - Audios

Botones

Botones de descarga

Descarga la guía 100 kb

Descarga la guía

Descarga la guía 100 kb

Descarga la guía

Descarga la guía 100 kb

Descarga la guía

Descarga la guía 100 kb

Descarga la guía

Formatos de documentos

Documento PDF 100 kb

Documento Word 100 kb

Documento Excel 100 kb

01 - Secciones

A continuación se encuentran secciones con estilos predefinidos que ayudarán a mantener la consistencia visual en el sitio. Combinando secciones con divisores y sin divisores se pueden lograr efectos visualmente muy atractivos.