💀 ¡Bienvenido a ForoSalvaje.com! 💀

💰 Únete a los salvajes si quieres empezar a ganar dinero en modo bestia 💰

ASAP Theme Cómo tener un nicho de aspecto profesional en pocos clics

Federico

SALVAJE
Profesión
SEO
Rango especial
EMPRESA
26 Julio 2021
79
104
Buenas Salvaje!

En este post te mostraré como puedes tener una web de nicho con aspecto de portal profesional muy fácilmente con Asap Theme.

Además te muestro un nicho que hemos creado para mostrar la plantilla en una web real.

👉 Mira, esta es la web.

Apariencia

Puedes personalizar tu nicho tanto como quieras.

En la sección de apariencia puedes elegir cada ancho de cada contenedor (entradas, páginas, listados) cada uno por separado.

Si quieres que tu página principal tenga un ancho de 1200 píxeles pero las entradas de 768 píxeles se puede perfectamente.

También puedes desactivar la cabecera, activar el menú mobile, cambiar el ancho del sidebar y muchas opciones más.

De forma muy intuitiva y literalmente en pocos clics.

Sin tocar código.


apariencia.png

Colores

Cada nicho debe tener una palota de colores distinta para que parezca un portal profesional adaptado a la temática del nicho.

Por eso, con ASAP puedes cambiar los colores de casi cualquier parte del sitio en pocos clics y sin necesidad de agregar CSS adicional.

colores.png


Fuentes

Si quieres que tu nicho luzca único puedes usar las decenas de Google Fonts que vienen cargadas por defecto en ASAP.

Elige la tipografía de los listados, del texto y de los encabezados, además de su tamaño.

fuentes.png

Listados

También podrás personalizar los listados de entradas (home, categorías, etiquetas) tanto como lo necesites.

¿Quieres mostrar un listado de cuatro columnas? Se puede

¿Quieres mostrar un extracto en algunos nichos sí pero en otros no? Se puede

¿Quieres elegir el tamaño de las miniaturas? Se puede


listados.png

Entradas y páginas

Las opciones visuales de las entradas y las páginas también son muy versátiles.

Puedes mostrar o no:

  • Fecha y autor
  • Caja de autor debajo del post
  • Navegación anterior y siguiente entre posts
  • Etiquetas
  • Y mucho más
entradas.png


Cuéntenme Salvajes

¿Qué les parece?

En estos días publicaré otros posts sobre las opciones de enlazado interno, velocidad, seguridad y demás.

Este post trata solo sobre la apariencia :)

¡Un abrazo!
 

Ludi

MIEMBRO DEL EQUIPO
PREMIUM
Profesión
EMPRENDEDOR
Rango especial
MODERADOR
4 Julio 2021
1,007
608
¿Cómo se hace esto?

87C348E0-4447-4E3D-BD4E-941A52CEB306.jpeg
 

Federico

SALVAJE
Profesión
SEO
Rango especial
EMPRESA
26 Julio 2021
79
104
Misma pregunta compañero.

Buenas compis!

Con este CSS:


Código:
.the-content ol:not(#index-table) li {
    counter-increment: step-counter;
    margin: 0 0 0.95rem;
    padding-left: 46px;
    padding-top: 10px;
    position: relative;
    background: #f6f6f8;
    border-radius: 4px;
    padding: 1rem 2rem 1.125rem 3.25rem;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

.the-content ol:not(#index-table) li:before {
    content: counter(step-counter);
    background-color: #022b3a;
    color: #fff;
    font-weight: 300;
    display: block;
    margin-top: 0;
    min-width: 32px;
    min-height: 32px;
    line-height: 32px;
    font-size: 17px;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 4px;
}

.the-content ol:not(#index-table) {
    list-style: none;
    margin: 0 0 30px 0x;
    padding: 0;
    counter-reset: my-awesome-counter;
    margin-top: 1.75rem !important;
}


En breve agregaremos esto en ASAP como una opción para que lo puedan agregar con 1 clic :)
 

Ludi

MIEMBRO DEL EQUIPO
PREMIUM
Profesión
EMPRENDEDOR
Rango especial
MODERADOR
4 Julio 2021
1,007
608
Buenas compis!

Con este CSS:


Código:
.the-content ol:not(#index-table) li {
    counter-increment: step-counter;
    margin: 0 0 0.95rem;
    padding-left: 46px;
    padding-top: 10px;
    position: relative;
    background: #f6f6f8;
    border-radius: 4px;
    padding: 1rem 2rem 1.125rem 3.25rem;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

.the-content ol:not(#index-table) li:before {
    content: counter(step-counter);
    background-color: #022b3a;
    color: #fff;
    font-weight: 300;
    display: block;
    margin-top: 0;
    min-width: 32px;
    min-height: 32px;
    line-height: 32px;
    font-size: 17px;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 4px;
}

.the-content ol:not(#index-table) {
    list-style: none;
    margin: 0 0 30px 0x;
    padding: 0;
    counter-reset: my-awesome-counter;
    margin-top: 1.75rem !important;
}


En breve agregaremos esto en ASAP como una opción para que lo puedan agregar con 1 clic :)
Pues eso sería magnífico! A golpe de clic
 

💀 ¿Cuantos salvajes estan viendo este hilo? 👉 ☠ Salvajes: 0 | 🧑‍💻 Invitados: 1 | 👁Total: 1

Arriba