Plantillas para Elementor

En este apartado iré liberando diseños que vaya creando para que los puedas usar libremente en tus proyectos.

Diseños 1

Tabla de Precios (sin widget)

Diseño de tabla de precios al estilo Elementor construido de forma nativa (no widget).
Sin limitaciones de contenido y estilos. Se puede editar con total libertad para incorporar lo que queramos.

✋ Contenido sólo para miembros. Suscríbete

Diseños 2

Header Vertical - Sidebar

Plantilla de sidebar para utilizarlo de menú lateral fijo.
Os dejo una demo para que veáis el efecto y también un vídeo explicativo de cómo está hecho y cómo podéis modificarlo a vuestro gusto.

✋ Contenido sólo para miembros. Suscríbete

Diseños 5

Transición Hero Section

Transición nativa de una sección principal a otra haciendo un fundido a color sólido negro y otros motion effects. 
Tenéis que ir la demo para verlo en movimiento.
La transición se puede hacer al color que queráis pero es importante cambiar el fondo de página a ese color.

✋ Contenido sólo para miembros. Suscríbete

Diseños 6

Botón + icono animado que
muestra y ocultan secciones

Dos maneras de ocultar/mostrar una sección de una manera rápida sin necesidad de un addon externo. Son dos plantillas que lleva un widget html ocn javascript embebido.
Demo Botón | Demo Icono

✋ Contenido sólo para miembros. Suscríbete

Diseños 7

Texto transparente sobre
imagen de fondo

Texto transparente sobre una imagen de fondo. 
Con sólo una línea de CSS se puede mezclar, de diferentes formas, la letra con el fondo. En la demo hay dos secciones.

✋ Contenido sólo para miembros. Suscríbete

Diseños 8

Neomorphism

Tranquilos, yo tampoco sabía lo qué significaba.
Se supone que es una tendencia en diseño para 2020, aunque yo creo que sólo encaja en ciertos tipos de diseños.
Básicamente está todo hecho con sombras en CSS. Demo.

✋ Contenido sólo para miembros. Suscríbete

Diseños 9

Hero section con superposición

Sección principal con varios elementos superpuestos.
Adaptada a responsive.

✋ Contenido sólo para miembros. Suscríbete

Diseños 10

Footer menu app (móvil)

Menú tipo app para móviles con acceso a diferentes secciones. El icono del medio está pensado para disparar un popup con el menú de navegación.

✋ Contenido sólo para miembros. Suscríbete

Diseños 13

Efecto nieve dinámico

Efecto de nieve en fondo, creado con CSS para mejor rendimiento. El código necesario está dentro de la sección, en CSS Adicional, con la clase .snow-bg. Puede aplicarse a cualquier sección/columna/widget. Demo aquí

✋ Contenido sólo para miembros. Suscríbete

Diseños 14

Centro de Avisos Legales

Sección creada por Rafa (miembro de la Comunidad) para notificar las distintas páginas legales de una web con la finalidad de cumplir con la RGPD.
Aquí os dejo un vídeo con la explicación de esta sección.

✋ Contenido sólo para miembros. Suscríbete

Diseños 17

Header Sticky Scroll Up

Un header sticky con un comportamiento distinto a los habituales. Se oculta al hacer scroll hacia abajo y aparece cuando hacemos scroll hacia arriba. Demo aquí

✋ Contenido sólo para miembros. Suscríbete

Diseños 18

Botones de compartir post fijos

Botones de compartir en plantilla de post con el widget de “Social Share”. Le he metido animación en hover y rotación, todo por CSS. Ojo con el posicionamiento, tendréis que modificarlo seguramente. Demo aquí

✋ Contenido sólo para miembros. Suscríbete

Diseños 19

Barra de progreso al hacer scroll

Esta plantilla te permite añadir una barra superior a tu página que va avanzando coloreándose a medida que haces scroll. Demo aquí

