# Crear un Sitio con el Template Minimal

# Introducción

Te damos la bienvenida a un nuevo tutorial de la serie de entrenamiento de Modyo. Este tutorial se enfoca en la creación de un sitio utilizando los componentes que Modyo ofrece del template Minimal.

# Requisitos Previos

Necesitas tener conocimientos de:

  • HTML
  • CSS
  • La plataforma Modyo

# Paso 1: Crear sitio en Modyo

Dentro de nuestra cuenta de Modyo lo pimero que vamos a hacer es crear nuestro nuevo sitio:

  1. Desde el menu lateral, expande Channels y haz click en Sites.
  2. Haz click en + New Site y llenamos los valores:
This image shows the end result from this tutorial.

# Paso 2: Copiar código de ejemplos en el Home

Dentro del Minimal tenemos algunos ejemplos de código pre hecho para acelerar el desarrollo.

En este caso utilizaremos el Hero copiando el código con botón Copy to clipboard y pegando código código en un widget HTML en el Home que llamaremos Hero.

This image shows the Hero html code.

Luego apretamos preview para ir viendo nuestro Home y repetimos el proceso con las los ejemplos de Text and Image block, Cards, y Testimonial, lo que nos dará como resultado 4 widgets de esta manera:

This image shows the four widgets for our site.

Y un sitio así en el preview:

This image shows the preview of the site.

# Paso 3: Agregar titulos

Para agregar títulos a nuestros pisos, vamos a agregar un nuevo widget de html y lo posicionamos entre los widgets de Hero y Text and image y otro entre los widgets Text and image y Cards.

En este nuevo widget pegaremos el siguiente código:

<div class="mt-5 pt-5 mb-5 text-center">
	<h2 class="font-weight-bold">Lorem ipsum dolor sit amet</h2>
	<p>Consectetur adipiscing elit. Integer sapien ante, efficitur in ante vitae, gravida tincidunt mauris.</p>
</div>

Nuestro testimonial no tendrá título pero sí debemos separar el piso y para esto le agregamos una clase mt-5 al primer div que tiene el widget.

# Paso 4: Crear Space y Types

Ahora que ya tenemos un sitio con cuatro bloques, debemos llenarlos de contenido, para lo que utilizaremos la aplicación de contenidos de Modyo, generando cuatro Tipos de contenidos; Hero, Text and image, Cards, y Testimonial, siguiendo estos pasos:

  1. Desde el menú lateral, haz click en el logo para regresar al menú principal.
  2. Expande Content, y haz click en Espacios.
  3. Haz click en + Nuevo Espacio y llena los siguientes valores:
This image shows the values for the new space.

En el cual vamos a crear cuatro Tipos de contenido:

Nombre Cardinality
Hero Multiple
Text image block Multiple
Cards Multiple
Testimony Single

Para crear un tipo de contenido, sigue estos pasos:

  1. Dentro de nuestro Espacio, en el menú lateral, haz click en Tipos.
  2. Haz click en + Nuevo Tipo y llena los valores del Nombre, Identificador, y Cardinalidad.
  3. Repite estos pasos para el resto de los Tipos de contenido.

Luego agregamos los campos para cada Tipo:

# Hero

Tipo de campo Nombre
Asset Image
Multiline text Description
Single line text Button text
Single line text Button link

# Text image block

Tipo de campo Nombre
Asset Image
Multiline text Description

# Cards

Tipo de campo Nombre
Asset Image
Multiline text Description
Single line text Button text
Single line text Button link

# Testimony

Tipo de campo Nombre
Multiline text Testimony
Asset Image
Single line text Name
Single line text Subtext

# Paso 5: Crear Contenidos

Una vez creados los Tipos de contenido, estamos listos para crear el contenido.

  1. Dentro del Espacio, en el menú lateral, haz click en Entradas.
  2. Haz click en + Nueva Entrada, selecciona el Tipo Hero y para el nombre utilizaremos un texto genérico a modo de ejemplo.
This image shows the New Entry window.

