No se han encontrado resultados. ¿Intentar de nuevo con otras palabras?

La búsqueda debe tener al menos 3 caracteres.

¿Cómo diseñar viñetas y listas?

El Editor de Bloques de WordPress proporciona por defecto un diseño simple para viñetas y listas. Abajo está la captura de pantalla de cómo puedes añadir un código simple para listas con el Editor de Bloques de WordPress. Hemos utilizado los bloques "HTML" para añadir los códigos, y los bloques "Párrafo" para añadir el texto normal:

Adding HTML code using Blocks

Esta es una captura de pantalla de cómo se vería en el frontend:

Astra HTML Code Lists Frontend

Si desea añadir algo de estilo a las viñetas y listas, puede utilizar el siguiente CSS. A continuación se muestran los pasos para utilizar CSS.

Primer paso - Añada las siguientes clases CSS a ol (listas ordenadas) y ul (lista desordenada) con los siguientes códigos HTML:

  • Código para ol (listas ordenadas) - 'ast-content-ol-list'
  1. Uno
  2. Dos
  3. Tres
  4. Cuatro
  5. Cinco
  • Código para ul (listas ordenadas) - 'ast-content-ul-list'
  • Rojo
  • Azul
  • Blanco
  • Amarillo
  • Verde

Puede modificar el número de elementos de la lista eliminando líneas o añadiendo otras nuevas (

  • ITEM_NAME
  • ).

    Paso 2 - Ahora es el momento de dar estilo a tus listas. Vaya al Personalizador y copie el siguiente CSS personalizado en el "CSS adicional" de su sitio web.

     /* Estilo de lista de pedidos */ .entry-content ol.ast-content-ol-list {
       counter-reset: my-ol-counter;
       margin-left:1.4em;
    }
    .entry-content ol.ast-content-ol-list li {
       position: relative;
       padding-left: 30px;
       list-style: none;
    }
    .entry-content ol.ast-content-ol-list li:before {
       position: absolute;
       top:50%;
       left: 0;
       anchura: 20px;
       altura: 20px;
       margin-top: -10px;
       color: #fff;
       text-align:center;
       color de fondo: #0274be;
       contenido: contador(mi-ol-contador,decimal);
       contador-incremento: my-ol-contador;
       font-size: 11px;
       -webkit-border-radio: 50%;
       border-radius: 50%;
    }
    
    /* Estilo de lista desordenada */
    .entry-content ul.ast-content-ul-list {
       margin-left:1.4em;
    }
    .entry-content ul.ast-content-ul-list li {
       position: relative;
       padding-left: 30px;
       list-style: none;
    }
    .entry-content ul.ast-content-ul-list li:after{
       position: absolute
       top: -webkit-calc( 50% - -1px);
       top: calc( 50% - -1px);
       left: 0; width: 20px;
       altura: 20px;
       margin-top: -10px;
       padding-top: 2px;
       color: #fff;
       text-align:center;
       color de fondo: #0274be;
       contenido: "\e900";
       font-size: 10px;
       font-family: 'Astra';
       -webkit-border-radius: 50%;
       border-radius: 50%;
       -webkit-transform: rotate(270deg);
       -ms-transform: rotate(270deg);
       transform: rotate(270deg);
    } 

    Si no está seguro de cómo hacerlo, consulte este artículo sobre cómo añadir CSS personalizado.

    El resultado de añadir el CSS anterior es el siguiente aspecto de tus viñetas y listas:

    Bullet Lists Output

    Puede modificar el color, la fuente, el espaciado y el tamaño de los elementos modificando las líneas apropiadas del código CSS. Por ejemplo, si desea cambiar el color de las viñetas, simplemente sustituya el código de color ( color: #fff;) en el CSS anterior por el código de color de su elección.

    ¿Le ha resultado útil este artículo?
    ¿No ha encontrado una solución? Estamos aquí para ayudarle a conseguirlo.

    Documentos relacionados

    Astra es gratis. Ahora y siempre.

    Creemos que crear sitios web atractivos no debería ser caro. Por eso Astra es gratis para todos. Empieza gratis y amplía con paquetes asequibles.

    REWIND

    RESUMEN DEL AÑO

    La descarga está a un solo clic

    Introduce tu dirección de correo electrónico y sé el primero en enterarte de las actualizaciones y novedades.

    Descargar gratis Astra Theme - Modal Popup Form
    Scroll al inicio
    Ahora elija la opción que prefiera
    page builder addon
    Elija su complemento de creación de páginas preferido

    La descarga está a un solo clic

    Introduce tu dirección de correo electrónico y sé el primero en enterarte de las actualizaciones y novedades.

    Descargar gratis Astra Theme - Modal Popup Form