¿Cómo puedo personalizar el orden de mi diseño móvil?
Última actualización: octubre 19, 2020
Los diseños estándar de HubSpot ordenan los módulos de izquierda a derecha en los dispositivos móviles. A continuación te mostramos el orden:

Para ordenar de derecha a izquierda, deberás personalizar tu plantilla y agregar CSS para ajustar el diseño. A continuación, te mostramos dos métodos para hacerlo.
Ten en cuenta que para realizar los siguientes pasos se requiere conocimiento sobre el diseño del sitio web. Si no estás cómodo con la creación de plantillas y la aplicación de CSS, deberías consultar a un diseñador.
Método 1: Fila flexible
- Navega a Contenido > Administrador de diseño.
- Crea o edita una plantilla existente.
- Agrupa las dos columnas que deseas apilar en un orden diferente.
- Haz clic en el símbolo del engranaje > Editar CSS en cada uno de los grupos de filas y columnas y agrega las siguientes clases a los grupos: “stack-row”, “main-content” y “sidebar”.
- Tu diseño debe parecerse a la captura de pantalla que aparece abajo:

- Después de agregar las nuevas clases a tus columnas, agrega el siguiente fragmento de código a tu hoja de estilo CSS:
@media screen and (max-width:768px) {
.stack-row > .row-fluid-wrapper > .row-fluid{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
-moz-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
.main-content{
order: 2;
-webkit-order: 2;
-moz-order: 2;
-ms-order: 2;
width: 100%;
}
.sidebar {
order: 1;
-webkit-order: 1;
-moz-order: 1;
-ms-order: 1;
width: 100%;
}
}
Método 2: Voltear el módulo flotante
- Navega a Contenido > Administrador de diseño.
- Crea o selecciona la plantilla que deseas editar.
- Vuelve a ordenar las columnas para que el módulo que deseas agregar primero esté a la derecha (“barra lateral” en este ejemplo).
- Haz clic en el símbolo del engranaje > Editar CSS en cada una de las columnas y agrega la clase “sidebar” y “main-content” a las dos columnas.
- La plantilla debe parecerse al siguiente diseño. El orden de las columnas debe ser el opuesto al que deseas mostrar en el escritorio.

- Después de agregar las nuevas clases a tus columnas, agrega el siguiente fragmento de código a tu hoja de estilo CSS:
.sidebar {
margin-right: 0 !important;
float: right !important;
}
.main-content {
margin-left: 0 !important;
}
@media (max-width: 767px) {
.main-content {
margin-left: 0 !important;
}
.main-content,
.sidebar {
width: 100% !important;
float: none !important;
}
}
Contenido relacionado
-
Iniciar sesión en HubSpot
Hay varias maneras de iniciar sesión en HubSpot; ingresa una...
Base de conocimientos -
Usar la sincronización del calendario de HubSpot con Google Calendar o Outlook
La sincronización del Calendario de Google y el Calendario de Outlook con HubSpot te permite registrar una...
Base de conocimientos -
Error en el correo electrónico: "Hubo un problema al enviar un correo electrónico a este contacto"
Este mensaje muestra un registro de contacto cuando no se envió un correo electrónico al contacto. Un correo...
Base de conocimientos