Carro de compras

No hay productos en el carrito.

Carro de compras

No hay productos en el carrito.

Registro de Propiedades (CPT) desde el Front-end con ACF y Divi

Jefferson Maldonado 23 de junio de 2021
4 Comentarios
Registro de Propiedades (CPT) desde el Front-end con ACF y Divi



Contenido Restringido 🖐

Accede a este y otros contenidos siendo premium. ¿Aún no eres premium? Adquiere una membresía aquí ⭐

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:

VER DEMO

Ejemplo de formulario de registro:

Registro de 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 ⭐

/*** 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;
}
Categorías: Tutoriales Premium
Tags:
Jefferson Maldonado
UX Director | fundador de UXDivi y MUX Studio

Artículos relacionados

Comentarios

    1. Jefferson Maldonado 25 de enero de 2022

      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. 😊🖐