Registro de Propiedades (CPT) desde el Front-end con ACF y Divi
Accede este contenido siendo premium o subiendo tu membresía actual ⭐
Si deseas acceder a este contenido completo puedes hacerlo teniendo una Membresía Anual.
Con este plan accederás a este y más contenidos premium de nuestra plataforma disponible únicamente para nivel de membresía, si no tienes una membresía o tienes una membresía diferente a la Anual, deberás adquirir o cambiar de membresía para acceder a este contenido.
En este vídeo tutorial premium te enseñaremos a crear un registro de Propiedades (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.
Al finalizar este tutorial premium habrás aprendido a crear y conectar un registro de ACF Pro para que usuarios de tu sitio, puedan registrar cualquier tipo de contenido (CPT) en un directorio que hayas creado 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;
}
![[Actualizar] Propiedades (CPT) desde el Front-end con ACF y Divi](https://uxdivi.com/wp-content/uploads/2021/07/Actualizar-Propiedades-CPT-desde-el-Front-end-con-ACF-y-Divi.png)
4.6 calificación promedio en 
Jefferson, muchas gracias por compartir tu conocimiento.
Crear este formulario es lo que me faltaba para concluir mi proyecto.
Un saludo!
¡Que bueno que te ha funcionado! Contenido pedido por ustedes y hecho para ustedes.
Jefferson que tal, una pregunta, como puedo integrar un formulario frontend como este pero con productos de woocommerce, es para hacer un marketplace
Que tal Osvaldo, no lo hemos probado con esa funcionalidad, pero para marketplace la verdad lo mejor es usar un plugin especializado para ello. Por ejemplo, en el curso de Marketplace de descargas digitales de Dokan, usamos ese plugin, que es de los más usados para esta funcionalidad, y justo vemos como los usuarios pueden cargar sus propios productos, ya sería cuestión de que le eches un vistazo a ver si se adapta a lo que necesitas. 😊🖐
Muchas gracias por el video tutorial!
Pero resulta que me dice que el pluguin requiere una actualización.
Ya está actualizado a su última versión.