Cómo utilizar el marco Gantry para WordPress - Calendae | Informática, Electrónica, CMS, Ciberseguridad

Cómo utilizar el marco Gantry para WordPress

Hola y mil gracias por leerme. Te habla Samuel López y esta vez vamos a hablar sobre Cómo utilizar el marco Gantry para WordPress

Los marcos ofrecen un nuevo nivel de control sobre el desarrollo de sitios web. Gantry es uno de varios marcos disponibles que amplían su capacidad para diseñar y editar sitios web y temas sin conocimientos de programación.

Gantry se basa en un sistema de cuadrícula 960 sobre el que puede leer en nuestro artículo sobre cuadrículas 960. También cubrimos Gantry para Joomla en otro tutorial.

Vale la pena el esfuerzo de aprender a usar un marco como Gantry si planea producir muchos sitios rápidamente.

En este tutorial práctico, le mostraremos los conceptos básicos absolutos sin detalles que lo distraigan, y estará listo y funcionando en aproximadamente 15 minutos con un sitio estructurado.

Lo que vas a aprender

Le mostraremos cómo instalar el sistema de red y un modelo básico gratuito que puede obtener de gantry-framework.org/download.

Después de la instalación, demostraremos:

  1. Creación y posicionamiento de menús
  2. Adición y colocación de logotipos
  3. Agregar widgets de la barra lateral
  4. Elija uno de los estilos predefinidos estándar

El propósito aquí es presentarle el concepto de marco a través de ejercicios simples que demuestran las características principales. Aprenderá lo suficiente para ayudarlo a decidir si Gantry es la opción correcta.

Cuando haya terminado con este tutorial, vaya a gantry-framework.org que tiene documentación avanzada sobre el uso de Gantry.

Paso 1. Descarga e instala

tutuploadsStep_1._Download_and_installation.png

Se requieren dos cosas para implementar Gantry en el sitio; el marco y el tema predeterminado. Deberá instalarlos por separado y eso es lo que hemos hecho en este tutorial. Ambos se pueden encontrar a través de las áreas de instalación de plugins y temas en el administrador de WordPress.

La alternativa es utilizar RocketLauncher desde http://www.gantry-framework.org/download que es un paquete completo de WordPress, marco y tema predeterminado más datos de muestra ya instalados y configurados.

tutuploadsmedia_1323118830084_500afe320dd6d7043ed6790ba6cf9a9c.png

En el área de administración de su sitio de WordPress, busque caballete en la sección de plugins, y luego nuevamente en la sección de temas. Instale y active ambos.

tutuploadsmedia_1323119435825_7bf125688cb848c8cccaa4c0b19ccfbd.png

Cuando visite el sitio en este punto, estará en blanco.

Para que realmente pueda ver algo en su sitio, vaya a Configuración> Lectura y configure la página de inicio en una página estática.

Ahora comencemos a dar forma a la página. Agreguemos el menú.

Paso 2. Agregar el menú

tutuploadsStep_2_185ad5f8d9075dce4cc08c99a26a1941.png

Vaya a Apariencia> Menús y cree un menú personalizado.

tutuploadsmedia_1323119937324_06679fb3bf743ff7fb4954a507939e3a.png
  1. Vaya a Apariencia> Widgets.
  2. Expanda la ubicación de navegación.
  3. Arrastre y suelte el menú Gantry en la navegación.

tutuploadsStep_3_126c702aa3ee5cf1582241fd33afbd0c.png

Cuando miras la lista de ubicaciones en el lado derecho del menú, hay una lista bastante grande. Cada uno de estos corresponde a una fila en la página. Cada uno es similar y todos se comportan igual excepto por el contenido y la ubicación de la barra lateral. Si aprende a ajustar la posición de la cabeza, también podrá aplicar las mismas técnicas a todas las demás posiciones.

tutuploadsmedia_1323120179766_7dc4cb0419103d731e1217342f4ad8c5.png

Expanda el widget del menú Gantry para configurarlo. Elija el menú personalizado que creó en el menú desplegable.

Gantry agrega un menú desplegable animado altamente personalizable a WordPress. Puede jugar con estos y probar los efectos, pero para seguir avanzando en este tutorial, la configuración predeterminada estará bien. También puede elegir entre un menú Fusion o un menú dividido. Si el menú no aparece en el modelo que estás usando, prueba con el otro.