y llenamos los siguientes campos con:

Campo Valor
Name Lorem ipsum dolor sit amet
Image Hero 01 alt
Description Maecenas a mauris dapibus, sodales massa in, eleifend nisl. Suspendisse facilisis ante nec malesuada tempus. Nulla varius diam lorem, mollis condimentum leo semper quis. Donec lobortis, mi quis tristique commodo.
Button text Learn more
Button link #

Luego de tener los campos listos, guardamos, y publicamos la entrada. Ahora clona la entrada utilizando los puntos al lado del botón de publicar y cambiamos los siguientes campos:

Campo Valor
Name Morbi feugiat tortor quis massa facilisis
Image Hero 02 alt

Luego guardamos y publicamos.

Una vez terminado el proceso con los dos Heros de nuestro sitio, vamos a repetir el proceso para los otros tipos de contenido, partiremos con el de Text image block:

# Text image block

Campo Valor
Name Etiam viverra lorem non diam fermentum iaculis
Image Img 01 alt
Description Ut non orci eget mauris efficitur sodales sit amet in purus. Aenean vel magna dui. Fusce iaculis porttitor turpis at consectetur.

Clonamos la entrada y cambiamos los campos:

Campo Valor
Name Curabitur ultricies ullamcorper ligula
Image Img 02 alt

# Cards

Campo Valor
Name Praesent ac mi
Image Card 01 alt
Description Eu nisl porttitor ullamcorper vel eu mi
Button text Learn more
Button link #

Nuevamente clonamos las entradas del tipo Cards y cambiamos los campos:

Campo Valor
Name Mauris in dui
Image Card 02 alt
Campo Valor
Name Tincidunt ex dictum
Image Card 03 alt

# Testimony

Campo Valor
Name Testomony
Testimony Nulla eget justo consectetur, sagittis orci nec, tempus justo. Aliquam vel libero et ex.
Image Avatar alt
Name Hannah Smith
Subtext Product Designer

No olvides publicar todas las entradas, y recuerda que seleccionando el checkbox puedes publicar todas al mismo tiempo con las Bulk Actions.

Al finalizar tendremos una vista así:

This image shows the Entries window with all the entries created during this tutorial.

# Paso 6: Conectar nuestro Sitio con Content

Liquid es un lenguaje para accesar el contenido que haz creado en tus Espacios y desplegarlo en tus Sitios. Para realizar esta conexión, sigue estos pasos:

  1. Desde el menú lateral, haz click en el logo para regresar al menú principal.
  2. Expande Channels, y haz click en Sitios.
  3. Selecciona tu sitio y luego haz click en Home.
  4. Haz click en el widget Hero y reemplaza el código:

# Hero

{% assign entries = spaces['my-space'].types['hero'].entries | paginated: 2 %}
<div id="exampleHero" class="carousel slide hero_slide" data-ride="carousel">
	<div class="carousel-inner">
		{% for entry in entries %}
		<div class="carousel-item {% if forloop.first %}active{% endif %}">
			<div class="row align-items-center">
				<div class="col-6">
					<h2 class="display-4 font-weight-bold">{{entry.meta['name']}}</h2>
					<p class="lead">{{entry.fields['description']}}</p>
					<a class="btn btn-primary" href="{{entry.fields['Button link']}}" role="button">{{entry.fields['Button text']}}</a>
				</div>
				<div class="col-6">
					<a class="carousel-control-prev" href="#exampleHero" role="button" data-slide="prev">
						<span class="carousel-control-prev-icon" aria-hidden="true"></span>
						<span class="sr-only">Previous slide</span>
					</a>
					<a class="carousel-control-next" href="#exampleHero" role="button" data-slide="next">
						<span class="carousel-control-next-icon" aria-hidden="true"></span>
						<span class="sr-only">Next slide</span>
					</a>
					<figure class="overflow-hidden rounded m-0 my-2">
						<img src="{{entry.fields['image'].url}}" alt="People working at a table">
					</figure>
				</div>
			</div>
		</div>
		{% endfor %}
	</div>
