Cómo usar CSS para modificar la página de incio de tu tienda ePages (parte 2)

Primero de todo, te recomendamos leer la primera parte de este tutorial.

Una vez que tienes el código adecuado, siguiendo los pasos indicados en el anterior artículo, puedes modificar casi todos los elementos de la tienda introduciendo código en el menú “Opciones -> Opciones generales -> Opciones avanzadas”. Sin embargo, debes tener en cuenta que el código introducido en esta sección afectará a toda la tienda y que por lo tanto sólo recomendamos que lo cambieis si estaís realmente seguros.

Por ejemplo, si utilizas código CSS para ocultar la barra de menús de la izquierda, se ocultará en toda la tienda, independientemente de la página que estés viendo. Es posible que quieras ocultar la barra de menús solo en la página de inicio para dejar más espacio para un gráfico grande. Si un cliente hace clic en una categoría o en un producto, la barra de menús debe aparecer de nuevo de forma que, por ejemplo, pueda mostrarse la vista previa de la cesta de la compra.

Ocultar la barra de menús sólo en la página de inicio

Como vimos en el ejemplo del artículo anterior si introducimos un código en el menú Opciones > Opciones generales éste afectará a toda la tienda. Si queremos modificar sólo la página de inicio o una página concreta, deberemos insertar este código sólo en esta página. Para ocultar el menú lateralen la página de inicio deberemos insertarlo allí.

Abre el menú “Contenido/Categorías” y, a continuación, dirígite a vista de ficha. Aquí podrás introducir código CSS para páginas específicas, de modo que el cambio solo se aplique a una página.

En este caso, como queremos modificar la página de inicio, iremos directamente a la pestaña “General”. A continuación, introduciremos nuestro código CSS en el campo “Descripción detallada”. Importante: utiliza la vista html para editarla.

Aquí añadiremos el código CSS que hará que la columna lateral no se muestre en la página de inicio.

<style type=»text/css»>

.NavBarLeft {display:none;}

div.Middle div.ContentArea div.ContentAreaInner div.ContentAreaWrapper div.CategoryList{margin:0; padding:0 !important;}

.ContentArea, .ContentArea div, .ContentArea table, .ContentArea td, .ExtractedContentAreaElement{margin:0 !important;}

div.Middle div.ContentArea {padding-right:0 !important;} </style>

Puedes incluir este código antes del código que hay en ese lugar:

Ahora, guardaremos una vez más y vamos a ver el Sitio web.  ¡Listo! La barra de menús de la izquierda ya no aparece en la página de inicio.

Antes:

Después:

Recuerda que en el caso de que quieras que este cambio se realize en toda la página puedes insertar el código en Opciones generales. Sin embargo a partir de la versión 6.16 (disponible en España a partir de diciembre 2013-Enero 2014) este cambio se podrá hacer desde el menú de Diseño automáticamente.

Con CSS puedes modificar muchos detalles del diseño de tu tienda online, pero como siempre nos pasamos de precavidos y te recomendamos una vez más que vayas con cuidado ya que podría afectar el funcionamiento de la tienda, especialmente con las actualizaciones.

¡Buena venta online!