5 trucos de diseño web para personalizar tu WordPress
La mayoría de las páginas en WordPress utilizan una plantilla gratuita de las que vienen por defecto. Muchos otros han preferido descargarse una de las muchas que se pueden encontrar por Internet. Y finalmente los que han estado dispuestos a comprar una plantilla de pago. Pero en todos los casos, si queremos crear un buen blog o una buena página en WordPress, debemos tratar de personalizar nuestro diseño lo máximo posible.
Personalizar tu diseño web en WordPress
Aunque no se tengan nociones de CSS muy avanzadas, se pueden crear diseños muy originales simplemente copiando y pegando fragmentos de código. Vamos a enseñarte algunas de las cosas que puedes añadir a tu WordPress.
1. Botones
Si tu tema WordPress no te ofrece botones, o no sabes qué plugin utilizar para ponerlos, utiliza los que te ofrece esta página. De hecho, sólo tienes que copiar el fragmento de código que ves en la imagen para colocar el botón que quieras y donde quieras. Lo mismo te puede valer para una landing page que para un formulario de suscripción a tu newsletter.
Tendrías que cambiar la palabra que viene entre las dos etiquetas para que el botón ponga lo que tú quieras. Si quieres sustituir o personalizar un botón que ya existe, sólo tendrías que sustituir el código HTML por éste y mantener la acción que realice. Si lo que quieres es utilizar estos botones para relacionar alguna acción, por ejemplo que conduzcan a otra página, tendrías que poner las etiquetas <a href=»laurlquesea.com»> y </a>
<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>2. Carrusel
Otra funcionalidad que puede que quieras añadir a tu WordPress es un carrusel, cuyas imágenes puedan deslizarse automáticamente. Es fácil encontrarnos muchos temas WordPress gratuitos donde sólo salen dos slides y no podemos añadir un tercero desde las opciones de personalización a menos que nos pasemos a la opción de pago.
En la pestaña de JavaScript de Bootstrap podemos descargar también un código para colocar el slider en la parte de la página donde queramos.
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>3. Componentes
Los componentes son esos pequeños iconos que le dan personalidad y estilo a nuestro diseño. Los podemos añadir a un cuadro de opciones, o simplemente colocarlos junto al texto de los botones. En la propia página de Bootstrap se nos enseña cómo utilizarlo.
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>4. Thumbnails
Las imágenes en miniatura pueden ser una excelente opción para construir espacios en los que queremos reflejar nuestros servicios, o ventas de adquirir un servicio en concreto, características, o lo que más nos interese. En algunas plantillas gratuitas vienen este tipo de miniaturas por defecto, pero en otras muchas plantillas no tenemos esta posibilidad y lo ideal es que podamos copiar directamente el código en la parte de la home donde queramos.
5.Backgrounds de colores
Los backgrounds de colores también puede ser una forma original de destacar una serie de ventajas, características o pasos para hacer algo. Dan a la página un aspecto más elegante y te permite personalizarla con los colores que desees. De esta manera, puedes diseñar cosas muy originales para tratar de que tus lectores, usuarios o clientes puedan tener una percepción más positiva de tu página.
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>/- WordPress te permite una gran variedad de opciones de personalización
/- El diseño web es uno de los factores que influyen en las ventas
/- Conseguir buenos resultados depende de la calidad global de tu sitio web
/- Mejora tu diseño para conseguir aumentar tu tasa de conversión
/- Construye una marca irresistible que enamore a tus clientes
Mejora tu diseño en WordPress
Espero que estos códigos te ayuden a personalizar y mejorar el diseño de tu WordPress. Conseguir una página web bien diseñada y con todas las funcionalidades no siempre es fácil. Te invitamos a que nos comentes tus dudas a través de nuestros canales sociales.
Si necesitas que te ayudemos nosotros o quieres encargar esta tarea en profesionales del diseño web, envíanos tus datos a nuestro correo electrónico o a través del Facebook de Gadae.com o Twitter @gadaenetweb