{"id":367340,"date":"2023-03-04T15:47:00","date_gmt":"2023-03-04T12:47:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=367340"},"modified":"2022-10-12T12:30:44","modified_gmt":"2022-10-12T09:30:44","slug":"como-crear-conmutadores-y-acordeones-en-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/como-crear-conmutadores-y-acordeones-en-wordpress\/","title":{"rendered":"C\u00f3mo crear conmutadores y acordeones en WordPress"},"content":{"rendered":"\n<p>Accordions y Toggles son elementos \u00fatiles que agregan m\u00e1s funcionalidad a su p\u00e1gina, le permiten estructurar mejor el contenido y ayudan con la organizaci\u00f3n general del sitio web. <strong>Agregarlos no es especialmente complicado, pero puede ser especialmente f\u00e1cil con la herramienta adecuada<\/strong>.<\/p>\n<p>Es por eso que optamos por los <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/?campaign=TogglesAccordions&#038;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Qi Addons f\u00e1ciles de usar para Elementor<\/a> que incluyen una <strong>amplia variedad de opciones de personalizaci\u00f3n y son incre\u00edblemente f\u00e1ciles de usar<\/strong>. Este complemento es actualmente la colecci\u00f3n m\u00e1s grande de <strong>60 widgets gratuitos<\/strong> que puede usar para agregar m\u00e1s funcionalidad a su sitio web. Adem\u00e1s, hay una incre\u00edble colecci\u00f3n de m\u00e1s de <strong>40 widgets Qi premium<\/strong>. Y, lo que tambi\u00e9n es muy importante, es que es compatible con todos los temas de WordPress.<\/p>\n<h2>Agregar acordeones y cambiar el widget gratuito con Qi Addons para Elementor<\/h2>\n<p>Qi Addons le permite <strong>personalizar completamente los acordeones y alterna el estilo del tema de WordPress que est\u00e1 utilizando<\/strong>, desde fuentes hasta colores y bordes y todo lo dem\u00e1s.<\/p>\n<p>Para inspirarse, le recomendamos que consulte la <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/accordions-and-toggles\/?campaign=TogglesAccordions&#038;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">p\u00e1gina de widgets<\/a>. Te mostraremos c\u00f3mo lo aplicamos.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f0a5ca65.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f0a5ca65.jpg\" alt=\"C\u00f3mo crear conmutadores y acordeones en WordPress\" ><\/a><\/p>\n<p>La percepci\u00f3n b\u00e1sica de c\u00f3mo funciona Elementor es todo lo que necesita comprender en esta secci\u00f3n. Esta es en realidad una fila que contiene dos columnas con una imagen en la columna de la izquierda y acordeones en la de la derecha. <strong>Por supuesto, un acorde\u00f3n puede ocupar toda la fila o cualquier parte de la fila, seg\u00fan sus necesidades<\/strong>.<\/p>\n<p>Antes de continuar, revisemos algunas caracter\u00edsticas b\u00e1sicas de estilo con las que viene este complemento. As\u00ed que empecemos por Comportamiento. <strong>Son posibles dos tipos de comportamiento: acordeones,<\/strong> en los que solo se puede abrir un elemento en un momento dado, y <strong>conmutadores<\/strong>, que permiten abrir m\u00e1s de un elemento en el mismo momento.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f0d359b6.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f0d359b6.jpg\" alt=\"C\u00f3mo crear conmutadores y acordeones en WordPress\" ><\/a><\/p>\n<p><strong>El estilo se puede definir a\u00fan m\u00e1s con bordes y hay varias opciones disponibles:<\/strong><\/p>\n<ul>\n<li>Est\u00e1ndar: sin bordes<\/li>\n<li>En caja \u2013 con bordes,<\/li>\n<li>Borde superior: solo tiene borde en la parte superior sobre el t\u00edtulo<\/li>\n<li>Borde entre: solo tiene el borde entre el t\u00edtulo y la descripci\u00f3n<\/li>\n<\/ul>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f10ce932.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f10ce932.jpg\" alt=\"C\u00f3mo crear conmutadores y acordeones en WordPress\" ><\/a><\/p>\n<h2>C\u00f3mo agregar Accoridons y Toggles con Qi Addons<\/h2>\n<p>Para comenzar, configuraremos la fila para que se divida en dos columnas y agregaremos una imagen a la columna de la izquierda, solo para que la secci\u00f3n sea m\u00e1s atractiva visualmente.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f143d6e6.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f143d6e6.jpg\" alt=\"C\u00f3mo crear conmutadores y acordeones en WordPress\" ><\/a><\/p>\n<p>Despu\u00e9s de agregar la imagen, encontraremos el widget Accordions and Toggles escribiendo en la barra de b\u00fasqueda o desplaz\u00e1ndonos hacia abajo en el men\u00fa. Cuando se encuentre el widget, <strong>simplemente haga clic en \u00e9l, mant\u00e9ngalo presionado y mu\u00e9vase hacia donde desea colocar el nuevo elemento<\/strong>.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f17f28ff.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f17f28ff.jpg\" alt=\"C\u00f3mo crear conmutadores y acordeones en WordPress\" ><\/a><\/p>\n<p>Agregamos el widget Accordions and Toggles al lado derecho de la fila, y puede ver <strong>todas las configuraciones relacionadas con \u00e9l a la izquierda<\/strong>. La configuraci\u00f3n predeterminada del widget est\u00e1 configurada de tal manera que el <strong>texto y el estilo coinciden autom\u00e1ticamente con el tema que est\u00e1 utilizando<\/strong>, por lo que, en caso de que no vea la necesidad de cambiarlo, simplemente puede finalizar el proceso aqu\u00ed, el widget se ver\u00e1 como pertenec\u00eda naturalmente. al tema<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f1aa77cc.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f1aa77cc.jpg\" alt=\"C\u00f3mo crear conmutadores y acordeones en WordPress\" ><\/a><\/p>\n<p>Lo siguiente que debe configurar es <strong>Comportamiento y estilo<\/strong>. Ya hemos mencionado las opciones de Comportamiento y Estilo para que pueda configurar aqu\u00ed lo que funcione para usted. A los efectos de este art\u00edculo, seleccionamos la opci\u00f3n Acordeones del men\u00fa Comportamiento y el estilo Est\u00e1ndar.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f1dc011b.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f1dc011b.jpg\" alt=\"C\u00f3mo crear conmutadores y acordeones en WordPress\" ><\/a><\/p>\n<p>Lo que se necesita hacer ahora es <strong>agregar elementos<\/strong>. Despl\u00e1cese hacia abajo para encontrar las <strong>opciones de elementos<\/strong>. Ver\u00e1 dos iconos peque\u00f1os en la esquina superior derecha de la pesta\u00f1a Elementos. El primero es para <strong>copiar un elemento existente<\/strong> y la <strong>peque\u00f1a X que est\u00e1 al lado es para eliminar un elemento<\/strong>. Debajo de la pesta\u00f1a Elemento se encuentra el <strong>bot\u00f3n Agregar nuevo<\/strong> que sirve para agregar nuevos elementos. Cuando hace clic para ingresar un nuevo elemento, <strong>primero debe establecer un t\u00edtulo y luego escribir el texto en el campo designado a continuaci\u00f3n.<\/strong>. Notar\u00e1 muchas opciones similares a las que se ofrecen en varios editores de texto para dise\u00f1ar y formatear el texto. Le recomendamos que organice el texto y el t\u00edtulo en este punto, ya que inmediatamente tendr\u00e1 una vista previa de c\u00f3mo se ver\u00e1 al final.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f206ce5c.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f206ce5c.jpg\" alt=\"C\u00f3mo crear conmutadores y acordeones en WordPress\" ><\/a><\/p>\n<p>Despu\u00e9s de ingresar el texto, puede establecer la <strong>altura del contenido<\/strong>. Esta opci\u00f3n <strong>se refiere al tama\u00f1o del campo de alternancia<\/strong>. Si lo establece en <strong>Altura del elemento m\u00e1s alto<\/strong>, cada elemento tendr\u00e1 el mismo tama\u00f1o que el m\u00e1s grande. Si selecciona la opci\u00f3n <strong>Altura de elemento individual<\/strong>, el tama\u00f1o de cada elemento se corresponder\u00e1 con el tama\u00f1o del contenido que contiene.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f234b68b.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f234b68b.jpg\" alt=\"C\u00f3mo crear conmutadores y acordeones en WordPress\" ><\/a><\/p>\n<p>Si desea <strong>cambiar los \u00edconos predeterminados que se muestran al abrir y cerrar el elemento, simplemente haga clic en el campo Abrir \u00edcono o Cerrar \u00edcono y se mostrar\u00e1n dos nuevas opciones<\/strong>. Uno es para agregar nuevos \u00edconos de la Biblioteca de \u00edconos y el otro es para agregar un SVG.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f262759d.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f262759d.jpg\" alt=\"C\u00f3mo crear conmutadores y acordeones en WordPress\" ><\/a><\/p>\n<p>Ahora podemos pasar a la <strong>configuraci\u00f3n de Estilo<\/strong>. Aqu\u00ed es donde realiza el ajuste fino del acorde\u00f3n y cambia el estilo del widget.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f28d995d.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f28d995d.jpg\" alt=\"C\u00f3mo crear conmutadores y acordeones en WordPress\" ><\/a><\/p>\n<p>Puede <strong>elegir el estilo del t\u00edtulo y establecer la Tipograf\u00eda del t\u00edtulo<\/strong>. Como mencionamos, las opciones predeterminadas est\u00e1n configuradas de tal manera que el estilo del widget coincida con el tema que est\u00e1 utilizando. Pero siempre puede <strong>probar todas las dem\u00e1s opciones simplemente seleccion\u00e1ndolas y los cambios ser\u00e1n inmediatamente visibles en el widget en el lado derecho de la pantalla<\/strong>. Explore las opciones y vea qu\u00e9 funciona mejor para usted.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f2cbed4b.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f2cbed4b.jpg\" alt=\"C\u00f3mo crear conmutadores y acordeones en WordPress\" ><\/a><\/p>\n<p>Los siguientes ajustes se refieren a los cambios de estilo que <strong>le suceden a un elemento cuando se cierra o se abre<\/strong>. Puede, por ejemplo, configurar el texto para que tenga un color diferente cuando se abre, o el fondo puede tener un color diferente. Tambi\u00e9n existe la opci\u00f3n de establecer un relleno diferente cuando el elemento est\u00e1 activo, es decir, abierto.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f30ee551.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f30ee551.jpg\" alt=\"C\u00f3mo crear conmutadores y acordeones en WordPress\" ><\/a><\/p>\n<p>Si prefieres los videotutoriales echa un vistazo a este creado por los autores de Qi:<\/p>\n<div class=\"sds-iframe-wrapper fitvidsignore\" style=\"position:relative;padding-top:56.25%;max-width:100%;\"><iframe allowfullscreen style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" src=\"\/\/www.youtube.com\/embed\/WDgy5sFM0vc\" frameborder=\"0\"><\/iframe><\/div>\n<h2>En conclusi\u00f3n<\/h2>\n<p>A medida que se sienta m\u00e1s familiarizado con el complemento, explorar\u00e1 opciones a\u00fan m\u00e1s refinadas para ajustar el estilo de su widget Accordion and Toggles. Esta herramienta intuitiva es perfecta para principiantes, ya que es incre\u00edblemente f\u00e1cil de usar, mientras que los usuarios avanzados tambi\u00e9n disfrutar\u00e1n us\u00e1ndola, ya que ofrece una gran cantidad de opciones de personalizaci\u00f3n.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wpklik.com\" class=\"external external_icon\">wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00a1Aprenda a crear acordeones en WordPress con un complemento gratuito y organice su contenido de la manera m\u00e1s f\u00e1cil de usar!<\/p>\n","protected":false},"author":1,"featured_media":364273,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[566],"tags":[849],"class_list":["post-367340","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-conceptos-basicos-de-wordpress","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/367340","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/comments?post=367340"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/367340\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media\/364273"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media?parent=367340"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/categories?post=367340"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/tags?post=367340"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}