Ändern der Gestaltung der Schaltfläche für den Dateiupload

Einführung

Möchten Sie das Design der Dateiupload-Schaltfläche ändern? Unabhängig davon, ob Sie den modernen oder den klassischen Stil für Ihre Uploads verwenden, wird immer ein Standard-Styling angewendet.

Mit der Kraft von CSS können Sie Ihre Upload-Felder personalisieren, um sie an Ihr eigenes Firmen-Branding anzupassen. In diesem Tutorial zeigen wir Ihnen, wie! Tauchen wir gleich ein!

Erstellen des Formulars

Zunächst erstellen wir ein neues Formular und fügen unsere Felder hinzu.

Wenn Sie Hilfe bei der Erstellung Ihres Formulars benötigen, sehen Sie sich bitte diese nützliche Dokumentation an.

Verwendung des modernen Stils

Wenn Sie ein Datei-Upload-Formularfeld hinzugefügt haben, müssen Sie entscheiden, ob Sie den modernen oder den klassischen Stil verwenden möchten. In diesem Tutorial zeigen wir Ihnen die CSS, die Sie für beide Varianten benötigen.

In diesem Abschnitt werden wir jedoch mit der Gestaltung des modernen Stils für dieses Feld beginnen. Wählen Sie dazu den Datei-Upload in Ihrem Formular aus und klicken Sie auf die Registerkarte Erweitert. Vergewissern Sie sich, dass Sie im Dropdown-Menü Stil die Option Modern ausgewählt haben, und speichern Sie Ihr Formular.

Hinzufügen von CSS für einen modernen Stil

Fügen Sie bei der Gestaltung für den Upload der Modern Style-Datei diese CSS zu Ihrer Website hinzu. Wenn Sie Hilfe benötigen, wie und wo Sie Ihrer Website benutzerdefinierte CSS hinzufügen können, lesen Sie bitte dieses Tutorial.

.dz-message svg {
    display: none;
}

.modern-title::before {
  content: '';
  /*Change the URL below to point to the image you would like to display*/
  background: url(https://myexample-site.com/img/my-new-file-upload-image.svg);
  width: 100px;
  height: 35px;
  background-repeat: no-repeat;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wpforms-uploader.dz-clickable {
    min-height: 100px;
}

Durch das Hinzufügen dieses CSS kann Ihr File Upload für den modernen Stil nun spezifischer für Ihr Unternehmensbranding erscheinen.

Verwendung des klassischen Stils

Genau wie beim modernen Stil können wir auch für den klassischen Stil das Styling anpassen.

Für diesen Abschnitt müssen Sie im Dropdown-Menü Stil auf der Registerkarte Erweitert des Feldes die Option Klassisch auswählen.

Hinzufügen von CSS für den klassischen Stil

Fügen Sie bei der Gestaltung für den Upload der klassischen Stildatei dieses CSS zu Ihrer Website hinzu. Wenn Sie Hilfe dabei benötigen, wie und wo Sie Ihrer Website benutzerdefinierte CSS hinzufügen können, lesen Sie bitte dieses Tutorial.

input[type="file"] {
  outline: none !important;
  padding: 4px !important;
  margin: -4px !important;
}

input[type="file"]:focus-within::file-selector-button,
input[type="file"]:focus::file-selector-button {
  outline: 2px solid #0964b0 !important;
  outline-offset: 2px !important;
}

input[type="file"]::before {
  top: 16px !important;
}

input[type="file"]::after {
  top: 14px !important;
}

input[type="file"] {
  position: relative !important;
}

input[type="file"]::file-selector-button {
  width: 136px !important;
  color: transparent !important;
}

input[type="file"]::before {
  position: absolute !important;
  pointer-events: none !important;
  left: 40px !important;
  color: #0964b0 !important;
  content: "Upload File" !important;
}

input[type="file"]::after {
  position: absolute !important;
  pointer-events: none !important;
  left: 16px !important;
  height: 20px !important;
  width: 20px !important;
  content: "" !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230964B0'%3E%3Cpath d='M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3h-2zM7 9l1.41 1.41L11 7.83V16h2V7.83l2.59 2.58L17 9l-5-5-5 5z'/%3E%3C/svg%3E") !important;
}

input[type="file"]::file-selector-button {
  border-radius: 4px !important;
  padding: 0 16px !important;
  height: 40px !important;
  cursor: pointer !important;
  background-color: white !important;
  border: 1px solid rgba(0, 0, 0, 0.16) !important;
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05) !important;
  margin-right: 16px !important;
  transition: background-color 200ms !important;
}

/* hover state */
input[type="file"]::file-selector-button:hover {
  background-color: #f3f4f6 !important;
}

/* active state */
input[type="file"]::file-selector-button:active {
  background-color: #e5e7eb !important;
}

Und das war's! Jetzt können Sie das Design der Schaltfläche für den Datei-Upload ganz einfach aktualisieren. Möchten Sie ein bestimmtes Verzeichnis für Ihre Datei-Uploads festlegen? Werfen Sie einen Blick auf unsere Anleitung zum Festlegen eines bestimmten Verzeichnisses für Datei-Uploads.