[et_pb_section fb_built=»1″ admin_label=»section» _builder_version=»4.16″ global_colors_info=»{}»][et_pb_row admin_label=»row» _builder_version=»4.22.1″ background_size=»initial» background_position=»top_left» background_repeat=»repeat» width=»75%» max_width=»2560px» global_colors_info=»{}»][et_pb_column type=»4_4″ _builder_version=»4.16″ custom_padding=»|||» global_colors_info=»{}» custom_padding__hover=»|||»][et_pb_text _builder_version=»4.22.1″ _module_preset=»default» global_colors_info=»{}»]
Déjame adivinar, estás diseñando en tu página WordPress con el maravilloso tema DIVI instalado, y quieres hacer una cosa que no sabes exactamente cómo hacer: Hacer un Botón de Anchura Completa en Divi que ocupe el ancho completo de una caja.
No te preocupes más, aquí te voy a dar la solución sin muchas complicaciones, es muy sencillo.
Lo podrás hacer sin plugins y en menos de 10 segundos, lo que tardes en escribir un código CSS de una línea.
[/et_pb_text][et_pb_button button_text=»Pasa de esto» button_alignment=»center» _builder_version=»4.22.1″ _module_preset=»default» custom_css_main_element=»text-decoration:none;» global_colors_info=»{}»][/et_pb_button][et_pb_button button_text=»A esto» button_alignment=»center» _builder_version=»4.22.1″ _module_preset=»default» custom_css_main_element=»width:100%;||text-decoration:none;» global_colors_info=»{}»][/et_pb_button][et_pb_text _builder_version=»4.22.1″ _module_preset=»default» custom_margin=»||5px|||» global_colors_info=»{}»]
Haz tus botones de ancho completo en DIVI sin plugins
[/et_pb_text][et_pb_text _builder_version=»4.22.1″ _module_preset=»default» global_colors_info=»{}»]
Lo primero que tendremos que realizar es poner un sencillo botón.
Habiendo hecho esto tendremos esto:
Acto seguido hemos de proceder a modificar dicho botón por defecto de Divi:
En la configuración del módulo de botón Divi, vamos a ir en las pestañas de arriba a Avanzado y a CSS Personalizado, como se ve en la imagen:
Dentro del CSS personalizado de dentro de exactamente ese módulo, en Elemento principal
escribiremos lo siguiente:
width: 100%;
Esto es un código CSS que viene a decir que ese módulo debe ocupar el 100% de la caja en la que está ubicado, ajustándose al máximo.
El resultado de nuestra actuación será este:
¡Listo! Habremos ampliado nuestro botón en Divi.
Espero que te haya ayudado.
Si necesitas alguien que te eche un cable en tu proyecto tienes que saber que ofrezco un servicio de diseño web. ¡Consúltame y te ayudo encantado!
[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]
