[Actualizar] Propiedades (CPT) desde el Front-end con ACF y Divi

En este vídeo tutorial premium te enseñaremos a ACTUALIZAR una propiedad (CPT) desde el Front-end con ACF y Divi. En este caso lo aplicaremos en nuestra directorio de propiedades creado para nuestro curso de directorios con Divi.

Recuerda que en nuestro tutorial anterior te enseñamos cómo crear o registrar una propiedad con este mismo método. Bueno, ahora en este tutorial haremos algo muy parecido pero con la función de un usuario pueda actualizar los datos de cualquier ficha de propiedad (o cualquiera que sea tu CPT) hecho con Divi.

Además de esto, haremos el la actualización de las propiedades se puedan hacer desde la ficha de cada una de ellas, y que lo podamos hacer integrando un popup modificado en su totalidad con Divi.

En este tutorial se recomiendo integrar el sistema de membresías siguiendo nuestro curso de Woocommerce Membership con Divi, para que de esa manera crees un sistema activo de registro de cualquier tipo de contenido, en este caso propiedades, con un sistema de suscripciones potente.

Acá puedes ver el resultado de los ejemplos que usamos en este tutorial:

Ejemplo de formulario de registro:

Si te ha gustado este contenido no olvides compartirlo con tus amigos y conocidos, además recuerda que puedes compartirnos el enlace de tu creación en los comentarios de este contenido, así todos veamos los resultados maravillosos que conseguiste con este contenido prémium.

Descarga los recursos mencionados en este tutorial acá abajo 👇 siendo premium ⭐

/*** ESTILOS FORMULARIO ACF PROPIEDADES UXDIVI ***/
.acf-field input[type="text"], .acf-field input[type="password"], .acf-field input[type="date"], .acf-field input[type="datetime"], .acf-field input[type="datetime-local"], .acf-field input[type="email"], .acf-field input[type="month"], .acf-field input[type="number"], .acf-field input[type="search"], .acf-field input[type="tel"], .acf-field input[type="time"], .acf-field input[type="url"], .acf-field input[type="week"], .acf-field textarea, .acf-field select {
    width: 100%;
    padding: 9px 10px !important;
    margin: 0;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
    border-radius: 4px;
    border: 1px solid #c0c5cb;
}

.acf-field .acf-label label {
    font-weight: 700;
    font-size: 16px;
    color: #282f45;
}

ul.acf-radio-list li, ul.acf-checkbox-list li {
    font-size: 14px !important;
    line-height: 28px !important;
}

/* Boton Formulario ACF */
.acf-form-submit .acf-button {
    background-color: #4c7ce3;
    border: none;
    color: white;
    font-weight: 600;
    padding: 14px 48px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 20px 16px 10px 10px;
    border-radius: 3px;
    cursor: pointer;
}

/* Rango ACF */
.acf-range-wrap input[type=range] {
  height: 25px;
  -webkit-appearance: none;
  margin: 10px 0;
}
.acf-range-wrap input[type=range]:focus {
  outline: none;
}
.acf-range-wrap input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #282f45;
  background: #444;
  border-radius: 1px;
  border: 0px solid #282f45;
}
.acf-range-wrap input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000;
  border: 2px solid #000;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7px;
}
.acf-range-wrap input[type=range]:focus::-webkit-slider-runnable-track {
  background: #4c7ce3;
}
.acf-range-wrap input[type=range]::-moz-range-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000;
  background: #4c7ce3;
  border-radius: 1px;
  border: 0px solid #000000;
}
.acf-range-wrap input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000;
  border: 1px solid #4c7ce3;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: #FFF;
  cursor: pointer;
}
.acf-range-wrap input[type=range]::-ms-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
.acf-range-wrap input[type=range]::-ms-fill-lower {
  background: #4c7ce3;
  border: 0px solid #000000;
  border-radius: 2px;
  box-shadow: 0px 0px 0px #000000;
}
.acf-range-wrap input[type=range]::-ms-fill-upper {
  background: #4c7ce3;
  border: 0px solid #000000;
  border-radius: 2px;
  box-shadow: 0px 0px 0px #000000;
}
.acf-range-wrap input[type=range]::-ms-thumb {
  margin-top: 1px;
  box-shadow: 0px 0px 0px #000000;
  border: 1px solid #4c7ce3;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: #A1D0FF;
  cursor: pointer;
}
.acf-range-wrap input[type=range]:focus::-ms-fill-lower {
  background: #4c7ce3;
}
.acf-range-wrap input[type=range]:focus::-ms-fill-upper {
  background: #4c7ce3;
}

