Soporte » Diseño – Temas y plantillas » como se pueden obtener estos acabados en papiro?

  • Resuelto chupachota

    (@chupachota)


    hola, queria saber como se pueden obtener estos acabados en papiro, del menu y el cuerpo de la pagina, como los que aparecen en esta pagina web: link. No se si con elementor o elementor pro hay alguna forma de activarlo, o bien tiene que ser de forma manual. De forma manual se me ocurre,en elementor, poniendo la imagen del papiro como fondo, tanto del menu como del cuerpo. Pero No conseguire ese acabado irregular sino que aparecera una linea recta donde la foto acabe.
    un saludo.

Viendo 12 respuestas - de la 1 a la 12 (de un total de 12)
  • Moderador Jose Luis

    (@jose64)

    Hola.

    Ese acabado que ves son imágenes añadidas a los márgenes, usa el inspector de elementos y verás tanto la imagen como las reglas que se emplearon:

    #contenidoCentradoCab {
        width: 1270px;
        margin: 0 auto;
        height: 62px;
        background: url(https://www.peperetes.com/views/layouts/tiendaonline/css/../img/sup.png) top center no-repeat;
    }
    #contenidoCentrado {
        width: 1270px;
        margin: 0 auto;
        background: url(https://www.peperetes.com/views/layouts/tiendaonline/css/../img/med.png) top center repeat-y;
    }
    #contenidoPie {
        padding: 90px 0 0 0;
        background: url(https://www.peperetes.com/views/layouts/tiendaonline/css/../img/inf.png) top center no-repeat;
    }

    Recuerda marcar como resueltos los debates que tienes abiertos y están solucionados, así nos ayudas a mantener el foro al día y nos animas a seguir colaborando.

    Hola!.
    En referencia a tu comentario: «De forma manual se me ocurre,en elementor, poniendo la imagen del papiro como fondo, tanto del menu como del cuerpo. Pero No conseguire ese acabado irregular sino que aparecera una linea recta donde la foto acabe.»
    Si te fijas en el codigo que te adjunta Jose Luis, las imagenes tienen un formato «.png», fotos que admiten transparencia. Y por eso puedes ver los bordes irregulares encima de la foto de fondo.
    Prueba a cambiar la cabecera a mano, tal y como comentas. Descarga estas dos fotos y prueba a cambiar la foto de la cabecera, a ver si con eso solucionas. Si no hace lo que esperas, tendras que usar codigo…y ahi ya no puedo ayudarte.

    papiro_transparente.png

    papiro_opaco.jpg

    Un saludo!

    • Esta respuesta fue modificada hace 7 meses, 1 semana por fran.
    • Esta respuesta fue modificada hace 7 meses, 1 semana por fran.
    • Esta respuesta fue modificada hace 7 meses, 1 semana por fran.
    • Esta respuesta fue modificada hace 7 meses, 1 semana por fran.
    Iniciador del debate chupachota

    (@chupachota)

    ok, con la transparecia va perfectamente. Un saludo.

    Iniciador del debate chupachota

    (@chupachota)

    lo que no se es como poner el estilo en la tienda online, ya que lo que es la tienda con woocommerce no me deja editarla con elementor.

    Has probado a editarla desde el personalizador de WordPress?
    Estando en la pagina que quieres personalizar / barra-menu superior «personalizar»
    A la izquierda tienes una seccion para personalizar woocomerce. Dependiendo del tema que estes usando, tendras más o menos opciones.
    Si desde ahi no consigues hacer lo que necesitas….seguramente tengas que tocar el codigo…
    Lo que si te recomiendo, si aun no la has hecho, es que hagas una copia de seguridad del sitio… lo de toquetear el codigo (sin experiencia…y tambien con experiencia) tiene sus riesgos…

    Moderador Jose Luis

    (@jose64)

    Hola @chupachota.

    Eso es CSS, tienes que añadirlo a las páginas que quieras, para añadirlo a la tienda tienes que añadirlo para el ID de la página de tienda en el CSS personalizado del tema. Eso, de acuerdo a lo que quieras hacer, será más complicado o menos. En la web que muestras le asigna a cada sección que va a ir con esa decoración un nombre.

    Tienes que buscar una clase específica o un identificador que limite dónde quieres ponerlo y añadirlo en el CSS personalizado.

    How to apply CSS on specific page/post

    Iniciador del debate chupachota

    (@chupachota)

    he añadido el fondo de papyro con la transparecia al encabezado, pero queria que se superpusiera a la foto que hay debajo. No se como conseguir eso, se muestra transparente pero no se superpone a la foto de abajo, como se puede ver en el enlace:link

    Moderador Jose Luis

    (@jose64)

    Hola.

    El enlace es de una vista previa, nosotros no podemos verlo. Para hacer lo que quieres tienes que usar distintas capas y superponer unas a otras, para eso tienes que usar la propiedad CSS z-index:

    Entendiendo la propiedad CSS z-index

    fran

    (@circunovo)

    Buenas!
    A ver si esto te ayuda. Descarga esta otra foto, es la misma que la anterior, pero adaptada al tamaño de la cabecera. Yo la he probado desde el inspector del navegador y parece que se adapta bastante bien.
    papiro_ancho_header

    El codigo para colocar la imagen hace varias cosas, aparte de colocar la foto, la alinea al centro -tanto vertical, como horizontalmente, evita que se repita -horiz. y vert.-, y le dice que se adapte al cover…esto ultimo hace que se amplie demasiado (la primera foto, que era muy pequeña) y se pierda el efecto de papiro.
    papiro-cabecera

    Prueba con la nueva foto que te digo mas arriba y nos comentas que tal funciona.
    Si cambias el alto del menu, para mi gusto es demasiado el que tiene ahora, seguramente tambien te dara problemas esta ultima foto…
    Un saludo.

    • Esta respuesta fue modificada hace 7 meses por fran.
    • Esta respuesta fue modificada hace 7 meses por fran.
    • Esta respuesta fue modificada hace 7 meses por fran.
    • Esta respuesta fue modificada hace 7 meses por fran.
    • Esta respuesta fue modificada hace 7 meses por fran.
    Iniciador del debate chupachota

    (@chupachota)

    pero eso se puede conseguir con elementor free?(no elementor-pro me refiero)

    fran

    (@circunovo)

    «Teoricamente» solo tienes que cambiar la foto que pusistes de fondo, por esta ultima que te deje mas arriba. Si conseguistes poner el primer papiro (que era mas pequeña) con la version free…entiendo que poner esta nueva foto sera igual.
    Nunca he usado elementor asi que no sabria decirte los pasos.

    Iniciador del debate chupachota

    (@chupachota)

    en primer lugar gracias por la ayuda. He conseguido hacer un bloque con el plugin de elementor «elementor header and footer builder» e insertarlo en la cabecera de dicha pagina. Pero no consigo hacer una cabecera de manera que se inserte automaticamente en todas las paginas.

Viendo 12 respuestas - de la 1 a la 12 (de un total de 12)
  • El debate ‘como se pueden obtener estos acabados en papiro?’ está cerrado a nuevas respuestas.