Si no ha creado un menú personalizado, es posible que desee seleccionar Mostrar menú en blanco para que la ubicación sea visible incluso si no hay ningún menú.

tutuploadsmedia_1323121333918_dba0e63b2ca35b02eaebe8611bc0d027.png

Así es como se ve su sitio con el menú habilitado. Ahora pongamos algo de identidad en el sitio con el logo.

tutuploadsmedia_1323121669632_af120cb8725218d67c86eeaf58754d47.png
  1. Vaya a Apariencia> Widgets.
  2. Expanda la sección Encabezado.
  3. Arrastre y suelte el logotipo de Gantry en la sección Encabezado.

Agreguemos un banner de texto.

tutuploadsmedia_1323121869885_3ee49cfc059eb17feab95ff81525d260.png
  1. Busque el widget Divider y arrástrelo debajo del widget del logotipo de pórtico.
  2. Ahora busque el widget de texto personalizado y arrástrelo debajo del widget divisor.
tutuploadsmedia_1323122068146_e201e673e8ab9cc0461d1195164a1b0a.png

Edite el widget de texto como lo haría normalmente y guárdelo.

tutuploadsmedia_1323122222617_241f3950aa02ceb485877e0458cd68d8.png

Ahora hemos puesto un logotipo y algo de texto de encabezado y está empezando a parecer un sitio web. Pero el texto está demasiado lejos del logo. Adaptamos los postillones.

Paso 4. Ajustar el ancho de las posiciones del widget en una fila

tutuploadsStep_4._Adjusting_the_width_of_widget_positions_in_a_row..png

Hay una nueva entrada en su tablero para el tema Gantry. Haga clic en él para acceder a los controles de Gantry.

tutuploadsmedia_1323122441507_a72a98b423518b668b27885d0f52c7bf.png

Vaya a la pestaña Diseño. Mira la posición del encabezado. Puede ver que hay seis posiciones disponibles en cada fila, pero solo dos están activadas en la posición del encabezado de esta plantilla. Lo sabe porque el número 2 está resaltado y subrayado.

Puede ver el espacio relativo asignado a cada posición en el siguiente gráfico. La «a» es mucho más grande que la «b». Cuando insertamos los widgets, luego agregamos el separador entre ellos, colocamos el logo en «a» y el texto en «b». Queremos asignar más espacio para «b» y menos para «a». luego el texto comienza más cerca del grpahic. Hay un control deslizante útil para hacer esto rápidamente.

Haga clic y arrastre el control deslizante y podrá observar los cambios en los anchos relativos de las dos posiciones.

tutuploadsmedia_1323122803835_bed4a5be7c1fddefdb0d3229c56689ec.png

Moví el control deslizante hacia la izquierda y ahora puedes ver que «a» es más pequeño que «b». La ventana emergente muestra cuántas columnas de un total de 12 están ocupadas por cada posición. En este caso, «a» ocupa 4 columnas. Como estamos en una cuadrícula estándar, podemos estimar la cantidad de píxeles que ocupan 4 x 60 (el ancho de la columna).

Así es como se ve.

tutuploadsmedia_1323123118596_81005470498c92e5 depositi95d0d6582306b.png

El texto se ha movido a la izquierda. Hay 4 columnas dedicadas al logo. Al ajustar el control deslizante, podría moverlo un poco más si quisiera.

Con la excepción de algunas líneas especializadas, todas las demás líneas de contenido funcionan de esta manera. Puede cambiar el número de columnas activas en el modelo, cambiar la asignación de espacio a cada una o forzar a las columnas a mantener su posición incluso cuando están vacías. Esas habilidades se aprenden fácilmente.

Ahora trabajemos en la barra lateral.

Paso 5. Agrega widgets y ajusta la barra lateral

tutuploadsStep_5_50b2e2086c5f6d186d4a3298f78bd300.png

Vuelva a Apariencia> Widgets y arrastre los widgets que desea mostrar a la posición de la barra lateral.

Arriba está el aspecto del sitio después de agregar algunos widgets. Agregué Ajax Search y Gantry Categories, pero puede agregar lo que quiera. Sin embargo, coloque al menos dos en la barra lateral para el siguiente paso.

