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
El externado en los medios
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
Inscríbase aquí
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
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
Título del carrusel
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
- Copie el siguiente código, guárdelo en un html y súbalo al portal desde «medios».
- 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
- 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
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.
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.
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.
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
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.
Copie el siguiente código en la pestaña «Visual»:
See the Pen
Vertical tabs by José Luis Quintero (@jotaeleq)
on CodePen.
Acordeón
Copie este código en la pestaña «Visual»:
See the Pen
Accordion by José Luis Quintero (@jotaeleq)
on CodePen.