</div>

El código Liquid, denotado por o {% %}, manda a llamar las entradas hero realizadas previamente en Content. Luego abre un ciclo en donde despliega los campos del Hero junto con HTML para generar un efecto 'carrusel'.

# Text and image

{% assign entries = spaces['my-space'].types['text-image-block'].entries | paginated: 2 %}
<div>
	{% for entry in entries %}
	<div class="row d-flex justify-content-center align-items-center mb-4">
		<div class="col-12 col-md-4 {% if forloop.last %}order-2 order-md-1{% endif %}">	
			<figure class="m-0">	
				<img src="{{entry.fields['Image'].url}}" alt="People working" class="rounded shadow">	
			</figure>	
		</div>	
		<div class="col-12 col-md-6 py-3 {% if forloop.first %}order-1 order-md-2{% endif %}">	
			<h3 class="font-weight-bold">{{entry.meta['name']}}</h3>	
			<p>{{entry.fields['Description']}}</p>	
		</div>	
	</div>
	{% endfor %}
</div>

Este código manda a llamar las entradas de tipo 'text-image-block', itera sobre ellas utilizando un for y las despliega de forma distinta dependiendo si es texto o imagen usando un if.

# Cards

{% assign entries = spaces['my-space'].types['cards'].entries | paginated: 3 %}
<div class="row">
	{% for entry in entries %}
	<div class="col-12 col-md-4">
		<div class="card border rounded overflow-hidden">
			<figure class="m-0">
				<img src="{{entry.fields['Image'].url}}" alt="People working at a table">
			</figure>
			<figcaption class="card-body">
				<h3 class="h5 card-title font-weight-bold">{{entry.meta['name']}}</h3>
				<p class="card-text">{{entry.fields['Description']}}</p>
				<a href="{{entry.fields['Button link']}}" class="btn btn-primary">{{entry.fields['Button text']}}</a>
			</figcaption>
		</div>
	</div>
	{% endfor %}
</div>

Este código genera un efecto de Cards, desplegando la información de las entradas creadas previamente.

# Testimony

{% assign testimony = spaces['my-space'].types['testimony'].entry %}
<div class="quote py-5 mt-5">
	<div class="d-flex justify-content-center">	
		<span class="text-primary d-flex justify-content-center align-items-center">	
			<svg
					 width="70"
					 height="70"
					 viewBox="0 0 30 30"
					 fill="none"
					 xmlns="http://www.w3.org/2000/svg"
					 >	
				<path d="m29.448298,27.368956l0,-12l-8,0c0,-4.41 3.586,-8 8,-8l0,-4c-6.617,0 -12,5.383 -12,12l0,12l12,0z" fill="currentColor" />	
				<path d="m12.606922,27.368956l0,-12l-8,0c0,-4.41 3.586,-8 8,-8l0,-4c-6.617,0 -12,5.383 -12,12l0,12l12,0z" fill="currentColor" />	
			</svg>	
		</span>	
	</div>	
	<div class="pt-4">	
		<h3 class="text-dark h1 m-0 font-weight-bold text-center">{{testimony.fields.testimony}}</h3>	
		<hr class="my-5 col-3">	
		<figure class="mx-auto rounded-circle overflow-hidden border border-light" style="width: 50px;">	
			<img src="{{testimony.fields['image'].url}}" alt="{{testimony.fields['Name']}} Avatar">
		</figure>	
		<h4 class="m-0 text-center">{{testimony.fields['Name']}}</h4>	
		<small class="d-block text-muted text-center">{{testimony.fields['Subtext']}}</small>	
	</div>	
</div>	

Luego de que previsualizamos nuestros cambios y estamos conformes con el resultado, el siguiente paso será publicar nuestro Home.

# Conclusiones

¡Felicidades! Haz creado tu primer sitio creado directo desde la plantilla Minimal y conectado a Content utilizando Liquid.

Encuentra más información sobre Modyo:

Last Updated: 14/9/2022,