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

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

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" />
>> VALORA Y COMPARTE ESTE ARTÍCULO:
[Total: 1 Media: 5]
Libro Nº1 en AMAZON: Gana Dinero Vendiendo Cursos Online

Libro Nº1 en AMAZON: Gana Dinero Vendiendo Cursos Online

Hoy tengo el honor y la súper emoción de ver que mi libro: GANA DINERO VENDIENDO CURSOS ONLINE está como el libro más vendido de Amazon en varias categorías.

Además es el número uno en ventas tanto en categorías de Amazon.es como en categorías en Amazon.com

Es un libro que he hecho para ayudar a personas que quieren vivir de crear y vender cursos online y que quieren crear su propia Academia Online en WordPress sin usar plataformas de terceros como Hotmart, Udemy, etc.

Además he dejado un precio muy asequible, 0,99 céntimos de euro para que sea accesible a todo el mundo y pueda ayudar al máximo número de personas.

Cómo puedes ver en este vídeo de mi Canal de YouTube y en las imágenes que te dejo más abajo, en menos de 24 horas ya estaba como libro más vendido de Amazon en la categoría de Marketing y otras categorías como Economía y negocios, etc.

Aquí puedes verlo, ¡estoy encantado! jeje ¡no me lo esperaba!

Aquí te dejo una imagen dónde puedes ver que aparece como libro más vendido en Amazon.com en la categoría Economía y negocios:

Y en esta otra imagen aparece también como libro más vendido en la categoría de Marketing en Amazon.es¡una pasada vamos!

Así que si quieres comprarlo y sumarte a toda esa comunidad de lectores, este es el momento. Entra en Amazon y compralo por menos de 1 euro.

Incluye curso online de regalo dónde explico todo lo que debes saber antes de crear y vender cursos online:

Las diferencias entre unas plataformas y otras, las herramientas que vas a necesitar y sus precios, cómo vas a poder crear una Academia Online en 20 minutos con WordPress usando el plugin Sensei LMS en su versión de pago llamada: Sensei with WooCommerce Paid Courses (que incluyo en mi curso de Academias Online para descargar) y muchas cosas más.

>> VALORA Y COMPARTE ESTE ARTÍCULO:
[Total: 1 Media: 5]
Cómo dar clases online en directo (la mejor forma de hacerlo)

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

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 😉

>> VALORA Y COMPARTE ESTE ARTÍCULO:
[Total: 1 Media: 5]
Tutorial WP Rocket – Acelera la velocidad de carga de tu web en pocos clics

Tutorial WP Rocket – Acelera la velocidad de carga de tu web en pocos clics

Instala WP Rocket

Una vez hayas comprado WP Rocket o lo hayas descargado gratis dentro de mi Curso de SEO para WordPress ve a plugins > añadir nuevo y e instalalo y activalo.

Ahora ve a ajustes > WP Rocket.

Cómo instalar y configurar WP Rocket

Aquí WP Rocket nos dice que aunque no toquemos nada ya ha mejorado la velocidad de carga por nosotros ¡Una pasada! Pero aún así, tocando lo que te voy a explicar la podrás mejorar mucho más.

Este plugin podrás usarlo tanto si tienes la Licencia como si no la tienes. Siempre es recomendable comprar tu propia licencia pero podrás usarlo en ambos casos.

Errores habituales que pueden aparecer con WP Rocket

Si ves que el diseño de tu web se ha roto

Lo primero, no te asustes. 😉

Si usas algún tema que no sea compatible o algún plugin que tampoco lo sea puede pasarte, pero es fácil de solucionar..

Desactiva 1 a 1 funcionalidades que hayas activado y ve revisando si se arregla. Esto es como jugar al Cluedo, te toca encontrar el asesino. Y te aviso, suele ser el Mayordomo, es decir funcionalidades de combinación de html, css, etc.

Si te da un error 500…

Si te da error 500 es probable que en tu hosting tengas un CPU limitado. Habla con tu hosting par ampliarlo.

Otra solución en que desactives la precarga de caché.

Si ves una pantalla en blanco…

Si usando WP Rocket recibes una pantalla en blanco, suele ser por falta de memoria.

Te recomiendo tener un hosting de calidad que no te de problemas como ProfesionalHosting que es el que yo uso.

