Códigos WordPress

Códigos rápidos

Copie los siguientes códigos y péguelos en la página de WordPress. En caso de presentar inconveniente péguelo en la pestaña HTML de WordPress:

Botón completo con Clases

Copie el siguiente código desde la pestaña HTML:

See the Pen
Código1 by katyavillo (@katyavillo08)
on CodePen.

Botón redondo con Clases

Copie el siguiente código desde la pestaña HTML:

See the Pen
Botón redondo by katyavillo (@katyavillo08)
on CodePen.

Icono

Copie el siguiente código desde la pestaña HTML:

See the Pen
Icono UEC by katyavillo (@katyavillo08)
on CodePen.

Icono redes sociales

Copie el siguiente código desde la pestaña HTML:

See the Pen
Botón redes by katyavillo (@katyavillo08)
on CodePen.

Botón con vínculo e icono

Copie el siguiente código desde la pestaña HTML:

See the Pen
Boton icono UEC by katyavillo (@katyavillo08)
on CodePen.

Tooltip con icono

Título con hover

Copie el siguiente código desde la pestaña HTML:

See the Pen
Tooltip UEC by katyavillo (@katyavillo08)
on CodePen.

Carrusel de programas (17 programas)

Encuentre su programa

Copie el siguiente código desde la pestaña HTML:

See the Pen
Carrusel de programas by katyavillo (@katyavillo08)
on CodePen.

Carrusel de programas

Copie el siguiente código desde la pestaña HTML:

See the Pen
Carrusel programas by katyavillo (@katyavillo08)
on CodePen.

Contador

Días para el evento

1. Copie el siguiente código, guárdelo en un html y súbalo al portal desde «medios».
2. Posteriormente añádalo en la página como un iframe.

See the Pen
Contador Jornadas de Derecho Penal by katyavillo (@katyavillo08)
on CodePen.

Altura de textarea

[contact-form-7 id=»512296″ title=»Convocatoria concurso estudiantil Legal Strategy Lab»]

1. Copie el siguiente código, y peguelo en el campo CSS Adicional.

See the Pen
Height textarea by katyavillo (@katyavillo08)
on CodePen.

Shortcodes

Los shortcodes se utilizan en el modo de edición visual y sirven para insertar elementos complejos sin necesidad de código HTML. Algunos de los códigos de la parte superior los incluyen; a continuación se presentan otros shortcodes implementados en el Portal Institucional.

Grupo de 3 tabs

Copie el siguiente código en la pestaña «Visual»:

See the Pen
Shortcode tabs by José Luis Quintero (@jotaeleq)
on CodePen.

Grupo de más de 3 tabs

Copie el siguiente código en la pestaña «Visual»:

See the Pen
Tabs 3+ by José Luis Quintero (@jotaeleq)
on CodePen.

Grupo de tabs verticales

[vertical-tabs-container activeTab=2]
[vertical-tab title=»Título del tab 1″]

Text 1

Text 1 – Vivamus neque lectus, consequat at quam ac, pellentesque bibendum metus. Cras non lacus vehicula, ullamcorper diam sit amet, hendrerit arcu. In congue lorem sed ultrices pulvinar. Ut tincidunt augue in nunc consequat, et imperdiet diam venenatis. In sollicitudin libero in nisl elementum fermentum. Sed ante felis, lacinia eget justo sed, egestas hendrerit mauris. Fusce consequat eros odio, vitae porttitor nunc venenatis a. Vestibulum quis dictum nisl. Donec sagittis condimentum lectus nec rhoncus. Curabitur consectetur rutrum rutrum. Phasellus lobortis massa a bibendum egestas.

[/vertical-tab]
[vertical-tab title=»Título del tab 2″]

Text 2

Text 2 – Nunc quis nisi elit. Quisque vel libero porta, viverra leo placerat, pellentesque arcu. Integer faucibus metus at dolor fringilla, sit amet auctor elit auctor. Fusce tempor maximus justo, eget bibendum dolor ullamcorper vitae. Integer turpis neque, fringilla in pellentesque ut, pellentesque congue lacus. Quisque et urna erat. Curabitur ut ex ut nisi rutrum congue. Morbi mollis tortor metus, eget imperdiet justo condimentum elementum. Praesent sed feugiat diam. Cras quis pharetra lorem, in dignissim metus. Integer tempus tortor non felis bibendum egestas. Cras velit nulla, ultricies ut volutpat quis, pharetra eu neque. Duis consequat malesuada pretium.

[/vertical-tab]
[vertical-tab title=»Título del tab 3″]

Text 3

Text 3 -Vivamus neque lectus, consequat at quam ac, pellentesque bibendum metus. Cras non lacus vehicula, ullamcorper diam sit amet, hendrerit arcu. In congue lorem sed ultrices pulvinar. Ut tincidunt augue in nunc consequat, et imperdiet diam venenatis. In sollicitudin libero in nisl elementum fermentum. Sed ante felis, lacinia eget justo sed, egestas hendrerit mauris. Fusce consequat eros odio, vitae porttitor nunc venenatis a. Vestibulum quis dictum nisl. Donec sagittis condimentum lectus nec rhoncus. Curabitur consectetur rutrum rutrum. Phasellus lobortis massa a bibendum egestas.

[/vertical-tab]
[vertical-tab title=»Título del tab 4″]

Text 4

Text 4 – ivamus neque lectus, consequat at quam ac, pellentesque bibendum metus. Cras non lacus vehicula, ullamcorper diam sit amet, hendrerit arcu. In congue lorem sed ultrices pulvinar. Ut tincidunt augue in nunc consequat, et imperdiet diam venenatis. In sollicitudin libero in nisl elementum fermentum. Sed ante felis, lacinia eget justo sed, egestas

[/vertical-tab]
[vertical-tab title=»Título del tab 5″]

Text 5

Text 5 – Vivamus neque lectus, consequat at quam ac, pellentesque bibendum metus. Cras non lacus vehicula, ullamcorper diam sit amet, hendrerit arcu. In congue lorem sed ultrices pulvinar. Ut tincidunt augue in nunc consequat, et imperdiet diam venenatis. In sollicitudin libero in nisl elementum fermentum. Sed ante felis, lacinia eget justo sed, egestas hendrerit mauris. Fusce consequat eros odio, vitae porttitor nunc venenatis a. Vestibulum quis dictum nisl. Donec sagittis condimentum lectus nec rhoncus. Curabitur consectetur rutrum rutrum. Phasellus lobortis massa a bibendum egestas.

Nunc quis nisi elit. Quisque vel libero porta, viverra leo placerat, pellentesque arcu. Integer faucibus metus at dolor fringilla, sit amet auctor elit auctor. Fusce tempor maximus justo, eget bibendum dolor ullamcorper vitae. Integer turpis neque, fringilla in pellentesque ut, pellentesque congue lacus. Quisque et urna erat. Curabitur ut ex ut nisi rutrum congue. Morbi mollis tortor metus, eget imperdiet justo condimentum elementum. Praesent sed feugiat diam. Cras quis pharetra lorem, in dignissim metus. Integer tempus tortor non felis bibendum egestas. Cras velit nulla, ultricies ut volutpat quis, pharetra eu neque. Duis consequat malesuada pretium.

[/vertical-tab]
[/vertical-tabs-container]

Copie el siguiente código en la pestaña «Visual»:

See the Pen
Vertical tabs by José Luis Quintero (@jotaeleq)
on CodePen.

Acordeón4>

Título 1

…