{"id":23522,"date":"2017-11-29T00:00:00","date_gmt":"2017-11-28T18:30:00","guid":{"rendered":"https:\/\/git-staging.wpastra.com\/?post_type=docs&#038;p=23522"},"modified":"2023-05-15T09:40:13","modified_gmt":"2023-05-15T04:10:13","slug":"design-bullets-lists","status":"publish","type":"docs","link":"https:\/\/git-staging.wpastra.com\/es\/docs\/design-bullets-lists\/","title":{"rendered":"\u00bfC\u00f3mo dise\u00f1ar vi\u00f1etas y listas?"},"content":{"rendered":"<p>El Editor de Bloques de WordPress proporciona por defecto un dise\u00f1o simple para vi\u00f1etas y listas. Abajo est\u00e1 la captura de pantalla de c\u00f3mo puedes a\u00f1adir un c\u00f3digo simple para listas con el Editor de Bloques de WordPress. Hemos utilizado los bloques \"HTML\" para a\u00f1adir los c\u00f3digos, y los bloques \"P\u00e1rrafo\" para a\u00f1adir el texto normal:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1366\" height=\"786\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2021\/08\/ast-3-6-html-code-lists.png\" alt=\"Adding HTML code using Blocks\" class=\"wp-image-102015\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2021\/08\/ast-3-6-html-code-lists.png 1366w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2021\/08\/ast-3-6-html-code-lists-300x173.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2021\/08\/ast-3-6-html-code-lists-1024x589.png 1024w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2021\/08\/ast-3-6-html-code-lists-768x442.png 768w\" sizes=\"(max-width: 1366px) 100vw, 1366px\" \/><\/figure>\n\n\n\n<p>Esta es una captura de pantalla de c\u00f3mo se ver\u00eda en el frontend:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1366\" height=\"635\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2021\/08\/ast-3-6-html-code-lists-frontend.png\" alt=\"Astra HTML Code Lists Frontend\" class=\"wp-image-102016\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2021\/08\/ast-3-6-html-code-lists-frontend.png 1366w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2021\/08\/ast-3-6-html-code-lists-frontend-300x139.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2021\/08\/ast-3-6-html-code-lists-frontend-1024x476.png 1024w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2021\/08\/ast-3-6-html-code-lists-frontend-768x357.png 768w\" sizes=\"(max-width: 1366px) 100vw, 1366px\" \/><\/figure>\n\n\n\n<p>Si desea a\u00f1adir algo de estilo a las vi\u00f1etas y listas, puede utilizar el siguiente CSS. A continuaci\u00f3n se muestran los pasos para utilizar CSS.<\/p>\n\n\n\n<p><strong>Primer paso<\/strong> - A\u00f1ada las siguientes clases CSS a <strong>ol&nbsp;<\/strong>(listas ordenadas) y <strong>ul<\/strong> (lista desordenada) con los siguientes c\u00f3digos HTML:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>C\u00f3digo para&nbsp;<strong>ol&nbsp;<\/strong>(listas ordenadas) - 'ast-content-ol-list'<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\"><ol class=\"ast-content-ol-list\">\n   <li>Uno<\/li>\n   <li>Dos<\/li>\n   <li>Tres<\/li>\n   <li>Cuatro<\/li>\n   <li>Cinco<\/li>\n<\/ol> \n<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>C\u00f3digo para&nbsp;<strong>ul<\/strong> (listas ordenadas) - 'ast-content-ul-list' <\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\"><ul class=\"ast-content-ul-list\">\n   <li>Rojo<\/li>\n   <li>Azul<\/li>\n   <li>Blanco<\/li>\n   <li>Amarillo<\/li>\n   <li>Verde<\/li>\n<\/ul> <\/pre>\n\n\n\n<p>Puede modificar el n\u00famero de elementos de la lista eliminando l\u00edneas o a\u00f1adiendo otras nuevas (<li>ITEM_NAME<\/li>). <\/p>\n\n\n\n<p><strong>Paso 2<\/strong> - 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. <\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"> \/* Estilo de lista de pedidos *\/ .entry-content ol.ast-content-ol-list {\n   counter-reset: my-ol-counter;\n   margin-left:1.4em;\n}\n.entry-content ol.ast-content-ol-list li {\n   position: relative;\n   padding-left: 30px;\n   list-style: none;\n}\n.entry-content ol.ast-content-ol-list li:before {\n   position: absolute;\n   top:50%;\n   left: 0;\n   anchura: 20px;\n   altura: 20px;\n   margin-top: -10px;\n   color: #fff;\n   text-align:center;\n   color de fondo: #0274be;\n   contenido: contador(mi-ol-contador,decimal);\n   contador-incremento: my-ol-contador;\n   font-size: 11px;\n   -webkit-border-radio: 50%;\n   border-radius: 50%;\n}\n\n\/* Estilo de lista desordenada *\/\n.entry-content ul.ast-content-ul-list {\n   margin-left:1.4em;\n}\n.entry-content ul.ast-content-ul-list li {\n   position: relative;\n   padding-left: 30px;\n   list-style: none;\n}\n.entry-content ul.ast-content-ul-list li:after{\n   position: absolute\n   top: -webkit-calc( 50% - -1px);\n   top: calc( 50% - -1px);\n   left: 0; width: 20px;\n   altura: 20px;\n   margin-top: -10px;\n   padding-top: 2px;\n   color: #fff;\n   text-align:center;\n   color de fondo: #0274be;\n   contenido: \"\\e900\";\n   font-size: 10px;\n   font-family: 'Astra';\n   -webkit-border-radius: 50%;\n   border-radius: 50%;\n   -webkit-transform: rotate(270deg);\n   -ms-transform: rotate(270deg);\n   transform: rotate(270deg);\n} <\/pre>\n\n\n\n<p>Si no est\u00e1 seguro de c\u00f3mo hacerlo, consulte <a rel=\"noopener noreferrer\" href=\"https:\/\/git-staging.wpastra.com\/es\/docs\/adding-custom-css-code\/\" target=\"_blank\">este art\u00edculo sobre c\u00f3mo a\u00f1adir CSS personalizado<\/a>.<\/p>\n\n\n\n<p>El resultado de a\u00f1adir el CSS anterior es el siguiente aspecto de tus vi\u00f1etas y listas:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2017\/11\/bullet-lists-output.png\"><img decoding=\"async\" width=\"448\" height=\"696\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2017\/11\/bullet-lists-output.png\" alt=\"Bullet Lists Output\" class=\"wp-image-28643\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2017\/11\/bullet-lists-output.png 448w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2017\/11\/bullet-lists-output-193x300.png 193w\" sizes=\"(max-width: 448px) 100vw, 448px\" \/><\/a><\/figure>\n\n\n\n<p>Puede modificar el color, la fuente, el espaciado y el tama\u00f1o de los elementos modificando las l\u00edneas apropiadas del c\u00f3digo CSS. Por ejemplo, si desea cambiar el color de las vi\u00f1etas, simplemente sustituya el c\u00f3digo de color ( color: #fff;) en el CSS anterior por el c\u00f3digo de color de su elecci\u00f3n.<\/p>","protected":false},"excerpt":{"rendered":"<p>El Editor de Bloques de WordPress proporciona por defecto un dise\u00f1o simple para vi\u00f1etas y listas. Abajo est\u00e1 la captura de pantalla de c\u00f3mo puedes a\u00f1adir un c\u00f3digo simple para listas con el Editor de Bloques de WordPress. Usamos los bloques \"HTML\" para a\u00f1adir los c\u00f3digos, y los bloques \"P\u00e1rrafo\" para a\u00f1adir el texto normal: Esta es una captura de pantalla de c\u00f3mo [...]<\/p>","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"docs_category":[2113],"docs_tag":[],"class_list":{"0":"post-23522","1":"docs","2":"type-docs","3":"status-publish","5":"docs_category-custom-css"},"spectra_custom_meta":{"_wp_old_slug":[""],"_wp_page_template":["default"],"wpil_sync_report3":["1"],"wpil_links_inbound_internal_count":["0"],"wpil_links_inbound_internal_count_data":["a:0:{}"],"wpil_links_outbound_internal_count":["0"],"wpil_links_outbound_internal_count_data":["a:0:{}"],"wpil_links_outbound_external_count":["3"],"wpil_links_outbound_external_count_data":["a:3:{i:0;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:68:\"https:\/\/wpastra.com\/wp-content\/uploads\/2017\/11\/bullet-lists-code.png\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:111:\"<img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2017\/11\/bullet-lists-code.png\" alt=\"\" class=\"wp-image-28642\"\/>\";s:15:\"added_by_plugin\";b:0;}i:1;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:48:\"https:\/\/wpastra.com\/docs\/adding-custom-css-code\/\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:29:\"how you can add custom CSS?\u00a0\";s:15:\"added_by_plugin\";b:0;}i:2;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:70:\"https:\/\/wpastra.com\/wp-content\/uploads\/2017\/11\/bullet-lists-output.png\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:113:\"<img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2017\/11\/bullet-lists-output.png\" alt=\"\" class=\"wp-image-28643\"\/>\";s:15:\"added_by_plugin\";b:0;}}"],"wpil_sync_report2_time":["2019-10-12T08:06:21+00:00"],"_edit_lock":["1690870879:86"],"_edit_last":["86"],"onesignal_meta_box_present":["1"],"onesignal_send_notification":[""],"site-sidebar-layout":["default"],"site-content-layout":["default"],"theme-transparent-header-meta":["default"],"_yoast_wpseo_content_score":["90"],"_ppc_meta_key":["a:8:{s:20:\"ppc_key5d92f85d42273\";s:60:\"Images &amp; Names Correctly. Title &amp; Alt Tags are Given\";s:8:\"ppc_key4\";s:15:\"Formatting Done\";s:8:\"ppc_key2\";s:23:\"Featured Image Assigned\";s:8:\"ppc_key3\";s:17:\"Category Selected\";s:8:\"ppc_key5\";s:15:\"Title is Catchy\";s:8:\"ppc_key6\";s:22:\"Social Images Assigned\";s:8:\"ppc_key7\";s:8:\"Done SEO\";s:8:\"ppc_key8\";s:28:\"Spelling and Grammar Checked\";}"],"tap_disable_autolinker":["no"],"tap_autolink_inside_heading":["global"],"tap_autolink_random_placement":["global"],"tap_post_autolinker_limit":["0"],"_yoast_wpseo_title":["How to Design Bullets & Lists in Astra?"],"_ht_kb_post_views_count":["7"],"_ht_kb_usefulness":["0"],"_ht_article_order_103":["23522"],"wp_last_modified_info":["May 15, 2023 @ 9:40 AM"],"wplmi_shortcode":["[lmt-post-modified-info]"],"views":["6900"],"helpful":["3"],"unhelpful":["9"],"redirects":["4"],"_yoast_wpseo_estimated-reading-time-minutes":["3"],"_lmt_disableupdate":["no"],"_wplmi_last_modified":["2023-05-15 09:40:13"],"rank_math_title":["How to Design Bullets & Lists in Astra?"],"rank_math_news_sitemap_robots":["index"],"rank_math_robots":["a:1:{i:0;s:5:\"index\";}"],"rank_math_analytic_object_id":["1307"],"rank_math_seo_score":["17"],"rank_math_internal_links_processed":["1"],"rank_math_og_content_image":["a:2:{s:5:\"check\";s:32:\"cd835fd431dc6b76202923039d691960\";s:6:\"images\";a:1:{i:0;i:102015;}}"],"rank_math_primary_docs_category":["2113"],"pfd_related_docs":[""],"_wpml_media_duplicate":["1"],"_trp_automatically_translated_slug_es_ES":["listas-de-vinetas-de-diseno"],"_uag_page_assets":["a:9:{s:3:\"css\";s:2495:\".wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape-top svg{width: calc( 100% + 1.3px );}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape.uagb-container__shape-top .uagb-container__shape-fill{fill: rgba(51,51,51,1);}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape-bottom svg{width: calc( 100% + 1.3px );}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape.uagb-container__shape-bottom .uagb-container__shape-fill{fill: rgba(51,51,51,1);}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__video-wrap video{opacity: 1;}.wp-block-uagb-container.uagb-is-root-container .uagb-block-debf2792{max-width: 100%;width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-debf2792 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 1200px);max-width: var(--inner-content-custom-width);width: 100%;flex-direction: column;align-items: center;justify-content: center;flex-wrap: nowrap;row-gap: 0px;column-gap: 0px;}.wp-block-uagb-container.uagb-block-debf2792{box-shadow: 0px 0px   #00000070 ;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;overflow: visible;border-color: inherit;row-gap: 0px;column-gap: 0px;}@media only screen and (max-width: 976px) {.wp-block-uagb-container.uagb-is-root-container .uagb-block-debf2792{width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-debf2792 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 1024px);max-width: var(--inner-content-custom-width);width: 100%;}.wp-block-uagb-container.uagb-block-debf2792{padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;}}@media only screen and (max-width: 767px) {.wp-block-uagb-container.uagb-is-root-container .uagb-block-debf2792{max-width: 100%;width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-debf2792 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 767px);max-width: var(--inner-content-custom-width);width: 100%;flex-wrap: wrap;}.wp-block-uagb-container.uagb-block-debf2792{padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;}}\";s:2:\"js\";s:0:\"\";s:18:\"current_block_list\";a:7:{i:0;s:14:\"core\/paragraph\";i:1;s:10:\"core\/image\";i:2;s:9:\"core\/list\";i:3;s:14:\"core\/list-item\";i:4;s:17:\"core\/preformatted\";i:5;s:14:\"uagb\/container\";i:6;s:14:\"core\/shortcode\";}s:8:\"uag_flag\";b:1;s:11:\"uag_version\";s:10:\"1777370964\";s:6:\"gfonts\";a:0:{}s:10:\"gfonts_url\";s:0:\"\";s:12:\"gfonts_files\";a:0:{}s:14:\"uag_faq_layout\";b:0;}"]},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"Sujay Pawar","author_link":"https:\/\/git-staging.wpastra.com\/es\/author\/sujay\/"},"uagb_comment_info":0,"uagb_excerpt":"WordPress Block Editor by default provides a simple design for bullets and lists. Below is the screenshot of how you can add a simple code for lists with WordPress Block&nbsp;Editor. We used the &#8220;HTML&#8221; blocks for adding the codes, and the &#8220;Paragraph&#8221; blocks for adding the regular text: This is a screenshot of how this&hellip;","_links":{"self":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/23522"}],"collection":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/comments?post=23522"}],"version-history":[{"count":0,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/23522\/revisions"}],"wp:attachment":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/media?parent=23522"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_category?post=23522"},{"taxonomy":"docs_tag","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_tag?post=23522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}