与模块 迪维滑块迪维模板典雅主题 de WordPress podemos incluir en nuestra web un slider con fotografía y texto principal para enlazarlo a un artículo de nuestra web. Vamos a ver cómo podemos modificar la altura del slider para que se ajuste al diseño de nuestra web sin necesidad de tocar nada de hojas de estilo. Todos los cambios que vamos a implementar se realizarán directamente sobre la configuración del módulo en el 迪维构造器 这将有利于我们的工作 网页设计. No será necesario tocar la hoja de estilos de Divi, ya que añadiremos nuestras personalizaciones desde el constructor de nuestro Divi Slider CSS.

Slider Divi: Antes y despues de modificar la altura

Este es un ejemplo de un slider antes y después de realizar las modificaciones para que veáis lo que se quiere conseguir con este tutorial.

Divi Slider 00 1024x210 Modificar altura del slider Divi

之前在航空维修部调整滑块后

这是原来的设计。 约468px的高度。 这种变化会做的就是让它更薄,300像素。

Divi Slider 01 1024x481 Modificar altura del slider Divi

滑块最终结果迪维

Para ello habrá que realizar los siguientes ajustes de alturarellenoancho de la descripción de cada slide.

Divi Slider 02 1024x481 Modificar altura del slider Divi

参数滑块

迪维设置部分

建设者迪维 tenemos una sección principal en morado, y el módulo de Divi Slider en gris con ancho completo de la página. El ancho completo lo conseguimos obligando a que el margen y el espacio (margin y padding) sean cero. Si lo dejamos en blanco Divi dejará un hueco entre los elementos. En este caso, entre el borde de la página y nuestro slider.

Divi Slider 03 1024x194 Modificar altura del slider Divi

全角滑块模块迪维

Una vez dentro de nuestro Divi Slider, dentro de la configuración de la sección, en ajustes de estilos de 自定义CSS, indicamos que la altura del elemento principal sea 300px.

Divi Slider 04 Modificar altura del slider Divi

自定义CSS滑块

迪维滑块模块设置

Dentro del módulo de Divi slider, en 高级设置设计,我们建立了一个 顶部填充 40像素。

Divi Slider 05 Modificar altura del slider Divi

高级设置滑盖设计迪维

Divi Slider CSS

然后在样式设置 自定义CSS, vamos a ajustar las CSS sin tener que escribir en la hoja de estilos. Para ello indicamos que la altura sea 300px para el 主要元素.

Divi Slider 06 Modificar altura del slider Divi

Divi Slider CSS

我们做的一样 滑动的描述标题幻灯片.

Divi Slider 07 Modificar altura del slider Divi

大小滑块滑动迪维

在标签 常规设置,配置每个幻灯片。 理想情况下,你将只有一个滑梯,配置它,然后用所有配置设置克隆。

Divi Slider 08 Modificar altura del slider Divi

迪维幻灯片滑块

在每一张幻灯片,我们会去设置 自定义CSS 并且放了300到的高度:

  • 主要元素
  • 标题幻灯片
  • 幻灯片容器描述
  • 说明幻灯片
  • 幻灯图片
Divi Slider 09 Modificar altura del slider Divi

幻灯片设置滑块迪维

Conclusiones

有了这些变化,我们建立 滑块 以最适合我们的网页设计不增加自定义样式给我们 迪维子主题.

Recordaros, que este tutorial solo lo podéis seguir si disponéis de la plantilla Divi de Elegant Themes, y que en la mayoría de las ocasiones, si os suscribís en su web obtendréis un cupón descuento de entre 10% y 20% según la licencia que compréis.

RGuardar

保存

Si te ha parecido interesante este artículo y crees que Divi puede ayudarte con tu proyecto Web y estás pensando en comprarlo, te pido que lo hagas pinchando en la siguiente imagen. Estoy afiliado a ElegantThemes y me llevaría una pequeña comisión si llegas a comprarlo. De esta manera me ayudas a mantener el blog y a escribir más artículos como este.

Si además, te haces suscriptor de ElegantThemes, podrás comprarlo con hasta un 20%的折扣 en algunos casos.

AfiliadosDivi Modificar altura del slider Divi

保存

Dime qué te ha parecido el artículo...

rating on Modificar altura del slider Divirating on Modificar altura del slider Divirating on Modificar altura del slider Divirating on Modificar altura del slider Divirating on Modificar altura del slider Divi1 votos, promedio: 5,00 de 5)
loading Modificar altura del slider DiviCargando…
广告

Cookies的使用

本网站使用cookies让你有最佳的用户体验。 如果你继续浏览您同意上述饼干的接受和认可我们 饼干政策,点击了解更多信息的链接。

饼干的通知

Veo que te gusta mi Blog...

Si te ha parecido interesante este artículo, no esperes a suscribirte a mi blog. Cuando vuelva a escribir otro seguro que te interesará y no desearás no haberte enterado. Puedes suscribirte con total tranquilidad de que no recibirás spam. Lo odio igual que tu. Solo quiero que aprendas cosas nuevas y te sientas agusto con mis artículos. ¡Gracias!

感谢您的订阅!

用别针把它Pinterest上

分享此

分享

分享这篇文章与您的朋友!