Comment créer des diapositives pleine largeur avec des superpositions de texte en utilisant Elementor

图片[1]-如何使用Elementor创建带有文字覆盖的全宽幻灯片-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

如何使用Elementor插件,在WordPress网站中创建一个带有文字覆盖的全宽幻灯片,帮助你的网站更具专业感。

第一步:添加一个全宽布局

  1. 在WordPress后台,点击“page web" > "Ajouter une nouvelle page”,为页面命名并点击“Modifier avec Elementor".
图片[2]-如何使用Elementor创建带有文字覆盖的全宽幻灯片-光子波动网 | 专业WordPress修复服务,全球范围,快速响应
  1. 进入Elementor编辑器后,点击“+”图标选择布局,选择全宽的单列结构。
图片[3]-如何使用Elementor创建带有文字覆盖的全宽幻灯片-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

第二步:添加幻灯片组件

  1. 在Elementor编辑器左侧的元素库中,搜索“Slides”组件。
图片[4]-如何使用Elementor创建带有文字覆盖的全宽幻灯片-光子波动网 | 专业WordPress修复服务,全球范围,快速响应
  1. 拖动“Slides”组件到刚才创建的全宽布局中,默认的幻灯片将会出现。
图片[5]-如何使用Elementor创建带有文字覆盖的全宽幻灯片-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

第三步:自定义幻灯片图片

  1. 在编辑器左侧的“Slides”设置中,点击其中一个幻灯片项,展开编辑选项。
图片[6]-如何使用Elementor创建带有文字覆盖的全宽幻灯片-光子波动网 | 专业WordPress修复服务,全球范围,快速响应
  1. Cliquez "Image de fond”部分,上传想要使用的幻灯片图片。确保上传的图片宽度适合全宽布局,建议使用1920px或更高宽度的图片。
图片[7]-如何使用Elementor创建带有文字覆盖的全宽幻灯片-光子波动网 | 专业WordPress修复服务,全球范围,快速响应
  1. 选择好图片后,设置“placement”为“中心”,“ampleur”为“覆盖”,确保图片在各种屏幕尺寸下都能自适应。
图片[8]-如何使用Elementor创建带有文字覆盖的全宽幻灯片-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

第四步:添加文字覆盖

  1. Dans "Slides”设置中,可以看到“légende"et"descriptions”字段。此时可以输入想要显示的文字内容。
图片[9]-如何使用Elementor创建带有文字覆盖的全宽幻灯片-光子波动网 | 专业WordPress修复服务,全球范围,快速响应
  1. 使用这些字段来添加主要标题和副标题,并调整文本的样式、颜色和对齐方式,使其与图片视觉效果相协调。

第五步:自定义文字样式

  1. 文字覆盖的样式非常重要。点击“type”标签,在“légende"et"descriptions”部分调整字体的颜色、大小、阴影和位置。
图片[10]-如何使用Elementor创建带有文字覆盖的全宽幻灯片-光子波动网 | 专业WordPress修复服务,全球范围,快速响应
  1. 确保选择与背景图片形成良好对比的颜色,以确保文字清晰可读。
  2. 还可以通过“niveau élevé”选项卡进一步调整文字的位置,添加内边距或外边距,确保文字不挡住图片的关键部分。
图片[11]-如何使用Elementor创建带有文字覆盖的全宽幻灯片-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

第六步:调整diapositive (photographie, logiciel de présentation)的动画和效果

  1. Dans "élément”选项卡下,可以为幻灯片设置不同的过渡动画效果,如淡入、滑动等。
图片[12]-如何使用Elementor创建带有文字覆盖的全宽幻灯片-光子波动网 | 专业WordPress修复服务,全球范围,快速响应
  1. Dans "navigateur”部分,选择幻灯片的切换方式,可以选择是否显示箭头、分页点等导航工具。
图片[13]-如何使用Elementor创建带有文字覆盖的全宽幻灯片-光子波动网 | 专业WordPress修复服务,全球范围,快速响应
  1. 如果希望幻灯片自动切换,可以在“autoplay”部分开启并设置每张幻灯片的切换时间。
图片[14]-如何使用Elementor创建带有文字覆盖的全宽幻灯片-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

第七步:响应式优化

  1. Cliquez "响应模式”图标,查看幻灯片在桌面、平板和手机上的展示效果。
图片[15]-如何使用Elementor创建带有文字覆盖的全宽幻灯片-光子波动网 | 专业WordPress修复服务,全球范围,快速响应
  1. 在每种设备模式下,可以单独调整文字的大小、对齐方式,确保文字在小屏幕上不会显得过大或过小。
图片[16]-如何使用Elementor创建带有文字覆盖的全宽幻灯片-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

第八步:保存并预览

  1. Après avoir effectué tous les réglages, cliquez sur "poste”按钮,保存更改。
  2. 预览页面,查看全宽幻灯片的最终效果,确保文字覆盖、图片和动画效果都符合你的预期。

résumés

通过Elementor创建全宽幻灯片并添加文字覆盖,可以轻松打造出专业且美观的网页视觉效果。关键在于选择合适的背景图片、调整文字的样式,并确保幻灯片在不同设备上都能有良好的展示效果。


Contactez nous
Vous ne pouvez pas lire l'article ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !
Tel : 020-2206-9892
QQ咨询:1025174874
(iii) Courriel : info@361sale.com
Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.
© Déclaration de reproduction
Cet article a été écrit par : xiesong
LA FIN
Si vous l'aimez, soutenez-le.
félicitations0 partager (joies, avantages, privilèges, etc.) avec les autres
avatar de xiesong - Photon Flux | Service professionnel de réparation de WordPress, dans le monde entier, réponse rapide
commentaires achat de canapé

Veuillez vous connecter pour poster un commentaire

    Pas de commentaires