Esta es una publicación de ejemplo con el objetivo de testear lo siguiente:

  • Imagen de hero determinada.
  • Los distintos shortcodes.

Alerta

Las siguientes alertas están disponibles en este tema.

Éxito

Código:

{{< alert type="success" >}}
Esto es un ejemplo de alerta con `type="success"`.
{{< /alert >}}

Resultado:

Esto es un ejemplo de alerta con type="success".

Peligro

Código:

{{< alert type="danger" >}}
Esto es un ejemplo de alerta con `type="danger"`.
{{< /alert >}}

Resultado:

Esto es un ejemplo de alerta con type="danger".

Advertencia

Código:

{{< alert type="warning" >}}
Esto es un ejemplo de alerta con `type="warning"`.
{{< /alert >}}

Resultado:

Esto es un ejemplo de alerta con type="warning".

Inforamación

Código:

{{< alert type="info" >}}
Esto es un ejemplo de alerta con `type="info"`.
{{< /alert >}}

Resultado:

Esto es un ejemplo de alerta con type="info".

Imagen

Una imagen de ejemplo sin ningún atributo.

Código:

{{< img src="/posts/shortcodes/boat.jpg" title="Una barca en el mar" >}}

Resultado:

Una barca en el mar

Una imagen de ejemplo con los atributos height y width.

Código:

{{< img src="/posts/shortcodes/boat.jpg" height="400" width="600" title="Una barca en el mar" >}}

Resultado:

Una barca en el mar

Una imagen de ejemplo centrada con los atributos height y width.

Código:

{{< img src="/posts/shortcodes/boat.jpg" height="400" width="600" align="center" title="Una barca en el mar" >}}

Resultado:

Una barca en el mar

Una imagen de ejemplo con el atributo float.

Código:

{{< img src="/posts/shortcodes/boat.jpg" height="200" width="500" float="right" title="Una barca en el mar" >}}

Resultado:

Una barca en el mar

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas lectus sed leo ultricies ultricies. Praesent tellus risus, eleifend vel efficitur ac, venenatis sit amet sem. Ut ut egestas erat. Fusce ut leo turpis. Morbi consectetur sed lacus vitae vehicula. Cras gravida turpis id eleifend volutpat. Suspendisse nec ipsum eu erat finibus dictum. Morbi volutpat nulla purus, vel maximus ex molestie id. Nullam posuere est urna, at fringilla eros venenatis quis.

Fusce vulputate dolor augue, ut porta sapien fringilla nec. Vivamus commodo erat felis, a sodales lectus finibus nec. In a pulvinar orci. Maecenas suscipit eget lorem non pretium. Nulla aliquam a augue nec blandit. Curabitur ac urna iaculis, ornare ligula nec, placerat nulla. Maecenas aliquam nisi vitae tempus vulputate.

División

Este tema soporta dividir la página en tantas columnas como desee.

División en dos columnas

Código:

{{< split 6 6 >}}
##### Columna Izquierda

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas lectus sed leo ultricies ultricies.

---

##### Columna Derecha

Fusce ut leo turpis. Morbi consectetur sed lacus vitae vehicula. Cras gravida turpis id eleifend volutpat.

{{< /split >}}

Resultado:

Columna Izquierda

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas lectus sed leo ultricies ultricies.

Columna Derecha

Fusce ut leo turpis. Morbi consectetur sed lacus vitae vehicula. Cras gravida turpis id eleifend volutpat.

División en tres columnas

Código:

{{< split 4 4 4 >}}
##### Columna Izquierda

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas lectus sed leo ultricies ultricies.

---

##### Columna Central

Aenean dignissim dictum ex. Donec a nunc vel nibh placerat interdum.

---

##### Columna Derecha

Fusce ut leo turpis. Morbi consectetur sed lacus vitae vehicula. Cras gravida turpis id eleifend volutpat.

{{< /split >}}

Resultado:

Columna Izquierda

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas lectus sed leo ultricies ultricies.

Columna Central

Aenean dignissim dictum ex. Donec a nunc vel nibh placerat interdum.

Columna Derecha

Fusce ut leo turpis. Morbi consectetur sed lacus vitae vehicula. Cras gravida turpis id eleifend volutpat.

Espacio Vertical

Da espacio vertical entre dos líneas.

Código:

Esta es la primera línea.
{{< vs 4>}}
This is line two. It should have `4rem` vertical space with previous line.
Esta es la segunda línea. Debería tener un espacio vertical `4rem` con la línea previa.

Resultado:

Esta es la primera línea.

Esta es la segunda línea. Debería tener un espacio vertical 4rem con la línea previa.

Vídeo

Código:

{{< video src="/videos/sample.mp4" >}}

Resultado:

Video por Rahul Sharma de Pexels.