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

por Inès de la Ruffie, 30.01.12



En la primera parte de nuestra introducción a CSS, mostramos cómo utilizar código CSS para modificar elementos individuales de la tienda y cómo encontrar el código adecuado. Las modificaciones que explicamos afectaban al conjunto de la tienda, pero ahora, en la parte 2, te enseñaremos cómo utilizar CSS para realizar cambios solamente en determinadas páginas, como la página de inicio.

 Artículo actualizado el 28/11/2013

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.

CSSP2_1

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.

CSSP2_2

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:

CSSP2_3

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:

CSSP2_4

Después:

CSSP2_5

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!

Sobre este autor


es responsable del Partner Marketing para Sur de Europa. Apasionada del eCommerce y de la experiencia cliente, le gusta compartir tendencias, consejos y experiencias concretas sobre el mercado y de otros usuarios ePages.

Artículos relacionados


Comentarios


Comparte tu opinión con nosotros


*Campo obligatorio

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *