Integración de diseños de cuadrícula CSS simples en WordPress
Obtener un diseño de cuadrícula sólido y consistente en WordPress puede ser un proceso indoloro si usa las herramientas adecuadas. En este tutorial, aprenderá paso a paso cómo configurar rápidamente un sistema de cuadrícula en WordPress que sea muy ligero y fácil de modificar. Mantendremos el diseño simple para que podamos concentrarnos en utilizar las herramientas adecuadas para configurar su cuadrícula, pero tenga en cuenta que puede diseñar la cuadrícula por su cuenta si es necesario..
Usaré un tema de Pool por defecto en WordPress para este tutorial solo para mostrarle un enfoque de "empezar de cero" para obtener las cuadrículas de manera correcta.
Paso 1: Determine el ancho de su cuadrícula
Antes de comenzar, necesita determinar qué tan ancha debe ser su cuadrícula. Para mi sitio de WordPress, puedo ver que el ancho de mi columna principal es de 450 píxeles mediante el uso del elemento "Inspeccionar elemento" de Google Chrome al hacer clic con el botón derecho en un objeto. Esta es la forma más rápida que he encontrado que puede determinar rápidamente el ancho y la altura de un objeto en una página web.
Paso 2: Grid Designer
En lugar de construir una cuadrícula a mano, lo que puede hacer si lo desea, le sugiero que utilice una de las muchas herramientas disponibles de generadores de cuadrícula. Para este tutorial, usaré el generador de cuadrícula de MindPlay. Es un generador de rejillas muy simple y ligero..
Quiero una pantalla de tres columnas y debo asegurarme de que mis píxeles estén en 450. Por lo tanto, ajústelos y vaya a la pestaña "Exportar". No vamos a pasar por el *tipografía características de este tutorial, aunque sin duda vale la pena explorarlo por su cuenta..
En la pestaña Exportar, use el marco de la "Hoja de estilo" más arriba y desplácese hacia abajo hasta que vea el comentario de "Cuadrícula". Copiarás todo, desde el comentario hasta la parte inferior de este marco. Sólo debería ser de unas 30 líneas de .
Paso 3: Actualizar tu hoja de estilo de WordPress
Inicie sesión en su sitio de WordPress y vaya a Apariencia> Editor.
En la parte inferior derecha del panel Editor, verá una Styles.css archivo (o algo similar, dependiendo de su tema). Haz clic aquí para abrirlo..
Desplácese hasta el final de la hoja y pegue su pre desde MindPlay.dk:
Paso 4: Implementando el Grid
Para usar la cuadrícula, simplemente creas un Aquí hay algunos ejemplos de pre que puede pegar en su lugar para comenzar: Columna izquierda Columna media Columna derecha Esto es lo que parece en WordPress: Guarda / actualiza la página y mira los resultados. En mi caso, esta es la página de inicio del sitio: Como puede ver en la captura de pantalla anterior, tenemos nuestras tres columnas y todo está justo donde esperamos que esté. Puede agregar tantas filas como desee simplemente comenzando con lo siguiente Columna izquierda Columna media Columna derecha Fila izquierda # 2 Fila intermedia 2 Fila derecha # 2 Así es como se ve hasta ahora: Ahora puede agregar imágenes o texto, y diseñar cada fila exactamente como desee.. Puede tener problemas en algunos navegadores cuando tiene más de una fila. Para solucionar este problema, deberá hacer el margen en el extremo derecho ( Esto asegurará que su Si desea diseñar el fondo de toda la cuadrícula, deberá ajustar la altura de la cuadrícula. Dependiendo de la versión del generador de cuadrícula de MindPlay.dk que use, el sitio puede no generar el ".grid-m4" y en su lugar deberá usar Columna izquierda Columna media Columna derecha Así es como se ven mis resultados finales con dos filas y algunos gráficos simples: Diviértase diseñando y recuerde que puede diseñar su cuadrícula de la forma que desee.. Nota del editor: Esta publicación está escrita por Tara hornor para Hongkiat.com. Tara es licenciada en inglés y escribe sobre mercadotecnia, publicidad, marca, diseño gráfico y publicación de escritorio. Además de su carrera como escritora, Tara también disfruta pasar tiempo con su esposo y sus dos hijos..
:
Consejos para ajustar
.rejilla-m4, en nuestro caso) a la altura que desea que sea cada fila. Si está utilizando imágenes que son de 250 px por 250 px, a continuación, haga que la altura de la fila en el .rejilla-m4 para ser 250px:.grid-m4 float: left; ancho: 20px; altura: 250px;
.grid-m1 en el lado izquierdo de la siguiente fila no flota hasta la fila de arriba..cuadrícula clase. Entonces, digamos que tiene cuatro filas en su cuadrícula, cada una a 250 px. Usted querrá agregar altura a la clase .grid a 1000px para que cualquier elemento de estilo que agregue cubra todo el diseño de la cuadrícula..rejilla ancho: 450px; altura: 1000px; margen: auto;
.grid-m1 después .rejilla-c3 para asegurarse de que su cuadrícula se extiende al lugar adecuado:Resultados finales
