Los códigos que uso en mi web de www.cursowp-online.com

por Gonzalo de la Campa | 3 Ago, 2020 | WordPress

Muchos de mis alumnos me preguntan cómo hago esto o lo de más allá en mi web y algunas de las cosas que hay están hechas con código CSS u otros códigos.

Uso poco CSS porque como puedes leer en este artículo no soy muy amigo de meter CSS ni código en mis webs ni la de mis clientes, pero te dejo aquí las que uso y dónde coloco cada código por si tú quieres hacer cosas parecidas a las mías.

Todos los códigos CSS que uso los pongo en Divi > Opciones del tema > En la caja de CSS de abajo. Si usas otro tema diferente a Divi tendrás que ponerlo en dónde proceda en el tema que uses.

Código CSS para Ocultar VER CARRITO en la página de CAJA de WooCommerce

Si usas Divi, pega esto en Divi > Opciones del tema > En la caja para CSS de abajo.

/* Ocultar VER CARRITO en la página de CAJA de WooCommerce */
.woocommerce .woocommerce-message {
display: none;
}

Código CSS para quitar el teléfono en el menú secundario o Top en Divi

Si usas Divi, pega esto en Divi > Opciones del tema > En la caja para CSS de abajo.

/* Quita teléfono en el menú secundario o superior de Divi */
et-info-phone { display:none !important }

Código CSS para destacar con un fondo (o convertir en botón) un enlace del menú en Divi

Si usas Divi, pega esto en Divi > Opciones del tema > En la caja para CSS de abajo. Y después ve a Apariencia > Menús y en Opciones de Pantalla (arriba a la derecha) activa Clases CSS y luego en el texto del menú que quieras destacar pon: destacado-menu

/————————————————/
/–DESTACAR CON UN FONDO EN UN ENLACE DEL MENU—/
/————————————————/

.destacado-menu > a {
background-color: #E09900;
color: #fff;
padding-top: 10px;
margin-top: -5px;
margin-bottom: 3px;
padding-left: 5px;
padding-right: 5px;
border-radius: 4px;
}

Código CSS para hacer más ancho el menú desplegable en Divi

Si usas Divi, pega esto en Divi > Opciones del tema > En la caja para CSS de abajo.

/————–ANCHO MENU DESPLEGABLE————/
/————————————————/
top-menu li li a {
width: 460px;
}
.nav li ul {
width: 480px;
}

Código CSS para poner sombras en los menús al pasar con el ratón en Divi

Si usas Divi, pega esto en Divi > Opciones del tema > En la caja para CSS de abajo.

/------------------------------------------------/
/-------------[GQ - FLOATING SHADOW]-------------/
/------------------------------------------------/
#top-menu li {
    padding-right: 5px;}

#top-menu > li > a {
    padding: 15px 15px!important;
    margin-bottom: 15px;}

#top-menu .menu-item-has-children > a:first-child:after {
    display:none;}

#top-menu-nav > ul > li > a {
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    background: #ffffff;
    color: #E28A0D;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;}

#top-menu-nav > ul > li > a:before {
    pointer-events: none;
    position: absolute;
    z-index: -1;
    content: '';
    top: 100%;
    left: 5%;
    height: 10px;
    width: 90%;
    opacity: 0;
    background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, transparent 80%);
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, transparent 80%);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform, opacity;
    transition-property: transform, opacity;}

#top-menu-nav > ul > li > a:hover, 
#top-menu-nav > ul > li > a:focus, 
#top-menu-nav > ul > li > a:active {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    opacity: 1;
    background: #154575;}

#top-menu-nav > ul > li > a:hover:before, 
#top-menu-nav > ul > li > a:focus:before, 
#top-menu-nav > ul > li > a:active:before {
    opacity: 1;
    -webkit-transform: translateY(5px);
    transform: translateY(5px);}

Código CSS para cambiar el tamaño de los H2 en los móviles

Si usas Divi, pega esto en Divi > Opciones del tema > En la caja para CSS de abajo.