✋ Contenido sólo para miembros. Suscríbete

Diseños 20

Formulario estilo Google

Se trata de una sección con un formulario al estilo de los que usa Google donde el texto de ayuda (placeholder) sube con una pequeña animación al pinchar en él. Demo aquí.

✋ Contenido sólo para miembros. Suscríbete

Diseños 21

Caja de Bio con responsive

La caja de biografía para autor que ofrece Elementor no tiene responsive cuando escoges la configuración de la imagen alineada a la izquierda. Con esta plantilla queda arreglado.

✋ Contenido sólo para miembros. Suscríbete

Diseños 22

Estilo para categorías de post

Modificamos el estilo del widget básico de Categorías de Posts con CSS ya que Elementor no permite personalización.

✋ Contenido sólo para miembros. Suscríbete

Diseños 23

Estilos de encabezados

3 estilos de encabezados distintos para utilizar en vuestros diseños. El último lleva un poco de CSS personalizado. Podéis ver cómo quedan aquí y el vídeo con la explicación aquí.

✋ Contenido sólo para miembros. Suscríbete

Diseños 24

Divisor de sección animado

Sección con un divisor de sección que se va moviendo, efecto que queda muy chulo. Tenéis la demo con explicación aquí para que lo veais en movimiento.

✋ Contenido sólo para miembros. Suscríbete

Diseños 25

Página de contacto

Página de contacto pensado para una empresa de diseño de interiores, fácilmente reutilizable.

✋ Contenido sólo para miembros. Suscríbete

Diseños 26

Widget FAQ modificado

Widget para preguntas frecuentes creado a través del elemento “Alternar”. Aquí os dejo una demo para que lo podáis ver en directo y os hagáis una idea mejor.

✋ Contenido sólo para miembros. Suscríbete

Diseños 27

Sección Full Width responsive

Sección a ancho completo de imagen + texto. Las imágenes tienen un pequeño margen negativo para salir del encuadre. Preparada con mimo para responsive.

✋ Contenido sólo para miembros. Suscríbete

Diseños 28

Listado sobre mí

Texto a doble columna con borde y encabezado centrado. Perfecto para reflejar listados con textos largos y enumerados.

✋ Contenido sólo para miembros. Suscríbete

Diseños 29

Footer 3 columnas con formulario

Footer con 3 columnas: una con información sobre la web, otra con enlace a las páginas y por último un formulario de contacto simple.

✋ Contenido sólo para miembros. Suscríbete

template testimonio

Caja de testimonio

Caja de testimonio utilizando márgenes negativos para desplazar la foto hacia arriba y CSS personalizado para colocar las comillas de cita en las esquinas.

✋ Contenido sólo para miembros. Suscríbete

Template bordes personalizados elementor

Bordes personalizados para columnas

Utilizamos CSS para conseguir unos bordes personalizados perfectos. Os presento 3 tipos de bordes distintos: imagen transparente, cita/testimonio y línea de color sólido.

✋ Contenido sólo para miembros. Suscríbete

template-scroll-to-top

Scroll to top con efecto de aparición

Botón para volver a arriba que aparece poco a poco al ir haciendo scroll en la página. La animación es configurable. Hay que enlazarlo a un identificador en el header.

✋ Contenido sólo para miembros. Suscríbete

Diseños 30

Banner Call to Action (CTA)

CTA con imagen de fondo y columna con sombreado negro. Perfecto para usarlo como reclamo para descarga o suscripción a newsletter.

✋ Contenido sólo para miembros. Suscríbete

Diseños 31

Cuadro con bordes y texto

Sección estilo “fieldset” hecha 100% con Elementor, sin CSS.
El cuadro está montado con una sección interior que puedes copiar y pegar donde quieras ya que el fondo de todos los elementos es transparente.
Mención a Javi Pereda por el tip de la transparencia 😉

✋ Contenido sólo para miembros. Suscríbete

Login