¡Hola amigo!

A través de esta página podrás ver todos (o casi todos) los estilos que estamos usando en nuestra web. Si quieres crear nuevo contenido o deseas editar el ya creado esta  página te será de ayuda.

Redacción de Post/Páginas

Cuando redactes un post, o modifiques una de las páginas de wordpress recuerda estas normas:

  • Para los títulos usa el formato:
    • Título 2: Para los títulos de primer nivel
    • Título 3: Para los subtítulos
    • No deberías de tener que usar más tipos de títulos.
  • Pega el texto sin formato. De este modo te ahorrarás muchos disgustos.
  • Cuando quieras pegar porciones de código:
    • XXXXXXXXXX FALTA XXXXXX
  • No deberías tener que modificar nunca el color del texto. Si no puedes que tu artículo se convierta en una feria.
  • Imágenes:
    • Recomendaciones de tamaño: XXX FALTA XXX
    • Aplicaciones de estilo. XXX FALTA XXX

Ejemplo de Título 2: títulos principales

Ejemplo de Título 3: subtítulos

Parrafo por defecto: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Texto en cursiva: Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Texto en negrita: Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Imagen pequeña alineada a la izquierda:

mockup_image_90x50

Imagen pequeña centrada (es como se verán las imágenes por defecto)

mockup_image_90x50

mockup_image_90x50

Imagen pequeña a la derecha:

Ejemplos de Listas

Lista por defecto:

  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
  • Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
  • Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
  • Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

Lista de checks:

  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
  • Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
  • Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
  • Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

Lista ordenada:

  1. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
  2. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
  3. Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
  4. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

Botones

Ejemplos de los diferentes botones usados en la web:

Paneles

Side Claim Panel

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Name SurnamePosition

Frase con más margen inferior, entre la fase y el autor.Name SurnamePosition

Big Numbers Panel

70Panel por defecto (alineado izquierda).

18%Panel con el texto y la cifra alineados al centro.

-30%También podemos poner el panel con el texto y la cifra alineado a la derecha.

Blue Panel

Item Title

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.

“The tool turned out to be easy to use from day one. It helps me save a lot of time and improve the business. We improved our noise insulation that to detecting this issue on the tool and as a consequence the satisfaction scores improved overnight, like they did when we installed Wi-Fi.”

Javier Mármol
Director of NH Palacio de Tepa. Madrid (Spain)

Guests reviews and NH Hotels financial data feed the key strategic decisions of the business

Social signals are no longer wasted

Gray Panel con extra-margin

Item Title

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.

Blue Panel con extra-margin

Item Title

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.

NH Hoteles tracks the performance of its 400 hotels

5.000 employees of NH Hoteles check the tool every month and have now access to around 200,000 customer reviews world-wide every year

Helps to decide capital and operational expenditure based on ratings of hotels and measure the impact of the decision with immediate effect

Image with bottom title

Subtitle for this type of panel




El diseño de la web pública

Una vez definido el arbol de contenidos y decidido el estilo visual a seguir, el siguiente paso consistió en realizar el diseño de todas las paginas necesarías para explicar a fondo todo el proyecto. Realizar un diseño limpio, estructurado y que visualmente fuese atractivo para el usuario, ha sido la principal motivación del equipo de diseño a la hora de realizar la web pública de Sinfonier.

ANIM: El diseño de la web pública

Una vez definido el arbol de contenidos y decidido el estilo visual a seguir, el siguiente paso consistió en realizar el diseño de todas las paginas necesarías para explicar a fondo todo el proyecto. Realizar un diseño limpio, estructurado y que visualmente fuese atractivo para el usuario, ha sido la principal motivación del equipo de diseño a la hora de realizar la web pública de Sinfonier.

El diseño de la web pública

Una vez definido el arbol de contenidos y decidido el estilo visual a seguir, el siguiente paso consistió en realizar el diseño de todas las paginas necesarías para explicar a fondo todo el proyecto. Realizar un diseño limpio, estructurado y que visualmente fuese atractivo para el usuario, ha sido la principal motivación del equipo de diseño a la hora de realizar la web pública de Sinfonier.

El diseño de la web pública

Una vez definido el arbol de contenidos y decidido el estilo visual a seguir, el siguiente paso consistió en realizar el diseño de todas las paginas necesarías para explicar a fondo todo el proyecto. Realizar un diseño limpio, estructurado y que visualmente fuese atractivo para el usuario, ha sido la principal motivación del equipo de diseño a la hora de realizar la web pública de Sinfonier.