Sed cursus lacus justo eget tempus

Guía de estilo de la web

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel nulla sit amet quam auctor suscipit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisl dolor, pretium vitae rhoncus et, blandit non tellus. Fusce ut posuere mi.

01.
Cromatismo

In the first part of the style guide, you can find the color palette that’s been used for the layout pack. Use these colors inside the default color palette in your Divi Theme Options.

#FFDF90

#ffca28

#ffffff

#000000

#646363

#E3E3E3

02.
Visuales

The second part of this style guide shares some of the visuals that are included inside the layout pack. By importing the layout to your Divi Library, these visuals have automatically been added to your media library, ready for you to use.

[lord-icon icon="36-bulb-outline" size="80" animation="auto" palette="#646363;#ffca28"][/lord-icon]
[lord-icon icon="3-cloud-download-outline" size="80" animation="auto" palette="#646363;#ffca28"][/lord-icon]
[lord-icon icon="53-location-pin-on-round-map-outline" size="80" animation="auto" palette="#646363;#ffca28"][/lord-icon]
[lord-icon icon="145-envelope-mail-notification-open-morph-outline" size="80" animation="auto" palette="#646363;#ffca28"][/lord-icon]
[lord-icon icon="16-avatar-woman-nodding-outline" size="80" animation="auto" palette="#646363;#ffca28"][/lord-icon]
[lord-icon icon="163-graph-line-chart-outline" size="80" animation="auto" palette="#646363;#ffca28"][/lord-icon]
[lord-icon icon="36-bulb-outline" size="80" animation="auto" palette="#ffffff;#ffca28"][/lord-icon]
[lord-icon icon="3-cloud-download-outline" size="80" animation="auto" palette="#ffffff;#ffca28"][/lord-icon]
[lord-icon icon="53-location-pin-on-round-map-outline" size="80" animation="auto" palette="#ffffff;#ffca28"][/lord-icon]
[lord-icon icon="145-envelope-mail-notification-open-morph-outline" size="80" animation="auto" palette="#ffffff;#ffca28"][/lord-icon]
[lord-icon icon="16-avatar-woman-nodding-outline" size="80" animation="auto" palette="#ffffff;#ffca28"][/lord-icon]
[lord-icon icon="163-graph-line-chart-outline" size="80" animation="auto" palette="#ffffff;#ffca28"][/lord-icon]
[lord-icon icon="36-bulb-outline" size="80" animation="auto" palette="#646363;#ffffff"][/lord-icon]
[lord-icon icon="3-cloud-download-outline" size="80" animation="auto" palette="#646363;#ffffff"][/lord-icon]
[lord-icon icon="53-location-pin-on-round-map-outline" size="80" animation="auto" palette="#646363;#ffffff"][/lord-icon]
[lord-icon icon="145-envelope-mail-notification-open-morph-outline" size="80" animation="auto" palette="#646363;#ffffff"][/lord-icon]
[lord-icon icon="16-avatar-woman-nodding-outline" size="80" animation="auto" palette="#646363;#ffffff"][/lord-icon]
[lord-icon icon="163-graph-line-chart-outline" size="80" animation="auto" palette="#646363;#fffffff"][/lord-icon]

03.
Tipografía

In this part of the style guide, you’ll find the different text styles that were used throughout the layout pack. There’s a separate preset for each heading style and a global preset with all text styles in one.

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pretium porta mollis.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pretium porta mollis. Sed a odio augue. Pellentesque magna lectus.

Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pretium porta mollis. Sed a odio augue. Pellentesque magna lectus.

Heading 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pretium porta mollis. Sed a odio augue. Pellentesque magna lectus.

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel rutrum metus. Sed at iaculis tortor. Vestibulum eget viverra purus. Donec vitae ante eget augue elementum aliquam ultricies at augue. Aenean in blandit nisl. Nullam varius nec est eget consequat. Ut libero tellus, posuere quis gravida vel, aliquet eleifend nunc.

Body 1

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Body 2

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

List

  • Proin ornare
  • Molestie faucibus
  • Phasellus et neque

Link

04.
Botones

Here, you’ll find the buttons that have been used in the layout pack.

Botón 1

Botón 2

Botón 3

05.
Blurbs

Up next, we have some blurbs that have been frequently used in the layout pack.

Blurb 1

[lord-icon icon="36-bulb-outline" size="80" animation="hover" palette="#646363;#ffca28"][/lord-icon]

Lorem Ipsum

Phasellus purus nisi, consectetur eget consequat et, malesuada eget lectus nam mi odio.

Blurb 2

+34 000 000 000

Blurb 3

N
Lorem ispum

Phasellus purus nisi, consectetur eget consequat et, malesuada eget lectus nam mi odio.

Blurb 4

%

Lorem ipsum

%

Lorem ipsum

Blurb 5

%

lorem ipsum

Blurb 6

  • Lorem ipsum 75% 75%
  • dolor sit amet 45% 45%
  • consectetur 23% 23%
  • adipiscing elit 60% 60%
  • Phasellus purus nisi 91% 91%

06.
Otros módulos

Last but not least, we’re sharing other module designs that were used in the layout pack. Upon importing with presets, these have all been added to your preset library. If you didn’t enable the import presets option, you’re able to turn any one of these modules into a global preset.

imagen

1920×360 | 1920×1080
614×1024 | 1024×614

formato

jpg | png

FORMULARIO

ACORDEÓN

Lorem ipsum dolor sit amet?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Praesent sapien massa convallis?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Proin eget tortor risus?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Pellentesque in ipsum id orci porta?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Lorem eget tortor risus amet sit?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

TESTIMONIAL

Joe Doe

Ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae.

Mar Castells

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lectus ac ipsum vulputate suscipit. Praesent ut convallis turpis. Morbi nec bibendum velit, at bibendum augue. Morbi convallis viverra enim ut imperdiet.

Sandra Vila

Ut et tortor sed neque maximus varius vitae porttitor nunc. Curabitur porttitor sapien quis nulla congue aliquet a tristique erat. Nulla iaculis fringilla orci, id mollis mauris venenatis ac. Sed facilisis, erat tristique fermentum euismod.