13 ejemplos de catálogos para inspirarte en diseño gráfico y maquetación

En esta ocasión y sin que sirva de precedente, voy a publicar un “post” con imágenes que me han parecido interesantes de cara a poder inspirarme y coger ideas para diseñar catálogos. Algunos son ejemplos muy sencillos de grafismos o uso de tipografías pero otros son más elaborados en cuanto al formato en sí. Espero que esta selección haga las delicias de aquellos a los123 que les guste inspirarse para sus futuros trabajos.

brochure-4-300x266

presentation-folder-designs-15

Inspiración

a1c7371e6b3b5b98838d17cef203196e

RW-Swiss-Style-Brochure

brochure-designs-14

brochure-designs-28

982f9_web_Century21BrochureDesign_thumb

Nick-Cave-HEAVYWEIGHT-ALTERSKINS-brochure-folder-design-7

atmosphere-corporate-brochure-599x458

Anuncios

2 formas de modificar una plantilla WordPress sin saber programar

Vista la gran aceptación de otro post referente a cómo instalar una plantilla WordPress de forma sencilla, esta vez vamos a hablar de cómo modificar  una plantilla WordPress sin saber programar, o teniendo muy pocos conocimientos del lenguaje de diseño web, html y css.

En este post  vamos a explicar brevemente cómo modificar una plantilla Wordpres. Existen dos formas de hacerlo. A continuación explicaremos cómo modificar una plantilla o theme de WordPress ya existente:

1- De forma sencilla, a través del panel de administración de WordPress: es muy fácil de hacer de esta forma, ya que simplemente hay que ir al menú principal (Dashboard), después click-ar sobre Apariencia y allí mismo nos aparecerá la forma de personalizar la plantilla que tengamos. Esto en el caso del WordPress gratuito (.org).

modificar plantilla wordpress

En el caso de tener una página o blog de WordPress de pago o alojado en un hosting, la misma plantilla que hemos comprado nos dirá cómo modificar algunos aspectos como colores, diferentes estilos para tablas, formularios, modificar los banners o pasarelas de fotos, el index.php, etc. sin saber programación.

Compra tu hosting ahora (Soy afiliada ¡Gracias!)

2- De forma no tan sencilla, para esta opción necesitaremos tener conocimientos de html y css aunque sea mínimos para saber interpretar dónde se encuentra cada elemento y cada estilo concreto que queremos modificar.

Primero deberemos tener abierto el archivo style.css en Dreamweaver o cualquier otro programa para diseño de páginas web. Es recomendable ya que este programa de diseño si cometemos cualquier fallo como no cerrar un estilo, olvidarse de una coma, etc. nos aparecerá como error en la línea y podremos verlo mejor.

Segundo, deberemos abrir la página web tal y como se vería en el navegador en una pestaña. Si utilizamos Firefox, hay una herramienta muy útil que deberéis descargaros (solamente para Firefox): “Firebug”. En este enlace podréis descargaros la herramienta Firebug.

Una vez instalado en el navegador, aparecerá de la siguiente forma, en la parte superior derecha (aunque podréis personalizarlo y ponerlo en otra ubicación):

Firebug icon

Si tenemos abierta la página que ya está subida al servidor y tiene una url aunque sea de prueba (incluso con Apache sin subirla al hosting), abriremos la herramienta Firebug para click-ar sobre el elemento que queremos modificar. Por ejemplo imaginemos que quiero modificar el color de un banner de mi blog, clickaría con la herramienta Firebug para saber la ubicación que tiene en uno de los archivos de estilo css que tengo para mi plantilla de wordpress y saber dónde exactamente modificarlo. Click-aremos sobre el recuadro que se marca en rojo para que se active el seleccionar una parte concreta de la web:

firebug para modificar plantilla wordpress

Como vemos, hay una ventana que el propio Firebug nos ha abierto en la parte inferior del navegador Firefox para que sepamos qué elemento es en html el que seleccionamos. En la parte derecha nos indica cuál es la hoja de estilo que debemos de modificar (puede que haya varias), en qué línea del archivo está el estilo a modificar y los elementos que componen el estilo (color, tipo de letra, alineación, etc.).

Al seleccionar un elemento nos dirá exactamente cuál es. En este caso concreto he seleccionado el recuadro rojo que rodea el menú de lista de la parte superior de la web. En este caso querríamos cambiar el color rojo por otro. Por lo tanto lo seleccionaremos con la herramienta anteriormente indicada y miraremos con Firebug dónde está ubicada y en qué archivo de style.css:

modificar plantilla wordpress theme con css

Como vemos en el recuadro de la parte derecha, es un elemento de menú, en el “header” y es una lista “ul” y “li”. El “Background-color” es el color de fondo y al pasar por encima con el raton nos indicará qué color es el código hexadecimal indicado con la almohadilla #, en este caso rojo. Nos dice que está en la línea 2098 y para saber en qué hoja de estilo está, podemos click-ar sobre lo que aparece en color azul que es además donde nos indica la línea 2098.

Antes de ir a modificar el archivo css en Dreamweaver, haremos la prueba con Firebug. Para ello, hay que click-ar sobre CSS en la propia herramienta en la parte izquierda (antes estaba seleccionado el HTML), y modificaremos ahí el código hexadecimal para incluir otro color, en este caso lo modificamos directamente ahí y vemos el resultado:

modificar css con firebug en css

Por último haremos lo mismo buscando la línea 2098 en ese archivo de estilo CSS en Dreamweaver. Para que se materialice el cambio en nuestra página web o WordPress ahora deberemos subir de nuevo al “cpanel” de nuestro hosting ese archivo y reemplazarlo por el que existía antes con el mismo nombre y… ¡ya está!

¡Si te ha parecido interesante comparte este post!