$

Iniciar sesión

Acceder desde $10/mes→

Divi

Actualizar CPT desde el front-end con ACF en Divi

Jefferson Maldonado
Por Jefferson Maldonado 1 Jul 2021 5 min de lectura 4 comentarios
Inicio / Blog / Divi / Actualizar CPT desde el front-end con ACF en 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:

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

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 ⭐

Código
/*** 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;
}
// ¿Te sirvió este tutorial?

Imagina lo que aprenderás
con los cursos completos

En UXDivi llevamos los tutoriales del blog al siguiente nivel: proyectos reales de principio a fin, recursos descargables y soporte directo conmigo. Todo por menos del costo de un curso individual en otra plataforma.

Ver planes de membresía → Explorar el catálogo de cursos
+44 cursos +1112 alumnos 4.7 en Trustpilot Garantía 7 días
Jefferson Maldonado
// Escrito por

Jefferson Maldonado

UX Director · Founder UXDivi, MUX Studio y UXDivi Templates

UX Director | fundador de UXDivi y MUX Studio

Continúa aprendiendo

Artículos relacionados que pueden interesarte.

// Explorar todo el blog →

Comentarios

4 comentarios

Para dejar un comentario, accede a tu cuenta de UXDivi.

Acceder a mi cuenta →
Rafael Trigo Miembro Hace 4 años

Hola, cómo le muestro el formulario solo al autor del post?? Gracias!

↪
Jefferson M. Autor Hace 4 años

Puedes hacerlo creando una condición, donde ese módulo solo se muestre al usuario tipo «autor» puedes ver más sobre las condiciones de Divi acá: https://uxdivi.com/blog/nuevo-divi-update-contenido-condicional-en-divi

↪
SANDRA OCHOA Miembro Hace 2 años

Holaa! una consulta hay algun tutorial con ACF y woo?

↪
Jefferson Maldonado Autor Hace 2 años

Que tal Sandra, si, acá puedes ver como lo trabajamos en los campos de productos: https://uxdivi.com/blog/diseno-de-producto-inspirado-en-starbucks-con-el-theme-builder-de-divi-uxdivilivedesign

↪