tutuploadsmedia_1323124291634_b07c894c80a9e81afddfe192cdb4e186.png

Vuelva a la página de widgets y agregue un divisor entre los dos widgets.

tutuploadsmedia_1323124321867_6864d0d9bcbf20be6b6c25255277c00f.png

Ahora tiene dos barras laterales. Ambos en el lado derecho. Puede tener hasta 3 barras laterales, pero las columnas comienzan a volverse demasiado estrechas si se excede. Pero, ¿qué sucede si desea tener un diseño de tres columnas con barras laterales en ambos lados? Para eso, regrese a la página de configuración del tema Gantry y a la pestaña de diseño.

tutuploadsmedia_1323124511871_5099880bf7725108eb077c133e794401.png

La posición del cuerpo principal es ligeramente diferente de las otras posiciones, ya que está limitado a 3 barras laterales y al área de contenido principal. Pero el cursor se comporta de manera similar a los de las otras posiciones.

tutuploadsmedia_1323124523151_c275ad0ad3b66331dfa771cbc72b8196.png

Puede ver, cuando compara esta imagen con la de arriba, al ajustar el control deslizante, ha movido las barras laterales a lados opuestos del contenido principal. Puede jugar con el control deslizante y ver los efectos y posiciones disponibles.

tutuploadsmedia_1323124829187.png

La barra lateral A («sa») se ha movido a la izquierda mientras que «sb» está a la derecha.

Paso 6. Elección del estilo

tutuploadsStep_6_7f12b0e51615e46d17885a5404d1642a.png

Vuelva a la configuración de Gantry y elija la pestaña Estilo.

En la parte superior derecha puede ver un botón que dice Presets. Haga clic en el botón para activar / desactivar la visualización de los presets.

tutuploadsmedia_1323125567368.png

El modelo Gantry genérico tiene tres estilos preestablecidos con los que es extremadamente fácil trabajar. Son bastante atractivos en blanco y negro. Hay controles en la pestaña Estilo que le permitirán ajustar los colores y cambiar las fuentes usando Google Fonts para una amplia variedad de estilos. Al editar uno de estos ajustes preestablecidos, puede «Guardar ajuste preestablecido personalizado como nuevo» e iniciar una biblioteca de diseños personalizados.

Todos estarán disponibles aquí y puede verlos arrastrando el control deslizante y eligiendo el que desea aplicar. Puede dejar los ajustes preestablecidos básicos como están y hacer todo su trabajo en copias derivadas. Cuando cambia entre ajustes preestablecidos, ninguna de las posiciones o widgets cambia, por lo que puede cambiar de diseño instantáneamente, lo que facilita la elección de la dirección que se adapta a su estilo.

Posiciones de widgets

tutuploadsWidget_Positions.png

Para que sea un poco más fácil de ver, arriba hay un diagrama de las filas estándar y las posiciones de los widgets.

Color y tipografía

tutuploadsColor_and_Typography_434c6f3ac5f8946b1510566fb762254f.png

Además de los diseños preestablecidos, hay 4 estilos CSS preestablecidos, colores de fondo editables, ajustes de miniaturas, configuraciones de fuente y una simple ventana CSS personalizada.

A estas alturas ya debería estar familiarizado con los conceptos básicos para trabajar con Gantry.

  1. Hay filas y dentro de cada fila hay posiciones.
  2. Puede ajustar las posiciones utilizadas y su tamaño con divisores y controles deslizantes.
  3. Puede cambiar el estilo y crear un nuevo ajuste preestablecido para experimentar.

Otra característica que no he examinado, pero es bueno saberlo, es que Gantry te permite insertar el código corto en los widgets. Cuando puede insertar un widget prácticamente en cualquier lugar de la pantalla y puede insertar cualquier cosa en un widget, tiene posibilidades ilimitadas para el diseño y la presentación del contenido.

Este es solo el punto de partida. Si encuentra que esta es una forma conveniente de trabajar, visite gantry-framework.org y hay muchos videos y tutoriales específicos de Gantry.

.

Puedes compartir en en tu Twitter y Facebook para que tus amigos lo flipen

👇👇👇 😘 💪 👇👇👇

Comparte