@media only screen and (max-width: 768px) {
  .acf-field .acf-label label {
    font-size: 14px;
  }
}

.acf-fields>.acf-tab-wrap {
    background: #FFF;
}

/*** ESTILOS FORMULARIO ACF PROPIEDADES UXDIVI ***/
.acf-field input[type="text"], .acf-field input[type="password"], .acf-field input[type="date"], .acf-field input[type="datetime"], .acf-field input[type="datetime-local"], .acf-field input[type="email"], .acf-field input[type="month"], .acf-field input[type="number"], .acf-field input[type="search"], .acf-field input[type="tel"], .acf-field input[type="time"], .acf-field input[type="url"], .acf-field input[type="week"], .acf-field textarea, .acf-field select {
    width: 100%;
    padding: 9px 10px !important;
    margin: 0;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
    border-radius: 4px;
    border: 1px solid #c0c5cb;
}

.acf-field .acf-label label {
    font-weight: 700;
    font-size: 16px;
    color: #282f45;
}

ul.acf-radio-list li, ul.acf-checkbox-list li {
    font-size: 14px !important;
    line-height: 28px !important;
}

/* Boton Formulario ACF */
.acf-form-submit .acf-button {
    background-color: #4c7ce3;
    border: none;
    color: white;
    font-weight: 600;
    padding: 14px 48px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 20px 16px 10px 10px;
    border-radius: 3px;
    cursor: pointer;
}

/* Rango ACF */
.acf-range-wrap input[type=range] {
  height: 25px;
  -webkit-appearance: none;
  margin: 10px 0;
}
.acf-range-wrap input[type=range]:focus {
  outline: none;
}
.acf-range-wrap input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #282f45;
  background: #444;
  border-radius: 1px;
  border: 0px solid #282f45;
}
.acf-range-wrap input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000;
  border: 2px solid #000;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7px;
}
.acf-range-wrap input[type=range]:focus::-webkit-slider-runnable-track {
  background: #4c7ce3;
}
.acf-range-wrap input[type=range]::-moz-range-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000;
  background: #4c7ce3;
  border-radius: 1px;
  border: 0px solid #000000;
}
.acf-range-wrap input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000;
  border: 1px solid #4c7ce3;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: #FFF;
  cursor: pointer;
}
.acf-range-wrap input[type=range]::-ms-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
.acf-range-wrap input[type=range]::-ms-fill-lower {
  background: #4c7ce3;
  border: 0px solid #000000;
  border-radius: 2px;
  box-shadow: 0px 0px 0px #000000;
}
.acf-range-wrap input[type=range]::-ms-fill-upper {
  background: #4c7ce3;
  border: 0px solid #000000;
  border-radius: 2px;
  box-shadow: 0px 0px 0px #000000;
}
.acf-range-wrap input[type=range]::-ms-thumb {
  margin-top: 1px;
  box-shadow: 0px 0px 0px #000000;
  border: 1px solid #4c7ce3;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: #A1D0FF;
  cursor: pointer;
}
.acf-range-wrap input[type=range]:focus::-ms-fill-lower {
  background: #4c7ce3;
}
.acf-range-wrap input[type=range]:focus::-ms-fill-upper {
  background: #4c7ce3;
}

@media only screen and (max-width: 768px) {
  .acf-field .acf-label label {
    font-size: 14px;
  }
}

.acf-fields>.acf-tab-wrap {
    background: #FFF !important;
}

.acf-fields>.acf-tab-wrap .acf-tab-group {
    position: relative;
    border-top: #ccd0d4 solid 0px !important;
    border-bottom: #ccd0d4 solid 0px !important;
    z-index: 2;
    margin-bottom: 0px !important;
}

.acf-fields>.acf-field {
    position: relative;
    padding: 15px 12px;
    border-top: #EEEEEE solid 1px;
    margin-top: 15px;
}

.acf-fields>.acf-tab-wrap .acf-tab-group li a {
    border-color: #f2f2f2;
    border-width: medium;
    border-radius: 3px;
}