| Estás en: Inicio > Partners y Diseñadores > Plantillas > Crea una nueva plantilla desde cero | Inicio |
Crea una nueva plantilla desde cero
Para crear una plantilla nueva hay que acceder a "Apariencia > Crea/Edita tus plantillas" y desde el bloque de acciones pulsar en "Crear nueva plantilla":
Tras esta acción hay que rellenar un formulario con información sobre la plantilla. Este formulario se divide en tres partes:
Primero los datos básicos, tales como Nombre, descripción, imagen y tipo de plantilla:
En segundo lugar los Elementos disponibles de la plantilla:
Y por último la configuración de la plantilla, desde donde se puede especificar tamaños de las imágenes, de forma que al subir una imagen será redimensionada al tamaño que corresponda:
Esta configuración puede cambiarse en cualquier comento, simplemente con pulsar el enlace "Propiedades" de la plantilla:
Una vez introducido los datos se mostrará la ventana de edición de la plantilla:
- Zona de edición del archivo seleccionado o creación de uno nuevo.
- Listado de archivos ya creados.
- Formulario para subir archivos.
Creación del código de la plantilla
layout.liquid'. Es simplemente un archivo con contenido html y etiquetas liquid.El contenido de este archivo es usado en cualquier página de la web y se encarga de incluir el resto de archivos de la plantilla. Estos archivos son: 'home.liquid', 'list.liquid', 'product.liquid', 'blog.liquid', 'post.liquid' y 'archives.liquid'.
Algunos de estos archivos dependerán del tipo de web que tengamos. Por ejemplo, si tenemos una web sin el módulo de productos activo, no necesitaremos 'list.liquid' ni 'product.liquid'.
Existen otros archivos como 'map.liquid', 'cart.liquid', 'custom_error_page.liquid', 'search.liquid', 'tag.liquid' y 'group.liquid', pero no son necesarios ya que si no los creamos nosotros 3Sellers los sustituye por unos por defecto.
Además, podemos crear tantos archivos .liquid como necesitemos y estos podrán ser incluidos desde otros archivos o llamados como páginas independientes.
Para ver un listado de los distintos archivos .liquid consulte la Referencia Liquid.
Paso 1 - layout.liquid
Este archivo contiene la estructura básica de la web. Su contenido se muestra en cada página de la web y debe tener la etiqueta liquid necesaria para llamar al resto de archivos. Su función principal es la de definir un documento html válido, con una sección head y un body.
El head será usado para llamar a los archivos de estilos y javascript entre otros y en el body usaremos la etiqueta liquid 'content_for_layout' para incluir el contenido que genere 3Sellers.
Siempre debe existir un archivo 'layout.liquid' ya que de otra forma seremos incapaces de navegar por la web.
Lo primero es crear una estructura de web básica:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>{{ page_title | truncate: 120 }}</title>
<meta content="{{ page_description | truncate: 150 }}" name="description" />
<meta content="{{ page_keywords | truncate: 150 }}" name="keywords" />
<meta content="{{ locale_name }}" name="language" />
</head>
<body>
{{ content_for_layout }}
</body>
</html>
Este código nos puede servir como estructura base para cualquier plantilla que queramos crear en 3Sellers.
A partir de aquí podemos ampliar su contenido. Pero antes vamos a analizar las etiquetas que hemos usado:
{{ page_title }}- Cada página de nuestra web tiene un título propio que será mostrado con esta etiqueta. En caso de que el título sea muy largo usamos el filtro liquid 'truncate' con parámetro "120" para que sólo muestre los 120 primeros carácteres.
{{ page_description }}- Al igual que el anterior, nos muestra la descripción de la página. 3Sellers genera este contenido para algunas páginas. Puede personalizarse este contenido para cualquier página desde la sección "Marketing".
{{ page_keywords }}- Lo mismo que la etiqueta anterior, pero para las palabras claves de la página que estemos viendo.
{{ locale_name }}- Devuelve el idioma en el que estamos viendo la web.
Lo primero que vamos a hacer es añadir la etiqueta 'analytics_code'. Esta etiqueta se encarga de mostrar el código de Google Analytics que definamos desde el panel de Administración de la web. Lo recomendable es incluirla justo antes del cierre de la etiqueta html 'body':
...
<body>
{{ content_for_layout }}
{{ analytics_code }}
</body>
</html>
Antes de continuar vamos a definir la estructura visual de nuestra web:
Por lo tanto necesitamos añadir un poco de html y css.
Añadiremos primero la linea de código que llamará a la hoja de estilos css y luego crearemos el archivo.
En la sección "head" añadiremos lo siguiente:
<link rel="stylesheet" href="{{stylesheet_route}}/style.css" type="text/css" media="screen" />
La etiqueta 'stylesheet_route' nos devuelve la ruta al directorio donde descansan las hojas de estilos.
Más adelante crearemos los estilos. Ahora modificaremos la sección body:
<body>
<div id="wrap">
<div id="header">
<!-- header -->
</div>
<div id="main">
{{ content_for_layout }}
</div>
<div id="footer">
<!-- footer -->
</div>
</div>
</body>
Una vez hecho esto añadiremos el código necesario para obtener los menus principales que creemos en el panel de administación y lo pondremos en el bloque "header":
...
<div id="header">
<ul id="menu">
{% for menu in main_menu %}
<li>
<a href="{{ menu.url }}" title="{{ menu.name }}">{{ menu.name }}</a>
</li>
{% endfor %}}
</ul>
</div>
Y añadiremos información de nuestra web en el pie de la web:
...
<div id="footer">
<p>Powered by <a href="http://www.3sellers.com">3Sellers</a></p>
</div>
...
Con todo esto nuestro "layout.liquid" quedaría de la siguiente manera:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>{{ page_title | truncate: 120 }}</title>
<meta content="{{ page_description | truncate: 150 }}" name="description" />
<meta content="{{ page_keywords | truncate: 150 }}" name="keywords" />
<meta content="{{ locale_name }}" name="language" />
<link rel="stylesheet" href="{{stylesheet_route}}/style.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrap">
<div id="header">
<ul id="menu">
{% for menu in main_menu %}
<li>
<a href="{{ menu.url }}" title="{{ menu.name }}">{{ menu.name }}</a>
</li>
{% endfor %}
</ul>
</div>
<div id="main">
{{ content_for_layout }}
</div>
<div id="footer">
<p>Powered by <a href="http://www.3sellers.com">3Sellers</a></p>
</div>
</div>
</body>
</html>
Introduciremos este código en el area de edición, escribiremos "layout.liquid" en el campo de "Nombre de archivo" y pulsaremos "Guardar".
En la sección "Tus archivos" veremos que se ha añadido un nuevo elemento a la lista con nombre 'layout.liquid'.
Desde este elemento podremos editarlo o eliminarlo siempre que queramos.
El asterisco indica que el archivo ha sido editado y todavia no ha sido publicado. Cualquier archivo marcado con asterisco podrá ser restaurado siempre que queramos pulsando "Deshacer los cambios". No lo vamos a publicar aún porque no hemos terminado.
Paso 2 - style.css
Ya estamos preparados para crear nuestro segundo archivo. En este caso el archivo 'style.css', el cual definirá los estilos css de la web. Podríamos haberle puesto otro nombre si hubieramos querido.
Pulsamos en "Nuevo archivo" y se los limpiará la ventana de edición y el campo de "Nombre de Archivo".
Añadiremos el siguiente contenido:
a{color: #00F; text-decoration: none;}
a:hover{color: #F90; }
img{border:0;}
#wrap{ width: 900px; margin: 50px auto;}
#header{border-bottom: 1px solid #000}
ul#menu{
display:block;height:1%;overflow:auto;
list-style: none;
}
ul#menu li{float:left;}
ul#menu li a{display:block; padding: 5px 10px;}
#intro{
display:block; height: 1%; overflow: auto;
}
.content-left{
float:left;
width: 66%;
}
.content-right{
float:left;
width: 33%
}
ul#categories{
list-style: none;
}
ul#categories li{
margin-bottom: 10px;
border-bottom:1px dotted #ccc;
}
ul#categories li a{display:block; width: 100%;}
#footer{
border-top: 1px solid #000;
}
Escribiremos "style.css" en el campo de "Nombre de Archivo" y pulsaremos "Guardar".
Paso 3 - home.liquid
Una vez creada la estructura básica de nuestra web y definido el estilo css es hora de crear nuestro primer archivo de contenido.
El archivo 'home.liquid' será mostrado siempre que entremos en la raiz de nuestra web. Su función es la de ofrecer una entrada a la web para nuestros usuarios.
En nuestro ejemplo vamos a mostrar una imágen, mostrar algo de texto, los últimos artículos de nuestro blog y un listado de las categorías de productos.
Empezaremos por la estructura:
<div id="intro">
<div class="content-left">
</div>
<div class="content-right">
</div>
</div>
Y luego por la imagen principal que estará contenida dentro del bloque con clase "content-left":
<div id="main_image">
{% if main_images.size > 0%}
<a href="{{ main_images[0].href }}"><img src="{{ main_images[0].image_url }}" /></a>
{% endif %}
</div>
Desde el panel de administración podemos crear todas las imágenes principales que queramos, pero en esta plantilla vamos a usar únicamente la primera.
A continuación el bloque de texto y los últimos artículos del blog:
<p id="home-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut accumsan accumsan turpis, in faucibus nunc scelerisque pretium. Phasellus hendrerit interdum est vitae feugiat. Curabitur dictum, tellus id convallis dapibus, sem orci tempus dolor, in ultricies augue odio a nibh. Nam mattis varius luctus. Pellentesque ipsum lacus, dictum ac tristique vel, commodo in leo. Integer ut interdum enim. Nam tristique dui et magna pretium ut semper felis consectetur. Vestibulum et felis at metus adipiscing ultricies in quis massa. Phasellus ut tellus et ipsum congue auctor nec sit amet mauris. Praesent imperdiet, nunc vel laoreet pretium, enim orci consectetur nunc, sit amet ultricies felis justo vel arcu. Donec at ipsum purus. Mauris sed nisi at augue fringilla tempor at et est. Duis sit amet mauris lorem, eget venenatis arcu. Ut semper feugiat magna, id luctus felis cursus eget. Vivamus ut justo purus, sagittis semper sapien. Sed id justo id nisi ultricies sollicitudin id et purus. Vivamus dignissim arcu in dolor luctus at dictum sem molestie. Vestibulum elementum felis vitae dui placerat in luctus risus viverra. Phasellus vitae justo in ligula pretium adipiscing.
</p>
<ul id="latest-posts">
{% if latest_articles.size > 0%}
{% for post in latest_articles limit: 4 %}
<li><a href="{{ post.url }}">{{ post.title }}</a></li>
{% endfor %}
{% else %}
<li>No hay artículos recientes...</li>
{% endif %}
</ul>
Y en el bloque lateral escribimos el siguiente código:
<ul id="categories">
{% for category in categories %}
<li><a href="{{ category.url }}" title="{{ category.name }}">{{ category.name }}</a></li>
{% endfor %}
</ul>
Por defecto "latest_articles" contiene una lista con los últimos 10 artículos, pero en nuestro caso queremos los últimos 4, por lo que usamos el parámetro "limit" con valor "4".
Y bien, ya tenemos nuestro archivo "home.liquid".
<div id="intro">
<div class="content-left">
<div id="main_image">
{% if main_images.size > 0%}
<a href="{{ main_images[0].href }}"><img src="{{ main_images[0].image_url }}" /></a>
{% endif %}
</div>
<p id="home-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut accumsan accumsan turpis, in faucibus nunc scelerisque pretium. Phasellus hendrerit interdum est vitae feugiat. Curabitur dictum, tellus id convallis dapibus, sem orci tempus dolor, in ultricies augue odio a nibh. Nam mattis varius luctus. Pellentesque ipsum lacus, dictum ac tristique vel, commodo in leo. Integer ut interdum enim. Nam tristique dui et magna pretium ut semper felis consectetur. Vestibulum et felis at metus adipiscing ultricies in quis massa. Phasellus ut tellus et ipsum congue auctor nec sit amet mauris. Praesent imperdiet, nunc vel laoreet pretium, enim orci consectetur nunc, sit amet ultricies felis justo vel arcu. Donec at ipsum purus. Mauris sed nisi at augue fringilla tempor at et est. Duis sit amet mauris lorem, eget venenatis arcu. Ut semper feugiat magna, id luctus felis cursus eget. Vivamus ut justo purus, sagittis semper sapien. Sed id justo id nisi ultricies sollicitudin id et purus. Vivamus dignissim arcu in dolor luctus at dictum sem molestie. Vestibulum elementum felis vitae dui placerat in luctus risus viverra. Phasellus vitae justo in ligula pretium adipiscing.
</p>
<ul id="latest-posts">
{% if latest_articles.size > 0%}
{% for post in latest_articles limit: 4 %}
<li><a href="{{ post.url }}">{{ post.title }}</a></li>
{% endfor %}
{% else %}
<li>No hay artículos recientes...</li>
{% endif %}
</ul>
</div>
<div class="content-right">
<ul id="categories">
{% for category in categories %}
<li><a href="{{ category.url }}" title="{{ category.name }}">{{ category.name }}</a></li>
{% endfor %}
</ul>
</div>
</div>
¿Functiona?
Ahora podemos pulsar "Publicar plantilla" para ver los resultados o en "Previsualizar la plantilla" para ver como queda sin públicarla:
Necesitaremos crear categorías y artículos, así como menús superiores e imagenes centrales.
Aqui una demostración del resultado:
Si pulsamos en los enlaces de los artículos o las categorías veremos que 3sellers nos muestra unas plantillas prediseñadas dentro de nuestro layout:
Si no quisieramos crear estos archivos, podríamos usar css para adaptar estas vistas a nuestro gusto y tendríamos nuestra plantilla terminada. Así de sencillo.
- Adapta tu plantilla para el nuevo editor
- Creando una nueva plantilla para el editor en vivo
- Crea una plantilla a partir de una existente
- Vista general de 'edita tus plantillas'
- Referencia Liquid
- Referencia Liquid - Drops
- Referencia Liquid - Ficheros
- Creando bloques de contenido
- Creando estilos personalizables
- Formularios de contacto
- Creación de un fichero de ayuda
- Archivo de personalización de plantilla
- Ver otros artículos relacionados con plantillas liquid
| Estás en: Inicio > Partners y Diseñadores > Plantillas > Crea una nueva plantilla desde cero | Inicio |