Shortcodes and editor buttons

Testimonials

As a list

[pix_testimonials data_ids=” data_layout=’list’]

[hr]

[hr]

Dropcap

[pix_dropcap]M[/pix_dropcap]aecenas augue erat, congue ac euismod sit amet, gravida nec massa. Aliquam tincidunt purus non leo commodo mollis. Donec tortor nunc, molestie eget ullamcorper vel, scelerisque tempus eros. Suspendisse suscipit risus a urna dictum eu porttitor diam dignissim. Phasellus nec augue ipsum. Donec facilisis, ipsum non vulputate tristique, tellus nunc fermentum turpis, vel placerat velit turpis vel neque.

[hr]

[hr]

Tooltips

Just pass with the mouse over the link to see an example of [pix_tooltip width=”” position=”top” tooltip=”This is a tooltip”]tooltip above the word[/pix_tooltip] and an example of [pix_tooltip width=”” position=”bottom” tooltip=”This is a tooltip”]tooltip below the word[/pix_tooltip] and this is the code of one of the two examples:

<a href="#">[ pix_tooltip width="" position="top" tooltip="This is a tooltip" ]tooltip above the word[ /pix_tooltip ]</a>

[hr]

[hr]

Text boxes

[pix_box type=”success”]Great, well done[/pix_box]

[pix_box type=”error”]No, you’re wrong[/pix_box]

[hr]

[hr]

Inline edited text

Duis vulputate dui in arcu tempus id convallis urna tincidunt. Morbi venenatis sodales ultricies. Vivamus vehicula est id nibh luctus imperdiet. Donec vel enim a dolor vestibulum fermentum sed a odio. Vivamus neque magna, sollicitudin luctus suscipit sed, varius eu tortor. Donec imperdiet, sapien at lobortis adipiscing, quam purus malesuada lacus, interdum ornare magna sem eget turpis. Sed tincidunt lacinia mollis. Suspendisse blandit laoreet arcu, nec accumsan nunc rhoncus nec. Nunc vulputate sem non nisi commodo ut ultrices mi hendrerit. Cras sodales rutrum tellus. Donec lacus ante, egestas et ornare nec, interdum rhoncus massa. Sed consectetur mauris at nulla semper mollis.

[hr]

[hr]

Tabs

[pix_tabs data_active=’1′][ul][pix_tab data_title=”Quisque pretium”][pix_tab data_title=”Ligula mi porttitor”][pix_tab data_title=”Phasellus aliquet”][/ul][pix_tab_content data_title=”Quisque pretium”]Aliquam risus ligula, gravida ac condimentum at, euismod nec odio. Duis et suscipit felis. Praesent ut metus et dolor aliquet porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. Donec ullamcorper tempus gravida. Donec commodo luctus hendrerit. Ut vitae condimentum mi. Quisque pretium quam quis justo fermentum semper.[/pix_tab_content][pix_tab_content data_title=”Ligula mi porttitor”]Praesent vulputate ultricies nisi, nec dignissim lacus aliquet at. Cras vehicula, risus nec accumsan euismod, ligula mi porttitor nisl, fringilla mollis lectus neque vitae magna. Praesent a posuere odio. Praesent orci dolor, porta ut pellentesque et, vehicula sed urna.[/pix_tab_content][pix_tab_content data_title=”Phasellus aliquet”]Donec elementum sem eget turpis sollicitudin vestibulum. Nam in lacus sit amet erat sollicitudin sodales vel a felis. Pellentesque eu dui ipsum, nec accumsan lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In turpis nulla, pharetra vitae laoreet in, accumsan sed lorem. Phasellus aliquet sodales ipsum, eget laoreet diam tempor sollicitudin.[/pix_tab_content][/pix_tabs]

[hr]

[hr]

Accordions

[pix_accordion data_active=’1′][pix_acc data_title=”Quisque pretium”]Aliquam risus ligula, gravida ac condimentum at, euismod nec odio. Duis et suscipit felis. Praesent ut metus et dolor aliquet porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. Donec ullamcorper tempus gravida. Donec commodo luctus hendrerit. Ut vitae condimentum mi. Quisque pretium quam quis justo fermentum semper.[/pix_acc][pix_acc data_title=”Ligula mi porttitor”]Praesent vulputate ultricies nisi, nec dignissim lacus aliquet at. Cras vehicula, risus nec accumsan euismod, ligula mi porttitor nisl, fringilla mollis lectus neque vitae magna. Praesent a posuere odio. Praesent orci dolor, porta ut pellentesque et, vehicula sed urna.[/pix_acc][pix_acc data_title=”Phasellus aliquet”]Donec elementum sem eget turpis sollicitudin vestibulum. Nam in lacus sit amet erat sollicitudin sodales vel a felis. Pellentesque eu dui ipsum, nec accumsan lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In turpis nulla, pharetra vitae laoreet in, accumsan sed lorem. Phasellus aliquet sodales ipsum, eget laoreet diam tempor sollicitudin.[/pix_acc][/pix_accordion]

[hr]

[hr]

Google map

(The castle here above is visible from the window of my office.) To use Google maps just press the button here below, and paste an iframe (you can grab the code directly from Google maps, of course). You can set the height and the width of the iframe by using percentages, so the map will be responsive. In this case the width will be relative to the width of the page, the height will be relative to the width of the iframe. For instance, in this example, the width is 100% and the height is 56% (that is a little more than half the width).

[hr]

[hr]

Buttons

[pix_button type=”simple_button” size=””]Simple[/pix_button]

[pix_button type=”simple_button” size=”large”]Large[/pix_button]

[pix_button type=”simple_button” size=”extra”]Extra[/pix_button]

[pix_button type=”first_color” size=””]First[/pix_button]

[pix_button type=”first_color” size=”large”]Large[/pix_button]

[pix_button type=”first_color” size=”extra”]Extra[/pix_button]

[pix_button type=”second_color” size=””]Second[/pix_button]

[pix_button type=”second_color” size=”large”]Large[/pix_button]

[pix_button type=”second_color” size=”extra”]Extra[/pix_button]

[hr]

You must use the buttons together with the link button, available on the editor by default. You can set the four combinations of colors (the simple one, the first one, the second one and the third one) from the custom admin panel and then select them, together with the size of the button, when you put the shortcode in the editor.

[hr]

[hr]

External video

Just paste the iframe from Vimeo, YouTube etc. By using the button provided by Forte you can set responsive width and height as percentages, so the videos won’t exceed the layout size.