/————————————————/
/—TAMAÑO H2 EN MÓVILES—-/
/————————————————/
@media screen and (max-width:720px) {
h2 {
font-size: 30px !important;
}

Código para colapsar el Menú de Divi en el móvil y que aparezca el símbolo + en lugar de todos los submenús

Este código debes ponerlo en Divi > Opciones del Tema > Integración > Body (es la segunda caja) y en los botones de arriba debes tener activado: Activar código del cuerpo

<!-- COLAPSAR O PLEGAR el menú en el móvil -->


<style type="text/css">
#main-header .et_mobile_menu .menu-item-has-children > a { background-color: transparent; position: relative; }
#main-header .et_mobile_menu .menu-item-has-children > a:after { font-family: 'ETmodules'; text-align: center; speak: none; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; position: absolute; }
#main-header .et_mobile_menu .menu-item-has-children > a:after { font-size: 16px; content: '\4c'; top: 13px; right: 10px; }
#main-header .et_mobile_menu .menu-item-has-children.visible > a:after { content: '\4d'; }
#main-header .et_mobile_menu ul.sub-menu { display: none !important; visibility: hidden !important;  transition: all 1.5s ease-in-out;}
#main-header .et_mobile_menu .visible > ul.sub-menu { display: block !important; visibility: visible !important; }
</style>

<!-- JS para menú plegable móvil Divi -->

<script type="text/javascript">
(function($) {
      
    function setup_collapsible_submenus() {
        var $menu = $('#mobile_menu'),
            top_level_link = '#mobile_menu .menu-item-has-children > a';
             
        $menu.find('a').each(function() {
            $(this).off('click');
              
            if ( $(this).is(top_level_link) ) {
                $(this).attr('href', '#');
            }
              
            if ( ! $(this).siblings('.sub-menu').length ) {
                $(this).on('click', function(event) {
                    $(this).parents('.mobile_nav').trigger('click');
                });
            } else {
                $(this).on('click', function(event) {
                    event.preventDefault();
                    $(this).parent().toggleClass('visible');
                });
            }
        });
    }
      
    $(window).load(function() {
        setTimeout(function() {
            setup_collapsible_submenus();
        }, 700);
    });
 
})(jQuery);
</script>

Código para cambiar el color del menú en el navegador en el móvil

Este código debes pegarlo en Divi > Opciones del Tema > Integración > Head (es la primera caja) y en los botones de arriba debes tener activado: Activar código de cabecera

<!-- CAMBIAR EL COLOR DEL NAVEGADOR en el móvil -->
<meta name="theme-color" content="#284775" />

Cómo dar clases online en directo (la mejor forma de hacerlo)

por Gonzalo de la Campa | 18 Mar, 2020 | WordPress

Hay muchas formas de dar clases online en directo. Hay muchas herramientas para hacerlo, desde las gratuitas hasta las de pago.

Hoy quiero contarte la que para mi es la mejor forma de dar clases online en directo porque cumple estos requisitos:

1. No vas a tener que conseguir todos los emails de tus alumnos
2. Vas a tener una Academia Online bien montada de forma sencilla
3. Vas a poder tener una herramienta de clases online gratis
4. En las clases vas a poder tener chat en vivo
5. Los alumnos van a poder hablar y participar si tu quieres
6. Vas a poder grabar las clases
7. etc.

Que herramientas usar para dar clases online en directo:

Puedes hacerlo de 2 maneras. Yo te recomiendo la segunda ya que si quieres dedicarte a esto, es mejor hacerlo bien.

Pero si por urgencia necesitas salir del paso, puedes optar por la primera opción al principio.

1. La forma rápida de dar clases online en directo (más chapucera):

Puedes usar la herramienta ZOOM en su versión gratuita y crear una Sesión con Vídeo encendido.

Simplemente tendrás que copiar el enlace y compartirlo con tus alumnos enviándoselo a su email o a su WhastApp.

Es decir, necesitarás recopilar antes todos los correos o números de teléfono de tus alumnos. Con esta opción corres el riesgo de que a algún alumno le llegue a Spam o no lo vea o lo borre sin darse cuenta.

Esta solo es buena solución para salir del paso, pero si quieres dedicarte a ser profesor online, te recomiendo que montes una Academia Online ya que no cuesta apenas tiempo y dinero y lo harás todo de una forma mucho más pprofesional.

2. La forma recomendada de dar clases online en directo:

Esta es la que yo recomiendo. Se trata de crear una web en WordPress y añadir el plugin SENSEI que podrás descargar gratis dentro de mi Curso de Crear Academias Online y vincularlo a la herramienta gratuita ZOOM.

De esta forma:

• No tendrás que recopilar los emails
• Podrás tener un acceso privado dentro de tu web
• Cada alumno tendrá su propia contraseña
• Podrás pagar el curso por la web
• Podrás tener estadísticas de ventas y alumnos matriculados
• Podrás ponerles exámenes online
• Podrás tener un sistema de mensajes privados con los alumnos
• Podrás subir grabaciones de las clases
• Los alumnos podrán descargar documentos o lo que quieras
• etc.

En este vídeo te explico cómo puedes montar una Academia Online en 20 minutos en tu web en WordPress.

Y una vez tengas montada tu Academia Online, ya simplemente tendrás que vincular tu academia con un enlace entre una de tus lecciones y la herramienta Zoom.

En este vídeo te explico paso a paso, para que veas que en pocos minutos vas a poder estar dando clases online dentro de tu Academia Online en WordPress:

Si no tienes página web empieza por aquí…

Si quieres dedicarte a la formación online pero empiezas desde cero mi consejo es que sigas estos pasos:

Infórmate si quieres primero y mira cómo hay muchas soluciones, pero para mi hay una recomendada y es tener la Academia Online dentro de tu propia página web.

De este modo no perderás miles de euros en comisiones.

Entra aquí y mira las Plataformas para crear cursos online y cuál es la mejor de todas.

Y si ya te has decidido y quieres crear tu página web para luego agregarle la Academia Online para vender cursos online, entonces mira este vídeo y conoce el Tema Divi que es el tema más instalado en el mundo en WordPress, por encima de los temas gratis.

En mi Curso de Divi podrás descargar Divi gratis para empezar a disfrutar de esta joya y montar una web profesional en poco tiempo aunque no tengas ni idea de estas cosas.

Es decir, para la mayoría de las personas que usan WordPress, Divi es el mejor tema de WordPress, para mi incluido.

Aquí te dejo un vídeo de cómo hacer una web con Divi en 20 minutos para que se te vaya haciendo la boca agua 😉

El mejor tema de WordPress [2020]

por Gonzalo de la Campa | 20 Ene, 2020 | WordPress

• ¿Quieres saber cuál es el mejor tema de WordPress?
• ¿Estás harto de buscar los mejores temas de WordPress y que cada uno te diga una cosa?
• ¿Quieres hacer una web y quieres asegurarte de hacerla con el mejor tema de WordPress?

Si has respondido que sí a alguna de las preguntas anteriores, estás de enhorabuena.

Hoy te voy a explicar la manera de que descubras por ti mismo cuál es el mejor tema de WordPress en el mundo o en cualquier país en concreto:

• El mejor tema de WordPress en España,
• el mejor tema de WordPress en EEUU,
• el mejor tema de WordPress en Alemania,
• el mejor tema de WordPress en Argentina,
• etc.

A partir de hoy ya no tendrás que creerte lo que veas en esos interminables post del tipo: Los 40 mejores temas de WordPress, los 15 mejores temas de WordPress, etc.

Desde hoy, aprenderás a saber cuál es el mejor tema de WordPress sea el año que sea y lo podrás ver en menos de un minuto.

Si te gusta lo que vas a ver en el vídeo comparte en tus redes sociales este post, suscríbete a mi Canal de YouTube y dale un like al vídeo. Gracias!!!