Si Lazy Load no te funciona

Hay temas y plugins que no son compatibles con la carga de imágenes en modo Lazy Load, si te pasa esto, simplemente no actives esta funcionalidad. Yo te recomendaría usar Temas súper contrastados como el Tema Divi que es el tema más instalado del mundo.

O cambias el tema o el plugin que te da la incompatibilidad o no podrás usar esta opción.

>> VALORA Y COMPARTE ESTE ARTÍCULO:
[Total: 0 Media: 0]
Cómo montar un negocio rentable en Internet sin cometer (apenas) errores

Cómo montar un negocio rentable en Internet sin cometer (apenas) errores

¿Quieres montar un negocio rentable en Internet? Ya habrás leído que cada vez son más los emprendedores que consiguen generar dinero trabajando desde casa.

Hoy día es mucho más sencillo generar ingresos desde casa que hace unos años.

Lo que debes saber antes de montar un negocio online:

Afortunadamente hoy existen más herramientas para emprender, diseñar tu página web, posicionarla en Google, etc.

Todo es más sencillo, hay más formación, pero también hay más competencia y por ello es vital que sepas cuáles son los errores más habituales al montar un negocio en Internet.

El éxito de montar un negocio en Internet no reside en las herramientas que uses sino en las decisiones que tomes y cómo las ejecutes.

Si quieres tomar buenas decisiones no te pierdas ninguno de estos vídeos dónde explico los errores más frecuentes al tratar de montar un negocio rentable en Internet:

Error #1: Parálisis por Análisis

Error #2: Querer todo GRATIS

Error #3: No validar tu idea de negocio

Error #4: Emprender sin dinero

Error #5: No optimizar tu página web al máximo

Error #6: No demostrar tu autoridad y conocimientos

Error #7: No montar un negocio escalable y rentable

Error #8: No conseguir suscriptores con un embudo de ventas

Error #9: No crear una marca personal que dispare tus ingresos

Error #10: No aprender a poner buenos precios para que multipliquen tus ventas

Error #11: No saber gestionar tu tiempo mediante el Time Bloking

Error #12: No invertir en formación online de forma continuada

Si te ha gustado puedes escribirme en los comentarios o apuntarte a mis cursos para que te pueda ayudar con soporte personalizado.

>> VALORA Y COMPARTE ESTE ARTÍCULO:
[Total: 0 Media: 0]
El mejor tema de WordPress [2020]

El mejor tema de WordPress [2020]

  • ¿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!!!

>> VALORA Y COMPARTE ESTE ARTÍCULO:
[Total: 1 Media: 5]

Dime dónde te envío el descuento cuándo saque el curso

Responsable de los datos: Gonzalo de la Campa Marinas
Finalidad de los datos: Enviarte información.
Almacenamiento de los datos: Base de datos alojada en Profesional Hosting (UE)
Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

Dime dónde te debo contactar
si te toca el Pack

Responsable de los datos: Gonzalo de la Campa Marinas
Finalidad de los datos: Enviarte información.
Almacenamiento de los datos: Base de datos alojada en Profesional Hosting (UE)
Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

Dime dónde te envío

tus regalos

Responsable de los datos: Gonzalo de la Campa Marinas
Finalidad de los datos: Enviarte información.
Almacenamiento de los datos: Base de datos alojada en Profesional Hosting (UE)
Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

218813

¿Te vas sin tu regalo?

Mis secretos para crear una web de exito

+ trucos y recursos gratis para Divi

Responsable de los datos: Gonzalo de la Campa Marinas
Finalidad de los datos: Enviarte información.
Almacenamiento de los datos: Base de datos alojada en Profesional Hosting (UE)
Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

Dime dónde te envío

el enlace al webinar

Responsable de los datos: Gonzalo de la Campa Marinas
Finalidad de los datos: Enviarte información.
Almacenamiento de los datos: Base de datos alojada en Mailchimp.
Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

Abrir chat
1
1. ¿Quieres apuntarte a algún curso? Soy Gonzalo, cuéntame y te ayudo encantado.

2. Si eres ya alumno y tienes dudas de soporte debes escribirme a soporte@cursowordpress-online.com

3. Si no eres alumno y necesitas soporte no podré responderte salvo que contrates soporte en la web o te apuntes a alguno de mis 9 cursos con soporte.