Título de la Página (H1) Este es el Link

Subtítulo de la página (H2)

Subtitulo H3 de la página

Existen dos tipos de ediciones:

• Edición básica
• Edición HTML avanzada

La edición básica contempla el uso directo del editor de páginas de Mapaprop.

La edición HTML avanzada contempla el uso del editor HTML (accesible desde el boton Editar HTML) del editor de páginas de Mapaprop. Vea quí el artículo de ayuda de edición HTML

Cuerpo de texto párrafo Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis page vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"

Ésta es una imagen de muestra,

Ud puede enviar una consulta haciendo Clic aquí

Mapaprop Flex Responsive Edición html de páginas sin límite

Mapaprop Express es un sistema autogestionado de diseño avanzado para sitios web inmobiliarios. Está basado en HTML5 junto a Boostrap 3, lo que le permirá obtener una edición HTML completa bajo las características documentadas por Boostrap. Además utiliza FontAwesome 4 que le permitirá contar con una enorme librería de íconos totalmente customizables.

Los siguientes ejemplos son solo ilustrativos y para soporte completo refíerase a la documentación de Boostrap y / ó FontAwesome.

Características Básicas

Párrafos de texto

<p>Esto es un párrafo de texto...</p>

Ésto es un párrafo entre etiqueta <p>...</p> / Lorem ipsum dolor sit amet, negrita con etiqueta "strong" adipiscing elit. Proin nec sem a dui pulvinar lobortis. Nunc non metus ut risus lacinia dictum. Vestibulum fermentum elit turpis, feugiat euismod nibh gravida vitae. Donec commodo malesuada elit, sit amet vehicula dolor volutpat eu. Ut facilisis ante lorem, eu pellentesque urna ornare eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam blandit iaculis metus. Quisque a lacus metus. Sed eu quam non tortor tincidunt dapibus quis at ligula. Quisque at augue pharetra, pulvinar ante ac, tempor enim.

Títulos

Los títulos se organizan por tamaño, y se escriben dentro de etiquetas <h1> <h2> <h3> <h4> <h5> y <h6>. Por ej <h1>Aquí va el titulo</h1>

Título H1

Título H2

Título H3

Título H4

Título H5

Título H6

Listas

Las listas no ordenadas, se escriben dentro de las etiquetas <ul> dentro de la cual se listan con la etiqueta <li> . Por ejemplo....
                    
    <ul>
                            <li> item 1 de la lista </li>
                            <li> item 2 de la lista </li>
                            <li> item 3 de la lista </li>
                            <li> item 4 de la lista </li>
                        </ul>
                            

El ejemplo quedaría de la siguiente forma...

• item 1 de la lista
• item 2 de la lista
• item 3 de la lista
• item 4 de la lista

Colores de texto

Los textos pueden ser resaltados de diversas formas, aplicando una clase por ejemplo a un párrafo o un título. Se aplica de la siguiente forma
                            
<p class="text-muted"> aqui va el texto </p>
                    
                    ó
                    
                    <li class="text-muted"> Texto de lista ejemplo class "text-muted" </li>
                            

El ejemplo quedaría de la siguiente forma...

• Ejemplo de lista 1: Texto de lista ejemplo class "text-muted"
• Ejemplo de lista 2: Texto de lista ejemplo class "text-primary"
• Ejemplo de lista 3: Texto de lista ejemplo class "text-success"
• Ejemplo de lista 4: Texto de lista ejemplo class "text-info"
• Ejemplo de lista 5: Texto de lista ejemplo class "text-warning"
• Ejemplo de lista 6: Texto de lista ejemplo class "text-danger"

Botones con Boostrap 3

Diseñar un botón no puede ser más facil. Utilice la etiqueta <button> para determinarlo, utilice una clase para darle color, por ejemplo
                            
  <button class="btn btn-default">Contáctenos</button>
                            

El ejemplo de boton sería el siguiente

Contáctenos

Éstas son las clases disponibles para botones

btn-primary

btn-success

btn-info

btn-warning

btn-danger

btn-link

Además, los botones de boostrap permiten asignar tamaños agregando solo una clase, como "btn-lg" para grande, "btn-sm" para pequeño ó "btn-xs" para extra pequeño, por ej: class="bt btn primary btn-lg"

Large button Large button

Default button Default button

Small button Small button

Extra small button Extra small button

íconos con FontAwesome

Mapaprop Website Express incluye FontAwesome lo que le permitirá ilustrar su diseño escribiendo un código simple, para otorgar un aspecto moderno, un diseño más claro y con poca carga de memoria.

Para agregar un ícono de FontAwesome, refíerase primero a la librería de FontAwesome. Elija su ícono y agreguelo con el siguiente código a cualquier texto:
                    
                            
<p><i class="fa fa-camera-retro"></i> Vea la imágen </p>
                            

El ejemplo de aplicación de ícono sería el siguiente

ícono fa-camera-retro

Además, los íconos pueden tener distintos tamaños, s botones de boostrap permiten asignar tamaños agregando solo una clase, como "fa-lg" para grande, "btn-2x", "fa-3x", "fa-4x" ó "fa-5x" por ej: class="fa fa-camera-retro fa-5x"

fa-camera-retro fa-lg

fa-camera-retro fa-2x

fa-camera-retro fa-3x

fa-camera-retro fa-4x

fa-camera-retro fa-5x

Conozca más sobre Font Awesome y sus íconos

Botones Con Boostrap + Font Awesome

Combinando Boostrap y los íconos de FontAwesome, Usted podrá realizar vistosas combinaciones.

Para agregar un ícono de FontAwesome, refíerase primero a la librería de FontAwesome. Elija su ícono y agreguelo con el siguiente código a cualquier texto:
                    
                            
<a class="btn btn-danger" href="http..."> 
                            <i class="fa  fa-trash-o fa-lg"></i> Delete
                    </a>
                            

El ejemplo de aplicación de ícono en botón sería el siguiente

Delete

Settings Font Awesome
Version 4.0.3

Imágenes

Con Boostrap dispone de interesantes opciones para mostrar imágenes.

Para agregar una imagen, simplemente agregue una clase para elegir un tipo de diseño. Las clases img-rounded, img-circle ó img-thumbnail darán estilo a su prsentación:
                    
                            
<img src="/img/..." class="img-rounded"> 
                    <img src="/img/..." class="img-circle"> 
                    <img src="/img/..." class="img-thumbnail"> 
                            

El ejemplo de aplicación de imagen sería el siguiente