![\"\"](\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/08\/bg-image-8.jpg\")
<\/a><\/p>\n\n
Un poco sobre webinars<\/h3>\n<\/h4>\n\u00bfPero por qu\u00e9 hacer un seminario web? \u00bfPor qu\u00e9 elegir este tipo de conferencia\/seminario?<\/h4>\n
\u00bfPero por qu\u00e9 hacer un seminario web? \u00bfPor qu\u00e9 elegir este tipo de conferencia\/seminario?<\/h4>\n
En primer lugar, vamos a descubrir algunos de sus beneficios.<\/p>\n
Los webinars son cada vez m\u00e1s populares hoy en d\u00eda, ya que tienen muchas ventajas.<\/p>\n
Las principales de ellas son:<\/p>\n
- \n
- Los webinars son perennes. Una vez que un seminario se publica, los visitantes pueden verlo m\u00e1s tarde o descargar la transcripci\u00f3n si lo quieren.<\/li>\n
- Es una gran manera de mostrar tu experiencia, compartir algunos conocimientos \u00fatiles (ayudando a la gente a resolver su problema) y al mismo tiempo atraer leads de alta calidad.<\/li>\n
- Es una forma rentable de promover tus productos.<\/li>\n
- No requiere una red extensa; no hay necesidad de viajar a alg\u00fan lugar o incluso salir de casa para hacer un seminario web.<\/li>\n
- Puedes aumentar la conciencia de tu marca y comprometer a los visitantes mediante la participaci\u00f3n de ellos en la conversaci\u00f3n y darles la oportunidad de hacer preguntas.<\/li>\n
- M\u00e1s del 60% de los vendedores utiliza webinars como una parte esencial de su estrategia de marketing de contenido. (Fuente: Content Marketing Institute<\/a>)<\/li>\n
- Entre las principales t\u00e1cticas disponibles, los webinars son el segundo tipo m\u00e1s eficaz del contenido premium para los vendedores. (Fuente: Ascend 2<\/a>)<\/li>\n<\/ul>\n
As\u00ed que, si tienes algo que decir, si tienes que promover tu negocio, si te gusta ayudar a la gente o si s\u00f3lo te gusta hablar en p\u00fablico - un seminario web es definitivamente tu elecci\u00f3n.<\/p>\n
Pero, \u00bfc\u00f3mo hacer que la gente mire tu seminario web? \u00bfC\u00f3mo hacerles saber que vas a compartir tus conocimientos?
\n![\"\"](\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/08\/webinar2-1.jpg\")
<\/a><\/p>\n<\/h4>\n
Si no quieres ser la \u00fanica persona que asiste a este evento, necesitas crear un anuncio. \u00a1No te olvides de que si promueves tu webinar bien - este seminario promover\u00e1 t\u00fa y tus ideas!<\/h4>\n
<\/h4>\n
Incluso si tienes un presupuesto peque\u00f1o, hay algunas maneras eficientes de promocionar tu webinar:<\/h4>\n
- \n
- Enviar correos electr\u00f3nicos a los visitantes potenciales.<\/li>\n
- Grabar una invitaci\u00f3n de v\u00eddeo.<\/li>\n
- Utilizar Facebook Ads Manager como una de las formas m\u00e1s eficaces de promoci\u00f3n.<\/li>\n
- Crear\u00a0una p\u00e1gina de aterrizaje que describa tu seminario web y compartir su v\u00ednculo con todos a trav\u00e9s de las redes sociales o del canal de correo electr\u00f3nico.<\/li>\n<\/ol>\n
El \u00faltimo punto suena genial, \u00bfno? \u00bfEs dif\u00edcil hacerlo? \u00bfQu\u00e9 problemas pueden ocurrir al crear\/personalizar una p\u00e1gina de aterrizaje?<\/p>\n
\nSupongamos que hemos descargado una plantilla de sitio web, pero no sabemos c\u00f3mo personalizarla. Este tema<\/a> puede servir como un gran ejemplo. Despu\u00e9s de su instalaci\u00f3n, estamos listos para personalizarlo.<\/p>\n
\n\u00bfQu\u00e9 es exactamente lo que vamos a cambiar?<\/h4>\n
En cuanto al contenido: cambiaremos todos los textos (men\u00fas, cabeceras, p\u00e1rrafos, textos de botones, blurbs) e im\u00e1genes (favicon, logo, im\u00e1genes de fondo e iconos). En cuanto a los estilos, editaremos el color primario que se utiliza para los botones, los v\u00ednculos y los colores del fondo.<\/p>\n
\n\u00bfQu\u00e9 necesitamos para hacerlo?<\/h4>\n
- \n
- Editor HTML\/CSS o cualquier herramienta IDE con la que est\u00e9s familiarizado (comenzando por Notepad++ y terminando por IDEs m\u00e1s populares como Sublime y JetBrains WebStorm\/PhpStorm).<\/li>\n
- El contenido en s\u00ed - textos, im\u00e1genes, logo y favicon.<\/li>\n
- Un deseo de crear una p\u00e1gina de aterrizaje inolvidable.<\/li>\n<\/ol>\n
\n\u00bfCuanto tiempo se toma?<\/h4>\n
Puede ser que no creas esto, pero si ya has preparado todo el contenido necesario, hacer todo el resto te tomar\u00e1 menos de una hora.<\/p>\n
Vamos a dividir nuestra plantilla en secciones - de esta manera podemos ver qu\u00e9 secciones podemos omitir* y decidir c\u00f3mo personalizar las que quedan.<\/p>\n
![\"\"](\"https:\/\/monsterspost.com\/longreads\/wp-content\/uploads\/2017\/07\/demo1_20170719_182013.jpg?x47994\")
<\/h4>\n*Por supuesto, puedes personalizar todas las secciones si tienes suficiente contenido.<\/h4>\n
\nPersonalizaci\u00f3n de plantilla<\/h3>\n
Ahora necesitamos abrir el archivo index.html<\/strong> en la carpeta \/ site<\/strong> \/ y editarlo secci\u00f3n por secci\u00f3n - todos los cambios relacionados con el contenido se har\u00e1n aqu\u00ed.<\/p>\n
Todo lo relacionado con los estilos vamos a cambiar en el archivo style.css<\/strong>, as\u00ed que tendr\u00e1s que abrirlo tambi\u00e9n.<\/p>\n
<\/h4>\n
Secc\u00ed\u00f3n 1<\/h4>\n
- \n
- Favicon<\/strong>.
\nPara reemplazarlo, simplemente copia tu nuevo archivo favicon.ico y p\u00e9galo en la carpeta \/ images<\/strong> \/ reemplazando lo existente. Si este archivo tiene otro nombre o extensi\u00f3n, tambi\u00e9n tendr\u00e1s que cambiar su nombre en el c\u00f3digo.<\/p>\nEn la siguiente captura de pantalla, los elementos de contenido que deben ser editados est\u00e1n resaltados:<\/div>\n![\"\"](\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/08\/section1-structure900.jpg\")
<\/a><\/p>\n<\/li>\n- Cambio del logo<\/strong>.
\nVamos a encontrar lo siguiente en el c\u00f3digo.<\/p>\n\n<div class=\"rd-navbar-panel\">\r\n <button data-rd-navbar-toggle=\".rd-navbar-nav-wrap\" class=\"rd-navbar-toggle\"><span><\/span><\/button>\r\n <div class=\"rd-navbar-brand\"><a href=\"index.html\" class=\"brand-name\"><img src=\"images\/logo-default-185x41.png<\/span>\" alt=\"\" width=\"185\" height=\"41\"\/><\/a><\/div>\r\n<\/div>\r\n<\/pre>\n<\/div>\nAhora tenemos que copiar y pegar el nuevo logotipo en la carpeta \/ images<\/strong> \/ y reemplazar el nombre del archivo en la l\u00ednea del c\u00f3digo mencionada anteriormente. Ten en cuenta que tambi\u00e9n tendr\u00e1s que editar el ancho y la altura de tu nuevo logotipo.\n <\/li>\n
- Edici\u00f3n del men\u00fa<\/strong>.
\nComo no necesitamos algunos elementos del men\u00fa en nuestra p\u00e1gina de aterrizaje, tales como \"Servicios\" y \"Tienda\", podemos eliminarlos de la estructura de la p\u00e1gina. Encuentra ellos en el c\u00f3digo y elimina todos los elementos innecesarios de la lista del men\u00fa:<\/p>\n\n<li><a href=\"about.html\">About<\/a>\r\n <ul class=\"rd-navbar-dropdown\">\r\n <li><a href=\"team.html\">Our team<\/a>\r\n <\/li>\r\n <li><a href=\"testimonials.html\">Testimonials<\/a>\r\n <\/li>\r\n <li><a href=\"faq.html\">FAQ<\/a>\r\n <\/li>\r\n <\/ul>\r\n<\/li>\r\n<li><a href=\"services.html\">Services<\/a>\r\n<\/li><\/span>\r\n<li><a href=\"blog.html\">Blog<\/a>\r\n <ul class=\"rd-navbar-dropdown\">\r\n <li><a href=\"single-post.html\">Single post<\/a>\r\n <\/li>\r\n <\/ul>\r\n<\/li>\r\n<li><a href=\"shop.html\">Shop<\/a>\r\n <ul class=\"rd-navbar-dropdown\">\r\n <li><a href=\"single-product.html\">Single product<\/a>\r\n <\/li>\r\n <li><a href=\"cart.html\">Cart<\/a>\r\n <\/li>\r\n <li><a href=\"checkout.html\">Checkout<\/a>\r\n <\/li>\r\n <\/ul>\r\n<\/li><\/span>\r\n<li><a href=\"#\">Contacts<\/a>\r\n <ul class=\"rd-navbar-dropdown\">\r\n <li><a href=\"contacts-1.html\">Contacts 1<\/a>\r\n <\/li>\r\n <li><a href=\"contacts-2.html\">Contacts 2<\/a>\r\n <\/li>\r\n <\/ul>\r\n<\/li>\r\n<\/pre>\n<\/div>\n<\/li>\n- Imagen del fondo<\/strong>.
\nCopia y pega una nueva imagen de fondo en la carpeta \/ images<\/strong> \/ (como lo hiciste con el logo) y cambia el nombre del t\u00edtulo de la imagen seleccionada.
\nNo es dif\u00edcil encontrar la primera secci\u00f3n por su t\u00edtulo (etiqueta h1).<\/p>\n\n<section style=\"background-image: url(images\/bg-image-4.jpg<\/span>);\" class=\"jumbotron-custom jumbotron-custom-2 bg-gray-base bg-image\">\r\n <div class=\"jumbotron-custom-content\">\r\n <div class=\"shell\">\r\n <div class=\"range\">\r\n <div class=\"cell-sm-10 cell-md-9 cell-lg-7\">\r\n <h1>Elite Coffee Brands<\/h1><\/span>\r\n <p class=\"large\">Coffee Shop is the place where you can get flavorful coffee strains from global elite brands and roasters at very affordable price.<\/p>\r\n <a href=\"about.html\" class=\"btn btn-style-1 btn-primary\">read more<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n<\/pre>\n<\/div>\nAdem\u00e1s, aqu\u00ed tambi\u00e9n puedes cambiar el t\u00edtulo h1<\/strong>, el p\u00e1rrafo<\/strong> que lo sigue y el texto del bot\u00f3n<\/strong>.<\/p>\n
\n<section style=\"background-image: url(images\/bg-image-4.jpg);\" class=\"jumbotron-custom jumbotron-custom-2 bg-gray-base bg-image\">\r\n <div class=\"jumbotron-custom-content\">\r\n <div class=\"shell\">\r\n <div class=\"range\">\r\n <div class=\"cell-sm-10 cell-md-9 cell-lg-7\">\r\n <h1>Elite Coffee Brands<\/h1>\r\n <p class=\"large\">Coffee Shop is the place where you can get flavorful coffee strains from global elite brands and roasters at very affordable price.<\/p>\r\n <a href=\"about.html\" class=\"btn btn-style-1 btn-primary\">read more<\/a><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n<\/pre>\n<\/div>\n<\/li>\n- Ahora vamos a cambiar el color que se utiliza para los botones, enlaces, iconos y etiquetas de formulario - el color primario.
\nAbre la carpeta \/ css<\/strong> \/ y a continuaci\u00f3n abre el archivo 'style.css<\/strong>' para editarlo. Busca la clase '.text-primary<\/strong>' y copia el color hex que se asigna a ella. Utilizando la funci\u00f3n de sustituci\u00f3n autom\u00e1tica de texto de tu editor, sustit\u00fayelo por el color hex que has elegido como primario para tu p\u00e1gina de aterrizaje. Cuando se reemplacen las 129 ocurrencias, cambia el color de hover (el segundo resaltado en la captura de pantalla) - debe diferir ligeramente del color primario (m\u00e1s oscuro o m\u00e1s claro).<\/p>\n\n.text-capitalize {\r\n text-transform: capitalize;\r\n}\r\n.text-muted {\r\n color: #999;\r\n}\r\n.text-primary {\r\n color: #ce6d06<\/span>;\r\n}\r\na.text-primary:hover,\r\na.text-primary:focus {\r\n color: #9c5305<\/span>;\r\n}<\/pre>\n<\/div>\n<\/li>\n<\/ol>\nDespu\u00e9s de realizar estos cambios, podemos examinar el resultado de personalizaci\u00f3n de la primera secci\u00f3n:
\n![\"\"](\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/08\/section1-changes900.jpg\")
<\/a><\/p>\nSecci\u00f3n 2<\/h4>\n
Estos son los elementos que vamos a cambiar:
\n![\"\"](\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/08\/section2-structure900.jpg\")
<\/a>
\nY estamos listos para comenzar a editarlos.<\/p>\n- \n
- Textos<\/strong>.
\nEncuentra la siguiente secci\u00f3n en el c\u00f3digo por su t\u00edtulo y reemplaza los textos resaltados en la captura de pantalla por los nuevos (de la misma manera que en la secci\u00f3n anterior).<\/p>\n\n<section class=\"section-xl bg-periglacial-blue text-center text-md-left\">\r\n <div class=\"shell-fluid shell-condensed\">\r\n <div class=\"range range-md-reverse range-xs-middle range-md-right range-50\">\r\n <div class=\"cell-md-5 cell-lg-4\">\r\n <div class=\"inset-1\">\r\n <h2>WHO WE ARE<\/span><\/h2>\r\n <div class=\"p text-width-smallest\">\r\n <p class=\"big\">We are a team of dedicated coffee fans who celebrate exceptional coffee brands and roasters by providing our guests the unique opportunity to try coffee drinks of the highest quality.<\/span><\/p>\r\n <\/div>\r\n <a href=\"about.html\" class=\"btn btn-sm btn-style-1 btn-primary\">learn more<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"cell-md-7 cell-lg-6\">\r\n <div class=\"row row-gutter-custom range-15\">\r\n <div class=\"col-xs-4\">\r\n <figure class=\"figure-fullwidth\"><img src=\"images\/about-1-300x460.jpg\" alt=\"\" width=\"300\" height=\"460\"\/><\/figure>\r\n <\/div>\r\n <div class=\"col-xs-4\">\r\n <figure class=\"figure-fullwidth\"><img src=\"images\/about-2-300x460.jpg\" alt=\"\" width=\"300\" height=\"460\"\/><\/figure>\r\n <\/div>\r\n <div class=\"col-xs-4\">\r\n <figure class=\"figure-fullwidth\"><img src=\"images\/about-3-300x460.jpg\" alt=\"\" width=\"300\" height=\"460\"\/><\/figure>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n<\/pre>\n<\/div>\n<\/li>\n- Im\u00e1genes<\/strong>.
\nVamos a ver c\u00f3mo podemos hacer dos de ellos en lugar de tres. Selecciona un elemento <div> con la clase .col-xs-4<\/strong> y elim\u00ednalo. Los bloques anteriores que contienen im\u00e1genes ahora deben tener la clase .col-xs-6<\/strong> (ya que quedan dos de ellos).<\/p>\n\n<div class=\"cell-md-7 cell-lg-6\">\r\n <div class=\"row row-gutter-custom range-15\">\r\n <div class=\"col-xs-4\">\r\n <figure class=\"figure-fullwidth\"><img src=\"images\/about-1-300x460.jpg\" alt=\"\" width=\"300\" height=\"460\"\/><\/figure>\r\n <\/div>\r\n <div class=\"col-xs-4\">\r\n <figure class=\"figure-fullwidth\"><img src=\"images\/about-2-300x460.jpg\" alt=\"\" width=\"300\" height=\"460\"\/><\/figure>\r\n <\/div>\r\n <div class=\"col-xs-4\">\r\n <figure class=\"figure-fullwidth\"><img src=\"images\/about-3-300x460.jpg\" alt=\"\" width=\"300\" height=\"460\"\/><\/figure>\r\n <\/div><\/span>\r\n <\/div>\r\n<\/div>\r\n<\/pre>\n<\/div>\nA continuaci\u00f3n, sustituimos las im\u00e1genes. Utilizaremos los retratos de los participantes de nuestro seminario web: Ashley Faulkes y Jeff Bell. Cambia los nombres de los archivos de im\u00e1genes utilizados en el c\u00f3digo y no te olvides de copiar y pegar los nuevos archivos en la carpeta \/ images<\/strong> \/.<\/p>\n
\n<div class=\"cell-md-7 cell-lg-6\">\r\n <div class=\"row row-gutter-custom range-15\">\r\n <div class=\"col-xs-6\">\r\n <figure class=\"figure-fullwidth\"><img src=\"images\/about-1-300x460.jpg<\/span>\" alt=\"\" width=\"300\" height=\"460\"\/><\/figure>\r\n <\/div>\r\n <div class=\"col-xs-6\">\r\n <figure class=\"figure-fullwidth\"><img src=\"images\/about-2-300x460.jpg<\/span>\" alt=\"\" width=\"300\" height=\"460\"\/><\/figure>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n<\/pre>\n<\/div>\n<\/li>\n- El color del fondo<\/strong>.
\nTambi\u00e9n se puede reemplazarlo por un tinte ligeramente m\u00e1s claro. La clase que determina este color es:<\/p>\n\n<section class=\"section-xl bg-periglacial-blue<\/span> text-center text-md-left\">\r\n<\/pre>\n<\/div>\nDebemos encontrarla en el archivo 'style.css<\/strong>', copiar el color hex asignado a ella, y nuevamente, utilizando el reemplazo autom\u00e1tico, sustituir 4 ocurrencias con el nuevo color.<\/p>\n
Y as\u00ed es como se ve esta secci\u00f3n despu\u00e9s de haber aplicado los cambios.
\n![\"\"](\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/08\/section2-changes900.jpg\")
<\/a>\n <\/li>\n<\/ol>\nSecci\u00f3n 3<\/h4>\n
Vamos a cambiar el nombre de esta secci\u00f3n a \"You'll learn\" y ofrecer aqu\u00ed\u00a0 la informaci\u00f3n detallada sobre los conocimientos que se pueden obtener a trav\u00e9s del seminario web.
\nLos elementos que vamos a cambiar est\u00e1n resaltados en la siguiente captura de pantalla.
\n![\"\"](\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/08\/section3-structure900.jpg\")
<\/a><\/p>\n- \n
- Textos<\/strong>.
\nLa forma de edici\u00f3n es la misma - encontrar la secci\u00f3n necesaria en el c\u00f3digo y editarla. Los textos que vamos a reemplazar en esta secci\u00f3n se resaltan en el siguiente cuadro de c\u00f3digo:<\/p>\n\n<section class=\"bg-gray-dark\">\r\n <div class=\"shell-fluid shell-condensed\">\r\n <div class=\"range range-condensed\">\r\n <div class=\"cell-md-6 cell-md-6-mod-1 image-wrap-left bg-gray-dark\">\r\n <div class=\"image-wrap-inner\">\r\n <h2>OUR<br>SERVICES<\/span><\/h2>\r\n <p class=\"big\">We provide a variety of services both to our new and regular customers. If you can think of anything connected with coffee, then we can offer it at our Coffee Shop.<\/span><\/p>\r\n <a href=\"services.html\" class=\"btn btn-style-1 btn-primary\">read more<\/a>\r\n <\/div>\r\n <\/div>\r\n <div style=\"background-image: url(images\/home-three-3-1011x800.jpg)\" class=\"cell-md-6 cell-md-6-mod-2 image-wrap-right bg-gray-dark bg-image\">\r\n <div class=\"image-wrap-inner\">\r\n <div class=\"range range-condensed range-inner-bordered\">\r\n <div class=\"cell-xs-6\">\r\n <article class=\"box-icon\">\r\n <figure class=\"box-icon-image\"><img src=\"images\/icon-service-3-84x84.png\" alt=\"\" width=\"84\" height=\"84\"\/><\/figure>\r\n <p class=\"box-icon-header\"><a href=\"services.html\">SELECTED coffee beans<\/span><\/a><\/p>\r\n <p class=\"box-icon-text\">Enjoy the aroma of selected coffee beans available at our shop.<\/span><\/p>\r\n <\/article>\r\n <\/div>\r\n <div class=\"cell-xs-6\">\r\n <article class=\"box-icon\">\r\n <figure class=\"box-icon-image\"><img src=\"images\/icon-service-4-84x84.png\" alt=\"\" width=\"84\" height=\"84\"\/><\/figure>\r\n <p class=\"box-icon-header\"><a href=\"services.html\">elite coffee<\/span><\/a><\/p>\r\n <p class=\"box-icon-text\">Take a sip of Elite Coffee, and revel in the different tastes.<\/span><\/p>\r\n <\/article>\r\n <\/div>\r\n <div class=\"cell-xs-6\">\r\n <article class=\"box-icon\">\r\n <figure class=\"box-icon-image\"><img src=\"images\/icon-service-1-84x84.png\" alt=\"\" width=\"84\" height=\"84\"\/><\/figure>\r\n <p class=\"box-icon-header\"><a href=\"services.html\">Tasty coffee<\/span><\/a><\/p>\r\n <p class=\"box-icon-text\">At Coffee Shop you can find lots of tasty coffee flavors.<\/span><\/p>\r\n <\/article>\r\n <\/div>\r\n <div class=\"cell-xs-6\">\r\n <article class=\"box-icon\">\r\n <figure class=\"box-icon-image\"><img src=\"images\/icon-service-2-84x84.png\" alt=\"\" width=\"84\" height=\"84\"\/><\/figure>\r\n <p class=\"box-icon-header\"><a href=\"services.html\">cooking coffee<\/span><\/a><\/p>\r\n <p class=\"box-icon-text\">If you prefer to cook coffee, we have something special for you.<\/span><\/p>\r\n <\/article>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n<\/pre>\n<\/div>\n<\/li>\n- Iconos\/im\u00e1genes blurb<\/strong>.
\nPara cambiar la imagen, simplemente copia y pega una nueva en la carpeta \/ images<\/strong> \/ y cambia su nombre de archivo en el c\u00f3digo.<\/p>\n\n<div class=\"cell-xs-6\">\r\n <article class=\"box-icon\">\r\n <figure class=\"box-icon-image\"><img src=\"images\/icon-service-3-84x84.png<\/span>\" alt=\"\" width=\"84\" height=\"84\"\/><\/figure>\r\n <p class=\"box-icon-header\"><a href=\"services.html\">SELECTED coffee beans<\/a><\/p>\r\n <p class=\"box-icon-text\">Enjoy the aroma of selected coffee beans available at our shop.<\/p>\r\n <\/article>\r\n<\/div>\r\n<\/pre>\n<\/div>\nSi lo prefieres, puedes utilizar no s\u00f3lo im\u00e1genes, sino tambi\u00e9n fuentes de iconos. En este caso, debes implementarlas correctamente, utilizando las etiquetas <i<\/strong>> o <span<\/strong>> en lugar de la etiqueta <img<\/strong>> y a\u00f1adiendo los estilos requeridos al archivo style.css<\/strong>.\n <\/li>\n
- Imagen del fondo<\/strong>.
\nLa imagen del fondo se edita como todas las im\u00e1genes anteriores: copiando y pegando una nueva imagen en la carpeta \/ images<\/strong> \/ y cambiando su nombre.<\/p>\n\n<div style=\"background-image: url(images\/home-three-3-1011x800.jpg<\/span>)\" class=\"cell-md-6 cell-md-6-mod-2 image-wrap-right bg-gray-dark bg-image\">\r\n <div class=\"image-wrap-inner\">...<\/div>\r\n<\/div>\r\n<\/pre>\n<\/div>\n<\/li>\n- Color del fondo<\/strong>.
\nEn el c\u00f3digo vamos a encontrar la clase que establece el color del fondo de esta secci\u00f3n:<\/p>\n\n<section class=\"bg-gray-dark<\/span>\">\r\n <div class=\"shell-fluid shell-condensed\">\r\n <div class=\"range range-condensed\">\r\n <div class=\"cell-md-6 cell-md-6-mod-1 image-wrap-left bg-gray-dark\">...<\/div>>\r\n <div style=\"background-image: url(images\/home-three-3-1011x800.jpg)\" class=\"cell-md-6 cell-md-6-mod-2 image-wrap-right bg-gray-dark bg-image\">...<\/div>>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n<\/pre>\n<\/div>\nEn el archivo 'style.css<\/strong>' buscamos la clase '.bg-gray-dark<\/strong>' y cambiamos el hex de su propiedad de color de fondo a la que se ajuste a nuestro estilo.<\/li>\n<\/ol>\n
Y aqu\u00ed est\u00e1 el resultado de la personalizaci\u00f3n de la tercera secci\u00f3n:
\n![\"\"](\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/08\/section3-changes900.jpg\")
<\/a><\/p>\nSecci\u00f3n 4<\/h4>\n
Los elementos a cambiar son:
\n![\"\"](\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/08\/section4-structure900.jpg\")
<\/a><\/p>\n- \n
- T\u00edtulo<\/strong> y descripci\u00f3n<\/strong> de la secci\u00f3n.
\nEl proceso es el mismo: se reemplaza el texto resaltado.<\/p>\n\n<section class=\"section-lg bg-periglacial-blue text-center\">\r\n <div class=\"shell\">\r\n <div class=\"range range-sm-center range-75\">\r\n <div class=\"cell-xs-12\">\r\n <h2>latest blog posts<\/span><\/h2>\r\n <div class=\"p text-width-medium\">\r\n <p class=\"big\">Coffee Shop is not only a place where you can get a hot and tasty coffee. Our team members also write interesting articles on everything concerning coffee.<\/span><\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"cell-xs-12\">...<\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n<\/pre>\n<\/div>\n<\/li>\n- Contenido de entrada<\/strong>.
\nY as\u00ed es como se puede editar cada entrada - la imagen de la entrada debe ser cambiada (as\u00ed como el archivo copiado a la carpeta \/ images<\/strong> \/). Su t\u00edtulo, descripci\u00f3n, texto de bot\u00f3n, meta descripci\u00f3n, n\u00famero de gustos y vistas y fecha de publicaci\u00f3n tambi\u00e9n se reemplazan.<\/p>\n\n<div class=\"item\">\r\n <div class=\"slick-slide-inner\">\r\n <article class=\"post-classic\"><img src=\"images\/blog-2-770x330.jpg<\/span>\" alt=\"\" width=\"770\" height=\"330\" class=\"post-classic-image\"\/>\r\n <div class=\"post-classic-body\">\r\n <p class=\"post-classic-title\"><a href=\"single-post.html\">Advantages and Disadvantages of Coffee<\/span><\/a><\/p>\r\n <div class=\"post-classic-text\">\r\n <p>It seems that one minute drinking coffee is bad for you, the next minute coffee is good for you. Still now with all the evidence coming to light that it\u2019s good for your health, it doesn\u2019t take...<\/span><\/p>\r\n <\/div>\r\n <div class=\"post-classic-footer\">\r\n <div class=\"post-classic-footer-left\"><a href=\"single-post.html\" class=\"btn btn-xs btn-primary btn-circle\">READ MORE<\/span><\/a><\/div>\r\n <div class=\"post-classic-footer-right\">\r\n <ul class=\"post-classic-meta\">\r\n <li><span class=\"icon icon-xxs icon-primary fa fa-heart\"><\/span><span>24<\/span><\/span><\/li>\r\n <li><span class=\"icon icon-xxs icon-primary fa fa-eye\"><\/span><span>132<\/span><\/span><\/li>\r\n <li><span class=\"icon icon-xxs icon-primary fa fa-calendar-plus-o\"><\/span>\r\n <time datetime=\"2016-08-26<\/span>\">26.08.2016<\/span><\/time>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/article>\r\n <\/div>\r\n<\/div>\r\n<\/pre>\n<\/div>\nTen en cuenta que para que las entradas aparezcan correctamente (como en la plantilla original), debe haber al menos cuatro de ellas en la estructura HTML. Para agregar m\u00e1s entradas, simplemente duplica el elemento con la clase '.item'<\/strong> y modif\u00edcalo de acuerdo a tus necesidades<\/li>\n<\/ol>\n
La secci\u00f3n modificada se ve as\u00ed:
\n![\"\"](\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/08\/section4-changes900.jpg\")
<\/a><\/p>\nSecci\u00f3n 5<\/h4>\n
En esta secci\u00f3n vamos a cambiar el contenido del formulario, eliminar los bloques \"Address\" (Direcci\u00f3n) y \"Opening Hours\" (Horario de apertura), ya que no los necesitamos y cambiar algunas propiedades del mapa.
\n![\"\"](\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/08\/section5-structure900.jpg\")
<\/a><\/p>\n- \n
- Eliminaci\u00f3n de bloques.
\nSimplemente eliminamos ellos de la estructura:<\/p>\n\n<section class=\"box-wrap box-wrap-md bg-white\">\r\n <div class=\"box-wrap-map\">\r\n <div data-zoom=\"14\" data-styles=\"[{"featureType":"administrative","elementType":"all","stylers":[{"saturation":"-100"}]},{"featureType":"administrative.province","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"all","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","elementType":"all","stylers":[{"saturation":-100},{"lightness":"50"},{"visibility":"simplified"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":"-100"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"all","stylers":[{"lightness":"30"}]},{"featureType":"road.local","elementType":"all","stylers":[{"lightness":"40"}]},{"featureType":"transit","elementType":"all","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]},{"featureType":"water","elementType":"labels","stylers":[{"lightness":-25},{"saturation":-100}]}]\" class=\"rd-google-map rd-google-map__model\">\r\n <ul class=\"map_locations\"><\/ul>\r\n <\/div>\r\n <\/div>\r\n <div class=\"box-wrap-content\">\r\n <div class=\"shell\">\r\n <div class=\"range\">\r\n <div class=\"cell-xs-12\">\r\n <div class=\"box-contacts box-contacts-horizontal box-wrap-content-interactive block-right\">\r\n <div class=\"box-contacts-col\">\r\n <div class=\"box-contacts-block\">\r\n <h3>Address<\/h3>\r\n <address>123 Street W, Seattle WA 99999 United States<\/address>\r\n <\/div>\r\n <div class=\"divider divider-nebula\"><\/div>\r\n <div class=\"box-contacts-block\">\r\n <h3>Opening Hours<\/h3>\r\n <dl class=\"box-contacts-terms-list\">\r\n <dt>Monday \u2013 Friday<\/dt>\r\n <dd>9am - 6pm<\/dd>\r\n <dt>Saturday and Sunday<\/dt>\r\n <dd>10am - 4pm<\/dd>\r\n <\/dl>\r\n <\/div>\r\n <\/div><\/span>\r\n <div class=\"box-contacts-col box-contacts-right\">\r\n <div class=\"box-contacts-block\">\r\n <h3>Get In Touch<\/h3>\r\n <p>Leave your name and phone number, and we\u2019ll contact you.<\/p>\r\n <form data-form-output=\"form-output-global\" data-form-type=\"contact\" method=\"post\" action=\"bat\/rd-mailform.php\" class=\"rd-mailform\">\r\n <div class=\"form-group\">\r\n <label for=\"contact-full-name\" class=\"form-label-outside\">Full Name<\/label>\r\n <input id=\"contact-full-name\" type=\"text\" name=\"name\" data-constraints=\"@Required\" class=\"form-control\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"contact-phone\" class=\"form-label-outside\">Telephone<\/label>\r\n <input id=\"contact-phone\" type=\"text\" name=\"phone\" data-constraints=\"@Required @Numeric\" class=\"form-control\">\r\n <\/div>\r\n <button type=\"submit\" class=\"btn btn-sm btn-primary btn-block btn-circle\">SEND REQUEST<\/button>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n<\/pre>\n<\/div>\nAhora tenemos que hacer este bloque m\u00e1s estrecho. Busca la clase .box-contacts<\/strong> y cambia su par\u00e1metro 'max-width<\/strong>' de 770px a 400px, por ejemplo.<\/p>\n
\n.box-contacts {\r\n max-width: 770px<\/span>;\r\n}\r\n.box-contacts-horizontal {\r\n display: -ms-flexbox;\r\n display: -webkit-flex;\r\n display: flex;\r\n -webkit-flex-direction: row;\r\n -ms-flex-direction: row;\r\n flex-direction: row;\r\n}<\/pre>\n<\/div>\nEl bloque de contacto tiene el ancho adecuado ahora.\n <\/li>\n
- Textos.<\/strong>
\nLos textos que posiblemente desees sustituir se representan en el siguiente cuadro de c\u00f3digo.<\/p>\n\n<div class=\"box-contacts-col box-contacts-right\">\r\n <div class=\"box-contacts-block\">\r\n <h3>Get In Touch<\/span><\/h3>\r\n <p>Leave your name and phone number, and we\u2019ll contact you.<\/span><\/p>\r\n <form data-form-output=\"form-output-global\" data-form-type=\"contact\" method=\"post\" action=\"bat\/rd-mailform.php\" class=\"rd-mailform\">\r\n <div class=\"form-group\">\r\n <label for=\"contact-full-name\" class=\"form-label-outside\">Full Name<\/span><\/label>\r\n <input id=\"contact-full-name\" type=\"text\" name=\"name\" data-constraints=\"@Required\" class=\"form-control\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"contact-phone\" class=\"form-label-outside\">Telephone<\/span><\/label>\r\n <input id=\"contact-phone\" type=\"text\" name=\"phone\" data-constraints=\"@Required @Numeric\" class=\"form-control\">\r\n <\/div>\r\n <button type=\"submit\" class=\"btn btn-sm btn-primary btn-block btn-circle\">SEND REQUEST<\/span><\/button>\r\n <\/form>\r\n <\/div>\r\n<\/div>\r\n<\/pre>\n<\/div>\n<\/li>\n- Mapa<\/strong>.
\nPor lo general, los webinars no requieren la informaci\u00f3n de ubicaci\u00f3n ya que se realizan en l\u00ednea. Pero a\u00fan as\u00ed, si deseas indicar alg\u00fan lugar donde la gente puede obtener algunos de tus productos o servicios adicionales - puede ser que tengas que personalizar el mapa.<\/p>\n\n<div style=\"background-image: url(images\/home-three-3-1011x800.jpg<\/span>)\" class=\"cell-md-6 cell-md-6-mod-2 image-wrap-right bg-gray-dark bg-image\">\r\n <div class=\"image-wrap-inner\">...<\/div>\r\n<\/div>\r\n<\/pre>\n<\/div>\n- \n
- Coordenadas del mapa.
\nPara personalizar el mapa, lo primero que necesitas hacer es encontrar las coordenadas del lugar objetivo. A continuaci\u00f3n a\u00f1adimos ellas al elemento hijo del bloque con la clase .box-wrap-map<\/strong>.<\/p>\n\n<div class=\"box-wrap-map\">\r\n <div data-zoom=\"14\" data-x=\"-73.8924068\" data-y=\"40.646197\"<\/span> data-styles=\"[{"featureType":"administrative","elementType":"all","stylers":[{"saturation":"-100"}]},{"featureType":"administrative.province","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"all","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","elementType":"all","stylers":[{"saturation":-100},{"lightness":"50"},{"visibility":"simplified"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":"-100"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"all","stylers":[{"lightness":"30"}]},{"featureType":"road.local","elementType":"all","stylers":[{"lightness":"40"}]},{"featureType":"transit","elementType":"all","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]},{"featureType":"water","elementType":"labels","stylers":[{"lightness":-25},{"saturation":-100}]}]\" class=\"rd-google-map rd-google-map__model\">\r\n <ul class=\"map_locations\"><\/ul>\r\n <\/div>\r\n<\/div>\r\n<\/pre>\n<\/div>\n<\/li>\n- Zoom.
\nPara acercar o alejar el mapa, cambia su atributo 'data-zoom<\/em>' de 14 a 15 (y m\u00e1s - para ampliar) o a 13 (y menos) para alejarlo.<\/p>\n\n<div class=\"box-wrap-map\">\r\n <div data-zoom=\"14<\/span>\" data-x=\"-73.8924068\" data-y=\"40.646197\" data-styles=\"[{"featureType":"administrative","elementType":"all","stylers":[{"saturation":"-100"}]},{"featureType":"administrative.province","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"all","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","elementType":"all","stylers":[{"saturation":-100},{"lightness":"50"},{"visibility":"simplified"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":"-100"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"all","stylers":[{"lightness":"30"}]},{"featureType":"road.local","elementType":"all","stylers":[{"lightness":"40"}]},{"featureType":"transit","elementType":"all","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]},{"featureType":"water","elementType":"labels","stylers":[{"lightness":-25},{"saturation":-100}]}]\" class=\"rd-google-map rd-google-map__model\">\r\n <ul class=\"map_locations\"><\/ul>\r\n <\/div>\r\n<\/div>\r\n<\/pre>\n<\/div>\n<\/li>\n- Estilos de mapa.
\nPuedes personalizar los estilos de mapas o utilizar los estilos preestablecidos de los mapas de Snazzy, por ejemplo. Simplemente copia el estilo de mapa y p\u00e9galo como un valor del atributo 'data-styles<\/em>' como en el siguiente cuadro del c\u00f3digo. Cambiamos el c\u00f3digo:<\/p>\n\n<div class=\"box-wrap-map\">\r\n <div data-zoom=\"14\" data-x=\"-73.8924068\" data-y=\"40.646197\" data-styles=\"[{"featureType":"administrative","elementType":"all","stylers":[{"saturation":"-100"}]},{"featureType":"administrative.province","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"all","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","elementType":"all","stylers":[{"saturation":-100},{"lightness":"50"},{"visibility":"simplified"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":"-100"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"all","stylers":[{"lightness":"30"}]},{"featureType":"road.local","elementType":"all","stylers":[{"lightness":"40"}]},{"featureType":"transit","elementType":"all","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]},{"featureType":"water","elementType":"labels","stylers":[{"lightness":-25},{"saturation":-100}]}]\" class=\"rd-google-map rd-google-map__model<\/span>\">\r\n <ul class=\"map_locations\"><\/ul>\r\n <\/div>\r\n<\/div>\r\n<\/pre>\n<\/div>\na:<\/p>\n
\n<div class=\"box-wrap-map\">\r\n <div data-zoom=\"12\" data-x=\"-73.8924068\" data-y=\"40.646197\" data-styles='[{\"featureType\":\"all\",\"elementType\":\"labels.text.fill\",\"stylers\":[{\"color\":\"#ffffff\"}]},{\"featureType\":\"all\",\"elementType\":\"labels.text.stroke\",\"stylers\":[{\"visibility\":\"on\"},{\"color\":\"#424b5b\"},{\"weight\":2},{\"gamma\":\"1\"}]},{\"featureType\":\"all\",\"elementType\":\"labels.icon\",\"stylers\":[{\"visibility\":\"off\"}]},{\"featureType\":\"administrative\",\"elementType\":\"geometry\",\"stylers\":[{\"weight\":0.6},{\"color\":\"#545b6b\"},{\"gamma\":\"0\"}]},{\"featureType\":\"landscape\",\"elementType\":\"geometry\",\"stylers\":[{\"color\":\"#545b6b\"},{\"gamma\":\"1\"},{\"weight\":\"10\"}]},{\"featureType\":\"poi\",\"elementType\":\"geometry\",\"stylers\":[{\"color\":\"#666c7b\"}]},{\"featureType\":\"poi.park\",\"elementType\":\"geometry\",\"stylers\":[{\"color\":\"#545b6b\"}]},{\"featureType\":\"road\",\"elementType\":\"geometry\",\"stylers\":[{\"color\":\"#424a5b\"},{\"lightness\":\"0\"}]},{\"featureType\":\"transit\",\"elementType\":\"geometry\",\"stylers\":[{\"color\":\"#666c7b\"}]},{\"featureType\":\"water\",\"elementType\":\"geometry\",\"stylers\":[{\"color\":\"#2e3546\"}]}]' class=\"rd-google-map rd-google-map__model<\/span>\">\r\n <ul class=\"map_locations\"><\/ul>\r\n <\/div>\r\n<\/div>\r\n<\/pre>\n<\/div>\nY, como resultado, otenemos un aspecto de mapa totalmente diferente.\n <\/li>\n
- Ubicaciones.
\nInicialmente, en el mapa no hay marcadores que indican una determinada direcci\u00f3n. Pero puedes a\u00f1adirlos f\u00e1cilmente. Puedes encontrar la lista no ordenada con la clase '.map_locations'. Para agregar una ubicaci\u00f3n, debes colocar el elemento <li<\/strong>> dentro de ella. Este elemento debe contener coordenadas y un p\u00e1rrafo con direcci\u00f3n que aparecer\u00e1 cuando uno hace clic en el marcador de pin. Cada elemento <li<\/strong>> se utiliza para una sola ubicaci\u00f3n en el mapa. Puedes agregar tantas etiquetas <li<\/strong>> cuantas necesites. Aqu\u00ed est\u00e1 un ejemplo de c\u00f3mo agregar una ubicaci\u00f3n:<\/p>\n\n<ul class=\"map_locations\">\r\n <li data-y=\"40.643180\" data-x=\"-73.9874068\">\r\n \t<p>9870 St Vincent Place, Glasgow, DC 45 Fr 45.<\/p>\r\n <\/li><\/span>\r\n<\/ul>\r\n<\/pre>\n<\/div>\nVamos a agregarlo y mostrar c\u00f3mo se ve.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n
Hemos personalizado la secci\u00f3n \"Contactos\" y ahora podemos observar el resultado:
\n![\"\"](\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/08\/section5-changes900.jpg\")
<\/a>
\nTambi\u00e9n puedes cambiar el marcador de pin. Simplemente reemplaza los archivos gmap_marker.png<\/strong> y gmap_marker_active.png<\/strong> en la carpeta \/ images<\/strong> \/ con tus propios.<\/p>\nSecci\u00f3n 6<\/h4>\n
- Zoom.
- Textos.<\/strong>
- Contenido de entrada<\/strong>.
- Iconos\/im\u00e1genes blurb<\/strong>.
- Im\u00e1genes<\/strong>.
- Cambio del logo<\/strong>.
- Favicon<\/strong>.
- Entre las principales t\u00e1cticas disponibles, los webinars son el segundo tipo m\u00e1s eficaz del contenido premium para los vendedores. (Fuente: Ascend 2<\/a>)<\/li>\n<\/ul>\n