Emprendedor Innovador

Cómo iniciar un negocio en línea

  • Principal
  • Crear un sitio con WordPress
  • Hospedar un sitio web
    • Web Hosting España
    • Análisis de SiteGround.es
    • Guía de web hosting completa para sus sitios
  • Códigos de cupones
  • Recursos
Usted está aquí:: Principal / Guía / WordPress / Crear un diseño de columnas

19 marzo, 2015

Crear un diseño de columnas

A muchas personas les gusta el aspecto del texto en múltiples columnas, un formato que se parece al de los periódicos. Existen varias razones por las cuales podrías querer formatear tu blog de WordPress de esta manera. Sin embargo, no es precisamente la cosa más sencilla de hacer. Puedes buscar temas específicos o comprar caros plugins que lo hagan por ti, ¿pero realmente quieres hacer eso? La mayoría de personas que crean sitios web de WordPress lo hacen para sus blogs personales o como sitios web para pequeños negocios, por lo que no quieren (o no se pueden permitir) gastar mucho dinero en ello. Afortunadamente, este tutorial de WordPress te guiará a través de los pasos necesarios para crear tu propio diseño de columnas.

Crear estas columnas implica hacer algo de trabajo en el código HTML de tu blog de WordPress. Por suerte, en realidad es bastante fácil de hacer. Sólo tienes que hacer clic en el editor de textos e introducir el código correcto. Si quieres crear un blog de tres columnas, éste es el código:

<div style = “width:33%; padding:0 10px 0 0;float:left;”>

Después escribe el contenido de la primera columna. Cuando hayas terminado, termina la línea final del contenido con </div>.

Después añade esta línea:

<div style = “width:33%; padding:0 10px 0 0;float:left;”>

Esto creará la columna central. Una vez más, termina la última línea del contenido con </div>.

Para la tercera columna:

<div style = “width:33%; padding:0 10px 0 0;float:right;”>

Esto creará la tercera columna y alineará todo lo que haya en su interior a la derecha. De este modo, obtendrás algo como esto:

Columna 1                          Columna 2                          Columna 3

Las primeras dos columnas estarán alineadas a la izquierda, mientras que la tercerá estará alineada a la derecha.

Puedes cambiar el aspecto de las columnas modificando el código. Vamos a analizar lo que hace realmente esta línea de HTML.

<div style = “width:33%; padding:0 10px 0 0;float:left;”>

div style – éste es el comando que le dice a WordPress que estás creando una división de texto, la cual puede ser un párrafo, una columna o incluso una frase.

width: 33% – éste es el ancho de la columna.  Para tres columnas que tienen el mismo ancho, dividirías toda el área por tres. Así que un 100% de ancho dividido por 3 columnas significa que cada columna tendrá más o menos un 33% del tamaño total.

padding: 0 10px 0 0; – ésta es la cantidad de relleno entre las columnas y el resto de la página. Los cuatro números corresponden al espacio en blanco de la parte superior, la parte derecha, la parte inferior y la parte izquierda de la columna. En este caso, hay un relleno superior de 0, 10 píxeles (px) de relleno derecho, 0 de relleno inferior y 0 de relleno izquierdo. El relleno derecho de 10px se asegura de que haya un poco de espacio entre tus columnas. Puedes aumentar o disminuir este espacio si lo deseas. Si quieres que las columnas destaquen del contenido situado por encima y por debajo de ellas, puedes añadir un poco de relleno en la parte superior e inferior.

float:left; – Éste es el alineamiento del texto. Puedes cambiarlo a la derecha (right) si quieres.

Este metodo te ofrece un control completo del aspecto de tus columnas, y es totalmente gratis.

CompartirloShare on facebook
Facebook

Artículo de carlito / WordPress

Plugins y herramientas de WordPress imprescindibles

DinaHosting - Instalar y ejecutar un sitio WordPress es fácil con DinaHosting. Y también recibirás un precio más bajo
Genesis Framework y Themes - Usamos un tema de WordPress de Genesis por StudioPress en todos nuestros sitios web
Gravity Forms - Si necesita crear formas simples o complejas hermosas, recomendamos Gravity Forms - lo usamos
OptinMonster - La mejor manera de aumentar su lista de correo electrónico gracias a OptinMonster innovadora forma de captura de correo electrónico
MailChimp - El software de email marketing más sencillo disponible - y puede configurar sus campañas de correo electrónico en español con MailChimp

¿Quieres crear un sitio de WordPress? Recomendamos el uso de dinahosting

wordpress

DinaHosting -- Usted recibirá un un precio más bajo a través de este enlace. Es un alojamiento barato, pero confiable para tu blog.

dinahosting

Ofrece una instalación de WordPress en un solo clic y sus precios de alojamiento web son los más bajos de la industria. Nuestra recomendación para alojar un blog de WordPress.

ENTRADAS RECIENTES

  • 7 razones para elegir WooCommerce en lugar de Shopify
  • Los 5 mejores sitios para vender tus fotos online
  • Cómo funciona la herramienta de análisis de riesgos de Shopify
  • Cómo comprar online de forma segura: 5 estrategias clave
  • ¿Qué son los asides en WordPress y cómo se usan?

PÁGINAS POPULARES

  • Análisis de SiteGround.es
  • Códigos de cupones de web hosting
  • Cómo crear un blog con WordPress
  • Cómo hospedar un sitio web
  • Contacto
  • Emprendedor Innovador – Iniciar un negocio en línea
  • Guía de web hosting completa para sus sitios
  • Hospedaje Web México
  • Recursos para iniciar un negocio en línea
  • Web Hosting España
20% de descuento
Elegant Themes

Cupón Elegant Themes

Utilice este cupón especial de Elegant Themes para recibir un descuento del 20% en el plan acceso anual de Temas WordPress ofrecido por ElegantThemes.com!
Reclama esta oferta

© Derechos de autor 2017 Emprendedor Innovador · Reservados todos los derechos

  • ¿Está haciendo una de estas 8 errores con su sitio de WordPress?
    Descarga nuestra guía educativa sobre los 8 errores comunes que cometen los nuevos bloggers con WordPress y cómo solucionarlos. ¡Es gratis!